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

package/dist/components/content/icon/icon.d.ts

@@ -4,6 +4,18 @@ import { EunomiaIconName, EunomiaIconType } from "./icon.type.js";
  * Tag name of the icon component.
  */
 export declare const EunomiaIconTagName = "eun-icon";
+/**
+ * Sets the URL the icon SVGs are served from, laid out as
+ * `<baseUrl>/<shape>/<name>.svg` (the `icons` folder shipped next to this
+ * component in the package). Needed when a bundler such as Turbopack
+ * rewrites `import.meta.url` to a `file:` URL, which can't be fetched from
+ * the browser. Copy or symlink that folder into your public assets, then
+ * call this once before any icon renders, e.g.
+ * `setIconBaseUrl("/eunomia-icons")`.
+ *
+ * @param url - Absolute or root-relative URL of the icons folder
+ */
+export declare function setIconBaseUrl(url: string): void;
 /**
  * An SVG-based icon that loads and renders dynamically based on its name.
  *
@@ -55,6 +67,26 @@ export declare class EunomiaIcon extends LitElement {
      * Gets the current size value set for the icon.
      */
     get size(): string | undefined;
+    /**
+     * Registers this icon so a later `setIconBaseUrl` call can reload it.
+     */
+    connectedCallback(): void;
+    /**
+     * Unregisters this icon, so a detached one isn't kept alive or reloaded.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Re-fetches the current icon, used when the icons' base URL changes
+     * after this icon already tried (and possibly failed) to load.
+     *
+     * @internal
+     */
+    reload(): void;
+    /**
+     * Loads the SVG whenever `name` or `shape` changes.
+     *
+     * @param _changedProperties - The properties changed by this update
+     */
     protected updated(_changedProperties: PropertyValues): void;
     /**
      * Dynamically imports the SVG markup for the given icon name
@@ -65,11 +97,22 @@ export declare class EunomiaIcon extends LitElement {
     private updateSvg;
     /**
      * Fetches the raw markup for a single icon file, co-located with this
-     * component (see `./icons/<shape>/<name>.svg`), resolved against
-     * `MODULE_URL` rather than `import.meta.url` directly — see that
-     * constant's doc comment for why. This still resolves correctly
-     * unbundled, straight off the filesystem/CDN, exactly like a direct
-     * `new URL(..., import.meta.url)` would.
+     * component (see `./icons/<shape>/<name>.svg`). Deliberately never
+     * passes a templated path straight to `new URL(...)` : Turbopack
+     * special-cases that exact call shape (a string with `${...}`
+     * interpolation as the first argument) for static asset resolution
+     * even when the base is routed through `MODULE_URL` rather than a bare
+     * `import.meta.url` literal — with ~5500 icon files across 2
+     * interpolated segments, it can't resolve the pattern and silently
+     * falls back to a single wrong file for every request instead of
+     * erroring. Building the URL from `MODULE_URL`'s own directory via
+     * plain string ops keeps every `new URL()` call single-argument and
+     * literal-free, so there's no templated call shape left for any
+     * bundler to intercept. This still resolves correctly unbundled,
+     * straight off the filesystem/CDN, exactly like the original
+     * `new URL(templatedPath, import.meta.url)` would have. A base set
+     * through `setIconBaseUrl` takes priority, and a bundler-rewritten
+     * `file:` module URL throws an explicit error instead of a CSP one.
      *
      * @param shape - Icon subfolder to fetch from
      * @param name - Icon file name, without extension

package/dist/components/content/icon/icon.js

@@ -30,20 +30,39 @@ export const EunomiaIconTagName = "eun-icon";
 const ICON_KEYWORD_REGEX = new RegExp(`_(outline|round|sharp)$`);
 /**
  * This module's own URL, captured once as a plain string rather than
- * read inline. Bundlers (Vite, webpack, Turbopack) special-case the
- * exact call shape `new URL(<literal>, import.meta.url)` to statically
- * resolve/copy the referenced asset. With two interpolated segments
- * (shape and name, see `fetchIconSvg`) across ~5500 icon files, that
- * static analysis has to fall back to a runtime lookup table keyed by
- * the computed path — mature under webpack, but buggy under Turbopack,
- * where every request resolves to the same wrong file regardless of
- * the name/shape asked for. Routing the base through this variable
- * keeps that call shape out of `fetchIconSvg` in every bundler, so the
- * lookup is a plain runtime `fetch` against a file already shipped,
- * byte-for-byte, at this path (see `scripts/copy-assets.mjs`) — the
- * same result, whether bundled or not.
+ * read inline, so `fetchIconSvg` never has to pass a templated path
+ * straight to `new URL(...)` — see that method's own doc comment for why
+ * that call shape is unsafe under Turbopack across ~5500 icon files.
+ * `import.meta.url` itself still needs reading somewhere, just not as
+ * part of a `new URL(<literal-with-interpolation>, ...)` call, which is
+ * the specific shape bundlers key their static asset resolution off of.
  */
 const MODULE_URL = import.meta.url;
+/**
+ * Base URL set through `setIconBaseUrl`, taking priority over the URL
+ * derived from `MODULE_URL` when defined.
+ */
+let iconBaseUrl;
+/**
+ * Icons currently in the DOM, so `setIconBaseUrl` can reload the ones
+ * that already tried to load before the base URL was set.
+ */
+const connectedIcons = new Set();
+/**
+ * Sets the URL the icon SVGs are served from, laid out as
+ * `<baseUrl>/<shape>/<name>.svg` (the `icons` folder shipped next to this
+ * component in the package). Needed when a bundler such as Turbopack
+ * rewrites `import.meta.url` to a `file:` URL, which can't be fetched from
+ * the browser. Copy or symlink that folder into your public assets, then
+ * call this once before any icon renders, e.g.
+ * `setIconBaseUrl("/eunomia-icons")`.
+ *
+ * @param url - Absolute or root-relative URL of the icons folder
+ */
+export function setIconBaseUrl(url) {
+    iconBaseUrl = url.endsWith("/") ? url.slice(0, -1) : url;
+    connectedIcons.forEach((icon) => icon.reload());
+}
 /**
  * An SVG-based icon that loads and renders dynamically based on its name.
  *
@@ -98,6 +117,34 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
     get size() {
         return __classPrivateFieldGet(this, _EunomiaIcon_size, "f");
     }
+    /**
+     * Registers this icon so a later `setIconBaseUrl` call can reload it.
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        connectedIcons.add(this);
+    }
+    /**
+     * Unregisters this icon, so a detached one isn't kept alive or reloaded.
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        connectedIcons.delete(this);
+    }
+    /**
+     * Re-fetches the current icon, used when the icons' base URL changes
+     * after this icon already tried (and possibly failed) to load.
+     *
+     * @internal
+     */
+    reload() {
+        this.updateSvg(this.name);
+    }
+    /**
+     * Loads the SVG whenever `name` or `shape` changes.
+     *
+     * @param _changedProperties - The properties changed by this update
+     */
     updated(_changedProperties) {
         if (_changedProperties.has("name") || _changedProperties.has("shape")) {
             this.updateSvg(this.name);
@@ -125,24 +172,49 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
             if (targetShape === "default") {
                 return;
             }
-            this.fetchIconSvg("default", baseName).then((svg) => {
+            this.fetchIconSvg("default", baseName)
+                .then((svg) => {
                 this.svgMarkup = svg;
-            });
+            })
+                .catch(() => undefined);
         });
     }
     /**
      * Fetches the raw markup for a single icon file, co-located with this
-     * component (see `./icons/<shape>/<name>.svg`), resolved against
-     * `MODULE_URL` rather than `import.meta.url` directly — see that
-     * constant's doc comment for why. This still resolves correctly
-     * unbundled, straight off the filesystem/CDN, exactly like a direct
-     * `new URL(..., import.meta.url)` would.
+     * component (see `./icons/<shape>/<name>.svg`). Deliberately never
+     * passes a templated path straight to `new URL(...)` : Turbopack
+     * special-cases that exact call shape (a string with `${...}`
+     * interpolation as the first argument) for static asset resolution
+     * even when the base is routed through `MODULE_URL` rather than a bare
+     * `import.meta.url` literal — with ~5500 icon files across 2
+     * interpolated segments, it can't resolve the pattern and silently
+     * falls back to a single wrong file for every request instead of
+     * erroring. Building the URL from `MODULE_URL`'s own directory via
+     * plain string ops keeps every `new URL()` call single-argument and
+     * literal-free, so there's no templated call shape left for any
+     * bundler to intercept. This still resolves correctly unbundled,
+     * straight off the filesystem/CDN, exactly like the original
+     * `new URL(templatedPath, import.meta.url)` would have. A base set
+     * through `setIconBaseUrl` takes priority, and a bundler-rewritten
+     * `file:` module URL throws an explicit error instead of a CSP one.
      *
      * @param shape - Icon subfolder to fetch from
      * @param name - Icon file name, without extension
      */
     async fetchIconSvg(shape, name) {
-        const url = new URL(`./icons/${shape}/${name}.svg`, MODULE_URL);
+        let url;
+        if (iconBaseUrl) {
+            url = `${iconBaseUrl}/${shape}/${name}.svg`;
+        }
+        else {
+            const moduleUrl = new URL(MODULE_URL);
+            if (moduleUrl.protocol === "file:") {
+                throw new Error("eun-icon can't locate its icons: the bundler rewrote import.meta.url to a file: URL. Serve the icons folder and call setIconBaseUrl().");
+            }
+            const moduleDir = moduleUrl.pathname.slice(0, moduleUrl.pathname.lastIndexOf("/"));
+            moduleUrl.pathname = `${moduleDir}/icons/${shape}/${name}.svg`;
+            url = moduleUrl.href;
+        }
         const response = await fetch(url);
         if (!response.ok) {
             throw new Error(`Icon not found: ${url}`);

package/dist/components/content/icon/icon.style.js

@@ -25,7 +25,7 @@ export const iconStyles = css `
     fill: var(--_color);
     color: var(--_color);
     background-color: var(--_background);
-    border-radius: var(--icon-border-radius, var(--eun-borderRadius-m, 8px));
+    border-radius: var(--icon-border-radius, var(--eun-border-radius-m, 8px));
     text-decoration: none;
     display: inline-block;
     user-select: none;

package/dist/components/content/image-carousel/image-carousel.styles.js

@@ -55,11 +55,11 @@ const base = css `
     aspect-ratio: var(--image-carousel-aspect-ratio, 4 / 3);
     border-radius: var(
       --image-carousel-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     background: var(
       --image-carousel-background,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-surface-sunken, #f7f8fa)
     );
     outline: 3px solid transparent;
     transition: outline-color 0.2s ease-out;
@@ -242,10 +242,10 @@ const base = css `
     bottom: var(--eun-space-s, 8px);
     z-index: 3;
     padding: 2px 8px;
-    border-radius: var(--eun-borderRadius-full, 999px);
+    border-radius: var(--eun-border-radius-full, 999px);
     background: rgba(7, 22, 33, 0.55);
     color: #fff;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     pointer-events: none;
   }
 
@@ -268,8 +268,8 @@ const base = css `
     width: var(--image-carousel-thumbnail-size, 64px);
     height: var(--image-carousel-thumbnail-size, 64px);
     overflow: hidden;
-    border: var(--eun-borderWidth-m, 1.5px) solid transparent;
-    border-radius: var(--eun-borderRadius-s, 6px);
+    border: var(--eun-border-width-m, 1.5px) solid transparent;
+    border-radius: var(--eun-border-radius-s, 6px);
     cursor: pointer;
     opacity: 0.6;
     outline: 2px solid transparent;
@@ -326,7 +326,7 @@ const base = css `
   }
   .dot[aria-current="true"] {
     width: calc(var(--image-carousel-dot-size, 8px) * 3.5);
-    border-radius: var(--eun-borderRadius-full, 999px);
+    border-radius: var(--eun-border-radius-full, 999px);
     background: var(
       --image-carousel-dot-active-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -362,7 +362,7 @@ const base = css `
     object-fit: contain;
     border-radius: var(
       --image-carousel-lightbox-image-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
   }
 
@@ -409,10 +409,10 @@ const base = css `
     transform: translateX(-50%);
     z-index: 3;
     padding: 4px 10px;
-    border-radius: var(--eun-borderRadius-full, 999px);
+    border-radius: var(--eun-border-radius-full, 999px);
     background: rgba(0, 0, 0, 0.55);
     color: #fff;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
   }
 
   #lightbox-grid {
@@ -425,7 +425,7 @@ const base = css `
     padding: var(--eun-space-s, 8px);
     overflow-y: auto;
     background: var(--eun-surface-color, #ffffff);
-    border-left: var(--eun-borderWidth-s, 1px) solid
+    border-left: var(--eun-border-width-s, 1px) solid
       var(--eun-border-color, #dee0e7);
   }
   .grid-item {
@@ -433,8 +433,8 @@ const base = css `
     box-sizing: border-box;
     aspect-ratio: 1;
     overflow: hidden;
-    border: var(--eun-borderWidth-m, 1.5px) solid transparent;
-    border-radius: var(--eun-borderRadius-s, 6px);
+    border: var(--eun-border-width-m, 1.5px) solid transparent;
+    border-radius: var(--eun-border-radius-s, 6px);
     cursor: pointer;
     opacity: 0.7;
     transition:
@@ -471,7 +471,7 @@ const base = css `
       max-height: none;
       overflow-x: auto;
       overflow-y: hidden;
-      border-top: var(--eun-borderWidth-s, 1px) solid
+      border-top: var(--eun-border-width-s, 1px) solid
         var(--eun-border-color, #dee0e7);
       border-left: none;
     }

package/dist/components/content/password-strength/password-strength.styles.js

@@ -76,11 +76,11 @@ const base = css `
     height: var(--password-strength-track-height, 6px);
     border-radius: var(
       --password-strength-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --password-strength-track-color,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
     transition: background-color
       var(--password-strength-transition-duration, 0.3s) ease;
@@ -97,7 +97,10 @@ const base = css `
     display: flex;
     align-items: baseline;
     gap: var(--eun-space-xxs, 1.6px);
-    font-size: var(--password-strength-font-size, var(--eun-fontSize-xs, 12px));
+    font-size: var(
+      --password-strength-font-size,
+      var(--eun-font-size-xs, 12px)
+    );
   }
 
   #caption {
@@ -110,7 +113,7 @@ const base = css `
   #level-name {
     font-weight: var(
       --password-strength-level-font-weight,
-      var(--eun-fontWeight-m, 600)
+      var(--eun-font-weight-m, 600)
     );
     color: var(
       --_levelColor,

package/dist/components/content/progress-bar/progress-bar.styles.js

@@ -106,7 +106,7 @@ const base = css `
     color: var(--progress-bar-corner-color, var(--eun-text-secondary, #484e61));
     font-size: var(
       --progress-bar-corner-font-size,
-      var(--eun-fontSize-xs, 12px)
+      var(--eun-font-size-xs, 12px)
     );
   }
 
@@ -127,11 +127,11 @@ const base = css `
     border: none;
     border-radius: var(
       --progress-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --progress-bar-track-color,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
   }
 
@@ -141,11 +141,11 @@ const base = css `
     height: var(--progress-bar-track-height, 8px);
     border-radius: var(
       --progress-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --progress-bar-track-color,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
   }
 
@@ -153,7 +153,7 @@ const base = css `
     background: var(--_optimumColor);
     border-radius: var(
       --progress-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     transition: width var(--progress-bar-transition-duration, 0.3s) ease;
   }
@@ -162,7 +162,7 @@ const base = css `
     background: var(--_subOptimumColor);
     border-radius: var(
       --progress-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     transition: width var(--progress-bar-transition-duration, 0.3s) ease;
   }
@@ -171,7 +171,7 @@ const base = css `
     background: var(--_subSubOptimumColor);
     border-radius: var(
       --progress-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     transition: width var(--progress-bar-transition-duration, 0.3s) ease;
   }
@@ -180,7 +180,7 @@ const base = css `
     border: none;
     border-radius: var(
       --progress-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(--_optimumColor);
     transition: width var(--progress-bar-transition-duration, 0.3s) ease;

package/dist/components/content/shared-styles/tone-surface.styles.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Shared surface resolution for the display components that take a `color`
+ * (`primary`, `secondary`, `light`, `medium`, `dark`), a `severity` and an
+ * `appearance` (`default`, `fill`, `outline`, `flat`) : `eun-tag` and
+ * `eun-chip`. Keeping it in one place means the two can never drift apart.
+ *
+ * The surface is resolved in two independent steps, so every palette works
+ * with every appearance and neither needs to know about the other :
+ *
+ * 1. A palette (`severity`, else `color`) fills the same few slots :
+ *    `--_solid` (the strong color), `--_onSolid` (text on top of it),
+ *    `--_tint` (its pale wash) and `--_accent` (text on the wash or on a
+ *    transparent surface).
+ * 2. An appearance reads those slots into the final `--_bg`, `--_fg` and
+ *    `--_bd`, set on the host.
+ *
+ * The component's own stylesheet then reads `--_bg`, `--_fg` and `--_bd`
+ * *behind* its public `--<component>-*` custom properties, so those always
+ * win, whatever the palette and appearance.
+ *
+ * `light` and `dark` are absolute colors : white and black, whatever the
+ * appearance. They have no pale wash, so `default` is as solid as `fill`, and
+ * `flat` is a faint wash of their own color rather than the neutral surface
+ * every other palette shares. By default they follow the grey scale, which
+ * flips with the active theme ; the `fixed-color` attribute pins them to the
+ * light theme's white and black instead.
+ *
+ * A component can override a slot on its own host to adapt it, for example
+ * `--_bg-outline` when its outline surface isn't transparent.
+ */
+export declare const toneSurfaceStyles: import("lit").CSSResult;

package/dist/components/content/shared-styles/tone-surface.styles.js

@@ -0,0 +1,149 @@
+import { css } from "lit";
+/**
+ * Shared surface resolution for the display components that take a `color`
+ * (`primary`, `secondary`, `light`, `medium`, `dark`), a `severity` and an
+ * `appearance` (`default`, `fill`, `outline`, `flat`) : `eun-tag` and
+ * `eun-chip`. Keeping it in one place means the two can never drift apart.
+ *
+ * The surface is resolved in two independent steps, so every palette works
+ * with every appearance and neither needs to know about the other :
+ *
+ * 1. A palette (`severity`, else `color`) fills the same few slots :
+ *    `--_solid` (the strong color), `--_onSolid` (text on top of it),
+ *    `--_tint` (its pale wash) and `--_accent` (text on the wash or on a
+ *    transparent surface).
+ * 2. An appearance reads those slots into the final `--_bg`, `--_fg` and
+ *    `--_bd`, set on the host.
+ *
+ * The component's own stylesheet then reads `--_bg`, `--_fg` and `--_bd`
+ * *behind* its public `--<component>-*` custom properties, so those always
+ * win, whatever the palette and appearance.
+ *
+ * `light` and `dark` are absolute colors : white and black, whatever the
+ * appearance. They have no pale wash, so `default` is as solid as `fill`, and
+ * `flat` is a faint wash of their own color rather than the neutral surface
+ * every other palette shares. By default they follow the grey scale, which
+ * flips with the active theme ; the `fixed-color` attribute pins them to the
+ * light theme's white and black instead.
+ *
+ * A component can override a slot on its own host to adapt it, for example
+ * `--_bg-outline` when its outline surface isn't transparent.
+ */
+export const toneSurfaceStyles = css `
+  :host {
+    /* How each appearance reads the palette slots. */
+    --_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);
+  }
+
+  /* Step 1 : palettes. "medium" is also the fallback before "color" reflects. */
+  :host(:not([color]):not([severity])),
+  :host([color="medium"]:not([severity])) {
+    --_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);
+  }
+  :host([color="primary"]:not([severity])) {
+    --_solid: var(--eun-color-primary-500, #3d6fff);
+    --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+    --_tint: var(--eun-color-primary-transparent, #3d6fff33);
+    --_accent: var(--eun-color-primary-500, #3d6fff);
+  }
+  :host([color="secondary"]:not([severity])) {
+    --_solid: var(--eun-color-secondary-500, #e5a030);
+    --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+    --_tint: var(--eun-color-secondary-transparent, #e5a03033);
+    --_accent: var(--eun-color-secondary-500, #e5a030);
+  }
+
+  :host([color="light"]:not([severity])) {
+    --_solid: var(--eun-color-grey-0, #ffffff);
+    --_onSolid: var(--eun-color-grey-900, #000000);
+  }
+  :host([color="light"][fixed-color]:not([severity])) {
+    --_solid: #ffffff;
+    --_onSolid: #000000;
+  }
+  :host([color="dark"]:not([severity])) {
+    --_solid: var(--eun-color-grey-800, #071621);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+  }
+  :host([color="dark"][fixed-color]:not([severity])) {
+    --_solid: #071621;
+    --_onSolid: #ffffff;
+  }
+  :host([color="light"]:not([severity])),
+  :host([color="dark"]:not([severity])) {
+    --_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);
+  }
+
+  :host([severity="info"]) {
+    --_solid: var(--eun-color-info-100, #097faf);
+    --_onSolid: #fff;
+    --_tint: var(--eun-color-info-30, #f0f7fa);
+    --_accent: var(--eun-color-info-100, #097faf);
+  }
+  :host([severity="success"]) {
+    --_solid: var(--eun-color-success-100, #1a9948);
+    --_onSolid: #fff;
+    --_tint: var(--eun-color-success-30, #f1f9f4);
+    --_accent: var(--eun-color-success-100, #1a9948);
+  }
+  :host([severity="warning"]) {
+    --_solid: var(--eun-color-warning-100, #c85207);
+    --_onSolid: #fff;
+    --_tint: var(--eun-color-warning-30, #fcf5f0);
+    --_accent: var(--eun-color-warning-100, #c85207);
+  }
+  :host([severity="critical"]) {
+    --_solid: var(--eun-color-critical-100, #aa0014);
+    --_onSolid: #fff;
+    --_tint: var(--eun-color-critical-30, #faf0f1);
+    --_accent: var(--eun-color-critical-100, #aa0014);
+  }
+  :host([severity="neutral"]) {
+    --_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);
+  }
+
+  :host([appearance="default"]),
+  :host(:not([appearance])) {
+    --_bg: var(--_bg-default);
+    --_fg: var(--_fg-default);
+    --_bd: transparent;
+  }
+  :host([appearance="fill"]) {
+    --_bg: var(--_bg-fill);
+    --_fg: var(--_fg-fill);
+    --_bd: transparent;
+  }
+  :host([appearance="outline"]) {
+    --_bg: var(--_bg-outline);
+    --_fg: var(--_fg-outline);
+    --_bd: var(--_bd-outline);
+  }
+  :host([appearance="flat"]) {
+    --_bg: var(--_bg-flat);
+    --_fg: var(--_fg-flat);
+    --_bd: transparent;
+  }
+`;

package/dist/components/content/tag/tag.d.ts

@@ -33,7 +33,7 @@ type TagSize = EunomiaCompactSize;
  * @slot [icon] - Replaces the icon entirely with any content, not just an icon element. Falls back to the resolved icon or severity glyph when empty
  * @prop { 'primary' | 'secondary' | 'light' | 'medium' | 'dark' } color - The color to apply to the tag
  * @prop { 'info' | 'success' | 'warning' | 'critical' | 'neutral' } severity - The severity of the tag, matching the nature of the information conveyed. Takes priority over color when both are set
- * @prop { 'default' | 'fill' | 'outline' | 'flat' } [appearance="default"] - The surface style of the tag. Flat always renders the same muted, low emphasis surface regardless of color or severity
+ * @prop { 'default' | 'fill' | 'outline' | 'flat' } [appearance="default"] - The surface style of the tag. Flat renders the same muted, low emphasis surface regardless of color or severity, except for the light and dark colors, which keep their own white or black
  * @prop { 's' | 'm' | 'l' } [size="m"] - The size of the tag
  * @prop {import('../icon/icon.type.js').EunomiaIconName} icon - The name of the custom icon to display. By default, the icon is set according to the tag's severity
  * @prop {boolean} [hideIcon=false] - Whether the icon is hidden from the tag. Takes priority over iconOnly
@@ -41,11 +41,14 @@ type TagSize = EunomiaCompactSize;
  * @prop {boolean} [iconOnly=false] - Shows only the icon, visually hiding the slotted label while keeping it available to assistive technology as the tag's accessible name. Requires icon or severity to be set
  * @attr {boolean} [icon-only=false] - Shows only the icon, visually hiding the slotted label while keeping it available to assistive technology as the tag's accessible name. Requires icon or severity to be set
  * @prop {boolean} [rounded=false] - Whether the tag has rounded corners
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark tag white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark tag white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
  * @prop {boolean} [uppercase=false] - Whether the tag label is uppercased with extra letter spacing
- * @cssprop [--tag-background-color] - Sets the background color of the tag
- * @cssprop [--tag-border-color] - Sets the border color of the tag, for the outline appearance
- * @cssprop [--tag-color] - Sets the text color of the tag
- * @cssprop [--tag-border-radius] - Sets the corner radius of the tag
+ * @cssprop [--tag-background-color] - Sets the background color of the tag, for every appearance, color and severity
+ * @cssprop [--tag-border-color] - Sets the border color of the tag, for every appearance, color and severity
+ * @cssprop [--tag-border-width] - Sets the border width of the tag, for every appearance. The border takes room out of the padding, so the tag keeps its size
+ * @cssprop [--tag-color] - Sets the text and icon color of the tag, for every appearance, color and severity
+ * @cssprop [--tag-border-radius] - Sets the corner radius of the tag, also over rounded
  * @cssprop [--tag-gap] - Sets the gap between the tag icon and the label
  * @element eun-tag
  */
@@ -57,7 +60,7 @@ export declare class EunomiaTag extends LitElement {
      * @internal
      * @readonly
      */
-    static readonly styles: import("lit").CSSResult;
+    static readonly styles: import("lit").CSSResult[];
     /**
      * The color of the tag.
      */
@@ -97,6 +100,13 @@ export declare class EunomiaTag extends LitElement {
      * @default false
      */
     rounded: boolean;
+    /**
+     * Keeps a `light` or `dark` tag white or black in every theme. Without
+     * it, they follow the grey scale, which flips with the active theme.
+     * Has no effect on the other colors or on `severity`.
+     * @default false
+     */
+    fixedColor: boolean;
     /**
      * Indicates whether the tag label should be uppercased with extra letter spacing.
      * @default false