@fusion.dev/helix-headless 0.0.0-dev

package/dist/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './item/accordion-item.js';
+export * from './root/accordion-root.js';

package/dist/accordion/index.js

@@ -0,0 +1,2 @@
+export * from './item/accordion-item.js';
+export * from './root/accordion-root.js';

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

@@ -0,0 +1,141 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
+/**
+ * @summary One collapsible section of an accordion.
+ *
+ * @description
+ * Carries its own open state, which is why it is an element rather than a slot.
+ * Used alone, outside an accordion, it is a disclosure.
+ *
+ * Content stays mounted when closed and is hidden by the styled tier's CSS, so
+ * it can animate and so the text is present in server-rendered HTML. Closed
+ * content is `inert`, keeping it out of the tab order and the accessibility
+ * tree without removing it from the box tree.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Collapsible, Expander, Disclosure
+ * @documentation https://helix.fusion.dev/components/accordion
+ *
+ * @slot - The content revealed when open.
+ * @slot summary - The always-visible trigger content.
+ *
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the section closes, and cancelable.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart chevron - The open and close indicator.
+ * @csspart container - The outer wrapper.
+ * @csspart content - The revealed region.
+ * @csspart content-inner - The clipping box inside the animated region.
+ * @csspart trigger - The clickable summary row.
+ */
+export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionItem_base {
+    /**
+     * Where the open indicator sits, or whether there is one.
+     *
+     * `auto` resolves to `end`, which is where a reader scanning a list of
+     * summaries expects it: the label starts at the same x on every row, and the
+     * indicator is found once at the edge rather than shifting with the text.
+     * `start` is for a tree-like reading, where the indicator leads the label.
+     * `none` is for a row that carries its own affordance and would otherwise
+     * have two.
+     */
+    chevronPlacement?: 'auto' | 'start' | 'end' | 'none';
+    /** The chevron, or nothing when suppressed. */
+    private renderChevron;
+    /**
+     * A group name, which is how `<details>` says a set is exclusive.
+     *
+     * **Two ways of saying the same thing, and the platform's one does not need a
+     * parent.** An accordion's `mode` makes its own children exclusive, which
+     * covers the ordinary case and cannot express a set spread across a page: a
+     * `<details name="faq">` anywhere in a document closes every other one that
+     * shares the name, and this does the same. Items in the same root with the
+     * same name are peers whether or not an accordion contains them.
+     *
+     * Where both are set the name wins, because it is the narrower statement: a
+     * consumer who named a group meant that group rather than whatever happens to
+     * be nested where.
+     *
+     * Optional rather than `''`, because a reflected string defaulting to the
+     * empty string writes `name=""` onto every item ever rendered: Lit reflects
+     * it, and the resting state of a reflected property is the attribute's
+     * absence. Caught by `hydration.dom.spec.ts`.
+     */
+    name?: string;
+    /**
+     * The nearest accordion above this item, if there is one.
+     *
+     * Resolved on demand rather than held, so an item moved between accordions
+     * coordinates with the one it is in now. `closest` crosses no shadow
+     * boundary, which is correct: an item inside another item's content is in
+     * that item's light DOM and finds the same accordion, so the check below is
+     * what keeps it independent.
+     */
+    private get accordion();
+    /**
+     * The items this one coordinates with: its own siblings, and only those.
+     *
+     * Direct children only. An accordion nested inside an item's content is a
+     * separate set, and opening a section in it must not close anything outside.
+     */
+    private get peers();
+    /**
+     * Opens or closes this item, and enforces the accordion's mode.
+     *
+     * The item that was clicked is the coordinator. It refuses first, then
+     * announces, then applies, then closes its peers, in that order: closing a
+     * peer before knowing whether this change was even allowed would leave the
+     * set collapsed after a listener refused it.
+     */
+    protected handleToggle: () => void;
+    /**
+     * Moves focus to this item's trigger.
+     *
+     * The parent accordion drives arrow-key navigation and cannot reach the
+     * trigger itself, because it is inside this item's shadow root. Exposing the
+     * intent as a method keeps the parent out of the child's internals.
+     */
+    focusTrigger(): void;
+    /**
+     * The item, with `hidden` doing the collapsing.
+     *
+     * **A closed section has to be closed with no stylesheet at all**, which is
+     * the whole claim `headless` makes. `inert` alone was not that: it takes the
+     * region out of the accessibility tree and off the tab order and leaves every
+     * pixel of it on the screen, so a consumer taking this tier got two sections
+     * of text permanently open with a trigger underneath saying
+     * `aria-expanded="false"`. Worse than merely unstyled: a sighted reader saw
+     * content a screen reader was told is not there.
+     *
+     * The collapse was living in the styled tier's `grid-template-rows: 0fr`,
+     * which is an animation and was doing the hiding as a side effect. So the
+     * state was in a stylesheet, and only one of the two tiers had it.
+     *
+     * **`hidden` costs the styled tier nothing**, which is what makes this the
+     * cheap fix rather than a trade. The UA sheet hides `[hidden]` from the UA
+     * origin, and `accordion-item.css` already sets `display: grid` on this part
+     * unconditionally, so the author rule wins and the 0fr transition runs
+     * exactly as before. Measured both tiers after the change.
+     *
+     * **Not `hidden="until-found"`**, which would be the better accordion and is
+     * a different piece of work. It hides through `content-visibility` rather
+     * than `display`, so the styled tier's `display: grid` would no longer
+     * override it and a collapsed section would animate open to nothing. It also
+     * needs a `beforematch` handler to set `open`, or find-in-page reveals text
+     * while the trigger still reports collapsed.
+     *
+     * `inert` stays. `hidden` answers the reader who can see and `inert` answers
+     * the one tabbing through, and in the styled tier, where `display` is
+     * overridden, `inert` is the only one of the two still in force.
+     */
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-accordion-item': HelixHeadlessAccordionItem;
+    }
+}
+export {};

package/dist/accordion/item/accordion-item.js

@@ -0,0 +1,214 @@
+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 { closestInstance, customElement, HelixElement, MixinControllerOpen, } from '@fusion.dev/helix-core';
+import { caretDown } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { HelixHeadlessAccordion } from '../root/accordion-root.js';
+/** Shadow-DOM id linking the trigger's aria-controls to the content region. */
+const CONTENT_ID = 'content';
+/**
+ * Shadow-DOM id of the trigger, used to name the content region.
+ *
+ * A `role="region"` with no accessible name is not exposed as a landmark by
+ * screen readers and is flagged by every automated audit, so the region borrows
+ * the trigger's text. Both ids live in the same shadow root, so the reference
+ * resolves; an IDREF pointing at the light DOM never would.
+ */
+const TRIGGER_ID = 'trigger';
+/**
+ * @summary One collapsible section of an accordion.
+ *
+ * @description
+ * Carries its own open state, which is why it is an element rather than a slot.
+ * Used alone, outside an accordion, it is a disclosure.
+ *
+ * Content stays mounted when closed and is hidden by the styled tier's CSS, so
+ * it can animate and so the text is present in server-rendered HTML. Closed
+ * content is `inert`, keeping it out of the tab order and the accessibility
+ * tree without removing it from the box tree.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Collapsible, Expander, Disclosure
+ * @documentation https://helix.fusion.dev/components/accordion
+ *
+ * @slot - The content revealed when open.
+ * @slot summary - The always-visible trigger content.
+ *
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the section closes, and cancelable.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart chevron - The open and close indicator.
+ * @csspart container - The outer wrapper.
+ * @csspart content - The revealed region.
+ * @csspart content-inner - The clipping box inside the animated region.
+ * @csspart trigger - The clickable summary row.
+ */
+let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinControllerOpen(HelixElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Opens or closes this item, and enforces the accordion's mode.
+         *
+         * The item that was clicked is the coordinator. It refuses first, then
+         * announces, then applies, then closes its peers, in that order: closing a
+         * peer before knowing whether this change was even allowed would leave the
+         * set collapsed after a listener refused it.
+         */
+        this.handleToggle = () => {
+            const next = !this.open;
+            const mode = this.accordion?.mode;
+            // `single` keeps one open at all times, so the last one cannot be closed.
+            // `single-collapsible` is the same rule without that floor.
+            if (!next && mode === 'single') {
+                return;
+            }
+            if (!this.requestOpen(next)) {
+                return;
+            }
+            if (next && (mode !== undefined || (this.name !== undefined && this.name !== ''))) {
+                for (const peer of this.peers) {
+                    if (peer !== this && peer.open) {
+                        // A peer in controlled mode will only notify: its consumer owns the
+                        // value and may decline, which can legitimately leave two open.
+                        peer.requestOpen(false);
+                    }
+                }
+            }
+        };
+    }
+    /** The chevron, or nothing when suppressed. */
+    renderChevron() {
+        if (this.chevronPlacement === 'none') {
+            return nothing;
+        }
+        return html `<svg part="chevron" fill="currentColor" viewBox=${caretDown.viewBox} aria-hidden="true">
+      ${unsafeSVG(caretDown.content)}
+    </svg>`;
+    }
+    /**
+     * The nearest accordion above this item, if there is one.
+     *
+     * Resolved on demand rather than held, so an item moved between accordions
+     * coordinates with the one it is in now. `closest` crosses no shadow
+     * boundary, which is correct: an item inside another item's content is in
+     * that item's light DOM and finds the same accordion, so the check below is
+     * what keeps it independent.
+     */
+    get accordion() {
+        return closestInstance(this, HelixHeadlessAccordion);
+    }
+    /**
+     * The items this one coordinates with: its own siblings, and only those.
+     *
+     * Direct children only. An accordion nested inside an item's content is a
+     * separate set, and opening a section in it must not close anything outside.
+     */
+    get peers() {
+        if (this.name !== undefined && this.name !== '') {
+            /* By name, across the whole root rather than one accordion, which is what
+               `<details name>` means. `getRootNode()` so an item inside a shadow tree
+               finds its group there rather than reaching into the document, which is
+               the same boundary every IDREF in this library respects. */
+            const root = this.getRootNode();
+            return [
+                ...root.querySelectorAll(`${this.localName}[name="${CSS.escape(this.name)}"]`),
+            ];
+        }
+        const accordion = this.accordion;
+        if (!accordion || accordion.items.indexOf(this) === -1) {
+            return [];
+        }
+        return accordion.items;
+    }
+    /**
+     * Moves focus to this item's trigger.
+     *
+     * The parent accordion drives arrow-key navigation and cannot reach the
+     * trigger itself, because it is inside this item's shadow root. Exposing the
+     * intent as a method keeps the parent out of the child's internals.
+     */
+    focusTrigger() {
+        this.renderRoot.querySelector(`#${TRIGGER_ID}`)?.focus();
+    }
+    /**
+     * The item, with `hidden` doing the collapsing.
+     *
+     * **A closed section has to be closed with no stylesheet at all**, which is
+     * the whole claim `headless` makes. `inert` alone was not that: it takes the
+     * region out of the accessibility tree and off the tab order and leaves every
+     * pixel of it on the screen, so a consumer taking this tier got two sections
+     * of text permanently open with a trigger underneath saying
+     * `aria-expanded="false"`. Worse than merely unstyled: a sighted reader saw
+     * content a screen reader was told is not there.
+     *
+     * The collapse was living in the styled tier's `grid-template-rows: 0fr`,
+     * which is an animation and was doing the hiding as a side effect. So the
+     * state was in a stylesheet, and only one of the two tiers had it.
+     *
+     * **`hidden` costs the styled tier nothing**, which is what makes this the
+     * cheap fix rather than a trade. The UA sheet hides `[hidden]` from the UA
+     * origin, and `accordion-item.css` already sets `display: grid` on this part
+     * unconditionally, so the author rule wins and the 0fr transition runs
+     * exactly as before. Measured both tiers after the change.
+     *
+     * **Not `hidden="until-found"`**, which would be the better accordion and is
+     * a different piece of work. It hides through `content-visibility` rather
+     * than `display`, so the styled tier's `display: grid` would no longer
+     * override it and a collapsed section would animate open to nothing. It also
+     * needs a `beforematch` handler to set `open`, or find-in-page reveals text
+     * while the trigger still reports collapsed.
+     *
+     * `inert` stays. `hidden` answers the reader who can see and `inert` answers
+     * the one tabbing through, and in the styled tier, where `display` is
+     * overridden, `inert` is the only one of the two still in force.
+     */
+    render() {
+        const open = this.open;
+        return html `
+      <div part="container">
+        <button
+          id=${TRIGGER_ID}
+          aria-controls=${CONTENT_ID}
+          aria-expanded=${open ? 'true' : 'false'}
+          part="trigger"
+          type="button"
+          @click=${this.handleToggle}
+        >
+          ${this.chevronPlacement === 'start' ? this.renderChevron() : nothing}
+          <slot name="summary"></slot>
+          ${this.chevronPlacement === 'start' ? nothing : this.renderChevron()}
+        </button>
+        <div
+          id=${CONTENT_ID}
+          aria-labelledby=${TRIGGER_ID}
+          part="content"
+          ?hidden=${!open}
+          ?inert=${!open}
+          role="region"
+        >
+          <div part="content-inner">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: 'chevron-placement', reflect: true })
+], HelixHeadlessAccordionItem.prototype, "chevronPlacement", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessAccordionItem.prototype, "name", void 0);
+HelixHeadlessAccordionItem = __decorate([
+    customElement('helix-headless-accordion-item')
+], HelixHeadlessAccordionItem);
+export { HelixHeadlessAccordionItem };

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

@@ -0,0 +1,57 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
+/**
+ * @summary Groups collapsible sections, one open at a time by default.
+ *
+ * @description
+ * Holds the mode and nothing else. The item that was clicked is what
+ * coordinates: it walks up to the nearest accordion, reads the mode off it, and
+ * closes its peers itself.
+ *
+ * Coordination is structural, not a subscription. `helix-before-open` does not bubble
+ * and is not composed, because overlays nest and an inner one's lifecycle must
+ * never read as the outer one's, so an accordion cannot learn that a child
+ * opened by listening for it.
+ *
+ * Membership resolves on demand, so there is no registry to keep in step: an
+ * item added a second after render coordinates on its first click.
+ *
+ * Items are matched with `instanceof HelixHeadlessAccordionItem`, never by tag
+ * name. Matching `helix-accordion-item` would tie this tier to the styled one.
+ *
+ * Every listener is attached on connect, so none of it runs on the server,
+ * where there is no tree to walk and no events to hear.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category layout
+ * @aliases Collapse, Expander group
+ * @documentation https://helix.fusion.dev/components/accordion
+ *
+ * @slot - The accordion's items.
+ */
+export declare class HelixHeadlessAccordion extends HelixElement {
+    /**
+     * How many sections may be open at once.
+     *
+     * Absent is `multiple`, so nothing closes unexpectedly and the default costs
+     * no attribute on the host. `single` keeps exactly one open and refuses to
+     * close the last; `single-collapsible` keeps at most one and lets it close.
+     *
+     * A union rather than a mode plus a `collapsible` boolean, which would make
+     * `collapsible` alongside `multiple` expressible and meaningless.
+     */
+    mode?: 'single' | 'single-collapsible';
+    /** Direct items, in light-DOM order. Client only: the server has no tree. */
+    get items(): HelixHeadlessAccordionItem[];
+    private readonly handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-accordion': HelixHeadlessAccordion;
+    }
+}

package/dist/accordion/root/accordion-root.js

@@ -0,0 +1,96 @@
+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, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
+/** Keys that move focus between triggers, per the APG accordion pattern. */
+const NAVIGATION = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End']);
+/**
+ * @summary Groups collapsible sections, one open at a time by default.
+ *
+ * @description
+ * Holds the mode and nothing else. The item that was clicked is what
+ * coordinates: it walks up to the nearest accordion, reads the mode off it, and
+ * closes its peers itself.
+ *
+ * Coordination is structural, not a subscription. `helix-before-open` does not bubble
+ * and is not composed, because overlays nest and an inner one's lifecycle must
+ * never read as the outer one's, so an accordion cannot learn that a child
+ * opened by listening for it.
+ *
+ * Membership resolves on demand, so there is no registry to keep in step: an
+ * item added a second after render coordinates on its first click.
+ *
+ * Items are matched with `instanceof HelixHeadlessAccordionItem`, never by tag
+ * name. Matching `helix-accordion-item` would tie this tier to the styled one.
+ *
+ * Every listener is attached on connect, so none of it runs on the server,
+ * where there is no tree to walk and no events to hear.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category layout
+ * @aliases Collapse, Expander group
+ * @documentation https://helix.fusion.dev/components/accordion
+ *
+ * @slot - The accordion's items.
+ */
+let HelixHeadlessAccordion = class HelixHeadlessAccordion extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.handleKeydown = (event) => {
+            if (!NAVIGATION.has(event.key)) {
+                return;
+            }
+            const items = this.items;
+            const current = items.indexOf(event.target);
+            if (current === -1) {
+                return;
+            }
+            const last = items.length - 1;
+            let next = current;
+            if (event.key === 'ArrowDown') {
+                next = current === last ? 0 : current + 1;
+            }
+            else if (event.key === 'ArrowUp') {
+                next = current === 0 ? last : current - 1;
+            }
+            else if (event.key === 'Home') {
+                next = 0;
+            }
+            else {
+                next = last;
+            }
+            // Only once a move is certain, so an unhandled key still scrolls the page.
+            event.preventDefault();
+            items[next]?.focusTrigger();
+        };
+    }
+    /** Direct items, in light-DOM order. Client only: the server has no tree. */
+    get items() {
+        return [...this.children].filter((child) => child instanceof HelixHeadlessAccordionItem);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessAccordion.prototype, "mode", void 0);
+HelixHeadlessAccordion = __decorate([
+    customElement('helix-headless-accordion')
+], HelixHeadlessAccordion);
+export { HelixHeadlessAccordion };

package/dist/announcement/index.d.ts

@@ -0,0 +1 @@
+export * from './root/announcement-root.js';

package/dist/announcement/index.js

@@ -0,0 +1 @@
+export * from './root/announcement-root.js';

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

@@ -0,0 +1,106 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessAnnouncement_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
+/**
+ * @summary A page-level message above the masthead, which can be dismissed.
+ *
+ * @description
+ * Chrome rather than content. An announcement sits above the header and speaks
+ * for the whole page: a trial ending, a service degraded, a change of terms. A
+ * passage that interrupts a document to set itself apart is a `Callout`, which
+ * is read where it sits and cannot be dismissed. Neither is a variant of the
+ * other.
+ *
+ * **Always a polite live region.** `role="alert"` is assertive and interrupts
+ * whatever is being read, which is right for something that appears mid-session
+ * and wrong for something that was in the served HTML: an assertive
+ * announcement would cut across a screen-reader user on every page load, before
+ * they had read anything. Politeness costs a moment and is never wrong; the tone
+ * does not change that, because an error that was always there is still not an
+ * interruption.
+ *
+ * Dismissing is a request. The announcement does not remove itself, because the
+ * consumer owns the markup and taking the node out from under them would put
+ * their state and the document out of step. `preventDefault()` on the
+ * `helix-dismiss` is a refusal.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Banner, Notification bar, Alert bar
+ * @documentation https://helix.fusion.dev/components/announcement
+ *
+ * @slot - The message.
+ * @slot actions - What to do about it, usually a link or a button.
+ * @slot icon - Replaces the glyph inside the dismiss control.
+ *
+ * @event {HelixDismissEvent} helix-dismiss - Fired when the reader asks to close it. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart actions - The trailing action region.
+ * @csspart content - The message region.
+ * @csspart dismiss - The control that asks to close.
+ * @csspart dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ */
+export declare class HelixHeadlessAnnouncement extends HelixHeadlessAnnouncement_base {
+    /**
+     * Which color the band wears.
+     *
+     * **This was `severity` and it was claiming more than it did.** Severity is a
+     * judgment about the message, and elsewhere in this library it carries one:
+     * `Callout` reads `TONE_MARKS` for an icon and a label, so `tone="danger"`
+     * puts a mark beside the text and names it to a screen reader. Here it did
+     * none of that. It set a color, the live region stayed polite either way, and
+     * nothing about the announcement's semantics moved. A property that only
+     * changes the paint should say so.
+     *
+     * `tone` is the word this library already uses for exactly that, and `Tag`
+     * made the identical rename for the identical reason: the word it left was a
+     * treatment, `tone` is semantic color. The set matches `Tag`'s so the two
+     * agree, with `neutral` as the resting value and `primary` for a band that is
+     * about the product rather than about a state.
+     *
+     * `neutral` is what an unset announcement already looked like, said out loud
+     * so a consumer can put a band back to it from markup, and `surface` is the
+     * one value that is not a color: it lifts the band onto the surface step
+     * instead of the sunken one, for a strip carrying something that is not a
+     * state at all.
+     */
+    tone?: 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'surface' | 'warning';
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Says on the `actions` region whether anything is in it.
+     *
+     * An empty region is not free: it is still a flex item, so it still takes the
+     * container's gap. There is no selector that can ask, `slot:empty` being
+     * about a slot's fallback rather than its assigned nodes, so the component
+     * asks and says so, on the region inside this shadow root rather than on the
+     * host: an attribute written onto the host is a change to markup the consumer
+     * rendered, which React reports on hydration and does not patch up.
+     */
+    private markEmpty;
+    /**
+     * The cross inside the dismiss button, behind a seam.
+     *
+     * Slot fallback, so a consumer replaces it by slotting; and a method, so the
+     * tier above replaces it by overriding. Those answer different people: the
+     * slot is for the page and the method is for whoever is building the styled
+     * layer, and a fallback with only the first is one a tier can restyle and
+     * cannot change.
+     *
+     * **Named for what it draws, which it was not.** It was `renderIcon`, with a
+     * description of "the mark for the announcement's tone", and it draws the `x`
+     * glyph inside the dismiss button and has never drawn a tone. The name is
+     * `renderIcon` on `Toast` and `Callout` too, and on both of those it takes a
+     * severity and draws exactly the tone mark this claimed to: the prose came
+     * from a sibling that meant it. An announcement has no tone mark at all.
+     */
+    protected renderDismissIcon(): TemplateResult;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-announcement': HelixHeadlessAnnouncement;
+    }
+}
+export {};