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

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

@@ -1,9 +1,9 @@
-import { LitElement, TemplateResult } from "lit";
+import { LitElement, PropertyValues, 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
@@ -11,33 +11,52 @@ declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js"
  * family.
  *
  * Like every card in this family, setting href turns the whole card into a
- * link.
+ * link. Without href, a native anchor slotted into title 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. When
+ * it opens in a new tab, the card shows the external link badge and
+ * announces it through the anchor's aria-description.
+ *
+ * The footer stretches to the card's height, so a card in a grid row can
+ * push its last line to the bottom with margin-top auto. It isn't
+ * rendered at all while title and description are both empty.
  *
  * @slot [image] - The card's image, as a plain image element shown edge to edge, ignoring padding. The alt text is the author's own responsibility: describe the image, or leave it empty when it's purely decorative and the title or description already convey the same information
- * @slot [title] - The card's title, below the image. Use a heading element at whatever level fits the surrounding page structure
- * @slot [description] - The card's description, below the title
+ * @slot [title] - The card's title, below the image. Use a heading element at whatever level fits the surrounding page structure. A native anchor slotted here links the whole card when href is unset. The title typography is inherited, so a composition styles its own parts freely
+ * @slot [description] - The card's description, below the title. Its typography is inherited too
  * @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
+ * @csspart footer - The box holding the title and description, below the image
  * @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
+ * @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. Ignored with a slotted anchor, which takes it instead
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
  * @cssprop [--card-padding] - Sets the padding of the footer, holding the title and description
+ * @cssprop [--card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --card-padding is set
+ * @cssprop [--card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --card-padding is set
  * @cssprop [--card-gap] - Sets the gap between the title and description
  * @cssprop [--card-border-radius] - Sets the corner radius of the card
  * @cssprop [--card-border-color] - Sets the border color of the card
  * @cssprop [--card-border-width] - Sets the width of the border
  * @cssprop [--card-background] - Sets the background color of the card
  * @cssprop [--card-shadow] - Sets a box shadow, none by default
+ * @cssprop [--card-hover-shadow] - Sets the box shadow on hover or focus, linked or not. Defaults to the resting shadow
+ * @cssprop [--card-overflow] - Sets the overflow of the card, hidden by default so the image follows the rounded corners
  * @cssprop [--card-hover-transform] - Sets a transform applied on hover or focus, for linked cards only, defaulting to a small lift
  * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus. Defaults to the primary color when `href` is set, otherwise the border stays exactly as it is at rest — hovering a non-link card gives no color feedback, since there's nothing to click
  * @cssprop [--card-hover-background] - Sets the background color on hover or focus, linked or not, unchanged by default
  * @cssprop [--card-hover-duration] - Sets the duration of the hover transition
  * @cssprop [--card-transition] - Overrides the card's whole hover transition, for example to animate an extra property alongside the built-in ones. Defaults to transform, box shadow, background color, and border color
  * @cssprop [--card-focus-outline-color] - Sets the focus outline color, for linked cards only
- * @cssprop [--image-card-image-height] - Sets the height of the image
+ * @cssprop [--image-card-image-height] - Sets the height of the image, 180px by default. Set it to auto to size the image from its aspect ratio instead
+ * @cssprop [--image-card-image-aspect-ratio] - Sets the aspect ratio of the image, such as 4 / 3. Only applies once --image-card-image-height is auto
  * @cssprop [--image-card-title-size] - Sets the font size of the title
+ * @cssprop [--image-card-title-weight] - Sets the font weight of the title
+ * @cssprop [--image-card-title-color] - Sets the color of the title
  * @cssprop [--image-card-description-size] - Sets the font size of the description
+ * @cssprop [--image-card-description-weight] - Sets the font weight of the description
+ * @cssprop [--image-card-description-color] - Sets the color of the description
  * @cssprop [--card-link-badge-offset] - Sets the inset of the external link badge from the card's top and right edges
  * @cssprop [--card-link-badge-size] - Sets the diameter of the external link badge
  * @cssprop [--card-link-badge-background] - Sets the background color of the external link badge
@@ -45,6 +64,7 @@ declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js"
  * @element eun-image-card
  */
 export declare class EunomiaImageCard extends EunomiaImageCard_base {
+    #private;
     /**
      * Styles to import to the component.
      *
@@ -53,6 +73,41 @@ export declare class EunomiaImageCard extends EunomiaImageCard_base {
      * @readonly
      */
     static readonly styles: import("lit").CSSResult[];
+    /**
+     * Whether the slotted anchor has keyboard focus. The ring is drawn on
+     * the card itself, since the card clips its content and an outline
+     * around the stretched anchor would be cut off.
+     * @internal
+     */
+    private anchorFocusVisible;
+    /**
+     * The native `<a>` slotted into `title` while `href` is unset, which
+     * then links the whole card. Navigation, `target`/`rel` and the new-tab
+     * hint are the consumer's own in this mode.
+     * @internal
+     */
+    private get slottedAnchor();
+    /**
+     * Whether anything is slotted into `title` or `description`. The footer
+     * isn't rendered otherwise, so an image-only card has no empty band
+     * under its image.
+     * @internal
+     */
+    private get hasFooterContent();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Tracks keyboard focus on the slotted anchor.
+     * @private
+     */
+    private handleFocusChange;
+    /**
+     * Re-renders when a slot changes, so an anchor or a footer slot added or
+     * removed after the first render is picked up.
+     * @private
+     */
+    private handleSlotChange;
+    protected updated(changed: PropertyValues): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/content/card/image-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;
 };
-import { customElement } from "lit/decorators.js";
+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 _EunomiaImageCard_newTab;
+import { customElement, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
+import { classMap } from "lit/directives/class-map.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 { imageCardStyles } from "./image-card.styles.js";
 import { cardLinkStyles } from "../shared-styles/card-link.styles.js";
 /**
@@ -20,33 +29,52 @@ export const EunomiaImageCardTagName = "eun-image-card";
  * family.
  *
  * Like every card in this family, setting href turns the whole card into a
- * link.
+ * link. Without href, a native anchor slotted into title 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. When
+ * it opens in a new tab, the card shows the external link badge and
+ * announces it through the anchor's aria-description.
+ *
+ * The footer stretches to the card's height, so a card in a grid row can
+ * push its last line to the bottom with margin-top auto. It isn't
+ * rendered at all while title and description are both empty.
  *
  * @slot [image] - The card's image, as a plain image element shown edge to edge, ignoring padding. The alt text is the author's own responsibility: describe the image, or leave it empty when it's purely decorative and the title or description already convey the same information
- * @slot [title] - The card's title, below the image. Use a heading element at whatever level fits the surrounding page structure
- * @slot [description] - The card's description, below the title
+ * @slot [title] - The card's title, below the image. Use a heading element at whatever level fits the surrounding page structure. A native anchor slotted here links the whole card when href is unset. The title typography is inherited, so a composition styles its own parts freely
+ * @slot [description] - The card's description, below the title. Its typography is inherited too
  * @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
+ * @csspart footer - The box holding the title and description, below the image
  * @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
+ * @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. Ignored with a slotted anchor, which takes it instead
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
  * @cssprop [--card-padding] - Sets the padding of the footer, holding the title and description
+ * @cssprop [--card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --card-padding is set
+ * @cssprop [--card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --card-padding is set
  * @cssprop [--card-gap] - Sets the gap between the title and description
  * @cssprop [--card-border-radius] - Sets the corner radius of the card
  * @cssprop [--card-border-color] - Sets the border color of the card
  * @cssprop [--card-border-width] - Sets the width of the border
  * @cssprop [--card-background] - Sets the background color of the card
  * @cssprop [--card-shadow] - Sets a box shadow, none by default
+ * @cssprop [--card-hover-shadow] - Sets the box shadow on hover or focus, linked or not. Defaults to the resting shadow
+ * @cssprop [--card-overflow] - Sets the overflow of the card, hidden by default so the image follows the rounded corners
  * @cssprop [--card-hover-transform] - Sets a transform applied on hover or focus, for linked cards only, defaulting to a small lift
  * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus. Defaults to the primary color when `href` is set, otherwise the border stays exactly as it is at rest — hovering a non-link card gives no color feedback, since there's nothing to click
  * @cssprop [--card-hover-background] - Sets the background color on hover or focus, linked or not, unchanged by default
  * @cssprop [--card-hover-duration] - Sets the duration of the hover transition
  * @cssprop [--card-transition] - Overrides the card's whole hover transition, for example to animate an extra property alongside the built-in ones. Defaults to transform, box shadow, background color, and border color
  * @cssprop [--card-focus-outline-color] - Sets the focus outline color, for linked cards only
- * @cssprop [--image-card-image-height] - Sets the height of the image
+ * @cssprop [--image-card-image-height] - Sets the height of the image, 180px by default. Set it to auto to size the image from its aspect ratio instead
+ * @cssprop [--image-card-image-aspect-ratio] - Sets the aspect ratio of the image, such as 4 / 3. Only applies once --image-card-image-height is auto
  * @cssprop [--image-card-title-size] - Sets the font size of the title
+ * @cssprop [--image-card-title-weight] - Sets the font weight of the title
+ * @cssprop [--image-card-title-color] - Sets the color of the title
  * @cssprop [--image-card-description-size] - Sets the font size of the description
+ * @cssprop [--image-card-description-weight] - Sets the font weight of the description
+ * @cssprop [--image-card-description-color] - Sets the color of the description
  * @cssprop [--card-link-badge-offset] - Sets the inset of the external link badge from the card's top and right edges
  * @cssprop [--card-link-badge-size] - Sets the diameter of the external link badge
  * @cssprop [--card-link-badge-background] - Sets the background color of the external link badge
@@ -54,21 +82,100 @@ export const EunomiaImageCardTagName = "eun-image-card";
  * @element eun-image-card
  */
 let EunomiaImageCard = class EunomiaImageCard extends CardLinkMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the slotted anchor has keyboard focus. The ring is drawn on
+         * the card itself, since the card clips its content and an outline
+         * around the stretched anchor would be cut off.
+         * @internal
+         */
+        this.anchorFocusVisible = false;
+        /**
+         * Announces the slotted anchor opening in a new tab.
+         * @internal
+         */
+        _EunomiaImageCard_newTab.set(this, new NewTabAnchorController(this, () => this.slottedAnchor, () => this.dictionary.link.opensInNewTab));
+        /**
+         * Tracks keyboard focus on the slotted anchor.
+         * @private
+         */
+        this.handleFocusChange = () => {
+            const anchor = this.slottedAnchor;
+            this.anchorFocusVisible =
+                !!anchor &&
+                    anchor === document.activeElement &&
+                    anchor.matches(":focus-visible");
+        };
+        /**
+         * Re-renders when a slot changes, so an anchor or a footer slot added or
+         * removed after the first render is picked up.
+         * @private
+         */
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+    }
+    /**
+     * The native `<a>` slotted into `title` while `href` is unset, which
+     * then links the whole card. Navigation, `target`/`rel` and the new-tab
+     * hint are the consumer's own in this mode.
+     * @internal
+     */
+    get slottedAnchor() {
+        return this.href ? null : this.querySelector(':scope > a[slot="title"]');
+    }
+    /**
+     * Whether anything is slotted into `title` or `description`. The footer
+     * isn't rendered otherwise, so an image-only card has no empty band
+     * under its image.
+     * @internal
+     */
+    get hasFooterContent() {
+        return !!this.querySelector(':scope > [slot="title"], :scope > [slot="description"]');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("focusin", this.handleFocusChange);
+        this.addEventListener("focusout", this.handleFocusChange);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("focusin", this.handleFocusChange);
+        this.removeEventListener("focusout", this.handleFocusChange);
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.slottedAnchor) {
+            warnIgnoredHostLinkAttributes(this);
+        }
+    }
     render() {
         const inner = html `
       <slot name="image"></slot>
-      <div id="footer">
-        <slot name="title"></slot>
-        <slot name="description"></slot>
+      <div id="footer" part="footer" ?hidden=${!this.hasFooterContent}>
+        <slot name="title" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="description" @slotchange=${this.handleSlotChange}></slot>
       </div>
-      ${this.renderExternalLinkBadge()}
+      ${this.renderExternalLinkBadge(__classPrivateFieldGet(this, _EunomiaImageCard_newTab, "f").isBlank)}
     `;
         if (this.href) {
             return this.renderCardLink("card", inner);
         }
-        return html `<div id="card" part="card">${inner}</div>`;
+        const anchored = !!this.slottedAnchor;
+        return html `<div
+      id="card"
+      part="card"
+      class=${classMap({
+            "slotted-link": anchored,
+            "focus-visible": anchored && this.anchorFocusVisible,
+        })}
+    >
+      ${inner}
+    </div>`;
     }
 };
+_EunomiaImageCard_newTab = new WeakMap();
 /**
  * Styles to import to the component.
  *
@@ -77,6 +184,9 @@ let EunomiaImageCard = class EunomiaImageCard extends CardLinkMixin(LitElement)
  * @readonly
  */
 EunomiaImageCard.styles = [imageCardStyles, cardLinkStyles];
+__decorate([
+    state()
+], EunomiaImageCard.prototype, "anchorFocusVisible", void 0);
 EunomiaImageCard = __decorate([
     customElement(EunomiaImageCardTagName)
 ], EunomiaImageCard);

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

@@ -16,10 +16,13 @@ const base = css `
   }
 
   #card {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    isolation: isolate;
     box-sizing: border-box;
     height: 100%;
-    overflow: hidden;
+    overflow: var(--card-overflow, hidden);
     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));
@@ -29,10 +32,14 @@ const base = css `
     text-decoration: none;
     transition: var(
       --card-transition,
-      transform var(--card-hover-duration, 0.3s) ease,
-      box-shadow var(--card-hover-duration, 0.3s) ease,
-      background-color var(--card-hover-duration, 0.3s) ease,
-      border-color var(--card-hover-duration, 0.3s) ease
+      transform var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease),
+      box-shadow var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease),
+      background-color var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease),
+      border-color var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease)
     );
   }
 
@@ -49,6 +56,7 @@ const base = css `
   #card:hover,
   #card:focus-visible {
     border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
+    box-shadow: var(--card-hover-shadow, var(--card-shadow, none));
     background: var(
       --card-hover-background,
       var(--card-background, var(--eun-surface-color, #ffffff))
@@ -56,28 +64,63 @@ const base = css `
   }
 
   :host([href]) #card:hover,
-  :host([href]) #card:focus-visible {
+  :host([href]) #card:focus-visible,
+  #card.slotted-link:hover,
+  #card.focus-visible {
     transform: var(--card-hover-transform, translateY(-4px));
   }
 
-  a#card:focus-visible {
+  #card.slotted-link {
+    --_hoverBorderDefault: var(--eun-color-primary-500, #3d6fff);
+    cursor: pointer;
+  }
+  #card.focus-visible {
+    border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
+    box-shadow: var(--card-hover-shadow, var(--card-shadow, none));
+  }
+
+  a#card:focus-visible,
+  #card.focus-visible {
     outline: 2px solid
       var(--card-focus-outline-color, var(--eun-color-primary-500, #3d6fff));
     outline-offset: 2px;
   }
 
+  ::slotted(a[slot="title"]) {
+    color: inherit;
+    text-decoration: none;
+    outline: none !important;
+  }
+  ::slotted(a[slot="title"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
+
   ::slotted([slot="image"]) {
     display: block;
+    flex: none;
     width: 100%;
     height: var(--image-card-image-height, 180px);
+    aspect-ratio: var(--image-card-image-aspect-ratio, auto);
     object-fit: cover;
   }
 
   #footer {
+    flex: 1;
     display: flex;
     flex-direction: column;
     gap: var(--card-gap, var(--eun-space-s, 8px));
-    padding: var(--card-padding, var(--eun-space-m, 16px));
+    padding: var(
+      --card-padding,
+      var(--card-padding-block, var(--eun-space-m, 16px))
+        var(--card-padding-inline, var(--eun-space-m, 16px))
+    );
+  }
+
+  #footer[hidden] {
+    display: none;
   }
 
   ::slotted(h1),
@@ -89,18 +132,26 @@ const base = css `
   ::slotted(p) {
     margin: 0;
     padding: 0;
+    font-size: inherit;
+    font-weight: inherit;
   }
 
-  ::slotted([slot="title"]) {
-    font-weight: var(--eun-font-weight-l, 700);
+  slot[name="title"] {
+    font-weight: var(--image-card-title-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);
+    color: var(--image-card-title-color, var(--eun-text-color, #071621));
   }
 
-  ::slotted([slot="description"]) {
-    font-weight: var(--eun-font-weight-s, 300);
+  slot[name="description"] {
+    font-weight: var(
+      --image-card-description-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);
+    color: var(
+      --image-card-description-color,
+      var(--eun-text-secondary, #484e61)
+    );
   }
 
   @media (prefers-reduced-motion: reduce) {

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
@@ -45,6 +46,8 @@ declare const EunomiaSlidingCard_base: import("../../../utils/constructor.type.j
  * @cssprop [--sliding-card-border-radius] - Sets the corner radius of both layers
  * @cssprop [--sliding-card-back-inset] - Sets how far the back layer sits inside the front layer's own edge, on the top/left/right sides. Keeps the back layer fully hidden underneath the front layer at rest, rather than sized to match it exactly, so the front layer's rounded corners never cut through to whatever's behind the card on the page
  * @cssprop [--sliding-card-padding] - Sets the padding of both layers
+ * @cssprop [--sliding-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --sliding-card-padding is set
+ * @cssprop [--sliding-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --sliding-card-padding is set
  * @cssprop [--sliding-card-front-background] - Sets the background color of the front layer, and (since the host itself carries no visible box beyond what the front layer already covers) the host's own background showing through the front layer's rounded corners
  * @cssprop [--sliding-card-back-background] - Sets the background color of the back layer
  * @cssprop [--sliding-card-back-color] - Sets the text color of the back layer

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
@@ -57,6 +58,8 @@ export const EunomiaSlidingCardTagName = "eun-sliding-card";
  * @cssprop [--sliding-card-border-radius] - Sets the corner radius of both layers
  * @cssprop [--sliding-card-back-inset] - Sets how far the back layer sits inside the front layer's own edge, on the top/left/right sides. Keeps the back layer fully hidden underneath the front layer at rest, rather than sized to match it exactly, so the front layer's rounded corners never cut through to whatever's behind the card on the page
  * @cssprop [--sliding-card-padding] - Sets the padding of both layers
+ * @cssprop [--sliding-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --sliding-card-padding is set
+ * @cssprop [--sliding-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --sliding-card-padding is set
  * @cssprop [--sliding-card-front-background] - Sets the background color of the front layer, and (since the host itself carries no visible box beyond what the front layer already covers) the host's own background showing through the front layer's rounded corners
  * @cssprop [--sliding-card-back-background] - Sets the background color of the back layer
  * @cssprop [--sliding-card-back-color] - Sets the text color of the back layer

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

@@ -65,7 +65,11 @@ const base = css `
       --sliding-card-border-radius,
       var(--eun-border-radius-l, 16px)
     );
-    padding: var(--sliding-card-padding, var(--eun-space-l, 32px));
+    padding: var(
+      --sliding-card-padding,
+      var(--sliding-card-padding-block, var(--eun-space-l, 32px))
+        var(--sliding-card-padding-inline, var(--eun-space-l, 32px))
+    );
     overflow: hidden;
   }
 

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
@@ -66,7 +68,16 @@ export declare const EunomiaCollapseTagName = "eun-collapse";
  * @cssprop [--collapse-focus-outline-color] - Sets the focus outline color of the trigger
  * @cssprop [--collapse-disabled-opacity] - Sets the opacity while disabled
  * @cssprop [--collapse-border-radius] - Sets the corner radius of the trigger and panel
- * @cssprop [--collapse-padding] - Sets the padding of the trigger and panel
+ * @cssprop [--collapse-padding] - Sets the padding of the trigger, and of the panel unless --collapse-panel-padding is set
+ * @cssprop [--collapse-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * @cssprop [--collapse-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * @cssprop [--collapse-panel-padding] - Sets the padding of the panel, falling back to the trigger's padding
+ * @cssprop [--collapse-panel-padding-block] - Sets the vertical padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * @cssprop [--collapse-panel-padding-inline] - Sets the horizontal padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * @cssprop [--collapse-heading-font-size] - Sets the font size of the heading
+ * @cssprop [--collapse-subheading-font-size] - Sets the font size of the subheading
+ * @cssprop [--collapse-divider-width] - Sets the width of the line between the trigger and the panel. Zero removes it
+ * @cssprop [--collapse-divider-color] - Sets the color of the line between the trigger and the panel
  * @cssprop [--collapse-gap] - Sets the gap between the trigger's leading icon, heading, and actions
  * @cssprop [--collapse-panel-gap] - Sets the gap between the trigger and the panel while open, with independent set
  * @cssprop [--collapse-transition-duration] - Sets the duration of the open, close, and color transitions
@@ -82,11 +93,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 +210,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 +228,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 +349,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 {