@eunomia/elements 1.0.0-beta.7 → 1.0.0-beta.8

package/dist/ssr/links-ssr.css

@@ -1,7 +1,44 @@
-/* Once upgraded, a link wraps as one piece, never inside its text. */
 eun-link:not(:defined) {
   display: inline-flex;
   align-items: center;
+  gap: var(--eun-space-s, 8px);
+  padding: var(
+    --link-padding,
+    var(--link-padding-block, 0) var(--link-padding-inline, 0)
+  );
+  color: var(--link-color, var(--eun-text-color, #071621));
+}
+
+eun-link[theme="dark"]:not(:defined) {
+  color: var(
+    --link-color,
+    var(--eun-text-on-inverse-secondary, rgba(255, 255, 255, 0.7))
+  );
+}
+
+eun-link[current]:not(:defined) {
+  color: var(--link-color-current, var(--eun-color-primary-500, #3d6fff));
+}
+
+eun-link:not(:defined) > [slot="icon"] {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--link-icon-color, inherit);
+  font-size: var(--link-icon-size, inherit);
+}
+
+eun-link[block]:not(:defined) {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+eun-link[block]:not(:defined) > a {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 :where(:is(eun-link, eun-button, eun-card):not(:defined) > a) {

package/dist/ssr/sidebar-ssr.css

@@ -1,5 +1,6 @@
 eun-sidebar:not(:defined) {
   display: flex;
+  flex-direction: column;
   position: sticky;
   top: 0;
   flex-shrink: 0;
@@ -7,12 +8,47 @@ eun-sidebar:not(:defined) {
   box-sizing: border-box;
   overflow: hidden;
   width: var(--sidebar-width, 280px);
-  border-inline-end: var(--eun-border-width-s, 1px) solid transparent;
+  padding-block: var(--sidebar-gap, var(--eun-space-m, 16px));
+  padding-inline: var(
+    --sidebar-padding,
+    var(--sidebar-padding-inline, var(--eun-space-m, 16px))
+  );
+  background: var(--sidebar-background, var(--eun-surface-color, #ffffff));
+  color: var(--sidebar-color, var(--eun-text-color, #071621));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+  border-inline-end: var(--eun-border-width-s, 1px) solid
+    var(--sidebar-border-color, var(--eun-border-color, #dee0e7));
+}
+
+eun-sidebar[theme="dark"]:not(:defined) {
+  background: var(--sidebar-background, var(--eun-surface-inverse, #0b1620));
+  color: var(--sidebar-color, var(--eun-text-on-inverse, #f5f7fa));
+  border-color: var(
+    --sidebar-border-color,
+    color-mix(
+      in srgb,
+      var(--sidebar-color, var(--eun-text-on-inverse, #f5f7fa)) 16%,
+      transparent
+    )
+  );
 }
 
 eun-sidebar[position="end"]:not(:defined) {
   border-inline-end: none;
-  border-inline-start: var(--eun-border-width-s, 1px) solid transparent;
+  border-inline-start: var(--eun-border-width-s, 1px) solid
+    var(--sidebar-border-color, var(--eun-border-color, #dee0e7));
+}
+
+eun-sidebar[theme="dark"][position="end"]:not(:defined) {
+  border-inline-start-color: var(
+    --sidebar-border-color,
+    color-mix(
+      in srgb,
+      var(--sidebar-color, var(--eun-text-on-inverse, #f5f7fa)) 16%,
+      transparent
+    )
+  );
 }
 
 eun-sidebar[collapsed]:is([collapse-mode="mini"], :not([collapse-mode])):not(
@@ -21,7 +57,62 @@ eun-sidebar[collapsed]:is([collapse-mode="mini"], :not([collapse-mode])):not(
   width: var(--sidebar-mini-width, 64px);
 }
 
-eun-sidebar[collapsed][collapse-mode="hidden"]:not(:defined),
-eun-sidebar[dragged-hidden]:not(:defined) {
+eun-sidebar[collapsed][collapse-mode="hidden"]:not(:defined) {
   width: 0px;
+  padding: 0;
+  border-color: transparent;
+}
+
+eun-sidebar:not(:defined):has(> [slot="header"]) {
+  padding-block-start: var(
+    --sidebar-padding,
+    var(--sidebar-padding-block, var(--eun-space-m, 16px))
+  );
+}
+
+eun-sidebar:not(:defined):has(> [slot="footer"]) {
+  padding-block-end: var(
+    --sidebar-padding,
+    var(--sidebar-padding-block, var(--eun-space-m, 16px))
+  );
+}
+
+eun-sidebar:not(:defined) > [slot="header"] {
+  order: -1;
+}
+
+eun-sidebar:not(:defined) > :nth-last-child(1 of [slot="header"]) {
+  margin-block-end: var(--sidebar-gap, var(--eun-space-m, 16px));
+}
+
+eun-sidebar:not(:defined) > [slot="footer"] {
+  order: 1;
+}
+
+eun-sidebar:not(:defined) > :nth-child(1 of [slot="footer"]) {
+  margin-block-start: auto;
+}
+
+@media (width < 600px) {
+  eun-sidebar[hide-below="mobile"] {
+    display: none;
+  }
+}
+
+@media (width < 768px) {
+  eun-sidebar[hide-below="tablet"] {
+    display: none;
+  }
+}
+
+@media (width < 1024px) {
+  eun-sidebar[hide-below="laptop"] {
+    display: none;
+  }
+}
+
+@media (width < 1280px) {
+  eun-sidebar[hide-below="desktop"] {
+    display: none;
+  }
 }

package/dist/ssr/toggle-group-ssr.css

@@ -1,16 +1,32 @@
 eun-toggle-group:not(:defined) {
+  --_toggleRadius: var(
+    --toggle-group-border-radius,
+    var(--eun-border-radius-m, 8px)
+  );
+  --_toggleFontSize: var(--eun-font-size-s, 14px);
+  --_toggleButtonPaddingBlock: var(--eun-space-s, 8px);
+  --_toggleOptionPaddingInline: calc(var(--eun-space-l, 32px) / 2);
+  --_toggleLineHeight: 1rem;
+  --_trackPaddingBlock: var(
+    --toggle-group-padding,
+    var(
+      --toggle-group-padding-block,
+      calc(var(--_toggleButtonPaddingBlock) / 2)
+    )
+  );
+  --_toggleOptionPaddingBlock: max(
+    0px,
+    calc(var(--_toggleButtonPaddingBlock) - var(--_trackPaddingBlock))
+  );
   display: inline-flex;
   box-sizing: border-box;
   width: fit-content;
   max-width: 100%;
   gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
-  padding: var(--toggle-group-padding, var(--toggle-group-padding-block, 4px))
+  padding: var(--_trackPaddingBlock)
     var(--toggle-group-padding, var(--toggle-group-padding-inline, 4px));
   overflow: hidden;
-  border-radius: var(
-    --toggle-group-border-radius,
-    var(--eun-border-radius-m, 8px)
-  );
+  border-radius: var(--_toggleRadius);
   background: var(
     --toggle-group-background,
     var(--eun-surface-sunken, #f7f8fa)
@@ -19,10 +35,46 @@ eun-toggle-group:not(:defined) {
     var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
   box-shadow: var(--toggle-group-box-shadow, none);
   font-family: var(--eun-font-family, "Mulish", sans-serif);
-  font-size: var(--eun-font-size-s, 14px);
+  font-size: var(--_toggleFontSize);
+}
+
+eun-toggle-group[rounded]:not(:defined) {
+  --_toggleRadius: var(
+    --toggle-group-border-radius,
+    var(--eun-border-radius-xl, 999px)
+  );
+}
+
+eun-toggle-group[size="xs"]:not(:defined) {
+  --_toggleFontSize: var(--eun-font-size-xs, 10px);
+  --_toggleButtonPaddingBlock: var(--eun-space-xxs, 1.6px);
+  --_toggleOptionPaddingInline: var(--eun-space-xs, 4px);
+  --_toggleLineHeight: 10px;
+}
+
+eun-toggle-group[size="s"]:not(:defined) {
+  --_toggleFontSize: var(--eun-font-size-xs, 10px);
+  --_toggleButtonPaddingBlock: calc(var(--eun-space-s, 8px) / 2);
+  --_toggleOptionPaddingInline: var(--eun-space-s, 8px);
+  --_toggleLineHeight: 10px;
+}
+
+eun-toggle-group[size="l"]:not(:defined) {
+  --_toggleFontSize: var(--eun-font-size-m, 16px);
+  --_toggleButtonPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+  --_toggleOptionPaddingInline: calc(var(--eun-space-m, 16px) * 1.25);
+  --_toggleLineHeight: 1.1rem;
+}
+
+eun-toggle-group[size="xl"]:not(:defined) {
+  --_toggleFontSize: var(--eun-font-size-l, 1.3rem);
+  --_toggleButtonPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+  --_toggleOptionPaddingInline: calc(var(--eun-space-m, 16px) * 1.5);
+  --_toggleLineHeight: 1.3rem;
 }
 
 eun-toggle-group:is([appearance="outline"], [appearance="flat"]):not(:defined) {
+  --_toggleOptionPaddingBlock: var(--_toggleButtonPaddingBlock);
   padding: 0;
   overflow: visible;
   background: var(--toggle-group-background, transparent);
@@ -45,13 +97,15 @@ eun-toggle-item:not(:defined) {
   align-items: center;
   gap: var(--eun-space-xs, 4px);
   box-sizing: border-box;
-  padding: 6px 14px;
+  padding: var(--_toggleOptionPaddingBlock, calc(var(--eun-space-s, 8px) / 2))
+    var(--_toggleOptionPaddingInline, calc(var(--eun-space-l, 32px) / 2));
   border-radius: calc(
-    var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
+    var(--_toggleRadius, var(--eun-border-radius-m, 8px)) - 3px
   );
   color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
   font-family: var(--eun-font-family, "Mulish", sans-serif);
-  font-size: var(--eun-font-size-s, 14px);
+  font-size: var(--_toggleFontSize, var(--eun-font-size-s, 14px));
+  line-height: var(--_toggleLineHeight, 1rem);
   font-weight: var(--eun-font-weight-m, 500);
   white-space: nowrap;
   --_customTint: color-mix(
@@ -72,10 +126,7 @@ eun-toggle-item:not(:defined) > [slot="icon"] {
 ):not(:defined) {
   border: var(--eun-border-width-s, 1px) solid
     var(--toggle-group-border-color, transparent);
-  border-radius: var(
-    --toggle-group-border-radius,
-    var(--eun-border-radius-m, 8px)
-  );
+  border-radius: var(--_toggleRadius, var(--eun-border-radius-m, 8px));
 }
 
 :is(

package/dist/ssr/toolbar-ssr.css

@@ -106,3 +106,53 @@ eun-toolbar:not(:defined):where(
   align-items: center;
   justify-content: flex-end;
 }
+
+@media (width < 600px) {
+  eun-toolbar[mobile-breakpoint="600"][mobile-hide~="start"]:not(:defined)
+    > [slot="start"],
+  eun-toolbar[mobile-breakpoint="600"][mobile-hide~="center"]:not(:defined)
+    > [slot="center"],
+  eun-toolbar[mobile-breakpoint="600"][mobile-hide~="end"]:not(:defined)
+    > [slot="end"] {
+    display: none;
+  }
+}
+
+@media (width < 768px) {
+  eun-toolbar:not([mobile-breakpoint])[mobile-hide~="start"]:not(:defined)
+    > [slot="start"],
+  eun-toolbar:not([mobile-breakpoint])[mobile-hide~="center"]:not(:defined)
+    > [slot="center"],
+  eun-toolbar:not([mobile-breakpoint])[mobile-hide~="end"]:not(:defined)
+    > [slot="end"],
+  eun-toolbar[mobile-breakpoint="768"][mobile-hide~="start"]:not(:defined)
+    > [slot="start"],
+  eun-toolbar[mobile-breakpoint="768"][mobile-hide~="center"]:not(:defined)
+    > [slot="center"],
+  eun-toolbar[mobile-breakpoint="768"][mobile-hide~="end"]:not(:defined)
+    > [slot="end"] {
+    display: none;
+  }
+}
+
+@media (width < 1024px) {
+  eun-toolbar[mobile-breakpoint="1024"][mobile-hide~="start"]:not(:defined)
+    > [slot="start"],
+  eun-toolbar[mobile-breakpoint="1024"][mobile-hide~="center"]:not(:defined)
+    > [slot="center"],
+  eun-toolbar[mobile-breakpoint="1024"][mobile-hide~="end"]:not(:defined)
+    > [slot="end"] {
+    display: none;
+  }
+}
+
+@media (width < 1280px) {
+  eun-toolbar[mobile-breakpoint="1280"][mobile-hide~="start"]:not(:defined)
+    > [slot="start"],
+  eun-toolbar[mobile-breakpoint="1280"][mobile-hide~="center"]:not(:defined)
+    > [slot="center"],
+  eun-toolbar[mobile-breakpoint="1280"][mobile-hide~="end"]:not(:defined)
+    > [slot="end"] {
+    display: none;
+  }
+}

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

@@ -55,6 +55,9 @@ export type EunomiaModalConfirmColor = Extract<EunomiaActionColor, "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.
+ * Button-family components spell that pale tinted wash `soft` instead of
+ * `default`, since their own default is `fill` : `appearance="default"`
+ * on a button would otherwise not render the default.
  * `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`.
@@ -64,7 +67,7 @@ export type EunomiaModalConfirmColor = Extract<EunomiaActionColor, "primary" | "
  * (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" | "underline" | "transparent";
+export type EunomiaAppearance = "default" | "soft" | "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`,

package/dist/utils/boolean.utils.d.ts

@@ -0,0 +1,14 @@
+import type { ComplexAttributeConverter } from "lit";
+/**
+ * Converter for the boolean attributes that default to `true`. Lit's
+ * standard boolean converter only looks at the attribute's presence, the
+ * same way native HTML boolean attributes work, so `closeable="false"`
+ * would still read as `true`, and nothing declarative (HTML, SSR, JSX)
+ * could turn these off. Here the literal `"false"` really means `false`.
+ *
+ * When reflected, `true` writes an empty attribute and `false` writes
+ * `"false"`, rather than removing it : a missing attribute would read back
+ * as the `true` default on the next upgrade (SSR output, `cloneNode`), and
+ * stylesheets can target the off state with `[attr="false"]`.
+ */
+export declare const defaultTrueConverter: ComplexAttributeConverter<boolean>;

package/dist/utils/boolean.utils.js

@@ -0,0 +1,20 @@
+/**
+ * Converter for the boolean attributes that default to `true`. Lit's
+ * standard boolean converter only looks at the attribute's presence, the
+ * same way native HTML boolean attributes work, so `closeable="false"`
+ * would still read as `true`, and nothing declarative (HTML, SSR, JSX)
+ * could turn these off. Here the literal `"false"` really means `false`.
+ *
+ * When reflected, `true` writes an empty attribute and `false` writes
+ * `"false"`, rather than removing it : a missing attribute would read back
+ * as the `true` default on the next upgrade (SSR output, `cloneNode`), and
+ * stylesheets can target the off state with `[attr="false"]`.
+ */
+export const defaultTrueConverter = {
+    fromAttribute(value) {
+        return value !== null && value !== "false";
+    },
+    toAttribute(value) {
+        return value ? "" : "false";
+    },
+};

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

@@ -38,7 +38,7 @@ export interface DropdownMenuContainer extends HTMLElement {
  * an open submenu without knowing its concrete class.
  */
 export interface DropdownMenuEntry extends HTMLElement {
-    readonly key: string;
+    readonly value: string;
     closeSubmenu(): void;
     repositionSubmenu(): void;
 }

package/dist/utils/focusable-elements.utils.d.ts

@@ -36,6 +36,18 @@ export interface FocusableElementsOptions {
  * @returns every focusable descendant, in traversal order.
  */
 export declare function getFocusableElements(root: Element | ShadowRoot, options?: FocusableElementsOptions): HTMLElement[];
+/**
+ * The element that actually receives focus for `element` : `element`
+ * itself when it's a tab stop, otherwise its first focusable descendant
+ * (crossing slots and nested shadow roots, see {@link walkFlatTree}), e.g.
+ * the `<a>` slotted into an `eun-link` or the native control rendered
+ * inside a component's shadow root. Falls back to `element` when nothing
+ * inside it is focusable. Rendering isn't required, so a visually hidden
+ * (`sr-only`) control still counts.
+ *
+ * @param element the element to resolve.
+ */
+export declare function resolveFocusTarget(element: HTMLElement): HTMLElement;
 /**
  * Whether `root` has *any* focusable descendant (see {@link
  * walkFlatTree}), stopping at the first match rather than collecting them

package/dist/utils/focusable-elements.utils.js

@@ -106,6 +106,32 @@ export function getFocusableElements(root, options = {}) {
     });
     return results;
 }
+/**
+ * The element that actually receives focus for `element` : `element`
+ * itself when it's a tab stop, otherwise its first focusable descendant
+ * (crossing slots and nested shadow roots, see {@link walkFlatTree}), e.g.
+ * the `<a>` slotted into an `eun-link` or the native control rendered
+ * inside a component's shadow root. Falls back to `element` when nothing
+ * inside it is focusable. Rendering isn't required, so a visually hidden
+ * (`sr-only`) control still counts.
+ *
+ * @param element the element to resolve.
+ */
+export function resolveFocusTarget(element) {
+    const options = { requireRendered: false };
+    if (isFocusable(element, options)) {
+        return element;
+    }
+    let target;
+    walkFlatTree(element.shadowRoot ?? element, (descendant) => {
+        if (isFocusable(descendant, options)) {
+            target = descendant;
+            return true;
+        }
+        return false;
+    });
+    return target ?? element;
+}
 /**
  * Whether `root` has *any* focusable descendant (see {@link
  * walkFlatTree}), stopping at the first match rather than collecting them

package/dist/utils/input-modality.utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Starts recording, once per page, whether the latest interaction came from
+ * the keyboard or a pointer. Listens in the capture phase, so a handler
+ * stopping propagation further down can't hide an interaction. Safe to call
+ * from every instance's `connectedCallback`, and a no-op outside a browser.
+ */
+export declare function trackInputModality(): void;
+/**
+ * Whether the latest interaction recorded by {@link trackInputModality}
+ * came from the keyboard. `false` before any interaction, so a surface
+ * opened by script on page load keeps its pointer behavior.
+ */
+export declare function isKeyboardModality(): boolean;

package/dist/utils/input-modality.utils.js

@@ -0,0 +1,34 @@
+/**
+ * Whether the user's latest interaction with the page came from the
+ * keyboard, as opposed to a mouse, pen, or touch.
+ */
+let keyboardModality = false;
+let tracking = false;
+const handleKeydown = () => {
+    keyboardModality = true;
+};
+const handlePointerdown = () => {
+    keyboardModality = false;
+};
+/**
+ * Starts recording, once per page, whether the latest interaction came from
+ * the keyboard or a pointer. Listens in the capture phase, so a handler
+ * stopping propagation further down can't hide an interaction. Safe to call
+ * from every instance's `connectedCallback`, and a no-op outside a browser.
+ */
+export function trackInputModality() {
+    if (tracking || typeof document === "undefined") {
+        return;
+    }
+    tracking = true;
+    document.addEventListener("keydown", handleKeydown, true);
+    document.addEventListener("pointerdown", handlePointerdown, true);
+}
+/**
+ * Whether the latest interaction recorded by {@link trackInputModality}
+ * came from the keyboard. `false` before any interaction, so a surface
+ * opened by script on page load keeps its pointer behavior.
+ */
+export function isKeyboardModality() {
+    return keyboardModality;
+}

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

@@ -41,8 +41,12 @@ export interface EunomiaThemeTints {
  * secondary seed separately, a full theme is two of these.
  */
 export declare function buildPalette(baseHex: EunomiaHexColor, isDark: boolean): EunomiaThemeShadeValue[];
-/** The `-tint` counterpart of the surface/border/content-hover/content-pressed neutral tokens. */
-export declare function buildTints(primaryHex: EunomiaHexColor, isDark: boolean): EunomiaThemeTints;
+/**
+ * The `-tint` counterpart of the surface/border/content-hover/content-pressed
+ * neutral tokens. `borderColor` is the border the tint is mixed from, the
+ * mode's default border when unset.
+ */
+export declare function buildTints(primaryHex: EunomiaHexColor, isDark: boolean, borderColor?: EunomiaHexColor): EunomiaThemeTints;
 /**
  * The one non-pure export in this file: generates and applies a full
  * custom brand from two hex seed colors by composing `buildPalette` and
@@ -75,6 +79,8 @@ export interface EunomiaThemeCssOptions {
     darkInverseSurfaceColor?: EunomiaHexColor;
     textColor?: EunomiaHexColor;
     darkTextColor?: EunomiaHexColor;
+    borderColor?: EunomiaHexColor;
+    darkBorderColor?: EunomiaHexColor;
     fontFamily?: string;
     brand?: string;
 }

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

@@ -179,13 +179,30 @@ const LIGHT_TINT_BASE = {
     contentHover: "#edeff0",
     contentPressed: "#e4e6e8",
 };
-const DARK_TINT_BASE = { surface: DARK_SURFACE, border: "#666e8a" };
-/** The `-tint` counterpart of the surface/border/content-hover/content-pressed neutral tokens. */
-export function buildTints(primaryHex, isDark) {
+const DARK_TEXT = "#f7f8fa";
+/**
+ * Share of the text mixed into the surface for the dark
+ * `--eun-border-color`, mirroring the prebuilt dark neutrals: about 1.4:1
+ * against the surface, as discreet as the light border.
+ */
+const DARK_BORDER_RATIO = 0.12;
+/**
+ * The dark `--eun-border-color` for a given surface and text color, the
+ * same mix the prebuilt dark neutrals compute in CSS.
+ */
+function darkBorder(surface = DARK_SURFACE, text = DARK_TEXT) {
+    return mix(surface, text, DARK_BORDER_RATIO);
+}
+/**
+ * The `-tint` counterpart of the surface/border/content-hover/content-pressed
+ * neutral tokens. `borderColor` is the border the tint is mixed from, the
+ * mode's default border when unset.
+ */
+export function buildTints(primaryHex, isDark, borderColor) {
     const primary500 = isDark ? darkAccessible(primaryHex) : primaryHex;
-    const base = isDark ? DARK_TINT_BASE : LIGHT_TINT_BASE;
-    const border = mix(base.border, primary500, TINT_RATIO);
-    const surfaceTint = mix(base.surface, primary500, TINT_RATIO);
+    const baseBorder = borderColor ?? (isDark ? darkBorder() : LIGHT_TINT_BASE.border);
+    const border = mix(baseBorder, primary500, TINT_RATIO);
+    const surfaceTint = mix(isDark ? DARK_SURFACE : LIGHT_TINT_BASE.surface, primary500, TINT_RATIO);
     if (isDark) {
         const hoverBase = mix("#ffffff", primary500, TINT_RATIO);
         return {
@@ -227,7 +244,7 @@ function secondaryText(text, surface) {
  * so the inline and the stylesheet output can never drift apart.
  */
 function buildThemeTokens(primary, secondary, isDark, options) {
-    const { surfaceColor, fontFamily, darkSecondaryColor, inverseSurfaceColor, textColor, } = options;
+    const { surfaceColor, fontFamily, darkSecondaryColor, inverseSurfaceColor, textColor, borderColor, } = options;
     const tokens = [];
     for (const [type, seed, checkDark] of [
         ["primary", primary, isDark],
@@ -258,7 +275,10 @@ function buildThemeTokens(primary, secondary, isDark, options) {
     if (fontFamily) {
         tokens.push(["--eun-font-family", fontFamily]);
     }
-    const tints = buildTints(primary, isDark);
+    if (borderColor) {
+        tokens.push(["--eun-border-color", borderColor], ["--eun-divider-color", borderColor]);
+    }
+    const tints = buildTints(primary, isDark, borderColor ?? (isDark ? darkBorder(surfaceColor, textColor) : undefined));
     tokens.push(["--eun-surface-tint", tints.surfaceTint]);
     tokens.push(["--eun-border-tint", tints.borderTint]);
     tokens.push(["--eun-divider-tint", tints.dividerTint]);
@@ -311,7 +331,7 @@ 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, darkSecondaryColor, inverseSurfaceColor, darkInverseSurfaceColor = inverseSurfaceColor, textColor, darkTextColor, fontFamily, brand = "custom", } = options;
+    const { surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, darkSecondaryColor, inverseSurfaceColor, darkInverseSurfaceColor = inverseSurfaceColor, textColor, darkTextColor, borderColor, darkBorderColor, fontFamily, brand = "custom", } = options;
     const rule = (selector, isDark) => {
         const tokens = buildThemeTokens(primary, secondary, isDark, {
             surfaceColor: isDark ? darkSurfaceColor : surfaceColor,
@@ -321,6 +341,7 @@ export function buildThemeCss(primary, secondary, options = {}) {
                 ? darkInverseSurfaceColor
                 : inverseSurfaceColor,
             textColor: isDark ? darkTextColor : textColor,
+            borderColor: isDark ? darkBorderColor : borderColor,
         });
         if (isDark && textColor && !darkTextColor) {
             tokens.push(["--eun-text-color", "var(--eun-color-grey-800)"], ["--eun-text-secondary", "var(--eun-color-grey-700)"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eunomia/elements",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "Eunomia the framework-agnostic web component design system",
   "type": "module",
   "homepage": "https://eunomia-ds.vercel.app",

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

@@ -39,9 +39,13 @@
 @mixin eunomia-dark-neutrals {
   --eun-content-hover: rgba(255, 255, 255, 0.08);
   --eun-content-pressed: rgba(255, 255, 255, 0.14);
-  --eun-divider-color: var(--eun-color-grey-300);
-  --eun-border-color: var(--eun-color-grey-300);
   --eun-surface-color: var(--eun-color-grey-0);
+  --eun-border-color: color-mix(
+    in srgb,
+    var(--eun-text-color) 12%,
+    var(--eun-surface-color)
+  );
+  --eun-divider-color: var(--eun-border-color);
   --eun-surface-sunken: color-mix(
     in srgb,
     var(--eun-text-color) 8%,

package/styles/themes/prebuilt-themes/eunomia/eunomia-dark.mixin.scss

@@ -63,8 +63,12 @@
   @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2a3243;
-  --eun-divider-tint: #667090;
-  --eun-border-tint: #667090;
+  --eun-border-tint: color-mix(
+    in srgb,
+    var(--eun-color-primary-500) 5%,
+    var(--eun-border-color)
+  );
+  --eun-divider-tint: var(--eun-border-tint);
   --eun-content-hover-tint: rgba(248, 250, 255, 0.08);
   --eun-content-pressed-tint: rgba(248, 250, 255, 0.14);
 }

package/styles/themes/prebuilt-themes/fire/eunomia-fire-dark.mixin.scss

@@ -63,8 +63,12 @@
   @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2f2e39;
-  --eun-divider-tint: #6c6c86;
-  --eun-border-tint: #6c6c86;
+  --eun-border-tint: color-mix(
+    in srgb,
+    var(--eun-color-primary-500) 5%,
+    var(--eun-border-color)
+  );
+  --eun-divider-tint: var(--eun-border-tint);
   --eun-content-hover-tint: rgba(253, 245, 245, 0.08);
   --eun-content-pressed-tint: rgba(253, 245, 245, 0.14);
 }