@fusion.dev/helix-headless 0.218.0 → 0.220.0

package/dist/code-editor/root/code-editor-root.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, customElement, drawIcon, formatWords, HelixFormElement, ListedController, MIRROR_RULE, MixinControllerValue, MixinField, numberConverter, onApple, restoreValue, stopPress, words, } from '@fusion.dev/helix-core';
-import { asterisk, caretDown, caretRight, caretUp, info, magnifyingGlass, textAa, textAUnderline, warning, x, xCircleFill, } from '@fusion.dev/helix-icons';
+import { AriaForwardController, customElement, drawIcon, findPattern, findRanges, formatWords, HelixFormElement, ListedController, MixinControllerValue, MixinField, numberConverter, onApple, restoreValue, stopPress, words, } from '@fusion.dev/helix-core';
+import { info, magnifyingGlass, warning, xCircleFill } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
+import '../../find/index.js';
 import '../../icon-button/index.js';
 import '../../toolbar/index.js';
 export const diagnosticLines = (value, diagnostics) => {
@@ -53,24 +53,7 @@ export const positionOf = (value, at) => {
         line: before.split('\n').length,
     };
 };
-const patternOf = (query) => {
-    const source = query.regex ? query.search : query.search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    try {
-        return new RegExp(query.wholeWord ? `\\b(?:${source})\\b` : source, query.caseSensitive ? 'gu' : 'giu');
-    }
-    catch {
-        return undefined;
-    }
-};
-export const findRanges = (text, query) => {
-    const pattern = query.search === '' ? undefined : patternOf(query);
-    if (!pattern) {
-        return [];
-    }
-    return [...text.matchAll(pattern)]
-        .filter((match) => match[0] !== '')
-        .map((match) => [match.index, match.index + match[0].length]);
-};
+export { findRanges };
 const LANGUAGE_NAMES = {
     bash: 'Shell',
     css: 'CSS',
@@ -129,15 +112,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         this.wrap = false;
         this.caret = 0;
         this.findOpen = false;
-        this.found = undefined;
-        this.replaceOpen = false;
-        this.query = {
-            caseSensitive: false,
-            regex: false,
-            replace: '',
-            search: '',
-            wholeWord: false,
-        };
         this.escaped = false;
         this.engineEdited = false;
         this.handleViewFocusOut = (event) => {
@@ -147,6 +121,14 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
                 this.announceChange();
             }
         };
+        this.finder = {
+            end: () => this.view?.findEnd?.(),
+            find: (query, direction) => this.findIn(query, direction),
+            replace: (query, all) => this.replaceIn(query, all),
+        };
+        this.handleFindToggle = (event) => {
+            this.findOpen = event.newState === 'open';
+        };
         this.handleKeys = (event) => {
             const mod = onApple() ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
             if (mod && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'f') {
@@ -155,28 +137,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
                 void this.openFind();
             }
         };
-        this.handleFindInput = (event) => {
-            this.query = { ...this.query, search: event.target.value };
-            this.search('first');
-        };
-        this.handleReplaceInput = (event) => {
-            this.query = { ...this.query, replace: event.target.value };
-        };
-        this.handleFindKeys = (event) => {
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                this.closeFind();
-            }
-            else if (event.key === 'Enter') {
-                event.preventDefault();
-                if (event.target.getAttribute('part') === 'replace-field') {
-                    this.replace(event.metaKey || event.ctrlKey);
-                }
-                else {
-                    this.search(event.shiftKey ? 'previous' : 'next');
-                }
-            }
-        };
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
@@ -203,7 +163,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
             this.escaped = false;
         };
     }
-    static { this.markRules = [MIRROR_RULE]; }
     static { this.words = 'helix-code-editor'; }
     get control() {
         return this.partNamed('control');
@@ -220,9 +179,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
             wrap: this.wrap,
         };
     }
-    get readable() {
-        return this.query.search === '' || patternOf(this.query) !== undefined;
-    }
     focus(options) {
         if (this.view?.focus) {
             this.view.focus();
@@ -273,7 +229,7 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
             this.refreshFeedback();
         }
         this.toggleState('find-open', this.findOpen);
-        this.toggleState('replace-open', this.findOpen && this.replaceOpen && !this.readOnly);
+        this.attachFind();
         const mount = this.partNamed('view');
         if (changed.has('engine') || (this.engine && !this.view && mount)) {
             this.view?.destroy();
@@ -308,43 +264,35 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         return true;
     }
     async openFind() {
+        const find = this.find?.element;
+        if (!find) {
+            return;
+        }
         const control = this.control;
         if (!this.view && control && control.selectionEnd > control.selectionStart) {
             const selected = control.value.slice(control.selectionStart, control.selectionEnd);
             if (!selected.includes('\n')) {
-                this.query = { ...this.query, search: selected };
+                find.query = selected;
             }
         }
-        this.findOpen = true;
-        await this.updateComplete;
-        const field = this.partNamed('find-field');
-        field?.focus();
-        field?.select();
-        if (this.query.search !== '') {
-            this.search('first');
-        }
-    }
-    closeFind() {
-        this.findOpen = false;
-        this.found = undefined;
-        this.view?.findEnd?.();
-        this.focus();
+        await find.show();
     }
-    search(direction) {
-        if (this.query.search === '' || !this.readable) {
-            this.found = undefined;
-            this.view?.findEnd?.();
+    attachFind() {
+        const element = this.partNamed('find') ?? undefined;
+        if (element === this.find?.element) {
             return;
         }
+        this.find?.sink.detach();
+        this.find = element ? { element, sink: element.attach(this.finder) } : undefined;
+    }
+    findIn(query, direction) {
         if (this.view?.find) {
-            this.found = this.view.find(this.query, direction);
-            return;
+            return this.view.find(query, direction);
         }
         const control = this.control;
-        const ranges = findRanges(this.value, this.query);
+        const ranges = findRanges(this.value, query);
         if (!control || ranges.length === 0) {
-            this.found = { count: ranges.length, index: -1 };
-            return;
+            return { count: ranges.length, index: -1 };
         }
         const at = direction === 'first' ? control.selectionStart : control.selectionEnd;
         let index = direction === 'previous'
@@ -356,54 +304,37 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         const [from, to] = ranges[index] ?? [0, 0];
         control.setSelectionRange(from, to);
         this.caret = from;
-        this.found = { count: ranges.length, index };
+        return { count: ranges.length, index };
     }
-    replace(all) {
-        if (this.readOnly || this.query.search === '' || !this.readable) {
-            return;
+    replaceIn(query, all) {
+        if (this.readOnly) {
+            return undefined;
         }
         if (this.view?.replace) {
-            this.found = this.view.replace(this.query, all);
-            return;
+            return this.view.replace(query, all);
         }
         const control = this.control;
-        const pattern = patternOf(this.query);
+        const pattern = findPattern(query);
         if (!control || !pattern) {
-            return;
+            return undefined;
         }
         if (all) {
-            this.requestValue(this.value.replace(pattern, this.query.replace));
+            this.requestValue(this.value.replace(pattern, query.replace));
         }
         else {
-            const selected = findRanges(this.value, this.query).find(([from, to]) => from === control.selectionStart && to === control.selectionEnd);
+            const selected = findRanges(this.value, query).find(([from, to]) => from === control.selectionStart && to === control.selectionEnd);
             if (!selected) {
-                this.search('next');
-                return;
+                return this.findIn(query, 'next');
             }
             const [from, to] = selected;
             const one = new RegExp(pattern.source, pattern.flags.replace('g', ''));
-            const replaced = this.value.slice(from, to).replace(one, this.query.replace);
+            const replaced = this.value.slice(from, to).replace(one, query.replace);
             this.requestValue(this.value.slice(0, from) + replaced + this.value.slice(to));
             restoreValue(control, this.value);
             control.setSelectionRange(from + replaced.length, from + replaced.length);
         }
         restoreValue(control, this.value);
-        this.search('next');
-    }
-    toggleOption(option) {
-        this.query = { ...this.query, [option]: !this.query[option] };
-        this.search('first');
-    }
-    get countText() {
-        if (!this.readable) {
-            return this.findInvalidLabel;
-        }
-        return this.found === undefined
-            ? ''
-            : formatWords(this, 'matchesLabel', {
-                count: this.found.count,
-                index: Math.max(this.found.index, 0) + 1,
-            });
+        return this.findIn(query, 'next');
     }
     renderHeader() {
         const toolbar = this.tag('toolbar');
@@ -412,14 +343,14 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         return html `<div part="header">
       ${this.renderLabel()}
       ${language ? html `<span part="language">${language}</span>` : nothing}
-      <${toolbar} part="controls" exportparts="toolbar: controls-toolbar" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
+      <${toolbar} part="controls" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
         <slot name="actions"></slot>
         <${button}
-          part="find"
-          exportparts="button: find-button, live: find-live, spinner: find-spinner, text: find-text"
+          part="find-toggle"
+          exportparts="button: find-toggle-button, live: find-toggle-live, spinner: find-toggle-spinner, text: find-toggle-text"
           .expanded=${this.findOpen}
           label=${this.findLabel}
-          @click=${() => (this.findOpen ? this.closeFind() : void this.openFind())}
+          @click=${() => (this.findOpen ? this.find?.element.hide() : void this.openFind())}
           @helix-press=${stopPress}
         >
           ${drawIcon(magnifyingGlass)}
@@ -428,132 +359,28 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
     </div>`;
     }
     renderFind() {
-        const toolbar = this.tag('toolbar');
-        const button = this.tag('icon-button');
-        const textButton = this.tag('button');
-        const searchable = this.readable && (this.found?.count ?? 0) > 0;
-        const replacing = this.replaceOpen && !this.readOnly;
-        return html `<div part="find-bar" role="search" aria-label=${this.findLabel} ?hidden=${!this.findOpen}>
-      ${this.readOnly
-            ? nothing
-            : html `<${button}
-              part="find-replace"
-              exportparts="button: find-replace-button, live: find-replace-live, spinner: find-replace-spinner, text: find-replace-text"
-              .expanded=${replacing}
-              label=${this.findReplaceLabel}
-              @click=${() => {
-                this.replaceOpen = !this.replaceOpen;
-            }}
-              @helix-press=${stopPress}
-            >
-              ${replacing ? drawIcon(caretDown) : html `<span data-mirror>${drawIcon(caretRight)}</span>`}
-            </${button}>`}
-      <input
-        part="find-field"
-        aria-label=${this.findLabel}
-        aria-invalid=${this.readable ? nothing : 'true'}
-        autocomplete="off"
-        placeholder=${this.findLabel}
-        spellcheck="false"
-        type="search"
-        .value=${live(this.query.search)}
-        @input=${this.handleFindInput}
-        @keydown=${this.handleFindKeys}
-      />
-      <span part="find-count" role="status">${this.countText}</span>
-      <${toolbar} part="find-controls" exportparts="toolbar: find-controls-toolbar" exportparts="toolbar: find-controls-toolbar" label=${this.findControlsLabel}>
-        <${button}
-          part="find-match-case"
-          exportparts="button: find-match-case-button, live: find-match-case-live, spinner: find-match-case-spinner, text: find-match-case-text"
-          aria-pressed=${this.query.caseSensitive ? 'true' : 'false'}
-          label=${this.findMatchCaseLabel}
-          @click=${() => this.toggleOption('caseSensitive')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(textAa)}
-        </${button}>
-        <${button}
-          part="find-whole-word"
-          exportparts="button: find-whole-word-button, live: find-whole-word-live, spinner: find-whole-word-spinner, text: find-whole-word-text"
-          aria-pressed=${this.query.wholeWord ? 'true' : 'false'}
-          label=${this.findWholeWordLabel}
-          @click=${() => this.toggleOption('wholeWord')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(textAUnderline)}
-        </${button}>
-        <${button}
-          part="find-regex"
-          exportparts="button: find-regex-button, live: find-regex-live, spinner: find-regex-spinner, text: find-regex-text"
-          aria-pressed=${this.query.regex ? 'true' : 'false'}
-          label=${this.findRegexLabel}
-          @click=${() => this.toggleOption('regex')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(asterisk)}
-        </${button}>
-        <${button}
-          part="find-previous"
-          exportparts="button: find-previous-button, live: find-previous-live, spinner: find-previous-spinner, text: find-previous-text"
-          ?disabled=${!searchable}
-          label=${this.findPreviousLabel}
-          @click=${() => this.search('previous')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(caretUp)}
-        </${button}>
-        <${button}
-          part="find-next"
-          exportparts="button: find-next-button, live: find-next-live, spinner: find-next-spinner, text: find-next-text"
-          ?disabled=${!searchable}
-          label=${this.findNextLabel}
-          @click=${() => this.search('next')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(caretDown)}
-        </${button}>
-        <${button}
-          part="find-close"
-          exportparts="button: find-close-button, live: find-close-live, spinner: find-close-spinner, text: find-close-text"
-          label=${this.findCloseLabel}
-          @click=${() => this.closeFind()}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(x)}
-        </${button}>
-      </${toolbar}>
-      ${!replacing
-            ? nothing
-            : html `<input
-              part="replace-field"
-              aria-label=${this.replaceWithLabel}
-              autocomplete="off"
-              placeholder=${this.replaceWithLabel}
-              spellcheck="false"
-              type="text"
-              .value=${live(this.query.replace)}
-              @input=${this.handleReplaceInput}
-              @keydown=${this.handleFindKeys}
-            />
-            <${textButton}
-              part="replace"
-              exportparts="button: replace-button, live: replace-live, spinner: replace-spinner, text: replace-text"
-              ?disabled=${!searchable}
-              @click=${() => this.replace(false)}
-              @helix-press=${stopPress}
-            >
-              ${this.replaceLabel}
-            </${textButton}>
-            <${textButton}
-              part="replace-all"
-              exportparts="button: replace-all-button, live: replace-all-live, spinner: replace-all-spinner, text: replace-all-text"
-              ?disabled=${!searchable}
-              @click=${() => this.replace(true)}
-              @helix-press=${stopPress}
-            >
-              ${this.replaceAllLabel}
-            </${textButton}>`}
-    </div>`;
+        const find = this.tag('find');
+        return html `<${find}
+      part="find"
+      exportparts="actions: find-actions, bar: find-bar, close: find-close, close-button: find-close-button, close-live: find-close-live, close-spinner: find-close-spinner, close-text: find-close-text, controls: find-controls, controls-toolbar: find-controls-toolbar, count: find-count, field: find-field, live: find-live, match-case: find-match-case, match-case-button: find-match-case-button, match-case-live: find-match-case-live, match-case-pressed: find-match-case-pressed, match-case-spinner: find-match-case-spinner, match-case-text: find-match-case-text, next: find-next, next-button: find-next-button, next-live: find-next-live, next-spinner: find-next-spinner, next-text: find-next-text, previous: find-previous, previous-button: find-previous-button, previous-live: find-previous-live, previous-spinner: find-previous-spinner, previous-text: find-previous-text, regex: find-regex, regex-button: find-regex-button, regex-live: find-regex-live, regex-pressed: find-regex-pressed, regex-spinner: find-regex-spinner, regex-text: find-regex-text, replace: find-replace, replace-all: find-replace-all, replace-all-button: find-replace-all-button, replace-all-live: find-replace-all-live, replace-all-spinner: find-replace-all-spinner, replace-all-text: find-replace-all-text, replace-button: find-replace-button, replace-field: find-replace-field, replace-live: find-replace-live, replace-spinner: find-replace-spinner, replace-text: find-replace-text, replace-toggle: find-replace-toggle, replace-toggle-button: find-replace-toggle-button, replace-toggle-live: find-replace-toggle-live, replace-toggle-spinner: find-replace-toggle-spinner, replace-toggle-text: find-replace-toggle-text, whole-word: find-whole-word, whole-word-button: find-whole-word-button, whole-word-live: find-whole-word-live, whole-word-pressed: find-whole-word-pressed, whole-word-spinner: find-whole-word-spinner, whole-word-text: find-whole-word-text"
+      close-label=${this.findCloseLabel}
+      controls-label=${this.findControlsLabel}
+      invalid-label=${this.findInvalidLabel}
+      label=${this.findLabel}
+      match-case-label=${this.findMatchCaseLabel}
+      matches-label=${this.matchesLabel}
+      next-label=${this.findNextLabel}
+      previous-label=${this.findPreviousLabel}
+      ?readonly=${this.readOnly}
+      regex-label=${this.findRegexLabel}
+      replace-all-label=${this.replaceAllLabel}
+      replace-field-label=${this.replaceWithLabel}
+      replace-label=${this.replaceLabel}
+      replace-toggle-label=${this.findReplaceLabel}
+      shortcut=""
+      whole-word-label=${this.findWholeWordLabel}
+      @toggle=${this.handleFindToggle}
+    ></${find}>`;
     }
     renderDiagnostics() {
         if (this.diagnostics.length === 0) {
@@ -731,15 +558,6 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessCodeEditor.prototype, "findOpen", void 0);
-__decorate([
-    state()
-], HelixHeadlessCodeEditor.prototype, "found", void 0);
-__decorate([
-    state()
-], HelixHeadlessCodeEditor.prototype, "replaceOpen", void 0);
-__decorate([
-    state()
-], HelixHeadlessCodeEditor.prototype, "query", void 0);
 HelixHeadlessCodeEditor = __decorate([
     customElement('helix-headless-code-editor')
 ], HelixHeadlessCodeEditor);

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>`;
     }