**Minor release.** Form-input upgrades (range-slider Livewire integration, input HTML5 props, number-input grid-snap), entrance-animation polish (zero-flash + delay-prop fix universal), AI-tooling schema fields (`sub_components`, `slots` required flag, `@example`, ClassPropsExtractor for class-based components), two new artisan commands (`wirekit:fonts`, `wirekit:icons`), and three new docs pages (`prop-naming-conventions`, `overlays/events`, `recipes/on-page-toc`). ### Added - **`` first-class `wire:model` integration.** Pre-fix `wire:model="priceRange"` on the component tag was silently dropped into the outer `
`'s attribute bag — Livewire only watches input/select/textarea elements, not divs. Dragging the slider didn't update the Livewire property. Now: the component detects any `wire:model*` directive on the tag, strips it from the outer bag (no double-render), and re-emits it on the two hidden inputs as `wire:model="propName.min"` / `wire:model="propName.max"`. Developer declares `public array $priceRange = ['min' => 20, 'max' => 80];`; dragging either handle updates `$priceRange['min']` / `$priceRange['max']` live. All modifiers (`.live`, `.lazy`, `.debounce.500ms`, `.blur`) flow through unchanged. `docs/components/range-slider.md` "Livewire Integration" section rewritten to show the array-property pattern. - **`docs/extending/prop-naming-conventions.md` — reference page for the three semantic-modifier prop families (`intent` / `variant` / `tone`).** Documents the contract behind each name, the canonical 7-value `intent` enum (`primary` / `accent` / `neutral` / `danger` / `success` / `warning` / `info`), and a per-family decision tree for component authors. Cross-component example table covers `` (`intent`), `` / `` (`variant`), and `` (`tone`). Single source of truth for "which prop name should my new component use?" — closes the historical gap where the three families were inferred from reading the source. Registered under the "Extending" group in the docs navigation. - **`docs.wirekit.app/recipes/on-page-toc` — canonical recipe for the right-edge sticky sidebar Table-of-Contents pattern.** Pairs `` and `` to document the in-page TOC shape common to modern documentation sites. Covers the sidebar shape end-to-end (canonical wiring, CSS-variable knobs for expanded width and sticky offset, integration with a sticky ``, breadcrumb composition); cross-links to the `marketing-landing-toc` recipe for the horizontal strip variant. Targets the `
` selector by default so `H2` / `H3` headings auto-populate the spine without manual wiring. - **`docs/overlays/events.md` — canonical event-vocabulary reference page.** Complete matrix of every overlay component's event names + payload shapes (modal / drawer / alert-dialog / command-palette / tour / toast-region — 6 overlays). Three sections: the matrix table, Alpine `$dispatch` + Livewire `$this->dispatch()` examples per event family, and "Conventions + footguns" enumerating the 4 historical irregularities (hyphen-not-colon, tour's name-in-event-name shape, toast's variant-vs-intent divergence, fire-and-forget show events). Single source of truth for AI / IDE tooling that previously had to discover this by reading `resources/js/components/*.js`. Registered under a new "Overlays" group in the docs navigation. - **`` sub-component — pre-wired close button for alert-dialogs.** Analogous to ``, but specific to the destructive-action confirmation dialog. The wrapping `
` carries `x-on:click="close()"` (the parent's `wirekitAlertDialog` Alpine x-data exposes the method); slot defaults to a `Cancel` so the typical case is a one-tag affair. Override the label by passing slot text (`Back`) or wrap your own `` for full control (custom variant / size / icon). Replaces the manual-wiring pattern (`x-on:click="$dispatch('wirekit-alert-dialog-close', { name: '...' })"`) — that pattern still works but is no longer required. - **`wirekit:make recipe:` scaffolds for all 9 documented recipes.** Each `recipe:` template generates a Livewire class + Blade view from a shipped stub mirroring the corresponding `docs.wirekit.app/recipes/` page's structural composition. Class names derive PascalCase from the kebab-case recipe slug (`marketing-landing-page` → `MarketingLandingPage`). Available recipes: `documentation-reader`, `feature-numbered-marker`, `hero-with-code-aside`, `live-kpi-strip`, `long-form-article`, `marketing-landing-page`, `marketing-landing-toc`, `stat-with-sparkline`, `toolbar-filter-bar`. Each generated view ends with a comment cross-linking to `docs.wirekit.app/recipes/` for the full reference. Unknown recipes fail with a Levenshtein-ranked Did-you-mean hint. - **`slots` schema field now flags required slots.** Slot entries in `wirekit:export-json` / `.wirekit-schema.json` / `wirekit:show` were previously a flat list of names — they didn't tell developers (or AI tooling) which slots were OPTIONAL (guarded by `@isset`) and which were REQUIRED (referenced bare via `{{ $name }}`). The shape now reads `[{name: 'trigger', required: true}, {name: 'header', required: false}, ...]` per slot. Detection heuristic: an `@isset($name)` / `isset($name)` guard marks the slot as optional; a bare `{{ $name }}` / `{!! $name !!}` / `$name->method()` reference without an enclosing guard marks it as required. The fix closes the popover / hover-card / context-menu gap — all three reference `{{ $trigger }}` directly and 500 with `Undefined variable $trigger` when developers omit the slot; the manifest now reports `trigger` as `required: true`. - **`Pushery\WireKit\Support\ClassPropsExtractor` — public Reflection-based prop extractor for class-based Blade components.** Companion to `PropsParser`. Class-based components like `` (registered via `loadViewComponentsAs(...)`) don't have an `@props([...])` block — the prop surface IS the constructor signature. `ClassPropsExtractor::extract(string $className)` walks the constructor parameters via Reflection and returns the same shape `PropsParser` emits, so downstream callers don't branch. Constructor parameter names are kebab-cased for Blade-attribute compatibility (`wireStream` → `wire-stream`); type hints stringify to their declared form (`string`, `?string`, `int`, `bool`, `array`, union types). Default values stringify as PHP literals matching what PropsParser captures. `ComponentRegistry::extractProps('chart')` now returns 11 props (was empty). The schema entries from `wirekit:export-json` / `.wirekit-schema.json` / `wirekit:show chart` all carry the full constructor surface — AI tooling and IDE extensions see chart's `type` / `labels` / `datasets` / `wire-stream` / etc. instead of the previous empty `props: []`. - **`@example "..."` annotations in `@props` blocks surface as a new `examples` field in the schema.** `PropsParser` now reads `// @example "value"` annotations from the trailing same-line comment after a prop's comma and exposes them as a `list` field on every schema entry next to `name` / `default` / `comment`. Use for props whose accepted value-shape is non-obvious from the default alone — the canonical first user is `` `cols`, which accepts a Tailwind-style space-separated string (`"1 md:2 lg:4"`); the default `1` doesn't telegraph that. Multiple `@example` annotations per comment are all captured; backslash-escaped quotes inside the value are supported (`@example "Press \\"Enter\\" to confirm"`). Empty array (not null) when no annotation present, so the field is type-stable across the catalog. - **`wirekit:icons` artisan command** — list every icon alias shipped with WireKit, grouped by preset. Each section shows the alias-count summary, an `[active]` / `[opt-in]` indicator against the current `wirekit.icons.preset` / `wirekit.icons.presets` config, and every alias → Blade-Icon identifier mapping. Same API shape as `wirekit:list` / `wirekit:fonts` (`--preset=...`, `--as=count|presets|aliases|json`, `--format=` alias, Levenshtein-ranked Did-you-mean on unknown preset). The `--as=aliases` flavor emits a unique alphabetised alias list across the (optionally filtered) preset set — useful for "do any presets define `bolt`?" lookups. JSON output per preset: `{key, count, active, requires, aliases}` so AI tooling sees the active-vs-opt-in distinction without re-reading config. The pre-existing `IconResolver::availablePresets()` PHP-side helper is unchanged; the CLI is a thin discovery wrapper. Also: the `bolt` example in `docs/components/icon.md`'s Sizing section is replaced with `search` (which is in the default `heroicons` preset) — `bolt` lives only in `heroicons-marketing` and required opt-in to render. - **`wirekit:fonts` artisan command** — list every font preset shipped with WireKit, grouped by category. Mirrors `wirekit:list`'s API surface (`--category=sans|serif|mono`, `--as=count|slugs|categories|json`, `--format=` alias, Levenshtein-ranked Did-you-mean on unknown category). Each row shows the preset key, label, and font-family; the keys map 1:1 to the values accepted by `wirekit:install --font={key}`. Previously the only way to discover the preset list was via `tinker` or a typo'd install-error path. New PHP-side surface: `Pushery\WireKit\Fonts\FontRegistry::all()` / `category()` / `get()` (already existed; the CLI now wraps it). - **`sub_components` array on every entry in `wirekit:export-json` + `.wirekit-schema.json`.** Previously only `wirekit:show ` surfaced the sibling-directory `.blade.php` files (e.g. `card.body`, `card.header`, `card.footer`). The JSON-manifest paths read by AI tooling, IDE extensions, and the `.wirekit-schema.json` written by `wirekit:install` now carry the same list — first-class field next to `props` and `slots`. Sorted alphabetically; skips `index.blade.php` (Laravel's anonymous-component index file). Components with no sibling directory get an empty array (not null) so the field is type-stable. Closes the "card looks empty because the body wrapper is invisible to tooling" gap. - **`` accepts `items` as array-of-objects in addition to the legacy keyed-assoc form.** Two list-input shapes now coexist on the component: `['profile' => 'Profile']` (compact, ergonomic for static inline data) AND `[['key' => 'profile', 'label' => 'Profile']]` (matches typical API responses, easier to compose from a Livewire `@computed` property). The component normalizes both at the template edge — pick whichever your data source already produces. Both shapes produce byte-identical rendered HTML (same `aria-controls` / `id` wiring, same Alpine bindings) so screen-reader behavior is stable across the two. When the `label` field is missing in array-of-objects form, the `key` is used as the visible label. - **`` HTML5 form-state props in `@props`.** Five props now declared explicitly: `required`, `disabled`, `readonly`, `autocomplete`, `placeholder`. Previously these only worked via attribute-bag passthrough (``) — invisible to the schema, AI tooling, and IDE autocomplete. The `required` prop additionally flows through to the associated `` so its required indicator (`*`) renders without manual wiring. Back-compat preserved: the attribute-bag passthrough still works exactly as before, and mixing the two forms (`:required="true" required`) produces a single `required` token on the underlying `` — guarded by an explicit regression test. - **`` `interactive` prop for dropdown-trigger composition.** Profile previously rendered a presentational `
` with no focusable child. Wrapping it in `` (the canonical user-menu pattern) opened the menu on mouse-click but was unreachable by keyboard — Tab skipped past the profile entirely because the trigger's focusable-descendant search returned null. New `interactive` prop (default `false`) emits `role="button"`, `tabindex="0"`, Enter / Space keyboard handlers synthesizing a click, plus a focus-visible ring matching the canonical button focus state. Default `interactive=false` preserves the pre-existing presentational `
` byte-for-byte. New "Interactive profile inside a dropdown trigger" preview block on the docs page shows the canonical composition. - **`` `mobileLogo` + `mobileBreakpoint` props for responsive logo swap.** A wide wordmark (`/brand/wirekit-wordmark.svg`) on a brand-bar overflows narrow viewports — `mobileLogo` pairs with a compact mark (`/brand/wirekit-mark.svg`) that renders below the chosen Tailwind breakpoint, with the wide wordmark taking over at + breakpoint. `mobileBreakpoint` accepts `sm` / `md` / `lg` / `xl`, default `sm` (640 px). When `mobileLogo` is null, behavior is unchanged (single `` at every viewport — back-compat). Both images carry the same accessibility shape (`alt=""` + `aria-hidden="true"`); the ``'s `aria-label` provides the accessible name. Invalid `mobileBreakpoint` values throw in debug, fall back to `sm` in production via `StrictnessGate`. Six tests cover back-compat (single-logo unchanged), default breakpoint swap, custom breakpoint, invalid value throw, mobileLogo-without-main-logo no-op, accessibility (two images both decorative + aria-label preserved). - **`Pushery\WireKit\Support\StrictnessGate` — public single source of truth for runtime validation strictness.** Central decision behind `WireKit::validateProp()` (component-level prop validation) and `IconResolver` (icon-alias / preset lookups): strict mode throws `InvalidArgumentException` with a Did-you-mean hint, lenient mode logs a warning (now WITH the actual fallback value annotated) and returns the first allowed value (or a caller-supplied override via the new `fallback` parameter). `StrictnessGate::isStrict()` returns the current decision; `StrictnessGate::enforce($context, $key, $value, $allowed, fallback: null)` is the canonical entry point; `StrictnessGate::formatMessage(...)` exposes the message-builder so callers that throw their own typed exception (like `IconResolver`) inherit identical wording. - **`wirekit.validation.strict` config key (env `WIREKIT_STRICT_VALIDATION`)** — explicit override of the strict-vs-lenient decision. `null` (default) keeps the historical behavior (strict in `APP_DEBUG=true`, lenient in prod). `true` forces strict everywhere — useful for CI / staging hardening. `false` forces lenient everywhere — useful for snapshot CI runs that want to assert rendered output regardless of prop typos. Documented in `config/wirekit.php` with a per-value behavior matrix. ### Changed - **Integration Guide URL moved from `/integration` to `/getting-started/integration`.** The guide is conceptually a sub-page of Getting Started — installation walkthrough, optional dependencies, asset publishing, verification checklist — so the URL now reflects that hierarchy. Every in-docs cross-link has been updated in lockstep (10 inbound references across `getting-started.md`, `cli-reference.md`, `livewire-starter-kit.md`, `components/resizable.md`, `extending/console-output-baseline.md`, `cli-reference/wirekit-doctor.md`). External bookmarks pointing at the legacy `/integration` URL will need updating; the new URL is the canonical location going forward. - **`wirekit:doctor` now WARNs when `'charts.library' => 'chartjs'` is configured but `resources/js/app.js` is missing the `Chart.register(...registerables)` registration.** Catches the #1 first-run Chart.js gotcha upstream: `npm install chart.js` + `'chartjs'` in config IS NOT enough — the JS-side `import { Chart, registerables } from 'chart.js'; Chart.register(...registerables);` must be in `app.js` or the chart component renders + mounts but draws nothing (Chart.js logs a friendly console.error and gives up). The doctor's WARN prints the actionable snippet inline. Comments stripped before scanning so a `// Missing: Chart.register(...)` hint comment doesn't false-pass the detection. `getting-started.md` Optional Features section gains an explicit three-step callout (config + npm + JS-side registration) cross-linked to `/integration#optional-dependencies`. - **`` warns in debug mode when plain HTML descendants (`` / `` / `` / `` / ``) are passed inside the slot instead of the `` sub-components.** Same composition-required-for-padding pattern as ``: the bare `` only carries the outer styling — padding, row dividers, stripe + hover wiring live on the sub-components. Dropping raw HTML inside compiles cleanly but produces a visually-broken table with no error. The console.warn now surfaces the silent breakage with a link to the canonical composition. Production stays silent. All 5 sub-components (`table.head` / `table.body` / `table.row` / `table.th` / `table.td`) now emit a `data-wk-table-*` marker on their root element — used by the detector to distinguish "wrapped" from "raw". Markers are inert at runtime; they exist purely as detection signals. - **`` warns in debug mode when `wire:model*` is passed on the component tag.** Pre-fix the wire:model attribute was silently dropped into the outer `
`'s attribute bag (Livewire only watches ``, `