@expressivecss/expressive 0.7.0 → 0.9.0

package/dist/types/components/{sidenav.d.ts → navigationDrawer.d.ts}

@@ -1,12 +1,12 @@
 import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
-export interface SidenavOptions extends BaseOptions {
+export interface NavigationDrawerOptions extends BaseOptions {
     /**
-     * Side of screen on which Sidenav appears.
+     * Side of screen on which NavigationDrawer appears.
      * @default 'left'
      */
     edge: 'left' | 'right';
     /**
-     * Allow swipe gestures to open/close Sidenav.
+     * Allow swipe gestures to open/close NavigationDrawer.
      * @default true
      */
     draggable: boolean;
@@ -35,17 +35,17 @@ export interface SidenavOptions extends BaseOptions {
 /**
  * Navigation drawer. Overlay is a modal <dialog>; fixed is a breakpoint.
  * JS opens/closes, handles the trigger, and writes --md-comp-nav-drawer-shift
- * while dragging. CSS owns the slide, the scrim, and the large-screen dock.
+ * while dragging. CSS owns the slide, the scrim, and the Expanded+ dock.
  */
-export declare class Sidenav extends Component<SidenavOptions> implements Openable {
+export declare class NavigationDrawer extends Component<NavigationDrawerOptions> implements Openable {
     id: string;
     /** Describes open/close state of the overlay drawer. */
     isOpen: boolean;
-    /** Describes if sidenav has sidenav-fixed. */
+    /** Whether the drawer is docked (`navigation-drawer-fixed`). */
     isFixed: boolean;
-    /** Describes if Sidenav is being dragged. */
+    /** Describes if NavigationDrawer is being dragged. */
     isDragged: boolean;
-    static _sidenavs: Sidenav[];
+    static _sidenavs: NavigationDrawer[];
     dragTarget: HTMLElement | null;
     private _dialog;
     private _createdDialog;
@@ -57,25 +57,25 @@ export declare class Sidenav extends Component<SidenavOptions> implements Openab
     private _initialScrollTop;
     private _verticallyScrolling;
     private percentOpen;
-    constructor(el: HTMLElement, options: Partial<SidenavOptions>);
-    static get defaults(): SidenavOptions;
+    constructor(el: HTMLElement, options: Partial<NavigationDrawerOptions>);
+    static get defaults(): NavigationDrawerOptions;
     /**
-     * Initializes instance of Sidenav.
+     * Initializes instance of NavigationDrawer.
      * @param el HTML element.
      * @param options Component options.
      */
-    static init(el: HTMLElement, options?: Partial<SidenavOptions>): Sidenav;
+    static init(el: HTMLElement, options?: Partial<NavigationDrawerOptions>): NavigationDrawer;
     /**
-     * Initializes instances of Sidenav.
+     * Initializes instances of NavigationDrawer.
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<InitElement>, options?: Partial<SidenavOptions>): Sidenav[];
-    static getInstance(el: HTMLElement): Sidenav;
+    static init(els: InitElements<InitElement>, options?: Partial<NavigationDrawerOptions>): NavigationDrawer[];
+    static getInstance(el: HTMLElement): NavigationDrawer;
     destroy(): void;
     /**
      * Opens the overlay drawer. No-op while the sidenav is docked
-     * (sidenav-fixed at the large breakpoint).
+     * (navigation-drawer-fixed at the Expanded breakpoint).
      */
     open: () => void;
     /**

package/dist/types/components/registry.d.ts

@@ -1,4 +1,5 @@
-import * as Components from './index';
+import * as Components from "./index";
+import { isCardReveal } from "./cards";
 /**
  * The components `AutoInit()` starts, in initialization order, with the
  * selector each one claims.
@@ -13,13 +14,26 @@ import * as Components from './index';
  * CharacterCounter, Range, ...) simply stays out of this table.
  */
 export declare const AUTO_INIT_COMPONENTS: {
+    AppBar: {
+        component: typeof Components.AppBar;
+        selector: string;
+    };
     Autocomplete: {
         component: typeof Components.Autocomplete;
         selector: string;
     };
+    ButtonGroup: {
+        component: typeof Components.ButtonGroup;
+        selector: string;
+    };
     Cards: {
         component: typeof Components.Cards;
         selector: string;
+        filter: typeof isCardReveal;
+    };
+    ExpandingCard: {
+        component: typeof Components.ExpandingCard;
+        selector: string;
     };
     Carousel: {
         component: typeof Components.Carousel;
@@ -41,10 +55,6 @@ export declare const AUTO_INIT_COMPONENTS: {
         component: typeof Components.Lightbox;
         selector: string;
     };
-    Parallax: {
-        component: typeof Components.Parallax;
-        selector: string;
-    };
     ScrollSpy: {
         component: typeof Components.ScrollSpy;
         selector: string;
@@ -53,8 +63,8 @@ export declare const AUTO_INIT_COMPONENTS: {
         component: typeof Components.FormSelect;
         selector: string;
     };
-    Sidenav: {
-        component: typeof Components.Sidenav;
+    NavigationDrawer: {
+        component: typeof Components.NavigationDrawer;
         selector: string;
     };
     NavigationRail: {
@@ -84,7 +94,7 @@ type Registry = typeof AUTO_INIT_COMPONENTS;
  * above - each key takes that component's own options type.
  */
 export type AutoInitOptions = {
-    [K in keyof Registry]?: Partial<InstanceType<Registry[K]['component']>['options']>;
+    [K in keyof Registry]?: Partial<InstanceType<Registry[K]["component"]>["options"]>;
 };
 /**
  * Automatically initialize components.

package/dist/types/components/slider.d.ts

@@ -1,102 +1,43 @@
 import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface SliderOptions extends BaseOptions {
-    /**
-     * Set to false to hide slide indicators.
-     * @default true
-     */
-    indicators: boolean;
-    /**
-     * Set height of slider.
-     * @default 400
-     */
-    height: number;
-    /**
-     * Set the duration of the transition animation in ms.
-     * @default 500
-     */
-    duration: number;
-    /**
-     * Set the duration between transitions in ms.
-     * @default 6000
-     */
-    interval: number;
-    /**
-     * If slider should pause when keyboard focus is received.
-     * @default true
-     */
-    pauseOnFocus: boolean;
-    /**
-     * If slider should pause when is hovered by a pointer.
-     * @default true
-     */
-    pauseOnHover: boolean;
-    /**
-     * Optional function used to generate ARIA label to indicators (for accessibility purposes).
-     * @param index Current index, starting from "1".
-     * @param current A which indicates whether it is the current element or not
-     * @returns a string to be used as label indicator.
-     * @default null
-     */
-    indicatorLabelFunc: (index: number, current: boolean) => string;
 }
 export declare class Slider extends Component<SliderOptions> {
-    /** Index of current slide. */
-    activeIndex: number;
-    interval: ReturnType<typeof setTimeout>;
-    eventPause: boolean;
-    _slider: HTMLUListElement;
-    _slides: HTMLLIElement[];
-    _activeSlide: HTMLLIElement;
-    _indicators: HTMLLIElement[];
-    _hovered: boolean;
-    _focused: boolean;
-    _focusCurrent: boolean;
-    _sliderId: string;
-    constructor(el: HTMLElement, options: Partial<SliderOptions>);
+    el: HTMLInputElement;
+    private _pointerDown;
+    value: HTMLElement;
+    thumb: HTMLElement;
+    constructor(el: HTMLInputElement, options: Partial<SliderOptions>);
     static get defaults(): SliderOptions;
     /**
      * Initializes instance of Slider.
      * @param el HTML element.
      * @param options Component options.
      */
-    static init(el: HTMLElement, options?: Partial<SliderOptions>): Slider;
+    static init(el: HTMLInputElement, options?: Partial<SliderOptions>): Slider;
     /**
      * Initializes instances of Slider.
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<InitElement>, options?: Partial<SliderOptions>): Slider[];
-    static getInstance(el: HTMLElement): Slider;
+    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<SliderOptions>): Slider[];
+    static getInstance(el: HTMLInputElement): Slider;
     destroy(): void;
-    private _setupEventHandlers;
-    private _removeEventHandlers;
-    private _handleVisibilityChange;
-    private _handleIndicatorClick;
-    private _handleAutoPauseHover;
-    private _handleAutoPauseFocus;
-    private _handleAutoStartHover;
-    private _handleAutoStartFocus;
-    private _handleInterval;
-    private _animateSlide;
-    private _setSliderHeight;
-    private _setupIndicators;
-    private _removeIndicators;
-    set(index: number): void;
-    _pause(fromEvent: boolean): void;
-    /**
-     * Pause slider autoslide.
-     */
-    pause: () => void;
-    /**
-     * Start slider autoslide.
-     */
-    start: () => void;
-    /**
-     * Move to next slider.
-     */
-    next: () => void;
-    /**
-     * Move to prev slider.
-     */
-    prev: () => void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleRangeChange: () => void;
+    _handleRangePointerDown: (e: PointerEvent) => void;
+    _handleRangeInputOrMove: () => void;
+    _handleRangePointerUp: (e: PointerEvent) => void;
+    _handleRangeRelease: () => void;
+    _setupThumb(): void;
+    _removeThumb(): void;
+    _isVertical(): boolean;
+    _host(): HTMLElement | null;
+    _clampDual(): void;
+    _fraction(el: HTMLInputElement): number;
+    _sync(): void;
+    /**
+     * Initializes every range input in the current document.
+     */
+    static Init(): void;
 }

package/dist/types/components/snackbar.d.ts

@@ -58,6 +58,14 @@ export interface SnackbarOptions extends BaseOptions {
      * @default 0.8
      */
     activationPercent: number;
+    /**
+     * Any element in the tree the snackbar should render into. A Snackbar has no
+     * originating element to infer this from, so pass one when the page lives in
+     * a shadow root — the container is appended to that root instead of to
+     * `document.body`, where a root-scoped stylesheet could not reach it.
+     * @default null
+     */
+    root: HTMLElement;
 }
 export declare class Snackbar {
     /** The snackbar element. */
@@ -86,15 +94,22 @@ export declare class Snackbar {
     static _snackbars: Snackbar[];
     static _container: HTMLElement;
     static _draggedSnackbar: Snackbar;
+    /** Which pointer owns the drag in flight; a second finger is ignored. */
+    static _dragPointerId: number | null;
     constructor(options?: Partial<SnackbarOptions>);
     static get defaults(): SnackbarOptions;
     static getInstance(el: HTMLElement): Snackbar;
-    static _createContainer(): void;
+    static _createContainer(root?: HTMLElement | ShadowRoot): void;
     static _removeContainer(): void;
-    static _onDragStart(e: TouchEvent | MouseEvent): void;
-    static _onDragMove(e: TouchEvent | MouseEvent): void;
-    static _onDragEnd(): void;
-    static _xPos(e: TouchEvent | MouseEvent): number;
+    static _onDragStart(e: PointerEvent): void;
+    static _onDragMove(e: PointerEvent): void;
+    static _onDragEnd(e: PointerEvent): void;
+    /**
+     * A cancelled pointer is not a short swipe. Snap back and resume the timer
+     * without consulting the distance travelled - the browser took the gesture
+     * over, so the movement so far says nothing about what the user wanted.
+     */
+    static _onDragCancel(e: PointerEvent): void;
     /**
      * dismiss all snackbars.
      */

package/dist/types/components/tabs.d.ts

@@ -59,6 +59,18 @@ export declare class Tabs extends Component<TabsOptions> {
     _queryTabLinks(): NodeListOf<HTMLAnchorElement>;
     _handleTabClick: (e: MouseEvent) => void;
     _createIndicator(): void;
+    /**
+     * Which tab is current, for the eye and for assistive technology.
+     *
+     * The class alone is a colour. `aria-current` is the part a screen reader
+     * reads, and because tabs are navigation rather than a tablist (rule 2 -
+     * there is no keyboard model here to back a tablist), "current" is exactly
+     * the right word for it. Its *value* changes as the user clicks, which makes
+     * maintaining it the component's job, not the author's - see CONTEXT.md on
+     * static semantics versus dynamic state. Writing it once in the markup and
+     * never moving it left the old tab announcing itself as current.
+     */
+    private _setActiveTabLink;
     _setupActiveTabLink(): void;
     _setupSwipeableTabs(): void;
     _teardownSwipeableTabs(): void;

package/dist/types/components/timepicker.d.ts

@@ -95,10 +95,6 @@ export interface TimepickerOptions extends BaseOptions {
      */
     displayPluginOptions: object;
 }
-type Point = {
-    x: number;
-    y: number;
-};
 export declare class Timepicker extends Component<TimepickerOptions> {
     el: HTMLInputElement;
     id: string;
@@ -110,6 +106,8 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     x0: number;
     y0: number;
     moved: boolean;
+    /** Which pointer is dragging the clock hand; a second finger is ignored. */
+    private _dragPointerId;
     dx: number;
     dy: number;
     /**
@@ -161,17 +159,22 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<TimepickerOptions>): Timepicker[];
     static _addLeadingZero(num: number): string;
     static _createSVGEl(name: string): SVGElement;
-    static _Pos(e: TouchEvent | MouseEvent): Point;
     static getInstance(el: HTMLElement): Timepicker;
     destroy(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
     _handleInputClick: () => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;
-    _handleTimeInputEnterKey: (e: KeyboardEvent) => void;
-    _handleClockClickStart: (e: any) => void;
-    _handleDocumentClickMove: (e: any) => void;
-    _handleDocumentClickEnd: (e: any) => void;
+    _handleClockClickStart: (e: PointerEvent) => void;
+    _handleDocumentClickMove: (e: PointerEvent) => void;
+    _handleDocumentClickEnd: (e: PointerEvent) => void;
+    /**
+     * A cancelled pointer is not a completed selection. The browser or the OS
+     * took the gesture over, so this only lets go of the drag - it must not run
+     * the pointer-up path, which advances hours to minutes, fires `onSelect`,
+     * and under `autoSubmit` closes the picker on a time the user never chose.
+     */
+    _handleDocumentClickCancel: (e: PointerEvent) => void;
     _insertHTMLIntoDOM(): void;
     _setupVariables(): void;
     _pickerSetup(): void;
@@ -210,4 +213,3 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     cancel: () => void;
     clear: () => void;
 }
-export {};

package/dist/types/components/tooltip.d.ts

@@ -69,6 +69,7 @@ export declare class Tooltip extends Component<TooltipOptions> {
     tooltipEl: HTMLElement;
     private _exitDelayTimeout;
     private _enterDelayTimeout;
+    private _animationTimeout;
     xMovement: number;
     yMovement: number;
     constructor(el: HTMLElement, options: Partial<TooltipOptions>);

package/dist/types/core/utils.d.ts

@@ -1,55 +1,32 @@
-import { Edges } from './edges';
-import { Bounding } from './bounding';
+/** The part of a `DOMRect` the positioning helpers below actually read. */
+type Bounding = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
+/** Which edges of a container a box has crossed. */
+type Edges = {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+};
 /**
  * Class with utilitary functions for global usage.
  */
 export declare class Utils {
-    /** Specifies wether tab is pressed or not. */
-    static tabPressed: boolean;
-    /** Specifies wether there is a key pressed. */
-    static keyDown: boolean;
     /**
-     * Key maps.
+     * Key maps. One `KeyboardEvent.key` value each: the second entries these used
+     * to carry (`Esc`, `Up`, `Del`, ...) were IE and Edge Legacy spellings, and
+     * the support baseline excludes both.
      */
     static keys: {
-        TAB: string[];
-        ENTER: string[];
-        ESC: string[];
-        BACKSPACE: string[];
-        ARROW_UP: string[];
-        ARROW_DOWN: string[];
-        ARROW_LEFT: string[];
-        ARROW_RIGHT: string[];
-        DELETE: string[];
+        TAB: string;
+        ENTER: string;
+        ESC: string;
+        BACKSPACE: string;
+        ARROW_UP: string;
+        ARROW_DOWN: string;
+        ARROW_LEFT: string;
+        ARROW_RIGHT: string;
+        DELETE: string;
     };
-    /**
-     * Keys that count as keyboard navigation, precomputed.
-     *
-     * These handlers run at capture phase on the document for every keystroke on
-     * the page, and used to rebuild three arrays and spread them into a fourth
-     * on each one.
-     */
-    private static _navigationKeys;
-    /**
-     * Detects when a key is pressed.
-     * @param e Event instance.
-     */
-    static docHandleKeydown(e: KeyboardEvent): void;
-    /**
-     * Detects when a key is released.
-     * @param e Event instance.
-     */
-    static docHandleKeyup(e: KeyboardEvent): void;
-    /**
-     * Detects when document is focused.
-     * @param e Event instance.
-     */
-    static docHandleFocus(e: FocusEvent): void;
-    /**
-     * Detects when document is not focused.
-     * @param e Event instance.
-     */
-    static docHandleBlur(e: FocusEvent): void;
     /**
      * Run `callback` once the document is parsed.
      *
@@ -60,9 +37,39 @@ export declare class Utils {
      */
     static onDocumentReady(callback: () => void): void;
     /**
-     * Generates a unique string identifier.
+     * Generates a unique string identifier. Every caller prefixes the result and
+     * uses it as an element id, and a UUID is valid in that position.
+     *
+     * `randomUUID` is exposed only in secure contexts, and a dev server on a
+     * plain-HTTP LAN address - the usual way a page is opened on a phone - is
+     * not one. Without the fallback every component that stamps an id would
+     * throw there. The ids only have to be unique within one document, so the
+     * fallback does not need to be cryptographic.
      */
     static guid(): string;
+    /**
+     * Where an element created at runtime has to be appended to stay in the same
+     * tree as `el`. A stylesheet adopted into a shadow root cannot match a node
+     * in the document, so a portal that lands on `document.body` is unstyled
+     * whenever its origin lives in a shadow root (adr/0002).
+     *
+     * Light-DOM elements still get `document.body`, which is what escapes an
+     * ancestor's `overflow: hidden` and stacking context. Inside a shadow root
+     * both hazards come back: the host's own ancestors still form the containing
+     * block, so a transformed ancestor re-anchors `position: fixed` and a
+     * positioned one re-anchors `position: absolute`.
+     */
+    static portalRoot(el: Node): HTMLElement | ShadowRoot;
+    /**
+     * `getElementById` against the tree `el` lives in. The mirror of
+     * `portalRoot`: an id in a shadow root is invisible to
+     * `document.getElementById`, so a trigger and its target inside the same
+     * root could not find each other at all.
+     *
+     * Falls back to the document for a detached `el`, whose root is a plain
+     * element with no lookup of its own.
+     */
+    static getElementById(el: Node, id: string): HTMLElement;
     /**
      * Checks for exceeded edges
      * @param container Container element.
@@ -101,15 +108,18 @@ export declare class Utils {
      */
     static getDocumentScrollLeft(): number;
     /**
-     * Fires the given function after a certain ammount of time.
-     * @param func Function to be fired.
-     * @param wait Wait time.
-     * @param options Additional options.
+     * Trailing-edge throttle: run `func` now, then at most once per `wait` ms
+     * with the most recent arguments.
+     *
+     * This used to carry its underscore ancestor's whole configuration - leading
+     * and trailing switches, a result passthrough - and both call sites are
+     * resize handlers passing nothing but a function and a delay.
+     *
+     * Assign the return value once. `x = Utils.throttle(fn, 200)` is right;
+     * wrapping it in an arrow builds a fresh closure per event and never calls
+     * it, which is how resize handling was dead in three components.
      */
-    static throttle(func: (...args: unknown[]) => void, wait: number, options?: Partial<{
-        leading: boolean;
-        trailing: boolean;
-    }>): (...args: unknown[]) => any;
+    static throttle(func: (...args: unknown[]) => void, wait: number): (...args: unknown[]) => void;
     /**
      * Renders confirm/close buttons with callback function
      */
@@ -127,3 +137,4 @@ export declare class Utils {
         y: number;
     };
 }
+export {};

package/dist/types/index.d.ts

@@ -1,9 +1,8 @@
-export * from './components';
-export { Dialogs } from './behaviors/dialogs';
-export { BottomSheets } from './behaviors/bottomSheets';
-export { SideSheets } from './behaviors/sideSheets';
-export { Forms } from './behaviors/forms';
-export { Waves } from './behaviors/waves';
-export { AutoInit } from './components/registry';
-export type { AutoInitOptions } from './components/registry';
-export declare const version = "0.7.0";
+export * from "./components";
+export { Dialogs } from "./behaviors/dialogs";
+export { BottomSheets } from "./behaviors/bottomSheets";
+export { SideSheets } from "./behaviors/sideSheets";
+export { Forms } from "./behaviors/forms";
+export { AutoInit } from "./components/registry";
+export type { AutoInitOptions } from "./components/registry";
+export declare const version = "0.9.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",
@@ -45,6 +45,7 @@
     },
     "./css": "./dist/css/expressive.css",
     "./css/min": "./dist/css/expressive.min.css",
+    "./fonts/*": "./dist/fonts/*",
     "./scss": "./src/sass/expressive.scss",
     "./scss/*": "./src/sass/*"
   },
@@ -60,7 +61,8 @@
     "prepack": "npm run build",
     "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
     "build": "run-s clean build:css build:js build:types",
-    "build:css": "run-s build:css:expanded build:css:min",
+    "build:fonts": "node scripts/copy-fonts.mjs",
+    "build:css": "run-s build:fonts build:css:expanded build:css:min",
     "build:css:expanded": "sass src/sass/expressive.scss dist/css/expressive.css --style=expanded --source-map --load-path=src/sass",
     "build:css:min": "sass src/sass/expressive.scss dist/css/expressive.min.css --style=compressed --source-map --load-path=src/sass",
     "build:js": "run-s build:js:esm build:js:cjs build:js:iife build:js:iife-min",
@@ -69,13 +71,36 @@
     "build:js:iife": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.js --sourcemap",
     "build:js:iife-min": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.min.js --minify --sourcemap",
     "build:types": "tsc -p tsconfig.build.json",
+    "build:skill": "node scripts/gen-expressivecss-skill.mjs && node mcp/expressivecss/scripts/sync-guides.mjs",
+    "build:semantics": "node scripts/gen-semantics.mjs",
+    "resolve:expressivecss": "node skills/expressivecss/scripts/resolve-version.mjs",
+    "test:skill": "node --test tests/expressivecss-skill.test.js tests/expressivecss-version-resolution.test.js tests/expressivecss-component-decisions.test.js tests/expressivecss-skill-evals.test.js tests/expressivecss-codex-adapter.test.js tests/expressivecss-skill-benchmark.test.js tests/expressivecss-eval-browser.test.js tests/expressivecss-interface-quality.test.js tests/expressivecss-material-quality.test.js tests/expressivecss-eval-provenance.test.js tests/expressivecss-natural-discovery.test.js && npm run test:skill-evals",
+    "test:skill-evals": "node scripts/eval-expressivecss-skill.mjs --responses=tests/fixtures/expressivecss-skill-evals/passing-responses.json",
+    "docs:dev": "run-s build docs:watch",
+    "docs:watch": "run-p watch:css watch:js docs:server",
+    "docs:server": "astro dev --root docs",
+    "docs:build": "run-s build docs:build:astro docs:verify",
+    "docs:build:astro": "astro build --root docs",
+    "docs:preview": "astro preview --root docs",
+    "docs:verify": "node scripts/verify-site.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "run-s build:js build:css test:run",
     "test:run": "node --test",
+    "test:browser": "run-s build:js build:css test:browser:run",
+    "test:browser:critical": "node scripts/check-browser.mjs && node --test tests/expressivecss-cross-browser.test.js",
+    "test:browser:run": "node scripts/check-browser.mjs && node --test tests/*-browser.test.js",
     "test:watch": "node --test --watch",
+    "test:visual": "node visual/run.mjs",
+    "test:visual:report": "playwright show-report visual/report",
     "watch": "run-p watch:css watch:js",
     "watch:css": "sass --watch src/sass/expressive.scss:dist/css/expressive.css --style=expanded --source-map --load-path=src/sass",
-    "watch:js": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.js --sourcemap --watch=forever"
+    "watch:js": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.js --sourcemap --watch=forever",
+    "check:generated": "node scripts/gen-semantics.mjs --check && node scripts/gen-expressivecss-skill.mjs --check && node mcp/expressivecss/scripts/sync-guides.mjs --check",
+    "verify": "run-s build typecheck test:run check:generated docs:build:astro docs:verify",
+    "verify:packages": "node scripts/verify-packages.mjs",
+    "test:node": "node scripts/run-node-tests.mjs",
+    "record:capabilities": "node scripts/record-capability-evidence.mjs --record",
+    "verify:consumer": "node scripts/lib/verify-consumer.mjs"
   },
   "engines": {
     "node": ">=20"
@@ -87,10 +112,21 @@
     "not dead"
   ],
   "devDependencies": {
+    "@fontsource-variable/material-symbols-outlined": "^5.3.4",
+    "@fontsource-variable/material-symbols-rounded": "^5.3.4",
+    "@fontsource-variable/material-symbols-sharp": "^5.3.4",
+    "@fontsource/noto-sans": "^5.3.0",
+    "@fontsource/roboto": "^5.3.0",
+    "@playwright/test": "^1.56.0",
+    "astro": "^7.2.8",
     "esbuild": "^0.28.2",
+    "fallow": "^3.23.0",
     "jsdom": "^30.0.1",
     "npm-run-all2": "^9.0.3",
     "sass": "^1.102.0",
+    "smol-toml": "^1.8.0",
+    "turndown": "^7.2.4",
+    "turndown-plugin-gfm": "^1.0.2",
     "typescript": "^7.0.2"
   }
 }