@fusion.dev/helix-headless 0.174.0 → 0.176.0

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 ` +