Skip to main content
WireKit

WireKit v2.56.0

Minor release

Minor. A strength meter of its own, a row of links kept to a number of lines with the rest in a menu, rows a reader reorders by dragging or with two arrows, a row that lights up when the server says it changed, and server search in multi-select and combobox. A chart now follows the data its Livewire component renders, a pager offers a choice of page size, a tooltip can take the surface menus use, and an application can make the controls inside an element touch-sized on any pointer, or build its stylesheet from only the components it renders. wirekit:theme and the preset pages now agree on every token both of them set. Most of the fixes came from applications that build on the kit: dialogs, menus, drawers, tooltips and fields that went wrong in ways a reader could see and nothing reported.

Added

  • <x-wirekit::overflow-nav> — a wrapping row of links kept to a number of lines. The links the rows have no room for move into a menu at the end of the last row, behind a button that shows their count, and the current link never leaves the rows. lines sets how many rows the links may take, two by default, and each item can carry attributes for its anchor, such as wire:navigate. Without JavaScript every link is shown, in as many rows as it takes.
  • <x-wirekit::strength-meter> — the display the password input draws, as a component of its own. A step from 0 to max (4 by default), a label that names what is judged, levels for the words, show-level to put the word on screen and announce for a polite status region that speaks a change and not the starting value. It is a role="meter" rendered by the server, so it is complete before Alpine starts, and the step can come from a Livewire render or from x-model. With show-level the bars keep one length whatever the word beside them. See strength meter.
  • Rows a reader reorders by dragging or with two arrows. <x-wirekit::table.reorder> draws a drag handle for Livewire's wire:sort and two arrow buttons that call the method a drop calls, with the row and its new position, disabled where they lead nowhere and named after the row. After the round trip the focus is back on the arrow that was pressed, and table.reorder-head heads the column for a screen reader. See reordering rows.
  • x-wk-flash lights a row up in a tone when the server says it changed. The server writes data-wk-flash (one of the intents) and a data-wk-flash-key that is new with every change, so the same tone twice flashes twice; with data-wk-flash-leave a removed row flashes once more and leaves the page when its flash has ended. A table row flashes through its cells, and under reduced motion the tint appears and holds without fading. The tints are tokens, --color-wk-flash-{tone}. See flashing a row that changed.
  • Server search in multi-select and combobox. With server the typed text reaches your component as search-change once it is long enough (searchMinLength, 2) and has settled (searchDebounce, 300ms), the event the data table's server mode already sends. The results come back through the render, a chosen option keeps its label after the list has moved on, and the list says when it is searching, when there are more results than it shows and when there are none.
  • A chart follows the labels and series its Livewire component renders. A filter that changes the period updates the drawn chart in place, under both adapters, without rebuilding it or replaying its entrance; the chart type and its options stay as first rendered. The page said property-driven updates were unsupported, and it no longer does.
  • A pager offers a choice of page size. :per-page-options="[10, 25, 50, 100]" draws a small select beside the summary. wire:model on the pager binds it and a change goes back to the first page; without Livewire it is a GET form that keeps the query your page links carry. With a choice on offer the pager also renders on a single page, so picking the largest size does not remove the control that picks a smaller one.
  • data-wk-touch gives the controls inside an element the touch sizes on any pointer. A till or a kiosk reports a fine pointer once a mouse is plugged in, and its fields and buttons took the mouse sizes; inside data-wk-touch they take the 44px touch sizes whatever the pointer, and a dialog opened from inside the element keeps them. See touch sizes on any pointer.
  • An application can build its stylesheet from only the components it renders. The package ships one Tailwind source per component, resources/tailwind/<name>.txt, covering the component, its parts and everything it renders; declare one @source per component your views use instead of scanning every template. wirekit:doctor reads your views and names every component they render that no declared source covers. See scanning only the components you use.
  • <x-wirekit::sidebar.collapse-toggle> — the sidebar's collapse control, wherever you put it. In a rail's foot or a top bar it asks the sidebar to fold and draws the state the sidebar reports, for addresses one sidebar by id, and below the shell's lg breakpoint it hides unless always is set.
  • A modal and a drawer say when the reader dismisses them. wirekit:modal-dismissed and wirekit:drawer-dismissed go out on the window with { name, via } for a click beside the panel, Escape and the close button, so a dialog that cleans up on the server hears about it; a close your page asked for stays silent. Escape and the close button now hand the focus back to the opener, as a click beside the panel already did.
  • A navbar row that scrolls instead of folding into a menu. mobile="scroll" keeps the entries in one row at every width and keeps the current one in view, and density="compact" sets small entries with the ones you are not on muted.
  • A page header takes a meta slot for a status or a count beside the title. It is drawn in the title's row after the heading and outside it, so a screen reader does not read it as part of the title.
  • A link can open a new tab without announcing one. :announce-new-tab="false" drops the arrow and the screen-reader hint and keeps the target and rel="noopener noreferrer", for a link that script turns into something else, a dialog for example. See when script turns the link into something else.
  • A stepper can follow a step that changes in the browser. follow names the Alpine property that holds the current step, and the circles, aria-current and the compact form's line follow it. The wizard's indicator uses it.
  • A brand can sit inside a link, and takes a size. :href="false" renders it without a link of its own, and size sets the logo's height: xs, sm (as before), md or lg, or a CSS length such as 1.75rem for a height between those steps.
  • The app shell's height has a name. Set --wk-shell-height on the shell or an ancestor for a height other than the window's; unset, the shell is exactly as tall as before.
  • A table head can break only between its words, or turn on its side. wrap="words" keeps a head's words whole and evens its lines, for heads over narrow columns of numbers; sideways turns a head to read from bottom to top on one line, for many short columns beside a wide one.
  • A table your Markdown pipeline rendered can freeze its first column below a breakpoint only. data-wk-sticky-column-below="md" (or sm, lg, xl, 2xl) does on your own <table> what the table's sticky-column-below does for its own: below the breakpoint the first column stays in place while the rest scrolls, and from that width up the table wraps into its box like any other. The rules ship in the stylesheet, so they use Tailwind's default breakpoint widths. See attribute hooks.
  • A data table says when the reader shows or hides a column. wirekit:data-table-columns-changed carries hidden and visible, so an application can keep the choice with the reader's account, and a hidden list from a later render is followed without rebuilding the table.
  • A slider can show its value on a line under the track. value-position="below" gives every slider in a form the same track length, and data-wk-slider-value marks the value box for styling.
  • An OTP input takes a size. sm 32px, md 40px as before, lg 48px, which clears the touch target on any pointer. dusk and data-* attributes reach the group element.
  • A button takes icon-only-below="xs", a step below sm at 360px, for a bar that fits a phone but not the smallest ones.
  • Text takes leading and wrap. leading sets tight, normal or relaxed on the leading tokens, and :wrap="false" keeps a line whole without cutting it.
  • A tab's badge can carry a tone. badgeIntent on items or on tabs.tab passes one of the badge's intents.
  • A tooltip takes surface="elevated" for the surface menus and popovers use: the elevated background, the body text and the theme's border. The default stays the inverted tooltip. The example the page used to call "Inverted" was this surface, set through two custom properties, and it is now named for what it is.
  • A callout takes title as a prop as well as a slot, the way an alert does.
  • The labeled app rail's icon has its own size. --size-wk-rail-icon-labeled sizes the glyph under a name and defaults to --size-wk-rail-icon, and a long name hyphenates at a syllable where the page's language allows.
  • wirekit:doctor:props reports a named slot passed as an attribute and names the slot to use. Written as :title="…", a slot's value landed on the wrapper as an HTML attribute and the heading was never drawn; the linter now reports it with <x-slot:name>. See the CLI reference.

Changed

  • A list of options with gaps is a map now, in multi-select and combobox. Both decide between a list and a map by the whole array, as select does, so pluck('name', 'id') submits the ids. An array filtered without array_values() keeps its indexes as keys and now submits them; wrap it in array_values() to submit the values.
  • wirekit:theme and each preset's page agree on every token both of them set. Where the command and the page gave one preset two different values, the page's value is now the one the command writes: Material takes indigo-600 as its accent where it wrote the darker indigo-700, and its easing is cubic-bezier(0.2, 0, 0, 1); Cupertino eases with cubic-bezier(0.25, 0.46, 0.45, 0.94); Retro Terminal uses #00ff41 with a #0d0d0d label; and the accent label of Soft, Material and Cupertino is white. Minimal now writes its page's whole block, in light and dark: borders go away and fields take a neutral fill in their place, the text inside a field darkens to stay readable on that fill, panels get a surface of their own so an open menu stands off the page without a shadow, headings are lighter and motion is quicker, and pills and avatars stay round, as they do on the page. Most other pages still set more than the command writes, Retro Terminal's palette among them, so copy a page's block when you want its complete look. The command writes into your app.css, so a preset you applied before keeps its old values until you run it again.
  • A finger scrolls the page on a reading minimap instead of dragging it. Dragging the viewport box maps the pointer onto the scroll position like a scrollbar thumb, and under a finger that scrolled the page the wrong way round. On a touch screen a swipe now scrolls the page natively and a tap on a stripe still jumps to its section; a mouse and a pen drag as before.
  • A modal's and a drawer's body and footer pad all four sides alike. The content starts where the title starts; the sides were wider than the top and the bottom.
  • A tooltip opens on focus only when the focus is visible. A dialog that focuses its first control when it opens no longer shows that control's tooltip; a keyboard focus and a hover still open it.
  • text weight="normal" reads --font-wk-body-weight, so text follows a theme that sets its running text lighter or heavier.
  • A control bound with neither id nor name derives its id from what it is bound to. file-upload, slider and date-picker drew a random id on every render, which Livewire's morph reads as a new element; the id now comes from wire:model (wk-upload-photos) or from the render order, and it is the same on every render. The nameless title ids of the modal, the drawer and the alert dialog follow the same rule.
  • Some class names changed in the rendered markup. The shell drawer transitions translate as well, the modal's and the drawer's padding use one token, and a data table's hidden columns travel in its state carrier instead of x-data. Nothing changes on screen beyond the entries above; it matters only if a test of yours matches on these names.

Fixed

  • An editor bound with wire:model sends its last change when a form is submitted right after it. The field follows the editor 200 ms late, and a submit inside that window sent the text from before the change. Leaving the editor now writes a pending change at once; leaving an editor that did not change still reports nothing.
  • A tooltip restyled on its wrapper keeps its colors when Livewire updates the page while it is open. The update took away the colors the tooltip copies onto its panel, so a tooltip held open under the pointer or by focus came back in the default colors; before 2.54.0 it also lost its position and stood at the end of the page.
  • The arrow keys of a menu walk only the entries that are drawn. In the dropdown, the context menu, the menubar and a submenu, an entry hidden with x-show stopped the arrow keys, and focus stayed where it was.
  • A panel opened inside a dialog stands above it. A tooltip, a popover or a dropdown opened from inside a modal stood under the dialog's layer, and a click on a dropdown entry landed on that layer.
  • A dialog's action row wraps instead of pushing its first action off the panel. The footers of the modal and the drawer and the actions of the alert dialog cut an action off on a phone when the actions did not fit one line; on a desktop they stay one line.
  • A required field Livewire empties after a success no longer turns red. The browser remembers that the reader touched a field when script empties it, so the add-another row painted its field red over a success message; a field the reader empties, or tries to submit empty, is red as before.
  • A file upload's list follows the property it is bound to. A save that sets it back to empty clears the list, and so do a form reset and wirekit:file-upload-reset.
  • The editor no longer reports loading a stored value as an edit. It wrote its own serialization of the document back on load, and the next save stored that rewrite of a document nobody had touched.
  • Multi-select and combobox submit the key of a map with integer keys, pluck('name', 'id') included; they submitted the labels.
  • A lightbox opens from a trigger inside a tooltip, and its embed slide loads under the CSP build. The trigger opened the tooltip instead of the gallery, and the embed frame stayed blank.
  • A horizontal stepper with many steps keeps its words whole in a narrow column. Below 5rem per step it draws the circles with one line naming the current step, instead of breaking every word; a wizard's indicator follows Next and Back.
  • The app shell's drawer slides in instead of standing at its open position in the first frame.
  • A collapsed sidebar shows its names in the phone drawer, and its collapse control leaves the drawer, where it had nothing to fold; the desktop keeps the reader's choice.
  • The phone drawer with a labeled rail beside a menu fits a 320px screen, and a name under a rail icon keeps to the width of its entry.
  • The columns that scroll beside a frozen table column each fit beside it. A value wider than the room beside the frozen column could never be seen whole; a scrolling cell is now capped by --size-wk-table-sticky-cell-max and the frame.
  • An icon-only button stays square on a touch screen and is hit across 44px.
  • An input's clear and copy buttons take the touch target where a finger works them, and readonly paints the muted surface on the input and the textarea.
  • A button as a strip's action keeps to the strip's line on a desktop and on a touch screen, where it stood 8px over each edge; see the announcement banner.
  • A slider's error or hint is a line of its own under the control. It sat in the row beside the track and took the track's room.
  • Scroll shadows no longer flash when a hidden panel is revealed.
  • The page progress bar shows a request that begins while the previous bar is fading out.
  • A reveal taller than the screen appears. A section that could never reach the threshold stayed invisible.
  • A page header whose default slot holds only Livewire's markers renders its title.
  • <x-wirekit::fonts /> writes no font preload into the answer to a wire:navigate, which made the browser fetch the body font again after every navigation.
  • wirekit:csp-audit reports what the CSP build refuses whatever the expression says: x-html, and any expression on an <iframe> or a <script>, which parsed and passed.
  • wirekit:verify accepts a comparison with null as the guard before a disconnect(), and wirekit:doctor:props reads :attributes="$bag" as Blade rather than as an unknown prop.
  • The public components.json and api-map.json leave out a component that is documented only on a page that is not public yet.

Components

Every component this release changes, each linked to its page: Accordion · Alert Dialog · Announcement Banner · App Rail · App Shell · Assistant Message · Branch Switcher · Brand · Button · Button Group · Calendar · Callout · Chart · Checkbox · Code Block · Color Picker · Combobox · Command Palette · Context Menu · Data Table · Date Picker · Drawer · Dropdown · Editor · Event Calendar · File Upload · Filter Builder · Fonts · Hover Card · Inline Edit · Input · Lightbox · Link component · Menubar · Message · Modal · Multi-Select · Navbar · Navigation Menu · Notification Center · Number Input · OTP Input · Overflow Nav · Page Header · Page Progress · Pagination · Password Input · Phone · Popover · Pricing Table · Radio · Range Slider · Rating · Reading · Reveal · Scope Switcher · Scroll to Top · Segmented Control · Select · Shell Bar · Sidebar · Slider · Stepper · Sticky Panel · Strength Meter · Table · Tabs · Tags Input · Text · Textarea · Theme Controller · Time Picker · Toggle · Tooltip · Tour · Wizard