Skip to main content

WireKit v2.59.0

Minor release

Minor. A popover stays open for a click inside it, the page behind an open modal overlay is inert, a page can hold more than one command palette, a tooltip, hover card, tour step or submenu stays with its trigger while the page scrolls, any list can carry the reorder handle and arrows of the table, the theme controller follows a mode the host fixes, and WireKit::inlineScriptHashes() serves a policy that admits inline scripts by hash.

Added

  • A command palette takes a name, so a page can hold more than one. The show, close and state events reach only the palette named in detail.name, and without a name every palette answers as before. An empty, false or null hotkey binds no key instead of falling back to Cmd+K.
  • A command palette takes a label for its dialog, so a site search can be announced as a search. Left empty, the translated default stays.
  • A command palette reports Enter with nothing highlighted. wirekit:command-palette-submit carries { query }, on an empty list too, and never while an input method is still composing.
  • Modal, drawer and alert dialog take lockScroll. With :lock-scroll="false" an overlay that lives inside a page region, such as a preview, leaves the page around it scrolling and reachable, and each instance releases only the lock it holds.
  • brand takes truncate, which cuts a long name with an ellipsis and keeps the mark at its size, for a workspace name in a narrow header. Without the prop the markup is unchanged.
  • text takes family (sans or mono) and tabular, for figures that line up in a column.
  • The reorder arrows of a table take arrow-surface and arrow-size on table.reorder, passed to both buttons; unset, they stay ghost in xs.
  • reorder puts the drag handle and the arrows of table.reorder on any list row, not only on a table cell. Focus returns to the row in the list of the arrow that was pressed, nested lists included.
  • The theme controller follows a mode the host fixes. With data-wk-theme-fixed on <html> every variant shows that mode from the first paint on, and its controls stay in the tab order, marked unavailable and described by the reason in data-wk-theme-fixed-reason. The reader's stored choice is kept for when the host lets go.
  • An overflow nav item takes an action, a button beside its link that moves into the menu with it, and menu-order orders the menu without changing the row.
  • A server-searched multi-select takes layout="list": a search field, the hits as checkboxes, and the selection as a list with a remove button on each entry.
  • A data list item takes value, rendered as text when the item has no slot. Written as an attribute until now, the value landed on the item's wrapper as an attribute that means nothing there, and the cell stayed empty. When an item has both, the slot wins.
  • wirekit:doctor:props reports an HTML attribute the rendered element does not use, such as value on a badge, whose attributes land on a <span>. These attributes are valid HTML elsewhere, so they used to pass on every component while the value never reached the page. The check speaks only where the element is certain, so a component with a configurable tag is not judged.
  • WireKit::inlineScriptHashes() returns the hash sources of the inline scripts WireKit writes into a page, for a Content Security Policy that admits them by hash instead of by nonce.
  • Two icon aliases, desktop and star-outline, each with a matching glyph in every icon preset.

Fixed

  • A popover stays open on a click inside its panel, and a press on its trigger closes an open one. Every click in the panel closed it, so a popover holding a field, a label or a button could not be used with a pointer.
  • The page behind an open modal, drawer, alert dialog, command palette, lightbox or tour is inert. They declared aria-modal="true", while a pointer, a touch and a screen reader that ignores aria-modal still reached the page behind. A toast region stays reachable, and elements added to the page while the overlay is open are covered too.
  • The page beside the app shell's drawer is inert while the drawer is open below the lg breakpoint. A click beside the drawer still closes it, and focus returns to the toggle.
  • A tooltip, hover card, tour step or dropdown submenu stays with its trigger while the page scrolls. An open one stayed where its trigger had been. A tour step was off its target as soon as the tour scrolled that target into view.
  • A tour gives focus back to the button that started it when it ends. Focus went to the page body instead, and a keyboard or screen reader user lost their place.
  • A command palette or tour that closes right after it opens no longer arms its focus trap on the panel it is hiding.
  • A command palette keeps its list above an on-screen keyboard, and locks the page the way a modal does, which also holds on iOS, instead of with overflow: hidden.
  • Home and End move the caret in a command palette's input until a result is highlighted.
  • Escape closes an open mobile menu in the navbar, and focus moves to the menu button instead of leaving with the links it hid.
  • An OTP input follows its bound wire:model. A value the server clears empties the boxes, where they kept their characters and the next submit sent nothing.
  • Delete empties the last cell of an OTP input right after it is typed. The caret sat behind the character with nothing selected, so the key removed nothing.
  • A page reached with wire:navigate no longer reports its components as registered too late when its head brings a WireKit bundle; the console now names only a component that stayed without its data.
  • An open sidebar.group renders its arrow turned, before scripts start, and so does sidebar.collapsible, in the sidebar.
  • Two sidebar sections with the same persist key open and close together on a page.
  • A sidebar.item in a folding sidebar.group follows the sidebar's collapsible, so its row is no longer wrapped in a tooltip that never shows.
  • The frozen first column of a plain table wraps a long word, draws its edge on the inline end and follows striped rows.
  • A blank WIREKIT_*= line in .env keeps the default. An empty value gave the theme cookie a lifetime of zero and several switches an empty string.
  • Two equal tabs, slider or message instances on one page get ids of their own, so their references no longer land in the first one.
  • .not-wk-prose ends at a prose block nested inside it, and the nearer block's density wins.
  • Pinned surfaces keep their place while a modal, drawer, alert dialog, command palette or lightbox is open. The scroll lock hides the document's classic scrollbar, and the viewport widens by its gutter; the lock now publishes that width on --wk-scrollbar-inset, which the floating action button, toast region, scroll-to-top, reading bookmark and reading progress fold into their offset, and gives the root its own value back when it releases.

Documentation

  • The optgroup example on the select page compiles. A quote in a comment inside its :options array ended the attribute, so the copied example printed its own source instead of a select.
  • The published config's comment on the heroicons-marketing preset names the aliases it carries, sparkle and cube-transparent, and so does the integration page.
  • The popover page describes the panel as it renders, without aria-controls or aria-modal="false".
  • The theme controller page names its menu rows menuitemradio with aria-checked, as they render.
  • The fonts page says what happens to a fonts block a nonced style-src refuses: the browser reports a CSP violation, and the page renders in the fallback font.
  • The tour page says a step follows its target, and that the tour scrolls smoothly only when the reader has not asked for reduced motion.
  • The theming guide no longer tells an app whose document scrolls to set --wk-scrollbar-inset: the document's own scrollbar sits outside the box a fixed surface is laid out against, so the measured gutter doubled the gap. The token is for a route that scrolls an inner container, and the guide shows how to publish that container's gutter.
  • The published config says the sandbox audit log's retention deletes only files still named YYYY-MM-DD.log, so a day that log rotation compressed or renamed is left to the rotation.
  • The strict validation page says the doctor's log scan decides on a window, the last 24 hours by default, and names wirekit.doctor.scan_logs_window_hours to change it. It promised the scan finds every typo that shipped.
  • The theming guide explains @wirekitTransition, which gives an element of your own the enter and leave transition of the components, timed by --transition-wk-duration and --transition-wk-easing.
  • The integration guide lists the font and flag routes beside the asset routes, and the fonts page says an unpublished font family loads from a package route.

Components

Every component this release changes, each linked to its page: Accordion · Alert Dialog · Announcement Banner · App Rail · App Shell · Assistant Message · Attachment · Avatar · Band · Blockquote · Bottom Nav · Brand · Brand Bar · Breadcrumb · Button · Calendar · Card · Center · Chart · Chart Mixed · Checkbox · Code · Code Block · Color Picker · Combobox · Command Palette · Container · Context Menu · Countdown · CTA · Data List · Data Table · Date Picker · Divider · Drawer · Dropdown · Editor · Empty State · Event Calendar · FAB · Feature · Field · File Upload · Filter Builder · Flag · Fonts · Grid · Heading · Hero · Highlight · Hover Card · Image · Image Compare · Image Gallery · Inline Edit · Input · Lightbox · Link component · List · Logo Cloud · Map · Menubar · Message · Modal · Multi-Select · Navbar · Navigation Menu · Notification Center · Number Input · OTP Input · Overflow Nav · Page Header · Pagination · Password Input · Phone · Popover · Pricing Table · Product Card · Profile · Prose · Radio · Range Slider · Rating · Reading · Reorder · Row · Scope Switcher · Scroll to Top · Section · Segmented Control · Select · Shell Bar · Shimmer · Sidebar · Skip Link · Slider · Sparkline · Stack · Stat · Status Matrix · Status Tiles · Stepper · Sticky Panel · Table · Tabs · Tags Input · Team Section · Testimonial · Text · Textarea · Theme Controller · Time Picker · Timeline · Toast · Toggle · Tooltip · Tour · Tree View · Visually Hidden