WireKit v2.54.0
Minor. A tooltip can sit inside a sentence, a modal trigger can sit where the modal cannot reach it, tables carry what a hidden column held, and every viewport-pinned surface finally knows about a classic scrollbar. Most of this release came from applications that build on the kit and measured something from their own screen.
Added
- A tooltip can live inside a paragraph. It rooted in a
<div>, and a<div>inside a<p>is invalid HTML — the browser closed the paragraph and lifted the tooltip out of it, which in a grid gave it a cell of its own and put it beside the wrong row. Passas="span"and both the wrapper and the trigger root in a<span>. The default staysdiv, because a span wrapper is invalid the moment the slot carries a block element and only the caller knows what is in its slot. --wk-scrollbar-inset, a design token for the width a classic scrollbar takes out of the viewport. Aposition: fixedsurface is laid out against a box that includes the scrollbar, so the gutter eats into the gap it keeps from the inline edge while the block edge loses nothing. Set it once —innerWidth - documentElement.clientWidth— and the floating action button, toast region, scroll-to-top, reading bookmark and the pinned variant of the reading progress all clear it. It defaults to0px, which is already right for overlay scrollbars.- A modal trigger can name the modal it opens, and can be a link.
forpoints a trigger at a modal it does not wrap, so the control can sit in a table row while the modal lives outside it;hrefmakes the trigger a real anchor for the case where the same action has a URL. - A page header can declare its heading a focus target. A dialog that closes has to hand focus back to something meaningful, and a heading that cannot take focus is not that thing.
- A table row can carry a second row for what a hidden column held. Hiding a column on a narrow screen used to lose its content; now it can move under its own record instead of disappearing.
- A long column head can wrap instead of setting the width of its column. One unbroken word in a header held the whole column open at its own length.
- A column can hide below a width of the TABLE rather than of the window. Beside a sidebar the two are different numbers, and the window was the wrong one to ask.
- A button can show its icon alone without its label leaving the accessibility tree. The icon-only mode keeps the name for anyone who is not looking at it.
- An OTP input can align its row of cells. No call site could reach that before.
- A combobox can refuse to offer a clear button.
clearable="false"fits a value that is a precondition for the field around it rather than an optional answer. - The phone country picker shows flags. The native select is replaced by a combobox, so the country is recognizable rather than spelled.
Fixed
- A hand-written
x-modelnever reached the modelable seam. Onlywire:modelwas routed, sox-modelsilently bound nothing on combobox, slider and toggle-button. - A combobox kept showing the previous label when its selection moved from outside. A parent binding, a round trip or a reset changed the value and the field did not follow.
- Opening a combobox panel offered only the selected row. The label the component seeds into its query was being filtered against.
- A caller's
classon a combobox reached the markup nowhere, and a label wider than the field was cut mid-character. - The slider track moved while the thumb was being held. Reported by an application running five dials on one screen.
- A zero-based label map on slider marks was a server error.
[0 => 'Neutral', 1 => 'Yes', 2 => 'High']is the way anyone writes three ordinal labels. - A required date picker printed two asterisks, and one component spaced its required marker wider than the seven beside it.
- A scope switcher bound its navigation to the one row it refuses to navigate to.
- Ten overlays lost their placement to a Livewire update — tooltip, hover card, navigation-menu flyout, event-calendar bubble, submenu flyout and tour step among them. An overlay placed once stayed where it was while the thing it points at moved.
- Identifiers that eight components ride on were not stable without a seed. They counted rather than randomized, so two renders of the same page could disagree about which overlay belongs to which control.
- Two props tables named a subset of their accepted values as if it were the whole set.
- Every flag answered 404 unless the artwork had been published. The route that serves the SVGs looked one directory level too deep, so an application that had not run
vendor:publish --tag=wirekit-flagssaw broken images wherever a flag appeared — including the country picker in phone. Publishing the artwork was never meant to be required; the route is the fallback for exactly the case where nothing was published.
Documentation
- The flag component has a public page. It was held back because it could not recommend installing a package that does not exist; the flags now ship with the kit, so the page does.
- The phone component has a page, and so does a phone-number validation recipe. Both are new and public in this release.
- A country picker recipe. A searchable country field whose names come from the locale data PHP already ships, sorted the way the reader's language sorts them, each with its flag. It needs PHP's
intlextension; the flag artwork ships with the kit. themingdocuments the classic-scrollbar gutter, including the two-line measurement an application needs and the one component that deliberately keeps its own lever instead.
Components
Every component this release changes, each linked to its page: Branch Switcher · Button · Calendar · Color Picker · Combobox · Command Palette · Context Menu · Data Table · Date Picker · Dropdown · Editor · Event Calendar · FAB · Filter Builder · Flag · Hover Card · Input · Label · Menubar · Modal · Multi-Select · Navigation Menu · Notification Center · Number Input · OTP Input · Page Header · Password Input · Phone · Popover · Reading · Scope Switcher · Scroll to Top · Select · Slider · Table · Tags Input · Textarea · Theme Controller · Time Picker · Toast · Toggle Button · Tooltip · Tour