@fusion.dev/helix-headless 0.173.0 → 0.175.0

package/dist/lightbox/root/lightbox-root.d.ts

@@ -16,7 +16,9 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  *
  * A lightbox shows one item at a time and has no scrolling track, so `active`
  * holds the current item, as in `Tabs`. The arrow keys change the item while
- * focus stays in the dialog.
+ * focus stays in the dialog. `active` names an item by its `value`, and an
+ * item with no `value` by its place, counted from 1, as in `Steps`, so a set
+ * written without values moves and `helix-activate` says `1`, `2` and so on.
  *
  * Set `controls` for the viewer's own previous, next and close controls, named
  * by `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can
@@ -33,9 +35,9 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * `--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a
  * swipe moves to the next item only while the item is at its own size. With
  * `controls`, the viewer also draws zoom-out and zoom-in controls, for a
- * pointer with no wheel and no second finger. Once a reader stops zooming, the
- * live region says the new scale in the words of `zoom-status-label`, such as
- * "Zoomed to 150%".
+ * pointer with no wheel and no second finger. Once a reader stops zooming, and
+ * at once for a key or a zoom control, the live region says the new scale in
+ * the words of `zoom-status-label`, such as "Zoomed to 150%".
  *
  * Each item is a slide: a `group` with the role description in
  * `slide-role-label`, named by its `label` or by `slide-label`. A touch or a pen
@@ -232,7 +234,14 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private readonly zoomer;
     /** Writes the zoom on the viewport, and nothing at the item's own size. */
     private drawZoom;
-    /** Says the new scale in the live region, a moment after the last change. */
+    /** Whether the zoom is changing by one discrete step, a key or a control, which is said at once. */
+    private zoomStep;
+    /**
+     * Says the new scale in the live region: a moment after the last change of
+     * a pinch, a drag or the wheel, and at once for a key or a zoom control,
+     * which is one change a reader is waiting to hear. Said only after the
+     * pause, a reader pressing `+` heard nothing until it ended.
+     */
     private sayZoom;
     /**
      * Zooms the shown item to `scale`, held between `1` and `max-zoom`, about
@@ -346,12 +355,23 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private zoomIn;
     /** Zooms out by as much, as `-` and the zoom-out control do. */
     private zoomOut;
+    /** Changes the zoom by one discrete step, which `sayZoom` says at once. */
+    private stepZoom;
     /** Home and End, which are an index rather than a step. */
     private toEnd;
     /** The item shown at the last update, whose zoom a different item does not keep. */
     private zoomedItem;
     /** The item on screen: the one `active` names, or the first where it names none. */
     private get shown();
+    /** The item `active` names, by `value` or by place, or the first where it names none. */
+    private named;
+    /**
+     * Requests a new shown item, and returns whether it moved.
+     *
+     * Where `active` names nothing, it is first written with the item on
+     * screen, so `helix-activate` names the item you saw as `previous`.
+     */
+    requestActive(next: string, cause?: string): boolean;
     /**
      * A press on the backdrop or on the empty area around the item.
      *

package/dist/lightbox/root/lightbox-root.js

@@ -12,6 +12,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessLightboxItem } from '../item/lightbox-item.js';
 import { percentOf } from '../zoom.js';
 import { ZoomController } from '../zoom-controller.js';
+const keyOf = (item, index) => item.value || String(index + 1);
 let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerActive(MixinControllerOpen(HelixElement)) {
     constructor() {
         super(...arguments);
@@ -76,6 +77,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             onChange: (scale, pan) => this.drawZoom(scale, pan),
             surface: () => this.partNamed('viewport'),
         });
+        this.zoomStep = false;
         this.fullscreen = new FullscreenController(this, (full) => {
             this.filled = full;
         });
@@ -164,7 +166,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.zoomSaid.cancel();
             return;
         }
-        this.zoomSaid.start(400, () => {
+        this.zoomSaid.start(this.zoomStep ? 0 : 400, () => {
             this.announcement = formatWords(this, 'zoomStatusLabel', {
                 percent: percentOf(this.zoomScale),
                 scale: this.zoomScale,
@@ -225,7 +227,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             : Math.min(Math.max(from + by, 0), last);
         const target = items[next];
         if (target && target !== shown) {
-            this.requestActive(target.value);
+            this.requestActive(keyOf(target, next));
         }
     }
     zoomKey(key) {
@@ -239,7 +241,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.zoomOut();
         }
         else if (key === '0') {
-            this.zoomer.reset();
+            this.stepZoom(() => this.zoomer.reset());
         }
         else {
             return false;
@@ -266,19 +268,40 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         return true;
     }
     zoomIn() {
-        this.zoomer.zoomTo(this.zoomer.scale * 1.5);
+        this.stepZoom(() => this.zoomer.zoomTo(this.zoomer.scale * 1.5));
     }
     zoomOut() {
-        this.zoomer.zoomTo(this.zoomer.scale / 1.5);
+        this.stepZoom(() => this.zoomer.zoomTo(this.zoomer.scale / 1.5));
+    }
+    stepZoom(change) {
+        this.zoomStep = true;
+        try {
+            change();
+        }
+        finally {
+            this.zoomStep = false;
+        }
     }
     toEnd(at) {
         const target = this.items[at];
         if (target && target !== this.shown) {
-            this.requestActive(target.value);
+            this.requestActive(keyOf(target, at));
         }
     }
     get shown() {
-        return resolveActiveItem(this.active ?? '', this.items);
+        return this.named(this.items);
+    }
+    named(items) {
+        const keyed = items.map((item, index) => ({ item, value: keyOf(item, index) }));
+        return resolveActiveItem(this.active ?? '', keyed)?.item;
+    }
+    requestActive(next, cause) {
+        const items = this.items;
+        const shown = this.active === '' ? this.shown : undefined;
+        if (shown) {
+            this.active = keyOf(shown, items.indexOf(shown));
+        }
+        return super.requestActive(next, cause);
     }
     dragged(event) {
         const from = this.pressedAt;
@@ -348,7 +371,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     }
     mark() {
         const items = this.items;
-        const current = resolveActiveItem(this.active, items);
+        const current = this.named(items);
         items.forEach((item, at) => {
             item.current = item === current;
             whenHydrated(item, () => {
@@ -376,7 +399,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             return;
         }
         const items = this.items;
-        const current = resolveActiveItem(this.active, items);
+        const current = this.named(items);
         const at = current ? items.indexOf(current) : -1;
         this.announcement =
             at === -1 || !current
@@ -389,7 +412,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     }
     place() {
         const items = this.items;
-        const current = resolveActiveItem(this.active, items);
+        const current = this.named(items);
         return current
             ? formatWords(this, 'statusLabel', {
                 count: items.length,

package/dist/notifications/group/notification-group.js

@@ -41,7 +41,7 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { role: 'listitem' });
+        hostAria(this.internals, { label: this.label, role: 'article' });
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -92,7 +92,7 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
                 ${count}`}
         <span part="actions"><slot name="actions"></slot></span>
       </div>
-      <div id=${ITEMS_ID} part="items" role="list" aria-labelledby=${LABEL_ID}>
+      <div id=${ITEMS_ID} part="items" role="feed" aria-labelledby=${LABEL_ID}>
         <slot></slot>
       </div>`;
     }

package/dist/notifications/notification/notification.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, deepActiveElement, deepContains, focusableElements, HelixElement, HelixReadEvent, hostAria, MixinDismissible, requestChange, slotFilled, words, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, deepContains, focusableElements, HelixElement, HelixReadEvent, MixinDismissible, requestChange, slotFilled, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -61,9 +61,6 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { role: 'listitem' });
-        this.internals.ariaPosInSet = this.position > 0 ? String(this.position) : null;
-        this.internals.ariaSetSize = this.setSize === 0 ? null : String(this.setSize);
         this.toggleState('read', this.read);
     }
     updated(changed) {
@@ -116,8 +113,10 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     render() {
         return html `<div
       part="item"
-      role="group"
+      role="article"
       aria-labelledby="label"
+      aria-posinset=${this.position > 0 ? String(this.position) : nothing}
+      aria-setsize=${this.setSize === 0 ? nothing : String(this.setSize)}
       tabindex=${this.stop ? 0 : -1}
     >
       <span part="media"><slot name="media"></slot></span>

package/dist/notifications/root/notifications-root.d.ts

@@ -21,8 +21,9 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * the items and written to an attribute, so a stylesheet and a badge can both
  * use it without counting.
  *
- * **The feed is one `Tab` stop for its rows.** Each row takes focus itself and
- * is read by its label. `ArrowDown` and `ArrowUp` move to the next and the
+ * **The feed is one `Tab` stop for its rows.** It is an APG feed: the list is
+ * a `feed`, busy while `loading` is set, and each row is an `article` that
+ * takes focus itself and is read by its label. `ArrowDown` and `ArrowUp` move to the next and the
  * previous row, `Home` and `End` to the first and the last, and `PageDown` and
  * `PageUp` move a row on or back from anywhere inside one, as in the APG feed
  * pattern. The controls inside a row stay in the `Tab` order. Set `total` when
@@ -77,7 +78,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @csspart error - Shown while `load-error` is set, under any rows there are, in place of the empty and loading lines.
  * @csspart footer - The region below the list.
  * @csspart header - The region above the list.
- * @csspart list - The list itself.
+ * @csspart list - The list itself, a `feed` whose rows are its articles.
  * @csspart live - A copy of the empty, loading and error messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the feed is loading.
  * @csspart mark-all - The control that marks everything read.

package/dist/notifications/root/notifications-root.js

@@ -291,7 +291,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
       </div>
       <div
         part="list"
-        role="list"
+        role="feed"
         aria-busy=${this.loading ? 'true' : nothing}
         aria-label=${this.label || nothing}
       >

package/dist/pagination/root/pagination-root.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary Controls for moving between the pages of a long set of results.
  *
@@ -63,6 +63,7 @@ export declare class HelixHeadlessPagination extends HelixElement {
      * `registerWords('de', { 'helix-pagination': { nextLabel: 'Nächste Seite' } })`.
      */
     static words: string;
+    static styles: CSSResultGroup;
     /**
      * How many pages to show at each end, whatever the current one is.
      */

package/dist/pagination/root/pagination-root.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, deepActiveElement, fillTemplate, formatNumbers, formatWords, HelixActivateEvent, HelixElement, HelixNavigateEvent, hostAria, requestChange, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDoubleLeft, caretDoubleRight, caretLeft, caretRight, } from '@fusion.dev/helix-icons';
-import { html, nothing } from 'lit';
+import { css, html, nothing, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -48,6 +48,11 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         };
     }
     static { this.words = 'helix-pagination'; }
+    static { this.styles = css `
+    [part='list'] {
+      list-style: none;
+    }
+  `; }
     get page() {
         const asked = this.pageState ?? this.defaultPage;
         return Math.min(this.count, Math.max(1, Math.floor(asked) || 1));

package/dist/tooltip/root/tooltip-root.d.ts

@@ -28,8 +28,11 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * markup is described when you first point at it or focus it, so a screen
  * reader in reading mode meets it with no description until then. Where the
  * browser has no element references, nothing links the two, and the tooltip
- * warns once on first open. The tooltip can also wrap its trigger, which
- * describes a Helix component and leaves a plain element undescribed. In the
+ * warns once on first open. The tooltip can also wrap its trigger. A Helix
+ * component inside is described at once, and a plain element as in the `for`
+ * form: when you first point at it or focus it, or at rest where it names the
+ * tooltip's `id` in its own `aria-describedby`, which a reference to the
+ * element around it allows. In the
  * `for` form the tooltip itself is out of the accessibility tree while its
  * bubble is down, so you meet its words once, as the trigger's description.
  * A trigger whose name is already the tooltip's words, such as an icon button

package/dist/tooltip/root/tooltip-root.js

@@ -251,21 +251,27 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         if (this.linked) {
             return;
         }
+        const trigger = this.for === '' ? this.trigger : this.named;
+        const names = `${trigger?.getAttribute('aria-describedby') ?? ''} ${trigger?.getAttribute('aria-labelledby') ?? ''}`
+            .split(/\s+/)
+            .filter(Boolean);
+        if (this.id !== '' && names.includes(this.id)) {
+            return;
+        }
         if (this.for === '') {
             if (this.triggerSays(this.describedText)) {
                 return;
             }
             reportRuntime({
                 kind: 'wrapped-trigger',
-                message: `<${this.localName}> is wrapping its trigger rather than naming one, so its text ` +
-                    "reaches no screen reader: a description in this element's shadow root cannot be " +
-                    'referenced from a trigger in the light DOM. Give this tooltip an `id`, set `for` to ' +
-                    'the trigger\'s id, and add `aria-describedby="<that id>"` to the trigger.',
+                message: `<${this.localName}> opened before its trigger was described, so a screen reader ` +
+                    'reading the page meets the trigger without its text. Give this tooltip an `id` and ' +
+                    'add `aria-describedby="<that id>"` to the trigger inside it. Written in your own ' +
+                    'markup it describes the trigger at rest and survives server rendering.',
                 tag: this.localName,
             });
             return;
         }
-        const trigger = this.named;
         if (!trigger) {
             reportRuntime({
                 kind: 'missing-trigger',
@@ -276,12 +282,6 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             });
             return;
         }
-        const names = `${trigger.getAttribute('aria-describedby') ?? ''} ${trigger.getAttribute('aria-labelledby') ?? ''}`
-            .split(/\s+/)
-            .filter(Boolean);
-        if (this.id !== '' && names.includes(this.id)) {
-            return;
-        }
         reportRuntime({
             kind: 'unlinked-trigger',
             message: `<${this.localName} for="${this.for}"> is not read out with its trigger. The link is ` +