WireKit v2.7.0
Minor release. An additive enrichment wave across forms, navigation, and the editor toolchain. Every new feature is opt-in and backward-compatible. One rendered-output change is called out under Changed — the standalone calendar now defaults to a Monday-first week to match the rest of WireKit's date components. Adds nested submenu flyouts to the three menu components, collapse-to-icon sidebars, multi-month calendars, grouped comboboxes, clearable/copyable inputs, a clearable color picker with a custom-trigger slot, a standalone editor adapter bundle, and an editor-preset scaffolder.
Added
<x-wirekit::,dropdown> <x-wirekit::, andcontext-menu> <x-wirekit::gain nested submenu flyouts. A new opt-in sub-component on each parent —menubar> <x-wirekit::,dropdown. submenu> <x-wirekit::,context-menu. submenu> <x-wirekit::— opens a child flyout beside its parent item on hover, click, ormenubar. submenu> ArrowRight. Each acceptslabel(or a<x-slot:label>),icon,placement(defaultright-start),offset, anddisabled, supports arbitrary nesting depth, and implements the full WAI-ARIA submenu keyboard model (ArrowRight/Enter/Space to open and focus the first child; ArrowLeft/Escape to close and refocus the parent) with hover-open collision flipping. Flat menus are unaffected and render identically.<x-wirekit::gains a collapse-to-icon rail. Setsidebar> collapsibleto add an auto-rendered toggle that narrows the nav to an icon rail;collapsedsets the initial state andpersist="key"remembers it inlocalStorage. Item labels, group headings, and chevrons collapse to icon-only via pure CSS (no per-item wiring), while links keep their accessible names. The expanded width is overridable via the--wk-sidebar-wvariable (default 16rem). Default off — existing sidebars render unchanged.<x-wirekit::gains multi-month display and quick navigation.calendar> months(1–4, default 1) renders consecutive months side by side, with arrow-key focus crossing between grids;selectableswaps the static month/year label for nativeHeader <select>jump controls (whose open-arrow now matches<x-wirekit::); and a newselect> weekStartsOnprop (0Sunday /1Monday) sets the first day of the week.monthsandselectabledefault off.Header <x-wirekit::gains option grouping. Pass a nested map (combobox> ['Europe' => ['de' => 'Germany', …]], mirroring<x-wirekit::) to renderselect> <optgroup>-style headings. The keyboard model stays flat — arrow keys flow across group boundaries as one list and empty groups auto-hide. Ungrouped comboboxes are unaffected.<x-wirekit::gainsinput> clearableandcopyabletrailing affordances.clearableshows an X button (visible only while the field has content) that empties and refocuses the field;copyableshows a copy-to-clipboard button with a brief "Copied" state announced to screen readers. Both default off and coexist with the prefix/suffix slots;wire:model/x-modelstay in sync.<x-wirekit::gains acolor-picker> withClear"no color" button and a customtriggerslot (both popover mode).withClearadds a button that clears the bound value to empty and resets the picker to "no color" — the swatch, plane marker, hue, and value field all reflect the cleared state (the native<input type="color">can't represent an empty value, so this is popover-only by design). A<x-slot:trigger>replaces the default swatch with your own content while WireKit keeps the open/close, anchoring, and dialog semantics wired. Both default off — existing pickers render unchanged.- New
wirekit-tiptap.editor adapter bundle (~2 KB gzip). A standalone bundle that registers only the editor's Alpine factory, so developers loading the leanjs wirekit.core.jscan add the rich-text<x-wirekit::without pulling in the full overlay bundle. It mirrors the chart adapter's shape — MIT glue only, Tiptap stays your peer dependency. Purely additive: the editor still ships ineditor> wirekit.jsandwirekit-alpine.. See Dependencies.js - New
php artisan wirekit:editor-presetcommand. Scaffolds thewindow.factory the editor calls at init, pre-wired per toolbar preset (tiptap Editor(config) basicorfull) with every callback forwarded and the security-correct link-protocol configuration in place.--write=<path>writes to a file;--forceoverwrites an existing target. See the CLI reference.
Changed
<x-wirekit::now starts the week on Monday by default (was Sunday). This aligns the standalone calendar withcalendar> <x-wirekit::and the rest of WireKit's date components. The weekday header and day grid shift accordingly; passevent-calendar> week-starts-on="0"(or setcomponents.incalendar. week-starts-on config/) for a Sunday-first week. This is the only rendered-output change in this release.wirekit. php
Fixed
<x-wirekit::withreading-spine> boundary="container"now stays pinned instead of scrolling away with the article. When the reading surface is a bounded scroll container (the reading-sidebar recipe, a modal or panel reading view), the sidebar previously scrolled out of view with the content; it now pins to the container's viewport, offset by the new--reading-spine-offset-topvariable (default1rem). Also applies via<x-wirekit::withreading-shell> boundary="container".php artisan wirekit:installnow creates an app layout when your project doesn't have one yet. A fresh Laravel + Livewire 4 project (without a starter kit) ships noresources/, so Livewire page components failed at runtime with "layout view not found" and the installer previously only told you to add one by hand. The installer now delegates to Livewire's ownviews/ components/ layouts/ app. blade. php php artisan livewire:layoutto create the layout, then injects@wirekitStyles+@wirekitScripts— ordering@wirekitScriptsbefore@livewireso WireKit's Alpine plugins register before Livewire boots Alpine.Scripts wirekit:doctor's hint and the Getting Started walkthrough were updated to match (including that Livewire 4 scaffolds single-file components by default — pass--classfor the class-based form shown in the guide).- Form controls no longer trigger mobile Safari's zoom-on-focus.
<x-wirekit::,select> <x-wirekit::,input> <x-wirekit::, and every composite control that renders its own field — combobox, multi-select, command-palette, number/password/OTP/tags input, date/time picker, the color-picker hex field, and the filter-builder/data-table search field — rendered below 16px. iOS Safari zooms and shifts the viewport whenever a focused field is smaller than 16px, so tapping a control made the page jump and the field read as too small. On touch devices these controls are now pinned to the 16px threshold; desktop keeps the compact design-token sizing.textarea> <x-wirekit::fills the available width on phones instead of a fixed narrow grid. The standalone month grid renders at a compact ~312px content width; on a narrow phone — especially inside a padded container — that looked too narrow and could clip the trailing weekday column. Below thecalendar> smbreakpoint the calendar now expands to fill its container; fromsmup it keeps the compact content-width grid unchanged.
Documentation
<x-wirekit::gains an "Advanced: mentions, slash commands & collaboration" section. Documents how to use the editor'seditor> extensionsarray to add@mentionautocomplete, slash-command menus (including AI-assist items that call your own endpoint — WireKit never calls an AI service itself), and real-time collaboration via Yjs. The collaboration guidance is explicit that it requires a sync backend you run.- New reading-sidebar recipe. A vertical sticky reading sidebar that fuses an always-expanded table of contents, active-section highlighting, and an article-scoped progress bar, composed from
<x-wirekit::. See Reading sidebar.reading-shell> <x-wirekit::auto-collapse pattern gains a runnable preview. The documented compose-with-sticky-panel> <x-wirekit::auto-collapse pattern now ships a live preview, so it's copy-pasteable rather than prose-only.collapsible>