WireKit v2.56.0
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.linessets how many rows the links may take, two by default, and each item can carry attributes for its anchor, such aswire: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 tomax(4 by default), alabelthat names what is judged,levelsfor the words,show-levelto put the word on screen andannouncefor a polite status region that speaks a change and not the starting value. It is arole="meter"rendered by the server, so it is complete before Alpine starts, and the step can come from a Livewire render or fromx-model. Withshow-levelthe 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'swire:sortand 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, andtable.reorder-headheads the column for a screen reader. See reordering rows. x-wk-flashlights a row up in a tone when the server says it changed. The server writesdata-wk-flash(one of the intents) and adata-wk-flash-keythat is new with every change, so the same tone twice flashes twice; withdata-wk-flash-leavea 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
serverthe typed text reaches your component assearch-changeonce 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:modelon 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-touchgives 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; insidedata-wk-touchthey 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@sourceper component your views use instead of scanning every template.wirekit:doctorreads 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,foraddresses one sidebar by id, and below the shell'slgbreakpoint it hides unlessalwaysis set.- A modal and a drawer say when the reader dismisses them.
wirekit:modal-dismissedandwirekit:drawer-dismissedgo 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, anddensity="compact"sets small entries with the ones you are not on muted. - A page header takes a
metaslot 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 andrel="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.
follownames the Alpine property that holds the current step, and the circles,aria-currentand 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, andsizesets the logo's height:xs,sm(as before),mdorlg, or a CSS length such as1.75remfor a height between those steps. - The app shell's height has a name. Set
--wk-shell-heighton 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;sidewaysturns 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"(orsm,lg,xl,2xl) does on your own<table>what the table'ssticky-column-belowdoes 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-changedcarrieshiddenandvisible, so an application can keep the choice with the reader's account, and ahiddenlist 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, anddata-wk-slider-valuemarks the value box for styling. - An OTP input takes a
size.sm32px,md40px as before,lg48px, which clears the touch target on any pointer.duskanddata-*attributes reach the group element. - A button takes
icon-only-below="xs", a step belowsmat 360px, for a bar that fits a phone but not the smallest ones. - Text takes
leadingandwrap.leadingsetstight,normalorrelaxedon the leading tokens, and:wrap="false"keeps a line whole without cutting it. - A tab's badge can carry a tone.
badgeIntentonitemsor ontabs.tabpasses 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
titleas 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-labeledsizes 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:propsreports 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
selectdoes, sopluck('name', 'id')submits the ids. An array filtered withoutarray_values()keeps its indexes as keys and now submits them; wrap it inarray_values()to submit the values. wirekit:themeand 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 iscubic-bezier(0.2, 0, 0, 1); Cupertino eases withcubic-bezier(0.25, 0.46, 0.45, 0.94); Retro Terminal uses#00ff41with a#0d0d0dlabel; 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 yourapp.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
idnornamederives its id from what it is bound to.file-upload,slideranddate-pickerdrew a random id on every render, which Livewire's morph reads as a new element; the id now comes fromwire: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
translateas 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 ofx-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:modelsends 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-showstopped 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-maxand 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
readonlypaints 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
errororhintis 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 awire:navigate, which made the browser fetch the body font again after every navigation.wirekit:csp-auditreports 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:verifyaccepts a comparison withnullas the guard before adisconnect(), andwirekit:doctor:propsreads:attributes="$bag"as Blade rather than as an unknown prop.- The public
components.jsonandapi-map.jsonleave 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