@fusion.dev/helix-headless 0.147.0 → 0.148.0

package/dist/select/root/select-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, afterLinkFollowed, customElement, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, typesCharacter, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -23,6 +23,8 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             },
             target: () => this.partNamed('trigger'),
         });
+        this.status = new StatusController(this);
+        this.autocomplete = '';
         this.emptyText = 'No matches';
         this.filterable = false;
         this.focusable = true;
@@ -114,7 +116,17 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
                     this.requestOpen(true);
                 }
                 else {
-                    this.requestValue(match);
+                    this.choose(match);
+                }
+                return;
+            }
+            const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+            if (step !== 0 && !this.multiple && !(event.altKey || event.ctrlKey || event.metaKey)) {
+                event.preventDefault();
+                const reachable = listbox?.options.filter((option) => !option.hidden && !option.disabled) ?? [];
+                const next = reachable[Math.max(0, reachable.findIndex((one) => one.value === this.value) + step)];
+                if (next) {
+                    this.choose(next.value);
                 }
                 return;
             }
@@ -151,12 +163,11 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return this.partNamed('listbox');
     }
     get display() {
-        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
         const words = this.chosenOptions.map((option) => option.text);
         if (words.length > 0) {
             return new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(words);
         }
-        return chosen.size > 0 && !this.childrenKnown ? nothing : this.placeholder;
+        return this.value !== '' && !this.childrenKnown ? nothing : this.placeholder;
     }
     get chosenOptions() {
         const chosen = new Set(this.value === '' ? [] : this.value.split(','));
@@ -207,6 +218,11 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.requestOpen(false);
         this.partNamed('trigger')?.focus();
     }
+    choose(value) {
+        if (this.requestValue(value) && onApple()) {
+            this.status.say(String(this.display));
+        }
+    }
     reconcileOptions() {
         const options = optionsAmong(this.knownChildren);
         if (this.defaultValue === '' && !this.hasAttribute('default-value')) {
@@ -283,12 +299,11 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       manual
       aria-label=${this.listName || this.listLabel || nothing}
       @keydown=${this.handleListKeydown}
+      .chosenAgain=${() => this.close()}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
       @input=${this.stopInner}
     >
-      <!-- An option arriving or leaving changes no property, so this is what
-           schedules the update that rereads the trigger's words. -->
       <slot @slotchange=${() => this.requestUpdate()}></slot>
     </${this.tag('listbox')}>`;
     }
@@ -327,18 +342,27 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       >
         <slot name="start"></slot>
         <span part="value" id="value">${this.renderValue()}</span>
-        ${''}
         <slot name="end"></slot>
-        ${''}
         ${this.renderIndicator()}
       </button>
 
       <div part="surface" popover="manual" ?hidden=${!this.open}>
         ${this.renderListbox()}
       </div>
-      ${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderHint()}${this.renderFeedback()}${drawStatus(this.status)}
+      ${drawAutofill({
+            autocomplete: this.autocomplete,
+            disabled: this.isDisabled,
+            multiple: this.multiple,
+            onFill: (value) => this.requestValue(value),
+            options: optionsAmong(this.knownChildren),
+            value: this.value,
+        })}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessSelect.prototype, "autocomplete", void 0);
 __decorate([
     property({ attribute: 'empty-text' })
 ], HelixHeadlessSelect.prototype, "emptyText", void 0);

package/dist/speed-dial/group/speed-dial-group.d.ts

@@ -0,0 +1,48 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary A named set of actions inside a speed dial, set apart from the rest.
+ *
+ * @description
+ * A `group` of the dial's menu, named by its label, as React Aria's menu
+ * sections and Menu's groups are: a reader hears the name on entering the set,
+ * and the arrow keys walk through every group's actions in order, from the
+ * last action of one group to the first of the next.
+ *
+ * Put actions straight into the group, and the group straight into the dial.
+ * Anything else slotted here is drawn and is not an action.
+ *
+ * @since 0.141.0
+ * @status stable
+ * @category actions
+ * @aliases Speed dial section, Action group
+ * @documentation https://fusion.dev/helix/components/speed-dial
+ *
+ * @slot - The group's actions.
+ * @slot label - The group's name, for content richer than the `label` text.
+ *
+ * @csspart group - The set, which carries the `group` role.
+ * @csspart label - The group's name, drawn above its actions while there is one.
+ */
+export declare class HelixHeadlessSpeedDialGroup extends HelixElement {
+    /**
+     * The group's name, drawn above its actions and read by screen readers.
+     */
+    label: string;
+    /**
+     * @internal Read by the dial to find the actions inside a group, which is
+     * cheaper than `instanceof` and is why this is public rather than protected.
+     * Not a consumer's to read or set.
+     */
+    readonly isSpeedDialGroup = true;
+    /** Whether anything is in the `label` slot, so the name is drawn from it. */
+    private labelSlotted;
+    private readonly readLabel;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-speed-dial-group': HelixHeadlessSpeedDialGroup;
+    }
+}

package/dist/speed-dial/group/speed-dial-group.js

@@ -0,0 +1,43 @@
+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, slotFilled } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+let HelixHeadlessSpeedDialGroup = class HelixHeadlessSpeedDialGroup extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.isSpeedDialGroup = true;
+        this.labelSlotted = false;
+        this.readLabel = () => {
+            this.labelSlotted = slotFilled(this.renderRoot.querySelector('slot[name="label"]'));
+        };
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readLabel();
+    }
+    render() {
+        const named = this.label !== '' || this.labelSlotted;
+        return html `<div part="group" role="group" aria-labelledby=${named ? 'label' : nothing}>
+      <span id="label" part="label" ?hidden=${!named}
+        ><slot name="label" @slotchange=${this.readLabel}>${this.label}</slot></span
+      >
+      <slot></slot>
+    </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessSpeedDialGroup.prototype, "label", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpeedDialGroup.prototype, "labelSlotted", void 0);
+HelixHeadlessSpeedDialGroup = __decorate([
+    customElement('helix-headless-speed-dial-group')
+], HelixHeadlessSpeedDialGroup);
+export { HelixHeadlessSpeedDialGroup };

package/dist/speed-dial/index.d.ts

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';

package/dist/speed-dial/index.js

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One action in a speed dial: an icon and a name beside it.
  *
@@ -12,6 +12,13 @@ import { type TemplateResult } from 'lit';
  * `title` on an icon shows only on hover. Visible text is read, searched, and
  * translated like other text.
  *
+ * `shortcut` gives the action's keyboard shortcut as a chord, such as `mod+s`,
+ * the grammar Menu's rows use. The action carries it as `aria-keyshortcuts`
+ * and draws it after the name in the platform's glyphs or words, `⌘S` on an
+ * Apple keyboard and `Ctrl+S` elsewhere, as Menu draws its rows' shortcuts.
+ * Put a `Kbd` in the `shortcut` slot to draw it as keys instead; the dial
+ * imports no `Kbd` of its own. Showing a shortcut does not bind it.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -20,18 +27,26 @@ import { type TemplateResult } from 'lit';
  *
  * @slot - The action's name.
  * @slot icon - The action's icon, the main way the action is recognized.
+ * @slot shortcut - The action's keyboard shortcut, drawn after its name, such as a `Kbd`. It replaces the text drawn for `shortcut`, and is hidden from the name, which `aria-keyshortcuts` carries instead.
  *
  * @event {HelixSelectEvent} helix-select - The action was chosen. Cancelable: cancel it to keep the dial open.
  *
  * @csspart icon - The box that holds the icon.
  * @csspart item - The control for the action.
  * @csspart label - The action's name, beside the icon.
+ * @csspart shortcut - The box after the name that holds the shortcut, shown while `shortcut` is set or something is in the `shortcut` slot.
  */
 export declare class HelixHeadlessSpeedDialItem extends HelixElement {
     /**
      * Whether the action is disabled, so it cannot be chosen.
      */
     disabled: boolean;
+    /**
+     * The action's keyboard shortcut as a chord, such as `mod+s`, carried as
+     * `aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
+     * keyboard and Control elsewhere. Showing a shortcut does not bind it.
+     */
+    shortcut: string;
     /**
      * The action's value, sent in `helix-select` when the action is chosen.
      */
@@ -66,9 +81,19 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
      * chosen out of a set, and a speed dial's action is never chosen that way.
      */
     get selected(): boolean;
+    /** Whether anything is in the `shortcut` slot, so its box is drawn. */
+    private hasShortcut;
+    private readonly readShortcut;
     private choose;
     private readonly handleClick;
     protected render(): TemplateResult;
+    /**
+     * The `shortcut` slot, holding the shortcut drawn after the name as Kbd
+     * draws a chord and from the same table: the slot's fallback, so a `Kbd`
+     * slotted in replaces it.
+     */
+    protected renderShortcut(): TemplateResult;
+    protected firstUpdated(changed: PropertyValues): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/speed-dial/item/speed-dial-item.js

@@ -4,15 +4,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
+import { ariaChord, chordParts, customElement, deepActiveElement, HelixElement, HelixSelectEvent, keyNames, onApple, reportRuntime, slotFilled, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
+let toldSelected = false;
 let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixElement {
     constructor() {
         super(...arguments);
         this.disabled = false;
+        this.shortcut = '';
         this.value = '';
         this.isSpeedDialItem = true;
+        this.hasShortcut = false;
+        this.readShortcut = () => {
+            this.hasShortcut = slotFilled(this.renderRoot.querySelector('slot[name="shortcut"]'));
+        };
         this.handleClick = () => {
             this.choose();
         };
@@ -31,6 +37,14 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
         return active !== null && active.getRootNode() === this.renderRoot;
     }
     get selected() {
+        if (!toldSelected) {
+            toldSelected = true;
+            reportRuntime({
+                kind: 'deprecated',
+                message: `<${this.localName}>.selected is deprecated: read \`active\`, which says the same.`,
+                tag: this.localName,
+            });
+        }
         return this.active;
     }
     choose() {
@@ -40,26 +54,50 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
     render() {
+        const keys = this.shortcut === '' ? nothing : ariaChord(this.shortcut, !this.hydrating && onApple());
         return html `<button
       part="item"
       role="menuitem"
       type="button"
       aria-disabled=${this.disabled ? 'true' : nothing}
+      aria-keyshortcuts=${keys}
       ?disabled=${this.disabled}
       tabindex="-1"
       @click=${this.handleClick}
     >
       <span part="icon"><slot name="icon"></slot></span>
-      <span part="label"><slot></slot></span>
+      <span part="label"><slot></slot><span
+          part="shortcut"
+          aria-hidden="true"
+          ?hidden=${!this.hasShortcut && this.shortcut === ''}
+        >${this.renderShortcut()}</span
+      ></span>
     </button>`;
     }
+    renderShortcut() {
+        const drawn = keyNames(chordParts(this.shortcut), !this.hydrating && onApple());
+        return html `<slot name="shortcut" @slotchange=${this.readShortcut}>${drawn.keys.join(drawn.separator)}</slot>`;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readShortcut();
+        if (this.shortcut !== '') {
+            this.finishHydration();
+        }
+    }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSpeedDialItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "shortcut", void 0);
 __decorate([
     property()
 ], HelixHeadlessSpeedDialItem.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpeedDialItem.prototype, "hasShortcut", void 0);
 HelixHeadlessSpeedDialItem = __decorate([
     customElement('helix-headless-speed-dial-item')
 ], HelixHeadlessSpeedDialItem);

package/dist/speed-dial/long-press.d.ts

@@ -0,0 +1,50 @@
+import type { ReactiveControllerHost } from 'lit';
+/** How long a press is held before it counts, in milliseconds, as React Aria waits. */
+export declare const LONG_PRESS_DELAY = 500;
+/**
+ * How far a held pointer may drift and still be the same press, in pixels. A
+ * finger is never still, and one that moves further is scrolling or dragging.
+ */
+export declare const LONG_PRESS_SLOP = 10;
+/** What a long press reads and calls. */
+export interface LongPressOptions {
+    /** Called once a press has been held for the delay without drifting. */
+    onLongPress: () => void;
+}
+/**
+ * Watches one control's presses for a held one.
+ *
+ * The control's own handlers call `down`, `move` and `up`, so a press counts
+ * only where it started on the control, and `cancel` drops it. The click a
+ * held press ends in is the long press's, and `takeClick` says so once, so the
+ * control's own action does not run as well.
+ */
+export declare class LongPress {
+    private readonly options;
+    private readonly wait;
+    /** Where the press began, while one is held and still counts. */
+    private from;
+    /** Whether the press that just ended was a long one, until its click is taken. */
+    private held;
+    constructor(host: ReactiveControllerHost, options: LongPressOptions);
+    /** Starts the wait for a press of the primary button. */
+    down(event: PointerEvent): void;
+    /** Drops the press once the pointer drifts past the slop. */
+    move(event: PointerEvent): void;
+    /**
+     * Ends the press. A press released before the delay is an ordinary one.
+     *
+     * A held one keeps its claim on a click only until the task ends: the click
+     * a release makes comes in the same task, and a release that makes none, off
+     * the control or after a touch's own menu, must not leave the next Enter on
+     * the control swallowed.
+     */
+    up(): void;
+    /** Drops the press, which then neither opens anything nor swallows a click. */
+    cancel(): void;
+    /**
+     * Whether a click belongs to the long press that just ended, and so is not
+     * the control's. True once.
+     */
+    takeClick(): boolean;
+}

package/dist/speed-dial/long-press.js

@@ -0,0 +1,48 @@
+import { DelayController } from '@fusion.dev/helix-core';
+export const LONG_PRESS_DELAY = 500;
+export const LONG_PRESS_SLOP = 10;
+export class LongPress {
+    constructor(host, options) {
+        this.options = options;
+        this.from = undefined;
+        this.held = false;
+        this.wait = new DelayController(host);
+    }
+    down(event) {
+        this.held = false;
+        if (event.button !== 0) {
+            return;
+        }
+        this.from = { x: event.clientX, y: event.clientY };
+        this.wait.start(LONG_PRESS_DELAY, () => {
+            this.from = undefined;
+            this.held = true;
+            this.options.onLongPress();
+        });
+    }
+    move(event) {
+        const from = this.from;
+        if (from && Math.hypot(event.clientX - from.x, event.clientY - from.y) > LONG_PRESS_SLOP) {
+            this.cancel();
+        }
+    }
+    up() {
+        this.from = undefined;
+        this.wait.cancel();
+        if (this.held) {
+            setTimeout(() => {
+                this.held = false;
+            });
+        }
+    }
+    cancel() {
+        this.from = undefined;
+        this.held = false;
+        this.wait.cancel();
+    }
+    takeClick() {
+        const held = this.held;
+        this.held = false;
+        return held;
+    }
+}

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -25,6 +25,31 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * action whose name starts with it. The actions are one tab stop, and Tab
  * closes the dial and moves on.
  *
+ * **Keyboard.** On the trigger, Enter, Space or a press opens the dial on its
+ * first action. With the dial open:
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Right | Moves to the next action, from the last back to the first. |
+ * | Up, Left | Moves to the action before, from the first round to the last. |
+ * | Home, End | Moves to the first or the last action. |
+ * | A letter | Moves to the next action whose name starts with it. |
+ * | Enter, Space | Chooses the action, and the dial closes. |
+ * | Escape | Closes the dial and puts focus back on the trigger. |
+ * | Tab | Closes the dial and moves on. |
+ *
+ * **Groups.** Put actions in `Speed Dial.Group`, named by its `label`, to set
+ * them apart as Menu's sections do: each is a `group` of the menu, and the
+ * arrow keys walk through every group's actions in order.
+ *
+ * **A trigger with its own action.** With `open-on="long-press"`, a press on
+ * the trigger is the trigger's own, such as composing a message, and holding it
+ * for half a second opens the dial, as React Aria's menu trigger does with
+ * `trigger="longPress"`. Alt+Down or Alt+Up opens it from the keyboard, and
+ * the trigger says so in its description, `long-press-label`, the drawn one
+ * and a slotted one alike. A press that has opened the dial does not also do
+ * the trigger's action.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -49,10 +74,26 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      * Accessible name for the trigger and the set of actions it opens.
      */
     label: string;
+    /**
+     * The description the trigger gives under `open-on="long-press"`, saying how
+     * its actions are reached.
+     *
+     * A slotted trigger is described by the dial, which carries the words as
+     * its own label for that: a Helix button's inner control at once, and a
+     * plain element of yours once a reader reaches it, after hydration, unless
+     * you described or labeled it yourself.
+     */
+    longPressLabel: string;
     /**
      * Space between the trigger and the actions, in pixels.
      */
     offset: number;
+    /**
+     * What opens the dial. `click` opens it on a press of the trigger. Under
+     * `long-press`, a press is the trigger's own action, and the dial opens on a
+     * press held for half a second, or on Alt+Down or Alt+Up.
+     */
+    openOn: 'click' | 'long-press';
     /**
      * The direction the actions open in. They move to another side if that side
      * does not fit.
@@ -74,8 +115,14 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
     protected readonly panel: PopoverController;
     /** Whatever the consumer slotted, or the button rendered in its place. */
     private get trigger();
-    /** The actions, which are this element's own rows and nothing else slotted. */
+    /**
+     * The actions, in order: this element's own rows, and the rows of each group
+     * slotted beside them, and nothing else slotted.
+     */
     private get items();
+    /** Watches the trigger for a held press, under `open-on="long-press"`. */
+    private readonly longPress;
+    private get pressHeld();
     /**
      * Puts focus on the trigger, the slotted one or the button drawn in its
      * place, as a `focus()` on a native control would. The host itself takes no
@@ -85,6 +132,17 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
     /** Shuts it and puts the reader back on the trigger. */
     private close;
     private readonly handleTriggerClick;
+    /**
+     * Takes the click a held press ends in, ahead of the trigger's own
+     * listeners, so a press that opened the dial does not also do the trigger's
+     * action. In capture, on the host, which is above a slotted trigger.
+     */
+    private readonly handleHeldClick;
+    private readonly handleTriggerPointerDown;
+    private readonly handleTriggerPointerMove;
+    private readonly handleTriggerPointerUp;
+    private readonly handleTriggerPointerCancel;
+    private readonly handleTriggerContextMenu;
     private readonly handleSelect;
     private readonly handleKeydown;
     connectedCallback(): void;
@@ -113,6 +171,27 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      * is expanded is already saying it has something to expand.
      */
     private announce;
+    /** The control the dial has described, so the description can be taken back. */
+    private described;
+    /**
+     * Describes a slotted trigger by `long-press-label` under
+     * `open-on="long-press"`, as the drawn one is, or takes it back.
+     *
+     * **By the host, which carries the words as its label.** The drawn
+     * trigger's description is in this shadow root, and a reference from the
+     * consumer's trigger, or from the button inside a Helix one, cannot point
+     * in; it can point out, to the host. Core's `linkDescription` says where
+     * that is safe: inside a component's shadow root always, and on the
+     * consumer's own element only once `light` says a reader has acted, which
+     * is after hydration. React Aria's long press describes whatever trigger it
+     * is given.
+     *
+     * @param light A reader has just reached the trigger.
+     */
+    private describeTrigger;
+    /** A reader reaching a slotted trigger, which is late enough to describe a plain one. */
+    private readonly handleTriggerFocusIn;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * The control that opens it, behind a seam the styled tier can move.