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

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,34 +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
@@ -55,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.
  *
@@ -78,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

@@ -46,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

@@ -58,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/chip/chip.d.ts

@@ -70,8 +70,8 @@ declare const EunomiaChip_base: import("../../../utils/constructor.type.js").Con
  * @prop {boolean} [rounded=true] - Whether the chip is fully rounded, as a pill
  * @prop {boolean} [removable=true] - Shows the delete button. Clicking it fires the close event without changing the chip's own rendering
  * @prop {boolean} [disabled=false] - Disables the delete button, preventing removal
- * @prop {string} [ariaLabelRemove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
- * @attr {string} [aria-label-remove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
+ * @prop {string} [removeLabel] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
+ * @attr {string} [remove-label] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
  * @prop {string} [locale] - The locale used to resolve the default accessible label of the delete button. Defaults to the runtime's own
  * @cssprop [--chip-background-color] - Sets the background color of the chip, for every appearance, color and severity
  * @cssprop [--chip-border-color] - Sets the border color of the chip, for every appearance, color and severity
@@ -182,7 +182,7 @@ export declare class EunomiaChip extends EunomiaChip_base {
      * unless the consumer overrides it explicitly.
      * @default {i18n:chip.remove}
      */
-    ariaLabelRemove?: string;
+    removeLabel?: string;
     /**
      * The chip's current slotted label text, trimmed ; tracked so the delete
      * button's accessible name can include it (see {@link getRemoveLabel}).
@@ -224,7 +224,7 @@ export declare class EunomiaChip extends EunomiaChip_base {
     private readonly handleRemove;
     /**
      * Builds the delete button's accessible name : the chip's own slotted
-     * text appended to `ariaLabelRemove` (or its locale-resolved fallback),
+     * text appended to `removeLabel` (or its locale-resolved fallback),
      * so multiple chips on the same page stay distinguishable from one
      * another by sound alone. Falls back to that prefix alone when there's
      * no label text yet.

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

@@ -74,8 +74,8 @@ const DELETE_ICON_SIZES = {
  * @prop {boolean} [rounded=true] - Whether the chip is fully rounded, as a pill
  * @prop {boolean} [removable=true] - Shows the delete button. Clicking it fires the close event without changing the chip's own rendering
  * @prop {boolean} [disabled=false] - Disables the delete button, preventing removal
- * @prop {string} [ariaLabelRemove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
- * @attr {string} [aria-label-remove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
+ * @prop {string} [removeLabel] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
+ * @attr {string} [remove-label] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
  * @prop {string} [locale] - The locale used to resolve the default accessible label of the delete button. Defaults to the runtime's own
  * @cssprop [--chip-background-color] - Sets the background color of the chip, for every appearance, color and severity
  * @cssprop [--chip-border-color] - Sets the border color of the chip, for every appearance, color and severity
@@ -190,7 +190,7 @@ let EunomiaChip = class EunomiaChip extends LocalizableMixin(LitElement) {
     }
     /**
      * Builds the delete button's accessible name : the chip's own slotted
-     * text appended to `ariaLabelRemove` (or its locale-resolved fallback),
+     * text appended to `removeLabel` (or its locale-resolved fallback),
      * so multiple chips on the same page stay distinguishable from one
      * another by sound alone. Falls back to that prefix alone when there's
      * no label text yet.
@@ -198,7 +198,7 @@ let EunomiaChip = class EunomiaChip extends LocalizableMixin(LitElement) {
      * @private
      */
     getRemoveLabel() {
-        const removeLabel = this.ariaLabelRemove ?? this.dictionary.chip.remove;
+        const removeLabel = this.removeLabel ?? this.dictionary.chip.remove;
         return this.labelText ? `${removeLabel} ${this.labelText}` : removeLabel;
     }
     /**
@@ -330,7 +330,7 @@ let EunomiaChip = class EunomiaChip extends LocalizableMixin(LitElement) {
  */
 EunomiaChip.styles = chipStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaChip.prototype, "color", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "fixed-color" })
@@ -339,7 +339,7 @@ __decorate([
     property({ reflect: true })
 ], EunomiaChip.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaChip.prototype, "appearance", void 0);
 __decorate([
     property({ reflect: true })
@@ -372,8 +372,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaChip.prototype, "disabled", void 0);
 __decorate([
-    property({ attribute: "aria-label-remove" })
-], EunomiaChip.prototype, "ariaLabelRemove", void 0);
+    property({ attribute: "remove-label" })
+], EunomiaChip.prototype, "removeLabel", void 0);
 __decorate([
     state()
 ], EunomiaChip.prototype, "labelText", void 0);

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

@@ -68,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

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

@@ -80,7 +80,16 @@ export 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
@@ -167,7 +176,8 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
          * @private
          */
         this.handlePanelTransitionEnd = (event) => {
-            if (event.target !== this.panelEl || event.propertyName !== "grid-template-rows") {
+            if (event.target !== this.panelEl ||
+                event.propertyName !== "grid-template-rows") {
                 return;
             }
             this.panelEl?.removeEventListener("transitionend", this.handlePanelTransitionEnd);

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

@@ -17,7 +17,16 @@
  * [--collapse-focus-outline-color] - Set a custom focus outline color for the trigger
  * [--collapse-disabled-opacity] - Set a custom opacity while disabled
  * [--collapse-border-radius] - Set a custom border radius for the trigger and panel
- * [--collapse-padding] - Set a custom padding for the trigger and panel
+ * [--collapse-padding] - Set a custom padding for the trigger, and for the panel unless --collapse-panel-padding is set
+ * [--collapse-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * [--collapse-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * [--collapse-panel-padding] - Set a custom padding for the panel, falling back to the trigger's padding
+ * [--collapse-panel-padding-block] - Set a custom vertical padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * [--collapse-panel-padding-inline] - Set a custom horizontal padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * [--collapse-heading-font-size] - Set a custom font size for the heading
+ * [--collapse-subheading-font-size] - Set a custom font size for the subheading
+ * [--collapse-divider-width] - Set a custom width for the line between the trigger and the panel. 0 removes it
+ * [--collapse-divider-color] - Set a custom color for the line between the trigger and the panel
  * [--collapse-gap] - Set a custom gap between the trigger's leading icon, heading, and actions
  * [--collapse-panel-gap] - Set a custom gap between the trigger and the panel while open, with `independent` set
  * [--collapse-transition-duration] - Set a custom duration for the open/close and color transitions