@skdx/web-components 0.26.0

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

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+/**
+ * `<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.
+ *
+ * @example
+ * ```html
+ * <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>
+ * ```
+ *
+ * @fires select - The action was activated (click, Enter, or Space). Preventable — 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.
+     * @default false
+     */
+    disabled: boolean;
+    /** @internal Ancestor dial, looked up so selection can close it and refocus the trigger. */
+    private root;
+    connectedCallback(): 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.
+     */
+    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>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-item': SkdxSpeedDialItem;
+    }
+}

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

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+/**
+ * `<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.
+ *
+ * @example
+ * ```html
+ * <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>
+ * ```
+ *
+ * @fires select - The action was activated (click, Enter, or Space). Preventable — 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.
+     * @default false
+     */
+    disabled: boolean;
+    /** @internal Ancestor dial, looked up so selection can close it and refocus the trigger. */
+    private root;
+    connectedCallback(): 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.
+     */
+    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>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-item': SkdxSpeedDialItem;
+    }
+}

package/dist/speed-dial/SpeedDialItem.js

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

package/dist/speed-dial/SpeedDialItemLabel.cjs

@@ -0,0 +1,5 @@
+"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`
+      :host {
+        display: inline-block;
+      }
+    `],d=c([(0,p.customElement)("skdx-speed-dial-item-label","speed-dial","item-label")],d);0&&(module.exports={SkdxSpeedDialItemLabel});

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

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-speed-dial-item-label>` — the visible text naming its
+ * `<skdx-speed-dial-item>`: the little caption that sits beside an icon-only
+ * action. It registers its `id` with the action, which points
+ * `aria-labelledby` at it, so the action is named by the very element the
+ * sighted user reads. Set `id` on the host to supply your own; one is
+ * generated otherwise.
+ *
+ * This exists as a real element on purpose. The obvious shortcut — a `title`
+ * attribute on the action — produces a tooltip that never appears for keyboard
+ * focus, cannot be styled or animated, is announced inconsistently across
+ * screen readers, and is invisible on touch entirely. A label you can see is a
+ * label you can also position, fade in on hover, and hand to
+ * `aria-labelledby`.
+ *
+ * Reveal it however you like; the action's own `:hover`/`:focus-within` is the
+ * usual hook, and nothing here hides it, so a dial that shows every label
+ * permanently needs no override:
+ *
+ * ```css
+ * .my-speed-dial-label {
+ *   opacity: 0;
+ *   transition: opacity 120ms;
+ * }
+ * .my-speed-dial-item:hover .my-speed-dial-label,
+ * .my-speed-dial-item:focus-within .my-speed-dial-label {
+ *   opacity: 1;
+ * }
+ * ```
+ *
+ * Keep it visible to assistive technology even while it is visually hidden —
+ * `opacity: 0` and `visibility: hidden` differ here, and `display: none` would
+ * drop the accessible name along with the text.
+ *
+ * @example
+ * ```html
+ * <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>
+ * ```
+ */
+export declare class SkdxSpeedDialItemLabel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private item;
+    connectedCallback(): void;
+    /**
+     * Clearing on disconnect is what keeps `aria-labelledby` from outliving the
+     * element it names and turning into a dangling reference.
+     */
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-item-label': SkdxSpeedDialItemLabel;
+    }
+}

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

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-speed-dial-item-label>` — the visible text naming its
+ * `<skdx-speed-dial-item>`: the little caption that sits beside an icon-only
+ * action. It registers its `id` with the action, which points
+ * `aria-labelledby` at it, so the action is named by the very element the
+ * sighted user reads. Set `id` on the host to supply your own; one is
+ * generated otherwise.
+ *
+ * This exists as a real element on purpose. The obvious shortcut — a `title`
+ * attribute on the action — produces a tooltip that never appears for keyboard
+ * focus, cannot be styled or animated, is announced inconsistently across
+ * screen readers, and is invisible on touch entirely. A label you can see is a
+ * label you can also position, fade in on hover, and hand to
+ * `aria-labelledby`.
+ *
+ * Reveal it however you like; the action's own `:hover`/`:focus-within` is the
+ * usual hook, and nothing here hides it, so a dial that shows every label
+ * permanently needs no override:
+ *
+ * ```css
+ * .my-speed-dial-label {
+ *   opacity: 0;
+ *   transition: opacity 120ms;
+ * }
+ * .my-speed-dial-item:hover .my-speed-dial-label,
+ * .my-speed-dial-item:focus-within .my-speed-dial-label {
+ *   opacity: 1;
+ * }
+ * ```
+ *
+ * Keep it visible to assistive technology even while it is visually hidden —
+ * `opacity: 0` and `visibility: hidden` differ here, and `display: none` would
+ * drop the accessible name along with the text.
+ *
+ * @example
+ * ```html
+ * <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>
+ * ```
+ */
+export declare class SkdxSpeedDialItemLabel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private item;
+    connectedCallback(): void;
+    /**
+     * Clearing on disconnect is what keeps `aria-labelledby` from outliving the
+     * element it names and turning into a dangling reference.
+     */
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-item-label': SkdxSpeedDialItemLabel;
+    }
+}

package/dist/speed-dial/SpeedDialItemLabel.js

@@ -0,0 +1,5 @@
+var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var a=(s,t,d,l)=>{for(var e=l>1?void 0:l?n(t,d):t,o=s.length-1,r;o>=0;o--)(r=s[o])&&(e=(l?r(t,d,e):r(e))||e);return l&&e&&m(t,d,e),e};import{css as c,html as p,LitElement as b}from"lit";import{customElement as h}from"../internal/define.js";import{ensureId as u}from"../internal/ids.js";import{hiddenHostStyles as k}from"../internal/styles.js";var i=class extends b{constructor(){super(...arguments);this.item=null}connectedCallback(){super.connectedCallback(),this.item=this.closest("skdx-speed-dial-item"),this.item?.setLabelId(u(this,"skdx-speed-dial","item-label"))}disconnectedCallback(){this.item?.setLabelId(void 0),this.item=null,super.disconnectedCallback()}render(){return p`<slot></slot>`}};i.styles=[k,c`
+      :host {
+        display: inline-block;
+      }
+    `],i=a([h("skdx-speed-dial-item-label","speed-dial","item-label")],i);export{i as SkdxSpeedDialItemLabel};

package/dist/speed-dial/SpeedDialPortal.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var g=(a,e)=>{for(var m in e)s(a,m,{get:e[m],enumerable:!0})},E=(a,e,m,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of i(e))!x.call(a,t)&&t!==m&&s(a,t,{get:()=>e[t],enumerable:!(o=d(e,t))||o.enumerable});return a};var M=a=>E(s({},"__esModule",{value:!0}),a),c=(a,e,m,o)=>{for(var t=o>1?void 0:o?d(e,m):e,l=a.length-1,p;l>=0;l--)(p=a[l])&&(t=(o?p(e,m,t):p(t))||t);return o&&t&&s(e,m,t),t};var T={};g(T,{SkdxSpeedDialPortal:()=>r});module.exports=M(T);var n=require("../internal/define.cjs"),f=require("../utils/portal.cjs");var r=class extends f.SkdxPortal{};r=c([(0,n.customElement)("skdx-speed-dial-portal")],r);0&&(module.exports={SkdxSpeedDialPortal});

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

@@ -0,0 +1,36 @@
+import { SkdxPortal } from '../utils/portal.cjs';
+/**
+ * `<skdx-speed-dial-portal>` — teleports `<skdx-speed-dial-content>` to
+ * `document.body` (or a custom `container`), so the fan escapes any clipping
+ * or `overflow` ancestor — which a dial pinned to the corner of a scrolling
+ * pane will otherwise hit immediately.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` — so removing the family
+ * root removes the portalled content with it, and the parts inside still
+ * resolve that root through `closestThroughPortal()`.
+ *
+ * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
+ * `SpeedDialPortal` it takes no `force-mount` and does not unmount on close: the
+ * parts here never unmount, they hide via `hidden`, so there is nothing to
+ * force and nothing to keep alive for an exit animation.
+ *
+ * @example
+ * ```html
+ * <skdx-speed-dial>
+ *   <skdx-speed-dial-trigger aria-label="Actions">+</skdx-speed-dial-trigger>
+ *   <skdx-speed-dial-portal>
+ *     <skdx-speed-dial-content>
+ *       <skdx-speed-dial-item>Share</skdx-speed-dial-item>
+ *     </skdx-speed-dial-content>
+ *   </skdx-speed-dial-portal>
+ * </skdx-speed-dial>
+ * ```
+ */
+export declare class SkdxSpeedDialPortal extends SkdxPortal {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-portal': SkdxSpeedDialPortal;
+    }
+}

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

@@ -0,0 +1,36 @@
+import { SkdxPortal } from '../utils/portal.js';
+/**
+ * `<skdx-speed-dial-portal>` — teleports `<skdx-speed-dial-content>` to
+ * `document.body` (or a custom `container`), so the fan escapes any clipping
+ * or `overflow` ancestor — which a dial pinned to the corner of a scrolling
+ * pane will otherwise hit immediately.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` — so removing the family
+ * root removes the portalled content with it, and the parts inside still
+ * resolve that root through `closestThroughPortal()`.
+ *
+ * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
+ * `SpeedDialPortal` it takes no `force-mount` and does not unmount on close: the
+ * parts here never unmount, they hide via `hidden`, so there is nothing to
+ * force and nothing to keep alive for an exit animation.
+ *
+ * @example
+ * ```html
+ * <skdx-speed-dial>
+ *   <skdx-speed-dial-trigger aria-label="Actions">+</skdx-speed-dial-trigger>
+ *   <skdx-speed-dial-portal>
+ *     <skdx-speed-dial-content>
+ *       <skdx-speed-dial-item>Share</skdx-speed-dial-item>
+ *     </skdx-speed-dial-content>
+ *   </skdx-speed-dial-portal>
+ * </skdx-speed-dial>
+ * ```
+ */
+export declare class SkdxSpeedDialPortal extends SkdxPortal {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-portal': SkdxSpeedDialPortal;
+    }
+}

package/dist/speed-dial/SpeedDialPortal.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var p=(o,t,r,a)=>{for(var e=a>1?void 0:a?c(t,r):t,s=o.length-1,l;s>=0;s--)(l=o[s])&&(e=(a?l(t,r,e):l(e))||e);return a&&e&&d(t,r,e),e};import{customElement as n}from"../internal/define.js";import{SkdxPortal as f}from"../utils/portal.js";var m=class extends f{};m=p([n("skdx-speed-dial-portal")],m);export{m as SkdxSpeedDialPortal};

package/dist/speed-dial/SpeedDialTrigger.cjs

@@ -0,0 +1,23 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var y=(r,t)=>{for(var e in t)d(r,e,{get:t[e],enumerable:!0})},w=(r,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of f(t))!m.call(r,o)&&o!==e&&d(r,o,{get:()=>t[o],enumerable:!(i=c(t,o))||i.enumerable});return r};var E=r=>w(d({},"__esModule",{value:!0}),r),h=(r,t,e,i)=>{for(var o=i>1?void 0:i?c(t,e):t,l=r.length-1,p;l>=0;l--)(p=r[l])&&(o=(i?p(t,e,o):p(o))||o);return i&&o&&d(t,e,o),o};var D={};y(D,{SkdxSpeedDialTrigger:()=>s});module.exports=E(D);var n=require("lit"),u=require("lit/decorators.js"),v=require("../internal/define.cjs"),b=require("../internal/part.cjs"),a=require("../internal/styles.cjs");var k={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},s=class extends n.LitElement{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!this.root.open);this.handleKeyDown=e=>{this.root&&k[this.root.direction].includes(e.key)&&(e.preventDefault(),this.root.setOpen(!0))};this.handlePointerEnter=e=>{!this.root?.openOnHover||e.pointerType==="touch"||(this.root.cancelHoverClose(),this.root.setOpen(!0))};this.handlePointerLeave=e=>{!this.root?.openOnHover||e.pointerType==="touch"||this.root.scheduleHoverClose()}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-speed-dial"),this.root?.addEventListener("skdx-speed-dial-internal-update",this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-speed-dial-internal-update",this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let e=this.shadowRoot?.querySelector("button");this.root&&e&&(this.root.triggerEl=e)}get isDisabled(){return(this.root?.disabled??!1)||this.disabled}updated(){(0,b.reflectHostState)(this,{"data-disabled":this.isDisabled?"":null})}render(){let e=this.root;if(!e)return n.nothing;let i=this.isDisabled;return n.html`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded=${e.open}
+        aria-controls=${e.contentId}
+        data-state=${e.open?"open":"closed"}
+        data-direction=${e.direction}
+        data-disabled=${i?"":n.nothing}
+        ?disabled=${i}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @pointerenter=${this.handlePointerEnter}
+        @pointerleave=${this.handlePointerLeave}
+      >
+        <slot></slot>
+      </button>
+    `}};s.shadowRootOptions=a.delegatesFocusShadowRootOptions,s.styles=[a.resetNativeControl,n.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],h([(0,u.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),s=h([(0,v.customElement)("skdx-speed-dial-trigger","speed-dial","trigger")],s);0&&(module.exports={SkdxSpeedDialTrigger});

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

@@ -0,0 +1,51 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-speed-dial-trigger>` — the floating action button: toggles the fan on
+ * click, opens it with the arrow keys along the fan's axis, and doubles as the
+ * positioning anchor for `<skdx-speed-dial-content>`. Renders
+ * `<button type="button">` in shadow DOM with `aria-haspopup="menu"`,
+ * `aria-expanded`, `aria-controls`, `data-state` (`open`/`closed`) and
+ * `data-direction`, the last so the icon can rotate from CSS alone.
+ *
+ * With `open-on-hover` on the root it also opens on pointer-enter (never for
+ * touch pointers, which have no hover) and starts the close countdown on
+ * pointer-leave.
+ *
+ * Give it an accessible name. A speed dial trigger is usually a bare `+`
+ * glyph, which tells a screen-reader user nothing about what it opens.
+ *
+ * @example
+ * ```html
+ * <skdx-speed-dial-trigger aria-label="Quick actions">+</skdx-speed-dial-trigger>
+ * ```
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxSpeedDialTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Disables this trigger on its own, independently of the root's `disabled`.
+     * Either one disables the button.
+     * @default false
+     */
+    disabled: boolean;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    /** Either flag disables the button — the root's, or this trigger's own. */
+    private get isDisabled();
+    private readonly handleClick;
+    private readonly handleKeyDown;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-trigger': SkdxSpeedDialTrigger;
+    }
+}

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

@@ -0,0 +1,51 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-speed-dial-trigger>` — the floating action button: toggles the fan on
+ * click, opens it with the arrow keys along the fan's axis, and doubles as the
+ * positioning anchor for `<skdx-speed-dial-content>`. Renders
+ * `<button type="button">` in shadow DOM with `aria-haspopup="menu"`,
+ * `aria-expanded`, `aria-controls`, `data-state` (`open`/`closed`) and
+ * `data-direction`, the last so the icon can rotate from CSS alone.
+ *
+ * With `open-on-hover` on the root it also opens on pointer-enter (never for
+ * touch pointers, which have no hover) and starts the close countdown on
+ * pointer-leave.
+ *
+ * Give it an accessible name. A speed dial trigger is usually a bare `+`
+ * glyph, which tells a screen-reader user nothing about what it opens.
+ *
+ * @example
+ * ```html
+ * <skdx-speed-dial-trigger aria-label="Quick actions">+</skdx-speed-dial-trigger>
+ * ```
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxSpeedDialTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Disables this trigger on its own, independently of the root's `disabled`.
+     * Either one disables the button.
+     * @default false
+     */
+    disabled: boolean;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    /** Either flag disables the button — the root's, or this trigger's own. */
+    private get isDisabled();
+    private readonly handleClick;
+    private readonly handleKeyDown;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-speed-dial-trigger': SkdxSpeedDialTrigger;
+    }
+}

package/dist/speed-dial/SpeedDialTrigger.js

@@ -0,0 +1,23 @@
+var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(n,i,e,t)=>{for(var o=t>1?void 0:t?h(i,e):i,s=n.length-1,a;s>=0;s--)(a=n[s])&&(o=(t?a(i,e,o):a(o))||o);return t&&o&&p(i,e,o),o};import{css as c,html as u,LitElement as v,nothing as l}from"lit";import{property as b}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{reflectHostState as m}from"../internal/part.js";import{controlBoxOnHost as y,delegatesFocusShadowRootOptions as w,resetNativeControl as E}from"../internal/styles.js";var k={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},r=class extends v{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!this.root.open);this.handleKeyDown=e=>{this.root&&k[this.root.direction].includes(e.key)&&(e.preventDefault(),this.root.setOpen(!0))};this.handlePointerEnter=e=>{!this.root?.openOnHover||e.pointerType==="touch"||(this.root.cancelHoverClose(),this.root.setOpen(!0))};this.handlePointerLeave=e=>{!this.root?.openOnHover||e.pointerType==="touch"||this.root.scheduleHoverClose()}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-speed-dial"),this.root?.addEventListener("skdx-speed-dial-internal-update",this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-speed-dial-internal-update",this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let e=this.shadowRoot?.querySelector("button");this.root&&e&&(this.root.triggerEl=e)}get isDisabled(){return(this.root?.disabled??!1)||this.disabled}updated(){m(this,{"data-disabled":this.isDisabled?"":null})}render(){let e=this.root;if(!e)return l;let t=this.isDisabled;return u`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded=${e.open}
+        aria-controls=${e.contentId}
+        data-state=${e.open?"open":"closed"}
+        data-direction=${e.direction}
+        data-disabled=${t?"":l}
+        ?disabled=${t}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @pointerenter=${this.handlePointerEnter}
+        @pointerleave=${this.handlePointerLeave}
+      >
+        <slot></slot>
+      </button>
+    `}};r.shadowRootOptions=w,r.styles=[E,c`
+      :host {
+        display: inline-block;
+      }
+    `,y],d([b({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=d([f("skdx-speed-dial-trigger","speed-dial","trigger")],r);export{r as SkdxSpeedDialTrigger};

package/dist/speed-dial/index.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var n=(r,e)=>{for(var p in e)d(r,p,{get:e[p],enumerable:!0})},g=(r,e,p,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of f(e))!k.call(r,o)&&o!==p&&d(r,o,{get:()=>e[o],enumerable:!(t=D(e,o))||t.enumerable});return r};var I=r=>g(d({},"__esModule",{value:!0}),r);var b={};n(b,{SkdxSpeedDial:()=>S.SkdxSpeedDial,SkdxSpeedDialContent:()=>a.SkdxSpeedDialContent,SkdxSpeedDialItem:()=>l.SkdxSpeedDialItem,SkdxSpeedDialItemLabel:()=>m.SkdxSpeedDialItemLabel,SkdxSpeedDialPortal:()=>i.SkdxSpeedDialPortal,SkdxSpeedDialTrigger:()=>x.SkdxSpeedDialTrigger});module.exports=I(b);var S=require("./SpeedDial.cjs"),x=require("./SpeedDialTrigger.cjs"),i=require("./SpeedDialPortal.cjs"),a=require("./SpeedDialContent.cjs"),l=require("./SpeedDialItem.cjs"),m=require("./SpeedDialItemLabel.cjs");0&&(module.exports={SkdxSpeedDial,SkdxSpeedDialContent,SkdxSpeedDialItem,SkdxSpeedDialItemLabel,SkdxSpeedDialPortal,SkdxSpeedDialTrigger});

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

@@ -0,0 +1,6 @@
+export { SkdxSpeedDial, type SpeedDialDirection } from './SpeedDial.cjs';
+export { SkdxSpeedDialTrigger } from './SpeedDialTrigger.cjs';
+export { SkdxSpeedDialPortal } from './SpeedDialPortal.cjs';
+export { SkdxSpeedDialContent } from './SpeedDialContent.cjs';
+export { SkdxSpeedDialItem } from './SpeedDialItem.cjs';
+export { SkdxSpeedDialItemLabel } from './SpeedDialItemLabel.cjs';

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

@@ -0,0 +1,6 @@
+export { SkdxSpeedDial, type SpeedDialDirection } from './SpeedDial.js';
+export { SkdxSpeedDialTrigger } from './SpeedDialTrigger.js';
+export { SkdxSpeedDialPortal } from './SpeedDialPortal.js';
+export { SkdxSpeedDialContent } from './SpeedDialContent.js';
+export { SkdxSpeedDialItem } from './SpeedDialItem.js';
+export { SkdxSpeedDialItemLabel } from './SpeedDialItemLabel.js';

package/dist/speed-dial/index.js

@@ -0,0 +1 @@
+import{SkdxSpeedDial as o}from"./SpeedDial.js";import{SkdxSpeedDialTrigger as d}from"./SpeedDialTrigger.js";import{SkdxSpeedDialPortal as S}from"./SpeedDialPortal.js";import{SkdxSpeedDialContent as i}from"./SpeedDialContent.js";import{SkdxSpeedDialItem as l}from"./SpeedDialItem.js";import{SkdxSpeedDialItemLabel as D}from"./SpeedDialItemLabel.js";export{o as SkdxSpeedDial,i as SkdxSpeedDialContent,l as SkdxSpeedDialItem,D as SkdxSpeedDialItemLabel,S as SkdxSpeedDialPortal,d as SkdxSpeedDialTrigger};

package/dist/spinner/Spinner.cjs

@@ -0,0 +1,5 @@
+"use strict";var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var v=(r,e)=>{for(var s in e)o(r,s,{get:e[s],enumerable:!0})},y=(r,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!u.call(r,t)&&t!==s&&o(r,t,{get:()=>e[t],enumerable:!(i=d(e,t))||i.enumerable});return r};var L=r=>y(o({},"__esModule",{value:!0}),r),p=(r,e,s,i)=>{for(var t=i>1?void 0:i?d(e,s):e,n=r.length-1,c;n>=0;n--)(c=r[n])&&(t=(i?c(e,s,t):c(t))||t);return i&&t&&o(e,s,t),t};var f={};v(f,{SkdxSpinner:()=>l});module.exports=L(f);var a=require("lit"),b=require("lit/decorators.js"),m=require("../internal/define.cjs");var l=class extends a.LitElement{constructor(){super(...arguments);this.label="Loading"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.syncLabel()}updated(s){s.has("label")&&this.syncLabel()}syncLabel(){this.setAttribute("aria-label",this.label)}render(){return a.html`<slot part="spinner"></slot>`}};l.styles=a.css`
+    :host {
+      display: inline-block;
+    }
+  `,p([(0,b.property)({type:String})],l.prototype,"label",2),l=p([(0,m.customElement)("skdx-spinner","spinner","root")],l);0&&(module.exports={SkdxSpinner});

package/dist/spinner/Spinner.d.cts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-spinner>` — the Web Components implementation of the shared Spinner
+ * contract (see `@skdx/shared`'s `spinnerContract`). A headless loading
+ * indicator: `role="status"`, `aria-live="polite"`, `aria-label` set to
+ * `label`. Renders slotted content if given (a custom spinner graphic);
+ * otherwise renders nothing extra and relies on the brand layer to draw the
+ * spinner via CSS (e.g. an `::after` animation on `::part(spinner)`).
+ *
+ * @example
+ * ```html
+ * <skdx-spinner label="Loading results"></skdx-spinner>
+ * ```
+ *
+ * @csspart spinner - The host's shadow-root wrapper.
+ */
+export declare class SkdxSpinner extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Accessible label announced by screen readers while loading. @default 'Loading' */
+    label: string;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncLabel;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-spinner': SkdxSpinner;
+    }
+}

package/dist/spinner/Spinner.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-spinner>` — the Web Components implementation of the shared Spinner
+ * contract (see `@skdx/shared`'s `spinnerContract`). A headless loading
+ * indicator: `role="status"`, `aria-live="polite"`, `aria-label` set to
+ * `label`. Renders slotted content if given (a custom spinner graphic);
+ * otherwise renders nothing extra and relies on the brand layer to draw the
+ * spinner via CSS (e.g. an `::after` animation on `::part(spinner)`).
+ *
+ * @example
+ * ```html
+ * <skdx-spinner label="Loading results"></skdx-spinner>
+ * ```
+ *
+ * @csspart spinner - The host's shadow-root wrapper.
+ */
+export declare class SkdxSpinner extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Accessible label announced by screen readers while loading. @default 'Loading' */
+    label: string;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncLabel;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-spinner': SkdxSpinner;
+    }
+}

package/dist/spinner/Spinner.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(l,r,s,i)=>{for(var e=i>1?void 0:i?p(r,s):r,a=l.length-1,o;a>=0;a--)(o=l[a])&&(e=(i?o(r,s,e):o(e))||e);return i&&e&&c(r,s,e),e};import{css as d,html as b,LitElement as m}from"lit";import{property as h}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";var t=class extends m{constructor(){super(...arguments);this.label="Loading"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.syncLabel()}updated(s){s.has("label")&&this.syncLabel()}syncLabel(){this.setAttribute("aria-label",this.label)}render(){return b`<slot part="spinner"></slot>`}};t.styles=d`
+    :host {
+      display: inline-block;
+    }
+  `,n([h({type:String})],t.prototype,"label",2),t=n([u("skdx-spinner","spinner","root")],t);export{t as SkdxSpinner};

package/dist/spinner/index.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var k=(e,r)=>{for(var o in r)p(e,o,{get:r[o],enumerable:!0})},m=(e,r,o,x)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of f(r))!i.call(e,n)&&n!==o&&p(e,n,{get:()=>r[n],enumerable:!(x=d(r,n))||x.enumerable});return e};var t=e=>m(p({},"__esModule",{value:!0}),e);var a={};k(a,{SkdxSpinner:()=>S.SkdxSpinner});module.exports=t(a);var S=require("./Spinner.cjs");0&&(module.exports={SkdxSpinner});

package/dist/spinner/index.d.cts

@@ -0,0 +1 @@
+export { SkdxSpinner } from './Spinner.cjs';