Skip to main content
WireKit

WireKit v2.54.0

Minor release

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. Pass as="span" and both the wrapper and the trigger root in a <span>. The default stays div, 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. A position: fixed surface 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 to 0px, which is already right for overlay scrollbars.
  • A modal trigger can name the modal it opens, and can be a link. for points a trigger at a modal it does not wrap, so the control can sit in a table row while the modal lives outside it; href makes 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-model never reached the modelable seam. Only wire:model was routed, so x-model silently 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 class on 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-flags saw 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 intl extension; the flag artwork ships with the kit.
  • theming documents 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