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

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

@@ -1,13 +1,13 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
-import { EunomiaActionVariant, EunomiaCompactSize } from "../../../types/variant.type.js";
+import { EunomiaActionColor, EunomiaCompactSize } from "../../../types/variant.type.js";
 /**
  * Tag name of the badge component.
  */
 export declare const EunomiaBadgeTagName = "eun-badge";
 /**
- * All available badge variants.
+ * All available badge colors.
  */
-export type EunomiaBadgeVariant = EunomiaActionVariant;
+export type EunomiaBadgeColor = EunomiaActionColor;
 /**
  * All available badge sizes.
  */
@@ -23,7 +23,7 @@ export type EunomiaBadgeSize = EunomiaCompactSize;
  *
  * @slot [default] - The badge's content, typically a short number. Left empty, the badge renders as a plain dot
  * @csspart badge - The badge's own box, carrying its size, padding, and background. Exposed for effects the badge's CSS custom properties don't cover
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='critical'] - The color variant to apply
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='critical'] - The color to apply
  * @prop {'s' | 'm' | 'l'} [size='m'] - The size of the badge
  * @prop {string} label - An optional accessible name. When set, the badge announces this text instead of staying hidden from assistive technology
  * @cssprop [--badge-background] - Sets the background color of the badge
@@ -43,10 +43,10 @@ export declare class EunomiaBadge extends LitElement {
      */
     static readonly styles: import("lit").CSSResult;
     /**
-     * The color variant to apply.
+     * The color to apply.
      * @default critical
      */
-    variant: EunomiaBadgeVariant;
+    color: EunomiaBadgeColor;
     /**
      * The size of the badge.
      * @default m

package/dist/components/content/badge/badge.js

@@ -22,7 +22,7 @@ export const EunomiaBadgeTagName = "eun-badge";
  *
  * @slot [default] - The badge's content, typically a short number. Left empty, the badge renders as a plain dot
  * @csspart badge - The badge's own box, carrying its size, padding, and background. Exposed for effects the badge's CSS custom properties don't cover
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='critical'] - The color variant to apply
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='critical'] - The color to apply
  * @prop {'s' | 'm' | 'l'} [size='m'] - The size of the badge
  * @prop {string} label - An optional accessible name. When set, the badge announces this text instead of staying hidden from assistive technology
  * @cssprop [--badge-background] - Sets the background color of the badge
@@ -36,10 +36,10 @@ let EunomiaBadge = class EunomiaBadge extends LitElement {
     constructor() {
         super(...arguments);
         /**
-         * The color variant to apply.
+         * The color to apply.
          * @default critical
          */
-        this.variant = "critical";
+        this.color = "critical";
         /**
          * The size of the badge.
          * @default m
@@ -129,7 +129,7 @@ let EunomiaBadge = class EunomiaBadge extends LitElement {
 EunomiaBadge.styles = badgeStyles;
 __decorate([
     property({ reflect: true })
-], EunomiaBadge.prototype, "variant", void 0);
+], EunomiaBadge.prototype, "color", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaBadge.prototype, "size", void 0);

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

@@ -69,7 +69,7 @@ const base = css `
     --_fontSize: var(--badge-font-size, 12px);
   }
 
-  :host([variant="primary"]) {
+  :host([color="primary"]) {
     --_background: var(
       --badge-background,
       var(--eun-color-primary-500, #3d6fff)
@@ -77,7 +77,7 @@ const base = css `
     --_color: var(--badge-color, var(--eun-color-on-primary-500, #ffffff));
   }
 
-  :host([variant="secondary"]) {
+  :host([color="secondary"]) {
     --_background: var(
       --badge-background,
       var(--eun-color-secondary-500, #e5a030)
@@ -85,7 +85,7 @@ const base = css `
     --_color: var(--badge-color, var(--eun-color-on-secondary-500, #000000de));
   }
 
-  :host([variant="success"]) {
+  :host([color="success"]) {
     --_background: var(
       --badge-background,
       var(--eun-color-success-100, #1a9948)
@@ -93,7 +93,7 @@ const base = css `
     --_color: var(--badge-color, #fff);
   }
 
-  :host([variant="warning"]) {
+  :host([color="warning"]) {
     --_background: var(
       --badge-background,
       var(--eun-color-warning-100, #c85207)

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

@@ -1,10 +1,10 @@
-import { LitElement, TemplateResult } from "lit";
+import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { EunomiaCardAppearance } from "../../../types/variant.type.js";
 /**
  * Tag name of the card component.
  */
 export declare const EunomiaCardTagName = "eun-card";
-declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface> & typeof LitElement;
+declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface & import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A padded, bordered surface around whatever's slotted in, with nothing
  * else opinionated about the content : no dedicated slots, no forced
@@ -17,11 +17,19 @@ declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Con
  * slotting your own markup, styled with your own CSS, rather than
  * reaching for a layout variant baked into the component.
  *
- * @slot [default] - The card's content, arranged in a column by `--card-gap`
+ * Without href, a native anchor placed as a direct child links the whole
+ * card instead, stretched over its surface, so the link exists in the
+ * server-rendered HTML and can be a framework's own link component. Its
+ * accessible name stays the anchor's own text, typically the card title.
+ * When it opens in a new tab, the card shows the same external link badge
+ * and announces it through the anchor's aria-description.
+ *
+ * @slot [default] - The card's content, arranged in a column by `--card-gap`. A native anchor as a direct child links the whole card when href is unset
  * @csspart card - The outer box, a link once href is set, a plain container otherwise. Exposed for effects the card's CSS custom properties don't cover, such as a hover accent
  * @prop {'default' | 'fill' | 'raised'} [appearance='default'] - The card's surface style. Default is a plain surface colored box with a border. Fill and raised both drop the border, fill for a muted tinted background and raised for a drop shadow. All three animate a border, tint, or shadow change on hover or focus regardless of whether the card is a link, though the accompanying lift is narrower
  * @prop {string} href - The URL the card navigates to. When set, the card renders as a link instead of a plain wrapper
- * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link badge and announces it to assistive technology
+ * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link badge and announces it to assistive technology, in the current locale
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @attr {string} aria-label - An accessible label that overrides the card content. When the card also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
@@ -48,6 +56,7 @@ declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Con
  * @element eun-card
  */
 export declare class EunomiaCard extends EunomiaCard_base {
+    #private;
     /**
      * Styles to import to the component.
      *
@@ -61,6 +70,25 @@ export declare class EunomiaCard extends EunomiaCard_base {
      * @default default
      */
     appearance: EunomiaCardAppearance;
+    /**
+     * Whether a native `<a>` slotted as a direct child links the card while
+     * `href` is unset (see the class doc). Navigation, `target`/`rel` and
+     * the new-tab hint are the consumer's own in this mode.
+     * @private
+     */
+    private get hasSlottedAnchor();
+    /**
+     * The native `<a>` slotted as a direct child while `href` is unset.
+     * @internal
+     */
+    private get slottedAnchor();
+    /**
+     * Re-renders when the default slot changes, so an anchor added or removed
+     * after the first render switches between the two modes.
+     * @private
+     */
+    private handleSlotChange;
+    protected updated(changed: PropertyValues): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/content/card/card.js

@@ -4,9 +4,18 @@ 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 _EunomiaCard_newTab;
 import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { CardLinkMixin } from "../../../mixins/card-link.mixin.js";
+import { warnIgnoredHostLinkAttributes } from "../../../utils/navigation.utils.js";
+import { NewTabAnchorController } from "../../../utils/new-tab-anchor.controller.js";
 import { cardStyles } from "./card.styles.js";
 import { cardLinkStyles } from "../shared-styles/card-link.styles.js";
 /**
@@ -25,11 +34,19 @@ export const EunomiaCardTagName = "eun-card";
  * slotting your own markup, styled with your own CSS, rather than
  * reaching for a layout variant baked into the component.
  *
- * @slot [default] - The card's content, arranged in a column by `--card-gap`
+ * Without href, a native anchor placed as a direct child links the whole
+ * card instead, stretched over its surface, so the link exists in the
+ * server-rendered HTML and can be a framework's own link component. Its
+ * accessible name stays the anchor's own text, typically the card title.
+ * When it opens in a new tab, the card shows the same external link badge
+ * and announces it through the anchor's aria-description.
+ *
+ * @slot [default] - The card's content, arranged in a column by `--card-gap`. A native anchor as a direct child links the whole card when href is unset
  * @csspart card - The outer box, a link once href is set, a plain container otherwise. Exposed for effects the card's CSS custom properties don't cover, such as a hover accent
  * @prop {'default' | 'fill' | 'raised'} [appearance='default'] - The card's surface style. Default is a plain surface colored box with a border. Fill and raised both drop the border, fill for a muted tinted background and raised for a drop shadow. All three animate a border, tint, or shadow change on hover or focus regardless of whether the card is a link, though the accompanying lift is narrower
  * @prop {string} href - The URL the card navigates to. When set, the card renders as a link instead of a plain wrapper
- * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link badge and announces it to assistive technology
+ * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link badge and announces it to assistive technology, in the current locale
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @attr {string} aria-label - An accessible label that overrides the card content. When the card also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
@@ -63,15 +80,58 @@ let EunomiaCard = class EunomiaCard extends CardLinkMixin(LitElement) {
          * @default default
          */
         this.appearance = "default";
+        /**
+         * Announces the slotted anchor opening in a new tab.
+         * @internal
+         */
+        _EunomiaCard_newTab.set(this, new NewTabAnchorController(this, () => this.slottedAnchor, () => this.dictionary.link.opensInNewTab));
+        /**
+         * Re-renders when the default slot changes, so an anchor added or removed
+         * after the first render switches between the two modes.
+         * @private
+         */
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+    }
+    /**
+     * Whether a native `<a>` slotted as a direct child links the card while
+     * `href` is unset (see the class doc). Navigation, `target`/`rel` and
+     * the new-tab hint are the consumer's own in this mode.
+     * @private
+     */
+    get hasSlottedAnchor() {
+        return !!this.slottedAnchor;
+    }
+    /**
+     * The native `<a>` slotted as a direct child while `href` is unset.
+     * @internal
+     */
+    get slottedAnchor() {
+        return this.href ? null : this.querySelector(":scope > a");
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.hasSlottedAnchor) {
+            warnIgnoredHostLinkAttributes(this);
+        }
     }
     render() {
-        const inner = html `<slot></slot>${this.renderExternalLinkBadge()}`;
+        const inner = html `<slot @slotchange=${this.handleSlotChange}></slot
+      >${this.renderExternalLinkBadge(__classPrivateFieldGet(this, _EunomiaCard_newTab, "f").isBlank)}`;
         if (this.href) {
             return this.renderCardLink("card", inner);
         }
-        return html `<div id="card" part="card">${inner}</div>`;
+        return html `<div
+      id="card"
+      part="card"
+      class=${ifDefined(this.hasSlottedAnchor ? "slotted-link" : undefined)}
+    >
+      ${inner}
+    </div>`;
     }
 };
+_EunomiaCard_newTab = new WeakMap();
 /**
  * Styles to import to the component.
  *

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

@@ -131,8 +131,40 @@ const base = css `
     );
   }
 
+  #card.slotted-link {
+    --_hoverLift: translateY(-4px);
+    --_hoverBorderDefault: var(--eun-color-primary-500, #3d6fff);
+    cursor: pointer;
+  }
+  ::slotted(a) {
+    color: inherit;
+    text-decoration: none;
+    outline: none !important;
+  }
+  ::slotted(a)::after {
+    content: "";
+    position: absolute;
+    inset: calc(-1 * var(--card-border-width, var(--eun-border-width-s, 1px)));
+    z-index: 1;
+    border-radius: var(--card-border-radius, var(--eun-border-radius-m, 8px));
+    outline: 2px solid transparent;
+    transition: outline 0.2s ease-out;
+  }
+  ::slotted(a:focus-visible)::after {
+    outline-color: var(
+      --card-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+    outline-offset: 2px;
+  }
+  :host(:focus-within) #card.slotted-link {
+    transform: var(--card-hover-transform, var(--_hoverLift));
+    border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    #card {
+    #card,
+    ::slotted(a)::after {
       transition: none;
     }
   }

package/dist/components/content/card/image-card.d.ts

@@ -3,7 +3,7 @@ import { LitElement, TemplateResult } from "lit";
  * Tag name of the image card component.
  */
 export declare const EunomiaImageCardTagName = "eun-image-card";
-declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface> & typeof LitElement;
+declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface & import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * An image header with a title and description footer, such as a blog post
  * preview, a product tile, or a team member card. It shares the same CSS
@@ -19,6 +19,7 @@ declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js"
  * @csspart card - The outer box, a link once href is set, a plain container otherwise. Exposed for effects the card's CSS custom properties don't cover, such as a hover accent
  * @prop {string} href - The URL the card navigates to. When set, the card renders as a link instead of a plain wrapper
  * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link badge and announces it to assistive technology
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @attr {string} aria-label - An accessible label that overrides the card content. When the card also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable

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

@@ -28,6 +28,7 @@ export const EunomiaImageCardTagName = "eun-image-card";
  * @csspart card - The outer box, a link once href is set, a plain container otherwise. Exposed for effects the card's CSS custom properties don't cover, such as a hover accent
  * @prop {string} href - The URL the card navigates to. When set, the card renders as a link instead of a plain wrapper
  * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link badge and announces it to assistive technology
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @attr {string} aria-label - An accessible label that overrides the card content. When the card also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable

package/dist/components/content/card/sliding-card.d.ts

@@ -3,7 +3,7 @@ import { LitElement, TemplateResult } from "lit";
  * Tag name of the sliding card component.
  */
 export declare const EunomiaSlidingCardTagName = "eun-sliding-card";
-declare const EunomiaSlidingCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface> & typeof LitElement;
+declare const EunomiaSlidingCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface & import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A card with a two layer slide reveal. The front layer is always visible
  * and slides down to expose the back layer underneath.
@@ -35,6 +35,7 @@ declare const EunomiaSlidingCard_base: import("../../../utils/constructor.type.j
  * @prop {boolean} [hint=false] - Loops a bounce animation on touch devices while closed, hinting that the card is interactive
  * @prop {string} href - The URL the back layer navigates to. When set, the back layer renders as a link instead of a plain container
  * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link badge and announces it to assistive technology
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @attr {string} aria-label - The accessible label for the front layer's toggle control, touch devices only, since desktop has no such control. When the back layer also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable

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

@@ -47,6 +47,7 @@ export const EunomiaSlidingCardTagName = "eun-sliding-card";
  * @prop {boolean} [hint=false] - Loops a bounce animation on touch devices while closed, hinting that the card is interactive
  * @prop {string} href - The URL the back layer navigates to. When set, the back layer renders as a link instead of a plain container
  * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link badge and announces it to assistive technology
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @attr {string} aria-label - The accessible label for the front layer's toggle control, touch devices only, since desktop has no such control. When the back layer also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable

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

@@ -140,11 +140,24 @@ export const collapseStyles = css `
     text-overflow: ellipsis;
     font-size: var(--eun-font-size-s, 14px);
   }
+  #heading ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+  }
   #subheading {
     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;