@skdx/web-components 0.27.0 → 0.29.0

package/dist/speed-dial/SpeedDialContent.cjs

@@ -1,5 +1,5 @@
-"use strict";var m=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var w=(n,o)=>{for(var t in o)m(n,t,{get:o[t],enumerable:!0})},F=(n,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of L(o))!A.call(n,i)&&i!==t&&m(n,i,{get:()=>o[i],enumerable:!(e=E(o,i))||e.enumerable});return n};var H=n=>F(m({},"__esModule",{value:!0}),n),l=(n,o,t,e)=>{for(var i=e>1?void 0:e?E(o,t):o,h=n.length-1,u;h>=0;h--)(u=n[h])&&(i=(e?u(o,t,i):u(i))||i);return e&&i&&m(o,t,i),i};var R={};w(R,{SkdxSpeedDialContent:()=>s});module.exports=H(R);var p=require("lit"),c=require("lit/decorators.js"),g=require("../internal/closest.cjs"),O=require("../internal/define.cjs"),T=require("../internal/direction.cjs"),r=require("../internal/dismiss.cjs"),f=require("../internal/positioning.cjs"),b=require("../internal/styles.cjs"),v=require("../internal/typeahead.cjs"),d=require("./SpeedDial.cjs");var I=1e3,N={vertical:"ArrowDown",horizontal:"ArrowRight"},M={vertical:"ArrowUp",horizontal:"ArrowLeft"},s=class extends p.LitElement{constructor(){super(...arguments);this.align="center";this.sideOffset=8;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.typeahead="";this.childObserver=new MutationObserver(()=>this.requestUpdate());this.handlePointerEnter=t=>{this.root?.openOnHover&&t.pointerType!=="touch"&&this.root.cancelHoverClose()};this.handlePointerLeave=t=>{this.root?.openOnHover&&t.pointerType!=="touch"&&this.root.scheduleHoverClose()};this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||(0,r.triggerContains)(this.root.triggerEl,e)||(0,r.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,r.focusOutsideTarget)(t);!e||this.contains(e)||(0,r.triggerContains)(this.root.triggerEl,e)||(0,r.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{if(t.key==="Escape"){t.preventDefault(),(0,r.dispatchEscapeKeyDown)(this,t)&&this.close();return}if(t.key==="Tab"){t.preventDefault(),this.close();return}let e=this.items();if(e.length===0)return;let i=e.indexOf(t.target),h=(0,T.directionalKey)(t.key,this),u=this.orientation,a;if(h===N[u])a=i+1,a>=e.length&&(a=this.loop?0:e.length-1);else if(h===M[u])a=i-1,a<0&&(a=this.loop?e.length-1:0);else if(h==="Home")a=0;else if(h==="End")a=e.length-1;else if((0,v.isTypeaheadKey)(t)){clearTimeout(this.typeaheadTimer),this.typeahead+=t.key.toLowerCase(),this.typeaheadTimer=setTimeout(()=>this.typeahead="",I);let y=[...e.slice(i+1),...e.slice(0,i+1)].find(P=>(0,v.itemText)(P).trim().toLowerCase().startsWith(this.typeahead));y&&(a=e.indexOf(y))}a!==void 0&&(t.preventDefault(),e[a]?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu"),this.tabIndex=-1,this.root=(0,g.closestThroughPortal)(this,"skdx-speed-dial"),this.root?.addEventListener("skdx-speed-dial-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.childObserver.observe(this,{childList:!0,subtree:!0}),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-speed-dial-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.childObserver.disconnect(),this.cleanupPosition?.(),this.cleanupPosition=void 0,clearTimeout(this.typeaheadTimer),this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}updated(){this.querySelectorAll(d.ANY_ITEM_SELECTOR).forEach((e,i)=>{e.style.setProperty("--skdx-speed-dial-index",String(i)),e.style.setProperty("--skdx-speed-dial-offset",String(i+1))})}get orientation(){return d.DIRECTION_ORIENTATION[this.root?.direction??"up"]}syncHostState(){let t=this.root?.open??!1,e=this.root?.direction??"up";this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-direction",e),this.setAttribute("data-side",d.DIRECTION_SIDE[e]),this.setAttribute("data-align",this.align??"center"),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=(0,f.positionFloating)(this.root.triggerEl,this,{side:d.DIRECTION_SIDE[this.root.direction],align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"speed-dial"}),this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=requestAnimationFrame(()=>(0,r.focusOnOpen)(()=>{(this.querySelector(d.ITEM_SELECTOR)??this).focus()})))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0,this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=void 0}items(){return Array.from(this.querySelectorAll(d.ITEM_SELECTOR))}close(){this.root?.setOpen(!1),this.root?.focusTrigger()}render(){return p.html`<slot></slot>`}};s.styles=[b.hiddenHostStyles,p.css`
+"use strict";var y=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var F=(n,s)=>{for(var e in s)y(n,e,{get:s[e],enumerable:!0})},D=(n,s,e,t)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of w(s))!A.call(n,i)&&i!==e&&y(n,i,{get:()=>s[i],enumerable:!(t=L(s,i))||t.enumerable});return n};var I=n=>D(y({},"__esModule",{value:!0}),n),d=(n,s,e,t)=>{for(var i=t>1?void 0:t?L(s,e):s,l=n.length-1,c;l>=0;l--)(c=n[l])&&(i=(t?c(s,e,i):c(i))||i);return t&&i&&y(s,e,i),i};var N={};F(N,{SkdxSpeedDialContent:()=>r});module.exports=I(N);var u=require("lit"),h=require("lit/decorators.js"),b=require("../internal/closest.cjs"),O=require("../internal/define.cjs"),P=require("../internal/direction.cjs"),o=require("../internal/dismiss.cjs"),f=require("../internal/positioning.cjs"),T=require("../internal/styles.cjs"),p=require("../internal/typeahead.cjs"),E=require("./family.cjs"),m=require("./SpeedDial.cjs"),v=require("./SpeedDialConstants.cjs");var H={vertical:"ArrowDown",horizontal:"ArrowRight"},K={vertical:"ArrowUp",horizontal:"ArrowLeft"},r=class extends u.LitElement{constructor(){super(...arguments);this.align="center";this.sideOffset=8;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.typeahead=new p.Typeahead;this.layer={insideElements:()=>[this,this.root?.triggerEl]};this.childObserver=new MutationObserver(()=>this.requestUpdate());this.handlePointerEnter=e=>{this.root?.openOnHover&&e.pointerType!=="touch"&&this.root.cancelHoverClose()};this.handlePointerLeave=e=>{this.root?.openOnHover&&e.pointerType!=="touch"&&this.root.scheduleHoverClose()};this.handleOutsidePointerDown=e=>{if(!this.root?.open)return;let t=e.target;this.contains(t)||(0,o.triggerContains)(this.root.triggerEl,t)||(0,o.dispatchOutside)(this,"pointer-down-outside",e)&&this.root.setOpen(!1)};this.handleOutsideFocus=e=>{if(!this.root?.open)return;let t=(0,o.focusOutsideTarget)(e);!t||this.contains(t)||(0,o.triggerContains)(this.root.triggerEl,t)||(0,o.dispatchOutside)(this,"focus-outside",e)&&this.root.setOpen(!1)};this.handleEscape=e=>{(0,o.dispatchEscapeKeyDown)(this,e)&&this.close()};this.handleDocumentKeyDown=e=>{this.root?.open&&(0,o.handleEscapeKeyDown)(e,this.layer,this.handleEscape)};this.handleKeyDown=e=>{if(e.key==="Tab"){e.preventDefault(),this.close();return}let t=this.items();if(t.length===0)return;let i=t.indexOf(e.target),l=(0,P.directionalKey)(e.key,this),c=this.orientation,a;if(l===H[c])a=i+1,a>=t.length&&(a=this.loop?0:t.length-1);else if(l===K[c])a=i-1,a<0&&(a=this.loop?t.length-1:0);else if(l==="Home")a=0;else if(l==="End")a=t.length-1;else if((0,p.isTypeaheadKey)(e)){let g=this.typeahead.match(e.key,t.map(p.itemText),i);g!==-1&&(a=g)}a!==void 0&&(e.preventDefault(),t[a]?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu"),this.tabIndex=-1,this.root=(0,b.closestThroughPortal)(this,E.SPEED_DIAL_FAMILY.selector),this.root&&(this.root.contentEl=this),this.root?.addEventListener(E.SPEED_DIAL_FAMILY.event,this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.childObserver.observe(this,{childList:!0,subtree:!0}),this.root&&(this.id?this.root.contentId=this.id:this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(E.SPEED_DIAL_FAMILY.event,this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.releaseLayer?.(),this.releaseLayer=void 0,this.childObserver.disconnect(),this.cleanupPosition?.(),this.cleanupPosition=void 0,this.typeahead.clear(),this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}updated(){this.querySelectorAll(m.ANY_ITEM_SELECTOR).forEach((t,i)=>{t.style.setProperty("--skdx-speed-dial-index",String(i)),t.style.setProperty("--skdx-speed-dial-offset",String(i+1))})}get orientation(){return v.DIRECTION_ORIENTATION[this.root?.direction??"up"]}syncHostState(){let e=this.root?.open??!1,t=this.root?.direction??"up";this.setAttribute("aria-orientation",this.orientation),this.root&&this.setAttribute("aria-labelledby",this.root.triggerId),this.setAttribute("data-state",e?"open":"closed"),this.setAttribute("data-direction",t),this.setAttribute("data-side",v.DIRECTION_SIDE[t]),this.setAttribute("data-align",this.align??"center"),this.hidden=!e,e?this.releaseLayer??(this.releaseLayer=(0,o.pushDismissLayer)(this.layer)):(this.releaseLayer?.(),this.releaseLayer=void 0),e?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=(0,f.positionFloating)(this.root.triggerEl,this,{side:v.DIRECTION_SIDE[this.root.direction],align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"speed-dial"}),this.root?.openReason.current!=="hover"&&(this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=requestAnimationFrame(()=>(0,o.focusOnOpen)(()=>{(this.querySelector(m.ITEM_SELECTOR)??this).focus({preventScroll:!0})}))))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0,this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=void 0}items(){return Array.from(this.querySelectorAll(m.ITEM_SELECTOR))}close(){this.root?.setOpen(!1),this.root?.focusTrigger()}render(){return u.html`<slot></slot>`}};r.styles=[T.hiddenHostStyles,u.css`
       :host {
         display: block;
       }
-    `],l([(0,c.property)({type:String})],s.prototype,"align",2),l([(0,c.property)({type:Number,attribute:"side-offset"})],s.prototype,"sideOffset",2),l([(0,c.property)({type:Number,attribute:"align-offset"})],s.prototype,"alignOffset",2),l([(0,c.property)({converter:f.optOutBoolean,attribute:"avoid-collisions"})],s.prototype,"avoidCollisions",2),l([(0,c.property)({type:Number,attribute:"collision-padding"})],s.prototype,"collisionPadding",2),l([(0,c.property)({attribute:!1})],s.prototype,"collisionBoundary",2),l([(0,c.property)({converter:f.optOutBoolean})],s.prototype,"loop",2),s=l([(0,O.customElement)("skdx-speed-dial-content","speed-dial","content")],s);0&&(module.exports={SkdxSpeedDialContent});
+    `],d([(0,h.property)({type:String})],r.prototype,"align",2),d([(0,h.property)({type:Number,attribute:"side-offset"})],r.prototype,"sideOffset",2),d([(0,h.property)({type:Number,attribute:"align-offset"})],r.prototype,"alignOffset",2),d([(0,h.property)({converter:f.optOutBoolean,attribute:"avoid-collisions"})],r.prototype,"avoidCollisions",2),d([(0,h.property)({type:Number,attribute:"collision-padding"})],r.prototype,"collisionPadding",2),d([(0,h.property)({attribute:!1})],r.prototype,"collisionBoundary",2),d([(0,h.property)({converter:f.optOutBoolean})],r.prototype,"loop",2),r=d([(0,O.customElement)("skdx-speed-dial-content","speed-dial","content")],r);0&&(module.exports={SkdxSpeedDialContent});

package/dist/speed-dial/SpeedDialContent.d.cts

@@ -1,47 +1,12 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type PositionOptions } from '../internal/positioning.cjs';
 /**
- * `<skdx-speed-dial-content>` — the fanned-out actions for the closest ancestor
- * `<skdx-speed-dial>`: `role="menu"` with `aria-orientation` matching the fan's
- * axis, `data-state` (`open`/`closed`) and `data-direction`, positioned
- * relative to the trigger via `@floating-ui/dom` (`strategy: 'fixed'`, so no
- * portal is needed — unlike React's `SpeedDialPortal`, this content renders in
- * normal document flow). `role`, `aria-orientation`, `id` and the `data-*`
- * hooks are set directly on this host element (not inside shadow DOM) so
- * `aria-controls` on the trigger can target this element's id and this
- * element's own light-DOM `querySelectorAll` can find its action descendants.
+ * Fanned-out menu (`role="menu"`) for the closest `<skdx-speed-dial>`, positioned via floating-ui with arrow-key navigation and typeahead.
  *
- * `align` (defaults to `'center'`), `side-offset` (defaults to `8`),
- * `align-offset`, `avoid-collisions` and `collision-padding` are yours; `side`
- * is not, because it *is* the root's `direction`. `data-side`/`data-align`
- * start out as that configured placement and are rewritten by
- * `positioning.ts`'s `positionFloating` with floating-ui's resolved
- * (post-flip/shift) placement on every reposition, as React's `PopperContent`
- * does. The same layer writes the measurement custom properties
- * `--skdx-speed-dial-available-width` / `-available-height` / `-trigger-width` /
- * `-transform-origin` onto this element.
- *
- * Stamps every action with `--skdx-speed-dial-index` (0-based, for the delay)
- * and `--skdx-speed-dial-offset` (the same position counted from 1, for the
- * travel distance) after every update, so the staggered reveal is a pure CSS
- * transition and this library animates nothing in JavaScript.
- *
- * Holds one tab stop for the whole fan: arrow keys along the axis move between
- * actions in DOM order (wrapping unless `loop` is `false`), Home/End jump to
- * the ends, and typing letters jumps to the action whose label starts with
- * them. Under `dir="rtl"` the horizontal arrows swap. Focus moves to the first
- * action on open, and Escape, Tab, or selecting an action returns it to the
- * trigger.
- *
- * Closes on Escape, on Tab (per the WAI-ARIA menu pattern), or on an outside
- * interaction — pointer-down outside or focus moving outside — each announced
- * first as `interact-outside` and then as the specific event, so one
- * `preventDefault()` vetoes either path.
- *
- * @fires escape-key-down - Escape was pressed while open. Preventable.
- * @fires pointer-down-outside - A pointer-down landed outside this content while open. Preventable.
- * @fires focus-outside - Focus moved to an element outside this content while open (detail: the original focusin). Preventable.
- * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ * @fires escape-key-down - Fires when Escape is pressed while open; preventDefault() stops it from closing.
+ * @fires pointer-down-outside - Fires on pointer-down outside the fan and trigger; preventDefault() keeps it open.
+ * @fires focus-outside - Focus moved outside while open. Preventable.
+ * @fires interact-outside - Either outside interaction, fired before specific event. Preventable.
  */
 export declare class SkdxSpeedDialContent extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -53,82 +18,43 @@ export declare class SkdxSpeedDialContent extends LitElement {
     alignOffset: number;
     /** Flip/shift to stay within the viewport instead of overflowing it. */
     avoidCollisions: boolean;
-    /**
-     * Minimum pixel distance to keep from the collision boundary when avoiding
-     * collisions. The `collision-padding` attribute sets a single number for
-     * every side; the per-side `{ top, right, bottom, left }` form is
-     * property-only, since an attribute cannot carry an object.
-     */
+    /** Minimum pixel distance to keep from the collision boundary when avoiding collisions. */
     collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
-    /**
-     * Element (or elements) collisions are measured against instead of this
-     * fan's clipping ancestors — keeps it inside a scroll container or one pane
-     * of a split layout rather than the whole viewport. Property-only: an
-     * `Element` cannot come from an attribute string.
-     */
+    /** Element (or elements) collisions are measured against, instead of this fan's clipping ancestors. */
     collisionBoundary?: PositionOptions['collisionBoundary'];
     /**
-     * Whether arrow-key navigation wraps from the last action back to the first
-     * (and vice versa).
-     *
-     * Uses the `optOutBoolean` converter rather than Lit's stock `Boolean`,
-     * which reads attribute *presence*: a prop that defaults to `true` can only
-     * be switched off by value, so `loop="false"` is the way to opt out.
+     * Whether arrow-key navigation wraps from the last action back to the first (and vice versa).
      * @default true
      */
     loop: boolean;
     private root;
     private readonly onRootUpdate;
     private cleanupPosition?;
-    private typeahead;
-    private typeaheadTimer?;
+    private readonly typeahead;
     private focusFrame?;
-    /**
-     * Actions added or removed after the first render have to be re-stamped:
-     * `--skdx-speed-dial-index`/`-offset` are ordinals, so inserting an action
-     * shifts every action after it and the CSS stagger would otherwise keep
-     * animating the old order. React and Vue get this from re-rendering the
-     * list; a custom element has to be told.
-     */
+    /** What counts as inside this fan, for the shared layer stack Escape is resolved against. */
+    private readonly layer;
+    private releaseLayer?;
     private readonly childObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * The trigger registers the element to anchor against in its own
-     * `firstUpdated()`, which has not run yet when this fan's
-     * `connectedCallback` does — so a fan that mounts already open finds no
-     * anchor and, with no open-state change to follow, never positions itself at
-     * all. This is the first tick where the anchor exists; `activate()` is
-     * guarded, so an already-positioned fan is untouched.
-     */
     protected firstUpdated(): void;
-    /**
-     * Stamps each action's position in the fan onto the element itself, so the
-     * stagger is a pure CSS `transition-delay`/`translate`:
-     *
-     * - `--skdx-speed-dial-index` — 0-based ordinal, for the delay.
-     * - `--skdx-speed-dial-offset` — the same position counted from 1, for the
-     *   travel distance, so `calc(var(--skdx-speed-dial-offset) * 3.5rem)` puts
-     *   the first action one step from the trigger rather than on top of it.
-     *
-     * Disabled actions are counted too: one still occupies its place in the fan,
-     * so numbering around it would make the remaining actions jump.
-     */
     protected updated(): void;
-    /** The axis the actions travel along, which is also the axis the arrow keys walk. */
     private get orientation();
     private syncHostState;
     private activate;
     private deactivate;
-    /** Focusable, non-disabled actions in DOM order — the set arrow keys and typeahead move between. */
     private items;
     private close;
     private readonly handlePointerEnter;
     private readonly handlePointerLeave;
     private readonly handleOutsidePointerDown;
     private readonly handleOutsideFocus;
+    /** The consumer's veto is read first; `handleEscapeKeyDown` calls `preventDefault()` after it, and only for the topmost layer. */
+    private readonly handleEscape;
+    private readonly handleDocumentKeyDown;
     private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,47 +1,12 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type PositionOptions } from '../internal/positioning.js';
 /**
- * `<skdx-speed-dial-content>` — the fanned-out actions for the closest ancestor
- * `<skdx-speed-dial>`: `role="menu"` with `aria-orientation` matching the fan's
- * axis, `data-state` (`open`/`closed`) and `data-direction`, positioned
- * relative to the trigger via `@floating-ui/dom` (`strategy: 'fixed'`, so no
- * portal is needed — unlike React's `SpeedDialPortal`, this content renders in
- * normal document flow). `role`, `aria-orientation`, `id` and the `data-*`
- * hooks are set directly on this host element (not inside shadow DOM) so
- * `aria-controls` on the trigger can target this element's id and this
- * element's own light-DOM `querySelectorAll` can find its action descendants.
+ * Fanned-out menu (`role="menu"`) for the closest `<skdx-speed-dial>`, positioned via floating-ui with arrow-key navigation and typeahead.
  *
- * `align` (defaults to `'center'`), `side-offset` (defaults to `8`),
- * `align-offset`, `avoid-collisions` and `collision-padding` are yours; `side`
- * is not, because it *is* the root's `direction`. `data-side`/`data-align`
- * start out as that configured placement and are rewritten by
- * `positioning.ts`'s `positionFloating` with floating-ui's resolved
- * (post-flip/shift) placement on every reposition, as React's `PopperContent`
- * does. The same layer writes the measurement custom properties
- * `--skdx-speed-dial-available-width` / `-available-height` / `-trigger-width` /
- * `-transform-origin` onto this element.
- *
- * Stamps every action with `--skdx-speed-dial-index` (0-based, for the delay)
- * and `--skdx-speed-dial-offset` (the same position counted from 1, for the
- * travel distance) after every update, so the staggered reveal is a pure CSS
- * transition and this library animates nothing in JavaScript.
- *
- * Holds one tab stop for the whole fan: arrow keys along the axis move between
- * actions in DOM order (wrapping unless `loop` is `false`), Home/End jump to
- * the ends, and typing letters jumps to the action whose label starts with
- * them. Under `dir="rtl"` the horizontal arrows swap. Focus moves to the first
- * action on open, and Escape, Tab, or selecting an action returns it to the
- * trigger.
- *
- * Closes on Escape, on Tab (per the WAI-ARIA menu pattern), or on an outside
- * interaction — pointer-down outside or focus moving outside — each announced
- * first as `interact-outside` and then as the specific event, so one
- * `preventDefault()` vetoes either path.
- *
- * @fires escape-key-down - Escape was pressed while open. Preventable.
- * @fires pointer-down-outside - A pointer-down landed outside this content while open. Preventable.
- * @fires focus-outside - Focus moved to an element outside this content while open (detail: the original focusin). Preventable.
- * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ * @fires escape-key-down - Fires when Escape is pressed while open; preventDefault() stops it from closing.
+ * @fires pointer-down-outside - Fires on pointer-down outside the fan and trigger; preventDefault() keeps it open.
+ * @fires focus-outside - Focus moved outside while open. Preventable.
+ * @fires interact-outside - Either outside interaction, fired before specific event. Preventable.
  */
 export declare class SkdxSpeedDialContent extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -53,82 +18,43 @@ export declare class SkdxSpeedDialContent extends LitElement {
     alignOffset: number;
     /** Flip/shift to stay within the viewport instead of overflowing it. */
     avoidCollisions: boolean;
-    /**
-     * Minimum pixel distance to keep from the collision boundary when avoiding
-     * collisions. The `collision-padding` attribute sets a single number for
-     * every side; the per-side `{ top, right, bottom, left }` form is
-     * property-only, since an attribute cannot carry an object.
-     */
+    /** Minimum pixel distance to keep from the collision boundary when avoiding collisions. */
     collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
-    /**
-     * Element (or elements) collisions are measured against instead of this
-     * fan's clipping ancestors — keeps it inside a scroll container or one pane
-     * of a split layout rather than the whole viewport. Property-only: an
-     * `Element` cannot come from an attribute string.
-     */
+    /** Element (or elements) collisions are measured against, instead of this fan's clipping ancestors. */
     collisionBoundary?: PositionOptions['collisionBoundary'];
     /**
-     * Whether arrow-key navigation wraps from the last action back to the first
-     * (and vice versa).
-     *
-     * Uses the `optOutBoolean` converter rather than Lit's stock `Boolean`,
-     * which reads attribute *presence*: a prop that defaults to `true` can only
-     * be switched off by value, so `loop="false"` is the way to opt out.
+     * Whether arrow-key navigation wraps from the last action back to the first (and vice versa).
      * @default true
      */
     loop: boolean;
     private root;
     private readonly onRootUpdate;
     private cleanupPosition?;
-    private typeahead;
-    private typeaheadTimer?;
+    private readonly typeahead;
     private focusFrame?;
-    /**
-     * Actions added or removed after the first render have to be re-stamped:
-     * `--skdx-speed-dial-index`/`-offset` are ordinals, so inserting an action
-     * shifts every action after it and the CSS stagger would otherwise keep
-     * animating the old order. React and Vue get this from re-rendering the
-     * list; a custom element has to be told.
-     */
+    /** What counts as inside this fan, for the shared layer stack Escape is resolved against. */
+    private readonly layer;
+    private releaseLayer?;
     private readonly childObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * The trigger registers the element to anchor against in its own
-     * `firstUpdated()`, which has not run yet when this fan's
-     * `connectedCallback` does — so a fan that mounts already open finds no
-     * anchor and, with no open-state change to follow, never positions itself at
-     * all. This is the first tick where the anchor exists; `activate()` is
-     * guarded, so an already-positioned fan is untouched.
-     */
     protected firstUpdated(): void;
-    /**
-     * Stamps each action's position in the fan onto the element itself, so the
-     * stagger is a pure CSS `transition-delay`/`translate`:
-     *
-     * - `--skdx-speed-dial-index` — 0-based ordinal, for the delay.
-     * - `--skdx-speed-dial-offset` — the same position counted from 1, for the
-     *   travel distance, so `calc(var(--skdx-speed-dial-offset) * 3.5rem)` puts
-     *   the first action one step from the trigger rather than on top of it.
-     *
-     * Disabled actions are counted too: one still occupies its place in the fan,
-     * so numbering around it would make the remaining actions jump.
-     */
     protected updated(): void;
-    /** The axis the actions travel along, which is also the axis the arrow keys walk. */
     private get orientation();
     private syncHostState;
     private activate;
     private deactivate;
-    /** Focusable, non-disabled actions in DOM order — the set arrow keys and typeahead move between. */
     private items;
     private close;
     private readonly handlePointerEnter;
     private readonly handlePointerLeave;
     private readonly handleOutsidePointerDown;
     private readonly handleOutsideFocus;
+    /** The consumer's veto is read first; `handleEscapeKeyDown` calls `preventDefault()` after it, and only for the topmost layer. */
+    private readonly handleEscape;
+    private readonly handleDocumentKeyDown;
     private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/speed-dial/SpeedDialContent.js

@@ -1,5 +1,5 @@
-var E=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(h,l,t,e)=>{for(var i=e>1?void 0:e?g(l,t):l,n=h.length-1,d;n>=0;n--)(d=h[n])&&(i=(e?d(l,t,i):d(i))||i);return e&&i&&E(l,t,i),i};import{css as O,html as T,LitElement as b}from"lit";import{property as a}from"lit/decorators.js";import{closestThroughPortal as P}from"../internal/closest.js";import{customElement as L}from"../internal/define.js";import{directionalKey as A}from"../internal/direction.js";import{dispatchEscapeKeyDown as w,dispatchOutside as u,focusOnOpen as F,focusOutsideTarget as H,triggerContains as p}from"../internal/dismiss.js";import{optOutBoolean as f,positionFloating as I}from"../internal/positioning.js";import{hiddenHostStyles as N}from"../internal/styles.js";import{isTypeaheadKey as M,itemText as R}from"../internal/typeahead.js";import{ANY_ITEM_SELECTOR as k,DIRECTION_ORIENTATION as _,DIRECTION_SIDE as m,ITEM_SELECTOR as v}from"./SpeedDial.js";var x=1e3,K={vertical:"ArrowDown",horizontal:"ArrowRight"},U={vertical:"ArrowUp",horizontal:"ArrowLeft"},o=class extends b{constructor(){super(...arguments);this.align="center";this.sideOffset=8;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.typeahead="";this.childObserver=new MutationObserver(()=>this.requestUpdate());this.handlePointerEnter=t=>{this.root?.openOnHover&&t.pointerType!=="touch"&&this.root.cancelHoverClose()};this.handlePointerLeave=t=>{this.root?.openOnHover&&t.pointerType!=="touch"&&this.root.scheduleHoverClose()};this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||p(this.root.triggerEl,e)||u(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=H(t);!e||this.contains(e)||p(this.root.triggerEl,e)||u(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{if(t.key==="Escape"){t.preventDefault(),w(this,t)&&this.close();return}if(t.key==="Tab"){t.preventDefault(),this.close();return}let e=this.items();if(e.length===0)return;let i=e.indexOf(t.target),n=A(t.key,this),d=this.orientation,s;if(n===K[d])s=i+1,s>=e.length&&(s=this.loop?0:e.length-1);else if(n===U[d])s=i-1,s<0&&(s=this.loop?e.length-1:0);else if(n==="Home")s=0;else if(n==="End")s=e.length-1;else if(M(t)){clearTimeout(this.typeaheadTimer),this.typeahead+=t.key.toLowerCase(),this.typeaheadTimer=setTimeout(()=>this.typeahead="",x);let c=[...e.slice(i+1),...e.slice(0,i+1)].find(y=>R(y).trim().toLowerCase().startsWith(this.typeahead));c&&(s=e.indexOf(c))}s!==void 0&&(t.preventDefault(),e[s]?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu"),this.tabIndex=-1,this.root=P(this,"skdx-speed-dial"),this.root?.addEventListener("skdx-speed-dial-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.childObserver.observe(this,{childList:!0,subtree:!0}),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-speed-dial-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.childObserver.disconnect(),this.cleanupPosition?.(),this.cleanupPosition=void 0,clearTimeout(this.typeaheadTimer),this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}updated(){this.querySelectorAll(k).forEach((e,i)=>{e.style.setProperty("--skdx-speed-dial-index",String(i)),e.style.setProperty("--skdx-speed-dial-offset",String(i+1))})}get orientation(){return _[this.root?.direction??"up"]}syncHostState(){let t=this.root?.open??!1,e=this.root?.direction??"up";this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-direction",e),this.setAttribute("data-side",m[e]),this.setAttribute("data-align",this.align??"center"),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=I(this.root.triggerEl,this,{side:m[this.root.direction],align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"speed-dial"}),this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=requestAnimationFrame(()=>F(()=>{(this.querySelector(v)??this).focus()})))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0,this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=void 0}items(){return Array.from(this.querySelectorAll(v))}close(){this.root?.setOpen(!1),this.root?.focusTrigger()}render(){return T`<slot></slot>`}};o.styles=[N,O`
+var E=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(h,l,e,t)=>{for(var i=t>1?void 0:t?g(l,e):l,n=h.length-1,d;n>=0;n--)(d=h[n])&&(i=(t?d(l,e,i):d(i))||i);return t&&i&&E(l,e,i),i};import{css as L,html as b,LitElement as O}from"lit";import{property as a}from"lit/decorators.js";import{closestThroughPortal as P}from"../internal/closest.js";import{customElement as T}from"../internal/define.js";import{directionalKey as w}from"../internal/direction.js";import{dispatchEscapeKeyDown as A,dispatchOutside as p,focusOnOpen as F,focusOutsideTarget as D,handleEscapeKeyDown as I,pushDismissLayer as H,triggerContains as f}from"../internal/dismiss.js";import{optOutBoolean as m,positionFloating as K}from"../internal/positioning.js";import{hiddenHostStyles as N}from"../internal/styles.js";import{isTypeaheadKey as R,itemText as M,Typeahead as k}from"../internal/typeahead.js";import{SPEED_DIAL_FAMILY as c}from"./family.js";import{ANY_ITEM_SELECTOR as _,ITEM_SELECTOR as v}from"./SpeedDial.js";import{DIRECTION_ORIENTATION as U,DIRECTION_SIDE as y}from"./SpeedDialConstants.js";var q={vertical:"ArrowDown",horizontal:"ArrowRight"},B={vertical:"ArrowUp",horizontal:"ArrowLeft"},o=class extends O{constructor(){super(...arguments);this.align="center";this.sideOffset=8;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.typeahead=new k;this.layer={insideElements:()=>[this,this.root?.triggerEl]};this.childObserver=new MutationObserver(()=>this.requestUpdate());this.handlePointerEnter=e=>{this.root?.openOnHover&&e.pointerType!=="touch"&&this.root.cancelHoverClose()};this.handlePointerLeave=e=>{this.root?.openOnHover&&e.pointerType!=="touch"&&this.root.scheduleHoverClose()};this.handleOutsidePointerDown=e=>{if(!this.root?.open)return;let t=e.target;this.contains(t)||f(this.root.triggerEl,t)||p(this,"pointer-down-outside",e)&&this.root.setOpen(!1)};this.handleOutsideFocus=e=>{if(!this.root?.open)return;let t=D(e);!t||this.contains(t)||f(this.root.triggerEl,t)||p(this,"focus-outside",e)&&this.root.setOpen(!1)};this.handleEscape=e=>{A(this,e)&&this.close()};this.handleDocumentKeyDown=e=>{this.root?.open&&I(e,this.layer,this.handleEscape)};this.handleKeyDown=e=>{if(e.key==="Tab"){e.preventDefault(),this.close();return}let t=this.items();if(t.length===0)return;let i=t.indexOf(e.target),n=w(e.key,this),d=this.orientation,s;if(n===q[d])s=i+1,s>=t.length&&(s=this.loop?0:t.length-1);else if(n===B[d])s=i-1,s<0&&(s=this.loop?t.length-1:0);else if(n==="Home")s=0;else if(n==="End")s=t.length-1;else if(R(e)){let u=this.typeahead.match(e.key,t.map(M),i);u!==-1&&(s=u)}s!==void 0&&(e.preventDefault(),t[s]?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu"),this.tabIndex=-1,this.root=P(this,c.selector),this.root&&(this.root.contentEl=this),this.root?.addEventListener(c.event,this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.childObserver.observe(this,{childList:!0,subtree:!0}),this.root&&(this.id?this.root.contentId=this.id:this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(c.event,this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.releaseLayer?.(),this.releaseLayer=void 0,this.childObserver.disconnect(),this.cleanupPosition?.(),this.cleanupPosition=void 0,this.typeahead.clear(),this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}updated(){this.querySelectorAll(_).forEach((t,i)=>{t.style.setProperty("--skdx-speed-dial-index",String(i)),t.style.setProperty("--skdx-speed-dial-offset",String(i+1))})}get orientation(){return U[this.root?.direction??"up"]}syncHostState(){let e=this.root?.open??!1,t=this.root?.direction??"up";this.setAttribute("aria-orientation",this.orientation),this.root&&this.setAttribute("aria-labelledby",this.root.triggerId),this.setAttribute("data-state",e?"open":"closed"),this.setAttribute("data-direction",t),this.setAttribute("data-side",y[t]),this.setAttribute("data-align",this.align??"center"),this.hidden=!e,e?this.releaseLayer??(this.releaseLayer=H(this.layer)):(this.releaseLayer?.(),this.releaseLayer=void 0),e?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=K(this.root.triggerEl,this,{side:y[this.root.direction],align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"speed-dial"}),this.root?.openReason.current!=="hover"&&(this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=requestAnimationFrame(()=>F(()=>{(this.querySelector(v)??this).focus({preventScroll:!0})}))))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0,this.focusFrame!==void 0&&cancelAnimationFrame(this.focusFrame),this.focusFrame=void 0}items(){return Array.from(this.querySelectorAll(v))}close(){this.root?.setOpen(!1),this.root?.focusTrigger()}render(){return b`<slot></slot>`}};o.styles=[N,L`
       :host {
         display: block;
       }
-    `],r([a({type:String})],o.prototype,"align",2),r([a({type:Number,attribute:"side-offset"})],o.prototype,"sideOffset",2),r([a({type:Number,attribute:"align-offset"})],o.prototype,"alignOffset",2),r([a({converter:f,attribute:"avoid-collisions"})],o.prototype,"avoidCollisions",2),r([a({type:Number,attribute:"collision-padding"})],o.prototype,"collisionPadding",2),r([a({attribute:!1})],o.prototype,"collisionBoundary",2),r([a({converter:f})],o.prototype,"loop",2),o=r([L("skdx-speed-dial-content","speed-dial","content")],o);export{o as SkdxSpeedDialContent};
+    `],r([a({type:String})],o.prototype,"align",2),r([a({type:Number,attribute:"side-offset"})],o.prototype,"sideOffset",2),r([a({type:Number,attribute:"align-offset"})],o.prototype,"alignOffset",2),r([a({converter:m,attribute:"avoid-collisions"})],o.prototype,"avoidCollisions",2),r([a({type:Number,attribute:"collision-padding"})],o.prototype,"collisionPadding",2),r([a({attribute:!1})],o.prototype,"collisionBoundary",2),r([a({converter:m})],o.prototype,"loop",2),o=r([T("skdx-speed-dial-content","speed-dial","content")],o);export{o as SkdxSpeedDialContent};

package/dist/speed-dial/SpeedDialItem.cjs

@@ -1,5 +1,5 @@
-"use strict";var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var y=(s,t)=>{for(var e in t)l(s,e,{get:t[e],enumerable:!0})},E=(s,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of m(t))!f.call(s,i)&&i!==e&&l(s,i,{get:()=>t[i],enumerable:!(r=b(t,i))||r.enumerable});return s};var A=s=>E(l({},"__esModule",{value:!0}),s),h=(s,t,e,r)=>{for(var i=r>1?void 0:r?b(t,e):t,n=s.length-1,o;n>=0;n--)(o=s[n])&&(i=(r?o(t,e,i):o(i))||i);return r&&i&&l(t,e,i),i};var L={};y(L,{SkdxSpeedDialItem:()=>a});module.exports=A(L);var d=require("lit"),c=require("lit/decorators.js"),u=require("../internal/closest.cjs"),v=require("../internal/define.cjs"),p=require("../internal/styles.cjs");var a=class extends d.LitElement{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.handleActivate=()=>{if(this.disabled)return;let e=new CustomEvent("select",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),!e.defaultPrevented&&(this.root?.setOpen(!1),this.root?.focusTrigger())};this.handleKeyDown=e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.handleActivate())};this.handlePointerEnter=()=>{this.disabled||this.focus()};this.handlePointerLeave=()=>{document.activeElement===this&&this.closest('[role="menu"]')?.focus()}}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","menuitem"),this.root=(0,u.closestThroughPortal)(this,"skdx-speed-dial"),this.addEventListener("click",this.handleActivate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncDisabledState()}updated(e){e.has("disabled")&&this.syncDisabledState()}syncDisabledState(){this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true"),this.removeAttribute("tabindex")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled"),this.tabIndex=-1)}setLabelId(e){e===void 0?this.removeAttribute("aria-labelledby"):this.setAttribute("aria-labelledby",e)}render(){return d.html`<slot></slot>`}};a.styles=[p.hiddenHostStyles,d.css`
+"use strict";var n=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var E=(s,t)=>{for(var e in t)n(s,e,{get:t[e],enumerable:!0})},D=(s,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of f(t))!y.call(s,i)&&i!==e&&n(s,i,{get:()=>t[i],enumerable:!(r=v(t,i))||r.enumerable});return s};var L=s=>D(n({},"__esModule",{value:!0}),s),d=(s,t,e,r)=>{for(var i=r>1?void 0:r?v(t,e):t,o=s.length-1,h;o>=0;o--)(h=s[o])&&(i=(r?h(t,e,i):h(i))||i);return r&&i&&n(t,e,i),i};var A={};E(A,{SkdxSpeedDialItem:()=>l});module.exports=L(A);var a=require("lit"),c=require("lit/decorators.js"),u=require("../internal/closest.cjs"),p=require("../internal/define.cjs"),b=require("../internal/styles.cjs"),m=require("./family.cjs");var l=class extends a.LitElement{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.handleActivate=()=>{if(this.disabled)return;let e=this.selectDetail!==void 0;this.selectDetail?.action.onSelect?.();let r=new CustomEvent("select",{detail:this.selectDetail??null,bubbles:!0,composed:!0,cancelable:!e});this.dispatchEvent(r),!(!e&&r.defaultPrevented)&&(this.root?.setOpen(!1),this.root?.focusTrigger())};this.handleKeyDown=e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.handleActivate())};this.handlePointerEnter=()=>{this.disabled||this.focus()};this.handlePointerLeave=()=>{document.activeElement===this&&this.closest('[role="menu"]')?.focus()}}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","menuitem"),this.root=(0,u.closestThroughPortal)(this,m.SPEED_DIAL_FAMILY.selector),this.addEventListener("click",this.handleActivate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncDisabledState()}disconnectedCallback(){this.removeEventListener("click",this.handleActivate),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),super.disconnectedCallback()}updated(e){e.has("disabled")&&this.syncDisabledState()}syncDisabledState(){this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),this.tabIndex=-1}setLabelId(e){e===void 0?this.removeAttribute("aria-labelledby"):this.setAttribute("aria-labelledby",e)}render(){return a.html`<slot></slot>`}};l.styles=[b.hiddenHostStyles,a.css`
       :host {
         display: block;
       }
-    `],h([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"disabled",2),a=h([(0,v.customElement)("skdx-speed-dial-item","speed-dial","item")],a);0&&(module.exports={SkdxSpeedDialItem});
+    `],d([(0,c.property)({type:Boolean,reflect:!0})],l.prototype,"disabled",2),d([(0,c.property)({type:String,reflect:!0,attribute:"data-size"})],l.prototype,"size",2),l=d([(0,p.customElement)("skdx-speed-dial-item","speed-dial","item")],l);0&&(module.exports={SkdxSpeedDialItem});

package/dist/speed-dial/SpeedDialItem.d.cts

@@ -1,31 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+import type { SpeedDialSelectDetail } from './SpeedDial.cjs';
 /**
- * `<skdx-speed-dial-item>` — one action in the fan: `role="menuitem"`, part of
- * the content's single tab stop, activated by click, Enter, or Space.
- * Activating it fires a cancelable `select` event and closes the dial,
- * returning focus to the trigger, unless the listener calls
- * `event.preventDefault()`. Set `disabled` to exclude it from navigation and
- * selection while keeping its slot in the fan, so the actions around it do not
- * shuffle.
- *
- * Carries `--skdx-speed-dial-index` (0-based) and `--skdx-speed-dial-offset`
- * (the same position counted from 1), written by
- * `<skdx-speed-dial-content>`, so the travel distance and the stagger are both
- * CSS:
- *
- * ```css
- * .my-speed-dial-item {
- *   transition: transform 160ms;
- *   transition-delay: calc(var(--skdx-speed-dial-index) * 40ms);
- * }
- * [data-direction='up'] .my-speed-dial-item {
- *   transform: translateY(calc(var(--skdx-speed-dial-offset) * -3.5rem));
- * }
- * ```
- *
- * Its accessible name comes from an `<skdx-speed-dial-item-label>` child via
- * `aria-labelledby`, so an icon-only action is still named — see that part for
- * why a `title` attribute is not an acceptable substitute.
+ * One action in the fan, rendering `role="menuitem"` and firing a cancelable `select` event on activation.
  *
  * @example
  * ```html
@@ -35,36 +11,35 @@ import { LitElement } from 'lit';
  * </skdx-speed-dial-item>
  * ```
  *
- * @fires select - The action was activated (click, Enter, or Space). Preventable — prevents the dial from closing.
+ * @fires select - The action was activated (click/Enter/Space); preventable, and prevents the dial from closing.
  */
 export declare class SkdxSpeedDialItem extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
-     * Excludes the action from arrow-key navigation and blocks selection. It
-     * keeps its slot in the fan, so the actions around it do not shuffle.
+     * Excludes the action from arrow-key navigation and blocks selection, keeping its slot in the fan.
      * @default false
      */
     disabled: boolean;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
     /** @internal Ancestor dial, looked up so selection can close it and refocus the trigger. */
     private root;
+    /** @internal Set by the derived anatomy to the `actions` entry this Item was built from; a hand-composed Item has none. */
+    selectDetail?: SpeedDialSelectDetail;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
     private syncDisabledState;
-    /**
-     * @internal Points `aria-labelledby` at the `<skdx-speed-dial-item-label>`
-     * child that registered, and drops it again when that label leaves. Set
-     * rather than generated here because `aria-labelledby` must reference an
-     * element that actually exists — a dangling reference is an accessibility
-     * violation in its own right, and an action may legitimately be labelled by
-     * its own text instead.
-     */
+    /** @internal Points `aria-labelledby` at the registered label, removing it when the label leaves. */
     setLabelId(id: string | undefined): void;
     private readonly handleActivate;
     private readonly handleKeyDown;
     private readonly handlePointerEnter;
-    /** Focus returns to the fan itself, so arrow-key navigation resumes from the container. */
     private readonly handlePointerLeave;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,31 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+import type { SpeedDialSelectDetail } from './SpeedDial.js';
 /**
- * `<skdx-speed-dial-item>` — one action in the fan: `role="menuitem"`, part of
- * the content's single tab stop, activated by click, Enter, or Space.
- * Activating it fires a cancelable `select` event and closes the dial,
- * returning focus to the trigger, unless the listener calls
- * `event.preventDefault()`. Set `disabled` to exclude it from navigation and
- * selection while keeping its slot in the fan, so the actions around it do not
- * shuffle.
- *
- * Carries `--skdx-speed-dial-index` (0-based) and `--skdx-speed-dial-offset`
- * (the same position counted from 1), written by
- * `<skdx-speed-dial-content>`, so the travel distance and the stagger are both
- * CSS:
- *
- * ```css
- * .my-speed-dial-item {
- *   transition: transform 160ms;
- *   transition-delay: calc(var(--skdx-speed-dial-index) * 40ms);
- * }
- * [data-direction='up'] .my-speed-dial-item {
- *   transform: translateY(calc(var(--skdx-speed-dial-offset) * -3.5rem));
- * }
- * ```
- *
- * Its accessible name comes from an `<skdx-speed-dial-item-label>` child via
- * `aria-labelledby`, so an icon-only action is still named — see that part for
- * why a `title` attribute is not an acceptable substitute.
+ * One action in the fan, rendering `role="menuitem"` and firing a cancelable `select` event on activation.
  *
  * @example
  * ```html
@@ -35,36 +11,35 @@ import { LitElement } from 'lit';
  * </skdx-speed-dial-item>
  * ```
  *
- * @fires select - The action was activated (click, Enter, or Space). Preventable — prevents the dial from closing.
+ * @fires select - The action was activated (click/Enter/Space); preventable, and prevents the dial from closing.
  */
 export declare class SkdxSpeedDialItem extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
-     * Excludes the action from arrow-key navigation and blocks selection. It
-     * keeps its slot in the fan, so the actions around it do not shuffle.
+     * Excludes the action from arrow-key navigation and blocks selection, keeping its slot in the fan.
      * @default false
      */
     disabled: boolean;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
     /** @internal Ancestor dial, looked up so selection can close it and refocus the trigger. */
     private root;
+    /** @internal Set by the derived anatomy to the `actions` entry this Item was built from; a hand-composed Item has none. */
+    selectDetail?: SpeedDialSelectDetail;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
     private syncDisabledState;
-    /**
-     * @internal Points `aria-labelledby` at the `<skdx-speed-dial-item-label>`
-     * child that registered, and drops it again when that label leaves. Set
-     * rather than generated here because `aria-labelledby` must reference an
-     * element that actually exists — a dangling reference is an accessibility
-     * violation in its own right, and an action may legitimately be labelled by
-     * its own text instead.
-     */
+    /** @internal Points `aria-labelledby` at the registered label, removing it when the label leaves. */
     setLabelId(id: string | undefined): void;
     private readonly handleActivate;
     private readonly handleKeyDown;
     private readonly handlePointerEnter;
-    /** Focus returns to the fan itself, so arrow-key navigation resumes from the container. */
     private readonly handlePointerLeave;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/speed-dial/SpeedDialItem.js

@@ -1,5 +1,5 @@
-var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(a,s,e,r)=>{for(var t=r>1?void 0:r?h(s,e):s,d=a.length-1,l;d>=0;d--)(l=a[d])&&(t=(r?l(s,e,t):l(t))||t);return r&&t&&o(s,e,t),t};import{css as b,html as c,LitElement as u}from"lit";import{property as v}from"lit/decorators.js";import{closestThroughPortal as p}from"../internal/closest.js";import{customElement as m}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";var i=class extends u{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.handleActivate=()=>{if(this.disabled)return;let e=new CustomEvent("select",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),!e.defaultPrevented&&(this.root?.setOpen(!1),this.root?.focusTrigger())};this.handleKeyDown=e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.handleActivate())};this.handlePointerEnter=()=>{this.disabled||this.focus()};this.handlePointerLeave=()=>{document.activeElement===this&&this.closest('[role="menu"]')?.focus()}}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","menuitem"),this.root=p(this,"skdx-speed-dial"),this.addEventListener("click",this.handleActivate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncDisabledState()}updated(e){e.has("disabled")&&this.syncDisabledState()}syncDisabledState(){this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true"),this.removeAttribute("tabindex")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled"),this.tabIndex=-1)}setLabelId(e){e===void 0?this.removeAttribute("aria-labelledby"):this.setAttribute("aria-labelledby",e)}render(){return c`<slot></slot>`}};i.styles=[f,b`
+var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(a,r,e,t)=>{for(var i=t>1?void 0:t?c(r,e):r,n=a.length-1,d;n>=0;n--)(d=a[n])&&(i=(t?d(r,e,i):d(i))||i);return t&&i&&h(r,e,i),i};import{css as v,html as u,LitElement as p}from"lit";import{property as o}from"lit/decorators.js";import{closestThroughPortal as b}from"../internal/closest.js";import{customElement as m}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";import{SPEED_DIAL_FAMILY as y}from"./family.js";var s=class extends p{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.handleActivate=()=>{if(this.disabled)return;let e=this.selectDetail!==void 0;this.selectDetail?.action.onSelect?.();let t=new CustomEvent("select",{detail:this.selectDetail??null,bubbles:!0,composed:!0,cancelable:!e});this.dispatchEvent(t),!(!e&&t.defaultPrevented)&&(this.root?.setOpen(!1),this.root?.focusTrigger())};this.handleKeyDown=e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.handleActivate())};this.handlePointerEnter=()=>{this.disabled||this.focus()};this.handlePointerLeave=()=>{document.activeElement===this&&this.closest('[role="menu"]')?.focus()}}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","menuitem"),this.root=b(this,y.selector),this.addEventListener("click",this.handleActivate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncDisabledState()}disconnectedCallback(){this.removeEventListener("click",this.handleActivate),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),super.disconnectedCallback()}updated(e){e.has("disabled")&&this.syncDisabledState()}syncDisabledState(){this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),this.tabIndex=-1}setLabelId(e){e===void 0?this.removeAttribute("aria-labelledby"):this.setAttribute("aria-labelledby",e)}render(){return u`<slot></slot>`}};s.styles=[f,v`
       :host {
         display: block;
       }
-    `],n([v({type:Boolean,reflect:!0})],i.prototype,"disabled",2),i=n([m("skdx-speed-dial-item","speed-dial","item")],i);export{i as SkdxSpeedDialItem};
+    `],l([o({type:Boolean,reflect:!0})],s.prototype,"disabled",2),l([o({type:String,reflect:!0,attribute:"data-size"})],s.prototype,"size",2),s=l([m("skdx-speed-dial-item","speed-dial","item")],s);export{s as SkdxSpeedDialItem};

package/dist/speed-dial/SpeedDialItemLabel.cjs

@@ -1,4 +1,4 @@
-"use strict";var r=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var f=(i,e)=>{for(var l in e)r(i,l,{get:e[l],enumerable:!0})},v=(i,e,l,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!k.call(i,t)&&t!==l&&r(i,t,{get:()=>e[t],enumerable:!(s=n(e,t))||s.enumerable});return i};var x=i=>v(r({},"__esModule",{value:!0}),i),c=(i,e,l,s)=>{for(var t=s>1?void 0:s?n(e,l):e,a=i.length-1,m;a>=0;a--)(m=i[a])&&(t=(s?m(e,l,t):m(t))||t);return s&&t&&r(e,l,t),t};var y={};f(y,{SkdxSpeedDialItemLabel:()=>d});module.exports=x(y);var o=require("lit"),p=require("../internal/define.cjs"),b=require("../internal/ids.cjs"),h=require("../internal/styles.cjs");var d=class extends o.LitElement{constructor(){super(...arguments);this.item=null}connectedCallback(){super.connectedCallback(),this.item=this.closest("skdx-speed-dial-item"),this.item?.setLabelId((0,b.ensureId)(this,"skdx-speed-dial","item-label"))}disconnectedCallback(){this.item?.setLabelId(void 0),this.item=null,super.disconnectedCallback()}render(){return o.html`<slot></slot>`}};d.styles=[h.hiddenHostStyles,o.css`
+"use strict";var r=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var f=(l,e)=>{for(var i in e)r(l,i,{get:e[i],enumerable:!0})},v=(l,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!k.call(l,t)&&t!==i&&r(l,t,{get:()=>e[t],enumerable:!(s=n(e,t))||s.enumerable});return l};var x=l=>v(r({},"__esModule",{value:!0}),l),c=(l,e,i,s)=>{for(var t=s>1?void 0:s?n(e,i):e,a=l.length-1,m;a>=0;a--)(m=l[a])&&(t=(s?m(e,i,t):m(t))||t);return s&&t&&r(e,i,t),t};var y={};f(y,{SkdxSpeedDialItemLabel:()=>d});module.exports=x(y);var o=require("lit"),p=require("../internal/define.cjs"),u=require("../internal/ids.cjs"),b=require("../internal/styles.cjs");var d=class extends o.LitElement{constructor(){super(...arguments);this.item=null}connectedCallback(){super.connectedCallback(),this.item=this.closest("skdx-speed-dial-item"),this.item?.setLabelId((0,u.ensureId)(this,"skdx-speed-dial","item-label"))}disconnectedCallback(){this.item?.setLabelId(void 0),this.item=null,super.disconnectedCallback()}render(){return o.html`<slot></slot>`}};d.styles=[b.hiddenHostStyles,o.css`
       :host {
         display: inline-block;
       }