WireKit v1.6.0
Minor release covering font-installation flags, doctor-command token diagnostics, three new opt-in props on <x-wirekit::, a complete motion subsystem with the new <x-wirekit:: component, and supporting CLI helpers. No breaking changes; every new flag, prop, and opt-in surface defaults to off so v1.5.0 developers see byte-identical output.
Added
wirekit:install --font=<sans-key>,--font-serif=<key>,--font-mono=<key>— three optional flags for choosing which bundled WireKit font your project uses. Resolves the key against the bundledFontRegistry(curated Google Fonts bundled locally for GDPR compliance), validates the category, and idempotently injects an override block intoresources/setting BOTHcss/ app. css --font-{cat}(drives Tailwindfont-{cat}utilities) AND--font-wk-{cat}(drives WireKit chrome). The two stay aligned automatically — closes the footgun where Tailwind utilities and WireKit chrome rendered different families. All three flags combinable; re-running with the same key produces byte-identical output. Wrong-category passes throw with a list of valid keys for the right category. Local fonts only — nothing is fetched from a CDN.wirekit:installTailwind config writer detection — the install command detects whether your project uses CSS-first Tailwind v4 config (@themeblock inapp.css) or the legacy JS-config (tailwind.) and writes the font override to the right destination. CSS-first wins on tie (Tailwind v4 deprecates JS config). Custom config shapes that the auto-edit can't safely match log an actionable manual-edit hint instead of risking AST corruption.config. js theme. extend. fontFamily wirekit:installinteractive mode — running the command without flags in an interactive TTY opens a guided setup prompting for theme preset + sans/serif/mono font selection. CI /--no-interaction/ scripted contexts skip prompts and run with v1.5.0-identical defaults.wirekit:doctortoken-alignment diagnostic — new section comparing seven Tailwind tokens against their matching WireKit tokens:--font-sans/,serif/ mono --color-accent,--color-accent-foreground,--radius,--shadow. Each pair emits✓ aligned,⚠ mismatch(with actionable fix hint), ori skipped(var() reference or unset). Surfaces token drift at install-time rather than letting it ship to production.docs/— dedicated documentation page for the doctor command. Covers every diagnostic check with example output, three "Common failures and fixes" walkthroughs (font mismatch, accent-color mismatch, var() skip), and a GitHub Actions integration recipe.cli/ wirekit-doctor. md <x-wirekit::Three Description Options — three opt-in props govern how the description text behaves during the value count-up animation. Option Astat animate> descriptiondefers the description fade-in until the counter settles (200ms ease-out), withDeferred aria-hiddenmirroring visibility for screen-reader contract. Option B (default, status quo) renders the description statically. Option Cdescriptionanimates the description text color fromAnimate --color-wk-text-muted→--color-wk-textsynchronously with the value count-up. Options A and C are mutually exclusive — passing both throws. All three honorprefers-reduced-motion: reduce. New### Animation Scopesubsection indocs/documents the contract.components/ stat. md <x-wirekit::component — NEW thin Blade wrapper that animates its slot content into view. Onereveal> presetprop selects from 11 bases × in/out variants (fade,slide-up,slide-down,slide-left,slide-right,scale,zoom,flip,rotate,bounce,spring). Three trigger modes:viewport(default, IntersectionObserver),click,manual(developer dispatcheswirekit:revealevent). Three duration tokens:fast(150ms),normal(300ms, default),slow(600ms). Fullprefers-reduced-motion: reducehonoring — element snaps to final state. New docs pagedocs/with eight live preview blocks.components/ reveal. md docs/— NEW reference page covering the entire motion subsystem: six new design tokens, 22 keyframes (11 bases × in/out), 22 utility classes (animations. md .wk-animate-{preset}-{in|out}plus three duration modifiers.wk-animate-{fast|normal|slow}), thewirekitAnimateAlpine helper API, and the reduced-motion contract.- Six new motion design tokens in
dist/:wirekit. css --motion-wk-duration-fast: 150ms,--motion-wk-duration-normal: 300ms,--motion-wk-duration-slow: 600ms,--motion-wk-easing-out(decelerating cubic),--motion-wk-easing-in(accelerating cubic),--motion-wk-easing-spring(overshoot). The legacy--transition-wk-durationis aliased to--motion-wk-duration-fastfor back-compat. animateInprop on 7 marketing components —<x-wirekit::,card> <x-wirekit::,feature> <x-wirekit::,hero> <x-wirekit::,stat> <x-wirekit::,callout> <x-wirekit::, andalert> <x-wirekit::accept an optionalempty-state> animateInprop that wires thewirekitAnimateAlpine helper to the root. Pass a base name (fade,slide-up,bounce, …) or a full preset name (fade-in,slide-up-out). Defaultnullpreserves v1.5.0 render exactly. Components with built-in entrance transitions (modal,drawer,toast,tooltip,dropdown,popover) deliberately skip this prop to avoid double-motion conflicts.wirekit:export-api-map— new top-levelhelpersgroup covering Alpine helpers exposed by the WireKit JS bundle.wirekitAnimatelists its full 22-preset enum, three trigger modes, three duration tokens, reduced-motion contract, and Blade-wrapper hint.wirekitdocuments its reactive state catalog (Stat Animate value,animating,progress). The exported map gives editor tooling and IDE extensions a single source of truth for the correctx-data="…"shape without grepping the source.<x-wirekit::four new ordered marker types —list> lower-roman(i, ii, iii),upper-roman(I, II, III),lower-alpha(a, b, c),upper-alpha(A, B, C) join the existingdisc,decimal,noneset. All four render as<ol>with Tailwind v4 arbitrary-valuelist-style-typeutilities. Mix freely across nested levels for legal-contract / academic / spec-style outlines.
Changed
<x-wirekit::horizontal padding aligned withmain> <x-wirekit::. Previouslyheader> padding="lg"produced 1.5rem all around (via--space-wk-lg); now uses--padding-wk-x-{size}for the horizontal axis (1rem atlg) — matching the same-name token used by Header. A sibling Header + Main pair (the canonical app-shell layout) now shares one vertical alignment line. Vertical padding stays on the generic--space-wk-{size}scale for breathing room. Applies to all five sizes (none/sm/md/lg/xl);noneunchanged.<x-wirekit::sidebar breathing room. Sidebarapp-shell> <aside>wrapper gainedlg:mt-[var(--space-wk-md,1rem)] lg:ml-[var(--padding-wk-x-lg)]so the in-flow column position atlg+no longer sits flush against the header divider. Mobile / off-canvas behavior unchanged.dist/wirekit.jsbundle grew by ~0.4 KB (thewirekitAnimateAlpine helper, ~1 KB minified). Full bundle is 78.0 KB. Core bundle (chart-only) unchanged.docs/cli.mddocuments all new install flags + the interactive mode + the new doctor token-alignment section + a cross-link to the dedicatedwirekit:doctorreference page.docs/interactive preset gallery — fourteen toggle-button preview blocks covering all elevenanimations. md <x-wirekit::presets (fade, slide-up, slide-down, slide-left, slide-right, scale, zoom, flip, rotate, bounce, spring) plus a duration comparison row (fast / normal / slow). Each block has a button that toggles between thereveal> -inand-outvariants on successive clicks; clicks during an animation are ignored untilanimationendfires. Reduced-motion users see the final state immediately.docs/bundle sizes refreshed to reflect the v1.6.0 additions: full bundle now ~23 KB gzip (78 KB raw, +dependencies. md wirekitAnimateAlpine helper), core unchanged at ~2 KB gzip (8 KB raw), ESM ~23 KB gzip (76 KB raw). Verified viagzip -c | wc -c.- Public package archive no longer ships
.gitattributesor.gitignore. Both were dev-tooling artifacts whose only purpose was to filter the source tree at archive time; once the package is installed viacomposer require pushery/wirekit, neither file has a downstream role. Their absence from the published tarball makes developer installs marginally cleaner. v1.6.0 is the first release where this applies.
Fixed
<x-wirekit::reduced-motion display formatting. Previously the reduced-motion code path snappedstat animate> valueto the rawdata-targetstring (e.g."12500"); the in-flight animation tick formatted viato(e.g.Locale String() "12,500"). Result: a user withprefers-reduced-motion: reducesaw a different format than a user without. Both paths now share aformatValue()helper so display is locale-consistent regardless of motion preference. Suffix preservation ($,%, etc.) also unified across paths.- Sandbox
code-blockschema —languageis now an enum with 20 highlight.js-aligned grammar values (bash,php,blade,html,javascript,typescript,python,ruby,go,rust,sql,yaml,markdown,dockerfile, …). Thewirekit:export-api-mapoutput and any Sandbox-driven UI now expose the discoverable allowed-values list instead of leaving developers to guess what the syntax-highlighter accepts. - Sandbox
PropsValidator— HTML-form scalar coercion fortype: int/type: bool/type: float. HTML form submissions are always strings ("4"from a<select>,""from an unchecked checkbox); previously the strict type check rejected withexpected int, got string. The validator now conservatively coerces unambiguous string shapes into the declared scalar type before the type check, while preserving rejection for non-numeric strings againstint. Makes every schema with a typed-int / typed-bool prop usable from a Live-Sandbox UI without developers needing to coerce client-side.