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

package/dist/components/layout/animate/animate.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, property } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { animateStyles } from "./animate.styles.js";
+import { mediaBelow } from "../../../breakpoints.js";
 /**
  * Tag name of the animate component.
  */
@@ -31,14 +32,19 @@ const IN_VIEW_ATTR = "in-view";
  *
  * @slot [default] - The content to animate on scroll. Always present in the DOM and readable by assistive technology, regardless of viewport intersection
  * @prop {EunomiaAnimateAnimation} [animation='fade'] - Which transition to apply. None renders the content immediately, with no transition
- * @prop {number} [duration=600] - The transition duration, in milliseconds
+ * @prop {number} [duration=1000] - The transition duration, in milliseconds. Left unset, it follows --animate-duration
  * @prop {number} [delay=0] - The transition delay, in milliseconds
+ * @prop {number} [tabletDelay] - Overrides `delay` below the tablet breakpoint (width < 768px)
+ * @attr {number} [tablet-delay] - Overrides `delay` below the tablet breakpoint (width < 768px)
+ * @prop {number} [mobileDelay] - Overrides `delay` (and `tabletDelay`, if also set) below the mobile breakpoint (width < 600px)
+ * @attr {number} [mobile-delay] - Overrides `delay` (and `tabletDelay`, if also set) below the mobile breakpoint (width < 600px)
  * @prop {boolean} [once=true] - Whether the animation plays only the first time it enters the viewport, or replays every time it re-enters
  * @prop {number} [threshold=0.1] - The ratio of the element, from 0 to 1, that must be visible before the animation triggers
  * @prop {string} [rootMargin='0px'] - The margin applied around the viewport before threshold is evaluated, accepting CSS-like values such as -50px 0px
- * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` at tablet-width viewports and narrower (max-width: 768px). Left unset, the viewport keeps using `animation`
- * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) at mobile-width viewports and narrower (max-width: 600px)
+ * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` below the tablet breakpoint (width < 768px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) below the mobile breakpoint (width < 600px)
  * @cssprop [--animate-distance] - Sets the travel distance for the scroll and faded-scroll animations
+ * @cssprop [--animate-duration=1000ms] - Sets the transition duration of every animate that has no duration of its own, for example once for the whole site
  * @element eun-animate
  */
 let EunomiaAnimate = class EunomiaAnimate extends LitElement {
@@ -51,11 +57,6 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
          * @default fade
          */
         this.animation = "fade";
-        /**
-         * Transition duration, in milliseconds.
-         * @default 600
-         */
-        this.duration = 600;
         /**
          * Transition delay, in milliseconds.
          * @default 0
@@ -150,20 +151,33 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
         this.observer = undefined;
     }
     /**
-     * Forwards `duration`/`delay` to the host's transition through a
-     * shadow-internal `<style>`, only when they differ from the stylesheet's
-     * own defaults : an inline style on the host would be a hydration
-     * mismatch for an SSR framework, since the server never renders it.
+     * Forwards `duration`, `delay` and the per-breakpoint delays to the
+     * host's transition through a shadow-internal `<style>`, only when they
+     * differ from the stylesheet's own defaults : an inline style on the host
+     * would be a hydration mismatch for an SSR framework, since the server
+     * never renders it. The breakpoints match {@link tabletAnimation} and
+     * {@link mobileAnimation}.
      * @private
      */
     renderTiming() {
-        const rules = [
-            this.duration !== 600 ? `--_duration: ${Number(this.duration)}ms;` : "",
+        const host = [
+            this.duration !== undefined
+                ? `--_duration: ${Number(this.duration)}ms;`
+                : "",
             this.delay !== 0 ? `--_delay: ${Number(this.delay)}ms;` : "",
         ].join("");
+        const rules = [
+            host ? `:host { ${host} }` : "",
+            this.tabletDelay !== undefined
+                ? `@media ${mediaBelow("tablet")} { :host { --_delay: ${Number(this.tabletDelay)}ms; } }`
+                : "",
+            this.mobileDelay !== undefined
+                ? `@media ${mediaBelow("mobile")} { :host { --_delay: ${Number(this.mobileDelay)}ms; } }`
+                : "",
+        ].join("");
         return rules
             ? html `<style>
-          :host { ${rules} }
+          ${rules}
         </style>`
             : nothing;
     }
@@ -180,7 +194,7 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
  */
 EunomiaAnimate.styles = animateStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaAnimate.prototype, "animation", void 0);
 __decorate([
     property({ type: Number })
@@ -188,6 +202,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], EunomiaAnimate.prototype, "delay", void 0);
+__decorate([
+    property({ type: Number, attribute: "tablet-delay" })
+], EunomiaAnimate.prototype, "tabletDelay", void 0);
+__decorate([
+    property({ type: Number, attribute: "mobile-delay" })
+], EunomiaAnimate.prototype, "mobileDelay", void 0);
 __decorate([
     property({ type: Boolean })
 ], EunomiaAnimate.prototype, "once", void 0);

package/dist/components/layout/animate/animate.styles.js

@@ -1,24 +1,30 @@
 import { css } from "lit";
+import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Base style for the animate component.
  *
  * Custom css variables:
  * [--animate-distance] - Set a custom travel distance for the scroll and faded-scroll animations
+ * [--animate-duration] - Set a custom transition duration for every animate without a duration of its own
  */
 const base = css `
   :host {
     display: block;
     --_distance: var(--animate-distance, 80px);
-    transition-duration: var(--_duration, 600ms);
+    transition-duration: var(--_duration, var(--animate-duration, 1000ms));
     transition-delay: var(--_delay, 0ms);
     transition-timing-function: ease-in-out;
   }
 
-  :host([animation="fade"]) {
+  :host([animation="none"]) {
+    transition-property: none;
+  }
+
+  :host(:is([animation="fade"], :not([animation]))) {
     opacity: 0;
     transition-property: opacity;
   }
-  :host([animation="fade"][in-view]) {
+  :host(:is([animation="fade"], :not([animation]))[in-view]) {
     opacity: 1;
   }
 
@@ -100,21 +106,8 @@ const base = css `
     }
   }
 `;
-/**
- * \`tablet-animation\`/\`mobile-animation\` overrides — pure CSS \`@media\`
- * switches, mirroring \`base\` above per animation value, so no JS ever
- * needs to read the actual viewport width (see \`animate.ts\`'s own
- * \`tabletAnimation\`/\`mobileAnimation\` doc comments). Placed after \`base\`
- * so equal-specificity ties (e.g. both \`animation="fade"\` and
- * \`tablet-animation="none"\` present at once) resolve in the narrower
- * breakpoint's favor by source order, once its \`@media\` condition is true.
- *
- * \`max-width\` values match \`EUNOMIA_BREAKPOINTS.tablet\`/\`.mobile\`
- * (\`breakpoints.ts\`) — hardcoded here since a plain CSS \`@media\` query
- * can't read a JS constant.
- */
 const breakpoints = css `
-  @media (max-width: 768px) {
+  @media ${cssBelow("tablet")} {
     :host([tablet-animation="none"]) {
       opacity: 1;
       transform: none;
@@ -202,7 +195,7 @@ const breakpoints = css `
     }
   }
 
-  @media (max-width: 600px) {
+  @media ${cssBelow("mobile")} {
     :host([mobile-animation="none"]) {
       opacity: 1;
       transform: none;

package/dist/components/layout/divider/divider.js

@@ -64,7 +64,7 @@ let EunomiaDivider = class EunomiaDivider extends LitElement {
  */
 EunomiaDivider.styles = dividerStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDivider.prototype, "orientation", void 0);
 EunomiaDivider = __decorate([
     customElement(EunomiaDividerTagName)

package/dist/components/layout/divider/divider.styles.js

@@ -13,7 +13,7 @@ const base = css `
     display: block;
   }
 
-  :host([orientation="horizontal"]) {
+  :host(:is([orientation="horizontal"], :not([orientation]))) {
     width: 100%;
     height: 0;
     margin-block: var(--_spacing);

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

@@ -4,7 +4,13 @@ import "../../loader/loader/loader.js";
  * Tag name of the infinite list component.
  */
 export declare const EunomiaInfiniteListTagName = "eun-infinite-list";
-declare const EunomiaInfiniteList_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/load-more-sentinel.mixin.js").LoadMoreSentinelMixinInterface> & typeof LitElement;
+/**
+ * How the list puts its items in the tab order: `roving` keeps the active
+ * item as the single Tab stop of the list, `none` leaves every item out of
+ * it, for items that already hold their own link or button.
+ */
+export type InfiniteListItemTabStop = "roving" | "none";
+declare const EunomiaInfiniteList_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/load-more-sentinel.mixin.js").LoadMoreSentinelMixinInterface> & typeof LitElement;
 /**
  * Wraps a slotted list of items with scroll-triggered pagination: it
  * reveals or fetches more as the user nears the end, shows a loading
@@ -32,21 +38,26 @@ declare const EunomiaInfiniteList_base: import("../../../utils/constructor.type.
  * @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
  */
 export declare class EunomiaInfiniteList extends EunomiaInfiniteList_base {
@@ -66,8 +77,10 @@ export declare class EunomiaInfiniteList extends EunomiaInfiniteList_base {
     pageSize: number;
     /**
      * 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
      */
     virtualize: boolean;
     /**
@@ -98,10 +111,18 @@ export declare class EunomiaInfiniteList extends EunomiaInfiniteList_base {
      */
     hasMore: boolean;
     /**
-     * Accessible label passed to the trailing `eun-loader`.
-     * @default Loading more items…
+     * Accessible label passed to the trailing `eun-loader`. Falls back to
+     * `this.dictionary.infiniteList.loadingMore` (see `LocalizableMixin`)
+     * when unset.
+     */
+    loadingLabel?: string;
+    /**
+     * 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
      */
-    loadingLabel: string;
+    itemTabStop: InfiniteListItemTabStop;
     /**
      * Accessible name for the feed region.
      */
@@ -119,8 +140,9 @@ export declare class EunomiaInfiniteList extends EunomiaInfiniteList_base {
      */
     private itemCount;
     /**
-     * The scrollable container, used as the `IntersectionObserver` root and
-     * to read/react to scroll position.
+     * The container wrapping the feed, which scrolls internally (and becomes
+     * the `IntersectionObserver` root) only once `--infinite-list-height`
+     * bounds it.
      * @internal
      * @readonly
      */
@@ -139,6 +161,7 @@ export declare class EunomiaInfiniteList extends EunomiaInfiniteList_base {
      * @readonly
      */
     private readonly announcerEl?;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changed: PropertyValues): void;

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