@expressivecss/expressive 0.8.0 → 0.9.1

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

@@ -0,0 +1,26 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+/**
+ * Collapse medium/large flexible app bars on scroll, and open the related
+ * search view when the search field in a search app bar is selected.
+ *
+ * Observation is IntersectionObserver on a 1px sentinel ahead of the header.
+ * A scroll listener would re-enter layout on every tick; this does not.
+ */
+export declare class AppBar extends Component<BaseOptions> {
+    private _observer;
+    private _sentinel;
+    private _input;
+    private _view;
+    private _suppressSearchOpen;
+    constructor(el: HTMLElement, options: Partial<BaseOptions>);
+    static get defaults(): BaseOptions;
+    static init(el: HTMLElement, options?: Partial<BaseOptions>): AppBar;
+    static init(els: InitElements<InitElement>, options?: Partial<BaseOptions>): AppBar[];
+    static getInstance(el: HTMLElement): AppBar;
+    destroy(): void;
+    private _setupCollapse;
+    private _onIntersect;
+    private _setupSearch;
+    private _onSearchViewClose;
+    private _onSearchFocus;
+}

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

@@ -0,0 +1,39 @@
+import { Component, BaseOptions, InitElements, InitElement } from "../core/component";
+export interface ButtonGroupOptions extends BaseOptions {
+}
+/**
+ * Coordinates Material button-group press geometry and optional toggle state.
+ *
+ * Standard groups redistribute the pressed item's 15% width growth from its
+ * immediate neighbors. `data-selection="single|multiple"` also enables
+ * `aria-pressed` state management.
+ */
+export declare class ButtonGroup extends Component<ButtonGroupOptions> {
+    private _pressedStyles;
+    private _releaseStyles;
+    private _releaseTimer;
+    private _originalPressed;
+    private _activeItem;
+    constructor(el: HTMLElement, options?: Partial<ButtonGroupOptions>);
+    static get defaults(): ButtonGroupOptions;
+    static init(el: HTMLElement, options?: Partial<ButtonGroupOptions>): ButtonGroup;
+    static init(els: InitElements<InitElement>, options?: Partial<ButtonGroupOptions>): ButtonGroup[];
+    static getInstance(el: HTMLElement): ButtonGroup;
+    destroy(): void;
+    private get _selectionMode();
+    private get _items();
+    private get _toggleItems();
+    private _normalizeSelection;
+    private _itemFromEvent;
+    private _isDisabled;
+    private _handleClick;
+    private _rememberPressed;
+    private _handlePointerDown;
+    private _handleKeyDown;
+    private _handleKeyUp;
+    private _handleFocusOut;
+    private _startPress;
+    private _compressionCapacity;
+    private _resetPress;
+    private _finishRelease;
+}

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

@@ -4,20 +4,21 @@ export interface CardsOptions extends BaseOptions {
     onClose: (el: Element) => void;
 }
 /**
- * What counts as a card.
+ * What counts as a card reveal.
  *
- * Shared with `components/registry.ts` rather than written out twice: the
- * registry used to claim `.cards`, which matches nothing this component
- * actually initializes, so the AutoInit entry was dead while `Cards.Init()`
- * quietly did the work through the selector below.
+ * Shared with `components/registry.ts` so `Cards.Init()` and `AutoInit()` use
+ * the same semantic selector.
  */
-export declare const CARDS_SELECTOR = "article:has(> aside)";
+export declare const CARDS_SELECTOR = "article:has(> aside[id]:not([id=\"\"])):not(:has(> aside ~ aside)):has(> button.card-reveal-trigger[type=\"button\"], > :not(aside) button.card-reveal-trigger[type=\"button\"])";
+export declare function isCardReveal(el: Element): el is HTMLElement;
 export declare class Cards extends Component<CardsOptions> implements Openable {
     isOpen: boolean;
     private readonly cardReveal;
     private _activators;
-    private cardRevealClose;
-    constructor(el: HTMLElement, options: Partial<CardsOptions>);
+    private _ownsRevealInitializedClass;
+    private _initialAriaControls;
+    private _lastActivator;
+    constructor(el: HTMLElement, options?: Partial<CardsOptions>);
     static get defaults(): CardsOptions;
     /**
      * Initializes instance of Cards.
@@ -38,12 +39,9 @@ export declare class Cards extends Component<CardsOptions> implements Openable {
     destroy(): void;
     _setupEventHandlers: () => void;
     _removeEventHandlers: () => void;
-    _handleClickInteraction: () => void;
-    _handleKeypressEvent: (e: KeyboardEvent) => void;
+    _handleClickInteraction: (event: MouseEvent) => void;
+    _handleKeydownEvent: (event: KeyboardEvent) => void;
     _handleRevealEvent: () => void;
-    _setupRevealCloseEventHandlers: () => void;
-    _removeRevealCloseEventHandlers: () => void;
-    _handleKeypressCloseEvent: (e: KeyboardEvent) => void;
     /**
      * Show card reveal.
      */

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

@@ -321,10 +321,14 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     prevMonth(): void;
     render(year: any, month: any, randId: any): string;
     renderDay(opts: any): string;
+    /** Assemble calendar cells; reject unsupported elements and attributes. */
     renderRow(days: any, isRTL: any, isRowSelected: any): string;
+    /** Assemble calendar rows; reject unsupported elements and attributes. */
     renderTable(opts: any, data: any, randId: any): string;
     renderHead(opts: any): string;
+    /** Wrap calendar rows after validating and encoding their contents. */
     renderBody(rows: any): string;
+    private static _calendarMarkup;
     /**
      * Whether each month arrow is usable at this position in the allowed range.
      *

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

@@ -12,7 +12,7 @@ export declare class ExpandingCard extends Component<ExpandingCardOptions> imple
     private readonly trigger;
     private readonly dialog;
     private readonly closeButton;
-    private closeTimer;
+    private closeGeneration;
     constructor(el: HTMLElement, options: Partial<ExpandingCardOptions>);
     static get defaults(): ExpandingCardOptions;
     static init(el: HTMLElement, options?: Partial<ExpandingCardOptions>): ExpandingCard;

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

@@ -1,5 +1,7 @@
 export { Autocomplete } from "./autocomplete";
+export { AppBar } from "./appBar";
 export { FloatingActionButton } from "./buttons";
+export { ButtonGroup } from "./buttonGroup";
 export { Cards } from "./cards";
 export { ExpandingCard } from "./expandingCard";
 export { Carousel } from "./carousel";

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

@@ -91,6 +91,8 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     focusedIndex: number;
     filterQuery: string[];
     filterTimeout: ReturnType<typeof setTimeout>;
+    private _pendingTimers;
+    private _transition;
     constructor(el: HTMLElement, options: Partial<MenuOptions>);
     static get defaults(): MenuOptions;
     /**
@@ -145,6 +147,8 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
         height: number;
         width: number;
     };
+    private _schedule;
+    private _clearPendingTimers;
     _animateIn(): void;
     _animateOut(): void;
     private _getClosestAncestor;

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

@@ -1,4 +1,5 @@
 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,22 @@ 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;

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

@@ -165,7 +165,6 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     _removeEventHandlers(): void;
     _handleInputClick: () => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;
-    _handleTimeInputEnterKey: (e: KeyboardEvent) => void;
     _handleClockClickStart: (e: PointerEvent) => void;
     _handleDocumentClickMove: (e: PointerEvent) => void;
     _handleDocumentClickEnd: (e: PointerEvent) => void;

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/index.d.ts

@@ -5,4 +5,4 @@ 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.8.0";
+export declare const version = "0.9.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "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,7 +71,11 @@
     "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",
@@ -80,12 +86,21 @@
     "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"
@@ -97,12 +112,19 @@
     "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"

package/src/sass/abstracts/_mixins.scss

@@ -251,3 +251,55 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
   --md-comp-filled-button-icon-label-space: #{map.get($s, gap)};
   --md-comp-filled-button-outline-width: #{map.get($s, outline)};
 }
+
+/// The icon-button tokens for one rung of `$icon-button-sizes`.
+@mixin icon-button-size($name) {
+  $s: map.get($icon-button-sizes, $name);
+
+  --md-comp-icon-button-container-height: #{map.get($s, height)};
+  --md-comp-icon-button-icon-size: #{map.get($s, icon)};
+  --md-comp-icon-button-leading-space: #{map.get($s, space)};
+  --md-comp-icon-button-trailing-space: #{map.get($s, space)};
+  --md-comp-icon-button-narrow-space: #{map.get($s, narrow)};
+  --md-comp-icon-button-wide-space: #{map.get($s, wide)};
+  --md-comp-icon-button-container-shape-square: #{map.get($s, square)};
+  --md-comp-icon-button-pressed-container-shape: #{map.get($s, pressed)};
+  --md-comp-icon-button-outline-width: #{map.get($s, outline)};
+}
+
+// Media-covering triggers share the card state layer and focus indicator.
+@mixin card-media-trigger {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: inherit;
+  box-shadow: none;
+  color: transparent;
+  cursor: pointer;
+
+  &:hover {
+    background-color: color-mix(in oklab, var(--md-comp-card-state-layer-color) calc(var(--md-comp-card-hover-state-layer-opacity) * 100%), transparent);
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    background-color: color-mix(in oklab, var(--md-comp-card-state-layer-color) calc(var(--md-comp-card-focus-state-layer-opacity) * 100%), transparent);
+    box-shadow: none;
+    outline: var(--md-comp-card-focus-indicator-thickness) solid var(--md-comp-card-focus-indicator-color);
+    outline-offset: calc(-1 * var(--md-comp-card-focus-indicator-thickness));
+  }
+
+  &:active {
+    background-color: color-mix(in oklab, var(--md-comp-card-state-layer-color) calc(var(--md-comp-card-pressed-state-layer-opacity) * 100%), transparent);
+    box-shadow: none;
+  }
+}

package/src/sass/abstracts/_variables.scss

@@ -64,6 +64,14 @@ $element-bottom-margin: math.div($gutter-width * 2, 3) !default;
 // M3's typeface tokens choose Roboto by default. Noto Sans is the first
 // fallback so unsupported scripts keep a compatible visual style.
 $font-stack: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback) !default;
+
+// Self-hosted woff2 directory, relative to the compiled CSS file. The npm
+// build writes CSS to dist/css/ and fonts to dist/fonts/. Override when
+// compiling Sass to a different location. Set $expressive-include-fonts to
+// false to emit no @font-face rules (for example when the page already
+// loads these families from elsewhere).
+$expressive-font-path: "../fonts" !default;
+$expressive-include-fonts: true !default;
 $text-color: var(--md-sys-color-on-background) !default;
 
 // Modern browsers default to 16px. M3's web conversion is SP_SIZE / 16 = rem;
@@ -104,3 +112,14 @@ $button-sizes: (
   "large": (height: 96px, icon: 32px, space: 48px, gap: 12px, outline: 2px, label: "headline-small"),
   "xlarge": (height: 136px, icon: 40px, space: 64px, gap: 16px, outline: 3px, label: "headline-large"),
 );
+
+// Icon-button geometry is shared with button groups. A group-size class must
+// reach both common buttons and icon buttons without asking authors to repeat
+// the size on every child.
+$icon-button-sizes: (
+  "xsmall": (height: 32px, icon: 20px, space: 6px, narrow: 4px, wide: 10px, square: 12px, pressed: 8px, outline: 1px),
+  "small": (height: 40px, icon: 24px, space: 8px, narrow: 4px, wide: 14px, square: 12px, pressed: 8px, outline: 1px),
+  "medium": (height: 56px, icon: 24px, space: 16px, narrow: 12px, wide: 24px, square: 16px, pressed: 12px, outline: 1px),
+  "large": (height: 96px, icon: 32px, space: 32px, narrow: 16px, wide: 48px, square: 28px, pressed: 16px, outline: 2px),
+  "xlarge": (height: 136px, icon: 40px, space: 48px, narrow: 32px, wide: 72px, square: 28px, pressed: 16px, outline: 3px),
+);

package/src/sass/base/_fonts.scss

@@ -0,0 +1,63 @@
+@use "../abstracts" as *;
+
+// Self-hosted faces for the families the tokens and icon classes name.
+// Unlayered on purpose: @font-face inside a cascade layer is unreliable.
+// $expressive-font-path is relative to the compiled CSS (dist/css -> dist/fonts).
+
+@if $expressive-include-fonts {
+  @font-face {
+    font-family: "Material Symbols Outlined";
+    font-style: normal;
+    font-weight: 100 700;
+    font-display: block;
+    src: url("#{$expressive-font-path}/material-symbols-outlined.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Material Symbols Rounded";
+    font-style: normal;
+    font-weight: 100 700;
+    font-display: block;
+    src: url("#{$expressive-font-path}/material-symbols-rounded.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Material Symbols Sharp";
+    font-style: normal;
+    font-weight: 100 700;
+    font-display: block;
+    src: url("#{$expressive-font-path}/material-symbols-sharp.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("#{$expressive-font-path}/roboto-latin-400.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("#{$expressive-font-path}/roboto-latin-500.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Noto Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("#{$expressive-font-path}/noto-sans-latin-400.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Noto Sans";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("#{$expressive-font-path}/noto-sans-latin-500.woff2") format("woff2");
+  }
+}

package/src/sass/components/_badges.scss

@@ -73,8 +73,7 @@
     inset-inline-end: calc((100% - var(--md-comp-badge-icon-size)) / 2);
     transform: translate(50%, -50%);
 
-    &:dir(rtl),
-    [dir="rtl"] & {
+    &:dir(rtl) {
       transform: translate(-50%, -50%);
     }
   }