WireKit v1.2.0
Substantial feature release. WireKit now covers full-page composition: a 10-component
layout primitives system, a 9-component typography primitives system, app-shell
scaffolding, and a marketing-page toolkit — plus a new unified intent × surface
variant API, a component registry, five new artisan commands, and a rewritten
release pipeline.
Added
- Layout primitives (10 components) —
<x-wirekit::(width-constrained wrapper with max/padding/center props),container> <x-wirekit::(vertical flex),stack> <x-wirekit::(horizontal flex),row> <x-wirekit::(responsive column syntaxgrid> cols="1 sm:2 lg:3"),<x-wirekit::(full-width with background and divider variants),section> <x-wirekit::(flex-grow),spacer> <x-wirekit::(horizontal/vertical with label and variants),divider> <x-wirekit::(flex centering),center> <x-wirekit::(native CSSaspect-ratio> aspect-ratio), and<x-wirekit::(sr-only wrapper).visually-hidden> - Typography primitives (9 components) —
<x-wirekit::(h1–h6 with auto-sizing, accent, tracking),heading> <x-wirekit::(body text with size, variant, weight, align, truncate, line-clamp),text> <x-wirekit::(styled anchor with external-link detection),link> <x-wirekit::(inline monospace),code> <x-wirekit::(multi-line with copy button and filename),code-block> <x-wirekit::(keyboard key indicator),kbd> <x-wirekit::(ul/ol with spacing),list> <x-wirekit::(left-border with citation), andblockquote> <x-wirekit::(text highlight wrapper).mark> <x-wirekit::— typography helper that highlights query matches inside a block of text. Pairs with the Prose component's newhighlight> variantprop.- App Shell components (6 components) —
<x-wirekit::(full-page layout with responsive sidebar toggle),app-shell> <x-wirekit::(sticky header with optional container),header> <x-wirekit::(content area with padding variants),main> <x-wirekit::(logo + name link),brand> <x-wirekit::(avatar + name display), andprofile> <x-wirekit::(hamburger button).sidebar. toggle> - Marketing components (5 components) —
<x-wirekit::(landing-page hero with variants, gradient, slots),hero> <x-wirekit::(responsive feature-card grid),feature-grid> <x-wirekit::(individual card),feature> <x-wirekit::(call-to-action banner with dark and accent variants), andcta> <x-wirekit::(columns, brand, legal slots).footer> - Unified Intent × Surface variant system — new
intentandsurfaceprops on Button and Badge. Six intents (neutral,accent,success,warning,danger,info) × five surfaces (filled,soft,outline,ghost,link) generate consistent combinations via a centralVariantResolver. The legacyvariant=API is preserved for full backward compatibility. Component— central catalog of every WireKit component with category and description metadata. Anti-drift tests enforce registry ↔ filesystem consistency (every Blade file has an entry, no stale entries, valid categories, non-empty descriptions).Registry php artisan wirekit:list— lists all components grouped by category.php artisan wirekit:show {name}— displays props, sub-components, and docs path for a given component.php artisan wirekit:install— one-command setup: publishes config and assets, prints layout directive snippet, adds published assets to.gitignore.php artisan wirekit:theme {preset}— injects a theme preset's CSS block into the developer'sapp.css.php artisan wirekit:make {name}— scaffolds a Livewire page pre-wired with WireKit components.- Design tokens — new spacing scale (
--space-wk-xsthrough--space-wk-2xl), container max widths (--size-wk-container-smthrough--size-wk-container-2xl),--text-wk-3xl,--font-wk-heading-line-height, and semantic colors (--color-wk-bg-inverse,--color-wk-text-inverse,--color-wk-border-strong,--color-wk-warning-bg) with dark-mode counterparts. - Accessibility sections in docs — Button, Input, Textarea, and Label pages
document label pairing,
aria-invalid/aria-describedbywiring,:user-invalidstyling, focus-visible rings, disabled states, icon-onlyaria-labelguidance, external-link auto-protection, and required-indicator semantics.
Changed
target="_blank"auto-protection — all link-rendering components (Button, Dropdown Item, Brand, Card, Navigation Menu Item, Link, Menubar Item, Command Palette Item) now automatically injectrel="noopener noreferrer"(tabnabbing prevention) and a<span class="sr-only">(opens in new tab)</span>screen-reader hint whenevertarget="_blank"is set. No developer changes needed. Components with both button and link modes include a guard so the injection only fires whenhrefis present.<x-wirekit::— gained aprose> variantprop for tighter integration with the new typography primitives.
Fixed
- Grid and Feature Grid responsive classes missing from developer bundles —
grid.blade.phpandfeature-grid.built Tailwind class names via runtime PHP string concatenation (blade. php "{$breakpoint}:grid-cols-{$value}"). Tailwind's content scanner only sees literal strings, so these classes were dropped from developer CSS and previews rendered as stacked items instead of responsive grids. Replaced with a literal class map covering all valid breakpoint × column combinations (Grid: 72 entries; Feature Grid: 36 entries). Invalid tokens surface viaWireKit::.validateProp() - Layout-doc preview rendering — 40
<x-wirekit::occurrences in container, grid, stack, row, section, spacer, and divider docs wrapped raw content directly in the card withoutcard> <x-wirekit::. Card provides border/radius/background but not padding — previews rendered as thin-bordered boxes with cramped text. All 40 occurrences now usecard. body> card.body. Aspect-ratio preview refactored to a styled centering frame. - README component links — the Feature row now links to its own docs page instead of Feature Grid. Highlight component added to the Typography table.