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

package/dist/ssr/tag-ssr.css

@@ -0,0 +1,197 @@
+eun-tag:not(:defined) {
+  --_bg-default: var(--_tint);
+  --_fg-default: var(--_accent);
+  --_bg-fill: var(--_solid);
+  --_fg-fill: var(--_onSolid);
+  --_bg-outline: transparent;
+  --_fg-outline: var(--_accent);
+  --_bd-outline: var(--_solid);
+  --_bg-flat: var(--eun-content-hover, #edeff0);
+  --_fg-flat: var(--eun-text-secondary, #484e61);
+  --_solid: var(--eun-color-grey-700, #484e61);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+  --_tint: color-mix(
+    in srgb,
+    var(--eun-color-grey-700, #484e61) 20%,
+    transparent
+  );
+  --_accent: var(--eun-color-grey-900, #000000);
+}
+eun-tag[color="primary"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-primary-500, #3d6fff);
+  --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+  --_tint: var(--eun-color-primary-alpha-20, #3d6fff33);
+  --_accent: var(--eun-color-primary-500, #3d6fff);
+}
+eun-tag[color="secondary"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-secondary-500, #e5a030);
+  --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+  --_tint: var(--eun-color-secondary-alpha-20, #edbd6f33);
+  --_accent: var(--eun-color-secondary-500, #e5a030);
+}
+eun-tag[color="light"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-grey-0, #ffffff);
+  --_onSolid: var(--eun-color-grey-900, #000000);
+}
+eun-tag[color="light"][fixed-color]:not([severity]):not(:defined) {
+  --_solid: #ffffff;
+  --_onSolid: #000000;
+}
+eun-tag[color="dark"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-grey-800, #071621);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+}
+eun-tag[color="dark"][fixed-color]:not([severity]):not(:defined) {
+  --_solid: #071621;
+  --_onSolid: #ffffff;
+}
+eun-tag:is([color="light"], [color="dark"]):not([severity]):not(:defined) {
+  --_accent: var(--_solid);
+  --_tint: color-mix(in srgb, var(--_solid) 16%, transparent);
+  --_bg-default: var(--_solid);
+  --_fg-default: var(--_onSolid);
+  --_bg-flat: var(--_tint);
+  --_fg-flat: var(--_solid);
+}
+eun-tag[severity="info"]:not(:defined) {
+  --_solid: var(--eun-color-info-text, #097aa8);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-info-alpha-5, #097faf0d);
+  --_accent: var(--eun-color-info-text, #097aa8);
+}
+eun-tag[severity="success"]:not(:defined) {
+  --_solid: var(--eun-color-success-text, #167f3c);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-success-alpha-5, #1a99480d);
+  --_accent: var(--eun-color-success-text, #167f3c);
+}
+eun-tag[severity="warning"]:not(:defined) {
+  --_solid: var(--eun-color-warning-text, #b94c06);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-warning-alpha-5, #c852070d);
+  --_accent: var(--eun-color-warning-text, #b94c06);
+}
+eun-tag[severity="critical"]:not(:defined) {
+  --_solid: var(--eun-color-critical-text, #aa0014);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-critical-alpha-5, #aa00140d);
+  --_accent: var(--eun-color-critical-text, #aa0014);
+}
+eun-tag[severity="neutral"]:not(:defined) {
+  --_solid: var(--eun-color-grey-700, #484e61);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+  --_tint: var(--eun-surface-sunken-strong, #ecedf0);
+  --_accent: var(--eun-color-grey-700, #484e61);
+}
+
+eun-tag:not([appearance]):not(:defined),
+eun-tag[appearance="default"]:not(:defined) {
+  --_bg: var(--_bg-default);
+  --_fg: var(--_fg-default);
+  --_bd: transparent;
+}
+eun-tag[appearance="fill"]:not(:defined) {
+  --_bg: var(--_bg-fill);
+  --_fg: var(--_fg-fill);
+  --_bd: transparent;
+}
+eun-tag[appearance="outline"]:not(:defined) {
+  --_bg: var(--_bg-outline);
+  --_fg: var(--_fg-outline);
+  --_bd: var(--_bd-outline);
+}
+eun-tag[appearance="flat"]:not(:defined) {
+  --_bg: var(--_bg-flat);
+  --_fg: var(--_fg-flat);
+  --_bd: transparent;
+}
+
+eun-tag:not(:defined) {
+  --_padV: var(--eun-space-s, 8px);
+  --_padH: calc(var(--eun-space-m, 16px) / 2);
+  --_fontSize: var(--eun-font-size-s, 14px);
+  --_gap: var(--eun-space-xs, 4px);
+  --_iconSize: 18px;
+  --_radius: var(--eun-border-radius-m, 5px);
+  --_borderWidth: var(--tag-border-width, var(--eun-border-width-s, 1px));
+  display: inline-flex;
+  align-items: center;
+  background: var(--tag-background-color, var(--_bg));
+  color: var(--tag-color, var(--_fg));
+  border: var(--_borderWidth) solid var(--tag-border-color, var(--_bd));
+  border-radius: var(--tag-border-radius, var(--_radius));
+  padding: max(
+      0px,
+      calc(var(--tag-padding-block, var(--_padV)) - var(--_borderWidth))
+    )
+    max(
+      0px,
+      calc(var(--tag-padding-inline, var(--_padH)) - var(--_borderWidth))
+    );
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tag-font-size, var(--_fontSize));
+  font-weight: var(--tag-font-weight, var(--eun-font-weight-m, 500));
+  gap: var(--tag-gap, var(--_gap));
+  user-select: none;
+}
+eun-tag[size="s"]:not(:defined) {
+  --_padV: var(--eun-space-xs, 4px);
+  --_padH: var(--eun-space-s, 8px);
+  --_fontSize: var(--eun-font-size-xs, 12px);
+  --_iconSize: 14px;
+}
+eun-tag[size="l"]:not(:defined) {
+  --_padV: var(--eun-space-s, 8px);
+  --_padH: var(--eun-space-m, 16px);
+  --_fontSize: var(--eun-font-size-m, 16px);
+  --_gap: var(--eun-space-s, 8px);
+  --_iconSize: 22px;
+}
+eun-tag[rounded]:not(:defined) {
+  --_radius: var(--eun-border-radius-xl, 999px);
+}
+eun-tag[uppercase]:not(:defined) {
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+eun-tag:not(:defined) > * {
+  margin: 0 !important;
+}
+
+eun-tag:not(:defined) > [slot="icon"] {
+  order: -1;
+}
+eun-tag[hide-icon]:not(:defined) > [slot="icon"] {
+  display: none;
+}
+:where(
+  eun-tag:not(:defined) > eun-icon[slot="icon"]:not([size]):not(:defined)
+) {
+  display: inline-block;
+  width: var(--icon-size, 1rem);
+  height: var(--icon-size, 1rem);
+}
+eun-tag:is([icon], [severity], [icon-only]):not([hide-icon]):not(
+    :has(> [slot="icon"])
+  ):not(:defined)::before {
+  content: "";
+  order: -1;
+  flex-shrink: 0;
+  width: var(--_iconSize);
+  height: var(--_iconSize);
+}
+
+eun-tag[icon-only]:not(:defined) {
+  --_padV: var(--eun-space-s, 8px);
+  --_padH: var(--eun-space-s, 8px);
+  justify-content: center;
+  font-size: 0;
+  gap: 0;
+}
+eun-tag[icon-only][size="s"]:not(:defined) {
+  --_padV: var(--eun-space-xs, 4px);
+  --_padH: var(--eun-space-xs, 4px);
+}
+eun-tag[icon-only]:not(:defined) > :not([slot="icon"]) {
+  display: none;
+}

package/dist/ssr/toolbar-ssr.css

@@ -1,41 +1,79 @@
-/**
- * Optional light-DOM stylesheet for `<eun-toolbar>` in server-rendered
- * pages (Next.js, or any framework/setup without Declarative Shadow DOM
- * for Lit components). It closes the SSR flash described in the
- * eun-toolbar documentation's Server-side rendering notes : the default
- * slot (the mobile panel's own content, everything slotted in without a
- * `slot` attribute) is only ever hidden by eun-toolbar's own Shadow DOM,
- * either tucked inside a closed native popover once the element is
- * upgraded and `mobile` is true, or simply never projected anywhere once
- * upgraded and it's false. Server-rendered HTML has no Shadow DOM yet,
- * so that content renders as plain, unstyled light-DOM children instead —
- * visible, unpositioned, and often full-width/height, on top of
- * everything else on the page, until the element upgrades.
- *
- * This stylesheet lives in the host document instead, hiding that exact
- * content through `:not(:defined)`, which is true from first paint and
- * stops matching permanently the moment the browser upgrades the
- * element — handing off to eun-toolbar's own Shadow DOM at exactly the
- * point it takes over, with no gap. Safe regardless of viewport : the
- * content stays exactly as hidden post-upgrade whether `mobile` ends up
- * true (closed popover) or false (never rendered at all), so this never
- * has to guess at the breakpoint.
- *
- * Usage — link it in the page `<head>`, alongside (not instead of)
- * importing "@eunomia/elements/toolbar.js" :
- *
- *   <link
- *     rel="stylesheet"
- *     href="node_modules/@eunomia/elements/dist/ssr/toolbar-ssr.css"
- *   />
- *
- * The `start`/`center`/`end` slots aren't covered here : that content is
- * meant to stay visible (and stay part of LCP) before upgrade too, same
- * as after, so hiding it isn't this stylesheet's job. Style its own
- * pre-upgrade layout, if needed, directly with `eun-toolbar:not(:defined)`
- * in the host page's own CSS.
- */
-
-eun-toolbar:not(:defined) > :not([slot]) {
+eun-toolbar:not(:defined) > :not([slot]),
+eun-toolbar:not(:defined) > [slot="skip-links"],
+eun-toolbar:not(:defined) > [slot="menu-icon"],
+eun-toolbar:not(:defined) > [slot="close-icon"] {
   display: none;
 }
+
+eun-toolbar:not(:defined) {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap, 16px);
+  width: 100%;
+  height: var(--toolbar-height, 72px);
+  padding: var(
+    --toolbar-padding,
+    var(--toolbar-padding-block, 0)
+      var(--toolbar-padding-inline, 24px)
+  );
+  position: sticky;
+  top: 0;
+  z-index: var(--toolbar-z-index, 100);
+}
+
+eun-toolbar[position="fixed"]:not(:defined) {
+  position: fixed;
+  inset-inline: 0;
+}
+
+eun-toolbar[position="static"]:not(:defined) {
+  position: static;
+}
+
+eun-toolbar:not(:defined) > [slot="start"] {
+  order: 1;
+}
+
+eun-toolbar:not(:defined) > [slot="center"] {
+  order: 2;
+}
+
+eun-toolbar:not(:defined) > [slot="end"] {
+  order: 3;
+}
+
+eun-toolbar:not(:defined)
+  > [slot="center"]:where(:nth-child(1 of [slot="center"])) {
+  margin-inline-start: auto;
+}
+
+eun-toolbar:not(:defined)
+  > [slot="center"]:where(:nth-last-child(1 of [slot="center"])) {
+  margin-inline-end: auto;
+}
+
+eun-toolbar:not(:defined):where(:not(:has(> [slot="center"])))
+  > [slot="end"]:where(:nth-child(1 of [slot="end"])) {
+  margin-inline-start: auto;
+}
+
+eun-toolbar:not(:defined):where(
+    :has(> [slot="start"]):has(> [slot="end"]):not(
+        :has(> :nth-child(2 of [slot="start"]), > :nth-child(2 of [slot="end"]))
+      )
+  )
+  > :is([slot="start"], [slot="end"]) {
+  flex: 1 1 0;
+}
+
+eun-toolbar:not(:defined):where(
+    :has(> [slot="start"]):has(> [slot="end"]):not(
+        :has(> :nth-child(2 of [slot="start"]), > :nth-child(2 of [slot="end"]))
+      )
+  )
+  > [slot="end"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

package/dist/types/variant.type.d.ts

@@ -3,7 +3,7 @@
  * independent of whether that something is an action being taken or a
  * state being observed. Shared by feedback/display components (alert,
  * toast, chip, tag, tooltip, progress-bar), and partly borrowed by
- * {@link EunomiaActionVariant} : a "critical" button and a "critical" alert
+ * {@link EunomiaActionColor} : a "critical" button and a "critical" alert
  * mean the same thing and must share the same red, or the app ends up with
  * two unrelated definitions of "critical" depending on whether the thing
  * wearing the color is clickable.
@@ -12,7 +12,9 @@ export type EunomiaSeverity = "info" | "success" | "warning" | "critical" | "neu
 /**
  * Canonical color union for interactive/action components (button, fab,
  * dropdown-button, toggle-group/-item, badge, modal's confirm/cancel
- * buttons). Composed of two genuinely different things sharing one visual
+ * buttons), always exposed as `color`, like tag, chip and tooltip's own
+ * {@link EunomiaTone} palette. `variant` stays reserved for a shape or
+ * style (a field's outline/fill/underline, a loader's dots, ...). Composed of two genuinely different things sharing one visual
  * slot — an action only ever needs one color, never both at once, so they
  * live in a single prop rather than two independently-precedenced ones :
  * - `"primary"` / `"secondary"` : pure emphasis/hierarchy, meaningless
@@ -26,18 +28,18 @@ export type EunomiaSeverity = "info" | "success" | "warning" | "critical" | "neu
  *   three do.
  *
  * Most components expose this union as-is ; only a genuine subset (see
- * {@link EunomiaModalConfirmVariant}) needs a further narrowing on top of it.
+ * {@link EunomiaModalConfirmColor}) needs a further narrowing on top of it.
  */
-export type EunomiaActionVariant = "primary" | "secondary" | Extract<EunomiaSeverity, "critical" | "success" | "warning">;
+export type EunomiaActionColor = "primary" | "secondary" | Extract<EunomiaSeverity, "critical" | "success" | "warning">;
 /**
- * The two-value {@link EunomiaActionVariant} subset `eun-modal`'s
- * `confirmVariant` uses — a confirm button is only ever the modal's default
+ * The two-value {@link EunomiaActionColor} subset `eun-modal`'s
+ * `confirmColor` uses — a confirm button is only ever the modal's default
  * emphasis or a destructive warning, never `secondary`/`success`/`warning`.
  */
-export type EunomiaModalConfirmVariant = Extract<EunomiaActionVariant, "primary" | "critical">;
+export type EunomiaModalConfirmColor = Extract<EunomiaActionColor, "primary" | "critical">;
 /**
  * Canonical surface-treatment union : how a component's background/border is
- * rendered, independent of its `variant`/`severity`/`color`. Always named
+ * rendered, independent of its `severity`/`color`. Always named
  * `appearance` on the components that expose it — never `type`, which stays
  * reserved for a native HTML mechanism (e.g. `eun-button`'s `type="submit"`)
  * wherever it appears.
@@ -53,8 +55,16 @@ export type EunomiaModalConfirmVariant = Extract<EunomiaActionVariant, "primary"
  * (elevated, drop shadow) doesn't share that constraint : it's a static
  * effect, not one gated behind interaction, so `eun-card` also exposes it
  * (see {@link EunomiaCardAppearance}) despite being a passive container.
+ * `underline` (a bottom border only) is a form field's own look, and
+ * `transparent` (the pale tint, see-through instead of opaque) a scheduler
+ * event chip's : each belongs to a single family, like `ghost`.
+ *
+ * `appearance` only ever paints the surface (background, border, shadow)
+ * and combines with `color`/`severity`. A property changing what is drawn
+ * (a loader's dots or bar, a skeleton's shape) is a `variant` instead,
+ * with values of its own that mean nothing outside that component.
  */
-export type EunomiaAppearance = "default" | "fill" | "outline" | "flat" | "raised" | "ghost";
+export type EunomiaAppearance = "default" | "fill" | "outline" | "flat" | "raised" | "ghost" | "underline" | "transparent";
 /**
  * The four-value {@link EunomiaAppearance} subset feedback/display components
  * (alert, toast, chip, tag, tooltip) actually use — no `raised`/`ghost`,
@@ -82,9 +92,15 @@ export type EunomiaToggleAppearance = Extract<EunomiaAppearance, "default" | "ou
  * share `ghost`'s constraint.
  */
 export type EunomiaCardAppearance = Extract<EunomiaAppearance, "default" | "fill" | "raised">;
+/**
+ * The three-value {@link EunomiaAppearance} subset text-like form fields
+ * use : a bordered box (`outline`, their default), a muted background with
+ * no border (`flat`), or a bottom border only (`underline`).
+ */
+export type EunomiaFieldAppearance = Extract<EunomiaAppearance, "outline" | "flat" | "underline">;
 /**
  * Canonical decorative, non-semantic palette : a plain brand/neutral color
- * pick with no status meaning, as opposed to {@link EunomiaActionVariant}/
+ * pick with no status meaning, as opposed to {@link EunomiaActionColor}/
  * {@link EunomiaSeverity}. Always named `color` on the components that expose
  * it.
  */

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]);
+}