@expressivecss/expressive 0.4.0 → 0.6.0

package/src/sass/components/forms/_select.scss

@@ -1,6 +1,6 @@
 @use "../../abstracts" as *;
 
-// Select (exposed dropdown).
+// Select (exposed menu).
 //
 // Anatomy is the HTML. A <select> is the control. FormSelect wraps it
 // in .field (or reuses an existing one) and paints a text field + menu.
@@ -8,11 +8,11 @@
 // expand icon (CSS, not an SVG node).
 //
 // Tokens follow https://m3.material.io/components/menus/overview
-// (exposed dropdown = text field + menu) and the filled/outlined field
+// (exposed menu = text field + menu) and the filled/outlined field
 // tokens in _input-fields.scss.
 //   field          56dp, same chrome as .field
 //   trailing icon  24dp, 12dp from the end, rotates when open
-//   selected item  10% on-surface + trailing check
+//   selected item  tertiary-container + trailing check
 //   optgroup       on-surface-variant, outline-variant rule
 //
 $_select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
@@ -20,7 +20,7 @@ $_select-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
 
 // Native / no-js / .browser-default: a 56dp field, not a 3rem box.
 select {
-  --md-comp-filled-select-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-filled-select-container-color: var(--md-sys-color-surface-container-highest);
   --md-comp-filled-select-container-shape: 1rem;
   --md-comp-filled-select-input-text-color: var(--md-sys-color-on-surface);
 
@@ -69,8 +69,8 @@ select.browser-default {
 }
 
 .field:has(> .hide-select) {
-  // BeerCSS menu: 1rem surface, stadium items. Same radius on the
-  // field so the closed control and the open list read as one shape.
+  // Match the vertical menu's 16dp surface so the closed field and the
+  // open list read as one shape.
   --md-comp-filled-select-container-shape: 1rem;
   --md-comp-menu-container-shape: 1rem;
   --md-comp-filled-select-trailing-icon-size: 24px;
@@ -80,11 +80,11 @@ select.browser-default {
   position: relative;
   border-radius: var(--md-comp-filled-select-container-shape);
 
-  > input.dropdown-trigger {
+  > input.menu-trigger {
     border-radius: inherit;
   }
 
-  > input.dropdown-trigger {
+  > input.menu-trigger {
     padding-inline-end: 52px;
   }
 
@@ -144,7 +144,7 @@ select.browser-default {
   }
 }
 
-.field:has(> .hide-select) > input.dropdown-trigger:disabled {
+.field:has(> .hide-select) > input.menu-trigger:disabled {
   cursor: default;
   user-select: none;
 }
@@ -161,19 +161,21 @@ menu[role="listbox"] > li:not(.optgroup, .divider) {
 }
 
 menu[role="listbox"] > li.selected:not(.disabled, .optgroup) {
-  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+  background-color: var(--md-comp-menu-item-selected-container-color, var(--md-sys-color-tertiary-container));
+  color: var(--md-comp-menu-item-selected-label-text-color, var(--md-sys-color-on-tertiary-container));
+  border-radius: var(--md-comp-menu-item-selected-container-shape, 12px);
 }
 
 // Single-select: trailing check. Multi-select already has a leading checkbox.
-menu[role="listbox"]:not(.multiple-select-dropdown) > li.selected:not(.disabled, .optgroup)::after {
+menu[role="listbox"]:not(.multiple-select-menu) > li.selected:not(.disabled, .optgroup)::after {
   content: "";
-  flex: 0 0 24px;
-  width: 24px;
-  height: 24px;
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
   margin-inline-start: auto;
-  margin-inline-end: 12px;
-  background-color: var(--md-sys-color-on-surface);
-  mask: $_select-check center / 24px no-repeat;
+  margin-inline-end: 8px;
+  background-color: var(--md-comp-menu-item-selected-leading-icon-color, var(--md-sys-color-on-tertiary-container));
+  mask: $_select-check center / 20px no-repeat;
 }
 
 menu[role="listbox"] li img {

package/src/sass/tokens/_reference.scss

@@ -42,9 +42,11 @@ $md-source: #006A79 !default;
 
 // tone -> OKLCH lightness. Fitted against the reference ramps; see the test.
 $tones: (
-  0: 0%, 10: 22.37%, 20: 30.99%, 25: 35.26%, 30: 39.48%, 35: 43.79%,
-  40: 48.14%, 50: 56.83%, 60: 65.42%, 70: 74.04%, 80: 82.63%, 90: 91.33%,
-  95: 95.62%, 98: 98.25%, 99: 99.19%, 100: 100%
+  0: 0%, 4: 8.95%, 6: 13.42%, 10: 22.37%, 12: 24.09%, 17: 28.40%,
+  20: 30.99%, 22: 32.70%, 24: 34.41%, 25: 35.26%, 30: 39.48%, 35: 43.79%,
+  40: 48.14%, 50: 56.83%, 60: 65.42%, 70: 74.04%, 80: 82.63%, 87: 88.72%,
+  90: 91.33%, 92: 93.05%, 94: 94.76%, 95: 95.62%, 96: 96.50%, 98: 98.25%,
+  99: 99.19%, 100: 100%
 ) !default;
 
 // Per-ramp hue offset from the source hue, and target chroma. Chroma is a
@@ -72,37 +74,59 @@ $ramps: (
 $sys-light: (
   "primary": "primary40", "on-primary": "primary100",
   "primary-container": "primary90", "on-primary-container": "primary10",
+  "primary-fixed": "primary90", "primary-fixed-dim": "primary80",
+  "on-primary-fixed": "primary10", "on-primary-fixed-variant": "primary30",
   "secondary": "secondary40", "on-secondary": "secondary100",
   "secondary-container": "secondary90", "on-secondary-container": "secondary10",
+  "secondary-fixed": "secondary90", "secondary-fixed-dim": "secondary80",
+  "on-secondary-fixed": "secondary10", "on-secondary-fixed-variant": "secondary30",
   "tertiary": "tertiary40", "on-tertiary": "tertiary100",
   "tertiary-container": "tertiary90", "on-tertiary-container": "tertiary10",
+  "tertiary-fixed": "tertiary90", "tertiary-fixed-dim": "tertiary80",
+  "on-tertiary-fixed": "tertiary10", "on-tertiary-fixed-variant": "tertiary30",
   "error": "error40", "on-error": "error100",
   "error-container": "error90", "on-error-container": "error10",
-  "background": "neutral99", "on-background": "neutral10",
-  "surface": "neutral99", "on-surface": "neutral10",
-  "surface-variant": "neutral-variant90", "on-surface-variant": "neutral-variant30",
+  "surface": "neutral98", "on-surface": "neutral10",
+  "on-surface-variant": "neutral-variant30",
+  "surface-dim": "neutral87", "surface-bright": "neutral98",
+  "surface-container-lowest": "neutral100", "surface-container-low": "neutral96",
+  "surface-container": "neutral94", "surface-container-high": "neutral92",
+  "surface-container-highest": "neutral90",
   "outline": "neutral-variant50", "outline-variant": "neutral-variant80",
   "inverse-surface": "neutral20", "inverse-on-surface": "neutral95",
-  "inverse-primary": "primary80", "surface-tint": "primary40",
-  "shadow": "neutral0", "scrim": "neutral0"
+  "inverse-primary": "primary80",
+  "scrim": "neutral0", "shadow": "neutral0",
+  "background": "neutral98", "on-background": "neutral10",
+  "surface-variant": "neutral-variant90", "surface-tint": "primary40"
 ) !default;
 
 $sys-dark: (
   "primary": "primary80", "on-primary": "primary20",
   "primary-container": "primary30", "on-primary-container": "primary90",
+  "primary-fixed": "primary90", "primary-fixed-dim": "primary80",
+  "on-primary-fixed": "primary10", "on-primary-fixed-variant": "primary30",
   "secondary": "secondary80", "on-secondary": "secondary20",
   "secondary-container": "secondary30", "on-secondary-container": "secondary90",
+  "secondary-fixed": "secondary90", "secondary-fixed-dim": "secondary80",
+  "on-secondary-fixed": "secondary10", "on-secondary-fixed-variant": "secondary30",
   "tertiary": "tertiary80", "on-tertiary": "tertiary20",
   "tertiary-container": "tertiary30", "on-tertiary-container": "tertiary90",
+  "tertiary-fixed": "tertiary90", "tertiary-fixed-dim": "tertiary80",
+  "on-tertiary-fixed": "tertiary10", "on-tertiary-fixed-variant": "tertiary30",
   "error": "error80", "on-error": "error20",
   "error-container": "error30", "on-error-container": "error90",
-  "background": "neutral10", "on-background": "neutral90",
-  "surface": "neutral10", "on-surface": "neutral90",
-  "surface-variant": "neutral-variant30", "on-surface-variant": "neutral-variant80",
+  "surface": "neutral6", "on-surface": "neutral90",
+  "on-surface-variant": "neutral-variant80",
+  "surface-dim": "neutral6", "surface-bright": "neutral24",
+  "surface-container-lowest": "neutral4", "surface-container-low": "neutral10",
+  "surface-container": "neutral12", "surface-container-high": "neutral17",
+  "surface-container-highest": "neutral22",
   "outline": "neutral-variant60", "outline-variant": "neutral-variant30",
   "inverse-surface": "neutral90", "inverse-on-surface": "neutral10",
-  "inverse-primary": "primary40", "surface-tint": "primary80",
-  "shadow": "neutral0", "scrim": "neutral0"
+  "inverse-primary": "primary40",
+  "scrim": "neutral0", "shadow": "neutral0",
+  "background": "neutral6", "on-background": "neutral90",
+  "surface-variant": "neutral-variant30", "surface-tint": "primary80"
 ) !default;
 
 :root {

package/src/sass/tokens/_theme.scss

@@ -1,7 +1,9 @@
+@use "../abstracts" as *;
+
 // Maps the resolved pairs from tokens/_reference.scss onto the live
 // --md-sys-color-* names that the rest of the framework consumes.
 //
-// This file used to spell out all 30 tokens four times - once for the light
+// This file used to spell out all tokens four times - once for the light
 // default, once inside @media (prefers-color-scheme: dark), and once for each
 // of :root[theme='light'] / [theme='dark'] - because a custom property can
 // only hold one value per selector. light-dark() holds both, so the mapping is
@@ -18,18 +20,6 @@
 // They are the documented way to re-theme the framework (see the docs' Themes
 // page) and several components reference them directly.
 
-$sys-color-roles: (
-  "primary", "on-primary", "primary-container", "on-primary-container",
-  "secondary", "on-secondary", "secondary-container", "on-secondary-container",
-  "tertiary", "on-tertiary", "tertiary-container", "on-tertiary-container",
-  "error", "on-error", "error-container", "on-error-container",
-  "outline", "outline-variant",
-  "background", "on-background",
-  "surface", "on-surface", "surface-variant", "on-surface-variant",
-  "inverse-surface", "inverse-on-surface", "inverse-primary",
-  "shadow", "surface-tint", "scrim"
-) !default;
-
 :root, :host {
   // `light dark` means: follow the OS unless an ancestor says otherwise.
   color-scheme: light dark;
@@ -45,5 +35,7 @@ $sys-color-roles: (
 /* ===================================================================== Themes */
 
 // Opting out of the OS preference. Every token above re-resolves from these.
+// `auto` is the explicit follow-OS value — same as omitting the attribute.
 :root[theme='light'] { color-scheme: light; }
 :root[theme='dark'] { color-scheme: dark; }
+:root[theme='auto'] { color-scheme: light dark; }

package/src/sass/utilities/_colors.scss

@@ -1,74 +1,16 @@
-.primary { background-color: var(--md-sys-color-primary); }
-.primary-text { color: var(--md-sys-color-primary); }
-.on-primary { background-color: var(--md-sys-color-on-primary); }
-.on-primary-text { color: var(--md-sys-color-on-primary); }
-.primary-container { background-color: var(--md-sys-color-primary-container); }
-.primary-container-text { color: var(--md-sys-color-primary-container); }
-.on-primary-container { background-color: var(--md-sys-color-on-primary-container); }
-.on-primary-container-text { color: var(--md-sys-color-on-primary-container); }
-
-.secondary { background-color: var(--md-sys-color-secondary); }
-.secondary-text { color: var(--md-sys-color-secondary); }
-.on-secondary { background-color: var(--md-sys-color-on-secondary); }
-.on-secondary-text { color: var(--md-sys-color-on-secondary); }
-.secondary-container { background-color: var(--md-sys-color-secondary-container); }
-.secondary-container-text { color: var(--md-sys-color-secondary-container); }
-.on-secondary-container { background-color: var(--md-sys-color-on-secondary-container); }
-.on-secondary-container-text { color: var(--md-sys-color-on-secondary-container); }
-
-.tertiary { background-color: var(--md-sys-color-tertiary); }
-.tertiary-text { color: var(--md-sys-color-tertiary); }
-.on-tertiary { background-color: var(--md-sys-color-on-tertiary); }
-.on-tertiary-text { color: var(--md-sys-color-on-tertiary); }
-.tertiary-container { background-color: var(--md-sys-color-tertiary-container); }
-.tertiary-container-text { color: var(--md-sys-color-tertiary-container); }
-.on-tertiary-container { background-color: var(--md-sys-color-on-tertiary-container); }
-.on-tertiary-container-text { color: var(--md-sys-color-on-tertiary-container); }
-
-.error { background-color: var(--md-sys-color-error); }
-.error-text { color: var(--md-sys-color-error); }
-.on-error { background-color: var(--md-sys-color-on-error); }
-.on-error-text { color: var(--md-sys-color-on-error); }
-.error-container { background-color: var(--md-sys-color-error-container); }
-.error-container-text { color: var(--md-sys-color-error-container); }
-.on-error-container { background-color: var(--md-sys-color-on-error-container); }
-.on-error-container-text { color: var(--md-sys-color-on-error-container); }
-
-.background { background-color: var(--md-sys-color-background); }
-.background-text { color: var(--md-sys-color-background); }
-.on-background { background-color: var(--md-sys-color-on-background); }
-.on-background-text { color: var(--md-sys-color-on-background); }
-
-.surface { background-color: var(--md-sys-color-surface); }
-.surface-text { color: var(--md-sys-color-surface); }
-.on-surface { background-color: var(--md-sys-color-on-surface); }
-.on-surface-text { color: var(--md-sys-color-on-surface); }
-
-.surface-variant { background-color: var(--md-sys-color-surface-variant); }
-.surface-variant-text { color: var(--md-sys-color-surface-variant); }
-.on-surface-variant { background-color: var(--md-sys-color-on-surface-variant); }
-.on-surface-variant-text { color: var(--md-sys-color-on-surface-variant); }
-
-.outline { background-color: var(--md-sys-color-outline); }
-.outline-text { color: var(--md-sys-color-outline); }
-
-.inverse-on-surface { background-color: var(--md-sys-color-inverse-on-surface); }
-.inverse-on-surface-text { color: var(--md-sys-color-inverse-on-surface); }
-
-.inverse-surface { background-color: var(--md-sys-color-inverse-surface); }
-.inverse-surface-text { color: var(--md-sys-color-inverse-surface); }
-
-.inverse-primary { background-color: var(--md-sys-color-inverse-primary); }
-.inverse-primary-text { color: var(--md-sys-color-inverse-primary); }
-
-.shadow { background-color: var(--md-sys-color-shadow); }
-.shadow-text { color: var(--md-sys-color-shadow); }
-
-.surface-tint { background-color: var(--md-sys-color-surface-tint); }
-.surface-tint-text { color: var(--md-sys-color-surface-tint); }
-
-.outline-variant { background-color: var(--md-sys-color-outline-variant); }
-.outline-variant-text { color: var(--md-sys-color-outline-variant); }
-
-.scrim { background-color: var(--md-sys-color-scrim); }
-.scrim-text { color: var(--md-sys-color-scrim); }
+@use "../abstracts" as *;
+
+// One fill class and one `-text` foreground class per color role.
+// Generated from $sys-color-roles so this file cannot drift from the
+// token layer. Pair a fill with its `on-*` text class — container
+// roles are fills, not text; `on-*` roles are text/icons, not fills.
+
+@each $role in $sys-color-roles {
+  .#{$role} {
+    background-color: var(--md-sys-color-#{$role});
+  }
+
+  .#{$role}-text {
+    color: var(--md-sys-color-#{$role});
+  }
+}

package/src/sass/utilities/_visibility.scss

@@ -31,10 +31,18 @@
   @include bp-up("xlarge") { display: none !important; }
 }
 
+.hide-on-xxl-only {
+  @include bp-up("xxlarge") { display: none !important; }
+}
+
 .show-on-extra-large {
   @include bp-up("xlarge") { display: block !important; }
 }
 
+.show-on-xxl {
+  @include bp-up("xxlarge") { display: block !important; }
+}
+
 .show-on-large {
   @include bp-up("large") { display: block !important; }
 }

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

@@ -1,79 +0,0 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
-export interface CollapsibleOptions extends BaseOptions {
-    /**
-     * If accordion versus collapsible. When omitted, `.expandable` on the
-     * element turns accordion off. `<details>` with the same `name` already
-     * exclusive-open in the browser; this option assigns `name` when it
-     * is missing.
-     * @default true
-     */
-    accordion: boolean;
-    /**
-     * Callback function called before collapsible is opened.
-     * @default null
-     */
-    onOpenStart: (el: Element) => void;
-    /**
-     * Callback function called after collapsible is opened.
-     * @default null
-     */
-    onOpenEnd: (el: Element) => void;
-    /**
-     * Callback function called before collapsible is closed.
-     * @default null
-     */
-    onCloseStart: (el: Element) => void;
-    /**
-     * Callback function called after collapsible is closed.
-     * @default null
-     */
-    onCloseEnd: (el: Element) => void;
-}
-/**
- * Collapsible. Open/close is HTML (`<details>` / `[open]`). Height is CSS.
- * This class is the public API and accordion `name` assignment.
- */
-export declare class Collapsible extends Component<CollapsibleOptions> {
-    private _items;
-    private _groupName;
-    private _endTimers;
-    private _wrappedBodies;
-    constructor(el: HTMLElement, options: Partial<CollapsibleOptions>);
-    static get defaults(): CollapsibleOptions;
-    /**
-     * Initializes instance of Collapsible.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<CollapsibleOptions>): Collapsible;
-    /**
-     * Initializes instances of Collapsible.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<InitElement>, options?: Partial<CollapsibleOptions>): Collapsible[];
-    static getInstance(el: HTMLElement): Collapsible;
-    destroy(): void;
-    /**
-     * Open collapsible section.
-     * @param index 0-based index of the section to open.
-     */
-    open: (index: number) => void;
-    /**
-     * Close collapsible section.
-     * @param index 0-based index of the section to close.
-     */
-    close: (index: number) => void;
-    private _collectItems;
-    private _setupItems;
-    private _isOpen;
-    private _setOpen;
-    private _wrapDetailsBodies;
-    private _unwrapDetailsBodies;
-    private _bodyOf;
-    private _setupEventHandlers;
-    private _removeEventHandlers;
-    private _handleToggle;
-    private _notify;
-    private _durationMs;
-}

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

@@ -1,51 +0,0 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
-export interface PushpinOptions extends BaseOptions {
-    /**
-     * The distance in pixels from the top of the page where
-     * the element becomes fixed.
-     * @default 0
-     */
-    top: number;
-    /**
-     * The distance in pixels from the top of the page where
-     * the elements stops being fixed.
-     * @default Infinity
-     */
-    bottom: number;
-    /**
-     * The offset from the top the element will be fixed at.
-     * @default 0
-     */
-    offset: number;
-    /**
-     * Callback function called when pushpin position changes.
-     * You are provided with a position string.
-     * @default null
-     */
-    onPositionChange: (position: 'pinned' | 'pin-top' | 'pin-bottom') => void;
-}
-export declare class Pushpin extends Component<PushpinOptions> {
-    static _pushpins: Pushpin[];
-    originalOffset: number;
-    constructor(el: HTMLElement, options: Partial<PushpinOptions>);
-    static get defaults(): PushpinOptions;
-    /**
-     * Initializes instance of Pushpin.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<PushpinOptions>): Pushpin;
-    /**
-     * Initializes instances of Pushpin.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<InitElement>, options?: Partial<PushpinOptions>): Pushpin[];
-    static getInstance(el: HTMLElement): Pushpin;
-    destroy(): void;
-    static _updateElements(): void;
-    _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    _updatePosition(): void;
-    _removePinClasses(): void;
-}

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

@@ -1,57 +0,0 @@
-import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
-export interface TapTargetOptions extends BaseOptions {
-    /**
-     * Callback function called when Tap Target is opened.
-     * @default null
-     */
-    onOpen: (origin: HTMLElement) => void;
-    /**
-     * Callback function called when Tap Target is closed.
-     * @default null
-     */
-    onClose: (origin: HTMLElement) => void;
-}
-/**
- * Tap target (Feature Discovery). Placement is CSS custom properties;
- * the wrapper is a popover when the platform has one. This class is
- * open/close, origin lookup, and the two geometry variables.
- */
-export declare class TapTarget extends Component<TapTargetOptions> implements Openable {
-    isOpen: boolean;
-    originEl: HTMLElement | null;
-    static _taptargets: TapTarget[];
-    private wrapper;
-    private waveEl;
-    private contentEl;
-    private _createdWrapper;
-    private _createdWave;
-    private _usePopover;
-    private _liftedStatic;
-    private _opening;
-    constructor(el: HTMLElement, options: Partial<TapTargetOptions>);
-    static get defaults(): TapTargetOptions;
-    static init(el: HTMLElement, options?: Partial<TapTargetOptions>): TapTarget;
-    static init(els: InitElements<InitElement>, options?: Partial<TapTargetOptions>): TapTarget[];
-    static getInstance(el: HTMLElement): TapTarget;
-    destroy(): void;
-    /**
-     * Open Tap Target.
-     */
-    open: () => void;
-    /**
-     * Close Tap Target.
-     */
-    close: () => void;
-    private _setup;
-    private _ensureId;
-    private _labelFromHeading;
-    private _teardownDom;
-    private _setupEventHandlers;
-    private _removeEventHandlers;
-    private _handleThrottledResize;
-    private _handleOriginKeydown;
-    private _handleTargetToggle;
-    private _handleResize;
-    private _handlePopoverToggle;
-    private _calculatePositioning;
-}