Skip to main content

WireKit v2.65.0

Minor release

Minor. Form components follow the form around them: a reset returns them to the value they were rendered with, a field outside its form joins it through form, a label of yours names it, a validation error finds a field with a nested name, a required component stops an empty submit, and a disabled fieldset locks every component inside it. A value echoed into a tag reads the same as a bound one, and a choice bound to a number or an id shows and sends the right value. A Cancel button of your own can close a modal or a drawer as a dismissal, a button the kit names itself says which field or item it acts on, and the panels of menus, popovers and pickers keep every entry reachable on a short screen.

Added

  • A Cancel of your own can say it was a dismissal: dismiss on modal.close and drawer.close. A close control of your own closed the dialog the way a finished action does and announced nothing, so a page that cleans up after wirekit:modal-dismissed or wirekit:drawer-dismissed missed its own Cancel button. With dismiss it closes as a dismissal, so the focus goes back to the control that opened the dialog, asks nothing about changed fields, because pressing Cancel is the answer, and sends the event with via: 'cancel'. A close control without it works as before.
  • disabled on rating, editor and inline edit. The three took no disabled, and the attribute landed on their outer element, where nothing read it: the stars and the arrow keys still changed a rating, the editor took typing, the pencil opened the inline editor, and a surrounding form submitted each value. With disabled they are out of use the way the other form components are. A rating keeps its one tab stop and is announced as unavailable, the editor shows its document dimmed without a toolbar, the inline edit keeps its value readable and its pencil disabled, and none of them is submitted.
  • Buttons that put a token into a field: tokens on input. A field that takes variables, such as a code template with {YYMMDD}, could offer them only through buttons that asked the server to append one: a request per click, and the token always at the end. tokens takes a list, or a map of each token to what it stands for, and draws a button per token under the field. A click puts the token at the caret the reader placed, over their selection, or at the end before they placed one, in the browser. The field hears input and change, so wire:model and x-model take the value at once. A token that would pass maxlength is refused, and a disabled or read-only field takes none.
  • A hover card raises wirekit:hover-card-opened when it opens. A card that loads its content on open had nothing to listen for but its internal state. The event rises from the card once per opening, so a listener on an element around it can start the load.
  • An entry of an overflow nav can stay in the rows, and a divider can follow it. pinned on an item keeps it out of the menu, as the current entry stays, and divider draws a line after it that is measured with the entry and leaves with it.
  • The "+N" button and the menu of an overflow nav take your names. They read "3 more links" and "More links" in every application. more-label takes the count as :count and a singular and a plural as one|many, or a translation key, and menu-label names the menu. Without them both read as before.
  • A sticky page header can reach over the side padding of its scroll box. Where the scrolling element carries the page margin as padding, content that scrolled under the header showed beside it. Set --wk-page-header-bleed to that padding and the sticky header covers it. Unset, the header keeps its width.
  • locale on product card. Its price followed the application's locale whatever language the page was in, so a page in European Portuguese showed it in the Brazilian form. The prop reaches the price.
  • The empty-state link of a select can navigate with Livewire. empty-navigate draws the empty-href link with wire:navigate, so an application that changes screens that way no longer reloads the page from it. A link to a place on the same page never takes it.

Fixed

  • A form reset returns every form component to the value it was rendered with. A reset button, or form.reset(), put the native fields back and left the components that keep their value in a hidden field where the reader had moved them: a rating, a segmented control, a multi-select, a tags input, a range slider, a calendar, an image compare, a pricing table, a data table and a status matrix went on sending the changed value. A combobox, an OTP input, an editor and a color picker showed something other than what they sent, and a phone field lost its number. Each now sends and shows the value it was rendered with, also when it joins the form from outside it through form, and a reset that a listener cancels leaves it as it was. Resetting the form describes it.
  • A value echoed into a WireKit tag reads the same as a bound one. Blade escapes an echoed value before the component receives it, and many components wrote it escaped a second time: label="{{ $name }}" showed Tom's orders & returns where :label="$name" showed "Tom's orders & returns", in text, in attributes and in the settings of a script. The value of a radio, a combobox, a date picker, a time picker, a color picker, a segmented control, an inline edit and a calendar was submitted in that form. Echoed and bound values now read the same, also through a component of yours that hands its attributes on. A bound text that holds one of those escapes as literal text, such as &, now shows the character. A value echoed into a WireKit tag has the details.
  • A field is sent under the name you bound, also when the name holds a quote or an ampersand. :name="$name" holding a'b"c&d was sent as a'b"c&d by an input, a textarea, a select, a toggle, a checkbox, a time picker, a range slider, a phone field, an OTP input, a number input, a calendar, a segmented control, a password input, a rating, a multi-select and a tags input, so the server, old() and the validation error knew the field under a name your application never used. The name now arrives as you bound it.
  • Two instances of a date picker, a file upload, a calendar, a data table, a status matrix, a notification center or a filter builder on one page keep their ids apart. With the same name, bound to the same property, or as two calendars without a name, the second instance wrote the ids of the first, so its label, its hint or the heading that names it belonged to the first one. The first instance keeps its id; a repeat on the page ends in -2.
  • Two fields with the same name label their own controls. The second field's label pointed at the first field's input, textarea or select, so a click on it focused the first and the second control had no name. A field also names an input that carries an id of its own now.
  • The editor shows where the focus is in a Windows contrast theme. Forced colors remove the ring around the editor, and its writing surface showed only the caret. It now draws an outline in the system color there, as every other field does.
  • A slider, a number input and an input of type number or range keep a value set while a request is out. Bound to an int or float property, the field gave its value as text, and Livewire took the server's typed answer for a change made on the server and wrote it over the newer value: a slider dragged with pauses over a slow connection jumped back, and its last value never reached the server. Where the property is declared int or float, the binding now reads the field as a number, so wire:model.live goes out as wire:model.number.live. A property without a type, or a string one, gets the text as before.
  • A rating, a segmented control, a select, a radio and the ends of a range slider bind an int or float property as a number too. They sent their value as text, and Livewire's typed answer overwrote a newer choice: a second choice made while the answer to the first was out was never sent, and a select or a radio jumped back for a moment. An enum backed by int now counts as a number for every field that binds one, the slider and the number input included. A string, an untyped property and an array are left as they are.
  • A combobox and a multi-select bound to ids show their options. Both compare their options as text, and a value bound to an int property or an array of ids arrives as a number. A combobox without search showed no text, a searchable one emptied its field, and a multi-select showed [1, 3] as bare pills, offered both options again and added "1" beside 1 when it was checked. A number and its text now name the same option.
  • A form field shows its validation error when its name is nested or a list. Laravel stores the error of a field named items[0][qty] as items.0.qty, and the error of tags[] as tags or tags.0, and the form components looked it up under the name as written. A form of rows therefore came back from a failed submit without a message and without aria-invalid at the fields that were wrong, in every input, select, checkbox, picker and slider. The fields now show the message under the path Laravel uses. A range slider with a hint also names that hint for both thumbs again when there is no error.
  • x-wk-unsaved counts a field as saved only when it is. It compared each field with the component's state, which every request moves, so a save the server refused with a validation error, or any other request, such as a button that adds a row, cleared the frame, the hint and the question although nothing was stored. A field now counts as saved after a request that sent it and came back without a validation error, or when the server wrote its value. .until-saved counts only a wire:submit of the field's form that comes back without an error, and a wirekit:saved event. What Counts as Unsaved and Counting Only a Save describe it.
  • A result brought into view with x-wk-scroll-into-view arrives in WebKit and keeps the focus through the next render. The directive scrolled and then focused, and in that order WebKit stopped the glide: a key shown once at the top of an application's scrolling main area stayed far above the view with the focus on it. It focuses first now, and a region still out of view once the glide has had its time comes in with a jump. The tabindex it gives a region that cannot take the focus also survives Livewire's next render while the region holds the focus, where it was removed and the focus went to the page, and when one render brings several regions, the first on the page comes into view rather than the last.
  • A required component that sends its value through a hidden field stops an empty submit. A browser validates no hidden field, so a required rating, multi-select, tags input, OTP input and editor said they were required and submitted empty, a calendar dropped required, and a combobox accepted typed text that matched no option. Each now stops the submit as a native field does: the browser's own message stands under the control, the control is marked invalid, and the first invalid field of the form takes the focus.
  • A disabled <fieldset> locks the components inside it. <fieldset disabled> disables native controls only, so the handles of a range slider, the text of an editor, a click on the value of an inline edit, the rows of an open multi-select and a drop on a file upload stayed in use in a section the page had locked, and with wire:model the change reached the server. They now follow the fieldset as a native control does, also while Livewire disables it for the length of a request, and come back when it is enabled again. The handles of a range slider leave the tab order and say they are unavailable. A Disabled Group shows it.
  • A one-time code filled in at once reaches every box of an OTP input. The code a phone offers from a text message, a password manager and an input assistant put the whole code into one box, and the component kept its first digit or none: WebKit, the engine of Safari and of every browser on an iPhone, cut such an insertion to one character, and a code set as the box's value was cleared. It now spreads from the first box the way a paste does. A key typed into a filled box replaces its character, and a refused key clears the form's value along with the box.
  • An OTP input with justify="stretch" in a container that fits its content is as wide as its cells. Each cell reported the default width of a text field, so a card with w-fit around the row grew to cells of twice their size. The row now reports its cells at their size, and in a container of fixed width it fills the width as before.
  • A form component outside its form reaches it through form="…". A field in a table row or a sidebar joins a form elsewhere on the page with the form's id, and many components lost the attribute on the way to the field they submit: rating, segmented control, combobox, multi-select, tags input, range slider, file upload, OTP input, phone, editor, the color picker in its popover form, and the components that keep a value of their own in a hidden field: calendar, data table, filter builder, image compare, status matrix, pricing table and notification center. The form received nothing from them, without an error. Each now hands form to every field it submits. Fields outside the form shows the pattern.
  • An inline edit inside a form no longer submits a field of its own. Its control was named after its id (inline-edit-control, inline-edit-2-control and so on), so a surrounding form submitted one field per inline edit, under a name that followed the order on the page. The control takes no name now, and the confirmed value still reaches your component through the events. An input, textarea, select or number input given name="" renders no name attribute, where it rendered the empty one HTML does not allow.
  • A button the kit names itself says which field or item it acts on. A form with a new password and its confirmation offered two buttons called "Show password", and a row of filter chips was a row of buttons called "Remove", which a screen reader's list of buttons and a reader who uses speech input cannot tell apart. The dismiss button of a badge is now "Remove Design" for a badge that reads Design, and the clear and copy buttons of an input are "Clear Email" and "Copy Email" on a field labeled Email. The clear button of a combobox, the show-password button of a password input, the copy and clear buttons of a color picker and the Reorder button of a kanban column name their field or column the same way. The name is the field's label, its aria-label or the label of the field around it, the steppers of a number input take an aria-label as well, and a control without a name keeps the old wording. A dismiss-label or clear-label you pass still wins, and on a cross-column board, where every Reorder button does the same thing, each one stays "Reorder".
  • A form component named with aria-labelledby carries that name on its control. Rating, editor, OTP input, multi-select, tags input, file upload and the color picker in its popover form kept their own name, such as "Rating", the field name or the placeholder, so a page that names a field after a heading or a text of its own had the component's name read out instead. The rating's own page recommends aria-labelledby.
  • A label of yours alone names a toggle, date picker, slider or color picker. Without a label these name their field after its name, and a <label for> of yours pointing at the id you gave them lost to that name (the toggle) or had it added after its own words (the others). With an id of yours the fallback name steps aside, as it already did on the tags input and the multi-select.
  • A widget named with aria-labelledby carries that name where a reader meets it. The calendar and the filter builder become a group named by it, the data table and the status matrix name their table and their scroll region, the image compare names its slider, and the notification center names its panel, so the trigger keeps announcing the unread count. The reference stood on their wrapper, where it named nothing a reader lands on.
  • An aria-label or aria-labelledby of yours names the element a reader meets in every widget. Many widgets kept both on their outer element, which has no role, while the element with the role kept a default name such as "Tabs", "Options" or "Popover". Your name now reaches the tablist of tabs, the menus of a context menu and a dropdown, the dialog of a popover, a hover card and a lightbox, the log of a conversation, the meter of a strength meter and of a usage meter, the field of an inline edit and the search field of a command palette. A scroll area, a code block and an announcement banner become a named region, and a wizard, a collapsible and the thumbnails of an image gallery become a named group. The calendar, the filter builder, the data table and the notification center take an aria-label where the entry above puts an aria-labelledby. Without a name of yours nothing changes.
  • The tab stop a tooltip makes of its trigger is a named button. Around text or an icon, the trigger the tooltip makes focusable had no role, and around an icon alone no name at all. It is a button now, named by its words or, around an icon alone, by the tooltip's text, and Enter or Space shows the tooltip at once. Around a disabled control it says the control is unavailable before the tooltip says why.
  • The parts that make a control recognizable reach 3:1 against the page. The month and year selects of a calendar with selectable-header, the track of a slider and of a range slider, and the ring that shows a status matrix switch as off were drawn in the light border of panels and dividers, at 1.09 to 1.57:1, where WCAG 2.1 asks 3:1 of what identifies a control or its state. They now take the border every form control has, --color-wk-border-strong: the selects match the select, the tracks show how far the range reaches, and an off switch is a visible ring.
  • A number input says when leaving it changed what you typed. The field holds a typed value to min and max when you leave it, and it did so without a word: 150 in a field that ends at 99 became 99, and the form sent 99. A line under the field, also announced to a screen reader, now says what happened, "Set to 99, the highest value allowed.", and it goes away with the next keystroke. The value is held to the bounds as before.
  • A context menu and the panels of a menubar, a dropdown, a popover, a hover card, a color picker, a notification center, a filter builder and a navigation menu keep every entry reachable on a short screen. On a phone held sideways or a page zoomed to 400%, a panel taller than the room near its trigger ran past the bottom edge, where focusing an entry scrolled nothing, and the color picker's and the notification center's panels could not be reached at all. Each panel now takes the height it has room for and scrolls inside, and a context menu first moves up into the window, as a native one does; where there is room, nothing changes.
  • An optimistic control whose action ends without an outcome rolls back. A Livewire method marked #[Json] that throws or fails validation ends with none of the outcomes the control waits for, so the control stayed optimistic for good: busy, outlined as pending and showing a value the server never agreed to. Such an ending is a refusal now, with the rollback and the announcement a refusal has.
  • A server search of a combobox or a multi-select, and a server sort or search of a data table, end their wait when the request is lost. Offline or on a dropped connection, Livewire reports the failure on a path neither listened to, so they stayed busy and kept saying "Searching" or "Loading results" until the page was loaded again. They now end the wait however the request ends.
  • A failed server search says so, and the same text can be searched again. A combobox or multi-select whose search the server refused, or that was lost on the network, kept showing the results of an earlier search or "No results", and never sent the same text again. While the field holds the failed text, the panel and the status region say "Search failed. Try again.", and the next keystroke or opening sends it again.
  • A sortable kanban column says where a card is when the server puts it back. A move the server refuses comes back in its render, and the card jumped back without a word while a screen reader kept the drop it had announced. After that render, a card that is not where it was announced is said to be back, such as "Could not save. Back at position 2 of 3." A card without a data-sortable-id is not followed.
  • Slots that may hold paragraphs or a list keep them inside the component. The description of an alert dialog, the feature slot and the description of a call to action, an empty state, a pricing tier and a product card were paragraphs, and a browser closes a paragraph before the first paragraph or list inside it. Those came out after the component, outside its styling, and the description of an alert dialog was read only up to them. The slots are blocks now, and text alone looks as before.
  • A page progress bar ignores a navigation that was canceled. A wire:navigate visit that a listener canceled, such as the unsaved-changes question answered with stay, started the bar, and it stood near its end until the next real navigation. The bar now starts only for a navigation nobody canceled.
  • A date picker, a time picker or a date or time input bound to a date object warns you. Livewire sends a date object in a form a browser's date field does not take, so the field stayed empty and emptied again after every answer of the server, and the date picker's page recommended that binding. WireKit now logs a warning naming the binding while APP_DEBUG is on, and in the console. The pages say to bind a string in the field's own format.
  • A toggle or a single checkbox bound to a number warns you. A box bound to int $active = 1, or to a column without a boolean cast, showed unchecked when the page loaded and did not follow a value the server set. WireKit logs a warning for that binding while APP_DEBUG is on, and in the console, and both pages say to bind a bool.
  • A slider bound to a property that holds null shows the value its thumb stands on. A browser puts such a slider in the middle of its scale, and the value shown beside it said the minimum until the first answer of the server.
  • An indicator keeps its badge on its target in a stack, a flex column and a grid. There the indicator stretched to the width of the container, and the badge, placed against it, sat at the container's far edge instead of on the bell or the avatar it belongs to. The indicator is now as wide as its target in any container. To fill the container, give the indicator and its target class="w-full", and the badge stays on the target's corner.
  • A command palette with a hotkey of one character, such as /, lets the reader type that character. The hotkey listened on the whole page, so a slash typed into a text field opened the palette and its search field took the rest of what was typed. A hotkey without cmd, ctrl or alt now does nothing while the key goes into a field, a textarea, a select or an editable element, and opens the palette from anywhere else. alt (or option) and shift in a hotkey are required as written, where they were dropped and alt+k answered a bare K.
  • The search field of a command palette states the palette's shortcut. The trigger showed the shortcut to sighted readers only, and nothing carried aria-keyshortcuts. command-palette.trigger takes hotkey, defaulting to the palette's, and its field states it.
  • A countdown with variant="segments" stops its change animation a few seconds after it appears. The box pulse and the text flash played on every tick for as long as the page stayed open, so the countdown blinked with nothing on the page to stop it. They now play for the first seconds and stop, the value keeps ticking, and :animate="false" still turns them off from the start.
  • A scroll-to-top button appears in an application shell with viewport. There the window does not scroll, the main region does, and the button watched only the window, so it never appeared, and a click would have scrolled a window with nowhere to go. It now follows the region that scrolls the page: the scroll container it stands in, then the shell's main region, then the window, with threshold counted in that region's height.
  • A context menu opened from the keyboard hands the focus back to its trigger area when it closes. When the area holds no control of its own, the area itself is the tab stop that Shift+F10 opens the menu from, and Escape or the choice of an entry left the focus on the page instead, so a keyboard reader started again at the top. The focus now returns to the area, and to the control inside it where there is one.
  • The trigger area of a context menu that is its own tab stop says a menu is there. When the area holds no control, it is the stop that Shift+F10 opens the menu from, and it had no role and no hint. It is a group now, described by "Shift+F10 opens options" in the application's language.
  • The value field of a color picker tells you in text when it cannot read a value. It turned red and kept its message for screen readers only. The message now stands under the field for everyone and gives an example it can read, the last color in the format the toggle shows: "Not a valid color value. Example: #3b82f6".
  • A color picker shows and says a copy that failed. Outside a secure context, or with the clipboard refused, the copy button did nothing visible and said nothing. It now shows a warning for a moment and announces "Copy failed".
  • A range slider holds its start values inside its scale. A min-value below min, a max-value above max or two values swapped put a thumb beside the track, announced a value outside the thumb's own range and were sent with the form as they came, such as a minimum of 80 over a maximum of 20. A value outside now starts at the nearer end, swapped values are put in order, and the two handles start at least one step apart, the distance they keep while they move. A range the server sets is held the same way.
  • A segmented control and a calendar write their name on their field only. The name also stood on the element around the segments or the days, where HTML does not allow it, so a lookup by [name="…"] or getElementsByName() found that element first and read no value from it.
  • A numeric prop that holds no number takes its default instead of breaking the page. A rating with max="abc" and a table skeleton with cols="abc" rendered until PHP ran out of memory, and a progress bar, a circular progress, a range slider, a slider and the line skeletons threw an error for a text or an empty string in a numeric prop, which happens when the value comes from data, such as :max="$settings->scale". Such a value now takes the component's default, and a progress bar whose max is zero or less counts out of 100, as the radial progress already did.
  • Popups and overlays inside @persist keep closing on every page change. A dropdown, popover, tooltip, hover card, context menu, menubar, navigation menu, command palette or overlay that Livewire carried to the next page with @persist closed on the first page change and stayed open over every later one, and a chart inside @persist came to the next page empty. Both now keep working across page changes.
  • The attributes you write for the field of a form control reach that field. autofocus, inputmode, enterkeyhint, autocapitalize, spellcheck and maxlength landed on the outer element of a multi-select, tags input, inline edit, editor, OTP input, file upload, rating, range slider and segmented control, where none of them does anything. Each now goes to the element it applies to, and each page says which.
  • The sort button of a table header takes the touch height. It fills its cell with one line of text and the cell's padding, so on a touch screen, and inside an element with data-wk-touch, it stayed 36 pixels tall where every button there is 44. It now takes the height a button takes there.
  • autocomplete reaches the field the browser fills. On a multi-select and a tags input it landed on the outer element, and on an OTP input on the group around the boxes, which kept one-time-code. It now reaches the boxes of a code, and the search fields of the list components keep the browser's suggestions off, as the combobox's already did.
  • An x-model that would bind the wrong value is dropped with a warning. On an OTP input and a range slider it bound whichever hidden field changed last, one box of a code or the upper end of a range, and on a phone field it was dropped without a word. It is left off now with the warning other components give in that case, and these bind with wire:model. An x-model on a WireKit component explains it.
  • A password input with the strength meter hands the password to your x-model. With the meter on, your binding gave way to the meter's and received nothing. Your model, the meter and the field now hold one value.
  • A phone field writes inputmode once, and a value of yours replaces its tel. Yours stood beside the default, and the browser kept the default.
  • An image gallery without a lightbox carries your id. It wrote its own first, and yours was lost.
  • A modal writes your aria-description, aria-roledescription and aria-valuetext escaped once. A screen reader read their escapes.
  • The row with the "+N" button of an overflow nav is as tall as an entry. On a touch screen the button's touch size made its row taller than the others. It keeps the height of an entry, with a touch area of 44 by 44 pixels.
  • A stage card reads its count with its unit. A screen reader heard "3" without "items".
  • A sentence with a count takes the form the count asks for, in every shipped language. A count of one read "1 items" in a stage card, "Showing 1 to 1 of 1 results" in pagination, "1 out of 1 stars" in a rating, "Maximum of 1 tags reached" in a tags input and "1 more events" in an event calendar, and the counts of a conversation and a notification center took the plural in several languages. Each sentence now has a form per number in every catalog. The keys keep their names, so an override in your application's catalog still applies.
  • The "+N more" button of an event calendar month is named with the text it shows, in every language. In German, Spanish, French, Dutch and Portuguese its name did not contain the visible text, "3 weitere Termine am …" beside "3 mehr", so a reader who said what they saw to voice control found no button. The names now begin with the shown text.
  • A notification center grouped by time or by type puts the items without a group under a heading in the application's language. Every other heading comes from your items, and this one, "Other", was written into the component's script, so a German application showed an English word over those items that no translation could change. It now comes from the translation catalog, "Sonstige" in German, and the page says that the type of your items labels the filter row and the headings under group-by="type".
  • A chart names a dataset without a label in the application's language, and a pie names none. The Chart.js adapter called such a dataset "Dataset 0" and the ApexCharts adapter "Series 0", in English and counted from 0, and the tooltip of a pie, a doughnut or a polar-area chart showed it in front of every value: "Dataset 0: 78,600". The one dataset of those charts now stays unnamed, since its slices carry the names, and the tooltip shows the value alone. Any other dataset without a label is named "Series 1", "Series 2" and so on, from the translation catalog, which also replaces the "series-1" that ApexCharts wrote into its legend for a series without a name.
  • The ApexCharts tooltip of a chart names the rows of a candlestick, a boxplot and a bubble in the application's language. The names of those rows, which no series carries, were English in every locale, so a German application read "Open", "High", "Low" and "Close" over its prices. They come from the translation catalog now, "Eröffnung", "Hoch", "Tief" and "Schluss" in German, and the quartile symbols Q1 and Q3 stay as they are. In English the first and the last row of a candlestick now read "Open price" and "Close price".
  • The live region of a range slider speaks the application's language from the first moment. Until its script ran, and on a page without JavaScript, it held the English sentence "Range: 200 to 700", and a value with a text of its own as its number. It now holds the translated sentence the script writes, "Bereich: 200 bis 700" in German, with the text of a marked value.
  • The weekday header of a calendar is in the application's language from the first moment. Until its script ran, and on a page without JavaScript, the header read "Mo Tu We Th Fr Sa Su" in every language, and each column named itself in English for a screen reader. The server now writes the names the script writes, "Mo Di Mi Do Fr Sa So" in German, with the full name of each day for a screen reader.
  • The file sizes of an attachment and a file upload name their unit in the application's language. The number followed the locale and the unit did not, so a French page read "2,3 MB" where French counts in octets. The units come from the translation catalog now: "2,3 Mo" and "2,0 Ko" in French, while German, Spanish, Italian, Dutch and Portuguese keep the symbols.
  • The inline countdown updates its value in place. The animate prop promised a rise and fade on this variant that never played in a browser, and the value's node was rebuilt on every tick for it. The page now says that the inline variant changes its value without animation, and the node is no longer rebuilt.

Documentation

  • The range slider, segmented control and editor pages say that a <label for> cannot name their group or the editor's surface, and that label, aria-label or aria-labelledby do, as the rating's page already said.
  • The countdown page says that a year counts as 365 days. A deadline years away shows one day more for each leap day in between, and the page says so beside units, where leaving years out gives a count of days that matches the calendar.
  • The strength-meter example of the password input declares a new password. It rendered with the component's default current-password, so a copy of it on a registration form made a password manager offer a saved password instead of creating a new one. The example now passes autocomplete="new-password", as the page tells you to.
  • The carousel example with a vertical orientation fits a phone. It gave the carousel a fixed width of 24rem, so a copy of it pushed a page on a 320 pixel phone 76 pixels sideways. It now takes the full width up to 24rem.
  • The QR code example with a logo keeps the logo visible in dark mode. The code stays black on white in both modes, so a scanner can read it, and the logo in its white box took the accent color, which turns nearly white in dark mode. The logo now takes the color of the code.
  • The structured data examples import the Schema builders in the view. Copied into a Blade view, they called Laravel's database facade of the same name and failed. Each now begins with @use('Pushery\WireKit\Schema\Schema').
  • The toast page says how a toast reaches the page a redirect leads to: keep the region in @persist for a wire:navigate redirect, or flash the toast to the session and dispatch it on the next page.
  • The pagination page warns that a pager with per-page-options breaks a form it sits in. Its page-size choice is a form of its own, and a browser does not nest forms. Place the pager after the form, or bind the choice with wire:model.
  • The sidebar page warns that a sidebar inside @persist keeps the current item it was rendered with after a wire:navigate visit.
  • The dropdown, menubar and command palette pages say how to state a key your application binds. The shortcut hint of an item is hidden from screen readers, and the key goes on the item as aria-keyshortcuts.

Components

Every component this release changes, each linked to its page: Alert · Alert Dialog · Announcement Banner · App Shell · Attachment · Badge · Calendar · Chart · Checkbox · Code Block · Collapsible · Color Picker · Combobox · Command Palette · Context Menu · Conversation · Countdown · CTA · Data Table · Date Picker · Drawer · Dropdown · Editor · Empty State · Event Calendar · FAB · FAQ · Feature · Field · File Upload · Filter Builder · Hover Card · Image Compare · Image Gallery · Indicator · Inline Edit · Input · Kanban · Lightbox · Menubar · Message · Modal · Multi-Select · Navigation Menu · Notification Center · Number Input · OTP Input · Overflow Nav · Page Header · Page Progress · Pagination · Password Input · Phone · Popover · Pricing Table · Product Card · Progress · Radio · Range Slider · Rating · Reaction · Resizable · Scope Switcher · Scroll Area · Scroll to Top · Segmented Control · Select · Skeleton · Slider · Stage Card · Status Matrix · Stream · Strength Meter · Table · Tabs · Tags Input · Textarea · Time Picker · Toast · Toggle · Toggle Button · Tool Call · Tooltip · Tour · Unsaved Hint · Usage Meter · Wizard