@fusion.dev/helix-headless 0.103.2 → 0.104.0

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

@@ -12,8 +12,9 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * what filters it, not in what the list is.
  *
  * **`value` is comma separated when `multiple` is set**, the way
- * `Checkbox.Group`'s is. It stays a string because that is what a form submits
- * and what `MixinControllerValue` holds.
+ * `Checkbox.Group`'s is, and a string because that is what `MixinControllerValue`
+ * holds. The form is sent one entry per answer, as a native `<select multiple>`
+ * sends it, so a server never has to know to split on a comma.
  *
  * **Chosen and active are two different things.** Chosen is the answer; active
  * is where the keyboard is. Only the second moves with the arrows, and
@@ -42,6 +43,7 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @csspart hint - Help under the list.
  * @csspart items - The list itself.
  * @csspart label - The question, over the list.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the options are still on their way.
  * @csspart search - The region holding the field that narrows the list.
  * @csspart search-field - The field itself.
@@ -59,22 +61,10 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * keystrokes as the listbox. A consumer who wants autofill can still ask.
      */
     autocomplete: string;
-    /**
-     * What the list is narrowed to, if anything.
-     *
-     * Filtering hides rather than removes, so nothing about the value changes and
-     * the list is still the consumer's own elements in their own order. Reading
-     * gives what is being filtered on; writing declares it theirs, and
-     * `default-filter` seeds one the list owns.
-     */
-    get filter(): string;
-    set filter(next: string);
     /**
      * What to start narrowed to, where nothing declared it.
      */
     defaultFilter: string;
-    /** What the list is narrowed to, whoever set it. */
-    private filterState;
     /**
      * What is shown when a filter has hidden every option.
      *
@@ -84,6 +74,18 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * never given anything.
      */
     emptyText: string;
+    /** What the list is narrowed to, whoever set it. */
+    private filterState;
+    /**
+     * What the list is narrowed to, if anything.
+     *
+     * Filtering hides rather than removes, so nothing about the value changes and
+     * the list is still the consumer's own elements in their own order. Reading
+     * gives what is being filtered on; writing declares it theirs, and
+     * `default-filter` seeds one the list owns.
+     */
+    get filter(): string;
+    set filter(next: string);
     /**
      * Whether the list renders a field for narrowing itself.
      *

package/dist/listbox/root/listbox-root.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 { AriaForwardController, customElement, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, requestChange, scrollItemIntoView, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, reportValues, requestChange, scrollItemIntoView, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -63,8 +63,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         });
         this.autocomplete = 'off';
         this.defaultFilter = '';
-        this.filterState = undefined;
         this.emptyText = 'No matches';
+        this.filterState = undefined;
         this.filterable = false;
         this.filterLabel = 'Filter';
         this.multiple = false;
@@ -286,7 +286,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
     }
     sync() {
-        this.internals.setFormValue(this.value === '' ? null : this.value);
+        if (this.multiple) {
+            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+        }
+        else {
+            this.internals.setFormValue(this.value === '' ? null : this.value);
+        }
         this.reportRequired(this.value === '', 'Choose one to continue.', 'items');
     }
     connectedCallback() {
@@ -303,8 +308,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'listbox' });
-        this.internals.ariaMultiSelectable = this.multiple ? 'true' : null;
+        hostAria(this.internals, { role: '' });
         if (this.childrenKnown) {
             this.place();
         }
@@ -324,7 +328,6 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         super.updated(changed);
         this.followActive();
         this.sync();
-        this.linkHost();
         this.linkActive();
     }
     requestFilter(next) {
@@ -354,6 +357,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     </slot>`;
     }
     render() {
+        const shown = this.counted && !this.loading
+            ? this.filter === ''
+                ? this.options.length > 0
+                : this.hasMatches
+            : true;
         return html `${this.renderGroupLabel()}
       ${this.filterable
             ? html `<div part="search">
@@ -378,32 +386,33 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
       <div
         part="items"
         id="items"
+        role="listbox"
         aria-busy=${this.loading ? 'true' : nothing}
+        aria-describedby=${this.describedBy ?? nothing}
+        aria-labelledby=${this.labeled ? this.labelId : nothing}
+        aria-multiselectable=${this.multiple ? 'true' : nothing}
+        aria-required=${this.required ? 'true' : nothing}
         ${''}
         tabindex=${this.isDisabled ? -1 : 0}
       >
         <slot @slotchange=${() => this.place()}></slot>
-        ${this.renderStatus(this.counted && !this.loading
-            ? this.filter === ''
-                ? this.options.length > 0
-                : this.hasMatches
-            : true)}
+        ${this.renderStatus(shown)}
       </div>
-      ${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderLive(shown)}${this.renderHint()}${this.renderFeedback()}`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessListbox.prototype, "autocomplete", void 0);
-__decorate([
-    property()
-], HelixHeadlessListbox.prototype, "filter", null);
 __decorate([
     property({ attribute: 'default-filter' })
 ], HelixHeadlessListbox.prototype, "defaultFilter", void 0);
 __decorate([
     property({ attribute: 'empty-text' })
 ], HelixHeadlessListbox.prototype, "emptyText", void 0);
+__decorate([
+    property()
+], HelixHeadlessListbox.prototype, "filter", null);
 __decorate([
     property({ attribute: 'filterable', reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "filterable", void 0);

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

@@ -1,9 +1,13 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, type ViewportControlsPlacement, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-/** Which way a press or a key asked the map to go. */
-type Way = 'up' | 'down' | 'start' | 'end';
-/** Where the controls sit, in the corner words the rest of the library uses. */
-export type MapControlsPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/**
+ * What `ViewportControlsPlacement` is called for a map.
+ *
+ * The corners are the surface's and the name is the family's, so a consumer who
+ * imported this before the surface was shared still has it.
+ */
+export type MapControlsPlacement = ViewportControlsPlacement;
+declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & typeof HelixElement;
 /**
  * @summary A frame around somebody else's map.
  *
@@ -33,7 +37,7 @@ export type MapControlsPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'b
  * A frame that moved the map would have to know whose map it was.
  *
  * @since 0.100.0
- * @status stable
+ * @status experimental
  * @category media
  * @aliases Map frame, Map container, Geo
  * @documentation https://fusion.dev/helix/components/map
@@ -63,57 +67,7 @@ export type MapControlsPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'b
  * @cssstate fullscreen - While the frame fills the screen.
  * @cssstate idle - While the reader has been still long enough to hide the chrome.
  */
-export declare class HelixHeadlessMap extends HelixElement {
-    /**
-     * Which of the controls this frame draws, as a list of what to keep.
-     *
-     * **A list rather than a switch, because the overlap is not symmetric.**
-     * Every map library draws zoom controls and none of them draws pan buttons:
-     * MapLibre's navigation control is zoom and a compass, Leaflet's is zoom,
-     * Google's is zoom. So a consumer slotting one of those has our zoom twice
-     * over and our pan pad not at all, and a single switch would make them choose
-     * between a duplicate and nothing.
-     *
-     * `none` draws none of them, which is the right answer where the slotted map
-     * already has controls a reader can find: what this family argues for is that
-     * *a* findable control exists, never that it is ours. The methods stay public
-     * either way, so a consumer drawing their own chrome can still drive the
-     * frame.
-     *
-     * Absent is all three, which is this library's rule that a resting value is an
-     * attribute's absence, and it is what the stylesheet asks about: the layout
-     * rules are written against `[controls]:not([controls~="zoom"])` rather than
-     * the bare negation, or a frame that named no list at all would be laid out as
-     * though it had dropped everything.
-     */
-    controls?: string;
-    /**
-     * Which corner the controls sit in.
-     *
-     * **Configurable because there is no safe default**, and this is a collision
-     * rather than a taste: MapLibre puts its own controls at the top end, Leaflet
-     * and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
-     * corner this took would land on somebody's, which is why every one of those
-     * libraries made it a setting too.
-     *
-     * Logical corners rather than left and right, so a right-to-left page moves
-     * them without a consumer writing a second rule.
-     *
-     * Absent is the top end, which is this library's rule that a resting value is
-     * an attribute's absence: a default that reflected would write an attribute
-     * onto every host that no server sent and nobody asked for.
-     */
-    controlsPlacement?: MapControlsPlacement;
-    /** What the control that fills the screen is called. */
-    fullscreenLabel: string;
-    /**
-     * How long the reader may be still before the chrome hides, in milliseconds.
-     *
-     * Zero keeps it up, which is the default: a map's controls are how a keyboard
-     * reader operates it, and chrome that hides itself by default would be this
-     * component undoing its own argument. Set it for a display map nobody drives.
-     */
-    idleDelay: number;
+export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     /**
      * Accessible name for the map, which is the one thing a consumer must write.
      *
@@ -129,80 +83,18 @@ export declare class HelixHeadlessMap extends HelixElement {
      * at every encounter.
      */
     label: string;
+    /** The events this family names, the surface naming none of its own. */
+    protected panEvent(detail: ViewportPanDetail): Event;
+    protected zoomEvent(detail: ViewportZoomDetail): Event;
     /**
-     * What the controls are called, for a page not in English.
-     */
-    panLabel: string;
-    /**
-     * How far one press moves the map, as a fraction of what is on screen.
-     *
-     * A fraction rather than a distance, because this frame does not know the
-     * scale of what is inside it: a quarter of the viewport is the same gesture at
-     * street level and at country level, and a consumer who wants metres can
-     * multiply by their own.
-     */
-    panStep: number;
-    /** What the zoom controls are called. */
-    zoomInLabel: string;
-    /** What the zoom control that goes the other way is called. */
-    zoomOutLabel: string;
-    /** Whether the reader has been still long enough to hide the chrome. */
-    private resting;
-    /** Whether the frame is filling the screen. */
-    private filled;
-    private readonly fullscreen;
-    private readonly idle;
-    /** Whether a named group of controls is one this frame draws. */
-    private draws;
-    /** Fills the screen with the frame, or comes back. */
-    toggleFullscreen(): void;
-    /** Asks for the map to move, which the consumer answers. */
-    pan(to: Way): void;
-    /** Asks for the map to zoom, `1` in and `-1` out. */
-    zoom(by: number): void;
-    /**
-     * The arrow keys, which are the second way rather than the only one.
-     *
-     * `inlineStep` rather than a test against `ArrowLeft`, so the reader on a
-     * right-to-left page gets `end` from the key that points the way their text
-     * runs, which is what the pan buttons say too.
+     * What the group of controls is called.
      *
-     * **Only from this frame's own chrome, and that is the difference between one
-     * move and two.** MapLibre and Leaflet both answer the arrow keys themselves,
-     * so a press inside a slotted map moves it once on its own and once more on
-     * the event this would have sent: every press moving twice, and the consumer
-     * with no way to tell which half to turn off. A press that started in the
-     * shadow root is this frame's to relay; anything from the map belongs to the
-     * map.
+     * The surface is shared and this is the half that is a map: a reader meeting
+     * the group hears what it drives rather than "view controls", which names the
+     * mechanism.
      */
-    private readonly handleKeydown;
-    /**
-     * Starts the wait, so a map nobody has touched counts as still.
-     *
-     * Without this the timer only ever starts on a pointer or a focus, and a frame
-     * rendered on a page the reader never reaches stays awake for as long as the
-     * page is open: the chrome a consumer asked to hide would hide only after
-     * being used once, which is the opposite of what an idle delay is for.
-     */
-    protected firstUpdated(changed: PropertyValues): void;
+    protected get restingControlsLabel(): string;
     protected willUpdate(changed: PropertyValues): void;
-    /**
-     * What one pan button is called, with the way it goes filled in.
-     *
-     * Left and right rather than start and end, because the label is read aloud
-     * and a reader knows which way left is. The event keeps the reading-order
-     * name, which is the one a right-to-left page needs.
-     */
-    private named;
-    /**
-     * The controls, or nothing where a consumer kept none of them.
-     *
-     * **Written out rather than generated**, because a part name behind an
-     * interpolation is a part the manifest cannot see: it would publish `pan-`
-     * and a consumer's `::part(pan-up)` would match nothing. The same cost
-     * `drawIcon` names for `Trend`.
-     */
-    private renderControls;
     /**
      * The frame, with each region in a box of its own.
      *

package/dist/map/root/map-root.js

@@ -4,73 +4,22 @@ 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, FullscreenController, HelixElement, HelixMapPanEvent, HelixMapZoomEvent, hostAria, IdleController, inlineStep, } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-let HelixHeadlessMap = class HelixHeadlessMap extends HelixElement {
+import { customElement, HelixElement, HelixMapPanEvent, HelixMapZoomEvent, hostAria, MixinViewport, } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
-        this.fullscreenLabel = 'Fill the screen';
-        this.idleDelay = 0;
         this.label = '';
-        this.panLabel = 'Pan {way}';
-        this.panStep = 0.25;
-        this.zoomInLabel = 'Zoom in';
-        this.zoomOutLabel = 'Zoom out';
-        this.resting = false;
-        this.filled = false;
-        this.fullscreen = new FullscreenController(this, (full) => {
-            this.filled = full;
-        });
-        this.idle = new IdleController(this, () => this.idleDelay, (resting) => {
-            this.resting = resting;
-        });
-        this.handleKeydown = (event) => {
-            if (!this.renderRoot.contains(event.target)) {
-                return;
-            }
-            const along = inlineStep(this, event.key);
-            if (along === 1) {
-                event.preventDefault();
-                this.pan('end');
-            }
-            else if (along === -1) {
-                event.preventDefault();
-                this.pan('start');
-            }
-            else if (event.key === 'ArrowUp') {
-                event.preventDefault();
-                this.pan('up');
-            }
-            else if (event.key === 'ArrowDown') {
-                event.preventDefault();
-                this.pan('down');
-            }
-            else if (event.key === '+' || event.key === '=') {
-                event.preventDefault();
-                this.zoom(1);
-            }
-            else if (event.key === '-' || event.key === '_') {
-                event.preventDefault();
-                this.zoom(-1);
-            }
-        };
     }
-    draws(group) {
-        return this.controls === undefined ? true : this.controls.split(/\s+/).includes(group);
+    panEvent(detail) {
+        return new HelixMapPanEvent(detail);
     }
-    toggleFullscreen() {
-        void this.fullscreen.toggle();
+    zoomEvent(detail) {
+        return new HelixMapZoomEvent(detail);
     }
-    pan(to) {
-        this.dispatchEvent(new HelixMapPanEvent({ by: this.panStep, to }));
-    }
-    zoom(by) {
-        this.dispatchEvent(new HelixMapZoomEvent({ by }));
-    }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
-        this.idle.stir();
+    get restingControlsLabel() {
+        return 'Map controls';
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -78,53 +27,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends HelixElement {
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
     }
-    named(way) {
-        const spoken = way === 'start' ? 'left' : way === 'end' ? 'right' : way;
-        return this.panLabel.replace('{way}', spoken);
-    }
-    renderControls() {
-        const pan = this.draws('pan');
-        const zoom = this.draws('zoom');
-        const fullscreen = this.draws('fullscreen');
-        if (!pan && !zoom && !fullscreen) {
-            return nothing;
-        }
-        return html `<div part="controls" role="group" aria-label="Map controls">
-      ${pan
-            ? html `<button part="pan-up" aria-label=${this.named('up')} type="button" @click=${() => this.pan('up')}>
-                ↑
-              </button>
-              <button part="pan-start" aria-label=${this.named('start')} type="button" @click=${() => this.pan('start')}>
-                ←
-              </button>
-              <button part="pan-end" aria-label=${this.named('end')} type="button" @click=${() => this.pan('end')}>
-                →
-              </button>
-              <button part="pan-down" aria-label=${this.named('down')} type="button" @click=${() => this.pan('down')}>
-                ↓
-              </button>`
-            : nothing}
-      ${zoom
-            ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
-                +
-              </button>
-              <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
-                −
-              </button>`
-            : nothing}
-      ${fullscreen
-            ? html `<button
-              part="fullscreen"
-              aria-label=${this.fullscreenLabel}
-              aria-pressed=${this.filled ? 'true' : 'false'}
-              type="button"
-              @click=${this.toggleFullscreen}
-            >
-              ⤢
-            </button>`
-            : nothing}
-    </div>`;
-    }
     render() {
         return html `<div
       part="region"
@@ -153,39 +55,9 @@ let HelixHeadlessMap = class HelixHeadlessMap extends HelixElement {
     </div>`;
     }
 };
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessMap.prototype, "controls", void 0);
-__decorate([
-    property({ attribute: 'controls-placement', reflect: true })
-], HelixHeadlessMap.prototype, "controlsPlacement", void 0);
-__decorate([
-    property({ attribute: 'fullscreen-label' })
-], HelixHeadlessMap.prototype, "fullscreenLabel", void 0);
-__decorate([
-    property({ attribute: 'idle-delay', type: Number })
-], HelixHeadlessMap.prototype, "idleDelay", void 0);
 __decorate([
     property()
 ], HelixHeadlessMap.prototype, "label", void 0);
-__decorate([
-    property({ attribute: 'pan-label' })
-], HelixHeadlessMap.prototype, "panLabel", void 0);
-__decorate([
-    property({ attribute: 'pan-step', type: Number })
-], HelixHeadlessMap.prototype, "panStep", void 0);
-__decorate([
-    property({ attribute: 'zoom-in-label' })
-], HelixHeadlessMap.prototype, "zoomInLabel", void 0);
-__decorate([
-    property({ attribute: 'zoom-out-label' })
-], HelixHeadlessMap.prototype, "zoomOutLabel", void 0);
-__decorate([
-    state()
-], HelixHeadlessMap.prototype, "resting", void 0);
-__decorate([
-    state()
-], HelixHeadlessMap.prototype, "filled", void 0);
 HelixHeadlessMap = __decorate([
     customElement('helix-headless-map')
 ], HelixHeadlessMap);

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

@@ -40,6 +40,7 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @csspart back-mark - The glyph on the back control of a submenu.
  * @csspart empty - Shown when there are no items to show.
  * @csspart header - The bar above a submenu, holding the way back and its name.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the items are still on their way.
  * @csspart surface - The floating panel the menu is drawn on.
  * @csspart title - The name of the submenu that is showing.

package/dist/menu/root/menu-root.js

@@ -204,7 +204,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
               </div>`}
         <slot @slotchange=${(event) => this.countRows(event)}></slot>
         ${this.renderStatus(this.hasRows)}
-      </div>`;
+      </div>${this.renderLive(this.hasRows)}`;
     }
 };
 __decorate([

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

@@ -9,6 +9,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 const TRIGGER_ID = 'trigger';
 const ITEMS_ID = 'items';
+const LABEL_ID = 'label';
 let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
@@ -34,7 +35,7 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, this.label === '' ? { role: 'group' } : { label: this.label, role: 'group' });
+        hostAria(this.internals, { role: 'listitem' });
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -76,14 +77,14 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
                 type="button"
                 @click=${this.handleToggle}
               >
-                <span part="label"><slot name="label">${this.label}</slot></span>
+                <span part="label" id=${LABEL_ID}><slot name="label">${this.label}</slot></span>
                 ${count}
               </button>`
-            : html `<span part="label"><slot name="label">${this.label}</slot></span>
+            : html `<span part="label" id=${LABEL_ID}><slot name="label">${this.label}</slot></span>
                 ${count}`}
         <span part="actions"><slot name="actions"></slot></span>
       </div>
-      <div id=${ITEMS_ID} part="items">
+      <div id=${ITEMS_ID} part="items" role="list" aria-labelledby=${LABEL_ID}>
         <slot></slot>
       </div>`;
     }

package/dist/notifications/notification/notification.d.ts

@@ -77,6 +77,16 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * empty string would give.
      */
     at: string;
+    /**
+     * State to open with, where nothing declared one.
+     */
+    defaultRead: boolean;
+    /**
+     * Locale for the timestamp.
+     *
+     * Empty is the runtime's own.
+     */
+    locale: string;
     /**
      * Whether the reader has seen it.
      *
@@ -94,16 +104,6 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      */
     get read(): boolean;
     set read(next: boolean);
-    /**
-     * State to open with, where nothing declared one.
-     */
-    defaultRead: boolean;
-    /**
-     * Locale for the timestamp.
-     *
-     * Empty is the runtime's own.
-     */
-    locale: string;
     /**
      * @internal Read by the list to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than

package/dist/notifications/notification/notification.js

@@ -120,15 +120,15 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
 __decorate([
     property()
 ], HelixHeadlessNotification.prototype, "at", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessNotification.prototype, "read", null);
 __decorate([
     property({ attribute: 'default-read', type: Boolean })
 ], HelixHeadlessNotification.prototype, "defaultRead", void 0);
 __decorate([
     property()
 ], HelixHeadlessNotification.prototype, "locale", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessNotification.prototype, "read", null);
 HelixHeadlessNotification = __decorate([
     customElement('helix-headless-notification')
 ], HelixHeadlessNotification);

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

@@ -41,6 +41,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @csspart footer - The region below the list.
  * @csspart header - The region above the list.
  * @csspart list - The list itself.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the feed is still on its way.
  * @csspart mark-all - The control that marks everything read.
  *

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

@@ -139,6 +139,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         <slot name="items" @slotchange=${this.handleSlotChange}></slot>
         ${this.renderStatus(hasItems)}
       </div>
+      ${this.renderLive(hasItems)}
       <div part="footer"><slot name="footer"></slot></div>`;
     }
 };