@expressivecss/expressive 0.15.0 → 0.16.0

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

@@ -5,24 +5,34 @@ export interface BaseOptions {
 }
 export type InitElement = HTMLElement | Element;
 export type InitElements<T extends InitElement> = NodeListOf<T> | HTMLCollectionOf<T>;
-type ComponentConstructor<T extends Component<O>, O extends BaseOptions> = {
-    new (el: HTMLElement, options: Partial<O>): T;
+/** Any component class; `init` reads its element, options and instance types. */
+type ComponentClass = (new (el: never, options: never) => Component<BaseOptions>) & {
+    key: string;
 };
-type ComponentType<C extends Component<O>, O extends BaseOptions> = ComponentConstructor<C, O> & typeof Component<O>;
+/** The element a component class is constructed on. */
+type ElementOf<C extends ComponentClass> = C extends new (el: infer E, options: never) => unknown ? E : never;
+/** The options `init` accepts for a component class. */
+type InitOptions<C extends ComponentClass> = Partial<InstanceType<C>['options']>;
 export interface I18nOptions {
     cancel: string;
     clear: string;
     done: string;
 }
-export interface Openable {
-    isOpen: boolean;
-    open(): void;
-    close(): void;
+/** What {@link Component._notify} passes on, and when it stops. */
+export interface NotifyOptions {
+    args?: unknown[];
+    detail?: unknown;
+    current?: () => boolean;
 }
 /**
  * Base class implementation for Expressive components.
  */
 export declare class Component<O extends BaseOptions> {
+    /**
+     * The element property that holds an instance, `Expressive_<Name>`, so page
+     * code can read `el.Expressive_Tabs` as well as call `Tabs.getInstance(el)`.
+     */
+    static key: string;
     /**
      * The DOM element the plugin was initialized with.
      */
@@ -31,42 +41,50 @@ export declare class Component<O extends BaseOptions> {
      * The options the instance was initialized with.
      */
     options: O;
+    /** Aborted by destroy(), which removes every listener added with its signal. */
+    protected _events: AbortController;
     /**
-     * Constructs component instance and set everything up.
+     * Destroys any instance already on `el`, then spreads `options` over the
+     * class defaults, and `options.i18n` over the default strings, so passing
+     * one string keeps the rest. A subclass passes options it reads from
+     * markup in `options`.
      */
-    constructor(el: HTMLElement, options: Partial<O>, classDef: ComponentType<Component<O>, O>);
+    constructor(el: HTMLElement, options: Partial<O>);
     /**
-     * Initializes component instance.
+     * Initializes an instance of the class it is called on.
      * @param el HTML element.
      * @param options Component options.
-     * @param classDef Class definition.
-     */
-    protected static init<I extends HTMLElement, O extends BaseOptions, C extends Component<O>>(el: I, options: O, classDef: ComponentType<C, O>): C;
-    /**
-     * Initializes component instances.
-     * @param els HTML elements.
-     * @param options Component options.
-     * @param classDef Class definition.
      */
-    protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(els: InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C[];
+    static init<C extends ComponentClass>(this: C, el: ElementOf<C>, options?: InitOptions<C>): InstanceType<C>;
     /**
-     * Initializes component instances.
+     * Initializes an instance of the class it is called on for each element.
      * @param els HTML elements.
      * @param options Component options.
-     * @param classDef Class definition.
      */
-    protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[];
+    static init<C extends ComponentClass>(this: C, els: InitElements<InitElement>, options?: InitOptions<C>): InstanceType<C>[];
     /**
      * @returns default options for component instance.
      */
     static get defaults(): BaseOptions;
     /**
-     * Retrieves component instance for the given element.
+     * Retrieves the instance of the class it is called on for the given element.
      * @param el Associated HTML Element.
      */
-    static getInstance(el: HTMLElement): Component<BaseOptions>;
+    static getInstance<C extends ComponentClass>(this: C, el: HTMLElement): InstanceType<C>;
+    /**
+     * Runs an `on…` option callback, then fires `expressive:<type>` from the
+     * element, so pages can listen instead of passing options. The callback gets
+     * `args` (the element by default) and the event carries `detail`.
+     *
+     * A callback or listener may close, reopen or destroy the component. Pass
+     * `current` to tell whether the state `type` names still holds; the event
+     * is skipped once it does not, or once the instance is destroyed, and the
+     * result says whether to carry on.
+     */
+    protected _notify(type: string, callback?: Function | null, { args, detail, current }?: NotifyOptions): boolean;
     /**
-     * Destroy plugin instance and teardown.
+     * Destroy plugin instance and teardown. A subclass tears down its own state
+     * and calls this to remove its listeners and release the element.
      */
     destroy(): void;
 }

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

@@ -0,0 +1,21 @@
+/**
+ * A form-associated element that wraps a text input and submits for it, so
+ * the browser handles the field's values, reset, validity and disabled state.
+ * Chips and Cascader each define one under their own tag.
+ */
+export interface FormControl extends HTMLElement {
+    readonly internals: ElementInternals;
+    /** Called for a form reset no listener canceled, in the same task. */
+    onFormReset: (() => void) | null;
+}
+/** Whether the browser has form-associated custom elements. jsdom does not. */
+export declare const formAssociated: () => boolean;
+/**
+ * Wraps `input` in a `tag` control that takes its name. `display: contents`
+ * lays the input out as a child of the field still. The control follows the
+ * input's disabled and form attributes, and `onChange` runs after the input's
+ * disabled, readonly or form attribute changes.
+ */
+export declare function wrapInControl(tag: string, input: HTMLInputElement, onChange: () => void): FormControl;
+/** Unwraps the control, with whatever else went in it, and gives `input` its name back. */
+export declare function unwrapControl(control: FormControl, input: HTMLInputElement): void;

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

@@ -0,0 +1,20 @@
+/**
+ * Springs solved at run time. The CSS springs are sampled at build time
+ * into linear() easings that always start from rest, so motion that is
+ * interrupted restarts. A spring solved here starts from where something
+ * is, at the speed it has, as M3's springs do: mass 1, a damping ratio and
+ * a stiffness.
+ */
+export interface Spring {
+    damping: number;
+    stiffness: number;
+}
+/**
+ * The spring's path from `from` to `to`, released at `velocity` in units
+ * per millisecond, as one value a frame until it settles on `to`.
+ */
+export declare function springPath(from: number, to: number, velocity: number, spring: Spring): number[];
+/** The spring a CSS token names, from its -damping and -stiffness tokens, or null without them. */
+export declare function springToken(el: Element, name: string): Spring | null;
+/** Plays a path on one property, `write` turning each value into CSS. */
+export declare function animatePath(el: Element, property: string, path: number[], write: (value: number) => string): Animation;

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

@@ -1,32 +1,36 @@
-/** 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;
-};
+/** Sets an attribute, or removes it for null, as when restoring a value read with getAttribute. */
+export declare function restoreAttribute(el: Element, name: string, value: string | null): void;
+/**
+ * Fills a picker's footer: a Clear button, hidden unless `showClearBtn`,
+ * then Cancel and Done unless the picker writes its value without them.
+ */
+export declare function pickerFooter(footer: HTMLElement, { i18n, showClearBtn, autoSubmit }: {
+    i18n: Partial<Record<'clear' | 'cancel' | 'done', string>>;
+    showClearBtn: boolean;
+    autoSubmit: boolean;
+}, clearClass: string, onClear: () => void, onConfirm: () => void, onCancel: () => void): void;
+/**
+ * An AbortController from the window `node` is in. Its signal removes
+ * listeners added there, and jsdom rejects a signal from another window.
+ */
+export declare function controllerFor(node: Node): AbortController;
+/** An SVG element with its attributes. */
+export declare function svgNode(name: string, attributes?: Record<string, string>): SVGElement;
 /**
  * Class with utilitary functions for global usage.
  */
 export declare class Utils {
     /**
-     * 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;
-    };
+     * Whether a keydown belongs to an IME composition, such as the Enter that
+     * confirms a candidate. Safari reports `isComposing` false for that Enter,
+     * so keyCode 229 covers it.
+     */
+    static isComposing(e: KeyboardEvent): boolean;
+    /**
+     * `handler`, skipped for every key of an IME composition: while the user
+     * picks a candidate, Enter, the arrows and Escape belong to the IME.
+     */
+    static ignoringComposition(handler: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;
     /**
      * Run `callback` once the document is parsed.
      *
@@ -36,6 +40,11 @@ export declare class Utils {
      * both orders.
      */
     static onDocumentReady(callback: () => void): void;
+    /**
+     * The language an element is written in, from the nearest `lang`, or
+     * undefined without one or for a tag the browser does not know.
+     */
+    static locale(el: Element): string | undefined;
     /**
      * 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.
@@ -71,70 +80,74 @@ export declare class Utils {
      */
     static getElementById(el: Node, id: string): HTMLElement;
     /**
-     * Checks for exceeded edges
-     * @param container Container element.
-     * @param bounding Bounding rect.
-     * @param offset Element offset.
-     */
-    static checkWithinContainer(container: HTMLElement, bounding: Bounding, offset: number): Edges;
-    /**
-     * Checks if element can be aligned in multiple directions.
-     * @param el Element to be inspected.
-     * @param container Container element.
-     * @param bounding Bounding rect.
-     * @param offset Element offset.
-     */
-    static checkPossibleAlignments(el: HTMLElement, container: HTMLElement, bounding: Bounding, offset: number): {
-        top: boolean;
-        right: boolean;
-        bottom: boolean;
-        left: boolean;
-        spaceOnTop: number;
-        spaceOnRight: number;
-        spaceOnBottom: number;
-        spaceOnLeft: number;
-    };
+     * Adds or removes one name in an element's inline `anchor-name` list. A
+     * trigger can anchor a Tooltip and a Menu at once, and writing the whole
+     * property let the last writer, or the first to be destroyed, wipe the other.
+     */
+    static setAnchorName(el: HTMLElement, name: string, on: boolean): void;
     /**
-     * Retrieves target element id from trigger.
-     * @param trigger Trigger element.
+     * Fires `expressive:<type>` from `el`. It bubbles and crosses shadow roots,
+     * so a page can listen on the element, an ancestor or the document. A
+     * `cancelable` event returns false once a listener calls preventDefault().
      */
-    static getIdFromTrigger(trigger: HTMLElement): string;
+    static emit(el: Element, type: string, detail?: unknown, cancelable?: boolean): boolean;
     /**
-     * Retrieves document scroll postion from top.
+     * The element an event really started on, for a listener on the document.
+     * There `event.target` is retargeted to the shadow host, so delegation that
+     * reads it never sees anything inside an open shadow root. A closed root
+     * keeps its inside private and still yields the host.
      */
-    static getDocumentScrollTop(): number;
+    static eventTarget(event: Event): Element | null;
+    /** Whether a key was pressed without Alt, Ctrl or Meta, which belong to the browser and the system. */
+    static plainKey(e: KeyboardEvent): boolean;
+    /** Where a key moves from `index` among `count` items: by `steps`, or to an end for Home and End. NaN for any other key. */
+    static _keyIndex(key: string, index: number, count: number, steps: Record<string, number>): number;
     /**
-     * Retrieves document scroll postion from left.
+     * The item a key moves focus to, from the focused one among `items`: by
+     * the offset `steps` gives the key, or to the first or last for Home and
+     * End. Disabled items are skipped. Undefined for other keys, for a key
+     * with a modifier, when focus is on none of the items, and past either end
+     * unless `wrap`.
      */
-    static getDocumentScrollLeft(): number;
+    static focusTarget(items: HTMLElement[], e: KeyboardEvent, steps: Record<string, number>, wrap?: boolean): HTMLElement | undefined;
     /**
-     * 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.
+     * Whether focus is on or inside any of `els`, read from each element's own
+     * root. A document listener cannot tell from `composedPath()` when the
+     * element sits in a closed shadow root, but the element's root still knows
+     * what has focus.
+     */
+    static focusIsIn(...els: (Element | null | undefined)[]): boolean;
+    /**
+     * `closest()` for a document listener: the nearest element on the event's
+     * composed path that matches `selector`. Unlike `eventTarget(e).closest()`
+     * it climbs out of shadow roots too, so a press on a shadow-root icon inside
+     * a light-DOM button still finds the button.
      */
-    static throttle(func: (...args: unknown[]) => void, wait: number): (...args: unknown[]) => void;
+    static closestInPath(event: Event, selector: string): Element | null;
     /**
-     * Renders confirm/close buttons with callback function
+     * Retrieves target element id from trigger.
+     * @param trigger Trigger element.
      */
-    static createConfirmationContainer(container: HTMLElement, confirmText: string, cancelText: string, onConfirm: (Function: object) => void, onCancel: (Function: object) => void): void;
+    static getIdFromTrigger(trigger: HTMLElement): string;
     /**
-     * Renders a button with optional callback function
+     * Writes document coordinates as `top`/`left` on an absolutely positioned
+     * element. A static body uses document coordinates; positioned parents,
+     * such as a shadow host, use their padding edge, including borders and
+     * local scrolling.
      */
-    static createButton(container: HTMLElement, text: string, className?: string[], visibility?: boolean, callback?: (Function: object) => void): void;
-    static _setAbsolutePosition(origin: HTMLElement, container: HTMLElement, position: string, margin: number, transitionMovement: number, align?: string): {
+    static _placeInOffsetParent(el: HTMLElement, coordinates: {
         x: number;
         y: number;
-    };
+    }): void;
+    /**
+     * Moves document coordinates so a `width` by `height` box stays in the
+     * viewport. A box past the left or top edge, or within `offset` of it,
+     * starts `offset` in; a box past the right or bottom edge, or within
+     * `offset` of it, ends at that edge. `offset` is the margin plus the slide
+     * distance, or minus it for right alignment.
+     */
     static _repositionWithinScreen(x: number, y: number, width: number, height: number, margin: number, transitionMovement: number, align: string): {
         x: number;
         y: number;
     };
 }
-export {};

package/dist/types/modular.d.ts

@@ -1,11 +1,21 @@
 export * from './components';
 export { Dialogs } from './behaviors/dialogs';
+export type { ConfirmOptions } from './behaviors/dialogs';
 export { BottomSheets } from './behaviors/bottomSheets';
 export { SideSheets } from './behaviors/sideSheets';
 export { Forms } from './behaviors/forms';
+export { Copy } from './behaviors/copy';
+export { Theme } from './behaviors/theme';
+export { PaneResize } from './behaviors/paneResize';
+export { ImageCompare } from './behaviors/imageCompare';
+export { Tour } from './behaviors/tour';
+export { Sortable } from './behaviors/sortable';
+export { Lists } from './behaviors/lists';
+export { DataTables } from './behaviors/dataTables';
+export { TransferList } from './behaviors/transferList';
 export { AutoInit } from './components/registry';
 export type { AutoInitOptions } from './components/registry';
-export declare const version = "0.15.0";
+export declare const version = "0.16.0";
 export type * from './components/autocomplete';
 export type * from './components/appBar';
 export type * from './components/buttons';
@@ -13,8 +23,12 @@ export type * from './components/buttonGroup';
 export type * from './components/cards';
 export type * from './components/expandingCard';
 export type * from './components/carousel';
+export type * from './components/confetti';
+export type * from './components/particles';
+export type * from './components/keypad';
 export type * from './components/characterCounter';
 export type * from './components/chips';
+export type * from './components/cascader';
 export type * from './components/lineChart';
 export type * from './components/columnChart';
 export type * from './components/barChart';
@@ -23,13 +37,31 @@ export type * from './components/heatmapChart';
 export type * from './components/radarChart';
 export type * from './components/radialChart';
 export type * from './components/mixedChart';
+export type * from './components/scatterChart';
+export type * from './components/funnelChart';
+export type * from './components/sankeyChart';
+export type * from './components/treemapChart';
+export type * from './components/pullToRefresh';
+export type * from './components/loadingOverlay';
+export type * from './components/backToTop';
+export type * from './components/swipeActions';
+export type * from './components/inputMask';
+export type * from './components/showMore';
+export type * from './components/hoverCard';
+export type * from './components/currencyInput';
+export type * from './components/commandPalette';
 export type * from './components/questionnaire';
 export type * from './components/datepicker';
 export type * from './components/menu';
+export type * from './components/menubar';
+export type * from './components/messageScroller';
+export type * from './components/richTextEditor';
+export type * from './components/mapView';
 export type * from './components/lightbox';
 export type * from './components/slider';
 export type * from './components/scrollspy';
 export type * from './components/select';
+export type * from './components/treeSelect';
 export type * from './components/navigationRail';
 export type * from './components/tabs';
 export type * from './components/timepicker';

package/dist/types/plugins/dockedDisplayPlugin.d.ts

@@ -21,22 +21,24 @@ export declare class DockedDisplayPlugin {
     private readonly container;
     private options;
     private visible;
+    /**
+     * Elements whose clicks count as inside, beside the container: the element
+     * the container docks to, and any other control that opens it, such as a
+     * date range's end input. A click on one of those must not close it.
+     */
+    readonly triggers: HTMLElement[];
     constructor(el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>);
     private _handleDocumentClick;
-    private get _transition();
+    /** Eases the container to `y` pixels down and to `opacity`. */
+    private _animate;
+    /** Places the container below the element, kept on screen. */
+    private _place;
     /**
      * Tears the plugin down. While shown, the document listener holds a
      * reference to this instance - and through it the whole picker subtree - so
      * the owning component must call this from its own destroy().
      */
     destroy: () => void;
-    /**
-     * Initializes instance of DockedDisplayPlugin
-     * @param el HTMLElement to position to
-     * @param container HTMLElement to be positioned
-     * @param options Plugin options
-     */
-    static init(el: HTMLElement, container: HTMLElement, options?: Partial<DockedDisplayPluginOptions>): DockedDisplayPlugin;
     show: () => void;
     hide: () => void;
 }

package/dist/types/plugins/modalDisplayPlugin.d.ts

@@ -0,0 +1,32 @@
+import { DockedDisplayPlugin, DockedDisplayPluginOptions } from './dockedDisplayPlugin';
+/**
+ * Shows a picker in a modal <dialog>, which the dialog styles draw as a
+ * basic dialog over a scrim. The browser keeps focus inside it. Escape or a
+ * press on the scrim closes it, and the picker hears that as Cancel; the
+ * picker closes it itself through hide() on Ok or Cancel. Focus goes back
+ * to the field that opened it.
+ */
+export declare class ModalDisplayPlugin {
+    /** The fields that open the dialog, as DockedDisplayPlugin keeps them. */
+    readonly triggers: HTMLElement[];
+    private readonly dialog;
+    private readonly onDismiss;
+    /** Whether the picker, not the user, is closing the dialog. */
+    private _settled;
+    private _opener;
+    constructor(el: HTMLElement, container: HTMLElement, onDismiss: () => void);
+    /** The picker fills the dialog, so a press on the dialog itself is on the scrim. */
+    private _handleClick;
+    private _handleClose;
+    destroy: () => void;
+    show: () => void;
+    hide: () => void;
+}
+export type DisplayPlugin = DockedDisplayPlugin | ModalDisplayPlugin;
+/**
+ * The display plugin a picker's `displayPlugin` option names: 'docked',
+ * 'modal', or none for an inline picker. `onDismiss` is the picker's Cancel.
+ */
+export declare function createDisplayPlugin(type: string | null, el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>, onDismiss: () => void): DisplayPlugin | undefined;
+/** Ok and Cancel close a modal picker; a docked one stays until a click outside. */
+export declare function hideModal(plugin: DisplayPlugin | undefined): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",
@@ -79,10 +79,9 @@
     "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:skill": "node scripts/gen-expressivecss-skill.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": "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 tests/expressivecss-migration-skill.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",
@@ -100,14 +99,13 @@
     "test:visual:docker": "node scripts/run-docker.mjs --visual",
     "test:packages:docker": "node scripts/run-docker.mjs sh -c 'npm ci --prefix mcp/expressivecss && npm test --prefix mcp/expressivecss && npm run verify:packages'",
     "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:browser:run": "node scripts/check-browser.mjs && node scripts/run-node-tests.mjs --browser",
     "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",
-    "check:generated": "node scripts/gen-semantics.mjs --check && node scripts/gen-expressivecss-skill.mjs --check && node mcp/expressivecss/scripts/sync-guides.mjs --check",
+    "check:generated": "node scripts/gen-semantics.mjs --check && node scripts/gen-expressivecss-skill.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",
@@ -128,14 +126,18 @@
     "@fontsource-variable/material-symbols-rounded": "^5.3.4",
     "@fontsource-variable/material-symbols-sharp": "^5.3.4",
     "@fontsource/noto-sans": "^5.3.0",
+    "@fontsource/noto-sans-arabic": "^5.3.0",
+    "@fontsource/noto-sans-hebrew": "^5.3.0",
+    "@fontsource/noto-sans-thai": "^5.3.0",
     "@fontsource/roboto": "^5.3.0",
     "@playwright/test": "^1.56.0",
     "@tiptap/core": "^3.31.4",
     "@tiptap/pm": "^3.31.4",
     "@tiptap/starter-kit": "^3.31.4",
+    "alpinejs": "^3.17.5",
     "astro": "^7.2.8",
     "esbuild": "^0.28.2",
-    "fallow": "^3.23.0",
+    "fallow": "^3.33.1",
     "jsdom": "^30.0.1",
     "maplibre-gl": "^6.13.0",
     "npm-run-all2": "^9.0.3",