@fusion.dev/helix 0.144.0 → 0.145.0

package/dist/grid/root/grid-root.js

@@ -8,7 +8,7 @@ import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-co
 import { property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { styles } from './grid-root.css.js';
-const UNINHERITED = '--grid-columns: initial; --_grid-template: initial;';
+const UNINHERITED = '--grid-areas: initial; --grid-columns: initial; --grid-rows: initial; --_grid-template: initial;';
 const NUMBER = /^-?(?:\d+\.?\d*|\.\d+)(?:px|r?em|r?ex|r?ch|r?lh|r?ic|r?cap|%|[sdl]?v(?:w|h|i|b|min|max)|cq(?:w|h|i|b|min|max)|cm|mm|in|pt|pc|q)?$/i;
 const TOKEN = /\s+|(?:calc|clamp|min|max)\(|var\(--[\w-]+|-?(?:\d+\.?\d*|\.\d+)[a-z%]*|[(),+*/-]/giy;
 const lengthOf = (value) => {
@@ -75,15 +75,27 @@ let HelixGrid = class HelixGrid extends HelixElement {
 __decorate([
     property({ attribute: 'align-items', reflect: true })
 ], HelixGrid.prototype, "alignItems", void 0);
+__decorate([
+    property({ attribute: 'auto-flow', reflect: true })
+], HelixGrid.prototype, "autoFlow", void 0);
+__decorate([
+    property({ attribute: 'column-gap', reflect: true })
+], HelixGrid.prototype, "columnGap", void 0);
 __decorate([
     property({ reflect: true, type: Number })
 ], HelixGrid.prototype, "columns", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixGrid.prototype, "gap", void 0);
+__decorate([
+    property({ attribute: 'justify-items', reflect: true })
+], HelixGrid.prototype, "justifyItems", void 0);
 __decorate([
     property()
 ], HelixGrid.prototype, "min", void 0);
+__decorate([
+    property({ attribute: 'row-gap', reflect: true })
+], HelixGrid.prototype, "rowGap", void 0);
 HelixGrid = __decorate([
     customElement('helix-grid')
 ], HelixGrid);

package/dist/list/item/list-item.css.js

@@ -3,7 +3,7 @@ export const styles = createSheet(`:host {
 display: block;
 }
 
-[part="row"] {
+[part~="row"] {
 align-items: center;
 display: grid;
 
@@ -72,4 +72,24 @@ grid-row: 1 / span 2;
 grid-template-columns: subgrid;
 grid-template-rows: subgrid;
 text-decoration: none;
+}
+
+[part~="row-current"] {
+background-color: var(--list-item-current-background-color, var(--helix-color-well));
+border-radius: var(--helix-radii-sm);
+}
+
+[part~="row"]:focus-visible {
+border-radius: var(--helix-radii-sm);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+:host(:state(selected)) [part~="row"] {
+background-color: var(--list-item-selected-background-color, var(--helix-color-primary-subtle));
+border-radius: var(--helix-radii-sm);
+}
+
+:host([disabled]) {
+opacity: var(--list-item-disabled-opacity, 0.5);
 }`);

package/dist/list/item/list-item.d.ts

@@ -14,9 +14,12 @@ import { type CSSResultGroup, type TemplateResult } from 'lit';
  *
  * @csspart rail - The cell that holds the number in a railed list.
  *
+ * @cssproperty --list-item-current-background-color - The fill behind a row that is `current`.
+ * @cssproperty --list-item-disabled-opacity - The opacity of a `disabled` row.
  * @cssproperty --list-item-padding - The padding inside the row.
  * @cssproperty --list-item-rail-content - What the rail cell shows. The list sets it.
  * @cssproperty --list-item-rail-display - Whether the row has a rail. The list sets it.
+ * @cssproperty --list-item-selected-background-color - The fill behind a selected row, in a list that selects.
  * @cssproperty --list-item-term-weight - The font weight of a term in a description list.
  */
 export declare class HelixListItem extends HelixHeadlessListItem {

package/dist/list/root/list-root.css.js

@@ -47,6 +47,14 @@ list-style-type: upper-roman;
 list-style-type: disc;
 }
 
+:host([kind="ordered"]) ::slotted(*) {
+counter-increment: list-item var(--list-step, 1);
+}
+
+:host([kind="ordered"]) ::slotted(:first-child) {
+counter-set: list-item var(--list-first);
+}
+
 :host([marker="rail"]) {
 counter-reset: list-rail;
 
@@ -57,7 +65,11 @@ padding-inline-start: var(--helix-space-none);
 --list-item-rail-content: counter(list-rail, var(--list-rail-style, decimal-leading-zero));
 
 --list-item-rail-display: block;
-counter-increment: list-rail;
+counter-increment: list-rail var(--list-step, 1);
+}
+
+:host([marker="rail"]) ::slotted(:first-child) {
+counter-set: list-rail var(--list-first);
 }
 
 :host([kind="ordered"][marker="rail"]) ::slotted(*),

package/dist/menu/index.d.ts

@@ -1,2 +1,3 @@
 export * from './item/menu-item.js';
 export * from './root/menu-root.js';
+export * from './section/menu-section.js';

package/dist/menu/index.js

@@ -1,2 +1,3 @@
 export * from './item/menu-item.js';
 export * from './root/menu-root.js';
+export * from './section/menu-section.js';

package/dist/menu/item/menu-item.css.js

@@ -20,6 +20,7 @@ font-weight: var(--helix-weight-medium);
 grid-template-columns:
 var(--menu-item-start, 0px)
 minmax(0, 1fr)
+auto
 var(--menu-item-end, 0px);
 
 min-block-size: var(--helix-size-control);
@@ -72,8 +73,21 @@ grid-column: 2;
 min-inline-size: 0;
 }
 
-[part="mark"] {
+[part="end"] {
+align-items: center;
+color: var(--menu-item-detail-color, var(--helix-color-foreground-subtle));
+display: flex;
+gap: var(--helix-space-2xs);
 grid-column: 3;
+padding-inline-start: var(--helix-space-sm);
+}
+
+[part="end"][data-empty] {
+display: none;
+}
+
+[part="mark"] {
+grid-column: 4;
 }
 
 [part="start"][data-empty] {

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessMenuItem } from '@fusion.dev/helix-headless/menu';
 import type { CSSResultGroup } from 'lit';
+import '../../kbd/index.js';
 /**
  * @summary One row in a menu: a command, a choice, or a way into a submenu.
  *
@@ -16,11 +17,13 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Menu option, Menu row
  * @documentation https://fusion.dev/helix/components/menu
  *
+ * @cssproperty --menu-item-detail-color - Color of the shortcut and the words in the `end` slot.
  * @cssproperty --menu-item-end - Width of the trailing column, including the gap before it, which holds a check mark or a submenu caret.
  * @cssproperty --menu-item-hover-color - Fill under the pointer.
  * @cssproperty --menu-item-start - Width of the leading column, including the gap after it, for a row with more than a mark. The menu sets it for each page, and `0` removes the column.
  */
 export declare class HelixMenuItem extends HelixHeadlessMenuItem {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/menu/item/menu-item.js

@@ -6,8 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessMenuItem } from '@fusion.dev/helix-headless/menu';
+import '../../kbd/index.js';
 import { styles } from './menu-item.css.js';
 let HelixMenuItem = class HelixMenuItem extends HelixHeadlessMenuItem {
+    static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
 HelixMenuItem = __decorate([

package/dist/menu/section/menu-section.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/menu/section/menu-section.css.js

@@ -0,0 +1,14 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="heading"] {
+color: var(--menu-section-heading-color, var(--helix-color-foreground-subtle));
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+line-height: var(--helix-leading-normal);
+padding-block: var(--helix-space-xs) var(--helix-space-2xs);
+padding-inline: var(--helix-space-sm);
+user-select: none;
+}`);

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

@@ -0,0 +1,24 @@
+import { HelixHeadlessMenuSection } from '@fusion.dev/helix-headless/menu';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A group of rows in a menu, under a heading.
+ *
+ * @description
+ * The heading is set in the menu's small type, quieter than the rows, with the
+ * rows' own inset, so it reads as the name of what follows.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Menu group, Menu heading
+ * @documentation https://fusion.dev/helix/components/menu
+ *
+ * @cssproperty --menu-section-heading-color - Color of the heading.
+ */
+export declare class HelixMenuSection extends HelixHeadlessMenuSection {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-menu-section': HelixMenuSection;
+    }
+}

package/dist/menu/section/menu-section.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessMenuSection } from '@fusion.dev/helix-headless/menu';
+import { styles } from './menu-section.css.js';
+let HelixMenuSection = class HelixMenuSection extends HelixHeadlessMenuSection {
+    static { this.styles = styles; }
+};
+HelixMenuSection = __decorate([
+    customElement('helix-menu-section')
+], HelixMenuSection);
+export { HelixMenuSection };

package/dist/navigation/root/navigation-root.css.js

@@ -6,7 +6,7 @@ display: block;
 [part="nav"] {
 align-items: center;
 
-block-size: var(--helix-size-control-sm);
+block-size: var(--navigation-block-size, var(--helix-size-control-sm));
 display: flex;
 gap: var(--navigation-gap, var(--helix-space-2xs));
 
@@ -19,7 +19,8 @@ position: relative;
 [part="indicator"] {
 background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));
 block-size: var(--indicator-block-size, 0);
-border-radius: var(--helix-radii-sm);
+border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));
+box-shadow: var(--navigation-indicator-shadow, none);
 inline-size: var(--indicator-inline-size, 0);
 inset-block-start: 50%;
 inset-inline-start: 0;

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

@@ -14,8 +14,14 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Nav, NavList, Tabs
  * @documentation https://fusion.dev/helix/components/navigation
  *
+ * @cssproperty --navigation-block-size - Height of the bar in a row. Each destination fills it.
  * @cssproperty --navigation-gap - Space between destinations.
  * @cssproperty --navigation-indicator-color - Fill of the marker on the current destination.
+ * @cssproperty --navigation-indicator-radius - Corner radius of the marker.
+ * @cssproperty --navigation-indicator-shadow - Shadow under the marker, for a marker that sits
+ *   raised on the bar.
+ * @cssproperty --navigation-item-color - Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot.
+ * @cssproperty --navigation-item-current-color - Text color of the current destination, the one marked `aria-current="page"`.
  */
 export declare class HelixNavigation extends HelixHeadlessNavigation {
     static styles: CSSResultGroup;

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

@@ -71,6 +71,28 @@ transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 color: var(--helix-color-foreground);
 }
 
+[part="more"] {
+background: none;
+border: 0;
+border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+inline-size: 100%;
+padding-block: var(--helix-space-sm);
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="more"]:hover {
+color: var(--helix-color-foreground);
+}
+
+[part="more"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
 [part="mark-all"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
@@ -91,7 +113,8 @@ max-block-size: none;
 overflow-y: visible;
 }
 
-[part="mark-all"] {
+[part="mark-all"],
+[part="more"] {
 display: none;
 }
 }`);

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

@@ -25,6 +25,7 @@ import '../notification/notification.js';
  * @csspart list - The list itself.
  * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart mark-all - The control that marks everything read.
+ * @csspart more - The button after the list that asks for more, while `load-more` is set and the feed is not loading.
  *
  * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.
  * @cssproperty --notifications-media-column - Width of the media column that every item keeps when any item in the feed has media.

package/dist/object-inspector/root/object-inspector-root.css.js

@@ -42,7 +42,31 @@ line-height: var(--helix-leading-normal);
 padding-block: var(--helix-space-xs);
 }
 
-[part="header"] + [part="frame"] [part="tree"] {
+[part="search-field"] {
+appearance: none;
+background-color: var(--object-inspector-background-color, var(--helix-color-background));
+border: var(--helix-border-thin) solid
+var(--object-inspector-border-color, var(--helix-color-border));
+border-block-end: none;
+border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));
+border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+inline-size: 100%;
+margin: 0;
+padding-block: var(--helix-space-xs);
+padding-inline: var(--helix-space-md);
+}
+
+[part="search-field"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="header"] + [part="search-field"],
+:is([part="header"], [part="search-field"]) ~ [part="frame"] [part="tree"] {
 border-start-end-radius: var(--helix-radii-none);
 border-start-start-radius: var(--helix-radii-none);
 }
@@ -90,6 +114,13 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: calc(var(--helix-size-focus-offset) * -1);
 }
 
+[part~="row-match"] {
+background-color: var(
+--object-inspector-match-background-color,
+var(--helix-color-accent-subtle)
+);
+}
+
 [part="toggle"] {
 block-size: 1em;
 color: var(--helix-color-foreground-muted);
@@ -102,6 +133,10 @@ vertical-align: -0.125em;
 color: var(--helix-color-syntax-name);
 }
 
+[part~="row-match"] [part="key"] {
+color: var(--helix-color-foreground);
+}
+
 [part="string"] {
 color: var(--helix-color-syntax-string);
 }

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -9,7 +9,9 @@ import '../../copy-button/index.js';
  * The styled tier draws the tree in the Code Block frame. Keys and each type of
  * value take their colors from the syntax colors code blocks use. Each row is
  * one line, and a long string ends in an ellipsis, so every row has the same
- * height and a windowed tree does not measure rows one by one.
+ * height and a windowed tree does not measure rows one by one. A filter's
+ * matches take a tinted ground, and the filter field is a band of the same
+ * frame, under the label.
  *
  * @since 0.1.0
  * @status stable
@@ -21,6 +23,7 @@ import '../../copy-button/index.js';
  * @cssproperty --object-inspector-block-size - The height of the scrolling box when `windowed` is set.
  * @cssproperty --object-inspector-border-color - The color of the edge around the tree and its header.
  * @cssproperty --object-inspector-header-background-color - The background of the bar that holds the label.
+ * @cssproperty --object-inspector-match-background-color - The background of an entry a filter matched.
  * @cssproperty --object-inspector-radius - The corner radius of the tree.
  */
 export declare class HelixObjectInspector extends HelixHeadlessObjectInspector {

package/dist/object-inspector/root/object-inspector-root.js

@@ -6,11 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessObjectInspector } from '@fusion.dev/helix-headless/object-inspector';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './object-inspector-root.css.js';
 import '../../copy-button/index.js';
 let HelixObjectInspector = class HelixObjectInspector extends HelixHeadlessObjectInspector {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixObjectInspector = __decorate([
     customElement('helix-object-inspector')

package/dist/orb/index.d.ts

@@ -1,2 +1,2 @@
 export * from './root/orb-root.js';
-export * from './shapes.js';
+export { ORB_STATES, type OrbState } from './shapes.js';

package/dist/orb/index.js

@@ -1,2 +1,2 @@
 export * from './root/orb-root.js';
-export * from './shapes.js';
+export { ORB_STATES } from './shapes.js';

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

@@ -36,6 +36,10 @@ import { type OrbState } from '../shapes.js';
  * drawing of your own, the headless `Loader` holds the same busy progress bar
  * and its name.
  *
+ * Each state is also a custom state, such as `:state(thinking)` or
+ * `:state(done)`, so a page can style what sits around an orb by what it shows,
+ * whether the state was written as an attribute or set from script.
+ *
  * @since 0.8.0
  * @status stable
  * @category feedback
@@ -43,13 +47,31 @@ import { type OrbState } from '../shapes.js';
  * @documentation https://fusion.dev/helix/components/orb
  *
  * @csspart canvas - The canvas the dots are drawn on.
+ * @csspart live - The live region that says the new state when `announce` is set. It is rendered from the first change of state and clipped out of view.
  *
  * @cssproperty --orb-color - The color of the nearest dots. Defaults to `currentColor`.
  * @cssproperty --orb-ground - The color the farthest dots fade toward. Defaults to the page's background.
  * @cssproperty --orb-size - The diameter. Overrides `size`.
+ *
+ * @cssstate connecting - The orb shows `connecting`.
+ * @cssstate done - The orb shows `done`.
+ * @cssstate fetching - The orb shows `fetching`.
+ * @cssstate listening - The orb shows `listening`.
+ * @cssstate thinking - The orb shows `thinking`, which is also what a state it does not draw shows.
+ * @cssstate waiting - The orb shows `waiting`.
+ * @cssstate working - The orb shows `working`.
  */
 export declare class HelixOrb extends HelixElement {
     static styles: CSSResultGroup;
+    /**
+     * Says each new state through a polite live region, such as "Working" and
+     * then "Done".
+     *
+     * Off by default, because the name and the busy state already change with
+     * the state, and an orb beside a stream of messages would otherwise talk
+     * over them. Set it on an orb that is the only sign of progress on the page.
+     */
+    announce: boolean;
     /**
      * The name read by screen readers. Defaults to the name of the state, such
      * as "Thinking".
@@ -82,18 +104,22 @@ export declare class HelixOrb extends HelixElement {
      * verb we have not made a shape for should cost a reader a less specific
      * indicator, not an empty box where the indicator was.
      *
-     * Not reflected: no rule selects on it, because the state is drawn rather than
-     * styled. A consumer writing the attribute can still select on their own
-     * markup.
+     * Not reflected, because a state set from script would then write an
+     * attribute onto the host after a server sent it without one. Each state is
+     * a custom state instead, such as `:state(working)`.
      */
     state: OrbState;
     /**
      * The word for each state, for a page in another language.
      *
-     * A state left out keeps its English word, and `label` wins over both. It is
-     * a property with no attribute, keyed by state, such as `{ thinking: '…' }`.
+     * A state left out keeps its English word, and `label` wins over both.
+     * Keyed by state, such as `{ thinking: '…' }`. As an attribute it is that
+     * object as JSON, such as `state-labels='{"done":"Terminé"}'`, so server
+     * markup and plain HTML can carry the words too.
      */
     stateLabels: Partial<Record<OrbState, string>>;
+    /** The region `announce` speaks in. */
+    private readonly status;
     private canvas;
     private context;
     /**

package/dist/orb/root/orb-root.js

@@ -4,9 +4,10 @@ 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, HelixElement, hostAria, PaintGateController, readColor, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixElement, hostAria, PaintGateController, readColor, StatusController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { blendStaged, evenSphere, fibonacci, meshFor, ORB_STATES, orbPoint, paramsFor, project, smoother, stateDistance, TRAIL, } from '../shapes.js';
 import { styles } from './orb-root.css.js';
 const MORPH_NEAR = 380;
@@ -22,13 +23,28 @@ const LABELS = {
     waiting: 'Waiting',
     working: 'Working',
 };
+const labelsConverter = {
+    fromAttribute: (value) => {
+        try {
+            const parsed = JSON.parse(value ?? '');
+            return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+                ? parsed
+                : {};
+        }
+        catch {
+            return {};
+        }
+    },
+};
 const GRAY = [128, 128, 128];
 let HelixOrb = class HelixOrb extends HelixElement {
     constructor() {
         super(...arguments);
+        this.announce = false;
         this.label = '';
         this.state = 'thinking';
         this.stateLabels = {};
+        this.status = new StatusController(this);
         this.context = null;
         this.gate = new PaintGateController(this, {
             canRun: () => !!this.context && !this.lost,
@@ -67,7 +83,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
             this.gate.play();
         };
     }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
     willUpdate(changed) {
         super.willUpdate(changed);
         const state = ORB_STATES.includes(this.state)
@@ -78,12 +94,22 @@ let HelixOrb = class HelixOrb extends HelixElement {
             role: state === 'done' ? 'img' : 'progressbar',
         });
         this.internals.ariaBusy = state === 'done' ? 'false' : 'true';
+        this.toggleState('connecting', state === 'connecting');
+        this.toggleState('done', state === 'done');
+        this.toggleState('fetching', state === 'fetching');
+        this.toggleState('listening', state === 'listening');
+        this.toggleState('thinking', state === 'thinking');
+        this.toggleState('waiting', state === 'waiting');
+        this.toggleState('working', state === 'working');
         if (changed.has('state') && changed.get('state') !== undefined) {
             this.turn();
+            if (this.announce) {
+                this.status.say(this.label || this.stateLabels[state] || LABELS[state]);
+            }
         }
     }
     render() {
-        return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>${drawStatus(this.status)}`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -236,6 +262,9 @@ let HelixOrb = class HelixOrb extends HelixElement {
         }
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixOrb.prototype, "announce", void 0);
 __decorate([
     property()
 ], HelixOrb.prototype, "label", void 0);
@@ -246,7 +275,7 @@ __decorate([
     property()
 ], HelixOrb.prototype, "state", void 0);
 __decorate([
-    property({ attribute: false })
+    property({ attribute: 'state-labels', converter: labelsConverter })
 ], HelixOrb.prototype, "stateLabels", void 0);
 HelixOrb = __decorate([
     customElement('helix-orb')

package/dist/outline/root/outline-root.css.js

@@ -123,6 +123,16 @@ var(--outline-indent, var(--helix-space-sm))
 );
 }
 
+::slotted([slot="heading"]) {
+color: var(--helix-color-foreground);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-semibold);
+line-height: var(--helix-leading-normal);
+margin-block: 0 var(--helix-space-xs);
+margin-inline: 0;
+padding-inline-start: calc(var(--outline-rail) + var(--helix-space-sm));
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -12,6 +12,13 @@ import type { CSSResultGroup } from 'lit';
  * `data-level` is at the top level. The outline does not read heading levels
  * from the document, because the headings are not always in the document.
  *
+ * Links in a nested `<ul>` take their indentation from your own stylesheet:
+ * the outline's styles reach the elements slotted into it and nothing inside
+ * them. Write the links flat with `data-level` for the indentation drawn here,
+ * and screen readers still hear them as nested lists.
+ *
+ * A heading slotted into `heading` is set above the links, lined up with them.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation