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

package/dist/components/layout/infinite-list/infinite-list.styles.js

@@ -4,8 +4,11 @@ import { css } from "lit";
  *
  * Custom css variables:
  * [--infinite-list-height] - Set a custom fixed height, past which the list scrolls internally instead of the surrounding page ; unset (the default), the list grows with its content and the page scrolls it like any other block
+ * [--infinite-list-columns] - Set the number of columns items are laid out in, as a grid
  * [--infinite-list-gap] - Set a custom gap between items
  * [--infinite-list-padding] - Set a custom padding around the scrollable area
+ * [--infinite-list-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --infinite-list-padding is set
+ * [--infinite-list-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --infinite-list-padding is set
  * [--infinite-list-loading-padding] - Set a custom padding around the trailing loading indicator
  * [--infinite-list-end-color] - Set a custom color for the "end" slot's default position
  * [--infinite-list-focus-outline-color] - Set a custom focus outline color applied to slotted items
@@ -17,17 +20,26 @@ export const infiniteListStyles = css `
   }
   #scroller {
     max-block-size: var(--infinite-list-height, none);
+    padding: var(
+      --infinite-list-padding,
+      var(--infinite-list-padding-block, 0)
+        var(--infinite-list-padding-inline, 0)
+    );
+  }
+  #scroller.contained {
     overflow-y: auto;
     overscroll-behavior: contain;
-    padding: var(--infinite-list-padding, 0);
   }
   #feed {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(
+      var(--infinite-list-columns, 1),
+      minmax(0, 1fr)
+    );
     gap: var(--infinite-list-gap, var(--eun-space-m, 16px));
   }
-  .eun-il-spacer {
-    flex: none;
+  ::slotted(.eun-il-spacer) {
+    grid-column: 1 / -1;
     visibility: hidden;
   }
   #sentinel {

package/dist/components/loader/loader/loader.js

@@ -170,7 +170,7 @@ __decorate([
     property()
 ], EunomiaLoader.prototype, "label", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaLoader.prototype, "variant", void 0);
 __decorate([
     property({ hasChanged: () => false })
@@ -182,7 +182,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaLoader.prototype, "sticky", void 0);
 __decorate([
-    property({ attribute: "sticky-position", reflect: true })
+    property({ attribute: "sticky-position", reflect: true, useDefault: true })
 ], EunomiaLoader.prototype, "stickyPosition", void 0);
 EunomiaLoader = __decorate([
     customElement(EunomiaLoaderTagName)

package/dist/components/loader/loader/loader.styles.js

@@ -19,9 +19,9 @@ const base = css `
     font-size: var(--_size);
   }
 
-  :host([variant="dots"]) span,
-  :host([variant="dots"]) span::before,
-  :host([variant="dots"]) span::after {
+  :host(:is([variant="dots"], :not([variant]))) span,
+  :host(:is([variant="dots"], :not([variant]))) span::before,
+  :host(:is([variant="dots"], :not([variant]))) span::after {
     border-radius: 50%;
     width: 0.5em;
     height: 0.5em;
@@ -30,22 +30,22 @@ const base = css `
     animation: eun-loader-fade 1.4s infinite ease-in-out;
     animation-fill-mode: both;
   }
-  :host([variant="dots"]) span {
+  :host(:is([variant="dots"], :not([variant]))) span {
     position: relative;
     margin: 0 0.75em;
     animation-delay: -0.16s;
   }
-  :host([variant="dots"]) span::before,
-  :host([variant="dots"]) span::after {
+  :host(:is([variant="dots"], :not([variant]))) span::before,
+  :host(:is([variant="dots"], :not([variant]))) span::after {
     content: "";
     position: absolute;
     top: 0;
   }
-  :host([variant="dots"]) span::before {
+  :host(:is([variant="dots"], :not([variant]))) span::before {
     left: -0.75em;
     animation-delay: -0.32s;
   }
-  :host([variant="dots"]) span::after {
+  :host(:is([variant="dots"], :not([variant]))) span::after {
     left: 0.75em;
   }
   @keyframes eun-loader-fade {
@@ -77,9 +77,9 @@ const base = css `
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :host([variant="dots"]) span,
-    :host([variant="dots"]) span::before,
-    :host([variant="dots"]) span::after {
+    :host(:is([variant="dots"], :not([variant]))) span,
+    :host(:is([variant="dots"], :not([variant]))) span::before,
+    :host(:is([variant="dots"], :not([variant]))) span::after {
       animation-duration: 2.8s;
     }
     :host([variant="spinner"]) span {
@@ -115,7 +115,9 @@ const bar = css `
     height: 100%;
     border-radius: inherit;
     background-color: var(--loader-bar-fill-color, currentColor);
-    transition: width var(--loader-bar-transition-duration, 0.3s) ease;
+    transition: width
+      var(--loader-bar-transition-duration, var(--eun-duration-xl, 300ms))
+      var(--eun-easing-default, ease);
   }
 
   :host([variant="bar"]) #fill.indeterminate {
@@ -138,7 +140,9 @@ const bar = css `
     z-index: var(--loader-bar-z-index, 10);
   }
 
-  :host([variant="bar"][sticky][sticky-position="top"]) {
+  :host(
+    [variant="bar"][sticky]:is([sticky-position="top"], :not([sticky-position]))
+  ) {
     top: var(--loader-bar-sticky-offset, 0);
   }
 

package/dist/components/loader/skeleton/skeleton.js

@@ -82,7 +82,7 @@ let EunomiaSkeleton = class EunomiaSkeleton extends LitElement {
  */
 EunomiaSkeleton.styles = skeletonStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaSkeleton.prototype, "variant", void 0);
 __decorate([
     property()

package/dist/components/navigation/breadcrumb/breadcrumb.d.ts

@@ -1,34 +1,27 @@
-import { LitElement, TemplateResult } from "lit";
-import { EunomiaIconName } from "../../content/icon/icon.type.js";
+import { LitElement, PropertyValues, TemplateResult } from "lit";
 /**
  * Tag name of the breadcrumb component.
  */
 export declare const EunomiaBreadcrumbTagName = "eun-breadcrumb";
-/**
- * A single step in a `eun-breadcrumb` trail.
- */
-export type EunomiaBreadcrumbItemData = {
-    label: string;
-    href?: string;
-    icon?: EunomiaIconName;
-};
 /**
  * A trail of links showing the current page's position within a site's
- * hierarchy. The last item always renders as the current, unlinked page
- * regardless of whether it has an href. Intermediate items without an
- * href render as plain, unlinked text, such as a category that groups
- * pages but isn't itself a page.
+ * hierarchy. Each direct child is one step, in order, from the root to the
+ * current page: a native anchor, or any other element, such as a span,
+ * for a step that isn't itself a page. The links stay in the light
+ * DOM, so a framework's own link component, such as Next's Link, keeps its
+ * client-side navigation and prefetching.
  *
- * There are two ways to declare items, usable together: the data-driven
- * items array for the common case, including an optional leading icon per
- * step, or slotted breadcrumb item elements when a step needs more than
- * plain text and an icon, such as rich content.
+ * The breadcrumb wraps each step in its own list item with a separator.
+ * The last step is the current page : unless a step already sets
+ * aria-current, the breadcrumb marks the last one itself.
  *
- * @slot [default] - Breadcrumb item elements, used instead of or alongside items
- * @prop {Array<EunomiaBreadcrumbItemData>} [items=[]] - The trail's steps, in order, from the root to the current page. Each entry may set a label, an href, and an optional leading icon
+ * @slot [default] - The steps, one per direct child : an anchor, or a plain element for an unlinked step
  * @attr {string} [aria-label='Breadcrumb'] - The accessible label for the navigation landmark
+ * @cssprop [--breadcrumb-font-size] - Sets the font size of the whole trail, 14px by default
  * @cssprop [--breadcrumb-link-color] - Sets the color of linked steps
  * @cssprop [--breadcrumb-link-color-hover] - Sets the color of linked steps on hover or focus
+ * @cssprop [--breadcrumb-link-text-decoration] - Sets the text decoration of linked steps, underline by default, such as none
+ * @cssprop [--breadcrumb-link-text-decoration-hover] - Sets the text decoration of linked steps on hover or focus, underline by default
  * @cssprop [--breadcrumb-current-color] - Sets the color of the current page and unlinked steps
  * @cssprop [--breadcrumb-focus-outline-color] - Sets the color of a linked step's focus outline
  * @cssprop [--breadcrumb-separator] - Sets the separator between steps, as a quoted CSS string, such as '>'
@@ -37,10 +30,10 @@ export type EunomiaBreadcrumbItemData = {
  * @cssprop [--breadcrumb-item-max-width] - Sets the maximum width of each step, beyond which its label truncates with an ellipsis
  * @cssprop [--breadcrumb-gap] - Sets the row gap, used when the trail wraps onto multiple lines
  * @cssprop [--breadcrumb-transition-duration] - Sets the duration of the link hover color transition
- * @fires {NavigationEvent} eunnavigate - Fired before following a step's link, so a client-side router can intercept the navigation. Cancelable
  * @element eun-breadcrumb
  */
 export declare class EunomiaBreadcrumb extends LitElement {
+    #private;
     /**
      * Styles to import to the component.
      *
@@ -50,35 +43,28 @@ export declare class EunomiaBreadcrumb extends LitElement {
      */
     static readonly styles: import("lit").CSSResult[];
     /**
-     * The trail's steps, in order, from the root to the current page. Also
-     * reflected as a JSON-serialized `items` attribute (Lit's default
-     * `Array` converter), matching `eun-toggle-group`/`eun-segmented-filter`
-     * — needed for the API tab's playground, which round-trips components
-     * through an HTML string and would otherwise drop a JS-only property.
-     * @default []
+     * Manual slot assignment : each step is assigned to the slot of its own
+     * list item without the breadcrumb writing a `slot` attribute on the
+     * consumer's elements, which a framework would then reset or report as
+     * a hydration mismatch.
+     * @internal
      */
-    items: EunomiaBreadcrumbItemData[];
+    static readonly shadowRootOptions: ShadowRootInit;
     /**
-     * Re-renders when the slotted `eun-breadcrumb-item`s change, since that
-     * affects both whether the data-driven trail's own last item still
-     * counts as the overall trail's last (current) step, and whether the
-     * items-slot wrapper should stay hidden.
-     * @private
+     * The steps, the host's element children in order.
+     * @internal
      */
-    private readonly handleItemsSlotChange;
-    render(): TemplateResult;
+    private steps;
     /**
-     * Renders a single data-driven step, including its trailing separator —
-     * skipped only when this is genuinely the trail's last visible step, so
-     * it doesn't dangle after a step that's actually followed by slotted
-     * items (see {@link render}).
-     *
-     * @param item the step to render.
-     * @param isLastVisible whether this is the trail's actual last step.
-     * @returns the rendered template.
-     * @private
+     * One slot per step, in order.
+     * @internal
+     * @readonly
      */
-    private renderItem;
+    private readonly stepSlots;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/navigation/breadcrumb/breadcrumb.js

@@ -4,32 +4,44 @@ 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, property } from "lit/decorators.js";
-import { html, LitElement, nothing } from "lit";
-import { classMap } from "lit/directives/class-map.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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _EunomiaBreadcrumb_instances, _EunomiaBreadcrumb_autoCurrent, _EunomiaBreadcrumb_childObserver, _EunomiaBreadcrumb_syncSteps, _EunomiaBreadcrumb_markCurrent, _EunomiaBreadcrumb_setCurrent;
+import { customElement, queryAll, state } from "lit/decorators.js";
+import { html, LitElement } from "lit";
 import { breadcrumbStyles } from "./breadcrumb.styles.js";
-import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
 /**
  * Tag name of the breadcrumb component.
  */
 export const EunomiaBreadcrumbTagName = "eun-breadcrumb";
 /**
  * A trail of links showing the current page's position within a site's
- * hierarchy. The last item always renders as the current, unlinked page
- * regardless of whether it has an href. Intermediate items without an
- * href render as plain, unlinked text, such as a category that groups
- * pages but isn't itself a page.
+ * hierarchy. Each direct child is one step, in order, from the root to the
+ * current page: a native anchor, or any other element, such as a span,
+ * for a step that isn't itself a page. The links stay in the light
+ * DOM, so a framework's own link component, such as Next's Link, keeps its
+ * client-side navigation and prefetching.
  *
- * There are two ways to declare items, usable together: the data-driven
- * items array for the common case, including an optional leading icon per
- * step, or slotted breadcrumb item elements when a step needs more than
- * plain text and an icon, such as rich content.
+ * The breadcrumb wraps each step in its own list item with a separator.
+ * The last step is the current page : unless a step already sets
+ * aria-current, the breadcrumb marks the last one itself.
  *
- * @slot [default] - Breadcrumb item elements, used instead of or alongside items
- * @prop {Array<EunomiaBreadcrumbItemData>} [items=[]] - The trail's steps, in order, from the root to the current page. Each entry may set a label, an href, and an optional leading icon
+ * @slot [default] - The steps, one per direct child : an anchor, or a plain element for an unlinked step
  * @attr {string} [aria-label='Breadcrumb'] - The accessible label for the navigation landmark
+ * @cssprop [--breadcrumb-font-size] - Sets the font size of the whole trail, 14px by default
  * @cssprop [--breadcrumb-link-color] - Sets the color of linked steps
  * @cssprop [--breadcrumb-link-color-hover] - Sets the color of linked steps on hover or focus
+ * @cssprop [--breadcrumb-link-text-decoration] - Sets the text decoration of linked steps, underline by default, such as none
+ * @cssprop [--breadcrumb-link-text-decoration-hover] - Sets the text decoration of linked steps on hover or focus, underline by default
  * @cssprop [--breadcrumb-current-color] - Sets the color of the current page and unlinked steps
  * @cssprop [--breadcrumb-focus-outline-color] - Sets the color of a linked step's focus outline
  * @cssprop [--breadcrumb-separator] - Sets the separator between steps, as a quoted CSS string, such as '>'
@@ -38,87 +50,95 @@ export const EunomiaBreadcrumbTagName = "eun-breadcrumb";
  * @cssprop [--breadcrumb-item-max-width] - Sets the maximum width of each step, beyond which its label truncates with an ellipsis
  * @cssprop [--breadcrumb-gap] - Sets the row gap, used when the trail wraps onto multiple lines
  * @cssprop [--breadcrumb-transition-duration] - Sets the duration of the link hover color transition
- * @fires {NavigationEvent} eunnavigate - Fired before following a step's link, so a client-side router can intercept the navigation. Cancelable
  * @element eun-breadcrumb
  */
 let EunomiaBreadcrumb = class EunomiaBreadcrumb extends LitElement {
     constructor() {
         super(...arguments);
+        _EunomiaBreadcrumb_instances.add(this);
         /**
-         * The trail's steps, in order, from the root to the current page. Also
-         * reflected as a JSON-serialized `items` attribute (Lit's default
-         * `Array` converter), matching `eun-toggle-group`/`eun-segmented-filter`
-         * — needed for the API tab's playground, which round-trips components
-         * through an HTML string and would otherwise drop a JS-only property.
-         * @default []
+         * The steps, the host's element children in order.
+         * @internal
          */
-        this.items = [];
+        this.steps = [];
         /**
-         * Re-renders when the slotted `eun-breadcrumb-item`s change, since that
-         * affects both whether the data-driven trail's own last item still
-         * counts as the overall trail's last (current) step, and whether the
-         * items-slot wrapper should stay hidden.
-         * @private
+         * The step this breadcrumb marked as the current page itself, so the
+         * mark can be removed once it stops being the last step.
+         * @internal
          */
-        this.handleItemsSlotChange = () => {
-            this.requestUpdate();
-        };
+        _EunomiaBreadcrumb_autoCurrent.set(this, void 0);
+        /**
+         * Keeps {@link steps} in sync with the host's children. Created on
+         * connection rather than as a field, so the class stays constructible
+         * where `MutationObserver` doesn't exist, such as during SSR.
+         * @internal
+         */
+        _EunomiaBreadcrumb_childObserver.set(this, void 0);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_syncSteps).call(this);
+        __classPrivateFieldSet(this, _EunomiaBreadcrumb_childObserver, __classPrivateFieldGet(this, _EunomiaBreadcrumb_childObserver, "f") ?? new MutationObserver(() => __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_syncSteps).call(this)), "f");
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_childObserver, "f").observe(this, { childList: true });
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_childObserver, "f")?.disconnect();
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.stepSlots.forEach((slot, index) => {
+            const step = this.steps[index];
+            if (step && slot.assignedElements()[0] !== step) {
+                slot.assign(step);
+            }
+        });
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_markCurrent).call(this);
     }
     render() {
-        // Whichever step ends up last overall — a slotted `eun-breadcrumb-item`
-        // if there's one, otherwise the last data-driven item — is the trail's
-        // real current step. `this.children` (not a queried `<slot>`) is what
-        // makes this available synchronously on the very first render.
-        const hasSlottedItems = this.children.length > 0;
-        const lastIndex = this.items.length - 1;
-        // `role="list"` below is deliberate, not redundant : Safari drops the
-        // implicit "list" role once `list-style: none` is applied (see #list
-        // in the stylesheet), silently skipping this list for VoiceOver users
-        // unless it's restored explicitly.
+        const lastIndex = this.steps.length - 1;
         /* eslint-disable lit-a11y/no-redundant-role */
         return html `
       <nav aria-label=${this.ariaLabel ?? "Breadcrumb"}>
         <ol id="list" role="list">
-          ${this.items.map((item, index) => this.renderItem(item, !hasSlottedItems && index === lastIndex))}
-          <li id="items-slot" class=${classMap({ hidden: !hasSlottedItems })}>
-            <slot @slotchange=${this.handleItemsSlotChange}></slot>
-          </li>
+          ${this.steps.map((_, index) => html `<li>
+                <slot></slot>${index < lastIndex
+            ? html `<span class="separator" aria-hidden="true"></span>`
+            : ""}
+              </li>`)}
         </ol>
       </nav>
     `;
         /* eslint-enable lit-a11y/no-redundant-role */
     }
-    /**
-     * Renders a single data-driven step, including its trailing separator —
-     * skipped only when this is genuinely the trail's last visible step, so
-     * it doesn't dangle after a step that's actually followed by slotted
-     * items (see {@link render}).
-     *
-     * @param item the step to render.
-     * @param isLastVisible whether this is the trail's actual last step.
-     * @returns the rendered template.
-     * @private
-     */
-    renderItem(item, isLastVisible) {
-        const icon = item.icon
-            ? html `<eun-icon name=${item.icon} size="14"></eun-icon>`
-            : nothing;
-        if (isLastVisible) {
-            return html `<li>
-        <span aria-current="page">${icon}${item.label}</span>
-      </li>`;
-        }
-        const separator = html `<span class="separator" aria-hidden="true"></span>`;
-        if (item.href) {
-            return html `<li>
-        <a
-          href=${item.href}
-          @click=${(event) => handleLinkNavigation(this, event, item.href)}
-          >${icon}${item.label}</a
-        >${separator}
-      </li>`;
-        }
-        return html `<li><span>${icon}${item.label}</span>${separator}</li>`;
+};
+_EunomiaBreadcrumb_autoCurrent = new WeakMap();
+_EunomiaBreadcrumb_childObserver = new WeakMap();
+_EunomiaBreadcrumb_instances = new WeakSet();
+_EunomiaBreadcrumb_syncSteps = function _EunomiaBreadcrumb_syncSteps() {
+    this.steps = Array.from(this.children);
+};
+_EunomiaBreadcrumb_markCurrent = function _EunomiaBreadcrumb_markCurrent() {
+    const last = this.steps[this.steps.length - 1];
+    if (__classPrivateFieldGet(this, _EunomiaBreadcrumb_autoCurrent, "f") && __classPrivateFieldGet(this, _EunomiaBreadcrumb_autoCurrent, "f") !== last) {
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_setCurrent).call(this, __classPrivateFieldGet(this, _EunomiaBreadcrumb_autoCurrent, "f"), false);
+        __classPrivateFieldSet(this, _EunomiaBreadcrumb_autoCurrent, undefined, "f");
+    }
+    if (!last || last === __classPrivateFieldGet(this, _EunomiaBreadcrumb_autoCurrent, "f")) {
+        return;
+    }
+    const hasCurrent = this.steps.some((step) => step.getAttribute("aria-current") === "page");
+    if (!hasCurrent) {
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_setCurrent).call(this, last, true);
+        __classPrivateFieldSet(this, _EunomiaBreadcrumb_autoCurrent, last, "f");
+    }
+};
+_EunomiaBreadcrumb_setCurrent = function _EunomiaBreadcrumb_setCurrent(step, current) {
+    if (current) {
+        step.setAttribute("aria-current", "page");
+    }
+    else {
+        step.removeAttribute("aria-current");
     }
 };
 /**
@@ -129,9 +149,23 @@ let EunomiaBreadcrumb = class EunomiaBreadcrumb extends LitElement {
  * @readonly
  */
 EunomiaBreadcrumb.styles = [breadcrumbStyles];
+/**
+ * Manual slot assignment : each step is assigned to the slot of its own
+ * list item without the breadcrumb writing a `slot` attribute on the
+ * consumer's elements, which a framework would then reset or report as
+ * a hydration mismatch.
+ * @internal
+ */
+EunomiaBreadcrumb.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    slotAssignment: "manual",
+};
+__decorate([
+    state()
+], EunomiaBreadcrumb.prototype, "steps", void 0);
 __decorate([
-    property({ type: Array, reflect: true })
-], EunomiaBreadcrumb.prototype, "items", void 0);
+    queryAll("#list slot")
+], EunomiaBreadcrumb.prototype, "stepSlots", void 0);
 EunomiaBreadcrumb = __decorate([
     customElement(EunomiaBreadcrumbTagName)
 ], EunomiaBreadcrumb);

package/dist/components/navigation/breadcrumb/breadcrumb.styles.d.ts

@@ -2,8 +2,11 @@
  * Base style for the breadcrumb component.
  *
  * Custom css variables:
+ * [--breadcrumb-font-size] - Set a custom font size for the whole trail
  * [--breadcrumb-link-color] - Set a custom color for linked steps
  * [--breadcrumb-link-color-hover] - Set a custom color for linked steps on hover/focus
+ * [--breadcrumb-link-text-decoration] - Set a custom text decoration for linked steps, underline by default
+ * [--breadcrumb-link-text-decoration-hover] - Set a custom text decoration for linked steps on hover/focus, underline by default
  * [--breadcrumb-current-color] - Set a custom color for the current page and unlinked steps
  * [--breadcrumb-focus-outline-color] - Set a custom color for a linked step's focus outline
  * [--breadcrumb-separator] - Set a custom separator between steps ; a quoted CSS string, e.g. '>'

package/dist/components/navigation/breadcrumb/breadcrumb.styles.js

@@ -3,8 +3,11 @@ import { css } from "lit";
  * Base style for the breadcrumb component.
  *
  * Custom css variables:
+ * [--breadcrumb-font-size] - Set a custom font size for the whole trail
  * [--breadcrumb-link-color] - Set a custom color for linked steps
  * [--breadcrumb-link-color-hover] - Set a custom color for linked steps on hover/focus
+ * [--breadcrumb-link-text-decoration] - Set a custom text decoration for linked steps, underline by default
+ * [--breadcrumb-link-text-decoration-hover] - Set a custom text decoration for linked steps on hover/focus, underline by default
  * [--breadcrumb-current-color] - Set a custom color for the current page and unlinked steps
  * [--breadcrumb-focus-outline-color] - Set a custom color for a linked step's focus outline
  * [--breadcrumb-separator] - Set a custom separator between steps ; a quoted CSS string, e.g. '>'
@@ -18,7 +21,7 @@ export const breadcrumbStyles = css `
   :host {
     display: block;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--breadcrumb-font-size, var(--eun-font-size-s, 14px));
   }
   #list {
     display: flex;
@@ -32,54 +35,47 @@ export const breadcrumbStyles = css `
   #list li {
     display: inline-flex;
     align-items: center;
-    max-width: var(--breadcrumb-item-max-width, 240px);
-  }
-  #items-slot {
-    display: contents;
-  }
-  #items-slot.hidden {
-    display: none;
+    min-width: 0;
   }
-  #list li > a,
-  #list li > span {
+  ::slotted(*) {
+    max-width: var(--breadcrumb-item-max-width, 240px);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
+    font-weight: var(--eun-font-weight-m, 500);
   }
-  #list li eun-icon {
-    display: inline-flex;
-    vertical-align: middle;
-    margin-inline-end: var(--eun-space-xxs, 1.6px);
-    margin-block-end: 3px;
-  }
-  #list li > a {
+  ::slotted(a[href]) {
     color: var(--breadcrumb-link-color, var(--eun-color-primary-500, #3d6fff));
-    text-decoration: none;
+    font-weight: inherit;
+    text-decoration: var(--breadcrumb-link-text-decoration, underline);
     border-radius: var(--eun-border-radius-s, 5px);
     outline: 2px solid transparent;
     transition:
-      color var(--breadcrumb-transition-duration, 0.2s) ease-out,
-      outline 0.2s ease-out;
+      color var(--breadcrumb-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
-  #list li > a:hover,
-  #list li > a:focus-visible {
+  ::slotted(a[href]:hover),
+  ::slotted(a[href]:focus-visible) {
     color: var(
       --breadcrumb-link-color-hover,
       var(--eun-color-primary-700, #3662e0)
     );
-    text-decoration: underline;
+    text-decoration: var(--breadcrumb-link-text-decoration-hover, underline);
   }
-  #list li > a:focus-visible {
-    text-decoration: none;
+  ::slotted(a[href]:focus-visible) {
     outline-color: var(
       --breadcrumb-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
     outline-offset: 2px;
   }
-  #list li > span {
+  ::slotted(a[aria-current="page"]),
+  ::slotted(a[aria-current="page"]:hover) {
     color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
     font-weight: var(--eun-font-weight-m, 500);
+    text-decoration: none;
   }
   #list li > .separator {
     margin-inline: var(--breadcrumb-separator-gap, var(--eun-space-s, 8px));