@fusion.dev/helix-headless 0.153.0 → 0.155.0

package/dist/slider/root/slider-root.js

@@ -4,9 +4,19 @@ 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, customElement, formatNumber, formatWords, HelixFormElement, MixinControllerValue, MixinField, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, MixinControllerValue, MixinField, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+const SLIDER_KEYS = new Set([
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'End',
+    'Home',
+    'PageDown',
+    'PageUp',
+]);
 let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -24,21 +34,29 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.minStepsBetweenThumbs = 0;
         this.range = false;
         this.rangeText = '{start} to {end}';
+        this.readOnly = false;
         this.showValue = false;
         this.step = 1;
+        this.thumbLabel = 'thumb {index}';
         this.tooltip = false;
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
+            const at = Number(control.dataset.index ?? 0);
+            if (this.readOnly) {
+                restoreValue(control, this.range ? String(this.points[at]) : this.value);
+                return;
+            }
             if (this.range) {
-                const [start, end] = this.bounds;
+                const points = this.points;
                 const moved = Number(control.value);
                 const gap = this.gap;
-                const pair = control.dataset.thumb === 'start'
-                    ? [Math.min(moved, end - gap), end]
-                    : [start, Math.max(moved, start + gap)];
-                this.requestValue(pair.join(','));
-                restoreValue(control, String(control.dataset.thumb === 'start' ? this.bounds[0] : this.bounds[1]));
+                const low = at > 0 ? (points[at - 1] ?? this.min) + gap : Number.NEGATIVE_INFINITY;
+                const high = at < points.length - 1 ? (points[at + 1] ?? this.max) - gap : Number.POSITIVE_INFINITY;
+                this.requestValue(points
+                    .map((one, index) => (index === at ? Math.min(high, Math.max(low, moved)) : one))
+                    .join(','));
+                restoreValue(control, String(this.points[at]));
                 return;
             }
             const next = control.value;
@@ -47,16 +65,30 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         };
         this.handleChange = (event) => {
             event.stopPropagation();
-            this.announceChange();
+            if (!this.readOnly) {
+                this.announceChange();
+            }
+        };
+        this.handleKeydown = (event) => {
+            if (this.readOnly && SLIDER_KEYS.has(event.key)) {
+                event.preventDefault();
+            }
         };
         this.valueText = '';
+        this.handleThumbSlot = () => {
+            this.requestUpdate();
+        };
     }
     static { this.words = 'helix-slider'; }
     get reserve() {
         const widest = Math.max(this.said(this.min).length, this.said(this.max).length);
-        return this.range
-            ? widest * 2 + formatWords(this, 'rangeText', { end: '', start: '' }).length
-            : widest;
+        const count = this.points.length;
+        if (!this.range) {
+            return widest;
+        }
+        return count > 2
+            ? widest * count + 2 * (count - 1) + 4
+            : widest * 2 + formatWords(this, 'rangeText', { end: '', start: '' }).length;
     }
     get precision() {
         return String(this.step).split('.')[1]?.length ?? 0;
@@ -83,13 +115,15 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         delegatesFocus: true,
     }; }
     get bounds() {
-        const parts = this.value.split(',');
-        const from = Number.parseFloat(parts[0] ?? '');
-        const to = Number.parseFloat(parts[1] ?? '');
-        if (!Number.isFinite(from) || !Number.isFinite(to)) {
+        const points = this.points;
+        return [points[0] ?? this.min, points.at(-1) ?? this.max];
+    }
+    get points() {
+        const parts = this.value.split(',').map((part) => Number.parseFloat(part));
+        if (parts.length < 2 || parts.some((part) => !Number.isFinite(part))) {
             return [this.min, this.max];
         }
-        return [Math.min(from, to), Math.max(from, to)];
+        return parts.sort((left, right) => left - right);
     }
     along(at) {
         const span = this.max - this.min;
@@ -99,7 +133,12 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         return Math.min(1, Math.max(0, (at - this.min) / span));
     }
     sync() {
-        this.internals.setFormValue(this.value);
+        if (this.range && this.name) {
+            reportValues(this.internals, this.name, this.points.map(String));
+        }
+        else {
+            this.internals.setFormValue(this.value);
+        }
         this.refreshFeedback();
     }
     get fraction() {
@@ -146,15 +185,14 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     }
     sanitize(text) {
         if (this.range) {
-            const [from, to] = text.split(',').map((part) => Number.parseFloat(part));
-            if (from === undefined ||
-                to === undefined ||
-                !Number.isFinite(from) ||
-                !Number.isFinite(to)) {
+            const values = text.split(',').map((part) => Number.parseFloat(part));
+            if (values.length < 2 || values.some((one) => !Number.isFinite(one))) {
                 return `${this.min},${this.max}`;
             }
-            const ends = [this.settled(from), this.settled(to)].sort((a, b) => a - b);
-            return ends.join(',');
+            return values
+                .map((one) => this.settled(one))
+                .sort((a, b) => a - b)
+                .join(',');
         }
         const parsed = Number.parseFloat(text);
         const at = Number.isFinite(parsed) ? parsed : this.min + (this.max - this.min) / 2;
@@ -188,7 +226,31 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         super.updated(changed);
         this.sync();
     }
-    renderTooltips(start, end) {
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
+    get thumbContent() {
+        return this.knownChildren.some((child) => child.slot === 'thumb' || child.slot === 'thumb-end');
+    }
+    renderThumbs() {
+        const slot = (end) => end
+            ? html `<slot name="thumb-end" @slotchange=${this.handleThumbSlot}></slot>`
+            : html `<slot name="thumb" @slotchange=${this.handleThumbSlot}></slot>`;
+        const box = (fraction, end, thumb) => html `<span part="thumb" data-thumb=${thumb ?? nothing} style="--slider-at: ${fraction}"
+        >${slot(end)}</span
+      >`;
+        return html `<div part="thumbs" aria-hidden="true" ?hidden=${!this.thumbContent}>
+      ${this.range
+            ? this.points.map((at, index, all) => index === 0
+                ? box(this.along(at), false, 'start')
+                : index === all.length - 1
+                    ? box(this.along(at), true, 'end')
+                    : html `<span part="thumb" data-thumb="middle" style="--slider-at: ${this.along(at)}"></span>`)
+            : box(this.fraction, false)}
+    </div>`;
+    }
+    renderTooltips() {
         if (!this.tooltip) {
             return nothing;
         }
@@ -197,49 +259,60 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
       >`;
         return html `<div part="tooltips" aria-hidden="true">
       ${this.range
-            ? [
-                bubble(this.along(start), this.said(start), 'start'),
-                bubble(this.along(end), this.said(end), 'end'),
-            ]
+            ? this.points.map((at, index, all) => bubble(this.along(at), this.said(at), index === 0 ? 'start' : index === all.length - 1 ? 'end' : 'middle'))
             : bubble(this.fraction, this.said(this.value))}
     </div>`;
     }
     render() {
         const [start, end] = this.bounds;
-        const thumb = (which, at) => html `<input
+        const ids = this.points.map((_, index, all) => index === 0 ? 'control' : index === all.length - 1 ? 'control-end' : `control-${index}`);
+        const points = this.points;
+        const last = points.length - 1;
+        const thumb = (at, index) => {
+            const which = index === 0 ? 'start' : index === last ? 'end' : 'middle';
+            const named = which === 'middle' ? `thumb-name-${index}` : `${which}-name`;
+            const before = points[index - 1];
+            const after = points[index + 1];
+            return html `<input
         part="control"
-        id=${which === 'start' ? 'control' : 'control-end'}
+        id=${ids[index] ?? nothing}
         data-thumb=${which}
+        data-index=${index}
         type="range"
         style="--slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}${this.axis}"
         min=${this.min}
         max=${this.max}
         step=${this.step}
         .value=${String(at)}
-        aria-labelledby=${this.labeled ? `${this.labelId} ${which}-name` : `${which}-name`}
-        aria-valuemin=${which === 'end' ? start + this.gap : nothing}
-        aria-valuemax=${which === 'start' ? end - this.gap : nothing}
+        aria-labelledby=${this.labeled ? `${this.labelId} ${named}` : named}
+        aria-valuemin=${before === undefined ? nothing : before + this.gap}
+        aria-valuemax=${after === undefined ? nothing : after - this.gap}
         aria-valuetext=${this.spoken(at)}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
+        aria-readonly=${this.readOnly ? 'true' : nothing}
         ?disabled=${this.isDisabled}
         @input=${this.handleInput}
         @change=${this.handleChange}
+        @keydown=${this.handleKeydown}
       />`;
+        };
         return html `${this.renderLabel()}
     ${this.range
             ? html `<span id="start-name" hidden>${this.minimumLabel}</span
-            ><span id="end-name" hidden>${this.maximumLabel}</span>`
+            >${this.points.slice(1, -1).map((_, index) => html `<span id=${`thumb-name-${index + 1}`} hidden
+                  >${formatWords(this, 'thumbLabel', { index: index + 2 })}</span
+                >`)}<span id="end-name" hidden>${this.maximumLabel}</span>`
             : nothing}
     <div
       part="field"
       data-markers=${this.markerValues.length > 0 ? '' : nothing}
       data-range=${this.range ? '' : nothing}
+      data-thumbs=${this.thumbContent ? '' : nothing}
       data-tooltip=${this.tooltip ? '' : nothing}
       style="--slider-fraction: ${this.fraction}; --slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}"
     >
-      ${this.range ? thumb('start', start) : nothing}
-      ${this.range ? thumb('end', end) : nothing}
+      ${this.range ? this.points.map((at, index) => thumb(at, index)) : nothing}
       ${this.range
             ? nothing
             : html `<input
@@ -256,9 +329,11 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               aria-valuetext=${this.spoken(this.value)}
               aria-describedby=${this.describedBy ?? nothing}
               aria-invalid=${this.invalidity ?? nothing}
+              aria-readonly=${this.readOnly ? 'true' : nothing}
               ?disabled=${this.isDisabled}
               @input=${this.handleInput}
               @change=${this.handleChange}
+              @keydown=${this.handleKeydown}
             />`}
       ${this.markers > 1
             ? html `<div part="markers" aria-hidden="true">
@@ -271,16 +346,21 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
                   >`)}
             </div>`
             : nothing}
-      ${this.renderTooltips(start, end)}
+      ${this.renderThumbs()} ${this.renderTooltips()}
       ${this.showValue
             ? html `<output
               part="output"
-              for=${this.range ? 'control control-end' : 'control'}
+              for=${this.range ? ids.join(' ') : 'control'}
               aria-hidden="true"
               style=${`--_slider-output-reserve: ${this.reserve}ch`}
-              >${this.range
-                ? formatWords(this, 'rangeText', { end: this.said(end), start: this.said(start) })
-                : this.said(this.value)}</output
+              >${!this.range
+                ? this.said(this.value)
+                : this.points.length > 2
+                    ? new Intl.ListFormat(wordsLocale(this), { type: 'conjunction' }).format(this.points.map((at) => this.said(at)))
+                    : formatWords(this, 'rangeText', {
+                        end: this.said(end),
+                        start: this.said(start),
+                    })}</output
             >`
             : nothing}
     </div>
@@ -332,12 +412,19 @@ __decorate([
     words,
     property({ attribute: 'range-text' })
 ], HelixHeadlessSlider.prototype, "rangeText", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessSlider.prototype, "readOnly", void 0);
 __decorate([
     property({ attribute: 'show-value', reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "showValue", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "step", void 0);
+__decorate([
+    words,
+    property({ attribute: 'thumb-label' })
+], HelixHeadlessSlider.prototype, "thumbLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessSlider.prototype, "tooltip", void 0);

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

@@ -19,6 +19,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * 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.
  *
+ * `href` makes the action a link, as Menu's rows take one: the `item` part is
+ * then an `<a>` carrying `menuitem`, so the browser follows it, opens it in a
+ * new tab on a middle press, and offers its own menu for it. Choosing it still
+ * sends `helix-select` and closes the dial. A disabled action draws no link.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -32,7 +37,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @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 item - The control for the action, which is an `<a>` where `href` is set.
  * @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.
  */
@@ -41,12 +46,30 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
      * Whether the action is disabled, so it cannot be chosen.
      */
     disabled: boolean;
+    /**
+     * Whether the link downloads the file when the action is chosen. Only
+     * meaningful beside an `href`, and only for a file served from the page's
+     * origin.
+     */
+    download: boolean;
+    /**
+     * The URL the action links to. Setting it draws the action as a link.
+     */
+    href: string;
+    /**
+     * The link's `rel`. Set it whenever you set `target="_blank"`.
+     */
+    rel: string;
     /**
      * 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;
+    /**
+     * Where the link opens, such as `_blank` for a new tab.
+     */
+    target: string;
     /**
      * The action's value, sent in `helix-select` when the action is chosen.
      */
@@ -86,6 +109,11 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
     private readonly readShortcut;
     private choose;
     private readonly handleClick;
+    /**
+     * Space presses a linked action, which an anchor ignores, and the click that
+     * comes back both announces and follows the link. Enter is the anchor's own.
+     */
+    private readonly handleKeydown;
     protected render(): TemplateResult;
     /**
      * The `shortcut` slot, holding the shortcut drawn after the name as Kbd

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

@@ -12,7 +12,11 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
     constructor() {
         super(...arguments);
         this.disabled = false;
+        this.download = false;
+        this.href = '';
+        this.rel = '';
         this.shortcut = '';
+        this.target = '';
         this.value = '';
         this.isSpeedDialItem = true;
         this.hasShortcut = false;
@@ -22,6 +26,16 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
         this.handleClick = () => {
             this.choose();
         };
+        this.handleKeydown = (event) => {
+            if (event.key !== ' ') {
+                return;
+            }
+            const link = this.renderRoot.querySelector('a[part="item"]');
+            if (link) {
+                event.preventDefault();
+                link.click();
+            }
+        };
     }
     focus(options) {
         this.partNamed('item')?.focus(options);
@@ -55,6 +69,27 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
     }
     render() {
         const keys = this.shortcut === '' ? nothing : ariaChord(this.shortcut, !this.hydrating && onApple());
+        const inside = html `<span part="icon"><slot name="icon"></slot></span>
+      <span part="label"><slot></slot><span
+          part="shortcut"
+          aria-hidden="true"
+          ?hidden=${!this.hasShortcut && this.shortcut === ''}
+        >${this.renderShortcut()}</span
+      ></span>`;
+        if (this.href !== '' && !this.disabled) {
+            return html `<a
+        part="item"
+        href=${this.href}
+        target=${this.target || nothing}
+        rel=${this.rel || nothing}
+        ?download=${this.download}
+        role="menuitem"
+        aria-keyshortcuts=${keys}
+        tabindex="-1"
+        @click=${this.handleClick}
+        @keydown=${this.handleKeydown}
+      >${inside}</a>`;
+        }
         return html `<button
       part="item"
       role="menuitem"
@@ -65,13 +100,7 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
       tabindex="-1"
       @click=${this.handleClick}
     >
-      <span part="icon"><slot name="icon"></slot></span>
-      <span part="label"><slot></slot><span
-          part="shortcut"
-          aria-hidden="true"
-          ?hidden=${!this.hasShortcut && this.shortcut === ''}
-        >${this.renderShortcut()}</span
-      ></span>
+      ${inside}
     </button>`;
     }
     renderShortcut() {
@@ -89,9 +118,21 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSpeedDialItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessSpeedDialItem.prototype, "download", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "href", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "rel", void 0);
 __decorate([
     property()
 ], HelixHeadlessSpeedDialItem.prototype, "shortcut", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "target", void 0);
 __decorate([
     property()
 ], HelixHeadlessSpeedDialItem.prototype, "value", void 0);

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

@@ -25,8 +25,9 @@ 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:
+ * **Keyboard.** On the trigger, Enter, Space, Down or a press opens the dial
+ * on its first action, and Up opens it on its last, as an APG menu button
+ * does. With the dial open:
  *
  * | Key | What it does |
  * |---|---|
@@ -50,6 +51,13 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * and a slotted one alike. A press that has opened the dial does not also do
  * the trigger's action.
  *
+ * **Open on hover.** With `open-on="hover"`, a mouse resting on the trigger
+ * opens the dial, as Material's speed dial does, and the dial closes a moment
+ * after the mouse leaves both the trigger and the actions. A press, a touch
+ * and the keyboard open it as under `click`, and a press on the trigger of a
+ * dial already open moves focus to its first action, so the press a mouse
+ * makes after hovering keeps the dial open.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -57,6 +65,7 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * @documentation https://fusion.dev/helix/components/speed-dial
  *
  * @slot - The actions.
+ * @slot icon - Replaces the plus on the button the dial draws when no trigger is slotted, such as with a pencil for a dial of ways to write.
  * @slot trigger - The control that opens the actions. Without one, a button named by `label` is drawn.
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - The actions are about to close. Cancelable: cancel it to keep them open.
@@ -94,11 +103,13 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      */
     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.
+     * What opens the dial. `click` opens it on a press of the trigger. `hover`
+     * also opens it while a mouse rests on the trigger, and closes it once the
+     * mouse has left. 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';
+    openOn: 'click' | 'hover' | 'long-press';
     /**
      * The direction the actions open in. They move to another side if that side
      * does not fit.
@@ -117,6 +128,10 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      * wherever the reader is typing.
      */
     private focusOnOpen;
+    /** Whether the open under way puts focus on the last action, from Up. */
+    private focusLast;
+    /** The close a mouse leaving a hover dial has asked for, a moment from now. */
+    private leaving;
     protected readonly panel: PopoverController;
     /** Whatever the consumer slotted, or the button rendered in its place. */
     private get trigger();
@@ -128,6 +143,17 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
     /** Watches the trigger for a held press, under `open-on="long-press"`. */
     private readonly longPress;
     private get pressHeld();
+    /** Opens on a mouse coming over the trigger, under `open-on="hover"`. */
+    private readonly handleTriggerPointerOver;
+    /** Keeps a hover dial open while the mouse is back over it. */
+    private readonly handlePointerEnter;
+    /**
+     * Closes a hover dial a moment after the mouse leaves it, so a mouse
+     * crossing the gap between the trigger and the actions keeps it open.
+     * Focus inside the dial keeps it open too, as a reader is using it.
+     */
+    private readonly handlePointerLeave;
+    private stay;
     /**
      * 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

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

@@ -31,6 +31,7 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
             typeahead: typeaheadByWords(),
         });
         this.focusOnOpen = false;
+        this.focusLast = false;
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
             boundary: () => this,
@@ -47,7 +48,35 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
                 }
             },
         });
+        this.handleTriggerPointerOver = (event) => {
+            if (this.openOn !== 'hover' || event.pointerType !== 'mouse') {
+                return;
+            }
+            this.stay();
+            if (!this.open) {
+                this.requestOpen(true);
+            }
+        };
+        this.handlePointerEnter = () => {
+            this.stay();
+        };
+        this.handlePointerLeave = (event) => {
+            if (this.openOn !== 'hover' || event.pointerType !== 'mouse' || !this.open) {
+                return;
+            }
+            this.stay();
+            this.leaving = setTimeout(() => {
+                this.leaving = undefined;
+                if (this.open && !this.matches(':focus-within')) {
+                    this.requestOpen(false);
+                }
+            }, 300);
+        };
         this.handleTriggerClick = () => {
+            if (this.open && this.openOn === 'hover') {
+                this.items.find((one) => !one.disabled)?.focusItem();
+                return;
+            }
             if (this.open) {
                 this.requestOpen(false);
                 return;
@@ -91,11 +120,11 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         };
         this.handleKeydown = (event) => {
             if (!this.open) {
-                if (this.pressHeld &&
-                    event.altKey &&
-                    (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                const arrow = event.key === 'ArrowDown' || event.key === 'ArrowUp';
+                if (arrow && (this.pressHeld ? event.altKey : !event.altKey)) {
                     event.preventDefault();
                     this.focusOnOpen = this.requestOpen(true);
+                    this.focusLast = this.focusOnOpen && event.key === 'ArrowUp';
                 }
                 return;
             }
@@ -132,6 +161,10 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
     get pressHeld() {
         return this.openOn === 'long-press';
     }
+    stay() {
+        clearTimeout(this.leaving);
+        this.leaving = undefined;
+    }
     focus(options) {
         const trigger = this.trigger;
         if (trigger === this) {
@@ -151,6 +184,8 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.addEventListener('helix-select', this.handleSelect);
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('click', this.handleHeldClick, true);
+        this.addEventListener('pointerenter', this.handlePointerEnter);
+        this.addEventListener('pointerleave', this.handlePointerLeave);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -162,6 +197,9 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.removeEventListener('helix-select', this.handleSelect);
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('click', this.handleHeldClick, true);
+        this.removeEventListener('pointerenter', this.handlePointerEnter);
+        this.removeEventListener('pointerleave', this.handlePointerLeave);
+        this.stay();
     }
     announce() {
         const trigger = this.trigger;
@@ -191,11 +229,17 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         super.updated?.(changed);
         this.announce();
         this.describeTrigger();
+        if (!this.open) {
+            this.stay();
+        }
         if (this.open && this.focusOnOpen) {
             this.focusOnOpen = false;
+            const last = this.focusLast;
+            this.focusLast = false;
             this.updateComplete.then(() => {
                 if (this.open) {
-                    this.items.find((one) => !one.disabled)?.focusItem();
+                    const usable = this.items.filter((one) => !one.disabled);
+                    (last ? usable.at(-1) : usable[0])?.focusItem();
                 }
             });
         }
@@ -209,6 +253,7 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
       @focusin=${this.handleTriggerFocusIn}
       @pointercancel=${this.handleTriggerPointerCancel}
       @pointerdown=${this.handleTriggerPointerDown}
+      @pointerover=${this.handleTriggerPointerOver}
       @pointermove=${this.handleTriggerPointerMove}
       @pointerup=${this.handleTriggerPointerUp}
       @slotchange=${() => this.describeTrigger()}
@@ -222,7 +267,7 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         aria-label=${this.label}
       >
         ${''}
-        ${drawIcon(plus)}
+        <slot name="icon">${drawIcon(plus)}</slot>
       </button>
       ${held ? html `<span id="long-press" hidden>${this.longPressLabel}</span>` : nothing}
     </slot>`;