Skip to main content

WireKit v2.57.0

Minor release

Minor. A sidebar section can open on every load whatever the reader folded, a pager can show its summary on a list that fits one page, wirekit:doctor:props follows your own components that wrap a WireKit one, a command palette can show a filter row and where a remote search stands, and wirekit:export-api-map carries each theme preset's palette. A component's open state is now called isOpen; open still reads and writes it and is deprecated. Most of the fixes keep what a component owns to that component when it sits inside another scope.

Added

  • A sidebar group or collapsible can open on every load, whatever persist stored. force-open opens the section on each visit, so the group that holds the current page shows where the reader is even after they folded it earlier; a fold still holds for the rest of the visit. Without it the stored state decides, as before.
  • A pager can show its summary on a list that fits one page. summary-on-single-page keeps "Showing 1 to 7 of 7 results" where the pager used to render nothing. An empty list still renders nothing.
  • wirekit:doctor:props follows your own components that hand their attributes to a WireKit component. A component such as <x-button.main> that renders <x-wirekit::button … {{ $attributes }}> has its call sites checked against the button's props and its own, so a misspelled prop on it is found too.
  • wirekit:export-api-map carries each theme preset's palette as its page prints it, light and dark, with the preset's label. A tool can preview or apply a preset from /api-map.json instead of copying the block off the page. The palette is the page's complete block, which for most presets is more than wirekit:theme writes. A preset you register at runtime has no page, so it carries its own block and no page URL.
  • A plain table can keep its own width with its first column frozen. data-wk-sticky-column-fit beside data-wk-sticky-column or data-wk-sticky-column-below freezes the first column only and leaves the table at the width your CSS gives it, so a Markdown table with sentences in its cells wraps them on a phone instead of growing to its longest sentence. --size-wk-table-sticky-column-min gives the frozen column a floor, never above its cap; it defaults to none.
  • A command palette can show a filter row and where a remote search stands. A filters slot sits between the input and the list. The loading and error slots show while your request is out and when it failed, and you report which applies with the wirekit:command-palette-state event. Both are read out through a status region the palette keeps in the page, and the list is marked busy while a request is out. Command Palette with a Remote Search walks through it.
  • A brand's logo images load eagerly and decode asynchronously. A mark is almost always the first thing a page draws, so every logo image now carries loading="eager" and decoding="async". logo-loading="lazy" suits a mark further down the page, such as a footer.
  • Modal and drawer panels carry a theme marker, data-wk-modal-panel and data-wk-drawer-panel, listed with the others under Theme markers. The panel is the surface that paints the dialog's background.

Changed

  • A component's open state is isOpen; open is deprecated and still reads and writes it. open is also the name of a function on window, so an expression that lost its component found that function instead of failing. Markup reading or writing open inside a WireKit component keeps working through 2.x. Write isOpen in new markup and in published views.

  • The self-contained bundles carry Alpine 3.17.4. wirekit-alpine.js and wirekit-alpine.csp.js bring their own Alpine, and 3.17.4 restores its mutation observer when an error is thrown while it changes the page, where 3.17.3 stopped initializing the elements added after it. The plugin bundles, which use your Alpine, are unchanged apart from the collapse plugin's version.

Fixed

  • A component's methods act on it when they are called from markup inside another scope. A modal's close() on a button inside an x-data of your own that declares an open wrote that open and left the modal open; the same held for any name the two scopes shared.
  • The handles a component keeps while it runs stay on that component. They could land on an x-data around it, so two components under one wrapper shared them, and removing one could stop the other, for example a tab strip's sync with its Livewire property.
  • overflow-nav keeps to its line count after a web font loads. It measured its links once and again only when its column changed width, so a font that arrived later could leave the row a line taller than lines, or links in the menu that would fit. It now measures again when a link changes width. A navbar row that scrolls brings its current entry back into view in the same case, and a range slider's two value badges merge or part when a font or a narrower column changes their room, not only when a thumb moves.
  • An open sidebar group paints with the page. A collapsible group or sidebar.collapsible that the server rendered open stayed hidden until Alpine started, so a sidebar drew its open sections a moment after everything else. Only a closed section waits now. With persist, the stored state applies before the first paint instead of when Alpine starts, and the small script that does it carries your CSP nonce.
  • WireKit::defaults() reaches the props of a sub-component. A default for dropdown.panel or table.head was stored where no template reads it, so the call succeeded and changed nothing. It now lands under the parent component, where the template looks. The components block of the published config and the customization page say where a sub-component's prop goes in the file: nested under its parent, while a key with a dot carries only classes.
  • A navbar row that scrolls shows that it does. The row draws no scrollbar, so a word cut off at its edge was the only hint that more entries followed, and it read like a rendering fault. An edge with entries behind it now fades out, an edge the row rests against stays sharp, and the fade is dropped while a link in the row has keyboard focus.
  • A table's frozen first column keeps its lines in Safari. In WebKit, the engine of Safari and of every browser on iPhone and iPad, the header line or a row separator could vanish beneath the frozen column while the columns beside it still showed it, and at a desktop width every one of them did. The frozen cell now draws those lines along its own edges, taking them from the row, and keeps its background off them, so a row that draws no line draws none there either.
  • A command palette's empty state shows only while its list is empty. It rendered whenever the empty slot was passed, so "No results found" sat beneath a list of results.
  • Choosing an item in a command palette closes it. Nothing closed the palette when an item was chosen, so a button item that ran an action left the palette open over its result. It now closes once the item's own click handler has run, by click or by Enter; a disabled item and a click beside the options leave it open.
  • Enter on a button in a command palette's footer presses that button. The palette took Enter and the arrow keys from any element in its panel, so Enter activated the highlighted result instead. The list keys now act only while the input has focus, and Escape still closes the palette from anywhere in it.
  • Dark refractive glass keeps its frosted surface until the glass script has run. Before the script, when it was blocked, or with an older published copy, dark .wk-glass-refract showed only its hairline. Publish the glass assets again to take the fix.

Documentation

  • Ten component pages showed a 'personalizations' block for config/wirekit.php, and nothing reads that key, so copying one changed nothing. They register the scope with WireKit::scope() now, through a block the component actually resolves, and extend its classes with a closure instead of replacing them, as the customization page describes.
  • The event calendar page shows how to read the date it is looking at: the component renders no slot, and the example that put markup between its tags never rendered.
  • The Liquid Glass pages place <x-wirekit::glass /> at the start of <body>, say that the refraction depends on the wk-glass-tier2 class, and no longer name tokens the stylesheet does not read. They, the Cupertino page and wirekit:glass install also say where the refraction draws: Chromium-based browsers bend the backdrop, and Safari, like every browser on iPhone and iPad, shows the pane lightly frosted without the bending.

Components

Every component this release changes, each linked to its page: Alert Dialog · App Rail · App Shell · Assistant Message · Brand · Button · Carousel · Chart · Collapsible · Color Picker · Combobox · Command Palette · Context Menu · Countdown · Data Table · Drawer · Dropdown · Event Calendar · FAB · Filter Builder · Hover Card · Kanban · Lightbox · Map · Modal · Navbar · Notification Center · Overflow Nav · Pagination · Popover · Pricing Table · Range Slider · Rating · Reading · Scope Switcher · Segmented Control · Sidebar · Stat · Table · Tabs · Toast · Tooltip