@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,179 +1,24 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-font-size: var(--helix-text-sm);
-}
-
-[part="header"] {
-align-items: center;
-background-color: var(
+export const styles = createSheet(`:host {display: flex;flex-direction: column;font-size: var(--helix-text-sm);}[part="header"] {align-items: center;background-color: var(
 --object-inspector-header-background-color,
 var(--helix-color-surface-raised)
-);
-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));
-display: flex;
-padding-block: var(--helix-space-xs);
-padding-inline: var(--helix-space-md);
-}
-
-[part="label"] {
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-}
-
-[part="frame"] {
-position: relative;
-}
-
-[part="tree"] {
-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-radius: var(--object-inspector-radius, var(--helix-radii-lg));
-font-family: var(--helix-font-mono);
-line-height: var(--helix-leading-normal);
-padding-block: var(--helix-space-xs);
-}
-
-[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);
-}
-
-:host([windowed]) [part="tree"] {
-block-size: var(--object-inspector-block-size, 24em);
-overflow-y: auto;
-overscroll-behavior: contain;
-}
-
-[part="tree"]:focus-visible {
-outline: none;
-}
-
-[part~="row"] {
-cursor: default;
-overflow: hidden;
-padding-inline-end: var(--helix-space-2xl);
-padding-inline-start: calc(
+);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));display: flex;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="label"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}[part="frame"] {position: relative;}[part="tree"] {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-radius: var(--object-inspector-radius, var(--helix-radii-lg));font-family: var(--helix-font-mono);line-height: var(--helix-leading-normal);padding-block: var(--helix-space-xs);}[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);}:host([windowed]) [part="tree"] {block-size: var(--object-inspector-block-size, 24em);overflow-y: auto;overscroll-behavior: contain;}[part~="row"] {cursor: default;overflow: hidden;padding-inline-end: var(--helix-space-2xl);padding-inline-start: calc(
 var(--object-inspector-level) *
 var(--helix-space-lg) +
 var(--helix-space-sm) +
 1em +
 var(--helix-space-2xs)
-);
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-[part~="row"][aria-expanded] {
-cursor: pointer;
-padding-inline-start: calc(
+);text-overflow: ellipsis;white-space: nowrap;}[part~="row"][aria-expanded] {cursor: pointer;padding-inline-start: calc(
 var(--object-inspector-level) *
 var(--helix-space-lg) +
 var(--helix-space-sm)
-);
-}
-
-[part="tree"]:focus [part~="row-active"] {
-background-color: var(--helix-color-surface-sunken);
-}
-
-[part="tree"]:focus-visible [part~="row-active"] {
-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(
+);}[part="tree"]:focus-within [part~="row-active"] {background-color: var(--helix-color-surface-sunken);}[part~="row"]:focus-visible {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);
-inline-size: 1em;
-margin-inline-end: var(--helix-space-2xs);
-vertical-align: -0.125em;
-}
-
-[part="key"] {
-color: var(--helix-color-syntax-name);
-}
-
-[part~="row-match"] [part="key"] {
-color: var(--helix-color-foreground);
-}
-
-[part="string"] {
-color: var(--helix-color-syntax-string);
-}
-
-[part="number"] {
-color: var(--helix-color-syntax-constant);
-}
-
-[part="boolean"],
-[part="null"] {
-color: var(--helix-color-syntax-keyword);
-}
-
-[part="summary"],
-[part="count"] {
-color: var(--helix-color-foreground-muted);
-}
-
-[part="count"] {
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-margin-inline-start: var(--helix-space-xs);
-}
-
-[part="copy"] {
-inset-block-start: var(--helix-space-2xs);
-inset-inline-end: var(--helix-space-2xs);
-position: absolute;
-}
-
-@media print {
-[part="tree"] {
-block-size: auto;
-overflow: visible;
-}
-
-[part="copy"] {
-display: none;
-}
-}`);
+);}[part="toggle"] {block-size: 1em;color: var(--helix-color-foreground-muted);inline-size: 1em;margin-inline-end: var(--helix-space-2xs);vertical-align: -0.125em;}[part="key"] {color: var(--helix-color-syntax-name);}[part~="row-match"] [part="key"] {color: var(--helix-color-foreground);}[part="string"] {color: var(--helix-color-syntax-string);}[part="number"] {color: var(--helix-color-syntax-constant);}[part="boolean"],
+[part="null"] {color: var(--helix-color-syntax-keyword);}[part="summary"],
+[part="count"] {color: var(--helix-color-foreground-muted);}[part="count"] {font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);margin-inline-start: var(--helix-space-xs);}[part="copy"] {inset-block-start: var(--helix-space-2xs);inset-inline-end: var(--helix-space-2xs);position: absolute;}@media print {[part="tree"] {block-size: auto;overflow: visible;}[part="copy"] {display: none;}}`);

package/dist/option/group/option-group.css.js

@@ -1,23 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-:host(:not(:first-of-type)) {
-margin-block-start: var(--helix-space-xs);
-}
-
-:host([hidden]) {
-display: none;
-}
-
-[part="label"] {
-color: var(--helix-color-foreground-subtle);
-display: block;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-padding-block: var(--helix-space-2xs);
-
-padding-inline: var(--option-padding, var(--helix-space-xs));
-}`);
+export const styles = createSheet(`:host {display: block;}:host(:not(:first-of-type)) {margin-block-start: var(--helix-space-xs);}:host([hidden]) {display: none;}[part="label"] {color: var(--helix-color-foreground-subtle);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);padding-block: var(--helix-space-2xs);padding-inline: var(--option-padding, var(--helix-space-xs));}`);

package/dist/option/index.d.ts

@@ -1,2 +1,3 @@
 export * from './group/option-group.js';
 export * from './root/option-root.js';
+export * from './separator/option-separator.js';

package/dist/option/index.js

@@ -1,2 +1,3 @@
 export * from './group/option-group.js';
 export * from './root/option-root.js';
+export * from './separator/option-separator.js';

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

@@ -1,91 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_option-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E");
-display: block;
-}
-
-:host([hidden]) {
-display: none;
-}
-
-[part~="item"] {
-align-items: center;
-
-border-radius: var(--option-radius, var(--helix-radii-sm));
-color: var(--helix-color-foreground);
-cursor: pointer;
-display: flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-gap: var(--helix-space-xs);
-
-min-block-size: var(--helix-size-control-tight);
-box-sizing: border-box;
-
-padding-block: var(--option-block-padding, var(--helix-space-2xs));
-
-padding-inline: var(--option-padding, var(--helix-space-xs));
-
-user-select: none;
-}
-
-[part="text"] {
-display: flex;
-flex: 1 1 auto;
-flex-direction: column;
-min-inline-size: 0;
-}
-
-[part="description"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-xs);
-line-height: var(--helix-leading-tight);
-overflow: hidden;
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-[part="label"] {
-min-inline-size: 0;
-
-overflow: hidden;
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-:host(:state(selected)) [part~="item"]::after {
-content: "";
-background-color: currentColor;
-block-size: var(--helix-size-icon-tight);
-flex: 0 0 auto;
-inline-size: var(--helix-size-icon-tight);
-margin-inline-start: auto;
-mask-image: var(--_option-check);
-mask-position: center;
-mask-repeat: no-repeat;
-mask-size: contain;
-}
-
-:host([data-active]) [part~="item"],
-:host(:not([disabled])) [part~="item"]:hover {
-
-background-color: var(
+export const styles = createSheet(`:host {--_option-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E");display: block;}:host([hidden]) {display: none;}[part~="item"] {align-items: center;border-radius: var(--option-radius, var(--helix-radii-sm));color: var(--helix-color-foreground);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs);min-block-size: var(--helix-size-control-tight);box-sizing: border-box;padding-block: var(--option-block-padding, var(--helix-space-2xs));padding-inline: var(--option-padding, var(--helix-space-xs));user-select: none;}[part="text"] {display: flex;flex: 1 1 auto;flex-direction: column;min-inline-size: 0;}[part="description"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);line-height: var(--helix-leading-tight);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="label"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}:host(:state(selected)) [part~="item"]::after {content: "";background-color: currentColor;block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);margin-inline-start: auto;mask-image: var(--_option-check);mask-position: center;mask-repeat: no-repeat;mask-size: contain;}:host(:state(active)) [part~="item"],
+:host(:not([disabled])) [part~="item"]:hover {background-color: var(
 --option-active-color,
 light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
 )
-);
-}
-
-:host([disabled]) [part~="item"] {
-cursor: default;
-opacity: 0.5;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+);}:host([disabled]) [part~="item"] {cursor: default;opacity: 0.5;}@media print {:host {print-color-adjust: exact;}}`);

package/dist/option/separator/option-separator.css.d.ts

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

package/dist/option/separator/option-separator.css.js

@@ -0,0 +1,3 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {border-block-start: var(--option-separator-thickness, var(--helix-border-thin)) solid
+var(--option-separator-color, var(--helix-color-border));display: block;margin-block: var(--option-separator-space, var(--helix-space-2xs));}:host([hidden]) {display: none;}`);

package/dist/option/separator/option-separator.d.ts

@@ -0,0 +1,26 @@
+import { HelixHeadlessOptionSeparator } from '@fusion.dev/helix-headless/option';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A rule between options or groups inside a listbox.
+ *
+ * @description
+ * A hairline across the panel in the list's border color, with a little air
+ * either side.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Divider, ListBoxSeparator
+ * @documentation https://fusion.dev/helix/components/option
+ *
+ * @cssproperty --option-separator-color - The rule's color.
+ * @cssproperty --option-separator-space - The space above and below the rule.
+ * @cssproperty --option-separator-thickness - The rule's thickness.
+ */
+export declare class HelixOptionSeparator extends HelixHeadlessOptionSeparator {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-option-separator': HelixOptionSeparator;
+    }
+}

package/dist/option/separator/option-separator.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 { HelixHeadlessOptionSeparator } from '@fusion.dev/helix-headless/option';
+import { styles } from './option-separator.css.js';
+let HelixOptionSeparator = class HelixOptionSeparator extends HelixHeadlessOptionSeparator {
+    static { this.styles = styles; }
+};
+HelixOptionSeparator = __decorate([
+    customElement('helix-option-separator')
+], HelixOptionSeparator);
+export { HelixOptionSeparator };

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

@@ -1,42 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_orb-size: calc(var(--helix-size-loader-lg) * 1.5);
-
---_orb-color: var(--orb-color, currentColor);
---_orb-ground: var(--orb-ground, var(--helix-color-background));
-
-block-size: var(--orb-size, var(--_orb-size));
-
-display: inline-block;
-flex-shrink: 0;
-inline-size: var(--orb-size, var(--_orb-size));
-vertical-align: middle;
-}
-
-:host([size="sm"]) {
---_orb-size: var(--helix-size-loader-md);
-}
-
-:host([size="lg"]) {
---_orb-size: calc(var(--helix-size-loader-lg) * 2);
-}
-
-[part="canvas"] {
-block-size: 100%;
-
-color: var(--_orb-color);
-display: block;
-inline-size: 100%;
-text-decoration-color: var(--_orb-ground);
-}
-
-[part="canvas"][hidden] {
-display: none;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {--_orb-size: calc(var(--helix-size-loader-lg) * 1.5);--_orb-color: var(--orb-color, currentColor);--_orb-ground: var(--orb-ground, var(--helix-color-background));block-size: var(--orb-size, var(--_orb-size));display: inline-block;flex-shrink: 0;inline-size: var(--orb-size, var(--_orb-size));vertical-align: middle;}:host([size="sm"]) {--_orb-size: var(--helix-size-loader-md);}:host([size="lg"]) {--_orb-size: calc(var(--helix-size-loader-lg) * 2);}[part="canvas"] {block-size: 100%;color: var(--_orb-color);display: block;inline-size: 100%;text-decoration-color: var(--_orb-ground);}[part="canvas"][hidden] {display: none;}@media print {:host {display: none;}}`);

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

@@ -31,7 +31,8 @@ import { type OrbState } from '../shapes.js';
  * `prefers-reduced-motion`, it draws one still frame.
  *
  * The orb is styled only and has behavior, which the tier split does not
- * otherwise allow. Its role, name and busy state follow `state`, and the rest
+ * otherwise allow. Its role, name and busy state follow `state`, unless
+ * `announce` makes it a status region, and the rest
  * is drawing dots to a canvas, so there is no structure to restyle. For a
  * drawing of your own, the headless `Loader` holds the same busy progress bar
  * and its name.
@@ -47,7 +48,7 @@ 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.
+ * @csspart live - The word for the state, which the orb says as it changes when `announce` is set. Rendered only then, 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.
@@ -64,8 +65,13 @@ import { type OrbState } from '../shapes.js';
 export declare class HelixOrb extends HelixElement {
     static styles: CSSResultGroup;
     /**
-     * Says each new state through a polite live region, such as "Working" and
-     * then "Done".
+     * Says each new state politely, such as "Working" and then "Done".
+     *
+     * **The orb becomes the live region**: its role is `status` rather than
+     * `progressbar` or `img`, and it holds the state's word. A region inside a
+     * progress bar or an image may never be heard, because assistive technology
+     * treats what those two hold as presentation. The name is still `label` or
+     * the state's word.
      *
      * 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
@@ -118,8 +124,6 @@ export declare class HelixOrb extends HelixElement {
      * 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;
     /**
@@ -161,6 +165,10 @@ export declare class HelixOrb extends HelixElement {
      */
     private phase;
     protected willUpdate(changed: PropertyValues): void;
+    /** The state drawn: `state`, or `thinking` for one it does not draw. */
+    private get shown();
+    /** The word for the state drawn, in the page's words where it gave them. */
+    private get word();
     protected render(): TemplateResult;
     protected firstUpdated(changed: PropertyValues): void;
     connectedCallback(): void;

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

@@ -4,8 +4,8 @@ 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, drawStatus, HelixElement, hostAria, PaintGateController, readColor, StatusController, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, HelixElement, hostAria, PaintGateController, readColor, wordsConverter, } from '@fusion.dev/helix-core';
+import { html, nothing } 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';
@@ -23,19 +23,6 @@ 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() {
@@ -44,7 +31,6 @@ let HelixOrb = class HelixOrb extends HelixElement {
         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,
@@ -86,14 +72,12 @@ let HelixOrb = class HelixOrb extends HelixElement {
     static { this.styles = [liveStyles, styles]; }
     willUpdate(changed) {
         super.willUpdate(changed);
-        const state = ORB_STATES.includes(this.state)
-            ? this.state
-            : 'thinking';
+        const state = this.shown;
         hostAria(this.internals, {
-            label: this.label || this.stateLabels[state] || LABELS[state],
-            role: state === 'done' ? 'img' : 'progressbar',
+            label: this.label || this.word,
+            role: this.announce ? 'status' : state === 'done' ? 'img' : 'progressbar',
         });
-        this.internals.ariaBusy = state === 'done' ? 'false' : 'true';
+        this.internals.ariaBusy = this.announce ? null : state === 'done' ? 'false' : 'true';
         this.toggleState('connecting', state === 'connecting');
         this.toggleState('done', state === 'done');
         this.toggleState('fetching', state === 'fetching');
@@ -103,13 +87,18 @@ let HelixOrb = class HelixOrb extends HelixElement {
         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]);
-            }
         }
     }
+    get shown() {
+        return ORB_STATES.includes(this.state)
+            ? this.state
+            : 'thinking';
+    }
+    get word() {
+        return this.stateLabels?.[this.shown] || LABELS[this.shown];
+    }
     render() {
-        return html `<canvas part="canvas" aria-hidden="true"></canvas>${drawStatus(this.status)}`;
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>${this.announce ? html `<span part="live">${this.word}</span>` : nothing}`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -275,7 +264,7 @@ __decorate([
     property()
 ], HelixOrb.prototype, "state", void 0);
 __decorate([
-    property({ attribute: 'state-labels', converter: labelsConverter })
+    property({ attribute: 'state-labels', converter: wordsConverter })
 ], HelixOrb.prototype, "stateLabels", void 0);
 HelixOrb = __decorate([
     customElement('helix-orb')