WireKit v2.60.0
Minor. A sidebar group's label and a field set's legend print an & once, and an x-ref on most WireKit components reaches the caller's $refs. A lightbox takes lockScroll, a named command palette can answer its own name alone, wire:model binds a popover color picker and, without a name, a notification center and a selectable data table, and a filter builder or a notification center reports the actions of its panel to a listener on its tag. The rest are fixes to overlays that close while they are still placing their panel, to wirekit:csp-audit with a wire:sort key, to a scroll area with a bare fade and to a page that loads a second bundle, and documentation.
Added
- A command palette with a
nametakesnamed-only, and then answers only the show, close and state events that carry its name. A site search beside demos that open their own palettes with the unnamed event stays shut. Without the prop an event without a name reaches every palette, as before. - A lightbox takes
lockScroll, as a modal, drawer, alert dialog and command palette do. With:lock-scroll="false"a viewer inside a page region, such as a preview, leaves the page around it scrolling and reachable, and releases no lock it did not take.
Fixed
- A sidebar group's label and a field set's legend print an
&once. A labelA & Bbound to either came out asA & B, on the page and in the group's accessible name. AnHtmlStringlabel renders as markup again. - An
x-refon a field, and on most components that run an Alpine component of their own, reaches$refsin your component. It did not on a number input, password input, combobox, phone field, slider, color picker, multi-select, tags input, rating, file upload or OTP input, on an input withoptimistic, or on a component whose root carries your attributes, such as an accordion, modal, tabs, table, editor or date picker range: each kept the ref, and on a combobox, a phone field and a slider the field's own ref took its place. The ref now points at the element your other attributes land on, and your component'sinit()already finds it. In the markup the name readsx-wk-ref, so a test that selected[x-ref="…"]on one of these components selects[x-wk-ref="…"], as the integration guide describes. - An
x-refyou put on a clearable or copyable input stays yours. The field carried a ref of WireKit's own ahead of yours, and a browser keeps the first of two, and it sat inside the component that runs the buttons, so$refsin your component never reached it and a focus call through it threw. The buttons now run beside the field instead of around it. wire:modelbinds a color picker withpopover. The popover picker rendered none of the attributes written on its tag, so the server never heard a pick, and anx-on:changelistener, adata-*hook and anaria-labelwent missing the same way.wire:modelandx-modelnow bind the field that carries the value,aria-labelnames the trigger, and the rest lands on the element around the picker.wire:modelbinds a notification center and a selectable data table without aname. The binding reached a hidden field that rendered only with aname, so without one the server never heard the unread count or the selection.- A filter builder and a notification center report actions from their panel to a listener on their tag. Adding a filter, activating a notification and marking all as read dispatched
filter-change,notification-action,notification-readandnotification-read-allfrom inside the teleported panel, sox-on:on the component tag never heard them.wire:modelwas not affected. wirekit:csp-auditno longer reports awire:sortkey. A key with a colon, such aswire:sort:item="reasons:{{ $id }}", failed the audit as an expression, although Livewire uses the value as a literal key and never parses it. The otherwire:sort:names are skipped the same way, and a Livewire action that holds the same colon is still reported. See the CLI reference.- A popover, color picker, dropdown, multi-select or menubar that closes while it is still placing its panel leaves nothing behind. The panel no longer keeps following its trigger after closing, and the popover and the color picker no longer arm their focus trap on it.
- A scroll area takes a bare
fade. The attribute, or:fade="true", fades both edges asfade="both"does. It rendered that fade already but logged a warning about an invalid value on every page, and stopped a test or an Artisan command with an exception. - A page that loads a second WireKit bundle, or evaluates one twice, installs its page-wide listeners once.
Documentation
- The stream page starts a run with a new body through the
wirekit-stream-startevent. Its example calledstart()on the element a ref points at, which has no such method, so every click threw. The event reaches the named stream from anywhere on the page, and the call parses in the CSP build too. - The events page lists every event WireKit dispatches, including the badge, branch switcher, event calendar day, quick replies, sortable, sidebar and reading bookmark events, and separates the event WireKit listens for.
- The liquid glass examples show the component code without the demo backdrop. Each preview's code is what an application writes, including the one
<x-wirekit::glass />a page needs for the refraction. - The table page names
--wk-sticky-column-bg, which gives the frozen first cell of a Markdown table the background of its row, such as a stripe the application paints. - The reorder previews on the reorder and table pages reorder their rows, by dragging and with the arrows, and each is followed by the Blade an application writes for its own rows.
- The progress props table gives
variantthe default it has,'primary', and names the config key that sets it. The shipped config spelled the same defaultaccent, an alias that renders identically, and now uses the canonical name. - The toast and liquid glass pages name only hooks the code knows.
Components
Every component this release changes, each linked to its page: Accordion · App Rail · App Shell · Branch Switcher · Calendar · Carousel · Clipboard Button · Collapsible · Color Picker · Combobox · Command Palette · Context Menu · Countdown · Data Table · Date Picker · Dropdown · Editor · Event Calendar · File Upload · Filter Builder · Hover Card · Image Compare · Image Gallery · Inline Edit · Input · Lightbox · Menubar · Modal · Multi-Select · Navbar · Navigation Menu · Notification Center · Number Input · OTP Input · Overflow Nav · Password Input · Phone · Popover · Pricing Table · Progress · Quick Replies · Rating · Reveal · Scope Switcher · Scroll Area · Segmented Control · Slider · Status Matrix · Stream · Strength Meter · Table · Tabs · Tags Input · Toggle Button · Tooltip · Tree View · Wizard