@skdx/web-components 0.26.0

package/dist/internal/pointer-angle.d.cts

@@ -0,0 +1,105 @@
+/**
+ * Pointer-drag-to-angle, for any element whose input is a *direction* rather
+ * than a distance — an angle slider, a hue wheel, a gradient-angle picker, a
+ * compass. Mirrors `packages/react/src/utils/usePointerAngle.ts`, shaped like
+ * the other helpers in this directory: a plain function over an element that
+ * returns a disposer, not a transliterated hook.
+ *
+ * **Convention: 0° is at 12 o'clock and the angle increases clockwise**, so
+ * 90° is 3 o'clock, 180° is 6 o'clock and 270° is 9 o'clock. Values are always
+ * in `[0, 360)`; 360 is never emitted.
+ *
+ * It knows nothing about what the angle *means*: no value range, no ARIA, no
+ * `disabled`/`read-only` policy beyond the `enabled` gate the caller supplies.
+ * That is what lets one helper serve both `<skdx-angle-slider>` (0–359 degrees)
+ * and a hue wheel (0–359 hue) without either leaking into the other.
+ *
+ * @internal
+ */
+/**
+ * Options for {@link trackPointerAngle}. Every callback is read at call time
+ * rather than captured at subscribe time, so an element that rebinds a handler
+ * (or changes its `step`) mid-drag is honoured by the drag already in flight.
+ *
+ * @internal
+ */
+export interface PointerAngleOptions {
+    /**
+     * Snap increment in degrees, or a getter for one. Angles are rounded to the
+     * nearest multiple before any callback sees them, and a drag that stays
+     * within one increment emits nothing — which is what keeps a per-pixel
+     * `pointermove` from becoming a per-pixel render. Pass a getter when the
+     * increment is derived from live state (`<skdx-angle-slider>` passes
+     * `() => restrictToMarks ? 0 : step`).
+     * @default 0 — continuous; every pixel of movement reports a fresh angle.
+     */
+    step?: number | (() => number);
+    /**
+     * Consulted on `pointerdown`; returning `false` ignores the gesture
+     * entirely — no capture, no callbacks, no drag. This is where a
+     * `disabled`/`read-only` policy lives, since a custom element cannot simply
+     * decline to wire up its own listener the way a React component can.
+     * @default undefined — every gesture starts a drag.
+     */
+    enabled?: () => boolean;
+    /**
+     * Fires with the angle in `[0, 360)` on pointer down and on every subsequent
+     * move that changes it, plus the native event that produced it.
+     */
+    onAngleChange: (angle: number, event: PointerEvent) => void;
+    /**
+     * Fires once with the final angle when the drag ends — `pointerup` or
+     * `pointercancel`. This is the hook that lets a consumer avoid one network
+     * call per frame; `onAngleChange` is the per-frame signal.
+     * @default undefined — no-op if omitted.
+     */
+    onAngleChangeEnd?: (angle: number, event: PointerEvent) => void;
+    /**
+     * Fires with `true` when a drag starts and `false` when it ends, for a
+     * `data-dragging` styling hook. Called twice per drag, never per move.
+     * @default undefined — no-op if omitted.
+     */
+    onDraggingChange?: (dragging: boolean) => void;
+}
+/**
+ * Turns pointer gestures on `element` into normalized angles. `element`'s
+ * border box is the measurement source: its centre is the pivot, and it is
+ * re-measured on every move, so a page that scrolls or resizes mid-drag stays
+ * correct.
+ *
+ * It takes pointer capture on the element so a drag survives leaving it, and
+ * tracks the drag through document-level listeners so it survives leaving the
+ * *window* too. Those listeners are removed on pointer up, on `pointercancel`
+ * (which also fires `onAngleChangeEnd`, so a drag interrupted by a system
+ * gesture still commits rather than hanging), and by the returned disposer —
+ * where nothing is fired, because a disconnected element has no value to
+ * commit to.
+ *
+ * A second pointer landing while a drag is in flight is ignored: the first one
+ * owns the drag until it ends, so its listeners can never be stranded.
+ *
+ * @returns A disposer that unsubscribes the `pointerdown` listener and any
+ * in-flight drag. Call it from `disconnectedCallback`.
+ *
+ * @example
+ * ```ts
+ * override connectedCallback(): void {
+ *   super.connectedCallback();
+ *   this.disposePointer = trackPointerAngle(this, {
+ *     step: () => this.step,
+ *     enabled: () => !this.disabled,
+ *     onAngleChange: (angle) => this.commit(angle),
+ *     onAngleChangeEnd: () => this.dispatchEvent(new CustomEvent('value-commit', { detail: this.value })),
+ *     onDraggingChange: (dragging) => { this.dragging = dragging; },
+ *   });
+ * }
+ *
+ * override disconnectedCallback(): void {
+ *   this.disposePointer?.();
+ *   super.disconnectedCallback();
+ * }
+ * ```
+ *
+ * @internal
+ */
+export declare function trackPointerAngle(element: HTMLElement, options: PointerAngleOptions): () => void;

package/dist/internal/pointer-angle.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Pointer-drag-to-angle, for any element whose input is a *direction* rather
+ * than a distance — an angle slider, a hue wheel, a gradient-angle picker, a
+ * compass. Mirrors `packages/react/src/utils/usePointerAngle.ts`, shaped like
+ * the other helpers in this directory: a plain function over an element that
+ * returns a disposer, not a transliterated hook.
+ *
+ * **Convention: 0° is at 12 o'clock and the angle increases clockwise**, so
+ * 90° is 3 o'clock, 180° is 6 o'clock and 270° is 9 o'clock. Values are always
+ * in `[0, 360)`; 360 is never emitted.
+ *
+ * It knows nothing about what the angle *means*: no value range, no ARIA, no
+ * `disabled`/`read-only` policy beyond the `enabled` gate the caller supplies.
+ * That is what lets one helper serve both `<skdx-angle-slider>` (0–359 degrees)
+ * and a hue wheel (0–359 hue) without either leaking into the other.
+ *
+ * @internal
+ */
+/**
+ * Options for {@link trackPointerAngle}. Every callback is read at call time
+ * rather than captured at subscribe time, so an element that rebinds a handler
+ * (or changes its `step`) mid-drag is honoured by the drag already in flight.
+ *
+ * @internal
+ */
+export interface PointerAngleOptions {
+    /**
+     * Snap increment in degrees, or a getter for one. Angles are rounded to the
+     * nearest multiple before any callback sees them, and a drag that stays
+     * within one increment emits nothing — which is what keeps a per-pixel
+     * `pointermove` from becoming a per-pixel render. Pass a getter when the
+     * increment is derived from live state (`<skdx-angle-slider>` passes
+     * `() => restrictToMarks ? 0 : step`).
+     * @default 0 — continuous; every pixel of movement reports a fresh angle.
+     */
+    step?: number | (() => number);
+    /**
+     * Consulted on `pointerdown`; returning `false` ignores the gesture
+     * entirely — no capture, no callbacks, no drag. This is where a
+     * `disabled`/`read-only` policy lives, since a custom element cannot simply
+     * decline to wire up its own listener the way a React component can.
+     * @default undefined — every gesture starts a drag.
+     */
+    enabled?: () => boolean;
+    /**
+     * Fires with the angle in `[0, 360)` on pointer down and on every subsequent
+     * move that changes it, plus the native event that produced it.
+     */
+    onAngleChange: (angle: number, event: PointerEvent) => void;
+    /**
+     * Fires once with the final angle when the drag ends — `pointerup` or
+     * `pointercancel`. This is the hook that lets a consumer avoid one network
+     * call per frame; `onAngleChange` is the per-frame signal.
+     * @default undefined — no-op if omitted.
+     */
+    onAngleChangeEnd?: (angle: number, event: PointerEvent) => void;
+    /**
+     * Fires with `true` when a drag starts and `false` when it ends, for a
+     * `data-dragging` styling hook. Called twice per drag, never per move.
+     * @default undefined — no-op if omitted.
+     */
+    onDraggingChange?: (dragging: boolean) => void;
+}
+/**
+ * Turns pointer gestures on `element` into normalized angles. `element`'s
+ * border box is the measurement source: its centre is the pivot, and it is
+ * re-measured on every move, so a page that scrolls or resizes mid-drag stays
+ * correct.
+ *
+ * It takes pointer capture on the element so a drag survives leaving it, and
+ * tracks the drag through document-level listeners so it survives leaving the
+ * *window* too. Those listeners are removed on pointer up, on `pointercancel`
+ * (which also fires `onAngleChangeEnd`, so a drag interrupted by a system
+ * gesture still commits rather than hanging), and by the returned disposer —
+ * where nothing is fired, because a disconnected element has no value to
+ * commit to.
+ *
+ * A second pointer landing while a drag is in flight is ignored: the first one
+ * owns the drag until it ends, so its listeners can never be stranded.
+ *
+ * @returns A disposer that unsubscribes the `pointerdown` listener and any
+ * in-flight drag. Call it from `disconnectedCallback`.
+ *
+ * @example
+ * ```ts
+ * override connectedCallback(): void {
+ *   super.connectedCallback();
+ *   this.disposePointer = trackPointerAngle(this, {
+ *     step: () => this.step,
+ *     enabled: () => !this.disabled,
+ *     onAngleChange: (angle) => this.commit(angle),
+ *     onAngleChangeEnd: () => this.dispatchEvent(new CustomEvent('value-commit', { detail: this.value })),
+ *     onDraggingChange: (dragging) => { this.dragging = dragging; },
+ *   });
+ * }
+ *
+ * override disconnectedCallback(): void {
+ *   this.disposePointer?.();
+ *   super.disconnectedCallback();
+ * }
+ * ```
+ *
+ * @internal
+ */
+export declare function trackPointerAngle(element: HTMLElement, options: PointerAngleOptions): () => void;

package/dist/internal/pointer-angle.js

@@ -0,0 +1 @@
+function b(e,n){return(Math.atan2(e,-n)*180/Math.PI+360)%360}function s(e,n){return n?Math.round(Math.round(e/n)*n*1e6)/1e6%360:e}function h(e,n){let g=null,c=r=>{let t=e.getBoundingClientRect(),o=r.clientX-(t.left+t.width/2),d=r.clientY-(t.top+t.height/2),i=typeof n.step=="function"?n.step():n.step??0;return s(b(o,d),i)},v=r=>{if(g||n.enabled&&!n.enabled())return;let{pointerId:t}=r;e.setPointerCapture?.(t);let o=c(r);n.onDraggingChange?.(!0),n.onAngleChange(o,r);let d=u=>{if(u.pointerId!==t)return;let l=c(u);l!==o&&(o=l,n.onAngleChange(l,u))},i=u=>{u.pointerId===t&&(g?.(),n.onDraggingChange?.(!1),n.onAngleChangeEnd?.(o,u))},a=e.ownerDocument;a.addEventListener("pointermove",d),a.addEventListener("pointerup",i),a.addEventListener("pointercancel",i),g=()=>{a.removeEventListener("pointermove",d),a.removeEventListener("pointerup",i),a.removeEventListener("pointercancel",i),g=null}};return e.addEventListener("pointerdown",v),()=>{e.removeEventListener("pointerdown",v),g?.()}}export{h as trackPointerAngle};

package/dist/internal/positioning.cjs

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

package/dist/internal/positioning.d.cts

@@ -0,0 +1,98 @@
+import { type Direction, type PhysicalSide } from './direction.cjs';
+/**
+ * @internal Edge of the anchor the floating element is placed against.
+ * `start`/`end` are *logical*: they resolve to `left`/`right` under
+ * `dir="ltr"` and swap under `dir="rtl"`, so a panel authored as `side="end"`
+ * mirrors itself. `left`/`right` are physical and never mirror. `data-side`
+ * keeps reporting a physical side — floating-ui's resolved, post-flip
+ * placement, exactly as before.
+ */
+export type Side = PhysicalSide | 'start' | 'end';
+/** @internal Alignment of the floating element along the chosen {@link Side}. */
+export type Align = 'start' | 'center' | 'end';
+/** @internal Side/align options mirroring the React popper util's public API. */
+export interface PositionOptions {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+    avoidCollisions?: boolean;
+    /**
+     * Minimum distance in pixels kept from the collision boundary. A number
+     * applies to every side; an object sets only the sides it names, the rest
+     * falling back to `0`.
+     */
+    collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
+    /**
+     * Element (or elements) collisions are measured against, instead of the
+     * floating element's clipping ancestors. Use it to keep an overlay inside a
+     * scroll container or one pane of a split layout rather than the whole
+     * viewport.
+     * @default undefined — the floating element's clipping ancestors.
+     */
+    collisionBoundary?: Element | Element[] | null;
+    /**
+     * Kebab-case component name the measurement CSS custom properties are
+     * namespaced under — `"popover"` yields `--skdx-popover-available-width` and
+     * friends. The namespace belongs to the component, not to its consumer, so
+     * each Content part passes its own slug.
+     * @internal
+     * @default undefined — an internal popper with no documented namespace writes no measurement properties at all.
+     */
+    component?: string;
+    /** Writing direction override; omit to resolve from the nearest `[dir]` ancestor of the anchor. */
+    direction?: Direction;
+    /**
+     * Resolves the `<skdx-*-arrow>` element inside `floating`, if one is
+     * rendered. Called on every reposition rather than captured once, so an
+     * arrow added after the overlay opened is picked up on the next update.
+     */
+    arrow?: () => HTMLElement | null | undefined;
+}
+/**
+ * Boolean attribute converter for positioning props that default to `true`
+ * (`avoid-collisions`). Lit's stock `Boolean` converter reads attribute
+ * *presence*, so `avoid-collisions="false"` would come back `true` and the
+ * prop could never be switched off from HTML at all — unlike React, where
+ * `avoidCollisions={false}` is the documented way to opt out. Here the value
+ * wins: only the literal string `"false"` is false.
+ * @internal
+ */
+export declare const optOutBoolean: {
+    fromAttribute: (value: string | null) => boolean;
+};
+/**
+ * Writes the four measurement custom properties onto the floating element
+ * after each reposition, so a consumer can size the panel from CSS alone
+ * (`max-height: var(--skdx-select-available-height)`) instead of measuring in
+ * JavaScript. Mirrored by `PopperContent`/`usePopperPosition` in the other
+ * four packages and asserted by `assertPopperMeasurementProperties`.
+ *
+ * The transform origin is derived from the *resolved* side and alignment, so
+ * a panel that flipped grows from the edge it actually landed on.
+ *
+ * ponytail: origin is edge-and-alignment accurate but not arrow-accurate —
+ * a panel with a shifted arrow scales from the aligned edge rather than from
+ * the arrow's tip. Feed the arrow middleware's offset in here if that ever
+ * shows.
+ * @internal
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/**
+ * Positions `floating` relative to `anchor` using floating-ui, re-running on
+ * scroll/resize while active. Reflects floating-ui's *resolved* (post-flip,
+ * post-shift) placement onto `floating` as `data-side`/`data-align`, and
+ * positions an optional arrow element from the same resolved placement —
+ * the same contract as React's `PopperContent`/`PopperArrow`. Given a
+ * `component` namespace it also writes the four measurement custom
+ * properties (see {@link setMeasurementProperties}) onto `floating` after
+ * each reposition. Returns a cleanup function to call on close.
+ * @internal
+ */
+export declare function positionFloating(anchor: HTMLElement, floating: HTMLElement, options?: PositionOptions): () => void;

package/dist/internal/positioning.d.ts

@@ -0,0 +1,98 @@
+import { type Direction, type PhysicalSide } from './direction.js';
+/**
+ * @internal Edge of the anchor the floating element is placed against.
+ * `start`/`end` are *logical*: they resolve to `left`/`right` under
+ * `dir="ltr"` and swap under `dir="rtl"`, so a panel authored as `side="end"`
+ * mirrors itself. `left`/`right` are physical and never mirror. `data-side`
+ * keeps reporting a physical side — floating-ui's resolved, post-flip
+ * placement, exactly as before.
+ */
+export type Side = PhysicalSide | 'start' | 'end';
+/** @internal Alignment of the floating element along the chosen {@link Side}. */
+export type Align = 'start' | 'center' | 'end';
+/** @internal Side/align options mirroring the React popper util's public API. */
+export interface PositionOptions {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+    avoidCollisions?: boolean;
+    /**
+     * Minimum distance in pixels kept from the collision boundary. A number
+     * applies to every side; an object sets only the sides it names, the rest
+     * falling back to `0`.
+     */
+    collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
+    /**
+     * Element (or elements) collisions are measured against, instead of the
+     * floating element's clipping ancestors. Use it to keep an overlay inside a
+     * scroll container or one pane of a split layout rather than the whole
+     * viewport.
+     * @default undefined — the floating element's clipping ancestors.
+     */
+    collisionBoundary?: Element | Element[] | null;
+    /**
+     * Kebab-case component name the measurement CSS custom properties are
+     * namespaced under — `"popover"` yields `--skdx-popover-available-width` and
+     * friends. The namespace belongs to the component, not to its consumer, so
+     * each Content part passes its own slug.
+     * @internal
+     * @default undefined — an internal popper with no documented namespace writes no measurement properties at all.
+     */
+    component?: string;
+    /** Writing direction override; omit to resolve from the nearest `[dir]` ancestor of the anchor. */
+    direction?: Direction;
+    /**
+     * Resolves the `<skdx-*-arrow>` element inside `floating`, if one is
+     * rendered. Called on every reposition rather than captured once, so an
+     * arrow added after the overlay opened is picked up on the next update.
+     */
+    arrow?: () => HTMLElement | null | undefined;
+}
+/**
+ * Boolean attribute converter for positioning props that default to `true`
+ * (`avoid-collisions`). Lit's stock `Boolean` converter reads attribute
+ * *presence*, so `avoid-collisions="false"` would come back `true` and the
+ * prop could never be switched off from HTML at all — unlike React, where
+ * `avoidCollisions={false}` is the documented way to opt out. Here the value
+ * wins: only the literal string `"false"` is false.
+ * @internal
+ */
+export declare const optOutBoolean: {
+    fromAttribute: (value: string | null) => boolean;
+};
+/**
+ * Writes the four measurement custom properties onto the floating element
+ * after each reposition, so a consumer can size the panel from CSS alone
+ * (`max-height: var(--skdx-select-available-height)`) instead of measuring in
+ * JavaScript. Mirrored by `PopperContent`/`usePopperPosition` in the other
+ * four packages and asserted by `assertPopperMeasurementProperties`.
+ *
+ * The transform origin is derived from the *resolved* side and alignment, so
+ * a panel that flipped grows from the edge it actually landed on.
+ *
+ * ponytail: origin is edge-and-alignment accurate but not arrow-accurate —
+ * a panel with a shifted arrow scales from the aligned edge rather than from
+ * the arrow's tip. Feed the arrow middleware's offset in here if that ever
+ * shows.
+ * @internal
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/**
+ * Positions `floating` relative to `anchor` using floating-ui, re-running on
+ * scroll/resize while active. Reflects floating-ui's *resolved* (post-flip,
+ * post-shift) placement onto `floating` as `data-side`/`data-align`, and
+ * positions an optional arrow element from the same resolved placement —
+ * the same contract as React's `PopperContent`/`PopperArrow`. Given a
+ * `component` namespace it also writes the four measurement custom
+ * properties (see {@link setMeasurementProperties}) onto `floating` after
+ * each reposition. Returns a cleanup function to call on close.
+ * @internal
+ */
+export declare function positionFloating(anchor: HTMLElement, floating: HTMLElement, options?: PositionOptions): () => void;

package/dist/internal/positioning.js

@@ -0,0 +1 @@
+import{arrow as A,autoUpdate as v,computePosition as O,flip as w,limitShift as E,offset as H,shift as M,size as L}from"@floating-ui/dom";import{resolveDirection as T,resolvePhysicalSide as I}from"./direction.js";var N={fromAttribute:t=>t!=="false"};function W(t,e){return e==="center"?t:`${t}-${e}`}var k={start:"0%",center:"50%",end:"100%"};function D(t,e,o){let{availableWidth:i,availableHeight:d,triggerWidth:c,side:n,align:p}=o,r=k[p],l=n==="top"||n==="bottom"?`${r} ${n==="top"?"100%":"0%"}`:`${n==="left"?"100%":"0%"} ${r}`;t.style.setProperty(`--skdx-${e}-available-width`,`${i}px`),t.style.setProperty(`--skdx-${e}-available-height`,`${d}px`),t.style.setProperty(`--skdx-${e}-trigger-width`,`${c}px`),t.style.setProperty(`--skdx-${e}-transform-origin`,l)}var R={top:"bottom",right:"left",bottom:"top",left:"right"};function B(t,e,o){let i=R[o];Object.assign(t.style,{position:"absolute",left:e?.x!=null?`${e.x}px`:"",top:e?.y!=null?`${e.y}px`:"",right:"",bottom:"",transform:i==="top"||i==="bottom"?`translateY(${i==="top"?"-100%":"100%"})`:`translateX(${i==="left"?"-100%":"100%"})`,[i]:"0"})}function _(t,e,o={}){let{side:i="bottom",align:d="center",sideOffset:c=0,alignOffset:n=0,avoidCollisions:p=!0,collisionPadding:r=8,collisionBoundary:l,component:h,arrow:f,direction:x}=o,g=l?{boundary:l}:{};return v(t,e,()=>{let s=f?.()??null,S=I(i,T(t,x));O(t,e,{strategy:"fixed",placement:W(S,d),middleware:[H({mainAxis:c,alignmentAxis:n}),...p?[w({padding:r,...g}),M({padding:r,limiter:E(),...g})]:[],L({padding:r,...g,apply({availableWidth:m,availableHeight:u,elements:y,rects:b,placement:a}){if(!h)return;let[P,$="center"]=a.split("-");D(y.floating,h,{availableWidth:m,availableHeight:u,triggerWidth:b.reference.width,side:P,align:$})}}),...s?[A({element:s})]:[]]}).then(({x:m,y:u,placement:y,middlewareData:b})=>{Object.assign(e.style,{position:"fixed",left:`${m}px`,top:`${u}px`});let[a,P="center"]=y.split("-");e.setAttribute("data-side",a),e.setAttribute("data-align",P),s&&B(s,b.arrow,a)})})}export{N as optOutBoolean,_ as positionFloating,D as setMeasurementProperties};

package/dist/internal/segmented-field.cjs

@@ -0,0 +1,21 @@
+"use strict";var f=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var $=(e,a)=>{for(var r in a)f(e,r,{get:a[r],enumerable:!0})},k=(e,a,r,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of h(a))!E.call(e,t)&&t!==r&&f(e,t,{get:()=>a[t],enumerable:!(l=T(a,t))||l.enumerable});return e};var x=e=>k(f({},"__esModule",{value:!0}),e);var H={};$(H,{renderSegmentedField:()=>M});module.exports=x(H);var i=require("lit"),d=require("./date-segments.cjs"),s=require("./direction.cjs"),b=require("./part.cjs"),A="Empty",L={year:"year",month:"month",day:"day",hour:"hour",minute:"minute",second:"second",dayPeriod:"AM/PM"};function v(e){return e?Array.from(e.querySelectorAll('[role="spinbutton"][data-segment]')):[]}function o(e,a,r){let l=v(e.parentElement),t=l[l.indexOf(e)+a];t&&(r.current=0,t.focus())}function m(e,a,r,l){if(a.readOnly)return;let t={...a.values,[r]:l};(r==="month"||r==="year")&&t.day!=null&&(t.day=Math.min(t.day,(0,d.daysInMonth)(t.year,t.month))),a.onValuesChange(t),(e.parentElement??e).dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}function w(e,a,r){let l=a.type,t=e.currentTarget,y=(0,s.directionalKey)(e.key,t);if(y==="ArrowLeft"||y==="ArrowRight"){e.preventDefault(),o(t,y==="ArrowRight"?1:-1,r.buffer);return}if(!r.readOnly){if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault(),r.buffer.current=0,m(t,r,l,(0,d.stepSegment)(a,e.key==="ArrowUp"?1:-1));return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),r.buffer.current=0,m(t,r,l,e.key==="Home"?a.min:a.max);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),r.buffer.current=0,m(t,r,l,null);return}if(l==="dayPeriod"){let u=e.key.toLowerCase();(u==="a"||u==="p")&&(e.preventDefault(),m(t,r,l,u==="a"?0:1));return}if(/^\d$/.test(e.key)){e.preventDefault();let u=(0,d.typeDigit)(a,r.buffer.current,Number(e.key));r.buffer.current=u.buffer,m(t,r,l,u.value),u.advance&&o(t,1,r.buffer)}}}function M(e){let{host:a,disabled:r,readOnly:l,invalid:t,required:y}=e,u=e.getSegmentLabel??(n=>L[n]),g=e.emptySegmentText??A,c=`skdx-${e.part}__segment`,p=(0,d.buildSegments)({kind:e.kind,granularity:e.granularity,locale:e.locale,hourCycle:e.hourCycle,values:e.values});return a.setAttribute("role","group"),a.setAttribute("part",e.part),e.label!=null&&a.setAttribute("aria-label",e.label),(0,b.reflectHostState)(a,{"aria-disabled":r?"true":null,"aria-invalid":t?"true":null,"data-disabled":r?"":null,"data-readonly":l?"":null,"data-invalid":t?"":null}),i.html`${p.map(n=>n.isEditable?i.html`<span
+          role="spinbutton"
+          part="segment"
+          class=${c}
+          tabindex=${r?-1:0}
+          aria-label=${u(n.type)}
+          aria-valuenow=${n.value??n.min}
+          aria-valuemin=${n.min}
+          aria-valuemax=${n.max}
+          aria-valuetext=${n.isPlaceholder?g:n.text}
+          aria-disabled=${r?"true":i.nothing}
+          aria-readonly=${l?"true":i.nothing}
+          aria-required=${y?"true":i.nothing}
+          data-segment=${n.type}
+          data-placeholder=${n.isPlaceholder?"":i.nothing}
+          @keydown=${S=>w(S,n,e)}
+          @focus=${()=>{e.buffer.current=0}}
+          >${n.text}</span
+        >`:i.html`<span part="literal" class=${c} aria-hidden="true" data-segment="literal"
+          >${n.text}</span
+        >`)}`}0&&(module.exports={renderSegmentedField});

package/dist/internal/segmented-field.d.cts

@@ -0,0 +1,63 @@
+import { type TemplateResult } from 'lit';
+import { type Granularity, type HourCycle, type SegmentType, type SegmentValues } from './date-segments.cjs';
+/**
+ * Digits typed into the focused segment so far. A mutable box owned by the
+ * component rather than reactive state: it only ever affects the *next*
+ * keystroke, so re-rendering on it would be wasted (React holds the same thing
+ * in a ref).
+ *
+ * @internal
+ */
+export interface SegmentTypingBuffer {
+    current: number;
+}
+/** Everything {@link renderSegmentedField} needs from the component that owns the value. @internal */
+export interface SegmentedFieldOptions {
+    /** The field element itself — the `role="group"` the segments render into. */
+    host: HTMLElement;
+    /** `'date'` renders year/month/day ahead of the time segments. */
+    kind: 'date' | 'time';
+    /** Family and `part` name for the root — `date-field` or `time-field`. */
+    part: 'date-field' | 'time-field';
+    /** How far down the field is editable. */
+    granularity: Granularity;
+    /** BCP-47 locale deciding segment order, literals and AM/PM names. */
+    locale?: string;
+    /** Resolved hour cycle (never left to the locale at this point). */
+    hourCycle: HourCycle;
+    /** Current per-segment values. */
+    values: SegmentValues;
+    /** Accessible name for the group, forwarded from the host's `aria-label`. */
+    label: string | null;
+    /** See the host's `getSegmentLabel`; unset falls back to {@link SEGMENT_LABELS}. */
+    getSegmentLabel?: (type: SegmentType) => string;
+    /** See the host's `emptySegmentText`; unset falls back to {@link EMPTY_VALUE_TEXT}. */
+    emptySegmentText?: string;
+    disabled: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+    required: boolean;
+    /** Per-segment typing buffer, owned by the component so it survives renders. */
+    buffer: SegmentTypingBuffer;
+    /** Called with the next per-segment values after any edit. */
+    onValuesChange: (values: SegmentValues) => void;
+}
+/**
+ * The whole rendered content of a segmented field: one `role="spinbutton"` per
+ * editable segment, interleaved with the locale's `aria-hidden` literals,
+ * rendered into the host's **light DOM** — the host itself is the
+ * `role="group"`, exactly like React's root, so the skin's
+ * `.skdx-date-field__segment` geometry rules (document-level, unable to cross a
+ * shadow boundary) reach the segments.
+ *
+ * Every segment — literals included, or the run breaks visually at each
+ * separator — wears the family's `__segment` class, matching React's
+ * `skdxPart(family, 'segment')`.
+ *
+ * Form submission is *not* here — both fields are form-associated custom
+ * elements, so the value goes out through `ElementInternals` rather than
+ * through a hidden input the way React's copy has to.
+ *
+ * @internal
+ */
+export declare function renderSegmentedField(options: SegmentedFieldOptions): TemplateResult;

package/dist/internal/segmented-field.d.ts

@@ -0,0 +1,63 @@
+import { type TemplateResult } from 'lit';
+import { type Granularity, type HourCycle, type SegmentType, type SegmentValues } from './date-segments.js';
+/**
+ * Digits typed into the focused segment so far. A mutable box owned by the
+ * component rather than reactive state: it only ever affects the *next*
+ * keystroke, so re-rendering on it would be wasted (React holds the same thing
+ * in a ref).
+ *
+ * @internal
+ */
+export interface SegmentTypingBuffer {
+    current: number;
+}
+/** Everything {@link renderSegmentedField} needs from the component that owns the value. @internal */
+export interface SegmentedFieldOptions {
+    /** The field element itself — the `role="group"` the segments render into. */
+    host: HTMLElement;
+    /** `'date'` renders year/month/day ahead of the time segments. */
+    kind: 'date' | 'time';
+    /** Family and `part` name for the root — `date-field` or `time-field`. */
+    part: 'date-field' | 'time-field';
+    /** How far down the field is editable. */
+    granularity: Granularity;
+    /** BCP-47 locale deciding segment order, literals and AM/PM names. */
+    locale?: string;
+    /** Resolved hour cycle (never left to the locale at this point). */
+    hourCycle: HourCycle;
+    /** Current per-segment values. */
+    values: SegmentValues;
+    /** Accessible name for the group, forwarded from the host's `aria-label`. */
+    label: string | null;
+    /** See the host's `getSegmentLabel`; unset falls back to {@link SEGMENT_LABELS}. */
+    getSegmentLabel?: (type: SegmentType) => string;
+    /** See the host's `emptySegmentText`; unset falls back to {@link EMPTY_VALUE_TEXT}. */
+    emptySegmentText?: string;
+    disabled: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+    required: boolean;
+    /** Per-segment typing buffer, owned by the component so it survives renders. */
+    buffer: SegmentTypingBuffer;
+    /** Called with the next per-segment values after any edit. */
+    onValuesChange: (values: SegmentValues) => void;
+}
+/**
+ * The whole rendered content of a segmented field: one `role="spinbutton"` per
+ * editable segment, interleaved with the locale's `aria-hidden` literals,
+ * rendered into the host's **light DOM** — the host itself is the
+ * `role="group"`, exactly like React's root, so the skin's
+ * `.skdx-date-field__segment` geometry rules (document-level, unable to cross a
+ * shadow boundary) reach the segments.
+ *
+ * Every segment — literals included, or the run breaks visually at each
+ * separator — wears the family's `__segment` class, matching React's
+ * `skdxPart(family, 'segment')`.
+ *
+ * Form submission is *not* here — both fields are form-associated custom
+ * elements, so the value goes out through `ElementInternals` rather than
+ * through a hidden input the way React's copy has to.
+ *
+ * @internal
+ */
+export declare function renderSegmentedField(options: SegmentedFieldOptions): TemplateResult;

package/dist/internal/segmented-field.js

@@ -0,0 +1,21 @@
+import{html as m,nothing as y}from"lit";import{buildSegments as g,daysInMonth as p,stepSegment as S,typeDigit as T}from"./date-segments.js";import{directionalKey as h}from"./direction.js";import{reflectHostState as E}from"./part.js";var $="Empty",k={year:"year",month:"month",day:"day",hour:"hour",minute:"minute",second:"second",dayPeriod:"AM/PM"};function x(e){return e?Array.from(e.querySelectorAll('[role="spinbutton"][data-segment]')):[]}function c(e,a,r){let n=x(e.parentElement),t=n[n.indexOf(e)+a];t&&(r.current=0,t.focus())}function d(e,a,r,n){if(a.readOnly)return;let t={...a.values,[r]:n};(r==="month"||r==="year")&&t.day!=null&&(t.day=Math.min(t.day,p(t.year,t.month))),a.onValuesChange(t),(e.parentElement??e).dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}function A(e,a,r){let n=a.type,t=e.currentTarget,i=h(e.key,t);if(i==="ArrowLeft"||i==="ArrowRight"){e.preventDefault(),c(t,i==="ArrowRight"?1:-1,r.buffer);return}if(!r.readOnly){if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault(),r.buffer.current=0,d(t,r,n,S(a,e.key==="ArrowUp"?1:-1));return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),r.buffer.current=0,d(t,r,n,e.key==="Home"?a.min:a.max);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),r.buffer.current=0,d(t,r,n,null);return}if(n==="dayPeriod"){let u=e.key.toLowerCase();(u==="a"||u==="p")&&(e.preventDefault(),d(t,r,n,u==="a"?0:1));return}if(/^\d$/.test(e.key)){e.preventDefault();let u=T(a,r.buffer.current,Number(e.key));r.buffer.current=u.buffer,d(t,r,n,u.value),u.advance&&c(t,1,r.buffer)}}}function H(e){let{host:a,disabled:r,readOnly:n,invalid:t,required:i}=e,u=e.getSegmentLabel??(l=>k[l]),o=e.emptySegmentText??$,f=`skdx-${e.part}__segment`,s=g({kind:e.kind,granularity:e.granularity,locale:e.locale,hourCycle:e.hourCycle,values:e.values});return a.setAttribute("role","group"),a.setAttribute("part",e.part),e.label!=null&&a.setAttribute("aria-label",e.label),E(a,{"aria-disabled":r?"true":null,"aria-invalid":t?"true":null,"data-disabled":r?"":null,"data-readonly":n?"":null,"data-invalid":t?"":null}),m`${s.map(l=>l.isEditable?m`<span
+          role="spinbutton"
+          part="segment"
+          class=${f}
+          tabindex=${r?-1:0}
+          aria-label=${u(l.type)}
+          aria-valuenow=${l.value??l.min}
+          aria-valuemin=${l.min}
+          aria-valuemax=${l.max}
+          aria-valuetext=${l.isPlaceholder?o:l.text}
+          aria-disabled=${r?"true":y}
+          aria-readonly=${n?"true":y}
+          aria-required=${i?"true":y}
+          data-segment=${l.type}
+          data-placeholder=${l.isPlaceholder?"":y}
+          @keydown=${b=>A(b,l,e)}
+          @focus=${()=>{e.buffer.current=0}}
+          >${l.text}</span
+        >`:m`<span part="literal" class=${f} aria-hidden="true" data-segment="literal"
+          >${l.text}</span
+        >`)}`}export{H as renderSegmentedField};

package/dist/internal/selection.cjs

@@ -0,0 +1 @@
+"use strict";var g=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var c=(r,n)=>{for(var t in n)g(r,t,{get:n[t],enumerable:!0})},p=(r,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of s(n))!x.call(r,i)&&i!==t&&g(r,i,{get:()=>n[i],enumerable:!(o=f(n,i))||o.enumerable});return r};var y=r=>p(g({},"__esModule",{value:!0}),r);var d={};c(d,{nextSelection:()=>b,toValues:()=>A});module.exports=y(d);function A(r){return Array.isArray(r)?r:r?[r]:[]}function b(r,n,t){return t?r.includes(n)?r.filter(o=>o!==n):[...r,n]:n}0&&(module.exports={nextSelection,toValues});

package/dist/internal/selection.d.cts

@@ -0,0 +1,38 @@
+/**
+ * The single/multiple selection *decision* shared by every option-list element:
+ * `<skdx-listbox>`, `<skdx-select>`, and `<skdx-combobox>`.
+ *
+ * Only the decision lives here. React extracts these two functions out of a
+ * `useSelection` hook; there is no hook to port, because the value plumbing in
+ * this package is Lit reactive properties, setters, and `CustomEvent`s — and
+ * each element's own side effects on commit (Combobox writing the option's text
+ * back into its input and closing, Select closing and refocusing its trigger)
+ * stay in that element, wrapping `selectItem` rather than being configured in.
+ */
+/**
+ * Every selected value as an array, whatever shape the consumer passed.
+ *
+ * The `string | string[] | undefined` public value shape exists because a
+ * single-select's value reads better as a bare string, but every consumer
+ * downstream — `aria-selected`, chips, hidden inputs, "is this option
+ * checked" — wants an array. Normalise once, here.
+ *
+ * The one deliberate divergence from React's port: an empty string is "nothing
+ * selected", not a selection of `''`. React's `value` prop is genuinely absent
+ * when unset, but a custom element's reflected `value` property is `''` when
+ * unset (`<skdx-combobox>` declares exactly that default), and `['']` would make
+ * `selectedValues.length` — which drives `valueMissing`, the placeholder hook,
+ * and the chip list — report a selection that isn't there.
+ */
+export declare function toValues(value: string | string[] | undefined): string[];
+/**
+ * The value a selection becomes once `value` is chosen: replacing the
+ * selection, or toggling `value` within it when `multiple`.
+ *
+ * Split out because this branch — and only this branch — is what Listbox,
+ * Select, and Combobox genuinely share. Their controlled/uncontrolled plumbing
+ * is framework-idiomatic and different in every package; this decision is
+ * identical in all of them, and the other four framework packages carry a
+ * line-for-line port of exactly this function.
+ */
+export declare function nextSelection(selectedValues: string[], value: string, multiple: boolean): string | string[];