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

package/dist/components/form/time-picker/time-picker.js

@@ -9,7 +9,7 @@ import { html, LitElement, nothing } from "lit";
 import { DisabledMixin, } from "../../../mixins/disabled.mixin.js";
 import { ReadonlyMixin, } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
-import { FormMixin } from "../../../mixins/form.mixin.js";
+import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
@@ -24,6 +24,8 @@ import { timePickerColumnsStyles } from "./time-picker-columns.styles.js";
 import { renderTimePickerColumns } from "./time-picker-columns.js";
 import { timePickerListStyles } from "./time-picker-list.styles.js";
 import { renderTimePickerList } from "./time-picker-list.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { mediaBelow } from "../../../breakpoints.js";
 /**
  * Tag name of the time-picker component.
  */
@@ -78,7 +80,8 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
  * @attr {string} [apply-label='Apply'] - The label of the mobile modal's confirm button
@@ -110,6 +113,9 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @cssprop [--time-picker-selected-color] - Sets the text color of the selected item in the list panel mode
  * @cssprop [--time-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--time-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition
+ * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-time-picker
  */
 let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
@@ -227,7 +233,10 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             const format = this.resolvedHourFormat();
             if (isPartiallyFilled(this.segments) &&
                 !clockSegmentsToTime(this.segments, format)) {
-                return { validity: { badInput: true }, message: "Enter a valid time" };
+                return {
+                    validity: { badInput: true },
+                    message: this.dictionary.validation.invalidTime,
+                };
             }
             if (this.value) {
                 const { hour, minute } = getZonedParts(this.value, this.timezone);
@@ -285,7 +294,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
                 this.isModalOpen = true;
                 return;
             }
-            this.updateComplete.then(() => {
+            void this.updateComplete.then(() => {
                 const popover = this.popoverEl;
                 if (!popover) {
                     return;
@@ -318,7 +327,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
                     });
                 }
                 this.observeAnchorVisibility(this.fieldWrapperEl, () => this.closePopover());
-                this.updateComplete.then(() => this.panelMode === "list"
+                void this.updateComplete.then(() => this.panelMode === "list"
                     ? this.focusListSelection()
                     : this.focusFirstSpinbutton());
                 return;
@@ -469,10 +478,8 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      */
     updated(changed) {
         super.updated(changed);
-        if (changed.has("valid") ||
-            changed.has("hideError") ||
-            changed.has("disabled")) {
-            this.setAttribute("aria-invalid", String(!this.hideError && !this.disabled && !this.valid));
+        if (hasErrorDisplayChange(changed)) {
+            this.setAttribute("aria-invalid", String(this.showError));
         }
     }
     /**
@@ -498,7 +505,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      * @private
      */
     isMobileViewport() {
-        return window.matchMedia("(max-width: 767px)").matches;
+        return window.matchMedia(mediaBelow("tablet")).matches;
     }
     /**
      * The hour format actually in effect, resolving `hourFormat`/`locale`
@@ -599,7 +606,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      * The popover's open/close animation duration, in ms : `0` if
      * `noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--time-picker-panel-transition-duration` (default
-     * `200ms`).
+     * `--eun-duration-m`).
      *
      * @param el the popover to read `--time-picker-panel-transition-duration` off.
      * @private
@@ -609,18 +616,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(el)
-            .getPropertyValue("--time-picker-panel-transition-duration")
-            .trim();
-        if (raw) {
-            const parsed = raw.endsWith("ms")
-                ? Number.parseFloat(raw)
-                : Number.parseFloat(raw) * 1000;
-            if (Number.isFinite(parsed) && parsed >= 0) {
-                return parsed;
-            }
-        }
-        return 200;
+        return resolveDurationMs(el, "--time-picker-panel-transition-duration", "m", 200);
     }
     /**
      * Plays the fade/scaleY-in, replacing any {@link popoverAnimation}
@@ -638,7 +634,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         this.popoverAnimation = popover.animate([
             { opacity: 0, transform: "scaleY(0.01)" },
             { opacity: 1, transform: "scaleY(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(popover), fill: "forwards" });
     }
     /**
      * Closes the popover, if open — accepting an instant, unanimated close
@@ -676,7 +672,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         const animation = popover.animate([
             { opacity: 1, transform: "scaleY(1)" },
             { opacity: 0, transform: "scaleY(0.01)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(popover), fill: "forwards" });
         this.popoverAnimation = animation;
         animation.finished
             .then(() => {
@@ -949,7 +945,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
     renderTimezoneLabel() {
         if (this.hideTimezoneLabel ||
             !this.timezone ||
-            isSameTimeZone(this.timezone, undefined)) {
+            isSameTimeZone(this.timezone)) {
             return nothing;
         }
         const label = getTimeZoneOffsetLabel(this.value ?? new Date(), this.timezone, {

package/dist/components/form/time-picker/time-picker.styles.js

@@ -28,8 +28,8 @@ const timePicker = css `
     outline: 1px solid transparent;
     box-sizing: border-box;
     transition:
-      border-color 0.15s ease,
-      outline-color 0.15s ease;
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
   :host(:not([aria-readonly="true"]))
     #field-wrapper:hover:not(:has(:disabled)) {
@@ -120,7 +120,8 @@ const timePicker = css `
     color: var(--_iconColor);
     outline: 2px solid transparent;
     cursor: pointer;
-    transition: outline 0.2s ease-out;
+    transition: outline var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
   }
   #clock-trigger:hover:not(:disabled) {
     color: var(--_textColor);

package/dist/components/layout/animate/animate.d.ts

@@ -20,14 +20,19 @@ export type EunomiaAnimateAnimation = "none" | "fade" | "scroll-right" | "scroll
  *
  * @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
  */
 export declare class EunomiaAnimate extends LitElement {
@@ -47,15 +52,30 @@ export declare class EunomiaAnimate extends LitElement {
      */
     animation: EunomiaAnimateAnimation;
     /**
-     * Transition duration, in milliseconds.
-     * @default 600
+     * Transition duration, in milliseconds. Left `undefined`, the stylesheet
+     * applies `--animate-duration`, `1000ms` by default.
+     * @default undefined
      */
-    duration: number;
+    duration?: number;
     /**
      * Transition delay, in milliseconds.
      * @default 0
      */
     delay: number;
+    /**
+     * Overrides `delay` at tablet-width viewports and narrower, with the same
+     * `@media` switch as {@link tabletAnimation}. A stagger between cards in
+     * a desktop grid, for example, makes no sense once they're stacked.
+     * @default undefined
+     */
+    tabletDelay?: number;
+    /**
+     * Overrides `delay` (and `tabletDelay`, if also set) at mobile-width
+     * viewports and narrower, with the same `@media` switch as
+     * {@link mobileAnimation}.
+     * @default undefined
+     */
+    mobileDelay?: number;
     /**
      * Whether the animation plays only the first time it enters the
      * viewport (unobserved right after), or replays every time it re-enters.
@@ -75,8 +95,8 @@ export declare class EunomiaAnimate extends LitElement {
      */
     rootMargin: string;
     /**
-     * Overrides `animation` at tablet-width viewports and narrower
-     * (`max-width: 768px`, matching `EUNOMIA_BREAKPOINTS.tablet`). Purely a
+     * Overrides `animation` below the tablet breakpoint
+     * (`mediaBelow("tablet")`, `width < 768px`). Purely a
      * CSS `@media` switch (`animate.styles.ts`, mirrored in
      * `animate-ssr.css` for the pre-hydration state) — never read from JS,
      * so there's no `matchMedia` listener to keep in sync with the actual
@@ -87,9 +107,9 @@ export declare class EunomiaAnimate extends LitElement {
      */
     tabletAnimation?: EunomiaAnimateAnimation;
     /**
-     * Overrides `animation` (and `tabletAnimation`, if also set) at
-     * mobile-width viewports and narrower (`max-width: 600px`, matching
-     * `EUNOMIA_BREAKPOINTS.mobile`). Same pure-CSS mechanism as
+     * Overrides `animation` (and `tabletAnimation`, if also set)
+     * below the mobile breakpoint (`mediaBelow("mobile")`,
+     * `width < 600px`). Same pure-CSS mechanism as
      * {@link tabletAnimation}.
      * @default undefined
      */
@@ -130,10 +150,12 @@ export declare class EunomiaAnimate extends LitElement {
      */
     private teardownObserver;
     /**
-     * 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
      */
     private renderTiming;

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;
     }
@@ -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,19 +1,25 @@
 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="none"]) {
+    transition-property: none;
+  }
+
   :host([animation="fade"]) {
     opacity: 0;
     transition-property: opacity;
@@ -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/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;