Skip to main content

WireKit v2.7.0

Minor release

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::context-menu>, and <x-wirekit::menubar> gain nested submenu flyouts. A new opt-in sub-component on each parent — <x-wirekit::dropdown.submenu>, <x-wirekit::context-menu.submenu>, <x-wirekit::menubar.submenu> — opens a child flyout beside its parent item on hover, click, or ArrowRight. Each accepts label (or a <x-slot:label>), icon, placement (default right-start), offset, and disabled, 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::sidebar> gains a collapse-to-icon rail. Set collapsible to add an auto-rendered toggle that narrows the nav to an icon rail; collapsed sets the initial state and persist="key" remembers it in localStorage. 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-w variable (default 16rem). Default off — existing sidebars render unchanged.
  • <x-wirekit::calendar> gains multi-month display and quick navigation. months (1–4, default 1) renders consecutive months side by side, with arrow-key focus crossing between grids; selectableHeader swaps the static month/year label for native <select> jump controls (whose open-arrow now matches <x-wirekit::select>); and a new weekStartsOn prop (0 Sunday / 1 Monday) sets the first day of the week. months and selectableHeader default off.
  • <x-wirekit::combobox> gains option grouping. Pass a nested map (['Europe' => ['de' => 'Germany', …]], mirroring <x-wirekit::select>) to render <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::input> gains clearable and copyable trailing affordances. clearable shows an X button (visible only while the field has content) that empties and refocuses the field; copyable shows 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-model stay in sync.
  • <x-wirekit::color-picker> gains a withClear "no color" button and a custom trigger slot (both popover mode). withClear adds 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.js editor adapter bundle (~2 KB gzip). A standalone bundle that registers only the editor's Alpine factory, so developers loading the lean wirekit.core.js can add the rich-text <x-wirekit::editor> 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 in wirekit.js and wirekit-alpine.js. See Dependencies.
  • New php artisan wirekit:editor-preset command. Scaffolds the window.tiptapEditor(config) factory the editor calls at init, pre-wired per toolbar preset (basic or full) with every callback forwarded and the security-correct link-protocol configuration in place. --write=<path> writes to a file; --force overwrites an existing target. See the CLI reference.

Changed

  • <x-wirekit::calendar> now starts the week on Monday by default (was Sunday). This aligns the standalone calendar with <x-wirekit::event-calendar> and the rest of WireKit's date components. The weekday header and day grid shift accordingly; pass week-starts-on="0" (or set components.calendar.week-starts-on in config/wirekit.php) for a Sunday-first week. This is the only rendered-output change in this release.

Fixed

  • <x-wirekit::reading-spine> with 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-top variable (default 1rem). Also applies via <x-wirekit::reading-shell> with boundary="container".
  • php artisan wirekit:install now creates an app layout when your project doesn't have one yet. A fresh Laravel + Livewire 4 project (without a starter kit) ships no resources/views/components/layouts/app.blade.php, 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 own php artisan livewire:layout to create the layout, then injects @wirekitStyles + @wirekitScripts — ordering @wirekitScripts before @livewireScripts so WireKit's Alpine plugins register before Livewire boots Alpine. wirekit:doctor's hint and the Getting Started walkthrough were updated to match (including that Livewire 4 scaffolds single-file components by default — pass --class for 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::textarea>, 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.
  • <x-wirekit::calendar> 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 the sm breakpoint the calendar now expands to fill its container; from sm up it keeps the compact content-width grid unchanged.

Documentation

  • <x-wirekit::editor> gains an "Advanced: mentions, slash commands & collaboration" section. Documents how to use the editor's extensions array to add @mention autocomplete, 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::reading-shell>. See Reading sidebar.
  • <x-wirekit::sticky-panel> auto-collapse pattern gains a runnable preview. The documented compose-with-<x-wirekit::collapsible> auto-collapse pattern now ships a live preview, so it's copy-pasteable rather than prose-only.