WireKit v2.65.0
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:
dismisson 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 afterwirekit:modal-dismissedorwirekit:drawer-dismissedmissed its own Cancel button. Withdismissit 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 withvia: 'cancel'. A close control without it works as before. disabledon rating, editor and inline edit. The three took nodisabled, 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. Withdisabledthey 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:
tokenson 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.tokenstakes 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 hearsinputandchange, sowire:modelandx-modeltake the value at once. A token that would passmaxlengthis refused, and a disabled or read-only field takes none. - A hover card raises
wirekit:hover-card-openedwhen 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.
pinnedon an item keeps it out of the menu, as the current entry stays, anddividerdraws 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-labeltakes the count as:countand a singular and a plural asone|many, or a translation key, andmenu-labelnames 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-bleedto that padding and the sticky header covers it. Unset, the header keeps its width. localeon 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-navigatedraws theempty-hreflink withwire: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 throughform, 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 }}"showedTom's orders & returnswhere:label="$name"showed "Tom's orders & returns", in text, in attributes and in the settings of a script. Thevalueof 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"holdinga'b"c&dwas sent asa'b"c&dby 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
idof 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
numberorrangekeep a value set while a request is out. Bound to anintorfloatproperty, 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 declaredintorfloat, the binding now reads the field as a number, sowire:model.livegoes out aswire:model.. A property without a type, or anumber. live stringone, gets the text as before. - A rating, a segmented control, a select, a radio and the ends of a range slider bind an
intorfloatproperty 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 byintnow counts as a number for every field that binds one, the slider and the number input included. Astring, 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
intproperty 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"beside1when 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]asitems.0.qty, and the error oftags[]astagsortags.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 withoutaria-invalidat 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 ahintalso names that hint for both thumbs again when there is no error. x-wk-unsavedcounts 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-savedcounts only awire:submitof the field's form that comes back without an error, and awirekit:savedevent. What Counts as Unsaved and Counting Only a Save describe it.- A result brought into view with
x-wk-scroll-into-viewarrives 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. Thetabindexit 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 withwire:modelthe 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 withw-fitaround the row grew to cells of twice their size. The row now reports its cells at theirsize, 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'sid, 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 handsformto 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-controland 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 givenname=""renders nonameattribute, 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, itsaria-labelor the label of the field around it, the steppers of a number input take anaria-labelas well, and a control without a name keeps the old wording. Adismiss-labelorclear-labelyou pass still wins, and on across-columnboard, where every Reorder button does the same thing, each one stays "Reorder". - A form component named with
aria-labelledbycarries 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 recommendsaria-labelledby. - A label of yours alone names a toggle, date picker, slider or color picker. Without a
labelthese name their field after itsname, and a<label for>of yours pointing at theidyou gave them lost to that name (the toggle) or had it added after its own words (the others). With anidof yours the fallback name steps aside, as it already did on the tags input and the multi-select. - A widget named with
aria-labelledbycarries 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-labeloraria-labelledbyof 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 anaria-labelwhere the entry above puts anaria-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
minandmaxwhen 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-idis not followed. - Slots that may hold paragraphs or a list keep them inside the component. The description of an alert dialog, the
featureslot and thedescriptionof 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:navigatevisit 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_DEBUGis 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 abooleancast, showed unchecked when the page loaded and did not follow a value the server set. WireKit logs a warning for that binding whileAPP_DEBUGis on, and in the console, and both pages say to bind abool. - A slider bound to a property that holds
nullshows 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 withoutcmd,ctrloraltnow 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(oroption) andshiftin a hotkey are required as written, where they were dropped andalt+kanswered 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.takestrigger 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, withthresholdcounted 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-valuebelowmin, amax-valueabovemaxor 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 onestepapart, 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
nameon 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="…"]orgetfound that element first and read no value from it.Elements By Name() - A numeric prop that holds no number takes its default instead of breaking the page. A rating with
max="abc"and a table skeleton withcols="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 whosemaxis zero or less counts out of 100, as the radial progress already did. - Popups and overlays inside
@persistkeep 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@persistclosed on the first page change and stayed open over every later one, and a chart inside@persistcame 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,spellcheckandmaxlengthlanded 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. autocompletereaches 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 keptone-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-modelthat 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 withwire: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
inputmodeonce, and a value of yours replaces itstel. 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-roledescriptionandaria-valuetextescaped 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
typeof your items labels the filter row and the headings undergroup-by="type". - A chart names a dataset without a
labelin 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 alabelis 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
animateprop 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 thatlabel,aria-labeloraria-labelledbydo, 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 leavingyearsout 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 passesautocomplete="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
Schemabuilders 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
@persistfor awire:navigateredirect, or flash the toast to the session and dispatch it on the next page. - The pagination page warns that a pager with
per-page-optionsbreaks 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 withwire:model. - The sidebar page warns that a sidebar inside
@persistkeeps the current item it was rendered with after awire:navigatevisit. - 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