@skdx/web-components 0.26.0

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

@@ -0,0 +1,144 @@
+import { LitElement } from 'lit';
+import type { Side } from '../internal/positioning.cjs';
+/**
+ * Which way the actions fan out from the trigger. Physical, not logical: a
+ * speed dial is anchored to a corner of the viewport, and the corner does not
+ * move under `dir="rtl"` — only the arrow keys that walk the fan do, which
+ * `<skdx-speed-dial-content>` resolves for itself.
+ */
+export type SpeedDialDirection = 'up' | 'down' | 'left' | 'right';
+/**
+ * @internal Every action slot, disabled ones included. Used for the positional
+ * custom properties: a disabled action still occupies its place in the fan, so
+ * numbering around it would make the remaining actions jump.
+ */
+export declare const ANY_ITEM_SELECTOR = "[role=\"menuitem\"]";
+/** @internal Focusable, non-disabled actions — the set arrow keys and typeahead move between. */
+export declare const ITEM_SELECTOR = "[role=\"menuitem\"]:not([data-disabled])";
+/** @internal The popper side each fan direction positions its content on. */
+export declare const DIRECTION_SIDE: Record<SpeedDialDirection, Side>;
+/** @internal The axis the actions travel along, which is also the axis the arrow keys walk. */
+export declare const DIRECTION_ORIENTATION: {
+    readonly up: "vertical";
+    readonly down: "vertical";
+    readonly left: "horizontal";
+    readonly right: "horizontal";
+};
+/**
+ * `<skdx-speed-dial>` — the Web Components implementation of the shared
+ * SpeedDial contract (see `@skdx/shared`'s `speedDialContract`): a floating
+ * action button that fans a short list of actions out along one axis. Owns
+ * open state, `direction`, and the optional hover path, and hands them down to
+ * `<skdx-speed-dial-trigger>` / `<skdx-speed-dial-content>` /
+ * `<skdx-speed-dial-item>` / `<skdx-speed-dial-item-label>`, which look it up
+ * via `closest('skdx-speed-dial')` and re-render on the
+ * `skdx-speed-dial-internal-update` event this element dispatches whenever a
+ * property changes — the same shared-state pattern `<skdx-popover>` and
+ * `<skdx-dropdown-menu>` use, since Web Components have no built-in context
+ * mechanism.
+ *
+ * It is a **menu**, not a new pattern: the trigger sets
+ * `aria-haspopup="menu"`, the content is `role="menu"`, each action is
+ * `role="menuitem"`, and the whole fan is one tab stop with arrow-key
+ * navigation and typeahead inside it. What makes it its own family is the
+ * geometry — `direction` decides which way the actions travel, and each item
+ * publishes its position so the stagger is pure CSS.
+ *
+ * Renders only a `<slot>`. `<skdx-speed-dial-content>` floats against the
+ * trigger via `positionFloating()` and needs no portal (`strategy: 'fixed'`
+ * isn't clipped by `overflow` ancestors) — the one shape difference from
+ * React/Vue/Svelte, which each render a `Portal` part.
+ *
+ * @example
+ * ```html
+ * <skdx-speed-dial direction="up">
+ *   <skdx-speed-dial-trigger aria-label="Quick actions">+</skdx-speed-dial-trigger>
+ *   <skdx-speed-dial-content>
+ *     <skdx-speed-dial-item>
+ *       <span aria-hidden="true">&#9998;</span>
+ *       <skdx-speed-dial-item-label>Edit</skdx-speed-dial-item-label>
+ *     </skdx-speed-dial-item>
+ *   </skdx-speed-dial-content>
+ * </skdx-speed-dial>
+ * ```
+ *
+ * @fires open-change - Fired with the new open state whenever the dial opens or closes, controlled or not.
+ * @fires open-change-complete - Fired with the new open state after `<skdx-speed-dial-content>`'s enter or exit animation has finished — as soon as the fan has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ */
+export declare class SkdxSpeedDial extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the actions are revealed. Listen for `open-change` to observe or
+     * override changes.
+     * @default false — the dial starts collapsed to just its trigger.
+     */
+    open: boolean;
+    /**
+     * Initial open state, for uncontrolled usage. Applied once, on connect, and
+     * only if `open` wasn't already set.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Which way the actions fan out from the trigger. Decides the side the
+     * content is positioned on, the axis the arrow keys walk, and the
+     * `data-direction` attribute the stagger CSS reads.
+     * @default 'up' — the usual bottom-right floating action button, whose actions can only go upward.
+     */
+    direction: SpeedDialDirection;
+    /**
+     * Also open on pointer-enter of the trigger, not only on click. The dial
+     * still opens on click and keyboard either way; this only adds the hover
+     * path, which touch pointers never take.
+     * @default false — hover reveals nothing, so a pointer merely crossing the button cannot fire actions by accident.
+     */
+    openOnHover: boolean;
+    /**
+     * Milliseconds the dial stays open after the pointer leaves the trigger or
+     * the content. The gap between the trigger and the first action is dead
+     * space the pointer has to cross, so closing on the first `pointerleave`
+     * would snap the fan shut mid-travel; re-entering either element within this
+     * window cancels the pending close. Only consulted when `open-on-hover` is
+     * set.
+     * @default 300 — long enough to cross a normal trigger-to-item gap, short enough not to feel stuck open.
+     */
+    hoverCloseDelay: number;
+    /**
+     * Blocks the dial from opening by any route — click, hover, or keyboard —
+     * and marks the trigger natively disabled.
+     * @default false
+     */
+    disabled: boolean;
+    readonly contentId: string;
+    /** @internal Set by `<skdx-speed-dial-trigger>` once its native button mounts. */
+    triggerEl: HTMLElement | null;
+    private closeTimer?;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * @internal One guard for every route into the open state — click, hover,
+     * arrow keys. Guarding each caller instead would leave whichever route is
+     * added next silently able to open a disabled dial. Any pending hover close
+     * is dropped either way, so a blocked open still cancels the countdown.
+     */
+    setOpen(next: boolean): void;
+    /** @internal Pointer entered the trigger or the content — cancels any pending hover close. */
+    cancelHoverClose(): void;
+    /**
+     * @internal Pointer left the trigger or the content — schedules the hover
+     * close. Closing is never blocked by `disabled`, so this bypasses
+     * {@link setOpen}'s guard the same way React's raw setter does.
+     */
+    scheduleHoverClose(): void;
+    /** @internal */
+    focusTrigger(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial': SkdxSpeedDial;
+    }
+}

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

@@ -0,0 +1,144 @@
+import { LitElement } from 'lit';
+import type { Side } from '../internal/positioning.js';
+/**
+ * Which way the actions fan out from the trigger. Physical, not logical: a
+ * speed dial is anchored to a corner of the viewport, and the corner does not
+ * move under `dir="rtl"` — only the arrow keys that walk the fan do, which
+ * `<skdx-speed-dial-content>` resolves for itself.
+ */
+export type SpeedDialDirection = 'up' | 'down' | 'left' | 'right';
+/**
+ * @internal Every action slot, disabled ones included. Used for the positional
+ * custom properties: a disabled action still occupies its place in the fan, so
+ * numbering around it would make the remaining actions jump.
+ */
+export declare const ANY_ITEM_SELECTOR = "[role=\"menuitem\"]";
+/** @internal Focusable, non-disabled actions — the set arrow keys and typeahead move between. */
+export declare const ITEM_SELECTOR = "[role=\"menuitem\"]:not([data-disabled])";
+/** @internal The popper side each fan direction positions its content on. */
+export declare const DIRECTION_SIDE: Record<SpeedDialDirection, Side>;
+/** @internal The axis the actions travel along, which is also the axis the arrow keys walk. */
+export declare const DIRECTION_ORIENTATION: {
+    readonly up: "vertical";
+    readonly down: "vertical";
+    readonly left: "horizontal";
+    readonly right: "horizontal";
+};
+/**
+ * `<skdx-speed-dial>` — the Web Components implementation of the shared
+ * SpeedDial contract (see `@skdx/shared`'s `speedDialContract`): a floating
+ * action button that fans a short list of actions out along one axis. Owns
+ * open state, `direction`, and the optional hover path, and hands them down to
+ * `<skdx-speed-dial-trigger>` / `<skdx-speed-dial-content>` /
+ * `<skdx-speed-dial-item>` / `<skdx-speed-dial-item-label>`, which look it up
+ * via `closest('skdx-speed-dial')` and re-render on the
+ * `skdx-speed-dial-internal-update` event this element dispatches whenever a
+ * property changes — the same shared-state pattern `<skdx-popover>` and
+ * `<skdx-dropdown-menu>` use, since Web Components have no built-in context
+ * mechanism.
+ *
+ * It is a **menu**, not a new pattern: the trigger sets
+ * `aria-haspopup="menu"`, the content is `role="menu"`, each action is
+ * `role="menuitem"`, and the whole fan is one tab stop with arrow-key
+ * navigation and typeahead inside it. What makes it its own family is the
+ * geometry — `direction` decides which way the actions travel, and each item
+ * publishes its position so the stagger is pure CSS.
+ *
+ * Renders only a `<slot>`. `<skdx-speed-dial-content>` floats against the
+ * trigger via `positionFloating()` and needs no portal (`strategy: 'fixed'`
+ * isn't clipped by `overflow` ancestors) — the one shape difference from
+ * React/Vue/Svelte, which each render a `Portal` part.
+ *
+ * @example
+ * ```html
+ * <skdx-speed-dial direction="up">
+ *   <skdx-speed-dial-trigger aria-label="Quick actions">+</skdx-speed-dial-trigger>
+ *   <skdx-speed-dial-content>
+ *     <skdx-speed-dial-item>
+ *       <span aria-hidden="true">&#9998;</span>
+ *       <skdx-speed-dial-item-label>Edit</skdx-speed-dial-item-label>
+ *     </skdx-speed-dial-item>
+ *   </skdx-speed-dial-content>
+ * </skdx-speed-dial>
+ * ```
+ *
+ * @fires open-change - Fired with the new open state whenever the dial opens or closes, controlled or not.
+ * @fires open-change-complete - Fired with the new open state after `<skdx-speed-dial-content>`'s enter or exit animation has finished — as soon as the fan has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ */
+export declare class SkdxSpeedDial extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the actions are revealed. Listen for `open-change` to observe or
+     * override changes.
+     * @default false — the dial starts collapsed to just its trigger.
+     */
+    open: boolean;
+    /**
+     * Initial open state, for uncontrolled usage. Applied once, on connect, and
+     * only if `open` wasn't already set.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Which way the actions fan out from the trigger. Decides the side the
+     * content is positioned on, the axis the arrow keys walk, and the
+     * `data-direction` attribute the stagger CSS reads.
+     * @default 'up' — the usual bottom-right floating action button, whose actions can only go upward.
+     */
+    direction: SpeedDialDirection;
+    /**
+     * Also open on pointer-enter of the trigger, not only on click. The dial
+     * still opens on click and keyboard either way; this only adds the hover
+     * path, which touch pointers never take.
+     * @default false — hover reveals nothing, so a pointer merely crossing the button cannot fire actions by accident.
+     */
+    openOnHover: boolean;
+    /**
+     * Milliseconds the dial stays open after the pointer leaves the trigger or
+     * the content. The gap between the trigger and the first action is dead
+     * space the pointer has to cross, so closing on the first `pointerleave`
+     * would snap the fan shut mid-travel; re-entering either element within this
+     * window cancels the pending close. Only consulted when `open-on-hover` is
+     * set.
+     * @default 300 — long enough to cross a normal trigger-to-item gap, short enough not to feel stuck open.
+     */
+    hoverCloseDelay: number;
+    /**
+     * Blocks the dial from opening by any route — click, hover, or keyboard —
+     * and marks the trigger natively disabled.
+     * @default false
+     */
+    disabled: boolean;
+    readonly contentId: string;
+    /** @internal Set by `<skdx-speed-dial-trigger>` once its native button mounts. */
+    triggerEl: HTMLElement | null;
+    private closeTimer?;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * @internal One guard for every route into the open state — click, hover,
+     * arrow keys. Guarding each caller instead would leave whichever route is
+     * added next silently able to open a disabled dial. Any pending hover close
+     * is dropped either way, so a blocked open still cancels the countdown.
+     */
+    setOpen(next: boolean): void;
+    /** @internal Pointer entered the trigger or the content — cancels any pending hover close. */
+    cancelHoverClose(): void;
+    /**
+     * @internal Pointer left the trigger or the content — schedules the hover
+     * close. Closing is never blocked by `disabled`, so this bypasses
+     * {@link setOpen}'s guard the same way React's raw setter does.
+     */
+    scheduleHoverClose(): void;
+    /** @internal */
+    focusTrigger(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial': SkdxSpeedDial;
+    }
+}

package/dist/speed-dial/SpeedDial.js

@@ -0,0 +1,5 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(l,s,e,r)=>{for(var o=r>1?void 0:r?c(s,e):s,a=l.length-1,p;a>=0;a--)(p=l[a])&&(o=(r?p(s,e,o):p(o))||o);return r&&o&&d(s,e,o),o};import{css as h,html as m,LitElement as u}from"lit";import{property as n}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{nextId as v}from"../internal/ids.js";import{notifyOpenChangeComplete as C}from"../internal/open-change-complete.js";import{hiddenHostStyles as T}from"../internal/styles.js";var N='[role="menuitem"]',R='[role="menuitem"]:not([data-disabled])',H={up:"top",down:"bottom",left:"left",right:"right"},M={up:"vertical",down:"vertical",left:"horizontal",right:"horizontal"},t=class extends u{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.direction="up";this.openOnHover=!1;this.hoverCloseDelay=300;this.disabled=!1;this.contentId=v("skdx-speed-dial-content");this.triggerEl=null;this.hasUpdatedOnce=!1}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0)}disconnectedCallback(){clearTimeout(this.closeTimer),this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.toggleAttribute("data-disabled",this.disabled),e.has("open")&&!r&&this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-speed-dial-internal-update")),e.has("open")&&!r&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=C(()=>this.querySelector("skdx-speed-dial-content"),this.open,o=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:o,bubbles:!0,composed:!0}))))}setOpen(e){clearTimeout(this.closeTimer),!(e&&this.disabled)&&this.open!==e&&(this.open=e)}cancelHoverClose(){clearTimeout(this.closeTimer)}scheduleHoverClose(){clearTimeout(this.closeTimer),this.closeTimer=setTimeout(()=>{this.open=!1},this.hoverCloseDelay)}focusTrigger(){this.triggerEl?.focus()}render(){return m`<slot></slot>`}};t.styles=[T,h`
+      :host {
+        display: contents;
+      }
+    `],i([n({type:Boolean,reflect:!0})],t.prototype,"open",2),i([n({type:Boolean,attribute:"default-open"})],t.prototype,"defaultOpen",2),i([n({type:String,reflect:!0})],t.prototype,"direction",2),i([n({type:Boolean,attribute:"open-on-hover"})],t.prototype,"openOnHover",2),i([n({type:Number,attribute:"hover-close-delay"})],t.prototype,"hoverCloseDelay",2),i([n({type:Boolean,reflect:!0})],t.prototype,"disabled",2),t=i([f("skdx-speed-dial")],t);export{N as ANY_ITEM_SELECTOR,M as DIRECTION_ORIENTATION,H as DIRECTION_SIDE,R as ITEM_SELECTOR,t as SkdxSpeedDial};

package/dist/speed-dial/SpeedDialContent.cjs

@@ -0,0 +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`
+      :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});

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

@@ -0,0 +1,137 @@
+import { LitElement } 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.
+ *
+ * `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.
+ */
+export declare class SkdxSpeedDialContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred alignment of the fan along the edge `direction` chose. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the first action and the trigger's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    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.
+     */
+    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.
+     */
+    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.
+     * @default true
+     */
+    loop: boolean;
+    private root;
+    private readonly onRootUpdate;
+    private cleanupPosition?;
+    private typeahead;
+    private typeaheadTimer?;
+    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.
+     */
+    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;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-content': SkdxSpeedDialContent;
+    }
+}

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

@@ -0,0 +1,137 @@
+import { LitElement } 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.
+ *
+ * `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.
+ */
+export declare class SkdxSpeedDialContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred alignment of the fan along the edge `direction` chose. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the first action and the trigger's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    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.
+     */
+    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.
+     */
+    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.
+     * @default true
+     */
+    loop: boolean;
+    private root;
+    private readonly onRootUpdate;
+    private cleanupPosition?;
+    private typeahead;
+    private typeaheadTimer?;
+    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.
+     */
+    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;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-content': SkdxSpeedDialContent;
+    }
+}

package/dist/speed-dial/SpeedDialContent.js

@@ -0,0 +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`
+      :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};

package/dist/speed-dial/SpeedDialItem.cjs

@@ -0,0 +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`
+      :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});