@skdx/web-components 0.26.0

package/dist/internal/menu-sub.d.cts

@@ -0,0 +1,140 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from './positioning.cjs';
+/**
+ * Nested-submenu layer shared by DropdownMenu, ContextMenu and Menubar, the
+ * Web Components counterpart of React's `utils/menuSub.tsx`. The three
+ * families differ in how a *root* menu opens, but a submenu's own behaviour is
+ * identical in all of them, so each family's `<skdx-*-sub*>` elements are
+ * one-line subclasses of the three bases here that add nothing but their tag
+ * name — the same way each family's Arrow subclasses `SkdxOverlayArrow`.
+ *
+ * `SkdxMenuSubTrigger`/`SkdxMenuSubContent` find their `SkdxMenuSub` by walking
+ * ancestors and testing `instanceof`, so no per-family tag name is baked in
+ * anywhere. `SkdxMenuSubContent` deliberately renders inline inside the parent
+ * menu's DOM rather than in a portal, which is what makes the parent's
+ * existing outside-pointer-down dismissal treat clicks in a submenu as
+ * "inside".
+ *
+ * @internal
+ */
+/** @internal Selects focusable, non-disabled items within a menu panel. */
+export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]:not([data-disabled])";
+/**
+ * Menu items belonging to `container`, excluding any inside a submenu panel
+ * that is currently closed (and therefore `hidden`). React gets this for free
+ * by not mounting a closed `MenuSubContent` at all; here every part stays in
+ * the DOM, so a closed submenu's items would otherwise pollute the parent
+ * menu's roving focus and typeahead.
+ * @internal
+ */
+export declare function menuItems(container: Element): HTMLElement[];
+/**
+ * @internal Root of a nested submenu: owns the submenu's open state and the
+ * hover grace timer, and is the coordination point its SubTrigger and
+ * SubContent look up. Renders only a `<slot>` (`display: contents`).
+ *
+ * @fires open-change - The submenu opened or closed (detail: the new open state).
+ * @fires open-change-complete - Fired with the new open state after SubContent's enter or exit animation has finished — as soon as the panel has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ */
+export declare class SkdxMenuSub extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether the submenu is currently open and visible.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Initial open state, for uncontrolled usage. Applied once, on connect,
+     * and only if `open` wasn't already set.
+     * @default false
+     */
+    defaultOpen: boolean;
+    readonly contentId: string;
+    /** @internal Set by the SubTrigger on connect; the anchor SubContent floats against. */
+    triggerEl: HTMLElement | null;
+    /** @internal Set by the SubContent on connect; the panel the SubTrigger moves focus into. */
+    contentEl: HTMLElement | null;
+    private closeTimer?;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** @internal Opens immediately, cancelling any pending close. */
+    openNow(): void;
+    /** @internal Closes immediately, cancelling any pending close. */
+    closeNow(): void;
+    /** @internal Closes after the grace delay unless `openNow` cancels it first. */
+    scheduleClose(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+/**
+ * @internal The parent-menu item that opens a submenu: `role="menuitem"` (so
+ * it takes part in the parent menu's roving focus and typeahead like any other
+ * item) with `aria-haspopup="menu"`, `aria-expanded`, `aria-controls` and
+ * `data-state`. Opens on click, Enter, Space and ArrowRight — moving focus to
+ * the submenu's first item — and on hover, which leaves focus on the trigger.
+ * Under `dir="rtl"` the opening arrow is ArrowLeft. Selecting it never closes
+ * the parent menu.
+ */
+export declare class SkdxMenuSubTrigger extends LitElement {
+    /** Excludes the trigger from roving-focus navigation and blocks it from opening the submenu. */
+    disabled: boolean;
+    /** @internal */
+    protected sub: SkdxMenuSub | null;
+    private readonly onSubUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncHostState;
+    private openAndFocusFirstItem;
+    private readonly handleClick;
+    private readonly handleKeyDown;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    render(): import("lit").TemplateResult<1>;
+}
+/**
+ * @internal The submenu's floating panel: `role="menu"` with
+ * `aria-orientation="vertical"` and `data-state`, positioned against its
+ * SubTrigger by `positionFloating` (`side="end"`, `align="start"` by default
+ * — logical, so it opens to the right under LTR and to the left under RTL),
+ * which also writes the resolved `data-side`/`data-align`. Owns its own
+ * vertical roving focus and typeahead; ArrowLeft and Escape close only the
+ * submenu and return focus to the trigger, leaving the parent menu open —
+ * under `dir="rtl"` the closing arrow is ArrowRight.
+ */
+export declare class SkdxMenuSubContent extends LitElement {
+    /** Preferred edge of the sub-trigger to place the panel against. `start`/`end` follow the writing direction. */
+    side: PositionOptions['side'];
+    /** Preferred alignment along that edge relative to the sub-trigger. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the panel and the sub-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 viewport edge when avoiding collisions. */
+    collisionPadding: number;
+    /** Whether Up/Down arrow-key navigation wraps from the last item back to the first (and vice versa). */
+    loop: boolean;
+    /** Keep the panel visible while the submenu is closed, for exit animations. */
+    forceMount: boolean;
+    /** @internal */
+    protected sub: SkdxMenuSub | null;
+    private readonly onSubUpdate;
+    private typeahead;
+    private typeaheadTimer?;
+    private cleanupPosition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    private activate;
+    private deactivate;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    private readonly handleKeyDown;
+    private rove;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/internal/menu-sub.d.ts

@@ -0,0 +1,140 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from './positioning.js';
+/**
+ * Nested-submenu layer shared by DropdownMenu, ContextMenu and Menubar, the
+ * Web Components counterpart of React's `utils/menuSub.tsx`. The three
+ * families differ in how a *root* menu opens, but a submenu's own behaviour is
+ * identical in all of them, so each family's `<skdx-*-sub*>` elements are
+ * one-line subclasses of the three bases here that add nothing but their tag
+ * name — the same way each family's Arrow subclasses `SkdxOverlayArrow`.
+ *
+ * `SkdxMenuSubTrigger`/`SkdxMenuSubContent` find their `SkdxMenuSub` by walking
+ * ancestors and testing `instanceof`, so no per-family tag name is baked in
+ * anywhere. `SkdxMenuSubContent` deliberately renders inline inside the parent
+ * menu's DOM rather than in a portal, which is what makes the parent's
+ * existing outside-pointer-down dismissal treat clicks in a submenu as
+ * "inside".
+ *
+ * @internal
+ */
+/** @internal Selects focusable, non-disabled items within a menu panel. */
+export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]:not([data-disabled])";
+/**
+ * Menu items belonging to `container`, excluding any inside a submenu panel
+ * that is currently closed (and therefore `hidden`). React gets this for free
+ * by not mounting a closed `MenuSubContent` at all; here every part stays in
+ * the DOM, so a closed submenu's items would otherwise pollute the parent
+ * menu's roving focus and typeahead.
+ * @internal
+ */
+export declare function menuItems(container: Element): HTMLElement[];
+/**
+ * @internal Root of a nested submenu: owns the submenu's open state and the
+ * hover grace timer, and is the coordination point its SubTrigger and
+ * SubContent look up. Renders only a `<slot>` (`display: contents`).
+ *
+ * @fires open-change - The submenu opened or closed (detail: the new open state).
+ * @fires open-change-complete - Fired with the new open state after SubContent's enter or exit animation has finished — as soon as the panel has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ */
+export declare class SkdxMenuSub extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether the submenu is currently open and visible.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Initial open state, for uncontrolled usage. Applied once, on connect,
+     * and only if `open` wasn't already set.
+     * @default false
+     */
+    defaultOpen: boolean;
+    readonly contentId: string;
+    /** @internal Set by the SubTrigger on connect; the anchor SubContent floats against. */
+    triggerEl: HTMLElement | null;
+    /** @internal Set by the SubContent on connect; the panel the SubTrigger moves focus into. */
+    contentEl: HTMLElement | null;
+    private closeTimer?;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** @internal Opens immediately, cancelling any pending close. */
+    openNow(): void;
+    /** @internal Closes immediately, cancelling any pending close. */
+    closeNow(): void;
+    /** @internal Closes after the grace delay unless `openNow` cancels it first. */
+    scheduleClose(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+/**
+ * @internal The parent-menu item that opens a submenu: `role="menuitem"` (so
+ * it takes part in the parent menu's roving focus and typeahead like any other
+ * item) with `aria-haspopup="menu"`, `aria-expanded`, `aria-controls` and
+ * `data-state`. Opens on click, Enter, Space and ArrowRight — moving focus to
+ * the submenu's first item — and on hover, which leaves focus on the trigger.
+ * Under `dir="rtl"` the opening arrow is ArrowLeft. Selecting it never closes
+ * the parent menu.
+ */
+export declare class SkdxMenuSubTrigger extends LitElement {
+    /** Excludes the trigger from roving-focus navigation and blocks it from opening the submenu. */
+    disabled: boolean;
+    /** @internal */
+    protected sub: SkdxMenuSub | null;
+    private readonly onSubUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncHostState;
+    private openAndFocusFirstItem;
+    private readonly handleClick;
+    private readonly handleKeyDown;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    render(): import("lit").TemplateResult<1>;
+}
+/**
+ * @internal The submenu's floating panel: `role="menu"` with
+ * `aria-orientation="vertical"` and `data-state`, positioned against its
+ * SubTrigger by `positionFloating` (`side="end"`, `align="start"` by default
+ * — logical, so it opens to the right under LTR and to the left under RTL),
+ * which also writes the resolved `data-side`/`data-align`. Owns its own
+ * vertical roving focus and typeahead; ArrowLeft and Escape close only the
+ * submenu and return focus to the trigger, leaving the parent menu open —
+ * under `dir="rtl"` the closing arrow is ArrowRight.
+ */
+export declare class SkdxMenuSubContent extends LitElement {
+    /** Preferred edge of the sub-trigger to place the panel against. `start`/`end` follow the writing direction. */
+    side: PositionOptions['side'];
+    /** Preferred alignment along that edge relative to the sub-trigger. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the panel and the sub-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 viewport edge when avoiding collisions. */
+    collisionPadding: number;
+    /** Whether Up/Down arrow-key navigation wraps from the last item back to the first (and vice versa). */
+    loop: boolean;
+    /** Keep the panel visible while the submenu is closed, for exit animations. */
+    forceMount: boolean;
+    /** @internal */
+    protected sub: SkdxMenuSub | null;
+    private readonly onSubUpdate;
+    private typeahead;
+    private typeaheadTimer?;
+    private cleanupPosition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    private activate;
+    private deactivate;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    private readonly handleKeyDown;
+    private rove;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/internal/menu-sub.js

@@ -0,0 +1,5 @@
+var g=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var o=(l,i,e,t)=>{for(var s=t>1?void 0:t?T(i,e):i,d=l.length-1,r;d>=0;d--)(r=l[d])&&(s=(t?r(i,e,s):r(s))||s);return t&&s&&g(i,e,s),s};import{css as A,html as u,LitElement as f}from"lit";import{property as n}from"lit/decorators.js";import{directionalKey as b,resolveDirection as w,resolvePhysicalSide as C}from"./direction.js";import{nextId as L}from"./ids.js";import{notifyOpenChangeComplete as O}from"./open-change-complete.js";import{optOutBoolean as m,positionFloating as P}from"./positioning.js";import{itemText as k}from"./typeahead.js";var v='[role^="menuitem"]:not([data-disabled])',D=150,H=1e3,c="skdx-menu-sub-internal-update";function I(l){return Array.from(l.querySelectorAll(v)).filter(i=>!i.closest("[hidden]"))}function y(l){for(let i=l.parentElement;i;i=i.parentElement)if(i instanceof h)return i;return null}var h=class extends f{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.contentId=L("skdx-menu-sub-content");this.triggerEl=null;this.contentEl=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 t=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!t&&this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),e.size>0&&this.dispatchEvent(new CustomEvent(c)),e.has("open")&&!t&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=O(()=>this.contentEl,this.open,s=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:s,bubbles:!0,composed:!0}))))}openNow(){clearTimeout(this.closeTimer),this.open=!0}closeNow(){clearTimeout(this.closeTimer),this.open=!1}scheduleClose(){clearTimeout(this.closeTimer),this.closeTimer=setTimeout(()=>this.open=!1,D)}render(){return u`<slot></slot>`}};h.styles=A`
+    :host {
+      display: contents;
+    }
+  `,o([n({type:Boolean,reflect:!0})],h.prototype,"open",2),o([n({type:Boolean,attribute:"default-open"})],h.prototype,"defaultOpen",2);var p=class extends f{constructor(){super(...arguments);this.disabled=!1;this.sub=null;this.onSubUpdate=()=>this.syncHostState();this.handleClick=()=>{this.disabled||this.openAndFocusFirstItem()};this.handleKeyDown=e=>{if(this.disabled)return;let t=b(e.key,this);(t==="ArrowRight"||t==="Enter"||t===" ")&&(e.preventDefault(),e.stopPropagation(),this.openAndFocusFirstItem())};this.handlePointerEnter=()=>{this.disabled||(this.focus(),this.sub?.openNow())};this.handlePointerLeave=()=>{this.disabled||this.sub?.scheduleClose()}}connectedCallback(){super.connectedCallback(),this.sub=y(this),this.sub&&(this.sub.triggerEl=this,this.setAttribute("aria-controls",this.sub.contentId),this.sub.addEventListener(c,this.onSubUpdate)),this.setAttribute("role","menuitem"),this.setAttribute("aria-haspopup","menu"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncHostState()}disconnectedCallback(){this.sub?.removeEventListener(c,this.onSubUpdate),super.disconnectedCallback()}updated(e){e.has("disabled")&&this.syncHostState()}syncHostState(){let e=this.sub?.open??!1;this.setAttribute("aria-expanded",String(e)),this.setAttribute("data-state",e?"open":"closed"),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)}openAndFocusFirstItem(){let e=this.sub;e&&(e.openNow(),requestAnimationFrame(()=>{let t=e.contentEl;(t?.querySelector(v)??t)?.focus()}))}render(){return u`<slot></slot>`}};o([n({type:Boolean,reflect:!0})],p.prototype,"disabled",2);var a=class extends f{constructor(){super(...arguments);this.side="end";this.align="start";this.sideOffset=0;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.forceMount=!1;this.sub=null;this.onSubUpdate=()=>this.syncHostState();this.typeahead="";this.handlePointerEnter=()=>this.sub?.openNow();this.handlePointerLeave=()=>this.sub?.scheduleClose();this.handleKeyDown=e=>{let t=b(e.key,this);t==="ArrowLeft"||t==="Escape"?(e.preventDefault(),this.sub?.closeNow(),this.sub?.triggerEl?.focus()):this.rove(e),e.key!=="Tab"&&e.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu"),this.setAttribute("aria-orientation","vertical"),this.tabIndex=-1,this.sub=y(this),this.sub&&(this.sub.contentEl=this,this.id=this.sub.contentId,this.sub.addEventListener(c,this.onSubUpdate)),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncHostState()}disconnectedCallback(){this.sub?.removeEventListener(c,this.onSubUpdate),this.cleanupPosition?.(),clearTimeout(this.typeaheadTimer),super.disconnectedCallback()}syncHostState(){let e=this.sub?.open??!1;this.setAttribute("data-state",e?"open":"closed"),this.setAttribute("data-side",C(this.side??"end",w(this))),this.setAttribute("data-align",this.align??"start"),this.hidden=!e&&!this.forceMount,e?this.activate():this.deactivate()}activate(){this.cleanupPosition||!this.sub?.triggerEl||(this.cleanupPosition=P(this.sub.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding}))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}rove(e){let t=I(this),s=t.indexOf(document.activeElement);if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),t.length===0)return;let d=e.key==="ArrowDown"?1:-1,r=s+d;r>=t.length?r=this.loop?0:t.length-1:r<0&&(r=this.loop?t.length-1:0),t[r]?.focus();return}if(e.key==="Home"){e.preventDefault(),t[0]?.focus();return}if(e.key==="End"){e.preventDefault(),t[t.length-1]?.focus();return}e.key==="Enter"||e.key===" "||e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(this.typeahead+=e.key.toLowerCase(),clearTimeout(this.typeaheadTimer),this.typeaheadTimer=setTimeout(()=>this.typeahead="",H),[...t.slice(s+1),...t.slice(0,s+1)].find(E=>k(E).trim().toLowerCase().startsWith(this.typeahead))?.focus())}render(){return u`<slot></slot>`}};o([n({type:String})],a.prototype,"side",2),o([n({type:String})],a.prototype,"align",2),o([n({type:Number,attribute:"side-offset"})],a.prototype,"sideOffset",2),o([n({type:Number,attribute:"align-offset"})],a.prototype,"alignOffset",2),o([n({converter:m,attribute:"avoid-collisions"})],a.prototype,"avoidCollisions",2),o([n({type:Number,attribute:"collision-padding"})],a.prototype,"collisionPadding",2),o([n({converter:m})],a.prototype,"loop",2),o([n({type:Boolean,attribute:"force-mount"})],a.prototype,"forceMount",2);export{v as ITEM_SELECTOR,h as SkdxMenuSub,a as SkdxMenuSubContent,p as SkdxMenuSubTrigger,I as menuItems};

package/dist/internal/number-format.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var b=(e,r)=>{for(var t in r)s(e,t,{get:r[t],enumerable:!0})},c=(e,r,t,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of l(r))!f.call(e,n)&&n!==t&&s(e,n,{get:()=>r[n],enumerable:!(u=p(r,n))||u.enumerable});return e};var g=e=>c(s({},"__esModule",{value:!0}),e);var I={};b(I,{formatNumberValue:()=>d,parseNumberValue:()=>F});module.exports=g(I);function d(e,r,t){return!r&&!t?String(e):new Intl.NumberFormat(r,t).format(e)}function F(e,r,t){let u=e.trim();if(u==="")return NaN;if(!r&&!t)return Number(u);let n=new Intl.NumberFormat(r,t).formatToParts(-12345.6),N=n.find(a=>a.type==="group")?.value,o=n.find(a=>a.type==="decimal")?.value??new Intl.NumberFormat(r).formatToParts(1.5).find(a=>a.type==="decimal")?.value??".",i=u.replace(/[\s\u00a0\u202f]/g,"").replace(/\u2212/g,"-");if(N&&(i=i.split(N).join("")),i=i.split(o).join(".").replace(/[^0-9.-]/g,""),!/[0-9]/.test(i))return NaN;let m=Number(i);return Number.isNaN(m)?NaN:t?.style==="percent"?m/100:m}0&&(module.exports={formatNumberValue,parseNumberValue});

package/dist/internal/number-format.d.cts

@@ -0,0 +1,19 @@
+/**
+ * `Intl.NumberFormat` display/parse pair for NumberField.
+ *
+ * With neither `locale` nor `formatOptions`, formatting is off and the value
+ * round-trips through `String`/`Number` exactly as it did before — the
+ * formatted path is opt-in.
+ *
+ * Percent follows `Intl.NumberFormat` semantics: the value is the *fraction*,
+ * so `0.5` displays as `50%` and typing `50%` parses back to `0.5`. `min`,
+ * `max` and `step` therefore also operate on the fraction.
+ */
+export declare function formatNumberValue(value: number, locale?: string, formatOptions?: Intl.NumberFormatOptions): string;
+/**
+ * Parses text the user typed or pasted back into a number, tolerating
+ * everything {@link formatNumberValue} can emit: group separators, the
+ * locale's decimal separator, currency symbols, unit suffixes, `%`, and the
+ * Unicode minus sign. Returns `NaN` when the text holds no number.
+ */
+export declare function parseNumberValue(text: string, locale?: string, formatOptions?: Intl.NumberFormatOptions): number;

package/dist/internal/number-format.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `Intl.NumberFormat` display/parse pair for NumberField.
+ *
+ * With neither `locale` nor `formatOptions`, formatting is off and the value
+ * round-trips through `String`/`Number` exactly as it did before — the
+ * formatted path is opt-in.
+ *
+ * Percent follows `Intl.NumberFormat` semantics: the value is the *fraction*,
+ * so `0.5` displays as `50%` and typing `50%` parses back to `0.5`. `min`,
+ * `max` and `step` therefore also operate on the fraction.
+ */
+export declare function formatNumberValue(value: number, locale?: string, formatOptions?: Intl.NumberFormatOptions): string;
+/**
+ * Parses text the user typed or pasted back into a number, tolerating
+ * everything {@link formatNumberValue} can emit: group separators, the
+ * locale's decimal separator, currency symbols, unit suffixes, `%`, and the
+ * Unicode minus sign. Returns `NaN` when the text holds no number.
+ */
+export declare function parseNumberValue(text: string, locale?: string, formatOptions?: Intl.NumberFormatOptions): number;

package/dist/internal/number-format.js

@@ -0,0 +1 @@
+function o(u,r,e){return!r&&!e?String(u):new Intl.NumberFormat(r,e).format(u)}function p(u,r,e){let i=u.trim();if(i==="")return NaN;if(!r&&!e)return Number(i);let m=new Intl.NumberFormat(r,e).formatToParts(-12345.6),s=m.find(n=>n.type==="group")?.value,N=m.find(n=>n.type==="decimal")?.value??new Intl.NumberFormat(r).formatToParts(1.5).find(n=>n.type==="decimal")?.value??".",t=i.replace(/[\s\u00a0\u202f]/g,"").replace(/\u2212/g,"-");if(s&&(t=t.split(s).join("")),t=t.split(N).join(".").replace(/[^0-9.-]/g,""),!/[0-9]/.test(t))return NaN;let a=Number(t);return Number.isNaN(a)?NaN:e?.style==="percent"?a/100:a}export{o as formatNumberValue,p as parseNumberValue};

package/dist/internal/open-change-complete.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var p=(e,n)=>{for(var o in n)s(e,o,{get:n[o],enumerable:!0})},E=(e,n,o,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of u(n))!f.call(e,t)&&t!==o&&s(e,t,{get:()=>n[t],enumerable:!(i=m(n,t))||i.enumerable});return e};var v=e=>E(s({},"__esModule",{value:!0}),e);var h={};p(h,{notifyOpenChangeComplete:()=>b});module.exports=v(h);function y(e){let{animationName:n,transitionDuration:o,display:i}=getComputedStyle(e);return i==="none"?!1:n!==""&&n!=="none"?!0:o.split(",").some(t=>Number.parseFloat(t)>0)}var l=["animationend","animationcancel","transitionend","transitioncancel"];function b(e,n,o){let i,t=()=>{let a=e();if(!a||!a.isConnected||!y(a)){o(n);return}let c=r=>{r.target===a&&o(n)};for(let r of l)a.addEventListener(r,c);i=()=>{for(let r of l)a.removeEventListener(r,c)}},d=n&&!e()?requestAnimationFrame(t):(t(),0);return()=>{cancelAnimationFrame(d),i?.()}}0&&(module.exports={notifyOpenChangeComplete});

package/dist/internal/open-change-complete.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Calls `done` with the new open state once the change has finished on
+ * screen — after the content element's enter or exit animation ends, or as
+ * soon as the content has settled when there is no motion declared (the same
+ * task on close, the next frame on open where the element is not in the DOM
+ * yet). The framework-free counterpart of React's `useOpenChangeComplete`.
+ *
+ * The settled counterpart to the `open-change` event, which fires the instant
+ * the state flips. Use it for work that must not race the transition:
+ * measuring the panel, moving focus after an entrance, or tearing down an
+ * expensive child once the exit has played.
+ *
+ * `getContent` is called rather than captured, so an element that is only
+ * rendered/upgraded once the overlay opens is still found. The caller is
+ * responsible for not reporting the *initial* state — the state an overlay
+ * mounts in is not a completed change, and announcing it would report a
+ * change nobody asked for.
+ *
+ * @returns a teardown that cancels the pending frame and removes the
+ * listeners; call it before starting the next change and on disconnect.
+ * @internal
+ */
+export declare function notifyOpenChangeComplete(getContent: () => HTMLElement | null, open: boolean, done: (open: boolean) => void): () => void;

package/dist/internal/open-change-complete.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Calls `done` with the new open state once the change has finished on
+ * screen — after the content element's enter or exit animation ends, or as
+ * soon as the content has settled when there is no motion declared (the same
+ * task on close, the next frame on open where the element is not in the DOM
+ * yet). The framework-free counterpart of React's `useOpenChangeComplete`.
+ *
+ * The settled counterpart to the `open-change` event, which fires the instant
+ * the state flips. Use it for work that must not race the transition:
+ * measuring the panel, moving focus after an entrance, or tearing down an
+ * expensive child once the exit has played.
+ *
+ * `getContent` is called rather than captured, so an element that is only
+ * rendered/upgraded once the overlay opens is still found. The caller is
+ * responsible for not reporting the *initial* state — the state an overlay
+ * mounts in is not a completed change, and announcing it would report a
+ * change nobody asked for.
+ *
+ * @returns a teardown that cancels the pending frame and removes the
+ * listeners; call it before starting the next change and on disconnect.
+ * @internal
+ */
+export declare function notifyOpenChangeComplete(getContent: () => HTMLElement | null, open: boolean, done: (open: boolean) => void): () => void;

package/dist/internal/open-change-complete.js

@@ -0,0 +1 @@
+function d(o){let{animationName:n,transitionDuration:i,display:a}=getComputedStyle(o);return a==="none"?!1:n!==""&&n!=="none"?!0:i.split(",").some(r=>Number.parseFloat(r)>0)}var c=["animationend","animationcancel","transitionend","transitioncancel"];function m(o,n,i){let a,r=()=>{let e=o();if(!e||!e.isConnected||!d(e)){i(n);return}let s=t=>{t.target===e&&i(n)};for(let t of c)e.addEventListener(t,s);a=()=>{for(let t of c)e.removeEventListener(t,s)}},l=n&&!o()?requestAnimationFrame(r):(r(),0);return()=>{cancelAnimationFrame(l),a?.()}}export{m as notifyOpenChangeComplete};

package/dist/internal/overlay-arrow.cjs

@@ -0,0 +1,6 @@
+"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var m=(s,t)=>{for(var l in t)p(s,l,{get:t[l],enumerable:!0})},d=(s,t,l,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of n(t))!c.call(s,o)&&o!==l&&p(s,o,{get:()=>t[o],enumerable:!(r=u(t,o))||r.enumerable});return s};var a=s=>d(p({},"__esModule",{value:!0}),s);var b={};m(b,{SkdxOverlayArrow:()=>i});module.exports=a(b);var e=require("lit"),i=class extends e.LitElement{render(){return e.html`<slot></slot>`}};i.styles=e.css`
+    :host {
+      position: absolute;
+      display: block;
+    }
+  `;0&&(module.exports={SkdxOverlayArrow});

package/dist/internal/overlay-arrow.d.cts

@@ -0,0 +1,25 @@
+import { LitElement, type CSSResultGroup } from 'lit';
+/**
+ * Shared base for the `<skdx-*-arrow>` parts (popover, tooltip, hover card,
+ * dropdown menu, menubar) — the optional pointer from an overlay's Content
+ * back at its anchor.
+ *
+ * It carries no logic of its own, exactly like React's `PopperArrow`: it is
+ * rendered as a light-DOM child of the Content part, and `positioning.ts`
+ * finds it, hands it to floating-ui's `arrow` middleware, and writes the
+ * resolved offsets onto its inline style on every reposition. Visuals are
+ * entirely the consumer's (slot in an SVG, or style the host with CSS).
+ *
+ * @internal
+ */
+export declare class SkdxOverlayArrow extends LitElement {
+    /**
+     * Kept out of flow before the first reposition writes its inline styles.
+     *
+     * Typed as `CSSResultGroup` rather than left to infer `CSSResult`, so a
+     * subclass can override with `[SkdxOverlayArrow.styles, …]` — narrowing it to
+     * the singular would make that array an incompatible static side.
+     */
+    static styles: CSSResultGroup;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/internal/overlay-arrow.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, type CSSResultGroup } from 'lit';
+/**
+ * Shared base for the `<skdx-*-arrow>` parts (popover, tooltip, hover card,
+ * dropdown menu, menubar) — the optional pointer from an overlay's Content
+ * back at its anchor.
+ *
+ * It carries no logic of its own, exactly like React's `PopperArrow`: it is
+ * rendered as a light-DOM child of the Content part, and `positioning.ts`
+ * finds it, hands it to floating-ui's `arrow` middleware, and writes the
+ * resolved offsets onto its inline style on every reposition. Visuals are
+ * entirely the consumer's (slot in an SVG, or style the host with CSS).
+ *
+ * @internal
+ */
+export declare class SkdxOverlayArrow extends LitElement {
+    /**
+     * Kept out of flow before the first reposition writes its inline styles.
+     *
+     * Typed as `CSSResultGroup` rather than left to infer `CSSResult`, so a
+     * subclass can override with `[SkdxOverlayArrow.styles, …]` — narrowing it to
+     * the singular would make that array an incompatible static side.
+     */
+    static styles: CSSResultGroup;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/internal/overlay-arrow.js

@@ -0,0 +1,6 @@
+import{css as s,html as e,LitElement as o}from"lit";var t=class extends o{render(){return e`<slot></slot>`}};t.styles=s`
+    :host {
+      position: absolute;
+      display: block;
+    }
+  `;export{t as SkdxOverlayArrow};

package/dist/internal/part.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var A=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},k=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of f(t))!m.call(e,n)&&n!==o&&i(e,n,{get:()=>t[n],enumerable:!(r=d(t,n))||r.enumerable});return e};var b=e=>k(i({},"__esModule",{value:!0}),e);var H={};A(H,{applyHostPart:()=>T,reflectHostState:()=>p});module.exports=b(H);function T(e,t,o){let r=o==="root";e.classList.add(r?`skdx-${t}`:`skdx-${t}__${o}`),e.setAttribute("data-part",o),r&&e.setAttribute("data-skdx-component",t),E(e)}function p(e,t){let o=c.get(e);o||(o=new Set(Object.keys(t).filter(r=>e.hasAttribute(r))),c.set(e,o));for(let[r,n]of Object.entries(t))o.has(r)||(n==null?e.removeAttribute(r):e.setAttribute(r,n))}var c=new WeakMap,s="button, a[href], summary, [role='button'], [role='link']",u="[role='checkbox'], [role='radio'], [role='switch'], [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'], [role='option'], [role='tab']",O="[role='checkbox'], [role='radio'], [role='switch'], [role='tab']",a=Symbol.for("skdx.forwardsActivation");function E(e){let t=()=>{for(let r of e.shadowRoot?.children??[]){if(r.matches(s)){e.setAttribute("data-skdx-control","actuator"),l(e);return}if(r.matches(u)){e.setAttribute("data-skdx-control","selection"),l(e);return}}e.matches(O)&&e.setAttribute("data-skdx-control","actuator")},o=e;o.updateComplete?o.updateComplete.then(t):queueMicrotask(t)}function l(e){if(!e[a]){e[a]=!0;for(let t of["pointerdown","pointerup","click"])e.addEventListener(t,o=>{if(o.composedPath()[0]!==e)return;let r=e.shadowRoot?.querySelector(`${s}, ${u}`);r&&(t==="click"?r.click():r.dispatchEvent(new PointerEvent(t,o)))})}}0&&(module.exports={applyHostPart,reflectHostState});

package/dist/internal/part.d.cts

@@ -0,0 +1,72 @@
+/**
+ * The styling hook every part of every component emits — the Web Components
+ * half of `packages/react/src/utils/part.ts`.
+ *
+ * Why the *host* and not the shadow root
+ * -------------------------------------
+ * React puts the class on the element it renders. This package cannot: 216 of
+ * its 413 elements render nothing but `<slot>`, so for over half the package
+ * there is no element inside the shadow root to carry a class. The host is the
+ * only node they have.
+ *
+ * Putting it on the host is also the only placement that keeps `@skdx/skins`
+ * working unchanged. A document stylesheet cannot cross a shadow boundary, but
+ * every host is in the light DOM, so `.skdx-tabs__list` matches from the
+ * consumer's own sheet exactly as it does in React, Vue, Svelte and Angular —
+ * including the 59 skin selectors that span two elements
+ * (`.skdx-accordion__trigger[data-state='open'] .skdx-accordion__indicator`),
+ * which no per-shadow-root stylesheet could ever match.
+ *
+ * `::part()` is untouched by this. The `part=` attributes inside the shadow
+ * roots remain the package's public styling API; this adds a second, coarser
+ * hook beside them rather than replacing them.
+ *
+ * What it emits
+ * -------------
+ * ```html
+ * <skdx-tabs class="skdx-tabs" data-skdx-component="tabs" data-part="root">
+ * <skdx-tabs-list class="skdx-tabs__list" data-part="list">
+ * ```
+ *
+ * Part names are not invented here — they are the same `styling.cssParts`
+ * vocabulary from `@skdx/shared` that React reads and
+ * `scripts/contract-parts.mjs` enforces, so the two cannot drift apart.
+ *
+ * @see docs/architecture/component-styling-contract.md
+ * @internal
+ */
+/**
+ * Adds one part's class and `data-*` hooks to a host element.
+ *
+ * `classList.add` rather than an assignment to `className`: the host is the tag
+ * the *consumer* wrote, so it may already carry classes of theirs. Overwriting
+ * would delete them — the mirror image of the React bug this contract exists to
+ * avoid, where spreading `{...props}` after `skdxPart` deleted the part's class.
+ *
+ * Idempotent, because `connectedCallback` runs again on every re-insertion:
+ * `classList.add` ignores a class already present and `setAttribute` rewrites
+ * the same value.
+ *
+ * @param host - The custom element itself.
+ * @param component - Family name in kebab-case, e.g. `'tabs'`, `'tree-select'`.
+ * @param part - Part name from the family's `styling.cssParts`, or `'root'`.
+ */
+export declare function applyHostPart(host: HTMLElement, component: string, part: string): void;
+/**
+ * Mirrors a component's state attributes onto its host, where the skin class
+ * lives. The skin's state rules are attribute-qualified on the classed
+ * element — `.skdx-checkbox[data-state='checked']` — but this package renders
+ * its state onto the control inside the shadow root, so the class and the
+ * attribute never met and the rule matched nothing ("state attribute on the
+ * inner element, class on the host", `reports/open-issues.md`).
+ *
+ * Call from `updated()` with the current state; `null`/`undefined` removes
+ * the attribute, matching how absent states are expressed everywhere else. An
+ * attribute the consumer authored is left exactly as they wrote it — see
+ * {@link AUTHORED}.
+ * The shadow control keeps its own copies — they are the `::part()` styling
+ * surface and the accessibility truth; the host copies exist for the skin.
+ *
+ * @internal
+ */
+export declare function reflectHostState(host: HTMLElement, attrs: Record<string, string | null | undefined>): void;

package/dist/internal/part.d.ts

@@ -0,0 +1,72 @@
+/**
+ * The styling hook every part of every component emits — the Web Components
+ * half of `packages/react/src/utils/part.ts`.
+ *
+ * Why the *host* and not the shadow root
+ * -------------------------------------
+ * React puts the class on the element it renders. This package cannot: 216 of
+ * its 413 elements render nothing but `<slot>`, so for over half the package
+ * there is no element inside the shadow root to carry a class. The host is the
+ * only node they have.
+ *
+ * Putting it on the host is also the only placement that keeps `@skdx/skins`
+ * working unchanged. A document stylesheet cannot cross a shadow boundary, but
+ * every host is in the light DOM, so `.skdx-tabs__list` matches from the
+ * consumer's own sheet exactly as it does in React, Vue, Svelte and Angular —
+ * including the 59 skin selectors that span two elements
+ * (`.skdx-accordion__trigger[data-state='open'] .skdx-accordion__indicator`),
+ * which no per-shadow-root stylesheet could ever match.
+ *
+ * `::part()` is untouched by this. The `part=` attributes inside the shadow
+ * roots remain the package's public styling API; this adds a second, coarser
+ * hook beside them rather than replacing them.
+ *
+ * What it emits
+ * -------------
+ * ```html
+ * <skdx-tabs class="skdx-tabs" data-skdx-component="tabs" data-part="root">
+ * <skdx-tabs-list class="skdx-tabs__list" data-part="list">
+ * ```
+ *
+ * Part names are not invented here — they are the same `styling.cssParts`
+ * vocabulary from `@skdx/shared` that React reads and
+ * `scripts/contract-parts.mjs` enforces, so the two cannot drift apart.
+ *
+ * @see docs/architecture/component-styling-contract.md
+ * @internal
+ */
+/**
+ * Adds one part's class and `data-*` hooks to a host element.
+ *
+ * `classList.add` rather than an assignment to `className`: the host is the tag
+ * the *consumer* wrote, so it may already carry classes of theirs. Overwriting
+ * would delete them — the mirror image of the React bug this contract exists to
+ * avoid, where spreading `{...props}` after `skdxPart` deleted the part's class.
+ *
+ * Idempotent, because `connectedCallback` runs again on every re-insertion:
+ * `classList.add` ignores a class already present and `setAttribute` rewrites
+ * the same value.
+ *
+ * @param host - The custom element itself.
+ * @param component - Family name in kebab-case, e.g. `'tabs'`, `'tree-select'`.
+ * @param part - Part name from the family's `styling.cssParts`, or `'root'`.
+ */
+export declare function applyHostPart(host: HTMLElement, component: string, part: string): void;
+/**
+ * Mirrors a component's state attributes onto its host, where the skin class
+ * lives. The skin's state rules are attribute-qualified on the classed
+ * element — `.skdx-checkbox[data-state='checked']` — but this package renders
+ * its state onto the control inside the shadow root, so the class and the
+ * attribute never met and the rule matched nothing ("state attribute on the
+ * inner element, class on the host", `reports/open-issues.md`).
+ *
+ * Call from `updated()` with the current state; `null`/`undefined` removes
+ * the attribute, matching how absent states are expressed everywhere else. An
+ * attribute the consumer authored is left exactly as they wrote it — see
+ * {@link AUTHORED}.
+ * The shadow control keeps its own copies — they are the `::part()` styling
+ * surface and the accessibility truth; the host copies exist for the skin.
+ *
+ * @internal
+ */
+export declare function reflectHostState(host: HTMLElement, attrs: Record<string, string | null | undefined>): void;

package/dist/internal/part.js

@@ -0,0 +1 @@
+function f(e,r,o){let t=o==="root";e.classList.add(t?`skdx-${r}`:`skdx-${r}__${o}`),e.setAttribute("data-part",o),t&&e.setAttribute("data-skdx-component",r),d(e)}function m(e,r){let o=i.get(e);o||(o=new Set(Object.keys(r).filter(t=>e.hasAttribute(t))),i.set(e,o));for(let[t,n]of Object.entries(r))o.has(t)||(n==null?e.removeAttribute(t):e.setAttribute(t,n))}var i=new WeakMap,l="button, a[href], summary, [role='button'], [role='link']",s="[role='checkbox'], [role='radio'], [role='switch'], [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'], [role='option'], [role='tab']",u="[role='checkbox'], [role='radio'], [role='switch'], [role='tab']",c=Symbol.for("skdx.forwardsActivation");function d(e){let r=()=>{for(let t of e.shadowRoot?.children??[]){if(t.matches(l)){e.setAttribute("data-skdx-control","actuator"),a(e);return}if(t.matches(s)){e.setAttribute("data-skdx-control","selection"),a(e);return}}e.matches(u)&&e.setAttribute("data-skdx-control","actuator")},o=e;o.updateComplete?o.updateComplete.then(r):queueMicrotask(r)}function a(e){if(!e[c]){e[c]=!0;for(let r of["pointerdown","pointerup","click"])e.addEventListener(r,o=>{if(o.composedPath()[0]!==e)return;let t=e.shadowRoot?.querySelector(`${l}, ${s}`);t&&(r==="click"?t.click():t.dispatchEvent(new PointerEvent(r,o)))})}}export{f as applyHostPart,m as reflectHostState};

package/dist/internal/pointer-angle.cjs

@@ -0,0 +1 @@
+"use strict";var b=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(e,n)=>{for(var t in n)b(e,t,{get:n[t],enumerable:!0})},p=(e,n,t,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of h(n))!m.call(e,r)&&r!==t&&b(e,r,{get:()=>n[r],enumerable:!(l=s(n,r))||l.enumerable});return e};var E=e=>p(b({},"__esModule",{value:!0}),e);var L={};f(L,{trackPointerAngle:()=>C});module.exports=E(L);function P(e,n){return(Math.atan2(e,-n)*180/Math.PI+360)%360}function A(e,n){return n?Math.round(Math.round(e/n)*n*1e6)/1e6%360:e}function C(e,n){let t=null,l=i=>{let o=e.getBoundingClientRect(),a=i.clientX-(o.left+o.width/2),c=i.clientY-(o.top+o.height/2),u=typeof n.step=="function"?n.step():n.step??0;return A(P(a,c),u)},r=i=>{if(t||n.enabled&&!n.enabled())return;let{pointerId:o}=i;e.setPointerCapture?.(o);let a=l(i);n.onDraggingChange?.(!0),n.onAngleChange(a,i);let c=d=>{if(d.pointerId!==o)return;let v=l(d);v!==a&&(a=v,n.onAngleChange(v,d))},u=d=>{d.pointerId===o&&(t?.(),n.onDraggingChange?.(!1),n.onAngleChangeEnd?.(a,d))},g=e.ownerDocument;g.addEventListener("pointermove",c),g.addEventListener("pointerup",u),g.addEventListener("pointercancel",u),t=()=>{g.removeEventListener("pointermove",c),g.removeEventListener("pointerup",u),g.removeEventListener("pointercancel",u),t=null}};return e.addEventListener("pointerdown",r),()=>{e.removeEventListener("pointerdown",r),t?.()}}0&&(module.exports={trackPointerAngle});