@skdx/web-components 0.28.0 → 0.30.0

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

@@ -1,27 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import type { SpeedDialSelectDetail } from './SpeedDial.js';
 /**
- * One action in the fan: `role="menuitem"`, part of the content's single tab
- * stop. Activated by click/Enter/Space, fires cancelable `select` event and
- * closes the dial, returning focus to the trigger (unless `event.preventDefault()`).
- * Set `disabled` to exclude from navigation/selection while keeping its fan
- * slot so actions don't shuffle.
- *
- * Carries CSS variables set by `<skdx-speed-dial-content>`:
- * `--skdx-speed-dial-index` (0-based) and `--skdx-speed-dial-offset` (from 1).
- *
- * ```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));
- * }
- * ```
- *
- * Gets accessible name from `<skdx-speed-dial-item-label>` child via
- * `aria-labelledby`, so icon-only actions are still named.
+ * One action in the fan, rendering `role="menuitem"` and firing a cancelable `select` event on activation.
  *
  * @example
  * ```html
@@ -31,42 +11,35 @@ import type { SpeedDialSelectDetail } from './SpeedDial.js';
  * </skdx-speed-dial-item>
  * ```
  *
- * @fires select - The action was activated (click/Enter/Space). Preventable;
- * prevents the dial from closing. Detail is the action entry and index (or
- * `null` for hand-composed items).
+ * @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;
-    /** @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. Its `onSelect` runs first; `select` carries it as detail
-     * (one event, avoiding DropdownMenu's ambiguity). Hand-composed Item has none;
-     * `select` carries `null`.
+     * 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 registered label, removing it
-     * when the label leaves. Set (not generated) because dangling IDREFs are
-     * a11y violations; actions may be labelled by their 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=(l,s,e,a)=>{for(var t=a>1?void 0:a?h(s,e):s,r=l.length-1,d;r>=0;r--)(d=l[r])&&(t=(a?d(s,e,t):d(t))||t);return a&&t&&o(s,e,t),t};import{css as c,html as u,LitElement as b}from"lit";import{property as p}from"lit/decorators.js";import{closestThroughPortal as v}from"../internal/closest.js";import{customElement as m}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";var i=class extends b{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.handleActivate=()=>{if(this.disabled)return;this.selectDetail?.action.onSelect?.();let e=new CustomEvent("select",{detail:this.selectDetail??null,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=v(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("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>`}};i.styles=[f,c`
+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([p({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;
       }

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

@@ -1,9 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-speed-dial-item-label>` — the caption for an icon-only action.
- * Registers its `id` with the action for `aria-labelledby`. Visible to
- * assistive technology even when visually hidden (use `opacity: 0`, not
- * `display: none`).
+ * `<skdx-speed-dial-item-label>` is the caption for an icon-only action, registering its `id` with the action for `aria-labelledby`.
  *
  * @example
  * ```html
@@ -18,7 +15,7 @@ export declare class SkdxSpeedDialItemLabel extends LitElement {
     private item;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,9 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-speed-dial-item-label>` — the caption for an icon-only action.
- * Registers its `id` with the action for `aria-labelledby`. Visible to
- * assistive technology even when visually hidden (use `opacity: 0`, not
- * `display: none`).
+ * `<skdx-speed-dial-item-label>` is the caption for an icon-only action, registering its `id` with the action for `aria-labelledby`.
  *
  * @example
  * ```html
@@ -18,7 +15,7 @@ export declare class SkdxSpeedDialItemLabel extends LitElement {
     private item;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/speed-dial/SpeedDialItemLabel.js

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

package/dist/speed-dial/SpeedDialOverlay.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var k=(s,e)=>{for(var o in e)d(s,o,{get:e[o],enumerable:!0})},y=(s,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of b(e))!u.call(s,t)&&t!==o&&d(s,t,{get:()=>e[t],enumerable:!(i=c(e,t))||i.enumerable});return s};var E=s=>y(d({},"__esModule",{value:!0}),s),p=(s,e,o,i)=>{for(var t=i>1?void 0:i?c(e,o):e,a=s.length-1,n;a>=0;a--)(n=s[a])&&(t=(i?n(e,o,t):n(t))||t);return i&&t&&d(e,o,t),t};var f={};k(f,{SkdxSpeedDialOverlay:()=>r});module.exports=E(f);var l=require("lit"),h=require("../internal/closest.cjs"),m=require("../internal/define.cjs"),v=require("../internal/styles.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.dialEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.dialEl=(0,h.closestThroughPortal)(this,"skdx-speed-dial"),!this.dialEl)throw new Error("<skdx-speed-dial-overlay> must be used inside <skdx-speed-dial>.");this.observer.observe(this.dialEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let o=this.dialEl?.open??!1;this.setAttribute("data-state",o?"open":"closed"),this.hidden=!o}render(){return l.html`<slot></slot>`}};r.styles=[l.css`
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var y=(s,e)=>{for(var o in e)d(s,o,{get:e[o],enumerable:!0})},f=(s,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!E.call(s,t)&&t!==o&&d(s,t,{get:()=>e[t],enumerable:!(i=c(e,t))||i.enumerable});return s};var k=s=>f(d({},"__esModule",{value:!0}),s),p=(s,e,o,i)=>{for(var t=i>1?void 0:i?c(e,o):e,a=s.length-1,n;a>=0;a--)(n=s[a])&&(t=(i?n(e,o,t):n(t))||t);return i&&t&&d(e,o,t),t};var x={};y(x,{SkdxSpeedDialOverlay:()=>l});module.exports=k(x);var r=require("lit"),m=require("../internal/closest.cjs"),h=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),b=require("./family.cjs");var l=class extends r.LitElement{constructor(){super(...arguments);this.dialEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.dialEl=(0,m.closestThroughPortal)(this,b.SPEED_DIAL_FAMILY.selector),!this.dialEl)throw new Error("<skdx-speed-dial-overlay> must be used inside <skdx-speed-dial>.");this.observer.observe(this.dialEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let o=this.dialEl?.open??!1;this.setAttribute("data-state",o?"open":"closed"),this.hidden=!o}render(){return r.html`<slot></slot>`}};l.styles=[r.css`
       :host {
         display: block;
       }
-    `,v.hiddenHostStyles],r=p([(0,m.customElement)("skdx-speed-dial-overlay","speed-dial","overlay")],r);0&&(module.exports={SkdxSpeedDialOverlay});
+    `,v.hiddenHostStyles],l=p([(0,h.customElement)("skdx-speed-dial-overlay","speed-dial","overlay")],l);0&&(module.exports={SkdxSpeedDialOverlay});

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

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Optional scrim behind `<skdx-speed-dial-content>` dimming content. Opt-in by composition; omit for none. Doesn't trap focus or disable page. Sets `data-state` and `hidden` on host for positioning.
+ * Optional scrim behind `<skdx-speed-dial-content>`, opt-in by composition; does not trap focus or disable the page.
  *
  * @example
  * ```html
@@ -20,7 +20,7 @@ export declare class SkdxSpeedDialOverlay extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private syncHostState;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Optional scrim behind `<skdx-speed-dial-content>` dimming content. Opt-in by composition; omit for none. Doesn't trap focus or disable page. Sets `data-state` and `hidden` on host for positioning.
+ * Optional scrim behind `<skdx-speed-dial-content>`, opt-in by composition; does not trap focus or disable the page.
  *
  * @example
  * ```html
@@ -20,7 +20,7 @@ export declare class SkdxSpeedDialOverlay extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private syncHostState;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/speed-dial/SpeedDialOverlay.js

@@ -1,4 +1,4 @@
-var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(r,s,t,i)=>{for(var e=i>1?void 0:i?c(s,t):s,l=r.length-1,d;l>=0;l--)(d=r[l])&&(e=(i?d(s,t,e):d(e))||e);return i&&e&&n(s,t,e),e};import{css as p,html as h,LitElement as m}from"lit";import{closestThroughPortal as v}from"../internal/closest.js";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";var o=class extends m{constructor(){super(...arguments);this.dialEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.dialEl=v(this,"skdx-speed-dial"),!this.dialEl)throw new Error("<skdx-speed-dial-overlay> must be used inside <skdx-speed-dial>.");this.observer.observe(this.dialEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let t=this.dialEl?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.hidden=!t}render(){return h`<slot></slot>`}};o.styles=[p`
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(l,s,t,i)=>{for(var e=i>1?void 0:i?c(s,t):s,r=l.length-1,d;r>=0;r--)(d=l[r])&&(e=(i?d(s,t,e):d(e))||e);return i&&e&&n(s,t,e),e};import{css as p,html as m,LitElement as h}from"lit";import{closestThroughPortal as v}from"../internal/closest.js";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";import{SPEED_DIAL_FAMILY as E}from"./family.js";var o=class extends h{constructor(){super(...arguments);this.dialEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.dialEl=v(this,E.selector),!this.dialEl)throw new Error("<skdx-speed-dial-overlay> must be used inside <skdx-speed-dial>.");this.observer.observe(this.dialEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let t=this.dialEl?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.hidden=!t}render(){return m`<slot></slot>`}};o.styles=[p`
       :host {
         display: block;
       }

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

@@ -1,12 +1,6 @@
 import { SkdxPortal } from '../utils/portal.cjs';
 /**
- * `<skdx-speed-dial-portal>` — teleports `<skdx-speed-dial-content>` to
- * `document.body` (or a custom `container`), escaping any clipping or `overflow`
- * ancestors that would clip a dial in a corner.
- *
- * The host stays in place; children move into a `<div data-skdx-portal>`. Removing
- * the root removes portalled content with it. Never unmounts; parts hide via
- * `hidden`, so `force-mount` is a no-op.
+ * `<skdx-speed-dial-portal>` teleports `<skdx-speed-dial-content>` to `document.body` (or a custom `container`), escaping clipping ancestors.
  *
  * @example
  * ```html

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

@@ -1,12 +1,6 @@
 import { SkdxPortal } from '../utils/portal.js';
 /**
- * `<skdx-speed-dial-portal>` — teleports `<skdx-speed-dial-content>` to
- * `document.body` (or a custom `container`), escaping any clipping or `overflow`
- * ancestors that would clip a dial in a corner.
- *
- * The host stays in place; children move into a `<div data-skdx-portal>`. Removing
- * the root removes portalled content with it. Never unmounts; parts hide via
- * `hidden`, so `force-mount` is a no-op.
+ * `<skdx-speed-dial-portal>` teleports `<skdx-speed-dial-content>` to `document.body` (or a custom `container`), escaping clipping ancestors.
  *
  * @example
  * ```html

package/dist/speed-dial/SpeedDialTrigger.cjs

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

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

@@ -1,6 +1,6 @@
-import { LitElement, nothing } from 'lit';
+import { LitElement, nothing, type TemplateResult } from 'lit';
 /**
- * `<skdx-speed-dial-trigger>` — the floating action button: toggles the fan on click, opens it with arrow keys along the fan's axis. Positions `<skdx-speed-dial-content>`. Renders `<button>` in shadow DOM with `aria-haspopup="menu"`, `aria-expanded`, `aria-controls`, `data-state`, and `data-direction`. With `open-on-hover` on the root, also opens on pointer-enter (not touch) and closes on pointer-leave. Requires `aria-label` (usually icon-only).
+ * `<skdx-speed-dial-trigger>` is the floating action button, toggling the fan on click or opening it with arrow keys along the fan's axis.
  *
  * @example
  * ```html
@@ -13,24 +13,27 @@ 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.
+     * Disables this trigger on its own, independently of the root's `disabled`; either one disables the button.
      * @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;
     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;
+    render(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,6 +1,6 @@
-import { LitElement, nothing } from 'lit';
+import { LitElement, nothing, type TemplateResult } from 'lit';
 /**
- * `<skdx-speed-dial-trigger>` — the floating action button: toggles the fan on click, opens it with arrow keys along the fan's axis. Positions `<skdx-speed-dial-content>`. Renders `<button>` in shadow DOM with `aria-haspopup="menu"`, `aria-expanded`, `aria-controls`, `data-state`, and `data-direction`. With `open-on-hover` on the root, also opens on pointer-enter (not touch) and closes on pointer-leave. Requires `aria-label` (usually icon-only).
+ * `<skdx-speed-dial-trigger>` is the floating action button, toggling the fan on click or opening it with arrow keys along the fan's axis.
  *
  * @example
  * ```html
@@ -13,24 +13,27 @@ 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.
+     * Disables this trigger on its own, independently of the root's `disabled`; either one disables the button.
      * @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;
     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;
+    render(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/speed-dial/SpeedDialTrigger.js

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

package/dist/speed-dial/family.cjs

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

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

@@ -0,0 +1,3 @@
+import type { SkdxSpeedDial } from './SpeedDial.cjs';
+/** @internal The broadcast every `<skdx-speed-dial-*>` part re-renders on, and the lookup that finds their root. */
+export declare const SPEED_DIAL_FAMILY: import("../internal/family.cjs").SkdxFamily<SkdxSpeedDial>;

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

@@ -0,0 +1,3 @@
+import type { SkdxSpeedDial } from './SpeedDial.js';
+/** @internal The broadcast every `<skdx-speed-dial-*>` part re-renders on, and the lookup that finds their root. */
+export declare const SPEED_DIAL_FAMILY: import("../internal/family.js").SkdxFamily<SkdxSpeedDial>;

package/dist/speed-dial/family.js

@@ -0,0 +1 @@
+import{defineFamily as e}from"../internal/family.js";var i=e("speed-dial",{selector:"skdx-speed-dial"});export{i as SPEED_DIAL_FAMILY};

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

@@ -1,9 +1,5 @@
 /**
  * Advanced primitives for `<skdx-speed-dial>` — the parts the recipe derives.
- * Author any of these as a direct child and the recipe derives nothing — hand
- * composition is the escape hatch (a custom element's tag is global, so
- * `<skdx-speed-dial>` cannot be a second root). Give none and `slot="trigger"`,
- * `actions` and `overlay` draw the whole anatomy.
  *
  * @example
  * ```ts

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

@@ -1,9 +1,5 @@
 /**
  * Advanced primitives for `<skdx-speed-dial>` — the parts the recipe derives.
- * Author any of these as a direct child and the recipe derives nothing — hand
- * composition is the escape hatch (a custom element's tag is global, so
- * `<skdx-speed-dial>` cannot be a second root). Give none and `slot="trigger"`,
- * `actions` and `overlay` draw the whole anatomy.
  *
  * @example
  * ```ts

package/dist/spinner/Spinner.cjs

@@ -1,11 +1,11 @@
-"use strict";var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var v=(a,e)=>{for(var l in e)o(a,l,{get:e[l],enumerable:!0})},y=(a,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!u.call(a,t)&&t!==l&&o(a,t,{get:()=>e[t],enumerable:!(i=d(e,t))||i.enumerable});return a};var f=a=>y(o({},"__esModule",{value:!0}),a),b=(a,e,l,i)=>{for(var t=i>1?void 0:i?d(e,l):e,n=a.length-1,p;n>=0;n--)(p=a[n])&&(t=(i?p(e,l,t):p(t))||t);return i&&t&&o(e,l,t),t};var L={};v(L,{SkdxSpinner:()=>r});module.exports=f(L);var s=require("lit"),c=require("lit/decorators.js"),h=require("../internal/define.cjs");var g="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;",r=class extends s.LitElement{constructor(){super(...arguments);this.label="Loading"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.syncLabel()}updated(l){l.has("label")&&this.syncLabel()}syncLabel(){if(this.hasAttribute("aria-labelledby")){this.removeAttribute("aria-label");return}this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")}render(){return s.html`${this.label?s.html`<span
+"use strict";var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var m=e=>{throw TypeError(e)};var A=(e,t)=>{for(var l in t)o(e,l,{get:t[l],enumerable:!0})},x=(e,t,l,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of L(t))!w.call(e,a)&&a!==l&&o(e,a,{get:()=>t[a],enumerable:!(i=h(t,a))||i.enumerable});return e};var E=e=>x(o({},"__esModule",{value:!0}),e),p=(e,t,l,i)=>{for(var a=i>1?void 0:i?h(t,l):t,b=e.length-1,u;b>=0;b--)(u=e[b])&&(a=(i?u(t,l,a):u(a))||a);return i&&a&&o(t,l,a),a};var g=(e,t,l)=>t.has(e)||m("Cannot "+l);var v=(e,t,l)=>(g(e,t,"read from private field"),l?l.call(e):t.get(e)),y=(e,t,l)=>t.has(e)?m("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,l),d=(e,t,l,i)=>(g(e,t,"write to private field"),i?i.call(e,l):t.set(e,l),l);var M={};A(M,{SkdxSpinner:()=>s});module.exports=E(M);var r=require("lit"),c=require("lit/decorators.js"),f=require("../internal/define.cjs");var T="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;",n,s=class extends r.LitElement{constructor(){super(...arguments);this.label="Loading";y(this,n,null)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.syncLabel()}updated(l){l.has("label")&&this.syncLabel()}syncLabel(){let l=this.getAttribute("aria-label");if(l!==null&&l!==v(this,n)){d(this,n,null);return}let i=this.hasAttribute("aria-labelledby")?null:this.label||null;d(this,n,i),i===null?this.removeAttribute("aria-label"):this.setAttribute("aria-label",i)}render(){return r.html`${this.label?r.html`<span
               class="skdx-spinner__label"
               data-part="label"
               part="label"
-              style=${g}
+              style=${T}
               >${this.label}</span
-            >`:null}<slot part="spinner"></slot>`}};r.styles=s.css`
+            >`:null}<slot part="spinner"></slot>`}};n=new WeakMap,s.styles=r.css`
     :host {
       display: inline-block;
     }
-  `,b([(0,c.property)({type:String})],r.prototype,"label",2),r=b([(0,h.customElement)("skdx-spinner","spinner","root")],r);0&&(module.exports={SkdxSpinner});
+  `,p([(0,c.property)({type:String})],s.prototype,"label",2),p([(0,c.property)({type:String,reflect:!0,attribute:"data-size"})],s.prototype,"size",2),s=p([(0,f.customElement)("skdx-spinner","spinner","root")],s);0&&(module.exports={SkdxSpinner});

package/dist/spinner/Spinner.d.cts

@@ -1,30 +1,30 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Headless loading indicator: `role="status"`, `aria-live="polite"`, announces
- * its label. Renders slotted content (custom spinner) or relies on brand CSS
- * to draw the ring. For work of unknown duration; use `<skdx-progress>` when
- * you have a value to report.
+ * Headless loading indicator with `role="status"` and `aria-live="polite"` that renders slotted content or the skin's default ring and announces `label`.
  *
  * @example
  * ```html
  * <skdx-spinner label="Loading results"></skdx-spinner>
  * ```
  *
- * @csspart spinner - The wrapper div.
+ * @csspart spinner - The default slot: a custom spinner graphic, or the skin's default ring when empty.
  * @csspart label - The visually-hidden announcement text.
  */
 export declare class SkdxSpinner extends LitElement {
+    #private;
     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;
     /**
-     * Set the label unless the consumer provided `aria-labelledby`.
-     * Role and live region are re-asserted unconditionally; the name is not.
+     * 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' | 'lg' | (string & {}) | undefined;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Skips `aria-label` when `aria-labelledby` is set; an authored `aria-label` always wins over `label`. */
     private syncLabel;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/spinner/Spinner.d.ts

@@ -1,30 +1,30 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Headless loading indicator: `role="status"`, `aria-live="polite"`, announces
- * its label. Renders slotted content (custom spinner) or relies on brand CSS
- * to draw the ring. For work of unknown duration; use `<skdx-progress>` when
- * you have a value to report.
+ * Headless loading indicator with `role="status"` and `aria-live="polite"` that renders slotted content or the skin's default ring and announces `label`.
  *
  * @example
  * ```html
  * <skdx-spinner label="Loading results"></skdx-spinner>
  * ```
  *
- * @csspart spinner - The wrapper div.
+ * @csspart spinner - The default slot: a custom spinner graphic, or the skin's default ring when empty.
  * @csspart label - The visually-hidden announcement text.
  */
 export declare class SkdxSpinner extends LitElement {
+    #private;
     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;
     /**
-     * Set the label unless the consumer provided `aria-labelledby`.
-     * Role and live region are re-asserted unconditionally; the name is not.
+     * 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' | 'lg' | (string & {}) | undefined;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Skips `aria-label` when `aria-labelledby` is set; an authored `aria-label` always wins over `label`. */
     private syncLabel;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {