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

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

@@ -15,13 +15,14 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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 _EunomiaInfiniteList_instances, _EunomiaInfiniteList_items, _EunomiaInfiniteList_mountedPages, _EunomiaInfiniteList_detachedByPage, _EunomiaInfiniteList_pageHeights, _EunomiaInfiniteList_avgItemHeight, _EunomiaInfiniteList_activeIndex, _EunomiaInfiniteList_mutatingSlot, _EunomiaInfiniteList_requestedPages, _EunomiaInfiniteList_resizeObserver, _EunomiaInfiniteList_applyItemAttributes, _EunomiaInfiniteList_handleScroll, _EunomiaInfiniteList_syncPages, _EunomiaInfiniteList_estimateCenterPage, _EunomiaInfiniteList_estimatePageHeight, _EunomiaInfiniteList_mountPage, _EunomiaInfiniteList_unmountPage, _EunomiaInfiniteList_setupLoadObserver, _EunomiaInfiniteList_maybeLoadMore, _EunomiaInfiniteList_focusItem, _EunomiaInfiniteList_focusOutside, _EunomiaInfiniteList_handleKeydown, _EunomiaInfiniteList_handleFocusIn, _EunomiaInfiniteList_handleSlotChange;
+var _EunomiaInfiniteList_instances, _EunomiaInfiniteList_items, _EunomiaInfiniteList_mountedPages, _EunomiaInfiniteList_detachedByPage, _EunomiaInfiniteList_pageHeights, _EunomiaInfiniteList_avgItemHeight, _EunomiaInfiniteList_activeIndex, _EunomiaInfiniteList_mutatingSlot, _EunomiaInfiniteList_requestedPages, _EunomiaInfiniteList_resizeObserver, _EunomiaInfiniteList_contained, _EunomiaInfiniteList_columns, _EunomiaInfiniteList_applyItemAttributes, _EunomiaInfiniteList_syncLayout, _EunomiaInfiniteList_handleScroll, _EunomiaInfiniteList_handleWindowScroll, _EunomiaInfiniteList_syncPages, _EunomiaInfiniteList_estimateCenterPage, _EunomiaInfiniteList_estimatePageHeight, _EunomiaInfiniteList_mountPage, _EunomiaInfiniteList_unmountPage, _EunomiaInfiniteList_setupLoadObserver, _EunomiaInfiniteList_maybeLoadMore, _EunomiaInfiniteList_focusItem, _EunomiaInfiniteList_focusOutside, _EunomiaInfiniteList_handleKeydown, _EunomiaInfiniteList_handleFocusIn, _EunomiaInfiniteList_handleFocusOut, _EunomiaInfiniteList_handleSlotChange;
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { infiniteListStyles } from "./infinite-list.styles.js";
 import { LoadMoreEvent } from "../../../events/loadmore.event.js";
 import { LoadMoreSentinelMixin } from "../../../mixins/load-more-sentinel.mixin.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import "../../loader/loader/loader.js";
 /**
  * Tag name of the infinite list component.
@@ -72,24 +73,29 @@ const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled
  * @slot [end] - Shown once hasMore is false, its own default, and every item has been slotted at least once. Empty by default, rendering nothing until you provide content
  * @slot [empty] - Shown while there are zero items and loading is false
  * @prop {number} [pageSize=20] - The number of items per page, both the unit the load-more event requests are made in, and the chunk size virtualization mounts and unmounts as a whole
- * @prop {boolean} [virtualize=true] - Detaches pages far from the current scroll position once the list exceeds virtualizeThreshold, replacing each with a single sized spacer. Sound for a single-column, block or flex-column layout, not for a CSS grid of items
+ * @prop {boolean} [virtualize=false] - Detaches pages far from the current scroll position once the list exceeds virtualizeThreshold, replacing each with a single sized spacer. Ignored while --infinite-list-columns is above 1, and best left off when a framework renders the items
  * @prop {number} [virtualizeThreshold=100] - The total known item count above which virtualize actually starts detaching pages. Below it, every page stays mounted, since the bookkeeping isn't worth it for a short list
  * @prop {number} [bufferPages=1] - The number of extra pages kept mounted before and after the page currently in view, so a small scroll doesn't immediately re-trigger a mount or unmount
  * @prop {boolean} [loading=false] - Whether a load-more request is in flight. The list sets this to true itself right before dispatching the event, since only it can detect the scroll trigger. Setting it back to false once the new items are appended, or there aren't any, is your own responsibility, exactly like the search and select components' own loading
  * @prop {boolean} [hasMore=false] - Whether more items can still be obtained, from local unrevealed children or a future load-more page. Defaults to false, so the zero-config, no script needed static case is the default, and API-paginated consumers opt in explicitly. Set it back to false once you've exhausted your dataset, or it keeps requesting empty pages forever
- * @prop {string} [loadingLabel='Loading more items…'] - The accessible label passed to the trailing loading indicator
+ * @prop {string} [loadingLabel] - The accessible label passed to the trailing loading indicator. Defaults to the localized string for the current locale (English: "Loading more items…")
+ * @prop {'roving' | 'none'} [itemTabStop='roving'] - How items enter the tab order. With roving, the active item is the list's single Tab stop. With none, no item is a Tab stop, so Tab only reaches the links and buttons inside them, while the arrow, Page Up/Down, Home and End keys still move between items
  * @prop {string} [label] - The accessible name for the feed region. Strongly recommended
  * @prop {string} [rootMargin='400px'] - How far before the physical end of the list the load-more event triggers, as a CSS-like margin. The default preloads a page before the user actually hits the bottom, so the loading indicator rarely shows for long
  * @fires {LoadMoreEvent} eunloadmore - Fired when more items are needed and hasMore is true. Loading is already true by the time this fires
  * @cssprop [--infinite-list-height] - Sets a 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
+ * @cssprop [--infinite-list-columns] - Sets the number of columns items are laid out in, as a grid. Above 1, virtualization is turned off
  * @cssprop [--infinite-list-gap] - Sets the gap between items
  * @cssprop [--infinite-list-padding] - Sets the padding around the scrollable area
+ * @cssprop [--infinite-list-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --infinite-list-padding is set
+ * @cssprop [--infinite-list-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --infinite-list-padding is set
  * @cssprop [--infinite-list-loading-padding] - Sets the padding around the trailing loading indicator
  * @cssprop [--infinite-list-end-color] - Sets the color of the default end and empty slot area
  * @cssprop [--infinite-list-focus-outline-color] - Sets a fallback focus outline color applied to slotted items that don't set their own
+ * @csspart feed - The element wrapping the items, laid out as a grid
  * @element eun-infinite-list
  */
-let EunomiaInfiniteList = class EunomiaInfiniteList extends LoadMoreSentinelMixin(LitElement) {
+let EunomiaInfiniteList = class EunomiaInfiniteList extends LocalizableMixin(LoadMoreSentinelMixin(LitElement)) {
     constructor() {
         super(...arguments);
         _EunomiaInfiniteList_instances.add(this);
@@ -100,10 +106,12 @@ let EunomiaInfiniteList = class EunomiaInfiniteList extends LoadMoreSentinelMixi
         this.pageSize = 20;
         /**
          * Detaches pages far from the current scroll position once the list
-         * exceeds `virtualizeThreshold`.
-         * @default true
+         * exceeds `virtualizeThreshold`. Off by default, so a framework that
+         * renders the items (and can only set attributes before the element
+         * upgrades) never has to turn it off.
+         * @default false
          */
-        this.virtualize = true;
+        this.virtualize = false;
         /**
          * Total known item count above which `virtualize` actually starts
          * detaching pages.
@@ -132,10 +140,12 @@ let EunomiaInfiniteList = class EunomiaInfiniteList extends LoadMoreSentinelMixi
          */
         this.hasMore = false;
         /**
-         * Accessible label passed to the trailing `eun-loader`.
-         * @default Loading more items…
+         * How items enter the tab order : `roving` keeps the active item as the
+         * list's single Tab stop, `none` leaves them all out of it, for items
+         * that already hold their own link or button.
+         * @default roving
          */
-        this.loadingLabel = "Loading more items…";
+        this.itemTabStop = "roving";
         /**
          * How far before the physical end of the list `eunloadmore` triggers.
          * @default 400px
@@ -205,9 +215,25 @@ let EunomiaInfiniteList = class EunomiaInfiniteList extends LoadMoreSentinelMixi
          * @internal
          */
         _EunomiaInfiniteList_resizeObserver.set(this, void 0);
+        /**
+         * Whether `--infinite-list-height` bounds {@link scrollerEl}, so the list
+         * scrolls internally instead of the page.
+         * @internal
+         */
+        _EunomiaInfiniteList_contained.set(this, false);
+        /**
+         * Column count read from `--infinite-list-columns`.
+         * @internal
+         */
+        _EunomiaInfiniteList_columns.set(this, 1);
         _EunomiaInfiniteList_handleScroll.set(this, () => {
             this.scheduleAnimationFrame(() => __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_syncPages).call(this));
         });
+        _EunomiaInfiniteList_handleWindowScroll.set(this, () => {
+            if (!__classPrivateFieldGet(this, _EunomiaInfiniteList_contained, "f")) {
+                __classPrivateFieldGet(this, _EunomiaInfiniteList_handleScroll, "f").call(this);
+            }
+        });
         _EunomiaInfiniteList_handleKeydown.set(this, (event) => {
             if (event.defaultPrevented) {
                 return;
@@ -257,19 +283,47 @@ let EunomiaInfiniteList = class EunomiaInfiniteList extends LoadMoreSentinelMixi
             __classPrivateFieldSet(this, _EunomiaInfiniteList_activeIndex, index, "f");
             __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_applyItemAttributes).call(this);
         });
+        /**
+         * Drops the `tabindex` an item only got to take focus from the keyboard
+         * (`itemTabStop` set to `none`) once focus leaves it.
+         * @private
+         */
+        _EunomiaInfiniteList_handleFocusOut.set(this, (event) => {
+            const target = event.target;
+            if (this.itemTabStop === "none" &&
+                target instanceof HTMLElement &&
+                __classPrivateFieldGet(this, _EunomiaInfiniteList_items, "f").includes(target)) {
+                target.removeAttribute("tabindex");
+            }
+        });
         _EunomiaInfiniteList_handleSlotChange.set(this, () => {
             this.syncItemsFromLightDom();
         });
     }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("scroll", __classPrivateFieldGet(this, _EunomiaInfiniteList_handleWindowScroll, "f"), {
+            passive: true,
+        });
+        if (this.hasUpdated && this.scrollerEl) {
+            __classPrivateFieldGet(this, _EunomiaInfiniteList_resizeObserver, "f")?.observe(this.scrollerEl);
+            __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_setupLoadObserver).call(this);
+        }
+    }
     disconnectedCallback() {
         this.teardownLoadMoreSentinel();
         __classPrivateFieldGet(this, _EunomiaInfiniteList_resizeObserver, "f")?.disconnect();
+        window.removeEventListener("scroll", __classPrivateFieldGet(this, _EunomiaInfiniteList_handleWindowScroll, "f"));
         super.disconnectedCallback();
     }
     firstUpdated() {
+        __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_syncLayout).call(this);
         this.syncItemsFromLightDom();
         __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_setupLoadObserver).call(this);
-        __classPrivateFieldSet(this, _EunomiaInfiniteList_resizeObserver, new ResizeObserver(() => this.scheduleAnimationFrame(() => __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_syncPages).call(this))), "f");
+        __classPrivateFieldSet(this, _EunomiaInfiniteList_resizeObserver, new ResizeObserver(() => this.scheduleAnimationFrame(() => {
+            __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_syncLayout).call(this);
+            __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_syncPages).call(this);
+        })), "f");
         if (this.scrollerEl) {
             __classPrivateFieldGet(this, _EunomiaInfiniteList_resizeObserver, "f").observe(this.scrollerEl);
             this.scrollerEl.addEventListener("scroll", __classPrivateFieldGet(this, _EunomiaInfiniteList_handleScroll, "f"), {
@@ -278,13 +332,14 @@ let EunomiaInfiniteList = class EunomiaInfiniteList extends LoadMoreSentinelMixi
         }
         this.addEventListener("keydown", __classPrivateFieldGet(this, _EunomiaInfiniteList_handleKeydown, "f"));
         this.addEventListener("focusin", __classPrivateFieldGet(this, _EunomiaInfiniteList_handleFocusIn, "f"));
+        this.addEventListener("focusout", __classPrivateFieldGet(this, _EunomiaInfiniteList_handleFocusOut, "f"));
     }
     updated(changed) {
         super.updated(changed);
         if (changed.has("rootMargin")) {
             __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_setupLoadObserver).call(this);
         }
-        if (changed.has("hasMore")) {
+        if (changed.has("hasMore") || changed.has("itemTabStop")) {
             __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_applyItemAttributes).call(this);
         }
         if (changed.has("virtualize") ||
@@ -346,7 +401,8 @@ let EunomiaInfiniteList = class EunomiaInfiniteList extends LoadMoreSentinelMixi
         __classPrivateFieldSet(this, _EunomiaInfiniteList_mountedPages, mountedPages, "f");
         __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_applyItemAttributes).call(this);
         if (isAppend && addedCount > 0 && this.announcerEl) {
-            this.announcerEl.textContent = `${addedCount} more item${addedCount > 1 ? "s" : ""} loaded`;
+            this.announcerEl.textContent =
+                this.dictionary.infiniteList.itemsLoaded(addedCount);
         }
         this.scheduleAnimationFrame(() => __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_syncPages).call(this));
         this.reobserveSentinel(this.sentinelEl);
@@ -358,6 +414,7 @@ let EunomiaInfiniteList = class EunomiaInfiniteList extends LoadMoreSentinelMixi
       <div id="scroller">
         <div
           id="feed"
+          part="feed"
           role="feed"
           aria-label=${ifDefined(this.label)}
           aria-busy=${this.loading ? "true" : "false"}
@@ -366,7 +423,10 @@ let EunomiaInfiniteList = class EunomiaInfiniteList extends LoadMoreSentinelMixi
         </div>
         <div id="sentinel" aria-hidden="true"></div>
         <div id="loading-row" ?hidden=${!this.loading}>
-          <eun-loader label=${this.loadingLabel}></eun-loader>
+          <eun-loader
+            label=${this.loadingLabel ??
+            this.dictionary.infiniteList.loadingMore}
+          ></eun-loader>
         </div>
         <div id="end" ?hidden=${!showEnd}><slot name="end"></slot></div>
         <div id="empty" ?hidden=${!showEmpty}><slot name="empty"></slot></div>
@@ -389,13 +449,18 @@ _EunomiaInfiniteList_activeIndex = new WeakMap();
 _EunomiaInfiniteList_mutatingSlot = new WeakMap();
 _EunomiaInfiniteList_requestedPages = new WeakMap();
 _EunomiaInfiniteList_resizeObserver = new WeakMap();
+_EunomiaInfiniteList_contained = new WeakMap();
+_EunomiaInfiniteList_columns = new WeakMap();
 _EunomiaInfiniteList_handleScroll = new WeakMap();
+_EunomiaInfiniteList_handleWindowScroll = new WeakMap();
 _EunomiaInfiniteList_handleKeydown = new WeakMap();
 _EunomiaInfiniteList_handleFocusIn = new WeakMap();
+_EunomiaInfiniteList_handleFocusOut = new WeakMap();
 _EunomiaInfiniteList_handleSlotChange = new WeakMap();
 _EunomiaInfiniteList_instances = new WeakSet();
 _EunomiaInfiniteList_applyItemAttributes = function _EunomiaInfiniteList_applyItemAttributes() {
     const setSize = this.hasMore ? -1 : __classPrivateFieldGet(this, _EunomiaInfiniteList_items, "f").length;
+    const roving = this.itemTabStop !== "none";
     __classPrivateFieldGet(this, _EunomiaInfiniteList_items, "f").forEach((item, index) => {
         if (!item.isConnected) {
             return;
@@ -405,16 +470,40 @@ _EunomiaInfiniteList_applyItemAttributes = function _EunomiaInfiniteList_applyIt
         }
         item.setAttribute("aria-posinset", String(index + 1));
         item.setAttribute("aria-setsize", String(setSize));
-        item.tabIndex = index === __classPrivateFieldGet(this, _EunomiaInfiniteList_activeIndex, "f") ? 0 : -1;
+        if (roving && index === __classPrivateFieldGet(this, _EunomiaInfiniteList_activeIndex, "f")) {
+            item.tabIndex = 0;
+        }
+        else if (!item.matches(":focus")) {
+            item.removeAttribute("tabindex");
+        }
     });
 };
+_EunomiaInfiniteList_syncLayout = function _EunomiaInfiniteList_syncLayout() {
+    const scroller = this.scrollerEl;
+    if (!scroller) {
+        return;
+    }
+    const columns = Number.parseInt(getComputedStyle(this).getPropertyValue("--infinite-list-columns"), 10);
+    __classPrivateFieldSet(this, _EunomiaInfiniteList_columns, columns > 0 ? columns : 1, "f");
+    const contained = getComputedStyle(scroller).maxBlockSize !== "none";
+    if (contained === __classPrivateFieldGet(this, _EunomiaInfiniteList_contained, "f")) {
+        return;
+    }
+    __classPrivateFieldSet(this, _EunomiaInfiniteList_contained, contained, "f");
+    scroller.classList.toggle("contained", contained);
+    if (this.loadObserver) {
+        __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_setupLoadObserver).call(this);
+    }
+};
 _EunomiaInfiniteList_syncPages = function _EunomiaInfiniteList_syncPages() {
     const totalItems = __classPrivateFieldGet(this, _EunomiaInfiniteList_items, "f").length;
     if (totalItems === 0) {
         return;
     }
     const totalPages = Math.ceil(totalItems / this.pageSize);
-    if (!this.virtualize || totalItems <= this.virtualizeThreshold) {
+    if (!this.virtualize ||
+        __classPrivateFieldGet(this, _EunomiaInfiniteList_columns, "f") > 1 ||
+        totalItems <= this.virtualizeThreshold) {
         for (let page = 0; page < totalPages; page++) {
             __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_mountPage).call(this, page);
         }
@@ -440,7 +529,9 @@ _EunomiaInfiniteList_estimateCenterPage = function _EunomiaInfiniteList_estimate
     if (!scroller) {
         return 0;
     }
-    const target = scroller.scrollTop + scroller.clientHeight / 2;
+    const target = __classPrivateFieldGet(this, _EunomiaInfiniteList_contained, "f")
+        ? scroller.scrollTop + scroller.clientHeight / 2
+        : window.innerHeight / 2 - scroller.getBoundingClientRect().top;
     let offset = 0;
     for (let page = 0; page < totalPages; page++) {
         const height = __classPrivateFieldGet(this, _EunomiaInfiniteList_pageHeights, "f")[page] ?? __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_estimatePageHeight).call(this, page);
@@ -523,7 +614,7 @@ _EunomiaInfiniteList_unmountPage = function _EunomiaInfiniteList_unmountPage(pag
     __classPrivateFieldGet(this, _EunomiaInfiniteList_mountedPages, "f").delete(page);
 };
 _EunomiaInfiniteList_setupLoadObserver = function _EunomiaInfiniteList_setupLoadObserver() {
-    this.setupLoadObserver(this.sentinelEl, this.scrollerEl ?? null, this.rootMargin, () => __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_maybeLoadMore).call(this));
+    this.setupLoadObserver(this.sentinelEl, __classPrivateFieldGet(this, _EunomiaInfiniteList_contained, "f") ? (this.scrollerEl ?? null) : null, this.rootMargin, () => __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_maybeLoadMore).call(this));
 };
 _EunomiaInfiniteList_maybeLoadMore = function _EunomiaInfiniteList_maybeLoadMore() {
     if (this.loading || !this.hasMore) {
@@ -542,6 +633,9 @@ _EunomiaInfiniteList_focusItem = function _EunomiaInfiniteList_focusItem(index)
     __classPrivateFieldSet(this, _EunomiaInfiniteList_activeIndex, index, "f");
     __classPrivateFieldGet(this, _EunomiaInfiniteList_instances, "m", _EunomiaInfiniteList_applyItemAttributes).call(this);
     const target = __classPrivateFieldGet(this, _EunomiaInfiniteList_items, "f")[index];
+    if (this.itemTabStop === "none") {
+        target.tabIndex = 0;
+    }
     target.focus();
     target.scrollIntoView({ block: "nearest" });
 };
@@ -587,6 +681,9 @@ __decorate([
 __decorate([
     property({ attribute: "loading-label" })
 ], EunomiaInfiniteList.prototype, "loadingLabel", void 0);
+__decorate([
+    property({ attribute: "item-tab-stop" })
+], EunomiaInfiniteList.prototype, "itemTabStop", void 0);
 __decorate([
     property()
 ], EunomiaInfiniteList.prototype, "label", void 0);

package/dist/components/layout/infinite-list/infinite-list.styles.d.ts

@@ -3,8 +3,11 @@
  *
  * 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

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.styles.js

@@ -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 {

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 {