Skip to main content
WireKit

WireKit v2.55.0

Minor release

Minor. A line above every shell for the environment you are on, a bar at the top edge that reports the request a reader is waiting on, and a grid whose tracks change at a breakpoint. A button can drop its label only where there is no room for it, an accordion now eases open like the disclosure beside it, and a date field can say so when the browser writes dates in a different order than your page. Most of it was asked for by applications that build on the kit.

Added

  • A strip above the page, for every shell. <x-wirekit::announcement-banner strip> pins one line to the top of the viewport — the line that says which environment this is, or a maintenance notice — and moves the application down by exactly its own height without changing anything else about it. The height is published as --wk-strip-inset, and every surface pinned to the top of the viewport or sized to its height folds it in: the app shell in both modes, the sticky navbar, header, shell bar, brand bar, toolbar and banner, page progress, the top reading-progress bar, and the top toast positions. Two strips stack, and an overlay such as a modal covers the strip along with the page. A strip is one line by design, so the stylesheet knows its height before anything paints and the page never jumps; text that does not fit is cut on screen and stays whole for a screen reader. See a strip above the page.
  • <x-wirekit::page-progress> — a bar at the top edge that reports the request a reader is waiting on. Mount it once in your layout: it follows Livewire's request lifecycle and wire:navigate, so a screen built tomorrow is covered without anyone adding anything to it. It appears only after a request has run for showAfter milliseconds, 180 by default, so a quick answer shows nothing, and a component that polls does not run it through on every tick — a poll is not something the reader asked for. See page progress, including how to turn off Livewire's own bar so the two do not stack.
  • A grid template can change at a breakpoint. cols="1" template="lg:[minmax(0,1fr)_20rem]" is one column on a phone and a flexible column beside a fixed aside from lg — the layout applications were writing by hand as a class override. It needs no safelist in your build, and a template without a breakpoint renders exactly as before.
  • An announcement banner takes its color from the system you already have. surface="solid" fills the bar with the intent's color and its contrast-paired text, the same two treatments a badge has under the same names. hue takes the color from a hue instead, 0 to 360, for a color that identifies rather than reports — which environment this is, where warning on staging would read as a warning. Lightness and chroma are fixed, so the text clears AA at every hue; hue="theme" reads the hue from your stylesheet or from the preset's --theme-hue.
  • An announcement banner can be told never to close. dismissible="false" means never, whatever dismissKey and persist say. It matters because :persist="false" on its own adds a close button — a bar that remembers nothing is dismissible. Left out, nothing changes for an existing bar.
  • A button can show its label where there is room and its icon alone where there is not. icon-only-below="lg" takes a breakpoint name and does it with one control. The label stays in the accessibility tree at every width, so the button's name does not change when a reader rotates their phone. It measures the window rather than your column, and the page shows how to ask about the column instead.
  • A date picker can say so when the browser writes dates in a different order than your page. format-hint adds a sentence with a worked example, in your application's language. A native date field takes its order from the browser, never from the page around it, and no author can change that — so a German page on an English laptop asks for the month first, and a reader who means the third of April and types 03/04/2026 has recorded the fourth of March, with nothing rejected. The hint renders nothing when the two orders agree.
  • An app rail brand can carry two forms of one mark. Put the signet in the default slot and the wordmark in <x-slot:expanded>. The two swap with the rail's live state, so a rail that starts narrow and is opened by the reader still gets the wordmark, and the workspace name stays the accessible name at both widths.
  • An app rail can say how to open on a first visit, and so can a sidebar. default-expanded on the rail and default-collapsed on the sidebar answer only while no preference has been stored, and both persistence drivers treat them the same way. expanded stays what it was: an override that pins the state.
  • An app rail entry can cut a long name instead of wrapping it. truncate on an app-rail.item cuts the visible name with an ellipsis. It is meant for the account entry at the foot of a rail, which carries a person's name; a destination keeps the default, because two module names that start the same way cannot be told apart once both are cut. The full name stays the accessible name and is repeated as a title.

Changed

  • An accordion panel eases open and shut, the way the collapsible beside it already did. A page showing both had one that eased and one that jumped. It is on by default; :animate="false" on the accordion, on an FAQ, or through the config key turns it off. The easing reads --transition-wk-duration, and it is skipped under prefers-reduced-motion: reduce.
  • Surfaces pinned to the top of the viewport read --wk-strip-inset. The sticky forms of the navbar, header, shell bar, brand bar, toolbar and banner render top-[var(--wk-strip-inset,0px)] where they rendered top-0, the app shell sizes itself as the viewport height minus the inset, and the top toast positions and the top reading-progress bar follow. Without a strip on the page the inset is 0px and nothing moves; the difference is in the class names, which matters only if a test of yours matches on them.

Fixed

  • A table details row pairs with its own record under Livewire. Give the record row a wire:key and the details row carries <that key>-details. Without a key Livewire paired the two by position, which holds only while every record has details — one record with details beside one without put the wrong details under a name, and nothing failed.

Documentation

  • The accordion and collapsible pages say what a closed panel does to layout. A panel closed with until-found keeps its box, so getClientRects() reports every closed item as visible while the screen is drawn correctly, and a test that decides "is it open?" from geometry reads them all as open. Read the hidden attribute instead, and keep padding and borders on the element inside the panel.
  • The app rail page no longer calls an explicit expanded "the seed, not an override". With the cookie driver it is an override that turns the server-side seeding off entirely, and the two drivers have never agreed about it. The page now says which is which.
  • The date picker page explains the trap in its own list of benefits. "Automatic localization" is the browser's order, not your page's, and the page now says so and names the component that makes the other trade.
  • The bundle sizes in the docs match the files. The raw sizes on the dependencies page and in the integration guide are written from the built files, exactly, in every release; only the gzip figure is approximate, and the pages say which is which.
  • The theming guide and the design-token reference document the strip's tokens. --wk-strip-inset is the block-axis sibling of --wk-scrollbar-inset: read it for furniture of your own that pins itself to the top of the viewport, and do not set it, because it is derived from the strips on the page.

Components

Every component this release changes, each linked to its page: Accordion · Alert Dialog · Announcement Banner · App Rail · App Shell · Brand Bar · Button · Command Palette · Date Picker · Drawer · FAB · FAQ · Grid · Header · Lightbox · Modal · Navbar · Page Progress · Reading · Shell Bar · Sidebar · Table · Toast · Toolbar · Tour