@fusion.dev/helix-headless 0.217.0 → 0.219.0

package/dist/chat/composer/chat-composer.js

@@ -1,19 +1,39 @@
 import { __decorate } from "tslib";
-import { customElement, DelayController, HelixFormElement, HelixSendEvent, HelixTypingEvent, hostAria, MixinVoice, markRegion, numberConverter, SPOKEN_RULE, timeConverter, words, } from '@fusion.dev/helix-core';
-import { arrowElbowDownLeft } from '@fusion.dev/helix-icons';
+import { customElement, DelayController, deepActiveElement, HelixFormElement, HelixSendEvent, HelixStopEvent, HelixTypingEvent, hostAria, MixinVoice, markRegion, motionPaused, numberConverter, onMotionChange, pressedOwnControl, reducedMotion, SPOKEN_RULE, timeConverter, words, } from '@fusion.dev/helix-core';
+import { arrowElbowDownLeft, stop } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { html as staticHtml } from 'lit/static-html.js';
+import '../../tooltip/index.js';
+const EXAMPLE_SHOWN = 6500;
+const EXAMPLE_SHORT = 40;
+const EXAMPLE_PER_CHARACTER = 60;
+const EXAMPLE_LONGEST = 10000;
+const EXAMPLE_LEAVE = 250;
+const EXAMPLE_CROSS = 100;
+const EXAMPLE_ENTER = 350;
+export function exampleShown(example) {
+    const extra = Math.max(0, Array.from(example).length - EXAMPLE_SHORT);
+    return Math.min(EXAMPLE_LONGEST, EXAMPLE_SHOWN + extra * EXAMPLE_PER_CHARACTER);
+}
 let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoice(HelixFormElement) {
     constructor() {
         super(...arguments);
+        this.attached = false;
+        this.busy = false;
         this.feedback = '';
         this.label = 'Message';
         this.placeholder = '';
+        this.placeholders = [];
+        this.queue = false;
         this.required = false;
         this.rows = 1;
+        this.sendDisabled = false;
         this.sendLabel = 'Send';
+        this.sendReason = '';
+        this.stopLabel = 'Stop';
         this.submitOn = 'enter';
         this.typingTimeout = 3000;
         this.value = '';
@@ -22,6 +42,9 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
         this.touched = false;
         this.edited = false;
         this.shownInvalid = false;
+        this.example = 0;
+        this.focused = false;
+        this.onScreen = true;
         this.pause = new DelayController(this, { renders: false });
         this.touch = () => {
             this.touched = true;
@@ -32,6 +55,19 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
                 this.touch();
             }
         };
+        this.handleAttachmentsDown = (event) => {
+            const region = event.currentTarget;
+            if (event.button !== 0 || pressedOwnControl(event, region) || this.isDisabled) {
+                return;
+            }
+            event.preventDefault();
+            this.partNamed('field')?.focus();
+        };
+        this.focusedOn = 'elsewhere';
+        this.handleFocus = (event) => {
+            this.focused = event.type === 'focus';
+            this.turnExamples();
+        };
         this.handleInput = (event) => {
             event.stopPropagation();
             this.value = event.target.value;
@@ -42,6 +78,9 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
         this.handleSend = () => {
             this.send();
         };
+        this.handleStop = () => {
+            this.dispatchEvent(new HelixStopEvent());
+        };
         this.handleKey = (event) => {
             if (event.key !== 'Enter' || this.submitOn !== 'enter') {
                 return;
@@ -77,7 +116,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
     send() {
         this.stopListening();
         const value = this.value.trim();
-        if (this.isDisabled) {
+        if (this.isDisabled || this.sendDisabled || (this.busy && !this.queue)) {
             return false;
         }
         if (value === '') {
@@ -116,12 +155,154 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
         this.value = typeof state === 'string' ? state : this.declared;
     }
     markEmpty() {
-        for (const name of ['start', 'end']) {
+        for (const name of ['attachments', 'start', 'end']) {
             markRegion(this.renderRoot, name, [name]);
         }
     }
+    get idling() {
+        return (this.knownChildren.some((child) => child.getAttribute('slot') === 'idle') &&
+            !this.busy &&
+            !this.attached &&
+            this.value.trim() === '');
+    }
+    get carrying() {
+        return this.knownChildren.some((child) => child.getAttribute('slot') === 'attachments');
+    }
+    noteFocus() {
+        if (!this.hasUpdated) {
+            this.focusedOn = 'elsewhere';
+            return;
+        }
+        const active = deepActiveElement();
+        const send = this.partNamed('send');
+        const idle = this.renderRoot
+            ?.querySelector('slot[name="idle"]')
+            ?.assignedElements({ flatten: true });
+        this.focusedOn =
+            active !== null && active === send
+                ? 'send'
+                : active !== null && idle?.some((element) => element === active || element.contains(active))
+                    ? 'idle'
+                    : 'elsewhere';
+    }
+    keepFocus() {
+        if (this.focusedOn === 'send' && this.idling) {
+            const idle = this.renderRoot
+                ?.querySelector('slot[name="idle"]')
+                ?.assignedElements({ flatten: true })[0];
+            idle?.focus();
+        }
+        else if (this.focusedOn === 'idle' && !this.idling) {
+            this.partNamed('send')?.focus();
+        }
+        this.focusedOn = 'elsewhere';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.unmoved ??= onMotionChange(() => this.turnExamples());
+        if (typeof IntersectionObserver === 'function' && this.sight === undefined) {
+            this.sight = new IntersectionObserver((entries) => {
+                const seen = entries.at(-1)?.isIntersecting ?? this.onScreen;
+                if (seen !== this.onScreen) {
+                    this.onScreen = seen;
+                    this.turnExamples();
+                }
+            });
+            this.sight.observe(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unmoved?.();
+        this.unmoved = undefined;
+        this.sight?.disconnect();
+        this.sight = undefined;
+        this.onScreen = true;
+        this.stopExamples();
+    }
+    renderExamples() {
+        const { length } = this.placeholders;
+        const at = (index) => ({ index, text: this.placeholders[index % length] ?? '' });
+        const leaving = this.leavingExample;
+        return this.renderExample(at(this.example), leaving === undefined ? undefined : at(leaving));
+    }
+    get shownPlaceholder() {
+        const { length } = this.placeholders;
+        return length > 0 ? (this.placeholders[this.example % length] ?? '') : this.placeholder;
+    }
+    turnExamples() {
+        const free = this.isConnected &&
+            this.placeholders.length > 1 &&
+            this.value === '' &&
+            this.onScreen &&
+            !reducedMotion() &&
+            !motionPaused();
+        if (!free) {
+            this.stopExamples();
+            return;
+        }
+        if (this.focused) {
+            clearTimeout(this.turning);
+            this.turning = undefined;
+            return;
+        }
+        if (this.turning === undefined && this.crossing === undefined && this.leaving === undefined) {
+            this.turning = setTimeout(() => this.leaveExample(), exampleShown(this.shownPlaceholder));
+        }
+    }
+    leaveExample() {
+        this.turning = undefined;
+        if (reducedMotion() || motionPaused()) {
+            this.stopExamples();
+            return;
+        }
+        clearTimeout(this.entering);
+        this.entering = undefined;
+        this.toggleState('example-entering', false);
+        this.toggleState('example-leaving', true);
+        this.leavingExample = this.example;
+        this.crossing = setTimeout(() => this.arriveExample(), EXAMPLE_CROSS);
+        this.leaving = setTimeout(() => {
+            this.leaving = undefined;
+            this.leavingExample = undefined;
+            this.toggleState('example-leaving', false);
+        }, EXAMPLE_LEAVE);
+    }
+    arriveExample() {
+        this.crossing = undefined;
+        this.example = (this.example + 1) % Math.max(this.placeholders.length, 1);
+        this.toggleState('example-entering', true);
+        this.entering = setTimeout(() => {
+            this.entering = undefined;
+            this.toggleState('example-entering', false);
+            this.exampleLanded();
+        }, EXAMPLE_ENTER);
+        this.turnExamples();
+    }
+    stopExamples() {
+        clearTimeout(this.turning);
+        clearTimeout(this.crossing);
+        clearTimeout(this.leaving);
+        clearTimeout(this.entering);
+        this.turning = undefined;
+        this.crossing = undefined;
+        this.leaving = undefined;
+        this.entering = undefined;
+        this.leavingExample = undefined;
+        this.toggleState('example-leaving', false);
+        this.toggleState('example-entering', false);
+        this.exampleLanded();
+    }
+    exampleLanded() { }
+    renderExample(_example, _leaving) {
+        return nothing;
+    }
     updated(changed) {
         super.updated(changed);
+        this.keepFocus();
+        if (changed.has('placeholders') || changed.has('value')) {
+            this.turnExamples();
+        }
         this.markEmpty();
         if (changed.has('value')) {
             this.internals.setFormValue(this.value, this.value);
@@ -139,6 +320,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.finishHydration();
         this.addEventListener('invalid', () => {
             if (!this.checkingValidity) {
                 this.touch();
@@ -148,32 +330,42 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'group' });
+        this.noteFocus();
     }
     renderSend() {
-        return html `<button
+        const mark = this.busy ? stop : arrowElbowDownLeft;
+        const held = this.sendDisabled && !this.busy;
+        const reasoned = held && !this.isDisabled && this.sendReason !== '';
+        const control = html `<button
       part="send"
       type="button"
-      aria-label=${this.sendLabel}
-      ?disabled=${this.isDisabled}
-      @click=${this.handleSend}
+      aria-label=${this.busy ? this.stopLabel : this.sendLabel}
+      aria-disabled=${reasoned ? 'true' : nothing}
+      aria-describedby=${reasoned ? 'send-reason' : nothing}
+      ?disabled=${this.isDisabled || (held && !reasoned)}
+      @click=${this.busy ? this.handleStop : this.handleSend}
     >
-      <svg
-        part="mark"
-        fill="currentColor"
-        viewBox=${arrowElbowDownLeft.viewBox}
-        aria-hidden="true"
-      >
-        ${unsafeSVG(arrowElbowDownLeft.content)}
+      <svg part="mark" fill="currentColor" viewBox=${mark.viewBox} aria-hidden="true">
+        ${unsafeSVG(mark.content)}
       </svg>
     </button>`;
+        if (!reasoned) {
+            return control;
+        }
+        return staticHtml `<${this.tag('tooltip')} id="send-reason" content=${this.sendReason}
+      exportparts="arrow: reason-arrow, arrow-bottom: reason-arrow-bottom, arrow-left: reason-arrow-left, arrow-right: reason-arrow-right, arrow-top: reason-arrow-top, surface: reason-surface, surface-bottom: reason-surface-bottom, surface-left: reason-surface-left, surface-right: reason-surface-right, surface-top: reason-surface-top"
+      >${control}</${this.tag('tooltip')}>`;
     }
     render() {
         return html `<div part="composer">
+      <div part="attachments" ?hidden=${!this.carrying} @mousedown=${this.handleAttachmentsDown}
+        ><slot name="attachments" @slotchange=${() => this.markEmpty()}></slot
+      ></div>
       <textarea
         part="field"
         .value=${live(this.value)}
         aria-label=${this.label}
-        placeholder=${this.placeholder}
+        placeholder=${this.shownPlaceholder}
         rows=${this.rows}
         ?required=${this.required}
         minlength=${this.minLength ?? nothing}
@@ -181,20 +373,36 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
         aria-invalid=${this.shownInvalid ? 'true' : nothing}
         aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
         ?disabled=${this.isDisabled}
+        @blur=${this.handleFocus}
         @change=${this.handleChange}
+        @focus=${this.handleFocus}
         @input=${this.handleInput}
         @keydown=${this.handleKey}
       ></textarea>
+      ${this.placeholders.length > 1 ? this.renderExamples() : nothing}
       <div part="tools">
-        <span part="start"><slot name="start"></slot></span>
-        <span part="end"><slot name="end"></slot></span>
-        ${this.renderVoice()}${this.renderSend()}
+        <span part="start"><slot name="start" @slotchange=${() => this.markEmpty()}></slot></span>
+        <span part="end"><slot name="end" @slotchange=${() => this.markEmpty()}></slot></span>
+        ${this.renderVoice()}
+        <span part="idle" ?hidden=${!this.idling}
+          ><slot
+            name="idle"
+            @slotchange=${() => this.requestUpdate()}
+          ></slot
+        ></span>
+        ${this.idling ? nothing : this.renderSend()}
       </div>
     </div>${this.feedback === ''
             ? nothing
             : html `<p part="feedback" id="feedback" role="alert">${this.feedback}</p>`}`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessChatComposer.prototype, "attached", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessChatComposer.prototype, "busy", void 0);
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "feedback", void 0);
@@ -211,16 +419,32 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessChatComposer.prototype, "placeholders", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessChatComposer.prototype, "queue", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessChatComposer.prototype, "required", void 0);
 __decorate([
     property({ converter: numberConverter('rows', 1) })
 ], HelixHeadlessChatComposer.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: 'send-disabled', type: Boolean })
+], HelixHeadlessChatComposer.prototype, "sendDisabled", void 0);
 __decorate([
     words,
     property({ attribute: 'send-label' })
 ], HelixHeadlessChatComposer.prototype, "sendLabel", void 0);
+__decorate([
+    property({ attribute: 'send-reason' })
+], HelixHeadlessChatComposer.prototype, "sendReason", void 0);
+__decorate([
+    words,
+    property({ attribute: 'stop-label' })
+], HelixHeadlessChatComposer.prototype, "stopLabel", void 0);
 __decorate([
     property({ attribute: 'submit-on' })
 ], HelixHeadlessChatComposer.prototype, "submitOn", void 0);
@@ -233,6 +457,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessChatComposer.prototype, "shownInvalid", void 0);
+__decorate([
+    state()
+], HelixHeadlessChatComposer.prototype, "example", void 0);
+__decorate([
+    state()
+], HelixHeadlessChatComposer.prototype, "leavingExample", void 0);
 HelixHeadlessChatComposer = __decorate([
     customElement('helix-headless-chat-composer')
 ], HelixHeadlessChatComposer);

package/dist/chat/message/chat-message.d.ts

@@ -26,6 +26,11 @@ export declare const FAILED_LABEL = "Not sent";
  * a page in another language sets them once there. The time moves on by
  * itself, so "now" becomes "1 minute ago" while the page is open.
  *
+ * **What a turn carries goes in `attachments`**, above the bubble rather
+ * in it: a picture inside a tinted bubble is framed twice, and one sent with
+ * no words is an empty bubble around it. It sits against the same edge as the
+ * turn, and the words keep their bubble under it.
+ *
  * **An agent's work goes in `work`, and its answer in the content.** The work,
  * its thinking, the commands it ran and what they printed, is a record read
  * the way a log is, so a `Log` with `separation="plain"` and `quiet` sits there
@@ -40,6 +45,7 @@ export declare const FAILED_LABEL = "Not sent";
  *
  * @slot - The turn's content.
  * @slot actions - Controls for the turn, such as copy, retry, or react.
+ * @slot attachments - What the turn carries, such as images or files, above its content and outside the bubble, against the author's edge.
  * @slot avatar - The author's avatar.
  * @slot indicator - The indicator shown before the first token arrives.
  * Defaults to the typing indicator.
@@ -49,6 +55,7 @@ export declare const FAILED_LABEL = "Not sent";
  * @event {HelixSendEvent} helix-send - Fired when the user retries a failed message. Cancelable: if it is not canceled, the turn is sent again. Canceling it leaves the failure and the retry button as they were.
  *
  * @csspart actions - The controls on the turn, beside its time.
+ * @csspart attachments - The box around the `attachments` slot, above the content and outside the bubble.
  * @csspart avatar - The box around the `avatar` slot.
  * @csspart body - The content and the line under it.
  * @csspart content - Your own markup.

package/dist/chat/message/chat-message.js

@@ -108,7 +108,7 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
     }
     markEmpty() {
         markRegion(this.renderRoot, 'content', [''], { hide: false });
-        for (const name of ['work', 'sources', 'actions']) {
+        for (const name of ['work', 'attachments', 'sources', 'actions']) {
             markRegion(this.renderRoot, name, [name]);
         }
     }
@@ -121,6 +121,7 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
       <span part="avatar"><slot name="avatar"></slot></span>
       <div part="body">
         <div part="work"><slot name="work" @slotchange=${this.handleFill}></slot></div>
+        <div part="attachments"><slot name="attachments" @slotchange=${this.handleFill}></slot></div>
         <div part="content">
           <slot @slotchange=${this.handleFill}></slot>
           ${this.renderIndicator()}

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

@@ -138,6 +138,7 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart log - The transcript, which scrolls. On this tier, it needs only a block size.
  * @csspart message - The message drawn for a turn from `turns`, forwarded whole.
  * @csspart message-actions - The controls on a turn from `turns`, beside its time.
+ * @csspart message-attachments - The attachments above the bubble of a turn from `turns`.
  * @csspart message-avatar - The avatar box of a turn from `turns`.
  * @csspart message-avatar-mine - The avatar box of a turn from `turns` by `me`.
  * @csspart message-body - The content of a turn from `turns`, and the line under it.

package/dist/chat/root/chat-root.js

@@ -705,7 +705,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         return html `<div part="before" role="presentation" style="block-size: ${before}px; flex: none"></div>
       ${repeat(this.turns.slice(first, last), (turn, offset) => turn.key ?? first + offset, (turn, offset) => html `<div part="turn" data-index=${first + offset}>
             <${message}
-              exportparts="actions: message-actions, avatar: message-avatar, body: message-body,
+              exportparts="actions: message-actions, attachments: message-attachments, avatar: message-avatar, body: message-body,
                 content: message-content, indicator: message-indicator, mark: message-mark, message,
                 meta: message-meta, retry: message-retry, sources: message-sources,
                 state: message-state, time: message-time, work: message-work${secondNames(SECOND_NAMES.author, turn.author)}${secondNames(SECOND_NAMES.state, turn.state)}"

package/dist/copy-button/root/copy-button-root.js

@@ -24,7 +24,7 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
         this.showedResult = false;
         this.clipboard = new CopyController(this, { after: () => this.feedbackDuration });
         this.handleCopy = async (event) => {
-            if (this.pending) {
+            if (this.refusesPress) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
                 return;
@@ -100,12 +100,12 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
       part="button"
       type="button"
       aria-busy=${this.pending ? 'true' : nothing}
-      aria-disabled=${this.pending ? 'true' : nothing}
+      aria-disabled=${this.refusesPress ? 'true' : nothing}
       aria-label=${this.says}
       data-copied=${this.copied ? '' : nothing}
       data-failed=${this.failed ? '' : nothing}
       tabindex=${this.focusable ? nothing : '-1'}
-      ?disabled=${this.isDisabled}
+      ?disabled=${this.isDisabled && !this.heldDisabled}
       @click=${this.handleCopy}
       @keydown=${this.notePress}
       @pointerdown=${this.notePress}

package/dist/device-screen/root/device-screen-root.d.ts

@@ -1,6 +1,7 @@
 import { ChildrenController, type DeviceButton, HelixElement, ToolbarController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 /**
  * @summary A device's screen, drawn from a stream you supply, that sends taps, swipes, keys, and button presses back to the device.
  *
@@ -143,6 +144,16 @@ import '../../icon-button/index.js';
  * @csspart screenshot-live - The screenshot button's live region, which speaks while the button is pending.
  * @csspart screenshot-spinner - The ring the screenshot button turns while it is pending.
  * @csspart screenshot-text - The box the screenshot button's icon sits in.
+ * @csspart tooltip-arrow - The arrow of the tooltip that names each button, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-surface - The bubble of the tooltip that names each button, forwarded from `Tooltip`.
+ * @csspart tooltip-surface-bottom - The bubble while it is below its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-left - The bubble while it is left of its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-right - The bubble while it is right of its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-top - The bubble while it is above its button. Set together with `tooltip-surface`.
  * @csspart touch - A ring where a touch is or was.
  * @csspart touch-held - A ring under a finger that is down, beside `touch`, with `show-touches`.
  * @csspart volume-down - The Volume down button.

package/dist/device-screen/root/device-screen-root.js

@@ -6,6 +6,7 @@ import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import { gestureOf } from '../gesture.js';
 import { quarterTurns, turn, unturn, unturnDistance } from '../turn.js';
 const MARK_SHOWS = 700;
@@ -546,6 +547,7 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
             return nothing;
         }
         const button = this.tag('icon-button');
+        const tip = this.tag('tooltip');
         const off = this.readonly;
         const raised = this.controlsRaised;
         return html `<div
@@ -557,6 +559,7 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
       ${this.draws('back')
             ? html `<${button}
               part="back"
+              id="back"
               exportparts="button: back-button, live: back-live, spinner: back-spinner, text: back-text"
               ?disabled=${off}
               label=${this.backLabel}
@@ -566,11 +569,12 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
               @pointerdown=${this.handleHoldStart}
             >
               <slot name="back-icon">${drawIcon(caretLeft)}</slot>
-            </${button}>`
+            </${button}><${tip} for="back" content=${this.backLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${this.draws('home')
             ? html `<${button}
               part="home"
+              id="home"
               exportparts="button: home-button, live: home-live, spinner: home-spinner, text: home-text"
               ?disabled=${off}
               label=${this.homeLabel}
@@ -580,11 +584,12 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
               @pointerdown=${this.handleHoldStart}
             >
               <slot name="home-icon">${drawIcon(house)}</slot>
-            </${button}>`
+            </${button}><${tip} for="home" content=${this.homeLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${this.draws('recents')
             ? html `<${button}
               part="recents"
+              id="recents"
               exportparts="button: recents-button, live: recents-live, spinner: recents-spinner, text: recents-text"
               ?disabled=${off}
               label=${this.recentsLabel}
@@ -594,11 +599,12 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
               @pointerdown=${this.handleHoldStart}
             >
               <slot name="recents-icon">${drawIcon(square)}</slot>
-            </${button}>`
+            </${button}><${tip} for="recents" content=${this.recentsLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${this.draws('power')
             ? html `<${button}
               part="power"
+              id="power"
               exportparts="button: power-button, live: power-live, spinner: power-spinner, text: power-text"
               ?disabled=${off}
               label=${this.powerLabel}
@@ -608,11 +614,12 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
               @pointerdown=${this.handleHoldStart}
             >
               <slot name="power-icon">${drawIcon(power)}</slot>
-            </${button}>`
+            </${button}><${tip} for="power" content=${this.powerLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${this.draws('volume')
             ? html `<${button}
                 part="volume-up"
+                id="volume-up"
                 exportparts="button: volume-up-button, live: volume-up-live, spinner: volume-up-spinner, text: volume-up-text"
                 ?disabled=${off}
                 label=${this.volumeUpLabel}
@@ -622,9 +629,10 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
                 @pointerdown=${this.handleHoldStart}
               >
                 <slot name="volume-up-icon">${drawIcon(speakerHigh)}</slot>
-              </${button}>
+              </${button}><${tip} for="volume-up" content=${this.volumeUpLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
               <${button}
                 part="volume-down"
+                id="volume-down"
                 exportparts="button: volume-down-button, live: volume-down-live, spinner: volume-down-spinner, text: volume-down-text"
                 ?disabled=${off}
                 label=${this.volumeDownLabel}
@@ -634,11 +642,12 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
                 @pointerdown=${this.handleHoldStart}
               >
                 <slot name="volume-down-icon">${drawIcon(speakerLow)}</slot>
-              </${button}>`
+              </${button}><${tip} for="volume-down" content=${this.volumeDownLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${this.draws('rotate')
             ? html `<${button}
                 part="rotate-left"
+                id="rotate-left"
                 exportparts="button: rotate-left-button, live: rotate-left-live, spinner: rotate-left-spinner, text: rotate-left-text"
                 ?disabled=${off}
                 label=${this.rotateLeftLabel}
@@ -648,9 +657,10 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
                 @pointerdown=${this.handleHoldStart}
               >
                 <slot name="rotate-left-icon">${drawIcon(arrowCounterClockwise)}</slot>
-              </${button}>
+              </${button}><${tip} for="rotate-left" content=${this.rotateLeftLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
               <${button}
                 part="rotate-right"
+                id="rotate-right"
                 exportparts="button: rotate-right-button, live: rotate-right-live, spinner: rotate-right-spinner, text: rotate-right-text"
                 ?disabled=${off}
                 label=${this.rotateRightLabel}
@@ -660,11 +670,12 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
                 @pointerdown=${this.handleHoldStart}
               >
                 <slot name="rotate-right-icon">${drawIcon(arrowClockwise)}</slot>
-              </${button}>`
+              </${button}><${tip} for="rotate-right" content=${this.rotateRightLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${this.draws('screenshot')
             ? html `<${button}
               part="screenshot"
+              id="screenshot"
               exportparts="button: screenshot-button, live: screenshot-live, spinner: screenshot-spinner, text: screenshot-text"
               label=${this.screenshotLabel}
               ?raised=${raised}
@@ -672,12 +683,13 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
               @helix-press=${stopPress}
             >
               <slot name="screenshot-icon">${drawIcon(camera)}</slot>
-            </${button}>`
+            </${button}><${tip} for="screenshot" content=${this.screenshotLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       <slot name="controls" @slotchange=${this.handleSlotChange}></slot>
       ${this.draws('fullscreen')
             ? html `<${button}
               part="fullscreen"
+              id="fullscreen"
               exportparts="button: fullscreen-button, live: fullscreen-live, spinner: fullscreen-spinner, text: fullscreen-text"
               aria-pressed=${this.filled ? 'true' : 'false'}
               label=${this.fullscreenLabel}
@@ -686,7 +698,7 @@ let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixEle
               @helix-press=${stopPress}
             >
               <slot name="fullscreen-icon">${drawIcon(cornersOut)}</slot>
-            </${button}>`
+            </${button}><${tip} for="fullscreen" content=${this.fullscreenLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
     </div>`;
     }