@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/utils/drag-drop.utils.js

@@ -3,7 +3,7 @@ const DEFAULT_ACTIVATION_DISTANCE = 4;
 const DEFAULT_DRAGGING_ATTRIBUTE = "data-dragging";
 const DEFAULT_AUTO_SCROLL_EDGE = 48;
 const DEFAULT_AUTO_SCROLL_SPEED = 12;
-const SETTLE_TRANSITION = "transform 150ms ease";
+const SETTLE_TRANSITION = "transform var(--eun-duration-s, 150ms) var(--eun-easing-default, ease)";
 const SR_ONLY_STYLE = {
     position: "absolute",
     width: "1px",
@@ -52,16 +52,32 @@ function isScrollable(el) {
     const style = getComputedStyle(el);
     return /(auto|scroll)/.test(style.overflowY + style.overflowX);
 }
+/**
+ * Walks up the flat tree (through slots and shadow hosts) rather than the
+ * plain DOM tree, so a container slotted into a component that scrolls
+ * inside its own shadow root, such as the rows of an `eun-table`, finds
+ * that inner scroll container.
+ */
 function findScrollableAncestor(from) {
     let el = from;
     while (el) {
         if (isScrollable(el)) {
             return el;
         }
-        el = el.parentElement;
+        el = flatTreeParent(el);
     }
     return document.scrollingElement;
 }
+function flatTreeParent(el) {
+    if (el.assignedSlot) {
+        return el.assignedSlot;
+    }
+    if (el.parentElement) {
+        return el.parentElement;
+    }
+    const root = el.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+}
 /**
  * Attaches drag-to-reorder behavior to `container`'s items. See the module
  * doc comment for what this does and doesn't cover.

package/dist/utils/dropdown-menu.utils.d.ts

@@ -125,8 +125,8 @@ export declare function handleMenuKeydown(event: KeyboardEvent, entries: HTMLEle
  * `eun-dropdown-button` (its root menu and `options`-sourced submenus) and
  * `eun-dropdown-item` (its own submenu) : `0` under `prefers-reduced-motion:
  * reduce`, otherwise `--dropdown-menu-transition-duration` (default
- * `160ms`) — see `dropdown-button.styles.ts`'s own doc for why the open/
- * close visual is a JS `Animation` rather than a CSS transition.
+ * `--eun-duration-s`) — see `dropdown-button.styles.ts`'s own doc for why
+ * the open/close visual is a JS `Animation` rather than a CSS transition.
  *
  * @param el the menu/submenu to read `--dropdown-menu-transition-duration` off.
  */

package/dist/utils/dropdown-menu.utils.js

@@ -1,3 +1,4 @@
+import { resolveDurationMs } from "./motion.utils.js";
 /**
  * DOM-only menu mechanics shared by `eun-dropdown-button` (its root menu and
  * `options`-sourced submenus) and `eun-dropdown-item` (its own
@@ -186,8 +187,8 @@ export function handleMenuKeydown(event, entries, handlers) {
  * `eun-dropdown-button` (its root menu and `options`-sourced submenus) and
  * `eun-dropdown-item` (its own submenu) : `0` under `prefers-reduced-motion:
  * reduce`, otherwise `--dropdown-menu-transition-duration` (default
- * `160ms`) — see `dropdown-button.styles.ts`'s own doc for why the open/
- * close visual is a JS `Animation` rather than a CSS transition.
+ * `--eun-duration-s`) — see `dropdown-button.styles.ts`'s own doc for why
+ * the open/close visual is a JS `Animation` rather than a CSS transition.
  *
  * @param el the menu/submenu to read `--dropdown-menu-transition-duration` off.
  */
@@ -195,16 +196,5 @@ export function dropdownMenuAnimationDuration(el) {
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
         return 0;
     }
-    const raw = getComputedStyle(el)
-        .getPropertyValue("--dropdown-menu-transition-duration")
-        .trim();
-    if (raw) {
-        const parsed = raw.endsWith("ms")
-            ? Number.parseFloat(raw)
-            : Number.parseFloat(raw) * 1000;
-        if (Number.isFinite(parsed) && parsed >= 0) {
-            return parsed;
-        }
-    }
-    return 160;
+    return resolveDurationMs(el, "--dropdown-menu-transition-duration", "s", 160);
 }

package/dist/utils/light-dom-styles.utils.d.ts

@@ -0,0 +1,14 @@
+import { CSSResult } from "lit";
+/**
+ * Adopts a light DOM sheet into `host`'s root node (the document, or the
+ * shadow root it lives in), once per root. A component whose native
+ * content (a `<table>`, a `<dl>`) stays in the light DOM styles it this
+ * way, since its own shadow root can't reach slotted descendants.
+ *
+ * Falls back to a `<style>` element where constructable stylesheets
+ * aren't supported.
+ *
+ * @param host the connected element whose root node receives the sheet.
+ * @param styles the sheet to adopt.
+ */
+export declare function adoptLightDomStyles(host: Node, styles: CSSResult): void;

package/dist/utils/light-dom-styles.utils.js

@@ -0,0 +1,37 @@
+/**
+ * Root nodes each light DOM sheet was already adopted into.
+ * @internal
+ */
+const styledRoots = new WeakMap();
+/**
+ * Adopts a light DOM sheet into `host`'s root node (the document, or the
+ * shadow root it lives in), once per root. A component whose native
+ * content (a `<table>`, a `<dl>`) stays in the light DOM styles it this
+ * way, since its own shadow root can't reach slotted descendants.
+ *
+ * Falls back to a `<style>` element where constructable stylesheets
+ * aren't supported.
+ *
+ * @param host the connected element whose root node receives the sheet.
+ * @param styles the sheet to adopt.
+ */
+export function adoptLightDomStyles(host, styles) {
+    const root = host.getRootNode();
+    let roots = styledRoots.get(styles);
+    if (!roots) {
+        roots = new WeakSet();
+        styledRoots.set(styles, roots);
+    }
+    if (roots.has(root)) {
+        return;
+    }
+    roots.add(root);
+    const sheet = styles.styleSheet;
+    if (sheet && "adoptedStyleSheets" in root) {
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+        return;
+    }
+    const style = document.createElement("style");
+    style.textContent = styles.cssText;
+    (root instanceof Document ? root.head : root).appendChild(style);
+}

package/dist/utils/media.styles.d.ts

@@ -0,0 +1,19 @@
+import { CSSResult } from "lit";
+import { EunomiaBreakpoint } from "../breakpoints.js";
+/**
+ * {@link mediaBelow} as a value a Lit `css` template accepts, for a
+ * component's own `@media` or `@container` rule :
+ * `@media ${cssBelow("tablet")} { … }`.
+ *
+ * @param breakpoint the breakpoint the range stops under.
+ * @returns the media condition.
+ */
+export declare function cssBelow(breakpoint: EunomiaBreakpoint): CSSResult;
+/**
+ * {@link mediaFrom} as a value a Lit `css` template accepts :
+ * `@media ${cssFrom("tablet")} { … }`.
+ *
+ * @param breakpoint the breakpoint the range starts at.
+ * @returns the media condition.
+ */
+export declare function cssFrom(breakpoint: EunomiaBreakpoint): CSSResult;

package/dist/utils/media.styles.js

@@ -0,0 +1,23 @@
+import { unsafeCSS } from "lit";
+import { mediaBelow, mediaFrom } from "../breakpoints.js";
+/**
+ * {@link mediaBelow} as a value a Lit `css` template accepts, for a
+ * component's own `@media` or `@container` rule :
+ * `@media ${cssBelow("tablet")} { … }`.
+ *
+ * @param breakpoint the breakpoint the range stops under.
+ * @returns the media condition.
+ */
+export function cssBelow(breakpoint) {
+    return unsafeCSS(mediaBelow(breakpoint));
+}
+/**
+ * {@link mediaFrom} as a value a Lit `css` template accepts :
+ * `@media ${cssFrom("tablet")} { … }`.
+ *
+ * @param breakpoint the breakpoint the range starts at.
+ * @returns the media condition.
+ */
+export function cssFrom(breakpoint) {
+    return unsafeCSS(mediaFrom(breakpoint));
+}

package/dist/utils/motion.utils.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A step of the shared `--eun-duration-*` scale declared by every theme
+ * stylesheet (`xs` 100ms, `s` 150ms, `m` 200ms, `l` 250ms, `xl` 300ms).
+ */
+export type MotionDuration = "xs" | "s" | "m" | "l" | "xl";
+/**
+ * A step of the shared `--eun-easing-*` tokens declared by every theme
+ * stylesheet (`default` is `ease`, `out` is `ease-out`).
+ */
+export type MotionEasing = "default" | "out";
+/**
+ * Converts a CSS time (`200ms`, `0.2s`) into milliseconds.
+ *
+ * @param raw the CSS time, as read off `getPropertyValue`.
+ * @returns the duration in ms, or `undefined` when `raw` is empty, not a
+ * number, or negative.
+ */
+export declare function cssTimeToMs(raw: string): number | undefined;
+/**
+ * The duration, in ms, of an animation driven from JS (Web Animations API,
+ * timers) : the component's own custom property when set, otherwise the
+ * shared `--eun-duration-<step>` token, otherwise `fallbackMs` when no
+ * theme stylesheet is loaded.
+ *
+ * @param el the element to read both custom properties off.
+ * @param property the component's own custom property, e.g.
+ * `--field-listbox-transition-duration`.
+ * @param step the `--eun-duration-*` step the component defaults to.
+ * @param fallbackMs the value used when neither property resolves.
+ */
+export declare function resolveDurationMs(el: Element, property: string, step: MotionDuration, fallbackMs: number): number;
+/**
+ * The timing function of an animation driven from JS : the shared
+ * `--eun-easing-<step>` token, or its plain CSS keyword when no theme
+ * stylesheet is loaded.
+ *
+ * @param el the element to read the token off.
+ * @param step the `--eun-easing-*` step to read, `default` if omitted.
+ */
+export declare function resolveEasing(el: Element, step?: MotionEasing): string;

package/dist/utils/motion.utils.js

@@ -0,0 +1,51 @@
+const EASING_FALLBACKS = {
+    default: "ease",
+    out: "ease-out",
+};
+/**
+ * Converts a CSS time (`200ms`, `0.2s`) into milliseconds.
+ *
+ * @param raw the CSS time, as read off `getPropertyValue`.
+ * @returns the duration in ms, or `undefined` when `raw` is empty, not a
+ * number, or negative.
+ */
+export function cssTimeToMs(raw) {
+    const value = raw.trim();
+    if (!value) {
+        return undefined;
+    }
+    const parsed = value.endsWith("ms")
+        ? Number.parseFloat(value)
+        : Number.parseFloat(value) * 1000;
+    return Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined;
+}
+/**
+ * The duration, in ms, of an animation driven from JS (Web Animations API,
+ * timers) : the component's own custom property when set, otherwise the
+ * shared `--eun-duration-<step>` token, otherwise `fallbackMs` when no
+ * theme stylesheet is loaded.
+ *
+ * @param el the element to read both custom properties off.
+ * @param property the component's own custom property, e.g.
+ * `--field-listbox-transition-duration`.
+ * @param step the `--eun-duration-*` step the component defaults to.
+ * @param fallbackMs the value used when neither property resolves.
+ */
+export function resolveDurationMs(el, property, step, fallbackMs) {
+    const style = getComputedStyle(el);
+    return (cssTimeToMs(style.getPropertyValue(property)) ??
+        cssTimeToMs(style.getPropertyValue(`--eun-duration-${step}`)) ??
+        fallbackMs);
+}
+/**
+ * The timing function of an animation driven from JS : the shared
+ * `--eun-easing-<step>` token, or its plain CSS keyword when no theme
+ * stylesheet is loaded.
+ *
+ * @param el the element to read the token off.
+ * @param step the `--eun-easing-*` step to read, `default` if omitted.
+ */
+export function resolveEasing(el, step = "default") {
+    return (getComputedStyle(el).getPropertyValue(`--eun-easing-${step}`).trim() ||
+        EASING_FALLBACKS[step]);
+}

package/dist/utils/theme-generator.utils.d.ts

@@ -48,7 +48,7 @@ export declare function buildTints(primaryHex: EunomiaHexColor, isDark: boolean)
  * custom brand from two hex seed colors by composing `buildPalette` and
  * `buildTints` above, then writing every result straight onto
  * `document.documentElement`, both 11-step shade scales, their `on-*`
- * text colors, the transparent hover/active tokens, and the `-tint`
+ * text colors, the `alpha-*` tokens, and the `-tint`
  * neutrals. Everything else (grey scale, spacing, radius, shadows,
  * semantic state colors) still comes from whichever base theme class or
  * `data-theme` is already applied; this deliberately doesn't touch those.
@@ -70,6 +70,11 @@ export declare function initializeTheme(primary: EunomiaHexColor, secondary: Eun
 export interface EunomiaThemeCssOptions {
     surfaceColor?: EunomiaHexColor;
     darkSurfaceColor?: EunomiaHexColor;
+    darkSecondaryColor?: EunomiaHexColor;
+    inverseSurfaceColor?: EunomiaHexColor;
+    darkInverseSurfaceColor?: EunomiaHexColor;
+    textColor?: EunomiaHexColor;
+    darkTextColor?: EunomiaHexColor;
     fontFamily?: string;
     brand?: string;
 }

package/dist/utils/theme-generator.utils.js

@@ -159,12 +159,12 @@ export function buildPalette(baseHex, isDark) {
         };
     });
 }
-const TRANSPARENT_TOKENS = [
-    { name: "bg-hover", alpha: 0.08 },
-    { name: "bg-active", alpha: 0.08 },
-    { name: "transparent", alpha: 0.2 },
-    { name: "transparent-hover", alpha: 0.3 },
-    { name: "transparent-active", alpha: 0.4 },
+const ALPHA_TOKENS = [
+    { name: "alpha-5", alpha: 0.05 },
+    { name: "alpha-10", alpha: 0.1 },
+    { name: "alpha-20", alpha: 0.2 },
+    { name: "alpha-30", alpha: 0.3 },
+    { name: "alpha-40", alpha: 0.4 },
 ];
 /**
  * 5% of the effective `primary-500` (already dark-accessible-adjusted in
@@ -204,25 +204,44 @@ export function buildTints(primaryHex, isDark) {
         contentPressedTint: mix(LIGHT_TINT_BASE.contentPressed, primary500, TINT_RATIO),
     };
 }
+/**
+ * The muted `--eun-text-secondary` for a custom text color: `text` mixed
+ * 30% toward `surface`, backed off in 5% steps until it still clears WCAG
+ * AA against that surface.
+ */
+function secondaryText(text, surface) {
+    let percent = 30;
+    let result = mix(text, surface, percent / 100);
+    while (contrastRatio(result, surface) < MIN_CONTRAST && percent > 0) {
+        percent -= 5;
+        result = mix(text, surface, percent / 100);
+    }
+    return result;
+}
 /**
  * Every custom property a custom brand sets for one mode, as ordered
  * `[property, value]` pairs: both 11-step shade scales, their `on-*`
- * text colors, the transparent hover/active tokens, the surface color,
- * the `-tint` neutrals, and `--eun-font-family` when one is passed.
- * Shared by `initializeTheme` and `buildThemeCss` so the inline and the
- * stylesheet output can never drift apart.
+ * text colors, the `alpha-*` tokens, the surface color,
+ * the `-tint` neutrals, and `--eun-font-family`, the inverse surface and
+ * the text colors when they are passed. Shared by `initializeTheme` and `buildThemeCss`
+ * so the inline and the stylesheet output can never drift apart.
  */
-function buildThemeTokens(primary, secondary, isDark, surfaceColor, fontFamily) {
+function buildThemeTokens(primary, secondary, isDark, options) {
+    const { surfaceColor, fontFamily, darkSecondaryColor, inverseSurfaceColor, textColor, } = options;
     const tokens = [];
-    for (const [type, seed] of [
-        ["primary", primary],
-        ["secondary", secondary],
+    for (const [type, seed, checkDark] of [
+        ["primary", primary, isDark],
+        [
+            "secondary",
+            darkSecondaryColor ?? secondary,
+            isDark && !darkSecondaryColor,
+        ],
     ]) {
-        for (const shade of buildPalette(seed, isDark)) {
+        for (const shade of buildPalette(seed, checkDark)) {
             tokens.push([`--eun-color-${type}-${shade.name}`, shade.value]);
             tokens.push([`--eun-color-on-${type}-${shade.name}`, shade.on]);
         }
-        for (const token of TRANSPARENT_TOKENS) {
+        for (const token of ALPHA_TOKENS) {
             tokens.push([
                 `--eun-color-${type}-${token.name}`,
                 toRgba(seed, token.alpha),
@@ -230,6 +249,12 @@ function buildThemeTokens(primary, secondary, isDark, surfaceColor, fontFamily)
         }
     }
     tokens.push(["--eun-surface-color", surfaceColor]);
+    if (inverseSurfaceColor) {
+        tokens.push(["--eun-surface-inverse", inverseSurfaceColor], ["--eun-text-on-inverse", pickOnColor(inverseSurfaceColor)]);
+    }
+    if (textColor) {
+        tokens.push(["--eun-text-color", textColor], ["--eun-text-secondary", secondaryText(textColor, surfaceColor)]);
+    }
     if (fontFamily) {
         tokens.push(["--eun-font-family", fontFamily]);
     }
@@ -246,7 +271,7 @@ function buildThemeTokens(primary, secondary, isDark, surfaceColor, fontFamily)
  * custom brand from two hex seed colors by composing `buildPalette` and
  * `buildTints` above, then writing every result straight onto
  * `document.documentElement`, both 11-step shade scales, their `on-*`
- * text colors, the transparent hover/active tokens, and the `-tint`
+ * text colors, the `alpha-*` tokens, and the `-tint`
  * neutrals. Everything else (grey scale, spacing, radius, shadows,
  * semantic state colors) still comes from whichever base theme class or
  * `data-theme` is already applied; this deliberately doesn't touch those.
@@ -266,7 +291,10 @@ function buildThemeTokens(primary, secondary, isDark, surfaceColor, fontFamily)
  */
 export function initializeTheme(primary, secondary, isDark = false, surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, fontFamily) {
     const root = document.documentElement.style;
-    const tokens = buildThemeTokens(primary, secondary, isDark, isDark ? darkSurfaceColor : surfaceColor, fontFamily);
+    const tokens = buildThemeTokens(primary, secondary, isDark, {
+        surfaceColor: isDark ? darkSurfaceColor : surfaceColor,
+        fontFamily,
+    });
     for (const [property, value] of tokens) {
         root.setProperty(property, value);
     }
@@ -283,9 +311,20 @@ export function initializeTheme(primary, secondary, isDark = false, surfaceColor
  * switching mode is just a `data-theme` change, no regeneration needed.
  */
 export function buildThemeCss(primary, secondary, options = {}) {
-    const { surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, fontFamily, brand = "custom", } = options;
+    const { surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, darkSecondaryColor, inverseSurfaceColor, darkInverseSurfaceColor = inverseSurfaceColor, textColor, darkTextColor, fontFamily, brand = "custom", } = options;
     const rule = (selector, isDark) => {
-        const tokens = buildThemeTokens(primary, secondary, isDark, isDark ? darkSurfaceColor : surfaceColor, fontFamily);
+        const tokens = buildThemeTokens(primary, secondary, isDark, {
+            surfaceColor: isDark ? darkSurfaceColor : surfaceColor,
+            fontFamily,
+            darkSecondaryColor: isDark ? darkSecondaryColor : undefined,
+            inverseSurfaceColor: isDark
+                ? darkInverseSurfaceColor
+                : inverseSurfaceColor,
+            textColor: isDark ? darkTextColor : textColor,
+        });
+        if (isDark && textColor && !darkTextColor) {
+            tokens.push(["--eun-text-color", "var(--eun-color-grey-800)"], ["--eun-text-secondary", "var(--eun-color-grey-700)"]);
+        }
         const body = tokens
             .map(([property, value]) => `  ${property}: ${value};`)
             .join("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eunomia/elements",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "Eunomia the framework-agnostic web component design system",
   "type": "module",
   "homepage": "https://eunomia-ds.vercel.app",
@@ -25,10 +25,6 @@
       "types": "./dist/components/content/badge/badge.d.ts",
       "default": "./dist/components/content/badge/badge.js"
     },
-    "./breadcrumb-item.js": {
-      "types": "./dist/components/navigation/breadcrumb/breadcrumb-item.d.ts",
-      "default": "./dist/components/navigation/breadcrumb/breadcrumb-item.js"
-    },
     "./breadcrumb.js": {
       "types": "./dist/components/navigation/breadcrumb/breadcrumb.d.ts",
       "default": "./dist/components/navigation/breadcrumb/breadcrumb.js"
@@ -81,6 +77,10 @@
       "types": "./dist/components/form/date-picker/date-picker.d.ts",
       "default": "./dist/components/form/date-picker/date-picker.js"
     },
+    "./description-list.js": {
+      "types": "./dist/components/content/description-list/description-list.d.ts",
+      "default": "./dist/components/content/description-list/description-list.js"
+    },
     "./divider.js": {
       "types": "./dist/components/layout/divider/divider.d.ts",
       "default": "./dist/components/layout/divider/divider.js"
@@ -233,26 +233,6 @@
       "types": "./dist/features/table/table-action-bar/table-action-bar.d.ts",
       "default": "./dist/features/table/table-action-bar/table-action-bar.js"
     },
-    "./table-cell.js": {
-      "types": "./dist/features/table/table-cell/table-cell.d.ts",
-      "default": "./dist/features/table/table-cell/table-cell.js"
-    },
-    "./table-column.js": {
-      "types": "./dist/features/table/table-column/table-column.d.ts",
-      "default": "./dist/features/table/table-column/table-column.js"
-    },
-    "./table-header.js": {
-      "types": "./dist/features/table/table-header/table-header.d.ts",
-      "default": "./dist/features/table/table-header/table-header.js"
-    },
-    "./table-item.js": {
-      "types": "./dist/features/table/table-item/table-item.d.ts",
-      "default": "./dist/features/table/table-item/table-item.js"
-    },
-    "./table-skeleton-row.js": {
-      "types": "./dist/features/table/table-skeleton-row/table-skeleton-row.d.ts",
-      "default": "./dist/features/table/table-skeleton-row/table-skeleton-row.js"
-    },
     "./table.js": {
       "types": "./dist/features/table/table/table.d.ts",
       "default": "./dist/features/table/table/table.js"
@@ -301,6 +281,10 @@
       "types": "./dist/utils/theme-generator.utils.d.ts",
       "default": "./dist/utils/theme-generator.utils.js"
     },
+    "./breakpoints.js": {
+      "types": "./dist/breakpoints.d.ts",
+      "default": "./dist/breakpoints.js"
+    },
     "./jsx": {
       "types": "./dist/jsx.d.ts",
       "default": "./dist/jsx.js"
@@ -312,8 +296,12 @@
     "./sidebar-ssr.css": "./dist/ssr/sidebar-ssr.css",
     "./overlay-ssr.css": "./dist/ssr/overlay-ssr.css",
     "./links-ssr.css": "./dist/ssr/links-ssr.css",
+    "./button-ssr.css": "./dist/ssr/button-ssr.css",
+    "./tag-ssr.css": "./dist/ssr/tag-ssr.css",
+    "./card-ssr.css": "./dist/ssr/card-ssr.css",
     "./rich-text.css": "./dist/ssr/rich-text.css",
-    "./native-table.css": "./dist/features/table/native-table.css"
+    "./table-ssr.css": "./dist/ssr/table-ssr.css",
+    "./description-list-ssr.css": "./dist/ssr/description-list-ssr.css"
   },
   "files": [
     "dist",
@@ -326,12 +314,13 @@
     "./dist/features/**/*.js"
   ],
   "scripts": {
-    "build": "tsc --noEmit",
+    "build": "tsc --noEmit -p tsconfig.build.json",
     "build:dist": "node scripts/build-dist.mjs",
     "build:dist:watch": "tsc -p tsconfig.build.json && node scripts/copy-assets.mjs && node scripts/generate-exports.mjs && tsc -p tsconfig.build.json --watch",
     "build:cdn": "node scripts/build-cdn.mjs",
     "prepublishOnly": "npm run build:dist && npm run build:cdn",
-    "lint": "eslint . --config ../eslint.config.js",
+    "lint": "eslint . --config ../eslint.config.js && node scripts/breakpoints.mjs --check",
+    "breakpoints": "node scripts/breakpoints.mjs",
     "test": "web-test-runner --config ../web-test-runner.config.mjs",
     "test:coverage": "web-test-runner --config ../web-test-runner.config.mjs --coverage"
   },

package/styles/breakpoints.scss

@@ -0,0 +1,8 @@
+// Short entry point for the breakpoints : the `eunomia-below-*` and
+// `eunomia-from-*` mixins, and the `$map-device-width` scale they read.
+//
+//   @use "@eunomia/elements/styles/breakpoints" as *;
+//
+// Emits no CSS, so it can be used in every stylesheet that needs it.
+@forward "./tools/mixins/media-queries/eunomia-media-queries.mixin.scss";
+@forward "./tools/variables/eunomia.breakpoints.scss";

package/styles/eunomia-grid.scss

@@ -0,0 +1,6 @@
+// Grid utility classes, emitted once at the top level. Every theme entry
+// file uses this module, and Sass outputs a module's CSS only once per
+// compilation, so loading several themes never duplicates the classes.
+@use "./tools/mixins/layout/eunomia-grid.mixin.scss" as *;
+
+@include eunomia-grid-layouts();

package/styles/themes/eunomia-theme.scss

@@ -1,5 +1,6 @@
-@use './../tools/indexes/eunomia-tools.index.scss' as *;
-@use './mixins/eunomia-scales.mixin.scss' as *;
+@use "./../tools/indexes/eunomia-tools.index.scss" as *;
+@use "./mixins/eunomia-scales.mixin.scss" as *;
+@use "./../eunomia-grid.scss";
 
 @mixin default-settings {
   @include eunomia-font-family();
@@ -9,10 +10,10 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-motion();
   @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
-  @include eunomia-grid-layouts();
 }
 
 .eunomia-theme {

package/styles/themes/mixins/eunomia-a11y-color.mixin.scss

@@ -48,7 +48,10 @@
   $result: $color;
   $guard: 0;
 
-  @while eunomia-contrast-ratio($result, $surface) < $min-contrast and $guard < 60
+  @while eunomia-contrast-ratio($result, $surface) <
+    $min-contrast and
+    $guard <
+    60
   {
     $result: color.adjust($result, $lightness: $step, $space: hsl);
     $guard: $guard + 1;
@@ -64,3 +67,33 @@
 
   @return rgb($r, $g, $b);
 }
+
+@function eunomia-light-accessible(
+  $color,
+  $surface: #ffffff,
+  $min-contrast: 4.5,
+  $min-lightness: 10%,
+  $step: 1.5%
+) {
+  $result: $color;
+  $guard: 0;
+
+  @while eunomia-contrast-ratio($result, $surface) <
+    $min-contrast and
+    $guard <
+    60
+  {
+    $result: color.adjust($result, $lightness: -$step, $space: hsl);
+    $guard: $guard + 1;
+
+    @if color.channel($result, "lightness", $space: hsl) <= $min-lightness {
+      $guard: 60;
+    }
+  }
+
+  $r: math.round(color.channel($result, "red"));
+  $g: math.round(color.channel($result, "green"));
+  $b: math.round(color.channel($result, "blue"));
+
+  @return rgb($r, $g, $b);
+}

package/styles/themes/mixins/eunomia-neutrals.mixin.scss

@@ -32,6 +32,8 @@
   --eun-text-disabled-color: #8d93aa;
   --eun-text-readonly-color: #c1c9d6;
   --eun-disabled-content: #c1c9d6;
+  --eun-surface-inverse: #0b1620;
+  --eun-text-on-inverse: #f5f7fa;
 }
 
 @mixin eunomia-dark-neutrals {
@@ -68,4 +70,6 @@
   --eun-text-disabled-color: var(--eun-color-grey-500);
   --eun-text-readonly-color: var(--eun-color-grey-400);
   --eun-disabled-content: var(--eun-color-grey-400);
+  --eun-surface-inverse: #0b1620;
+  --eun-text-on-inverse: #f5f7fa;
 }