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

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.d.ts

@@ -37,14 +37,16 @@ export declare const EunomiaCollapseTagName = "eun-collapse";
  * trigger, so it's never dropped into now-hidden content.
  *
  * @slot [default] - The panel's content, shown when expanded, combining with richText if both are set. Only the panel's own padding and text color apply to it, with no margins, typography, or list styles forced onto slotted content
+ * @slot [heading] - The trigger's heading as light DOM content, so it's part of the server-rendered HTML. Falls back to heading when empty. Keep it to text and inline phrasing, since it renders inside the trigger button
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
- * @slot [tag] - Replaces the trigger's tag entirely, for example with a custom colored tag. Falls back to the plain text tag when empty
+ * @slot [subheading] - The secondary text under the heading as light DOM content, so it's part of the server-rendered HTML. Falls back to subheading when empty
+ * @slot [tag] - The trigger's tag as light DOM content. Plain elements, such as a span of text, keep the default tag style, while a custom element, such as a colored eun-tag, replaces the tag entirely. Falls back to tag when empty
  * @slot [chevron] - Replaces the trailing indicator entirely with any content, not just an icon element. Falls back to chevronIcon when empty. Whatever ends up there still rotates while open, unless that rotation is set to zero
- * @prop {string} heading - The trigger's heading text
- * @prop {string} [subheading] - Optional secondary text shown under the heading
+ * @prop {string} heading - The trigger's heading text. Ignored once something is slotted into heading
+ * @prop {string} [subheading] - Optional secondary text shown under the heading. Ignored once something is slotted into subheading
  * @prop {2 | 3 | 4 | 5 | 6} [level] - Wraps the trigger in a heading element of this level, so screen reader users can jump between items, such as several FAQ entries, by heading. Matches the page's own outline, so it's opt-in rather than assumed
  * @prop {import('../icon/icon.type.js').EunomiaIconName} [icon] - An optional leading icon for the trigger. Ignored once the icon slot has content
- * @prop {string} [tag] - An optional short label rendered as a default tag in the trigger, such as a count or category. Use the tag slot instead for a custom colored badge
+ * @prop {string} [tag] - An optional short label rendered as a default tag in the trigger, such as a count or category. Ignored once something is slotted into tag
  * @prop {import('../icon/icon.type.js').EunomiaIconName} [chevronIcon='add'] - The trailing indicator icon. Ignored once the chevron slot has content. Pair a non-default icon with the chevron rotation custom property, since the default plus-sign-to-cross rotation doesn't suit every icon
  * @prop {string} [richText] - Lightweight formatted content rendered above the default slot. Supports simple lists, links, bold, and italic text
  * @prop {boolean} [open=false] - Whether the panel is currently expanded
@@ -82,11 +84,16 @@ export declare class EunomiaCollapse extends LitElement {
      */
     static readonly styles: import("lit").CSSResult[];
     /**
-     * The trigger's heading text.
+     * The trigger's heading text. Only rendered in the shadow root, so the
+     * `heading` slot is preferred wherever the text must be in the server
+     * HTML (an indexed FAQ, for example) ; ignored once that slot is filled.
      */
     heading: string;
     /**
-     * Optional secondary text shown under the heading.
+     * Optional secondary text shown under the heading. Only rendered in the
+     * shadow root, like {@link heading}, so the `subheading` slot is
+     * preferred wherever the text must be in the server HTML ; ignored once
+     * that slot is filled.
      */
     subheading?: string;
     /**
@@ -194,12 +201,12 @@ export declare class EunomiaCollapse extends LitElement {
      */
     private readonly iconSlotEls;
     /**
-     * Elements assigned to the `tag` slot, if any ; queried live so
-     * {@link render} can decide whether to fall back to the `tag` prop.
+     * Elements assigned to the `subheading` slot, if any ; queried live so
+     * {@link render} can decide whether to render the subheading line at all.
      * @internal
      * @readonly
      */
-    private readonly tagSlotEls;
+    private readonly subheadingSlotEls;
     /**
      * Elements assigned to the `chevron` slot, if any ; queried live so
      * {@link render} can skip instantiating the fallback `eun-icon` (and its
@@ -212,8 +219,9 @@ export declare class EunomiaCollapse extends LitElement {
     private readonly chevronSlotEls;
     /**
      * Re-renders when a named slot's assigned content changes, so the
-     * `icon`/`tag`/`chevron` prop fallback correctly appears/disappears as
-     * content is slotted in or removed after the initial render.
+     * `icon`/`subheading`/`tag`/`chevron` prop fallback correctly
+     * appears/disappears as content is slotted in or removed after the
+     * initial render.
      * @private
      */
     private handleSlotChange;
@@ -332,6 +340,16 @@ export declare class EunomiaCollapse extends LitElement {
      * @private
      */
     private renderHeadingWrapper;
+    /**
+     * Renders the `tag` slot. Plain elements slotted into it (a span of
+     * text, typically) are wrapped in the default tag, so server-rendered
+     * text keeps the tag style ; a custom element (a colored `eun-tag`, a
+     * badge, ...) replaces the tag entirely instead. Read from the light DOM
+     * rather than the slot's assigned elements, so the first render already
+     * picks the right shape before the slot exists.
+     * @private
+     */
+    private renderTag;
     render(): TemplateResult;
 }
 declare global {

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

@@ -49,14 +49,16 @@ export const EunomiaCollapseTagName = "eun-collapse";
  * trigger, so it's never dropped into now-hidden content.
  *
  * @slot [default] - The panel's content, shown when expanded, combining with richText if both are set. Only the panel's own padding and text color apply to it, with no margins, typography, or list styles forced onto slotted content
+ * @slot [heading] - The trigger's heading as light DOM content, so it's part of the server-rendered HTML. Falls back to heading when empty. Keep it to text and inline phrasing, since it renders inside the trigger button
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
- * @slot [tag] - Replaces the trigger's tag entirely, for example with a custom colored tag. Falls back to the plain text tag when empty
+ * @slot [subheading] - The secondary text under the heading as light DOM content, so it's part of the server-rendered HTML. Falls back to subheading when empty
+ * @slot [tag] - The trigger's tag as light DOM content. Plain elements, such as a span of text, keep the default tag style, while a custom element, such as a colored eun-tag, replaces the tag entirely. Falls back to tag when empty
  * @slot [chevron] - Replaces the trailing indicator entirely with any content, not just an icon element. Falls back to chevronIcon when empty. Whatever ends up there still rotates while open, unless that rotation is set to zero
- * @prop {string} heading - The trigger's heading text
- * @prop {string} [subheading] - Optional secondary text shown under the heading
+ * @prop {string} heading - The trigger's heading text. Ignored once something is slotted into heading
+ * @prop {string} [subheading] - Optional secondary text shown under the heading. Ignored once something is slotted into subheading
  * @prop {2 | 3 | 4 | 5 | 6} [level] - Wraps the trigger in a heading element of this level, so screen reader users can jump between items, such as several FAQ entries, by heading. Matches the page's own outline, so it's opt-in rather than assumed
  * @prop {import('../icon/icon.type.js').EunomiaIconName} [icon] - An optional leading icon for the trigger. Ignored once the icon slot has content
- * @prop {string} [tag] - An optional short label rendered as a default tag in the trigger, such as a count or category. Use the tag slot instead for a custom colored badge
+ * @prop {string} [tag] - An optional short label rendered as a default tag in the trigger, such as a count or category. Ignored once something is slotted into tag
  * @prop {import('../icon/icon.type.js').EunomiaIconName} [chevronIcon='add'] - The trailing indicator icon. Ignored once the chevron slot has content. Pair a non-default icon with the chevron rotation custom property, since the default plus-sign-to-cross rotation doesn't suit every icon
  * @prop {string} [richText] - Lightweight formatted content rendered above the default slot. Supports simple lists, links, bold, and italic text
  * @prop {boolean} [open=false] - Whether the panel is currently expanded
@@ -143,8 +145,9 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
         this.openedViaFocus = false;
         /**
          * Re-renders when a named slot's assigned content changes, so the
-         * `icon`/`tag`/`chevron` prop fallback correctly appears/disappears as
-         * content is slotted in or removed after the initial render.
+         * `icon`/`subheading`/`tag`/`chevron` prop fallback correctly
+         * appears/disappears as content is slotted in or removed after the
+         * initial render.
          * @private
          */
         this.handleSlotChange = () => {
@@ -364,6 +367,35 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
                 return trigger;
         }
     }
+    /**
+     * Renders the `tag` slot. Plain elements slotted into it (a span of
+     * text, typically) are wrapped in the default tag, so server-rendered
+     * text keeps the tag style ; a custom element (a colored `eun-tag`, a
+     * badge, ...) replaces the tag entirely instead. Read from the light DOM
+     * rather than the slot's assigned elements, so the first render already
+     * picks the right shape before the slot exists.
+     * @private
+     */
+    renderTag() {
+        const slotted = [
+            ...this.querySelectorAll(':scope > [slot="tag"]'),
+        ];
+        const replaced = slotted.some((el) => el.localName.includes("-"));
+        const slot = html `<slot name="tag" @slotchange=${this.handleSlotChange}
+      >${this.tag}</slot
+    >`;
+        if (replaced) {
+            return slot;
+        }
+        if (!this.tag && !slotted.length) {
+            return html `<slot
+        name="tag"
+        class="hidden"
+        @slotchange=${this.handleSlotChange}
+      ></slot>`;
+        }
+        return html `<eun-tag color="primary" size="s" rounded>${slot}</eun-tag>`;
+    }
     render() {
         const trigger = html `
       <button
@@ -388,24 +420,22 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
             : nothing}
           </slot>
           <span id="heading-group">
-            <span id="heading">${this.heading}</span>
-            ${this.subheading
-            ? html `<span id="subheading">${this.subheading}</span>`
-            : nothing}
+            <span id="heading"
+              ><slot name="heading">${this.heading}</slot></span
+            >
+            <span
+              id="subheading"
+              class=${classMap({
+            hidden: !this.subheading && !this.subheadingSlotEls.length,
+        })}
+              ><slot name="subheading" @slotchange=${this.handleSlotChange}
+                >${this.subheading}</slot
+              ></span
+            >
           </span>
         </span>
         <span id="actions">
-          <slot
-            name="tag"
-            class=${classMap({ hidden: !this.tag && !this.tagSlotEls.length })}
-            @slotchange=${this.handleSlotChange}
-          >
-            ${this.tag
-            ? html `<eun-tag color="primary" size="s" rounded
-                  >${this.tag}</eun-tag
-                >`
-            : nothing}
-          </slot>
+          ${this.renderTag()}
           <span id="chevron">
             <slot name="chevron" @slotchange=${this.handleSlotChange}>
               ${this.chevronSlotEls.length
@@ -497,8 +527,8 @@ __decorate([
     queryAssignedElements({ slot: "icon" })
 ], EunomiaCollapse.prototype, "iconSlotEls", void 0);
 __decorate([
-    queryAssignedElements({ slot: "tag" })
-], EunomiaCollapse.prototype, "tagSlotEls", void 0);
+    queryAssignedElements({ slot: "subheading" })
+], EunomiaCollapse.prototype, "subheadingSlotEls", void 0);
 __decorate([
     queryAssignedElements({ slot: "chevron" })
 ], EunomiaCollapse.prototype, "chevronSlotEls", void 0);

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,13 +138,26 @@ 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);
+  }
+  #heading ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
   }
   #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);
   }
+  #subheading.hidden {
+    display: none;
+  }
+  #subheading ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+  }
   #actions {
     display: flex;
     align-items: center;
@@ -162,6 +175,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 +185,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.d.ts

@@ -31,6 +31,7 @@ export declare function setIconBaseUrl(url: string): void;
  * @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
  */
 export declare class EunomiaIcon extends LitElement {
@@ -60,9 +61,18 @@ export declare 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: string | undefined);
+    /**
+     * The CSS length {@link size} resolves to, or `undefined` when unset.
+     * @private
+     */
+    private get cssSize();
     /**
      * Gets the current size value set for the icon.
      */
@@ -149,7 +159,7 @@ export declare class EunomiaIcon extends LitElement {
      * Renders the icon component. If no `name` is set, renders nothing.
      * If SVG markup is available, it is rendered using `unsafeSVG`.
      */
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {