Skip to main content

WireKit v2.62.0

Minor release

Minor. Menus, lists and tooltips inside a modal or a drawer work from the keyboard: Escape closes only the innermost of them, a menu or a list opened in a dialog takes the focus and the click, and Tab from a menu stays inside the dialog. Sorting, decimals and dates in the browser follow your application's locale, searches ignore accents, a disabled or read-only field stays as it is, and controls that hide or disable themselves no longer lose your place. wirekit:doctor names a published config that still reads its WIREKIT_* switches through env().

Added

  • wirekit:doctor names a published config that still reads a WIREKIT_* variable through env(). Since 2.59.0 the published config reads each one through EnvValue::get(), which keeps the default for a blank line such as WIREKIT_DEDUPE_IDS= in .env; env() returns an empty string for it, and a config published before 2.59.0 keeps calling env(). The doctor lists those variables as information and names the replacement.

Fixed

  • A menu or a list inside a dialog works with the keyboard. A dropdown or a combobox inside a modal or a drawer opens its panel at the end of the page, and the dialog pulled the focus back out of it, so the arrow keys never reached an item. In a modal that cannot be dismissed, a click on a menu item or an option did nothing either. The dialog now counts such a panel as its own while the control that opened it is inside. Pressing Tab in a context menu or a menubar menu, or on the last control of a filter builder's popover, a hover card or a notification center's panel, moves on to the next control of that dialog rather than to the page behind it.
  • Escape closes the innermost layer only. Pressing Escape in a dropdown, a combobox list, a menubar or a notification center inside a modal or a drawer closed the dialog as well, with anything typed into it, and one Escape closed two stacked modals at once. The first press now closes the menu, the list or the panel, and the next one the dialog. A tooltip, a hover card or the title tooltip of an event calendar closes on Escape wherever the focus is, and the dialog around it stays open. A running tour ends on Escape and leaves a dialog beneath it open. A control of your own that closes something on Escape keeps the dialog open by calling preventDefault() on that key press.
  • A disabled combobox, phone field, multi-select, tags input, segmented control or popover color picker is left out of the data a form submits, as a disabled native field is. Each carried its value in a hidden field that stayed enabled, so a classic form sent the value of a field you had disabled, while a range slider and an OTP input already left theirs out. With wire:model nothing changes, since no form is submitted. If your application reads a locked value from a classic form, send the value in a field of your own, or give a phone field readonly rather than disabled.
  • A range calendar submits its two ends only. It also sent the combined value under name, ahead of name[start] and name[end], and PHP keeps only one of a string and an array sent under the same name, so a handler received the two ends and never the combined value the documentation promised beside them. The form now receives name[start] and name[end], as a range date picker's does, and wire:model still receives the combined value.
  • Charts format numbers and dates in your application's locale. Chart.js received no locale and grouped its numbers the way the reader's browser does, and the dates in an ApexCharts tooltip were written in the browser's language, beside components that followed the page. Both follow app()->getLocale() now; on a Chart.js chart, a locale in your own options still wins.
  • Tables sort text in your application's locale. A data table compared characters by code, so "Äpfel" sorted after "Zucker" and "Item 10" before "Item 9"; a sortable table sorted in the language of the reader's browser. Both follow app()->getLocale() now, with numbers inside text in natural order.
  • Decimals follow your application's locale in the browser as well. The file sizes of a file upload, the rounded values in an ApexCharts chart tooltip and its decimal axis ticks always wrote a decimal point; on a German page they now read 1,5 MB and 58,91 ms.
  • Searches ignore accents. Typing munchen finds "München" and istanbul finds "İstanbul" in a combobox, a multi-select, the filter of a data table, the filter of a reading spine and the type-ahead of lists and menus. Even istanbul, which is how the name is written in lowercase, did not find "İstanbul" before.
  • The character count of an editor is announced in your application's language. It was an English sentence in every locale, and "1 characters remaining" in English too.
  • A stream that fails without a reason announces the failure in your application's language. It announced "Stream failed" in English in every locale.
  • An event calendar opens on its date in every time zone. date="2026-06-01" was read as midnight UTC, so a reader in the Americas saw May, and a week view opening on a Monday showed the week before. A YYYY-MM-DD date, including an event's start, is now read as that calendar day wherever the reader is.
  • A disabled multi-select is disabled. disabled landed on its wrapper, where it has no meaning, so its search field took focus and a click on the field opened the list. The search field, the buttons that remove a choice and, in the list layout, the checkboxes are disabled now, and the field dims.
  • A field's own buttons follow the field's state. The − and + of a disabled or read-only number input stepped it and told a bound model, the X of a read-only clearable input emptied it, a disabled file upload took a dropped file and started the upload, and a disabled password input kept its show-password button in the tab order. Each is out of use now, and the handlers check the field when they run, so a state Livewire sets later holds as well. The copy button of a read-only input stays in use, since copying changes nothing.
  • The hint or error of an OTP input and a phone field reaches every part of it. The first box and the number carried it, so a reader who entered at another box, or went back to the country, heard that the field was invalid and not why. The group around the parts carries it now, the way a range slider's group does.
  • A notification center's unread dot stays visible under forced colors. The mode paints every fill in the page's own color, so the dot disappeared, and under a theme whose heading weight is the body weight an unread row then looked like a read one. The dot is drawn in the text color in that mode now.
  • Dismissing an alert, a badge or an announcement banner from the keyboard keeps your place. The close button hid with the element and took the focus with it, so the next Tab started somewhere else on the page. The focus now moves to the next control after it, and in a row of dismissible badges to the next badge's close button.
  • Controls that hide themselves keep your place. The clear button of a combobox, Clear in a data table's selection bar, Mark all read in a notification center, +N more in an event calendar and scroll to top each hid once used and let the focus fall to the page. They now hand it to the field, the select-all checkbox, the first notification, the week view and the top of the page.
  • The arrows at the ends of a carousel and a branch switcher keep your place. Without loop they went disabled under the focus the moment they reached the last slide or variant, and the focus fell to the page. They are marked aria-disabled at an end now.
  • A copy, a refused copy and a search without results are announced. The "Copied to clipboard" and "Copy failed" of a clipboard button and the "No results" of a combobox sat in live regions that appeared together with their text, which a screen reader does not announce, and a multi-select said "No results" only in a row the keyboard had to reach. Each is now spoken from a region present from the first render.
  • wirekit:verify notices a build older than the installed WireKit templates. It passed any bundle that carried WireKit rules at all, so after a composer update whose templates use a new class, the check was green while that class was missing from the build and the component rendered without it. It now adds a WARN line with both times and asks for npm run build; a running Vite dev server is left alone.
  • Running wirekit:theme again leaves app.css as it was. Each run added one more blank line in front of the theme block, so a second run on an unchanged file produced a diff without content, and switching back to default left a blank line behind.
  • A required popover color picker can no longer be emptied. With withClear it could be emptied and sent empty, and neither its trigger nor its hidden field can carry a required state; required now turns the clear button off.

Documentation

  • Forms inside overlays. The modal, drawer and popover pages say to put a <form> inside the overlay: its content is moved to the end of the page, so a form placed around it does not contain the fields in it.
  • The examples on the hero, accordion, chat and assistant message pages show inline code as code. A preview is Blade rather than Markdown, so their backticks reached the page as characters; they write <code> now.
  • The marketing landing page recipe writes an ampersand as the character, so its feature grid and the code you copy from it show "Security & compliance" rather than the escaped entity. A static attribute is handed to a component as written, and the component escapes it when it prints it.

Components

Every component this release changes, each linked to its page: Accordion · Alert · Alert Dialog · Announcement Banner · App Shell · Badge · Branch Switcher · Calendar · Carousel · Chart · Clipboard Button · Color Picker · Combobox · Command Palette · Context Menu · Data Table · Drawer · Dropdown · Editor · Event Calendar · FAB · File Upload · Filter Builder · Hover Card · Input · Lightbox · Menubar · Modal · Multi-Select · Notification Center · Number Input · OTP Input · Password Input · Phone · Popover · Reading · Scope Switcher · Scroll to Top · Segmented Control · Stream · Table · Tabs · Tags Input · Tooltip · Tour · Tree View