@skdx/web-components 0.27.0 → 0.29.0

package/dist/internal/options.d.ts

@@ -0,0 +1,67 @@
+/** Options data shape shared by the selection family (Select, Combobox, Autocomplete, Listbox), as a flat or grouped list. */
+export interface SkdxOptionDescriptor {
+    /** Identifier committed to the root's value when this option is chosen. */
+    value: string;
+    /**
+     * Text rendered for the option and shown by the trigger/input once chosen.
+     * @default undefined — falls back to `value`.
+     */
+    label?: string;
+    /**
+     * Excludes this option from selection and keyboard/typeahead navigation.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Flat option entry for CheckboxGroup, RadioGroup and ToggleGroup, where
+ * label is the item's content (no fallback to `value`).
+ */
+export interface SkdxOptionItemDescriptor extends SkdxOptionDescriptor {
+    /** Text rendered inside the derived item. */
+    label: string;
+}
+/** A labelled section of an `options` collection. */
+export interface SkdxOptionGroupDescriptor {
+    /** Heading text for the group. */
+    label: string;
+    /** The options inside this group. */
+    options: readonly SkdxOptionDescriptor[];
+}
+/** A flat or grouped `options` collection. */
+export type SkdxOptionsInput = ReadonlyArray<SkdxOptionDescriptor | SkdxOptionGroupDescriptor>;
+/** Tag names wired by the anatomy builder below. */
+export interface SkdxOptionTags {
+    item: string;
+    group: string;
+    groupLabel: string;
+    /** Per-value consumer content from {@link renderSlotContent}; an entry replaces that option's plain label text. */
+    itemContent?: ReadonlyMap<string, Element>;
+    /** Tag of a selection indicator prepended to every item, carrying the check glyph; set only by families whose anatomy draws one. */
+    itemIndicator?: string;
+}
+/**
+ * Consumer's per-datum content for a named render slot, keyed by `data-value` of each node.
+ *
+ * ```html
+ * <skdx-select .options=${options}>
+ *   <span slot="option" data-value="ruby"><img src="react.svg" alt="" />Ruby</span>
+ * </skdx-select>
+ * ```
+ * @internal
+ */
+export declare function renderSlotContent(root: Element, slot: string): Map<string, Element>;
+/**
+ * Detached copy of a render-slot node, ready to append into a generated part, with its `slot` attribute removed.
+ * @internal
+ */
+export declare function stampRenderSlot(source: Element): Element;
+/**
+ * Builds a light-DOM element tree for an options collection: one `item` per entry, wrapped in `group`/`groupLabel` pairs.
+ * @internal
+ */
+export declare function buildOptionElements(options: SkdxOptionsInput, tags: SkdxOptionTags): Element[];
+/** Label for `value` in options; used for read-out before the item registers its label. @internal */
+export declare function findOptionLabel(options: SkdxOptionsInput | undefined, value: string): string | undefined;
+/** Case-insensitive substring match applied to derived `options` when no `filter` is set. @internal */
+export declare function defaultOptionsFilter(text: string, inputValue: string): boolean;

package/dist/internal/options.js

@@ -0,0 +1 @@
+import{render as a}from"lit";import{checkGlyph as d}from"./glyphs.js";function s(r){return Array.isArray(r.options)}var l=new WeakMap;function b(r,t){let e=l.get(r);e||(e=new Map,l.set(r,e));let n=e.get(t);n||(n=new Map,e.set(t,n));for(let i of Array.from(r.children))i.getAttribute("slot")===t&&(n.set(i.getAttribute("data-value")??"",i),i.remove());return n}function u(r){let t=r.cloneNode(!0);return t.removeAttribute("slot"),t}function c(r,t){return r.map(e=>{if(s(e)){let o=document.createElement(t.group),p=document.createElement(t.groupLabel);return p.textContent=e.label,o.append(p,...c(e.options,t)),o}let n=document.createElement(t.item);n.setAttribute("value",e.value),e.disabled&&n.setAttribute("disabled","");let i=t.itemContent?.get(e.value);if(i?n.append(u(i)):n.textContent=e.label??e.value,t.itemIndicator){n.setAttribute("text-value",e.label??e.value);let o=document.createElement(t.itemIndicator);a(d,o),n.insertBefore(o,n.firstChild)}return n})}function f(r,t){if(r){for(let e of r)if(s(e)){let n=f(e.options,t);if(n!==void 0)return n}else if(e.value===t)return e.label??e.value}}function g(r,t){return r.toLowerCase().includes(t.trim().toLowerCase())}export{c as buildOptionElements,g as defaultOptionsFilter,f as findOptionLabel,b as renderSlotContent,u as stampRenderSlot};

package/dist/internal/outsideInert.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var m=(t,n)=>{for(var e in n)s(t,e,{get:n[e],enumerable:!0})},c=(t,n,e,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of a(n))!f.call(t,o)&&o!==e&&s(t,o,{get:()=>n[o],enumerable:!(i=u(n,o))||i.enumerable});return t};var d=t=>c(s({},"__esModule",{value:!0}),t);var w={};m(w,{releaseOutsideInert:()=>p,setOutsideInert:()=>h});module.exports=d(w);var r=new Map,l=new Map;function b(t){let n=t.ownerDocument.body,e=t;for(;e.parentElement&&e.parentElement!==n;)e=e.parentElement;return e.parentElement===n?e:null}function E(t){let n=new Set(l.values());if(n.size===0){for(let[e,i]of r)i||e.removeAttribute("inert");r.clear();return}for(let e of Array.from(t.children))if(!e.hasAttribute("data-skdx-live-announcer")){if(n.has(e)){let i=r.get(e);i!==void 0&&(i||e.removeAttribute("inert"),r.delete(e));continue}r.has(e)||(r.set(e,e.hasAttribute("inert")),e.setAttribute("inert",""))}}function h(t,n){if(n){if(l.has(t))return;let e=b(t);if(!e)return;l.set(t,e)}else if(!l.delete(t))return;E(t.ownerDocument.body)}function p(){for(let[t,n]of r)n||t.removeAttribute("inert");r.clear()}0&&(module.exports={releaseOutsideInert,setOutsideInert});

package/dist/internal/outsideInert.d.cts

@@ -0,0 +1,13 @@
+/**
+ * Marks everything outside `content`'s nearest `<body>` child `inert` while `enabled`, restoring it when all overlays release.
+ * @param content the overlay's panel; its nearest `<body>` child stays interactive.
+ * @param enabled whether the overlay is currently open and modal (non-modal overlays pass `false`).
+ * @internal
+ */
+export declare function setOutsideInert(content: Element, enabled: boolean): void;
+/**
+ * Removes all `inert` attributes this module has written, synchronously, as an escape hatch for refocusing overlays before `sync()` runs.
+ * @returns void
+ * @internal
+ */
+export declare function releaseOutsideInert(): void;

package/dist/internal/outsideInert.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Marks everything outside `content`'s nearest `<body>` child `inert` while `enabled`, restoring it when all overlays release.
+ * @param content the overlay's panel; its nearest `<body>` child stays interactive.
+ * @param enabled whether the overlay is currently open and modal (non-modal overlays pass `false`).
+ * @internal
+ */
+export declare function setOutsideInert(content: Element, enabled: boolean): void;
+/**
+ * Removes all `inert` attributes this module has written, synchronously, as an escape hatch for refocusing overlays before `sync()` runs.
+ * @returns void
+ * @internal
+ */
+export declare function releaseOutsideInert(): void;

package/dist/internal/outsideInert.js

@@ -0,0 +1 @@
+var r=new Map,o=new Map;function l(t){let n=t.ownerDocument.body,e=t;for(;e.parentElement&&e.parentElement!==n;)e=e.parentElement;return e.parentElement===n?e:null}function s(t){let n=new Set(o.values());if(n.size===0){for(let[e,i]of r)i||e.removeAttribute("inert");r.clear();return}for(let e of Array.from(t.children))if(!e.hasAttribute("data-skdx-live-announcer")){if(n.has(e)){let i=r.get(e);i!==void 0&&(i||e.removeAttribute("inert"),r.delete(e));continue}r.has(e)||(r.set(e,e.hasAttribute("inert")),e.setAttribute("inert",""))}}function u(t,n){if(n){if(o.has(t))return;let e=l(t);if(!e)return;o.set(t,e)}else if(!o.delete(t))return;s(t.ownerDocument.body)}function a(){for(let[t,n]of r)n||t.removeAttribute("inert");r.clear()}export{a as releaseOutsideInert,u as setOutsideInert};

package/dist/internal/overlay-arrow.cjs

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

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

@@ -1,25 +1,7 @@
-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
- */
+import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
+/** @internal Shared base for the `<skdx-*-arrow>` parts, the optional pointer from an overlay's Content back at its anchor, found by `positioning.ts`. */
 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.
-     */
+    /** Kept out of flow; typed as `CSSResultGroup` to allow subclass extension. */
     static styles: CSSResultGroup;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }

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

@@ -1,25 +1,7 @@
-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
- */
+import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
+/** @internal Shared base for the `<skdx-*-arrow>` parts, the optional pointer from an overlay's Content back at its anchor, found by `positioning.ts`. */
 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.
-     */
+    /** Kept out of flow; typed as `CSSResultGroup` to allow subclass extension. */
     static styles: CSSResultGroup;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }

package/dist/internal/overlay-arrow.js

@@ -1,4 +1,4 @@
-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`
+import{css as e,html as s,LitElement as l}from"lit";var t=class extends l{render(){return s`<slot></slot>`}};t.styles=e`
     :host {
       position: absolute;
       display: block;

package/dist/internal/part.d.cts

@@ -1,51 +1,11 @@
 /**
- * The styling hook every part of every component emits — the Web Components
- * half of `packages/react/src/utils/part.ts`.
+ * The styling hook every part of every component emits, put on the host (not the shadow root) since a document stylesheet cannot cross a shadow boundary.
  *
- * 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
+ * @see packages/skins/README.md for how a stylesheet consumes these hooks.
  * @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.
+ * Adds one part's class and `data-*` hooks to a host element via `classList.add`, so a consumer's own classes survive.
  *
  * @param host - The custom element itself.
  * @param component - Family name in kebab-case, e.g. `'tabs'`, `'tree-select'`.
@@ -53,20 +13,7 @@
  */
 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.
- *
+ * Mirrors a component's state attributes onto its host, where the skin class lives; a consumer-authored attribute (see {@link AUTHORED}) is left untouched.
  * @internal
  */
 export declare function reflectHostState(host: HTMLElement, attrs: Record<string, string | null | undefined>): void;

package/dist/internal/part.d.ts

@@ -1,51 +1,11 @@
 /**
- * The styling hook every part of every component emits — the Web Components
- * half of `packages/react/src/utils/part.ts`.
+ * The styling hook every part of every component emits, put on the host (not the shadow root) since a document stylesheet cannot cross a shadow boundary.
  *
- * 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
+ * @see packages/skins/README.md for how a stylesheet consumes these hooks.
  * @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.
+ * Adds one part's class and `data-*` hooks to a host element via `classList.add`, so a consumer's own classes survive.
  *
  * @param host - The custom element itself.
  * @param component - Family name in kebab-case, e.g. `'tabs'`, `'tree-select'`.
@@ -53,20 +13,7 @@
  */
 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.
- *
+ * Mirrors a component's state attributes onto its host, where the skin class lives; a consumer-authored attribute (see {@link AUTHORED}) is left untouched.
  * @internal
  */
 export declare function reflectHostState(host: HTMLElement, attrs: Record<string, string | null | undefined>): void;

package/dist/internal/pin-chars.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var l=(t,n)=>{for(var e in n)p(t,e,{get:n[e],enumerable:!0})},s=(t,n,e,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of o(n))!a.call(t,r)&&r!==e&&p(t,r,{get:()=>n[r],enumerable:!(i=c(n,r))||i.enumerable});return t};var g=t=>s(p({},"__esModule",{value:!0}),t);var P={};l(P,{pinCharAcceptor:()=>x,pinCharPattern:()=>b,pinInputDigitLabel:()=>h});module.exports=g(P);var u={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function x(t,n){if(n){let i=new RegExp(n);return r=>i.test(r)}let e=u[t]??null;return e?i=>e.test(i):()=>!0}function b(t,n){return n??u[t]?.source??"."}function h(t,n){return`Digit ${t} of ${n}`}0&&(module.exports={pinCharAcceptor,pinCharPattern,pinInputDigitLabel});

package/dist/internal/pin-chars.d.cts

@@ -0,0 +1,13 @@
+/** The character sets `type` names, in the spelling the contract declares. */
+export type PinInputType = 'text' | 'numeric' | 'alphanumeric' | 'alphabetic';
+/** Builds the per-character predicate used to accept or reject each keystroke. */
+export declare function pinCharAcceptor(type: PinInputType, pattern?: string): (char: string) => boolean;
+/** Returns the pattern source {@link pinCharAcceptor} applies, defaulting to `'.'` for `'text'`. */
+export declare function pinCharPattern(type: PinInputType, pattern?: string): string;
+/**
+ * The default accessible name for a pin box. `index` is 1-based (read aloud).
+ *
+ * @param index the box's position, counting from 1
+ * @param length how many boxes the code has
+ */
+export declare function pinInputDigitLabel(index: number, length: number): string;

package/dist/internal/pin-chars.d.ts

@@ -0,0 +1,13 @@
+/** The character sets `type` names, in the spelling the contract declares. */
+export type PinInputType = 'text' | 'numeric' | 'alphanumeric' | 'alphabetic';
+/** Builds the per-character predicate used to accept or reject each keystroke. */
+export declare function pinCharAcceptor(type: PinInputType, pattern?: string): (char: string) => boolean;
+/** Returns the pattern source {@link pinCharAcceptor} applies, defaulting to `'.'` for `'text'`. */
+export declare function pinCharPattern(type: PinInputType, pattern?: string): string;
+/**
+ * The default accessible name for a pin box. `index` is 1-based (read aloud).
+ *
+ * @param index the box's position, counting from 1
+ * @param length how many boxes the code has
+ */
+export declare function pinInputDigitLabel(index: number, length: number): string;

package/dist/internal/pin-chars.js

@@ -0,0 +1 @@
+var i={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function u(t,n){if(n){let e=new RegExp(n);return p=>e.test(p)}let r=i[t]??null;return r?e=>r.test(e):()=>!0}function c(t,n){return n??i[t]?.source??"."}function o(t,n){return`Digit ${t} of ${n}`}export{u as pinCharAcceptor,c as pinCharPattern,o as pinInputDigitLabel};

package/dist/internal/placement.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var v=(e,i)=>{for(var t in i)p(e,t,{get:i[t],enumerable:!0})},A=(e,i,t,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of w(i))!$.call(e,r)&&r!==t&&p(e,r,{get:()=>i[r],enumerable:!(n=O(i,r))||n.enumerable});return e};var L=e=>A(p({},"__esModule",{value:!0}),e);var I={};v(I,{OPPOSITE_SIDE:()=>f,arrowStyle:()=>u,placementParts:()=>m,positioningMiddleware:()=>j,setMeasurementProperties:()=>c,styleArrow:()=>C,toPlacement:()=>H});module.exports=L(I);function H(e,i){return i==="center"?e:`${e}-${i}`}function m(e){let[i,t="center"]=e.split("-");return[i,t]}var W={start:"0%",center:"50%",end:"100%"};function c(e,i,t){let{availableWidth:n,availableHeight:r,triggerWidth:a,side:o,align:l}=t,d=W[l],g=o==="top"||o==="bottom"?`${d} ${o==="top"?"100%":"0%"}`:`${o==="left"?"100%":"0%"} ${d}`;e.style.setProperty(`--skdx-${i}-available-width`,`${n}px`),e.style.setProperty(`--skdx-${i}-available-height`,`${r}px`),e.style.setProperty(`--skdx-${i}-trigger-width`,`${a}px`),e.style.setProperty(`--skdx-${i}-transform-origin`,g)}var f={top:"bottom",right:"left",bottom:"top",left:"right"};function u(e,i){let t=f[i],n={position:"absolute",left:e?.x!=null?`${e.x}px`:"",top:e?.y!=null?`${e.y}px`:"",right:"",bottom:"",transform:""};return t==="top"&&Object.assign(n,{top:"0px",transform:"translateY(-100%)"}),t==="bottom"&&Object.assign(n,{bottom:"0px",transform:"translateY(100%)"}),t==="left"&&Object.assign(n,{left:"0px",transform:"translateX(-100%)"}),t==="right"&&Object.assign(n,{right:"0px",transform:"translateX(100%)"}),n}function C(e,i,t){Object.assign(e.style,u(i,t))}function j(e,i){let{sideOffset:t=0,alignOffset:n=0,avoidCollisions:r=!0,collisionPadding:a=8,collisionBoundary:o,component:l,arrow:d,arrowPadding:g=0,hideWhenDetached:b=!1}=i,s=o?{boundary:o}:{};return[e.offset({mainAxis:t,alignmentAxis:n}),...r?[e.flip({padding:a,...s}),e.shift({padding:a,limiter:e.limitShift(),...s})]:[],e.size({padding:a,...s,apply({availableWidth:h,availableHeight:y,elements:x,rects:P,placement:E}){if(!l)return;let[S,M]=m(E);c(x.floating,l,{availableWidth:h,availableHeight:y,triggerWidth:P.reference.width,side:S,align:M})}}),...d?[e.arrow({element:d,padding:g})]:[],...b?[e.hide({strategy:"referenceHidden",...s})]:[]]}0&&(module.exports={OPPOSITE_SIDE,arrowStyle,placementParts,positioningMiddleware,setMeasurementProperties,styleArrow,toPlacement});

package/dist/internal/placement.d.cts

@@ -0,0 +1,102 @@
+/** A physical edge of the anchor. */
+export type PhysicalSide = 'top' | 'right' | 'bottom' | 'left';
+/** Side the floating content is placed against; `start`/`end` are logical and resolve under `dir`. */
+export type Side = PhysicalSide | 'start' | 'end';
+/** Alignment of the floating element along the chosen {@link Side}. */
+export type Align = 'start' | 'center' | 'end';
+/** Minimum distance from the collision boundary, for every side or per side. */
+export type CollisionPadding = number | Partial<Record<PhysicalSide, number>>;
+/** The floating-ui placement string for a resolved side and alignment. */
+export declare function toPlacement(side: PhysicalSide, align: Align): string;
+/** The side and alignment a floating-ui placement string resolved to. */
+export declare function placementParts(placement: string): [PhysicalSide, Align];
+/**
+ * Writes the four `--skdx-<component>-*` measurement properties onto the floating element after a reposition, with the transform origin derived from the resolved side/alignment so a flipped panel grows from the edge it actually sits on.
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/** The edge an arrow sits on: opposite the side the panel was placed against. */
+export declare const OPPOSITE_SIDE: Record<PhysicalSide, PhysicalSide>;
+/** Inline style for an arrow element given floating-ui's arrow offsets and the resolved side. */
+export declare function arrowStyle(offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): {
+    position: 'absolute';
+    left: string;
+    top: string;
+    right: string;
+    bottom: string;
+    transform: string;
+};
+/** Applies {@link arrowStyle} to an arrow element in place. */
+export declare function styleArrow(el: HTMLElement, offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): void;
+/** What the `size` middleware reports after flip/shift settled. */
+export interface SizeState {
+    availableWidth: number;
+    availableHeight: number;
+    elements: {
+        floating: HTMLElement;
+    };
+    rects: {
+        reference: {
+            width: number;
+        };
+    };
+    placement: string;
+}
+/** The floating-ui middleware factories an adapter injects — `M` is its `Middleware`, `L` its shift limiter, `E` what its `arrow` accepts as the element. */
+export interface FloatingMiddleware<M, L, E> {
+    offset(options: {
+        mainAxis: number;
+        alignmentAxis: number;
+    }): M;
+    flip(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+    }): M;
+    shift(options: {
+        padding: CollisionPadding;
+        limiter: L;
+        boundary?: Element | Element[];
+    }): M;
+    limitShift(): L;
+    size(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+        apply(state: SizeState): void;
+    }): M;
+    arrow(options: {
+        element: E;
+        padding: number;
+    }): M;
+    hide(options: {
+        strategy: 'referenceHidden';
+        boundary?: Element | Element[];
+    }): M;
+}
+/** The options {@link positioningMiddleware} turns into a middleware list. */
+export interface PositioningOptions<E> {
+    sideOffset?: number | undefined;
+    alignOffset?: number | undefined;
+    avoidCollisions?: boolean | undefined;
+    collisionPadding?: CollisionPadding | undefined;
+    collisionBoundary?: Element | Element[] | null | undefined;
+    /** Kebab-case component name the measurement properties are written under; omitted, none are written. */
+    component?: string | undefined;
+    arrow?: E | null | undefined;
+    arrowPadding?: number | undefined;
+    hideWhenDetached?: boolean | undefined;
+}
+/**
+ * The one middleware order every panel uses: offset, then flip/shift when collisions are avoided, then `size` (so it measures the placement the content landed on), the arrow, and `hide` last so visibility is judged against the settled placement.
+ */
+export declare function positioningMiddleware<M, L, E>(fu: FloatingMiddleware<M, L, E>, options: PositioningOptions<E>): M[];

package/dist/internal/placement.d.ts

@@ -0,0 +1,102 @@
+/** A physical edge of the anchor. */
+export type PhysicalSide = 'top' | 'right' | 'bottom' | 'left';
+/** Side the floating content is placed against; `start`/`end` are logical and resolve under `dir`. */
+export type Side = PhysicalSide | 'start' | 'end';
+/** Alignment of the floating element along the chosen {@link Side}. */
+export type Align = 'start' | 'center' | 'end';
+/** Minimum distance from the collision boundary, for every side or per side. */
+export type CollisionPadding = number | Partial<Record<PhysicalSide, number>>;
+/** The floating-ui placement string for a resolved side and alignment. */
+export declare function toPlacement(side: PhysicalSide, align: Align): string;
+/** The side and alignment a floating-ui placement string resolved to. */
+export declare function placementParts(placement: string): [PhysicalSide, Align];
+/**
+ * Writes the four `--skdx-<component>-*` measurement properties onto the floating element after a reposition, with the transform origin derived from the resolved side/alignment so a flipped panel grows from the edge it actually sits on.
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/** The edge an arrow sits on: opposite the side the panel was placed against. */
+export declare const OPPOSITE_SIDE: Record<PhysicalSide, PhysicalSide>;
+/** Inline style for an arrow element given floating-ui's arrow offsets and the resolved side. */
+export declare function arrowStyle(offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): {
+    position: 'absolute';
+    left: string;
+    top: string;
+    right: string;
+    bottom: string;
+    transform: string;
+};
+/** Applies {@link arrowStyle} to an arrow element in place. */
+export declare function styleArrow(el: HTMLElement, offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): void;
+/** What the `size` middleware reports after flip/shift settled. */
+export interface SizeState {
+    availableWidth: number;
+    availableHeight: number;
+    elements: {
+        floating: HTMLElement;
+    };
+    rects: {
+        reference: {
+            width: number;
+        };
+    };
+    placement: string;
+}
+/** The floating-ui middleware factories an adapter injects — `M` is its `Middleware`, `L` its shift limiter, `E` what its `arrow` accepts as the element. */
+export interface FloatingMiddleware<M, L, E> {
+    offset(options: {
+        mainAxis: number;
+        alignmentAxis: number;
+    }): M;
+    flip(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+    }): M;
+    shift(options: {
+        padding: CollisionPadding;
+        limiter: L;
+        boundary?: Element | Element[];
+    }): M;
+    limitShift(): L;
+    size(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+        apply(state: SizeState): void;
+    }): M;
+    arrow(options: {
+        element: E;
+        padding: number;
+    }): M;
+    hide(options: {
+        strategy: 'referenceHidden';
+        boundary?: Element | Element[];
+    }): M;
+}
+/** The options {@link positioningMiddleware} turns into a middleware list. */
+export interface PositioningOptions<E> {
+    sideOffset?: number | undefined;
+    alignOffset?: number | undefined;
+    avoidCollisions?: boolean | undefined;
+    collisionPadding?: CollisionPadding | undefined;
+    collisionBoundary?: Element | Element[] | null | undefined;
+    /** Kebab-case component name the measurement properties are written under; omitted, none are written. */
+    component?: string | undefined;
+    arrow?: E | null | undefined;
+    arrowPadding?: number | undefined;
+    hideWhenDetached?: boolean | undefined;
+}
+/**
+ * The one middleware order every panel uses: offset, then flip/shift when collisions are avoided, then `size` (so it measures the placement the content landed on), the arrow, and `hide` last so visibility is judged against the settled placement.
+ */
+export declare function positioningMiddleware<M, L, E>(fu: FloatingMiddleware<M, L, E>, options: PositioningOptions<E>): M[];

package/dist/internal/placement.js

@@ -0,0 +1 @@
+function O(e,i){return i==="center"?e:`${e}-${i}`}function x(e){let[i,t="center"]=e.split("-");return[i,t]}var P={start:"0%",center:"50%",end:"100%"};function E(e,i,t){let{availableWidth:n,availableHeight:s,triggerWidth:o,side:r,align:d}=t,a=P[d],g=r==="top"||r==="bottom"?`${a} ${r==="top"?"100%":"0%"}`:`${r==="left"?"100%":"0%"} ${a}`;e.style.setProperty(`--skdx-${i}-available-width`,`${n}px`),e.style.setProperty(`--skdx-${i}-available-height`,`${s}px`),e.style.setProperty(`--skdx-${i}-trigger-width`,`${o}px`),e.style.setProperty(`--skdx-${i}-transform-origin`,g)}var S={top:"bottom",right:"left",bottom:"top",left:"right"};function M(e,i){let t=S[i],n={position:"absolute",left:e?.x!=null?`${e.x}px`:"",top:e?.y!=null?`${e.y}px`:"",right:"",bottom:"",transform:""};return t==="top"&&Object.assign(n,{top:"0px",transform:"translateY(-100%)"}),t==="bottom"&&Object.assign(n,{bottom:"0px",transform:"translateY(100%)"}),t==="left"&&Object.assign(n,{left:"0px",transform:"translateX(-100%)"}),t==="right"&&Object.assign(n,{right:"0px",transform:"translateX(100%)"}),n}function w(e,i,t){Object.assign(e.style,M(i,t))}function $(e,i){let{sideOffset:t=0,alignOffset:n=0,avoidCollisions:s=!0,collisionPadding:o=8,collisionBoundary:r,component:d,arrow:a,arrowPadding:g=0,hideWhenDetached:p=!1}=i,l=r?{boundary:r}:{};return[e.offset({mainAxis:t,alignmentAxis:n}),...s?[e.flip({padding:o,...l}),e.shift({padding:o,limiter:e.limitShift(),...l})]:[],e.size({padding:o,...l,apply({availableWidth:m,availableHeight:c,elements:f,rects:u,placement:b}){if(!d)return;let[h,y]=x(b);E(f.floating,d,{availableWidth:m,availableHeight:c,triggerWidth:u.reference.width,side:h,align:y})}}),...a?[e.arrow({element:a,padding:g})]:[],...p?[e.hide({strategy:"referenceHidden",...l})]:[]]}export{S as OPPOSITE_SIDE,M as arrowStyle,x as placementParts,$ as positioningMiddleware,E as setMeasurementProperties,w as styleArrow,O as toPlacement};