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

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

@@ -20,8 +20,8 @@ const base = css `
     box-sizing: border-box;
     height: 100%;
     overflow: hidden;
-    border-radius: var(--card-border-radius, var(--eun-borderRadius-m, 8px));
-    border: var(--card-border-width, var(--eun-borderWidth-s, 1px)) solid
+    border-radius: var(--card-border-radius, var(--eun-border-radius-m, 8px));
+    border: var(--card-border-width, var(--eun-border-width-s, 1px)) solid
       var(--card-border-color, var(--eun-border-color, #dee0e7));
     background: var(--card-background, var(--eun-surface-color, #ffffff));
     box-shadow: var(--card-shadow, none);
@@ -36,12 +36,19 @@ const base = css `
     );
   }
 
+  :host {
+    --_hoverBorderDefault: var(
+      --card-border-color,
+      var(--eun-border-color, #dee0e7)
+    );
+  }
+  :host([href]) {
+    --_hoverBorderDefault: var(--eun-color-primary-500, #3d6fff);
+  }
+
   #card:hover,
   #card:focus-visible {
-    border-color: var(
-      --card-hover-border-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
+    border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
     background: var(
       --card-hover-background,
       var(--card-background, var(--eun-surface-color, #ffffff))
@@ -85,14 +92,14 @@ const base = css `
   }
 
   ::slotted([slot="title"]) {
-    font-weight: var(--eun-fontWeight-l, 700);
-    font-size: var(--image-card-title-size, var(--eun-fontSize-m, 16px));
+    font-weight: var(--eun-font-weight-l, 700);
+    font-size: var(--image-card-title-size, var(--eun-font-size-m, 16px));
     color: var(--eun-text-color, #071621);
   }
 
   ::slotted([slot="description"]) {
-    font-weight: var(--eun-fontWeight-s, 300);
-    font-size: var(--image-card-description-size, var(--eun-fontSize-s, 14px));
+    font-weight: var(--eun-font-weight-s, 300);
+    font-size: var(--image-card-description-size, var(--eun-font-size-s, 14px));
     color: var(--eun-text-secondary, #484e61);
   }
 

package/dist/components/content/card/sliding-card.styles.js

@@ -63,7 +63,7 @@ const base = css `
     position: absolute;
     border-radius: var(
       --sliding-card-border-radius,
-      var(--eun-borderRadius-l, 16px)
+      var(--eun-border-radius-l, 16px)
     );
     padding: var(--sliding-card-padding, var(--eun-space-l, 32px));
     overflow: hidden;
@@ -115,7 +115,8 @@ const base = css `
       --sliding-card-front-background,
       var(--eun-surface-color, #ffffff)
     );
-    border: var(--eun-borderWidth-s, 1px) solid var(--eun-border-color, #dee0e7);
+    border: var(--eun-border-width-s, 1px) solid
+      var(--eun-border-color, #dee0e7);
     z-index: 2;
   }
 

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

@@ -52,7 +52,9 @@ declare const EunomiaChip_base: import("../../../utils/constructor.type.js").Con
  * @fires {CloseEvent} eunclose - Fired when the delete button is activated. The chip has no visibility state of its own, so removing or hiding it in response is the consumer's own responsibility
  * @prop {'primary' | 'secondary' | 'light' | 'medium' | 'dark'} [color='medium'] - The color to apply to the chip
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the chip, 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 chip. 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 chip. 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 {boolean} [fixedColor=false] - Keeps a light or dark chip 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 chip 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 {'s' | 'm' | 'l'} [size='m'] - The size of the chip
  * @prop {EunomiaIconName} icon - The leading icon to display. Ignored once an avatar image or initials are set. When severity is set and icon isn't, the icon is set according to the chip's severity
  * @prop {boolean} [hideIcon=false] - Whether the leading icon is hidden from the chip, once resolved. The avatar and initials are unaffected
@@ -71,13 +73,13 @@ declare const EunomiaChip_base: import("../../../utils/constructor.type.js").Con
  * @prop {string} [ariaLabelRemove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
  * @attr {string} [aria-label-remove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
  * @prop {string} [locale] - The locale used to resolve the default accessible label of the delete button. Defaults to the runtime's own
- * @cssprop [--chip-background-color] - Sets the background color of the chip
- * @cssprop [--chip-border-color] - Sets the border color of the chip, for the outline appearance
- * @cssprop [--chip-border-width] - Sets the border width of the chip, for the outline appearance
+ * @cssprop [--chip-background-color] - Sets the background color of the chip, for every appearance, color and severity
+ * @cssprop [--chip-border-color] - Sets the border color of the chip, for every appearance, color and severity
+ * @cssprop [--chip-border-width] - Sets the border width of the chip, for every appearance. The border takes room out of the padding, so the chip keeps its size
  * @cssprop [--chip-box-shadow] - Sets a box shadow on the chip, none by default
- * @cssprop [--chip-color] - Sets the text color of the chip
+ * @cssprop [--chip-color] - Sets the text color of the chip, for every appearance, color and severity
  * @cssprop [--chip-icon-color] - Sets the color of the leading icon only, not the avatar, initials, or delete button icon. Defaults to matching the chip's own text color
- * @cssprop [--chip-border-radius] - Sets the corner radius of the chip when rounded is unset
+ * @cssprop [--chip-border-radius] - Sets the corner radius of the chip, also over rounded
  * @cssprop [--chip-gap] - Sets the gap between the chip's leading visual, label, and delete button
  * @cssprop [--chip-avatar-background] - Sets the background color of the initials badge
  * @cssprop [--chip-avatar-color] - Sets the text color of the initials badge
@@ -93,11 +95,18 @@ export declare class EunomiaChip extends EunomiaChip_base {
      * @internal
      * @readonly
      */
-    static readonly styles: import("lit").CSSResult;
+    static readonly styles: import("lit").CSSResult[];
     /**
      * The color of the chip.
      */
     color: EunomiaChipColor;
+    /**
+     * Keeps a `light` or `dark` chip 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;
     /**
      * The severity of the chip to display.
      */

package/dist/components/content/chip/chip.js

@@ -56,7 +56,9 @@ const DELETE_ICON_SIZES = {
  * @fires {CloseEvent} eunclose - Fired when the delete button is activated. The chip has no visibility state of its own, so removing or hiding it in response is the consumer's own responsibility
  * @prop {'primary' | 'secondary' | 'light' | 'medium' | 'dark'} [color='medium'] - The color to apply to the chip
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the chip, 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 chip. 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 chip. 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 {boolean} [fixedColor=false] - Keeps a light or dark chip 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 chip 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 {'s' | 'm' | 'l'} [size='m'] - The size of the chip
  * @prop {EunomiaIconName} icon - The leading icon to display. Ignored once an avatar image or initials are set. When severity is set and icon isn't, the icon is set according to the chip's severity
  * @prop {boolean} [hideIcon=false] - Whether the leading icon is hidden from the chip, once resolved. The avatar and initials are unaffected
@@ -75,13 +77,13 @@ const DELETE_ICON_SIZES = {
  * @prop {string} [ariaLabelRemove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
  * @attr {string} [aria-label-remove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
  * @prop {string} [locale] - The locale used to resolve the default accessible label of the delete button. Defaults to the runtime's own
- * @cssprop [--chip-background-color] - Sets the background color of the chip
- * @cssprop [--chip-border-color] - Sets the border color of the chip, for the outline appearance
- * @cssprop [--chip-border-width] - Sets the border width of the chip, for the outline appearance
+ * @cssprop [--chip-background-color] - Sets the background color of the chip, for every appearance, color and severity
+ * @cssprop [--chip-border-color] - Sets the border color of the chip, for every appearance, color and severity
+ * @cssprop [--chip-border-width] - Sets the border width of the chip, for every appearance. The border takes room out of the padding, so the chip keeps its size
  * @cssprop [--chip-box-shadow] - Sets a box shadow on the chip, none by default
- * @cssprop [--chip-color] - Sets the text color of the chip
+ * @cssprop [--chip-color] - Sets the text color of the chip, for every appearance, color and severity
  * @cssprop [--chip-icon-color] - Sets the color of the leading icon only, not the avatar, initials, or delete button icon. Defaults to matching the chip's own text color
- * @cssprop [--chip-border-radius] - Sets the corner radius of the chip when rounded is unset
+ * @cssprop [--chip-border-radius] - Sets the corner radius of the chip, also over rounded
  * @cssprop [--chip-gap] - Sets the gap between the chip's leading visual, label, and delete button
  * @cssprop [--chip-avatar-background] - Sets the background color of the initials badge
  * @cssprop [--chip-avatar-color] - Sets the text color of the initials badge
@@ -96,6 +98,13 @@ let EunomiaChip = class EunomiaChip extends LocalizableMixin(LitElement) {
          * The color of the chip.
          */
         this.color = "medium";
+        /**
+         * Keeps a `light` or `dark` chip 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;
         /**
          * The surface treatment of the chip.
          * @default default
@@ -323,6 +332,9 @@ EunomiaChip.styles = chipStyles;
 __decorate([
     property({ reflect: true })
 ], EunomiaChip.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "fixed-color" })
+], EunomiaChip.prototype, "fixedColor", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaChip.prototype, "severity", void 0);

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

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

package/dist/components/content/chip/chip.styles.js

@@ -1,28 +1,26 @@
 import { css } from "lit";
+import { toneSurfaceStyles } from "../shared-styles/tone-surface.styles.js";
 /**
  * Base style for chip.
  *
  * Custom css variables:
- * [--chip-background-color] - Set a custom color to the chip background
- * [--chip-border-color] - Set a custom color to the chip borders in case of the outline appearance
- * [--chip-border-width] - Set a custom border width to the chip borders in case of the outline appearance
+ * [--chip-background-color] - Set a custom background color, for every appearance
+ * [--chip-border-color] - Set a custom border color, for every appearance
+ * [--chip-border-width] - Set a custom border width, for every appearance. Defaults to 1px, only drawn (in a color) by outline, or when --chip-border-color is set
  * [--chip-box-shadow] - Set a custom box shadow to the chip, none by default
- * [--chip-color] - Set a custom color to the chip textual content
+ * [--chip-color] - Set a custom color to the chip textual content, for every appearance
  * [--chip-icon-color] - Set a custom color for the leading icon only (not the avatar/initials, not the delete button's icon). Defaults to the chip's own text color, so it only needs setting to make the icon diverge from the label
- * [--chip-border-radius] - Set a custom border radius to the chip when `rounded` is unset
+ * [--chip-border-radius] - Set a custom border radius to the chip, also over `rounded`
  * [--chip-gap] - Set a custom gap between the chip's leading visual, label, and delete button
  * [--chip-avatar-background] - Set a custom background color for the initials badge
  * [--chip-avatar-color] - Set a custom text color for the initials badge
  * [--chip-avatar-size] - Set a custom diameter for the leading avatar/initials/image
  * [--chip-delete-focus-outline-color] - Set a custom focus outline color for the delete button
  *
- * Unlike `eun-tag`, every color branch below reads its `--_background`/
- * `--_color`/`--_border-color` through the matching `--chip-*` custom
- * property as an override-with-fallback, rather than only honoring it while
- * `color` is unset. That's deliberate : `color` always carries a value (it
- * defaults to `medium` and reflects), so a branch that only checked for
- * `color` being absent could never actually be reached by a consumer who
- * left it at its default — see "Custom colors" in the Examples tab.
+ * The palette and appearance resolution is shared with `eun-tag` (see
+ * {@link toneSurfaceStyles}) ; this sheet only reads its `--_bg`, `--_fg` and
+ * `--_bd` behind the `--chip-*` custom properties, applied last on the chip
+ * itself, so they win over any palette/appearance combination.
  */
 const base = css `
   :host {
@@ -33,187 +31,15 @@ const base = css `
     vertical-align: middle;
   }
 
-  :host([color="primary"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-primary-transparent, #3d6fff33)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-    --_color: var(--chip-color, var(--eun-color-primary-500, #3d6fff));
-  }
-  :host([color="secondary"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-secondary-transparent, #e5a03033)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-secondary-500, #e5a030)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-secondary-500, #e5a030)
-    );
-    --_color: var(--chip-color, var(--eun-color-secondary-500, #e5a030));
-  }
-  :host([color="light"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-0, #ffffff)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-0, #ffffff)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-0, #ffffff)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-600, #666e8a));
-  }
-  :host([color="light"][appearance="outline"]:not([severity])) {
-    --_color: var(--chip-color, var(--eun-color-grey-600, #666e8a));
-  }
-  :host([color="medium"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      color-mix(in srgb, var(--eun-color-grey-700, #484e61) 20%, transparent)
-    );
-    --_backgroundFilled: var(--_background);
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-700, #484e61)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-900, #000000));
-  }
-  :host([color="dark"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-800, #071621)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-800, #071621)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-800, #071621)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-0, #ffffff));
-  }
-  :host([color="dark"][appearance="outline"]:not([severity])) {
-    --_color: var(--chip-color, var(--eun-color-grey-800, #071621));
-  }
-
-  :host([severity="info"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-info-30, #f0f7fa)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-info-100, #097faf)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-info-100, #097faf)
-    );
-    --_color: var(--chip-color, var(--eun-color-info-100, #097faf));
-  }
-  :host([severity="success"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-success-30, #f1f9f4)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-success-100, #1a9948)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-success-100, #1a9948)
-    );
-    --_color: var(--chip-color, var(--eun-color-success-100, #1a9948));
-  }
-  :host([severity="warning"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-warning-30, #fcf5f0)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-warning-100, #c85207)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-warning-100, #c85207)
-    );
-    --_color: var(--chip-color, var(--eun-color-warning-100, #c85207));
-  }
-  :host([severity="critical"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-critical-30, #faf0f1)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-critical-100, #aa0014)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-critical-100, #aa0014)
-    );
-    --_color: var(--chip-color, var(--eun-color-critical-100, #aa0014));
-  }
-  :host([severity="neutral"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-200, #ecedf0)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-700, #484e61)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-700, #484e61)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-700, #484e61));
-  }
-
-  :host([appearance="default"]) #chip {
-    background: var(--_background);
-  }
-
-  :host([appearance="fill"]) #chip {
-    --_color: var(--chip-color, #fff);
-    background: var(--_backgroundFilled);
-    color: var(--_color);
-  }
-
-  :host([appearance="outline"]) #chip {
-    background: var(--eun-surface-color, #ffffff);
-    border: var(--chip-border-width, var(--eun-borderWidth-s, 1px)) solid
-      var(--_border-color);
-  }
-
-  :host([appearance="flat"]) #chip {
-    --_color: var(--chip-color, var(--eun-text-secondary, #484e61));
-    background: var(--eun-content-hover, #edeff0);
-    color: var(--_color);
+  :host {
+    /* Unlike a tag's transparent outline, a chip's sits on the surface. */
+    --_bg-outline: var(--eun-surface-color, #ffffff);
   }
 
   :host([size="s"]) {
     --_height: 26px;
     --_paddingInline: 4px;
-    --_fontSize: var(--eun-fontSize-xs, 12px);
+    --_fontSize: var(--eun-font-size-xs, 12px);
     --_gap: 4px;
     --_avatarFontSize: 10px;
     --_avatarInsetSize: 16px;
@@ -222,7 +48,7 @@ const base = css `
   :host(:not([size])) {
     --_height: 30px;
     --_paddingInline: 6px;
-    --_fontSize: var(--eun-fontSize-s, 14px);
+    --_fontSize: var(--eun-font-size-s, 14px);
     --_gap: 6px;
     --_avatarFontSize: 11px;
     --_avatarInsetSize: 20px;
@@ -230,17 +56,17 @@ const base = css `
   :host([size="l"]) {
     --_height: 38px;
     --_paddingInline: 6px;
-    --_fontSize: var(--eun-fontSize-m, 16px);
+    --_fontSize: var(--eun-font-size-m, 16px);
     --_gap: 8px;
     --_avatarFontSize: 12px;
     --_avatarInsetSize: 24px;
   }
 
-  :host([rounded]) {
-    --_borderRadius: var(--eun-borderRadius-xl, 999px);
+  :host {
+    --_radius: var(--eun-border-radius-s, 5px);
   }
-  :host(:not([rounded])) {
-    --_borderRadius: var(--chip-border-radius, var(--eun-borderRadius-s, 5px));
+  :host([rounded]) {
+    --_radius: var(--eun-border-radius-xl, 999px);
   }
 
   #chip {
@@ -249,20 +75,30 @@ const base = css `
     box-sizing: border-box;
     max-width: 100%;
     height: var(--_height);
-    border-radius: var(--_borderRadius);
-    padding-inline-start: var(--_paddingInline);
-    padding-inline-end: var(--_paddingInline);
+    --_borderWidth: var(--chip-border-width, var(--eun-border-width-s, 1px));
+    background: var(--chip-background-color, var(--_bg));
+    /* Every appearance carries the same border box (transparent unless
+       drawn), taken out of the padding, so switching appearance or adding a
+       --chip-border-* never changes the chip's size. */
+    border: var(--_borderWidth) solid var(--chip-border-color, var(--_bd));
+    border-radius: var(--chip-border-radius, var(--_radius));
+    padding-inline-start: max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
+    padding-inline-end: max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
     font-size: var(--_fontSize);
     gap: var(--chip-gap, var(--_gap));
-    color: var(--_color);
-    font-weight: var(--eun-fontWeight-m, 500);
+    color: var(--chip-color, var(--_fg));
+    font-weight: var(--eun-font-weight-m, 500);
     box-shadow: var(--chip-box-shadow, none);
-    --_leadingIconColor: var(--chip-icon-color, var(--_color));
+    --_textColor: var(--chip-color, var(--_fg));
+    --_leadingIconColor: var(--chip-icon-color, var(--_textColor));
   }
 
   #chip[data-leading="icon"],
   #chip[data-leading="none"] {
-    padding-inline-start: calc(var(--_paddingInline) + 4px);
+    padding-inline-start: max(
+      0px,
+      calc(var(--_paddingInline) + 4px - var(--_borderWidth))
+    );
   }
 
   #chip[data-leading="none"] slot[name="icon"] {
@@ -288,12 +124,12 @@ const base = css `
     width: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
     height: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
     font-size: var(--_avatarFontSize);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     line-height: 1;
-    color: var(--chip-avatar-color, #fff);
+    color: var(--chip-avatar-color, var(--_onSolid, #fff));
     background: var(
       --chip-avatar-background,
-      var(--_backgroundFilled, var(--eun-color-grey-500, #8d93aa))
+      var(--_solid, var(--eun-color-grey-500, #8d93aa))
     );
     overflow: hidden;
   }
@@ -303,7 +139,7 @@ const base = css `
   }
 
   #avatar[data-shape="square"] {
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
 
   #avatar img {
@@ -320,7 +156,7 @@ const base = css `
 
   #delete {
     flex-shrink: 0;
-    --button-text: var(--_color);
+    --button-text: var(--_textColor);
     --button-focus-outline: var(
       --chip-delete-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -331,4 +167,4 @@ const base = css `
     opacity: 0.6;
   }
 `;
-export const chipStyles = base;
+export const chipStyles = [toneSurfaceStyles, base];

package/dist/components/content/collapse/collapse.styles.js

@@ -35,7 +35,7 @@ export const collapseStyles = css `
   #wrapper {
     --_background: var(
       --collapse-background,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-surface-sunken, #f7f8fa)
     );
     --_backgroundHover: var(--collapse-background-hover, var(--_background));
     --_backgroundOpen: var(--collapse-background-open, var(--_background));
@@ -58,7 +58,7 @@ export const collapseStyles = css `
     );
     --_contentFontSize: var(
       --collapse-content-font-size,
-      var(--eun-fontSize-s, 14px)
+      var(--eun-font-size-s, 14px)
     );
     --_richTextLinkColor: var(
       --collapse-rich-text-link-color,
@@ -70,7 +70,7 @@ export const collapseStyles = css `
     );
     --_borderRadius: var(
       --collapse-border-radius,
-      var(--eun-borderRadius-l, 16px)
+      var(--eun-border-radius-l, 16px)
     );
     --_padding: var(--collapse-padding, var(--eun-space-m, 16px));
     --_transitionDuration: var(--collapse-transition-duration, 0.3s);
@@ -87,8 +87,8 @@ export const collapseStyles = css `
     border-radius: var(--_borderRadius);
     color: var(--_color);
     font: inherit;
-    font-size: var(--eun-fontSize-m, 16px);
-    font-weight: var(--eun-fontWeight-l);
+    font-size: var(--eun-font-size-m, 16px);
+    font-weight: var(--eun-font-weight-l);
     text-align: left;
     cursor: pointer;
     outline: 2px solid transparent;
@@ -138,11 +138,11 @@ export const collapseStyles = css `
   #heading {
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   #subheading {
-    font-size: var(--eun-fontSize-xs, 14px);
-    font-weight: var(--eun-fontWeight-m);
+    font-size: var(--eun-font-size-xs, 14px);
+    font-weight: var(--eun-font-weight-m);
     color: var(--_subheadingColor);
   }
   #actions {
@@ -162,6 +162,7 @@ export const collapseStyles = css `
     background: var(--_background);
     border-bottom-left-radius: var(--_borderRadius);
     border-bottom-right-radius: var(--_borderRadius);
+    overflow-anchor: none;
     transition:
       grid-template-rows var(--_transitionDuration) ease-out,
       margin-top var(--_transitionDuration) ease-out,
@@ -171,7 +172,7 @@ export const collapseStyles = css `
     overflow: hidden;
   }
   #panel-content {
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(--eun-color-grey-300, #dee0e7);
     padding: var(--_padding);
     color: var(--_contentColor);

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;