Changelog

Notable updates to the kit, docs site, and component contracts. Newest first.

2026-05-12

Patterns. Pattern hub and detail pages (patterns/*.php): opener aligns with the doc contract, real href targets replace placeholders, hero carousel and card demos link to style guide, components, changelog, or example paths, facepile portraits use distinct routes, page shell demo uses hamburger-collection and in-page #page-shell-demo-top for back-to-top, plus markup starters and short checklists on hero, cards, and page shell.
Style guide. Restructured style-guide.php: clearer opener and jump list, Ship next column, mental model section (#mental-model, merged former system logic), removed duplicate Mindset block, utility rules heading tightened, per-section purpose lines, #next-steps bridge (Get Started, Components, Patterns, changelog), fewer placeholder href="#" demos, extensionless YouTube links, and ASCII punctuation tweaks in technical copy.
Component docs. includes/component-page.php skips empty example blurbs, shortens default checklist and sidebar copy, and tightens default “when to use” stubs. Per-page: summaries and configuration intros (earlier pass); deep pass adds list-filter default + variations flow, removes dead $componentSalesNotes, replaces href="#" demos with routes or button overlays, accordion type="button", and shorter imperative notes (shell, list-filter, facepile, theme toggle, tabs, bento, carousel). design.md documents the component-page spine (including optional empty descriptions).
Accessibility. Accordion headers get a visible :focus-visible ring (replacing outline removal alone). Skip link uses :focus-visible plus an outline when shown. Tooltip docs use native button.text triggers; overlay dismiss demo uses a button instead of a dummy href="#" link. Checkerboard demos use descriptive alt on stock photos. design.md adds a short HTML-first accessibility baseline; primary nav logo SVG is marked aria-hidden because the link text names the site.
Overlay panels. Modals (role="alertdialog", role="dialog" aria-modal="true", or .wckd-alertdialog) now manage focus: initial focus (optional data-wckd-dialog-initial-focus or first control in .wckd-alertdialog-actions), Tab stays in the innermost open panel, focus returns to the opener on close. Buttons in .wckd-alertdialog-actions close after their own listeners unless data-wckd-overlay-primary or data-wckd-overlay-dismiss. Triggers use one document-level capture listener; Escape closes the innermost panel first (skipped while a .wckd-dropdown menu is open). Nested panels: clearer stacking and backdrop, close controls stop propagation so parents are not dismissed by mistake, backdrop dismiss ignores clicks from .close-overlay, and the injected close clears document.body overflow the same as backdrop dismiss. CSS adds .wckd-alertdialog-actions and a slightly narrower default modal width; duplicate close buttons are skipped.

2026-05-07

New core component: Dropdown. Added wckd-dropdown for click-triggered action menus: use one .wckd-dropdown root with a direct child button and ul. Runtime closes on outside click and Escape, keeps one menu open at a time, and clamps open menus to the viewport edge.
New optional component: Toast notifications. Added non-blocking feedback toasts with window.wckd.toast(message, { tone, duration }) and declarative triggers via data-wckd-toast, shipped as wckd-ui-kit/components/toast.css and wckd-ui-kit/components/toast.js.

2026-05-04

Utilities. .gap-row-* and .gap-column-* now set row-gap and column-gap (they previously set the gap shorthand on both axes). Combine with .gap-* when you need the same value on both axes, or mix row + column utilities for independent control.
Docs lists. ul.checkmarks checkmarks render via li::before (markers are suppressed when list-style: none).
Prose rhythm. Lists (ul, ol, and .no-bullets / .columns variants) that immediately follow h1 / h2 (or .h1 / .h2) use a larger default top margin than lists after smaller headings or paragraphs, so section titles breathe more before bullet blocks.

2026-05-01

Carousel controls. Prev/next arrows and the dot row are still on by default for non-ticker carousels. The root class hide-nav now removes both arrows and dots so the strip is swipe- or scroll-only. To hide only one, use hide-arrows or hide-dots. Ticker carousels still never add arrows or dots. If you previously used hide-nav to hide only the side arrows while keeping dots—for example on a vertical track—switch that markup to hide-arrows.
Legacy show-nav. The old show-nav class was removed. Arrows and dots are on by default now; leave the hide classes off, or use hide-arrows, hide-dots, or hide-nav as above when you need to hide them.
License. WCKD UI is released under the MIT License (LICENSE at repo root, SPDX MIT). The Terms of Use page summarises MIT, suggested attribution to WCKD UI / WCKD Marketing, Inc., and trademark notes; the LICENSE file is controlling for software rights.