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

package/dist/utils/navigation.utils.d.ts

@@ -15,3 +15,17 @@
  * @param target the anchor's target, if any.
  */
 export declare function handleLinkNavigation(host: HTMLElement, event: MouseEvent, href: string | undefined, target?: string | null): void;
+/**
+ * Warns once when a host in slotted anchor mode (a native `<a>` as a direct
+ * child, `href` unset) still carries link attributes of its own. The
+ * anchor is the link in that mode, so `aria-label`, `target`, `rel` and
+ * `download` left on the host are ignored without any visible sign : a
+ * forgotten `aria-label` ends up on an element with no role, and the link
+ * loses its accessible name.
+ *
+ * @param host the link, button or card whose anchor is slotted.
+ */
+export declare function warnIgnoredHostLinkAttributes(host: HTMLElement & {
+    target?: string;
+    download?: string;
+}): void;

package/dist/utils/navigation.utils.js

@@ -42,3 +42,36 @@ export function handleLinkNavigation(host, event, href, target) {
         event.preventDefault();
     }
 }
+/**
+ * Hosts already warned by {@link warnIgnoredHostLinkAttributes}, so each
+ * one only logs once however often it updates.
+ */
+const warnedHosts = new WeakSet();
+/**
+ * Warns once when a host in slotted anchor mode (a native `<a>` as a direct
+ * child, `href` unset) still carries link attributes of its own. The
+ * anchor is the link in that mode, so `aria-label`, `target`, `rel` and
+ * `download` left on the host are ignored without any visible sign : a
+ * forgotten `aria-label` ends up on an element with no role, and the link
+ * loses its accessible name.
+ *
+ * @param host the link, button or card whose anchor is slotted.
+ */
+export function warnIgnoredHostLinkAttributes(host) {
+    if (warnedHosts.has(host)) {
+        return;
+    }
+    const ignored = ['aria-label', 'target', 'rel', 'download'].filter((name) => host.hasAttribute(name));
+    if (!ignored.includes('target') && host.target && host.target !== '_self') {
+        ignored.push('target');
+    }
+    if (!ignored.includes('download') && host.download) {
+        ignored.push('download');
+    }
+    if (!ignored.length) {
+        return;
+    }
+    warnedHosts.add(host);
+    console.warn(`<${host.localName}>: ${ignored.join(', ')} ignored on the host, since ` +
+        'the slotted <a> is the link. Move them onto the <a> itself.', host);
+}

package/dist/utils/new-tab-anchor.controller.d.ts

@@ -0,0 +1,44 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+/**
+ * Class of a visually-hidden "opens in a new tab" text the consumer writes
+ * inside the slotted anchor, hidden by `links-ssr.css`. It's part of the
+ * anchor's accessible name and of the server-rendered HTML, so it's
+ * announced everywhere, links lists and no-JS pages included, and the
+ * controller then leaves the anchor's `aria-description` alone.
+ */
+export declare const NEW_TAB_HINT_CLASS = "eun-new-tab-hint";
+/**
+ * Announces a slotted anchor opening in a new tab, for a link, button or
+ * card whose native `<a>` is slotted as a direct child. The anchor belongs
+ * to the consumer (and to their framework, which would undo or trip over an
+ * injected child during hydration), so the hint goes on its
+ * `aria-description` rather than into its content, leaving its text and
+ * `aria-label` untouched. A description the consumer set themselves is
+ * never overwritten, and only the one this controller wrote is ever removed.
+ * A description only reaches some assistive technology, so an anchor
+ * holding a {@link NEW_TAB_HINT_CLASS} text of its own gets none.
+ *
+ * The anchor's `target` and content can change after the first render (a
+ * framework re-render), which no `slotchange` reports, so they're observed
+ * directly and re-render the host, whose visible new-tab icon keys off
+ * {@link isBlank}.
+ */
+export declare class NewTabAnchorController implements ReactiveController {
+    #private;
+    private readonly host;
+    private readonly getAnchor;
+    private readonly getHint;
+    /**
+     * @param host the link, button or card.
+     * @param getAnchor returns the slotted anchor, or null outside that mode.
+     * @param getHint returns the localized "opens in a new tab" wording.
+     */
+    constructor(host: ReactiveControllerHost & HTMLElement, getAnchor: () => HTMLAnchorElement | null, getHint: () => string);
+    /**
+     * Whether the slotted anchor, if any, opens in a new tab.
+     */
+    get isBlank(): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}

package/dist/utils/new-tab-anchor.controller.js

@@ -0,0 +1,102 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _NewTabAnchorController_instances, _NewTabAnchorController_described, _NewTabAnchorController_observer, _NewTabAnchorController_clear;
+/**
+ * Class of a visually-hidden "opens in a new tab" text the consumer writes
+ * inside the slotted anchor, hidden by `links-ssr.css`. It's part of the
+ * anchor's accessible name and of the server-rendered HTML, so it's
+ * announced everywhere, links lists and no-JS pages included, and the
+ * controller then leaves the anchor's `aria-description` alone.
+ */
+export const NEW_TAB_HINT_CLASS = "eun-new-tab-hint";
+/**
+ * Announces a slotted anchor opening in a new tab, for a link, button or
+ * card whose native `<a>` is slotted as a direct child. The anchor belongs
+ * to the consumer (and to their framework, which would undo or trip over an
+ * injected child during hydration), so the hint goes on its
+ * `aria-description` rather than into its content, leaving its text and
+ * `aria-label` untouched. A description the consumer set themselves is
+ * never overwritten, and only the one this controller wrote is ever removed.
+ * A description only reaches some assistive technology, so an anchor
+ * holding a {@link NEW_TAB_HINT_CLASS} text of its own gets none.
+ *
+ * The anchor's `target` and content can change after the first render (a
+ * framework re-render), which no `slotchange` reports, so they're observed
+ * directly and re-render the host, whose visible new-tab icon keys off
+ * {@link isBlank}.
+ */
+export class NewTabAnchorController {
+    /**
+     * @param host the link, button or card.
+     * @param getAnchor returns the slotted anchor, or null outside that mode.
+     * @param getHint returns the localized "opens in a new tab" wording.
+     */
+    constructor(host, getAnchor, getHint) {
+        _NewTabAnchorController_instances.add(this);
+        this.host = host;
+        this.getAnchor = getAnchor;
+        this.getHint = getHint;
+        /**
+         * The anchor this controller last wrote `aria-description` on, so it can
+         * clear it once the anchor stops opening in a new tab or is swapped out.
+         */
+        _NewTabAnchorController_described.set(this, void 0);
+        _NewTabAnchorController_observer.set(this, new MutationObserver((records) => {
+            const anchor = this.getAnchor();
+            if (anchor && records.some((record) => anchor.contains(record.target))) {
+                this.host.requestUpdate();
+            }
+        }));
+        host.addController(this);
+    }
+    /**
+     * Whether the slotted anchor, if any, opens in a new tab.
+     */
+    get isBlank() {
+        return this.getAnchor()?.target === "_blank";
+    }
+    hostConnected() {
+        __classPrivateFieldGet(this, _NewTabAnchorController_observer, "f").observe(this.host, {
+            subtree: true,
+            childList: true,
+            attributeFilter: ["target"],
+        });
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _NewTabAnchorController_observer, "f").disconnect();
+    }
+    hostUpdated() {
+        const anchor = this.getAnchor();
+        if (__classPrivateFieldGet(this, _NewTabAnchorController_described, "f") && __classPrivateFieldGet(this, _NewTabAnchorController_described, "f") !== anchor) {
+            __classPrivateFieldGet(this, _NewTabAnchorController_instances, "m", _NewTabAnchorController_clear).call(this);
+        }
+        if (!anchor) {
+            return;
+        }
+        const ownHint = !!anchor.querySelector(`.${NEW_TAB_HINT_CLASS}`);
+        if (!this.isBlank || ownHint) {
+            if (__classPrivateFieldGet(this, _NewTabAnchorController_described, "f") === anchor) {
+                __classPrivateFieldGet(this, _NewTabAnchorController_instances, "m", _NewTabAnchorController_clear).call(this);
+            }
+            return;
+        }
+        if (__classPrivateFieldGet(this, _NewTabAnchorController_described, "f") !== anchor && anchor.hasAttribute("aria-description")) {
+            return;
+        }
+        anchor.setAttribute("aria-description", this.getHint());
+        __classPrivateFieldSet(this, _NewTabAnchorController_described, anchor, "f");
+    }
+}
+_NewTabAnchorController_described = new WeakMap(), _NewTabAnchorController_observer = new WeakMap(), _NewTabAnchorController_instances = new WeakSet(), _NewTabAnchorController_clear = function _NewTabAnchorController_clear() {
+    __classPrivateFieldGet(this, _NewTabAnchorController_described, "f")?.removeAttribute("aria-description");
+    __classPrivateFieldSet(this, _NewTabAnchorController_described, undefined, "f");
+};

package/dist/utils/severity-icon.utils.d.ts

@@ -21,7 +21,7 @@ export declare const SEVERITY_ICONS: {
  * difference in what `severity` means on each family of component :
  * - `"icon"` (the default) — action components (`eun-button`,
  *   `eun-dropdown-button`) and `eun-chip`, where `severity` only ever
- *   drives the icon, never the color (color stays on `variant`/`color`) ;
+ *   drives the icon, never the color (color stays on `color`) ;
  *   an explicit `icon` naming something more specific than the generic
  *   severity glyph should still win.
  * - `"severity"` — `eun-alert`/`eun-toast`/`eun-tag`, where `severity`

package/dist/utils/severity-icon.utils.js

@@ -23,7 +23,7 @@ export const SEVERITY_ICONS = {
  * difference in what `severity` means on each family of component :
  * - `"icon"` (the default) — action components (`eun-button`,
  *   `eun-dropdown-button`) and `eun-chip`, where `severity` only ever
- *   drives the icon, never the color (color stays on `variant`/`color`) ;
+ *   drives the icon, never the color (color stays on `color`) ;
  *   an explicit `icon` naming something more specific than the generic
  *   severity glyph should still win.
  * - `"severity"` — `eun-alert`/`eun-toast`/`eun-tag`, where `severity`

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

@@ -7,7 +7,9 @@
  *
  * Only `buildPalette`, `buildTints`, `initializeTheme`, and
  * `buildThemeCss` (plus the types their signatures need) are exported
- * from `index.ts`. Everything
+ * from `index.ts`, and this file is also published as-is as the
+ * `./theme.js` subpath. It must stay free of imports and side effects for
+ * that subpath to remain safe on a server. Everything
  * else below, the raw color math, the shade/tint step definitions, is
  * kept file-private on purpose: none of it is meant to be reached on its
  * own, it exists to be composed by those four, and every extra export
@@ -46,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.
@@ -68,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

@@ -7,7 +7,9 @@
  *
  * Only `buildPalette`, `buildTints`, `initializeTheme`, and
  * `buildThemeCss` (plus the types their signatures need) are exported
- * from `index.ts`. Everything
+ * from `index.ts`, and this file is also published as-is as the
+ * `./theme.js` subpath. It must stay free of imports and side effects for
+ * that subpath to remain safe on a server. Everything
  * else below, the raw color math, the shade/tint step definitions, is
  * kept file-private on purpose: none of it is meant to be reached on its
  * own, it exists to be composed by those four, and every extra export
@@ -157,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
@@ -202,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),
@@ -228,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]);
     }
@@ -244,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.
@@ -264,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);
     }
@@ -281,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,7 +1,7 @@
 {
   "name": "@eunomia/elements",
-  "version": "1.0.0-beta.4",
-  "description": "Eunomia — a framework-agnostic web component design system",
+  "version": "1.0.0-beta.6",
+  "description": "Eunomia the framework-agnostic web component design system",
   "type": "module",
   "homepage": "https://eunomia-ds.vercel.app",
   "license": "SEE LICENSE IN LICENSE",
@@ -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"
@@ -297,6 +277,14 @@
       "types": "./dist/utils/rich-text.utils.d.ts",
       "default": "./dist/utils/rich-text.utils.js"
     },
+    "./theme.js": {
+      "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"
@@ -307,7 +295,13 @@
     "./toolbar-ssr.css": "./dist/ssr/toolbar-ssr.css",
     "./sidebar-ssr.css": "./dist/ssr/sidebar-ssr.css",
     "./overlay-ssr.css": "./dist/ssr/overlay-ssr.css",
-    "./native-table.css": "./dist/features/table/native-table.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",
+    "./table-ssr.css": "./dist/ssr/table-ssr.css",
+    "./description-list-ssr.css": "./dist/ssr/description-list-ssr.css"
   },
   "files": [
     "dist",
@@ -320,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;
 }