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

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

@@ -4,21 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+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 __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 _EunomiaIcon_size;
 import { html, LitElement, nothing } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { iconStyles } from "./icon.style.js";
 /**
  * Tag name of the icon component.
@@ -48,6 +49,14 @@ let iconBaseUrl;
  * that already tried to load before the base URL was set.
  */
 const connectedIcons = new Set();
+/**
+ * SVG markup already requested, keyed by URL, so every icon sharing a name
+ * (the same glyph repeated down a list, or rendered again after a
+ * re-mount) shares one request and renders from memory afterwards instead
+ * of waiting on its own round trip. A failed request is dropped, so a
+ * later attempt (after `setIconBaseUrl`, say) retries it.
+ */
+const svgCache = new Map();
 /**
  * Sets the URL the icon SVGs are served from, laid out as
  * `<baseUrl>/<shape>/<name>.svg` (the `icons` folder shipped next to this
@@ -78,6 +87,7 @@ export function setIconBaseUrl(url) {
  * @cssprop [--icon-background] - Sets a background color behind the icon, for example for a hover highlight. Transparent by default
  * @cssprop [--icon-padding] - Sets the space between the icon and its background box. Zero by default
  * @cssprop [--icon-border-radius] - Sets the corner radius of the background box
+ * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
  * @element eun-icon
  */
 let EunomiaIcon = class EunomiaIcon extends LitElement {
@@ -92,24 +102,33 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
     /**
      * Sets the size of the icon. Accepts any valid CSS size unit.
      * - If size ends with `%`, it will be converted to `rem`.
-     * - If no size is provided, defaults to `1rem`.
+     * - If no size is provided, falls back to `--icon-size`, then `1rem`.
+     *
+     * Applied on the internal wrapper (see {@link cssSize}) rather than as an
+     * inline style on the host, which an SSR framework would report as a
+     * hydration mismatch.
      */
     set size(size) {
+        const previous = __classPrivateFieldGet(this, _EunomiaIcon_size, "f");
         __classPrivateFieldSet(this, _EunomiaIcon_size, size, "f");
-        let cssSize;
+        this.requestUpdate("size", previous);
+    }
+    /**
+     * The CSS length {@link size} resolves to, or `undefined` when unset.
+     * @private
+     */
+    get cssSize() {
+        const size = __classPrivateFieldGet(this, _EunomiaIcon_size, "f");
         if (!size) {
-            cssSize = "1rem";
-        }
-        else if (/%$/.test(size)) {
-            cssSize = `${parseFloat(size) / 100}rem`;
+            return undefined;
         }
-        else if (/^\d+(\.\d+)?$/.test(size)) {
-            cssSize = `${size}px`;
+        if (/%$/.test(size)) {
+            return `${parseFloat(size) / 100}rem`;
         }
-        else {
-            cssSize = size;
+        if (/^\d+(\.\d+)?$/.test(size)) {
+            return `${size}px`;
         }
-        this.style.setProperty("--_size", cssSize);
+        return size;
     }
     /**
      * Gets the current size value set for the icon.
@@ -215,11 +234,18 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
             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}`);
+        let svg = svgCache.get(url);
+        if (!svg) {
+            svg = fetch(url).then((response) => {
+                if (!response.ok) {
+                    throw new Error(`Icon not found: ${url}`);
+                }
+                return response.text();
+            });
+            svgCache.set(url, svg);
+            svg.catch(() => svgCache.delete(url));
         }
-        return response.text();
+        return svg;
     }
     /**
      * Determines the shape to render : the explicit `shape` property always
@@ -273,7 +299,11 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
         if (!this.name) {
             return nothing;
         }
-        return html `<span part="wrapper" aria-hidden="true">
+        return html `<span
+      part="wrapper"
+      aria-hidden="true"
+      style=${styleMap({ "--_size": this.cssSize })}
+    >
       ${this.svgMarkup ? unsafeSVG(this.svgMarkup) : nothing}
     </span>`;
     }
@@ -296,7 +326,7 @@ __decorate([
     state()
 ], EunomiaIcon.prototype, "svgMarkup", void 0);
 __decorate([
-    property({ hasChanged: () => false })
+    property({ attribute: "size" })
 ], EunomiaIcon.prototype, "size", null);
 EunomiaIcon = __decorate([
     customElement(EunomiaIconTagName)

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

@@ -8,5 +8,7 @@
  * --icon-padding : space between the icon and its background box. Zero by
  *   default, so the background hugs the icon exactly unless widened.
  * --icon-border-radius : corner radius of the background box.
+ * --icon-transition : transition applied to the icon's color, background,
+ *   and size changes. 0.2s by default.
  */
 export declare const iconStyles: import("lit").CSSResult;

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

@@ -9,6 +9,8 @@ import { css } from "lit";
  * --icon-padding : space between the icon and its background box. Zero by
  *   default, so the background hugs the icon exactly unless widened.
  * --icon-border-radius : corner radius of the background box.
+ * --icon-transition : transition applied to the icon's color, background,
+ *   and size changes. 0.2s by default.
  */
 export const iconStyles = css `
   :host {
@@ -25,11 +27,12 @@ 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;
+    white-space: normal;
     display: inline-block;
     user-select: none;
-    transition: 0.2s;
+    transition: var(--icon-transition, 0.2s);
   }
   svg {
     width: 100%;

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/card-link.styles.js

@@ -28,6 +28,7 @@ const base = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    pointer-events: none;
     width: var(--card-link-badge-size, 18px);
     height: var(--card-link-badge-size, 18px);
     border-radius: 50%;

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