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

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

package/dist/components/content/tag/tag.js

@@ -26,7 +26,7 @@ export const EunomiaTagTagName = "eun-tag";
  * @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
@@ -34,11 +34,14 @@ export const EunomiaTagTagName = "eun-tag";
  * @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
  */
@@ -71,6 +74,13 @@ let EunomiaTag = class EunomiaTag extends LitElement {
          * @default false
          */
         this.rounded = 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`.
+         * @default false
+         */
+        this.fixedColor = false;
         /**
          * Indicates whether the tag label should be uppercased with extra letter spacing.
          * @default false
@@ -174,8 +184,11 @@ __decorate([
     property({ type: Boolean, attribute: "icon-only", reflect: true })
 ], EunomiaTag.prototype, "iconOnly", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], EunomiaTag.prototype, "rounded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "fixed-color" })
+], EunomiaTag.prototype, "fixedColor", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaTag.prototype, "uppercase", void 0);

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

@@ -1 +1 @@
-export declare const tagStyles: import("lit").CSSResult;
+export declare const tagStyles: import("lit").CSSResult[];