@skdx/web-components 0.26.0

package/dist/color-picker/channel-slider.d.cts

@@ -0,0 +1,116 @@
+import { LitElement } from 'lit';
+import type { SkdxColorPicker } from './ColorPicker.cjs';
+/** @internal Two decimals, so a fractional `step` neither leaks float noise into the DOM nor is rounded away. */
+export declare function round2(value: number): number;
+/**
+ * @internal Rounds a raw channel value onto the `step` grid — with the
+ * float-drift correction a fractional step needs, the same one `<skdx-slider>`
+ * and `<skdx-angle-slider>` apply — and then into `0…max`. Shared by every
+ * channel in the family so the hue track, the alpha track and the 2D area all
+ * land on the same grid.
+ */
+export declare function snapChannel(raw: number, step: number, max: number): number;
+/**
+ * @internal `step: 0` means "continuous under the pointer", not "the keyboard
+ * does nothing" — the arrows fall back to one unit so every value stays
+ * reachable without a pointer, the same fallback `<skdx-angle-slider>` makes.
+ */
+export declare function arrowStep(step: number): number;
+/**
+ * The behaviour shared by `<skdx-color-picker-hue-slider>` and
+ * `<skdx-color-picker-alpha-slider>`: a linear `role="slider"` track over
+ * `0…max` with pointer drag, click-to-seek and a full keyboard path. The port
+ * of React's `useChannelSlider` hook — a base class rather than a hook, because
+ * what the two tracks share in this package is host ARIA and listener wiring,
+ * which is what a superclass is.
+ *
+ * The two tracks differ only in their range, their wording and which field of
+ * the colour they write, so the alternative is one file copied onto another
+ * with three identifiers changed — and a keyboard bug fixed in one of them.
+ *
+ * **The track has ends; it does not wrap.** Hue is circular, but a linear
+ * control reporting `aria-valuemin="0"`/`aria-valuemax="360"` that silently
+ * teleported from one end to the other would be lying to assistive tech.
+ * `<skdx-angle-slider>` is the wrapping control.
+ *
+ * Pointer geometry is physical (left-to-right, bottom-to-top), matching
+ * `<skdx-slider>`; only the arrow **keys** are mirrored under `dir="rtl"`, via
+ * `directionalKey`, because the gradient's direction is the consumer's CSS and
+ * this element has no way to know which way they painted it.
+ *
+ * @internal
+ */
+export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Axis the track runs along, which decides whether pointer position is read
+     * horizontally or vertically and is published as `data-orientation`. Vertical
+     * tracks run bottom-to-top, matching `<skdx-slider>`.
+     * @default 'horizontal' — the track runs left-to-right.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /** @internal True between pointer down and release/cancel; drives `data-dragging` on this host. */
+    protected dragging: boolean;
+    /** @internal The owning picker, found once on connect. */
+    protected root: SkdxColorPicker | null;
+    private disposePointer?;
+    /** Published as `data-channel`. */
+    protected abstract readonly channel: 'hue' | 'alpha';
+    /** Top of the range as ARIA reports it; the bottom is always 0. */
+    protected abstract readonly max: number;
+    /** Accessible name used when the consumer supplies none. */
+    protected abstract readonly defaultLabel: string;
+    /** This track's current position on its range. */
+    protected abstract get channelValue(): number;
+    /** Builds `aria-valuetext` — the number alone never conveys which colour resulted. */
+    protected abstract valueTextFor(value: number): string;
+    /** Receives an already clamped and step-snapped value, and writes it into the colour. */
+    protected abstract writeChannel(value: number): void;
+    /**
+     * Highest value actually reachable, when that is not `max`. Hue needs it: the
+     * axis genuinely spans 360°, but 360 *is* 0, so the track stops at the last
+     * hue on the step grid below it rather than folding round and throwing the
+     * thumb back to the left edge mid-drag.
+     */
+    protected get limit(): number;
+    /** Whether the root has switched this track off entirely — the alpha track when `alpha` is false. */
+    protected get hiddenByRoot(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
+    syncFromRoot(): void;
+    protected updated(): void;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+/**
+ * The handle on a channel track. Purely visual: `aria-hidden` and out of the
+ * tab order, because the track itself carries the `role="slider"` semantics and
+ * takes the tab stop — a second focusable element here would announce the same
+ * value twice.
+ *
+ * It ships **no positioning**. The root publishes
+ * `--skdx-color-picker-hue-position` / `--skdx-color-picker-alpha-position` as
+ * percentages, so one CSS rule places it and nothing recomputes an offset per
+ * frame.
+ *
+ * `data-dragging` lives on the **track**, not here — the descendant selector
+ * `[data-channel='hue'][data-dragging] skdx-color-picker-hue-slider-thumb` costs
+ * nothing to write and nothing to plumb.
+ *
+ * @internal
+ */
+export declare abstract class SkdxColorPickerChannelSliderThumb extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal The owning picker, found once on connect. */
+    protected root: SkdxColorPicker | null;
+    /** Published as `data-channel`. */
+    protected abstract readonly channel: 'hue' | 'alpha';
+    /** What `data-value` reports — degrees for hue, **percent** for alpha, matching what each track reports. */
+    protected abstract get channelValue(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
+    syncFromRoot(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/color-picker/channel-slider.d.ts

@@ -0,0 +1,116 @@
+import { LitElement } from 'lit';
+import type { SkdxColorPicker } from './ColorPicker.js';
+/** @internal Two decimals, so a fractional `step` neither leaks float noise into the DOM nor is rounded away. */
+export declare function round2(value: number): number;
+/**
+ * @internal Rounds a raw channel value onto the `step` grid — with the
+ * float-drift correction a fractional step needs, the same one `<skdx-slider>`
+ * and `<skdx-angle-slider>` apply — and then into `0…max`. Shared by every
+ * channel in the family so the hue track, the alpha track and the 2D area all
+ * land on the same grid.
+ */
+export declare function snapChannel(raw: number, step: number, max: number): number;
+/**
+ * @internal `step: 0` means "continuous under the pointer", not "the keyboard
+ * does nothing" — the arrows fall back to one unit so every value stays
+ * reachable without a pointer, the same fallback `<skdx-angle-slider>` makes.
+ */
+export declare function arrowStep(step: number): number;
+/**
+ * The behaviour shared by `<skdx-color-picker-hue-slider>` and
+ * `<skdx-color-picker-alpha-slider>`: a linear `role="slider"` track over
+ * `0…max` with pointer drag, click-to-seek and a full keyboard path. The port
+ * of React's `useChannelSlider` hook — a base class rather than a hook, because
+ * what the two tracks share in this package is host ARIA and listener wiring,
+ * which is what a superclass is.
+ *
+ * The two tracks differ only in their range, their wording and which field of
+ * the colour they write, so the alternative is one file copied onto another
+ * with three identifiers changed — and a keyboard bug fixed in one of them.
+ *
+ * **The track has ends; it does not wrap.** Hue is circular, but a linear
+ * control reporting `aria-valuemin="0"`/`aria-valuemax="360"` that silently
+ * teleported from one end to the other would be lying to assistive tech.
+ * `<skdx-angle-slider>` is the wrapping control.
+ *
+ * Pointer geometry is physical (left-to-right, bottom-to-top), matching
+ * `<skdx-slider>`; only the arrow **keys** are mirrored under `dir="rtl"`, via
+ * `directionalKey`, because the gradient's direction is the consumer's CSS and
+ * this element has no way to know which way they painted it.
+ *
+ * @internal
+ */
+export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Axis the track runs along, which decides whether pointer position is read
+     * horizontally or vertically and is published as `data-orientation`. Vertical
+     * tracks run bottom-to-top, matching `<skdx-slider>`.
+     * @default 'horizontal' — the track runs left-to-right.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /** @internal True between pointer down and release/cancel; drives `data-dragging` on this host. */
+    protected dragging: boolean;
+    /** @internal The owning picker, found once on connect. */
+    protected root: SkdxColorPicker | null;
+    private disposePointer?;
+    /** Published as `data-channel`. */
+    protected abstract readonly channel: 'hue' | 'alpha';
+    /** Top of the range as ARIA reports it; the bottom is always 0. */
+    protected abstract readonly max: number;
+    /** Accessible name used when the consumer supplies none. */
+    protected abstract readonly defaultLabel: string;
+    /** This track's current position on its range. */
+    protected abstract get channelValue(): number;
+    /** Builds `aria-valuetext` — the number alone never conveys which colour resulted. */
+    protected abstract valueTextFor(value: number): string;
+    /** Receives an already clamped and step-snapped value, and writes it into the colour. */
+    protected abstract writeChannel(value: number): void;
+    /**
+     * Highest value actually reachable, when that is not `max`. Hue needs it: the
+     * axis genuinely spans 360°, but 360 *is* 0, so the track stops at the last
+     * hue on the step grid below it rather than folding round and throwing the
+     * thumb back to the left edge mid-drag.
+     */
+    protected get limit(): number;
+    /** Whether the root has switched this track off entirely — the alpha track when `alpha` is false. */
+    protected get hiddenByRoot(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
+    syncFromRoot(): void;
+    protected updated(): void;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+/**
+ * The handle on a channel track. Purely visual: `aria-hidden` and out of the
+ * tab order, because the track itself carries the `role="slider"` semantics and
+ * takes the tab stop — a second focusable element here would announce the same
+ * value twice.
+ *
+ * It ships **no positioning**. The root publishes
+ * `--skdx-color-picker-hue-position` / `--skdx-color-picker-alpha-position` as
+ * percentages, so one CSS rule places it and nothing recomputes an offset per
+ * frame.
+ *
+ * `data-dragging` lives on the **track**, not here — the descendant selector
+ * `[data-channel='hue'][data-dragging] skdx-color-picker-hue-slider-thumb` costs
+ * nothing to write and nothing to plumb.
+ *
+ * @internal
+ */
+export declare abstract class SkdxColorPickerChannelSliderThumb extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal The owning picker, found once on connect. */
+    protected root: SkdxColorPicker | null;
+    /** Published as `data-channel`. */
+    protected abstract readonly channel: 'hue' | 'alpha';
+    /** What `data-value` reports — degrees for hue, **percent** for alpha, matching what each track reports. */
+    protected abstract get channelValue(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
+    syncFromRoot(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/color-picker/channel-slider.js

@@ -0,0 +1,12 @@
+var f=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(i,o,t,e)=>{for(var r=e>1?void 0:e?A(o,t):o,s=i.length-1,a;s>=0;s--)(a=i[s])&&(r=(e?a(o,t,r):a(r))||r);return e&&r&&f(o,t,r),r};import{css as p,html as m,LitElement as g}from"lit";import{property as w,state as x}from"lit/decorators.js";import{directionalKey as k}from"../internal/direction.js";import{hiddenHostStyles as v}from"../internal/styles.js";import{trackPointerRatio as R}from"./pointer-ratio.js";var E=10;function h(i){return Math.round(i*100)/100}function b(i,o,t){let e=o>0?Math.round(Math.round(i/o)*o*1e6)/1e6:i;return Math.min(Math.max(e,0),t)}function C(i){return i>0?i:1}var n=class extends g{constructor(){super(...arguments);this.orientation="horizontal";this.dragging=!1;this.root=null;this.handleKeydown=t=>{let e=this.root;if(!e?.interactive)return;let r=k(t.key,this),s=this.limit;if(r==="Home"||r==="End"){t.preventDefault(),this.writeChannel(r==="Home"?0:s);return}let a=C(e.step),c=Math.max(this.max/10,a),u={ArrowRight:a,ArrowUp:a,ArrowLeft:-a,ArrowDown:-a,PageUp:c,PageDown:-c}[r];if(u===void 0)return;t.preventDefault();let y=t.shiftKey&&r.startsWith("Arrow")?E:1;this.writeChannel(b(this.channelValue+u*y,e.step,s))}}get limit(){return this.max}get hiddenByRoot(){return!1}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error(`<${this.localName}> must be used inside <skdx-color-picker>.`);this.addEventListener("keydown",this.handleKeydown),this.disposePointer=R(this,{enabled:()=>this.root?.interactive??!1,onRatioChange:t=>{let e=this.root;if(!e)return;let r=this.orientation==="horizontal"?t.x:1-t.y;this.writeChannel(b(r*this.max,e.step,this.limit))},onRatioChangeEnd:()=>this.root?.commit(),onDraggingChange:t=>{this.dragging=t}})}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.disposePointer?.(),this.disposePointer=void 0,this.dragging=!1,this.removeAttribute("data-dragging"),this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}updated(){let t=this.root;if(!t)return;this.hidden=this.hiddenByRoot;let e=this.channelValue;this.setAttribute("role","slider"),!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby")&&this.setAttribute("aria-label",this.defaultLabel),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.max)),this.setAttribute("aria-valuenow",String(h(e))),this.setAttribute("aria-valuetext",this.valueTextFor(e)),this.setAttribute("aria-orientation",this.orientation),this.setAttribute("tabindex",t.disabled?"-1":"0"),t.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),t.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.setAttribute("data-channel",this.channel),this.setAttribute("data-orientation",this.orientation),this.setAttribute("data-value",String(h(e))),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly),this.toggleAttribute("data-dragging",this.dragging)}render(){return m`<slot></slot>`}};n.styles=[v,p`
+      :host {
+        display: block;
+        position: relative;
+        /* So a touch drag along the track is not stolen by the page scroll. */
+        touch-action: none;
+      }
+    `],d([w({type:String,reflect:!0})],n.prototype,"orientation",2),d([x()],n.prototype,"dragging",2);var l=class extends g{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error(`<${this.localName}> must be used inside <skdx-color-picker>.`);this.setAttribute("aria-hidden","true"),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let t=this.root;t&&(this.setAttribute("data-channel",this.channel),this.setAttribute("data-value",String(h(this.channelValue))),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly))}render(){return m`<slot></slot>`}};l.styles=[v,p`
+      :host {
+        display: block;
+      }
+    `];export{n as SkdxColorPickerChannelSlider,l as SkdxColorPickerChannelSliderThumb,C as arrowStep,h as round2,b as snapChannel};

package/dist/color-picker/index.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var n=(o,r)=>{for(var k in r)x(o,k,{get:r[k],enumerable:!0})},T=(o,r,k,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of A(r))!b.call(o,e)&&e!==k&&x(o,e,{get:()=>r[e],enumerable:!(l=u(r,e))||l.enumerable});return o};var w=o=>T(x({},"__esModule",{value:!0}),o);var y={};n(y,{SkdxColorPicker:()=>p.SkdxColorPicker,SkdxColorPickerAlphaSlider:()=>m.SkdxColorPickerAlphaSlider,SkdxColorPickerAlphaSliderThumb:()=>c.SkdxColorPickerAlphaSliderThumb,SkdxColorPickerArea:()=>S.SkdxColorPickerArea,SkdxColorPickerAreaThumb:()=>t.SkdxColorPickerAreaThumb,SkdxColorPickerEyeDropper:()=>h.SkdxColorPickerEyeDropper,SkdxColorPickerFormatSelect:()=>a.SkdxColorPickerFormatSelect,SkdxColorPickerHueSlider:()=>d.SkdxColorPickerHueSlider,SkdxColorPickerHueSliderThumb:()=>i.SkdxColorPickerHueSliderThumb,SkdxColorPickerInput:()=>P.SkdxColorPickerInput,SkdxColorPickerSwatch:()=>f.SkdxColorPickerSwatch,SkdxColorPickerSwatchGroup:()=>C.SkdxColorPickerSwatchGroup});module.exports=w(y);var p=require("./ColorPicker.cjs"),S=require("./ColorPickerArea.cjs"),t=require("./ColorPickerAreaThumb.cjs"),d=require("./ColorPickerHueSlider.cjs"),i=require("./ColorPickerHueSliderThumb.cjs"),m=require("./ColorPickerAlphaSlider.cjs"),c=require("./ColorPickerAlphaSliderThumb.cjs"),C=require("./ColorPickerSwatchGroup.cjs"),f=require("./ColorPickerSwatch.cjs"),P=require("./ColorPickerInput.cjs"),a=require("./ColorPickerFormatSelect.cjs"),h=require("./ColorPickerEyeDropper.cjs");0&&(module.exports={SkdxColorPicker,SkdxColorPickerAlphaSlider,SkdxColorPickerAlphaSliderThumb,SkdxColorPickerArea,SkdxColorPickerAreaThumb,SkdxColorPickerEyeDropper,SkdxColorPickerFormatSelect,SkdxColorPickerHueSlider,SkdxColorPickerHueSliderThumb,SkdxColorPickerInput,SkdxColorPickerSwatch,SkdxColorPickerSwatchGroup});

package/dist/color-picker/index.d.cts

@@ -0,0 +1,12 @@
+export { SkdxColorPicker } from './ColorPicker.cjs';
+export { SkdxColorPickerArea } from './ColorPickerArea.cjs';
+export { SkdxColorPickerAreaThumb } from './ColorPickerAreaThumb.cjs';
+export { SkdxColorPickerHueSlider } from './ColorPickerHueSlider.cjs';
+export { SkdxColorPickerHueSliderThumb } from './ColorPickerHueSliderThumb.cjs';
+export { SkdxColorPickerAlphaSlider } from './ColorPickerAlphaSlider.cjs';
+export { SkdxColorPickerAlphaSliderThumb } from './ColorPickerAlphaSliderThumb.cjs';
+export { SkdxColorPickerSwatchGroup } from './ColorPickerSwatchGroup.cjs';
+export { SkdxColorPickerSwatch } from './ColorPickerSwatch.cjs';
+export { SkdxColorPickerInput, type ColorChannel } from './ColorPickerInput.cjs';
+export { SkdxColorPickerFormatSelect } from './ColorPickerFormatSelect.cjs';
+export { SkdxColorPickerEyeDropper } from './ColorPickerEyeDropper.cjs';

package/dist/color-picker/index.d.ts

@@ -0,0 +1,12 @@
+export { SkdxColorPicker } from './ColorPicker.js';
+export { SkdxColorPickerArea } from './ColorPickerArea.js';
+export { SkdxColorPickerAreaThumb } from './ColorPickerAreaThumb.js';
+export { SkdxColorPickerHueSlider } from './ColorPickerHueSlider.js';
+export { SkdxColorPickerHueSliderThumb } from './ColorPickerHueSliderThumb.js';
+export { SkdxColorPickerAlphaSlider } from './ColorPickerAlphaSlider.js';
+export { SkdxColorPickerAlphaSliderThumb } from './ColorPickerAlphaSliderThumb.js';
+export { SkdxColorPickerSwatchGroup } from './ColorPickerSwatchGroup.js';
+export { SkdxColorPickerSwatch } from './ColorPickerSwatch.js';
+export { SkdxColorPickerInput, type ColorChannel } from './ColorPickerInput.js';
+export { SkdxColorPickerFormatSelect } from './ColorPickerFormatSelect.js';
+export { SkdxColorPickerEyeDropper } from './ColorPickerEyeDropper.js';

package/dist/color-picker/index.js

@@ -0,0 +1 @@
+import{SkdxColorPicker as e}from"./ColorPicker.js";import{SkdxColorPickerArea as x}from"./ColorPickerArea.js";import{SkdxColorPickerAreaThumb as p}from"./ColorPickerAreaThumb.js";import{SkdxColorPickerHueSlider as t}from"./ColorPickerHueSlider.js";import{SkdxColorPickerHueSliderThumb as i}from"./ColorPickerHueSliderThumb.js";import{SkdxColorPickerAlphaSlider as c}from"./ColorPickerAlphaSlider.js";import{SkdxColorPickerAlphaSliderThumb as f}from"./ColorPickerAlphaSliderThumb.js";import{SkdxColorPickerSwatchGroup as a}from"./ColorPickerSwatchGroup.js";import{SkdxColorPickerSwatch as u}from"./ColorPickerSwatch.js";import{SkdxColorPickerInput as b}from"./ColorPickerInput.js";import{SkdxColorPickerFormatSelect as T}from"./ColorPickerFormatSelect.js";import{SkdxColorPickerEyeDropper as y}from"./ColorPickerEyeDropper.js";export{e as SkdxColorPicker,c as SkdxColorPickerAlphaSlider,f as SkdxColorPickerAlphaSliderThumb,x as SkdxColorPickerArea,p as SkdxColorPickerAreaThumb,y as SkdxColorPickerEyeDropper,T as SkdxColorPickerFormatSelect,t as SkdxColorPickerHueSlider,i as SkdxColorPickerHueSliderThumb,b as SkdxColorPickerInput,u as SkdxColorPickerSwatch,a as SkdxColorPickerSwatchGroup};

package/dist/color-picker/pointer-ratio.cjs

@@ -0,0 +1 @@
+"use strict";var h=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var P=(e,n)=>{for(var t in n)h(e,t,{get:n[t],enumerable:!0})},R=(e,n,t,g)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of p(n))!E.call(e,o)&&o!==t&&h(e,o,{get:()=>n[o],enumerable:!(g=s(n,o))||g.enumerable});return e};var f=e=>R(h({},"__esModule",{value:!0}),e);var x={};P(x,{trackPointerRatio:()=>m});module.exports=f(x);function m(e,n){let t=null,g=r=>{let i=e.getBoundingClientRect();return{x:i.width?Math.min(Math.max((r.clientX-i.left)/i.width,0),1):0,y:i.height?Math.min(Math.max((r.clientY-i.top)/i.height,0),1):0}},o=r=>{if(t||n.enabled&&!n.enabled())return;let{pointerId:i}=r;e.setPointerCapture?.(i);let c=g(r);n.onDraggingChange?.(!0),n.onRatioChange(c,r);let l=d=>{if(d.pointerId!==i)return;let u=g(d);u.x===c.x&&u.y===c.y||(c=u,n.onRatioChange(u,d))},v=d=>{d.pointerId===i&&(t?.(),n.onDraggingChange?.(!1),n.onRatioChangeEnd?.(d))},a=e.ownerDocument;a.addEventListener("pointermove",l),a.addEventListener("pointerup",v),a.addEventListener("pointercancel",v),t=()=>{a.removeEventListener("pointermove",l),a.removeEventListener("pointerup",v),a.removeEventListener("pointercancel",v),t=null}};return e.addEventListener("pointerdown",o),()=>{e.removeEventListener("pointerdown",o),t?.()}}0&&(module.exports={trackPointerRatio});

package/dist/color-picker/pointer-ratio.d.cts

@@ -0,0 +1,93 @@
+/**
+ * Pointer-drag-to-position, the linear twin of `internal/pointer-angle.ts`:
+ * turns a pointer inside an element into normalized `x`/`y` fractions in
+ * `[0, 1]`, for widgets whose input is a *position* rather than a direction —
+ * the colour picker's 2D area and its hue and alpha tracks.
+ *
+ * Mirrors `packages/react/src/color-picker/usePointerRatio.ts`, shaped like
+ * `trackPointerAngle`: a plain function over an element that returns a
+ * disposer, not a transliterated hook.
+ *
+ * It lives in this family's directory rather than in `internal/` because it has
+ * exactly one consumer — `internal/color.ts` is colour arithmetic and nothing
+ * else, and a second copy of the angle helper's shape does not become shared
+ * infrastructure until a second family reaches for it.
+ *
+ * Deliberately knows nothing about value ranges, channels, ARIA, RTL, or
+ * `disabled`/`read-only` beyond the `enabled` gate the caller supplies: `x` is
+ * always measured left-to-right from the border box, exactly as `<skdx-slider>`
+ * measures it, because the gradient's direction is the consumer's CSS and this
+ * helper has no way to know which way they painted it.
+ *
+ * @internal
+ */
+/** Position inside an element's border box, as fractions of its width and height. `{ x: 0, y: 0 }` is the top-left corner. */
+export interface PointerRatio {
+    x: number;
+    y: number;
+}
+/**
+ * Options for {@link trackPointerRatio}. Every callback is read at call time
+ * rather than captured at subscribe time, so an element that rebinds a handler
+ * mid-drag is honoured by the drag already in flight — which is also how the
+ * drag sees the colour as it stands after the previous frame.
+ *
+ * @internal
+ */
+export interface PointerRatioOptions {
+    /**
+     * 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 position on pointer down and on every subsequent move that changes it, plus the native event. */
+    onRatioChange: (ratio: PointerRatio, event: PointerEvent) => void;
+    /**
+     * Fires once when the drag ends — `pointerup` or `pointercancel`. The final
+     * position was already reported by `onRatioChange`, so this carries only the
+     * event: it is the "stop doing expensive things now" signal.
+     * @default undefined — no-op if omitted.
+     */
+    onRatioChangeEnd?: (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 positions. `element`'s
+ * border box is the coordinate space, 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 `onRatioChangeEnd`, 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
+ * this.disposePointer = trackPointerRatio(this, {
+ *   enabled: () => !this.disabled && !this.readOnly,
+ *   onRatioChange: ({ x, y }) => this.seek(x, y),
+ *   onRatioChangeEnd: () => this.root?.commit(),
+ *   onDraggingChange: (dragging) => { this.dragging = dragging; },
+ * });
+ * ```
+ *
+ * @internal
+ */
+export declare function trackPointerRatio(element: HTMLElement, options: PointerRatioOptions): () => void;

package/dist/color-picker/pointer-ratio.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Pointer-drag-to-position, the linear twin of `internal/pointer-angle.ts`:
+ * turns a pointer inside an element into normalized `x`/`y` fractions in
+ * `[0, 1]`, for widgets whose input is a *position* rather than a direction —
+ * the colour picker's 2D area and its hue and alpha tracks.
+ *
+ * Mirrors `packages/react/src/color-picker/usePointerRatio.ts`, shaped like
+ * `trackPointerAngle`: a plain function over an element that returns a
+ * disposer, not a transliterated hook.
+ *
+ * It lives in this family's directory rather than in `internal/` because it has
+ * exactly one consumer — `internal/color.ts` is colour arithmetic and nothing
+ * else, and a second copy of the angle helper's shape does not become shared
+ * infrastructure until a second family reaches for it.
+ *
+ * Deliberately knows nothing about value ranges, channels, ARIA, RTL, or
+ * `disabled`/`read-only` beyond the `enabled` gate the caller supplies: `x` is
+ * always measured left-to-right from the border box, exactly as `<skdx-slider>`
+ * measures it, because the gradient's direction is the consumer's CSS and this
+ * helper has no way to know which way they painted it.
+ *
+ * @internal
+ */
+/** Position inside an element's border box, as fractions of its width and height. `{ x: 0, y: 0 }` is the top-left corner. */
+export interface PointerRatio {
+    x: number;
+    y: number;
+}
+/**
+ * Options for {@link trackPointerRatio}. Every callback is read at call time
+ * rather than captured at subscribe time, so an element that rebinds a handler
+ * mid-drag is honoured by the drag already in flight — which is also how the
+ * drag sees the colour as it stands after the previous frame.
+ *
+ * @internal
+ */
+export interface PointerRatioOptions {
+    /**
+     * 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 position on pointer down and on every subsequent move that changes it, plus the native event. */
+    onRatioChange: (ratio: PointerRatio, event: PointerEvent) => void;
+    /**
+     * Fires once when the drag ends — `pointerup` or `pointercancel`. The final
+     * position was already reported by `onRatioChange`, so this carries only the
+     * event: it is the "stop doing expensive things now" signal.
+     * @default undefined — no-op if omitted.
+     */
+    onRatioChangeEnd?: (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 positions. `element`'s
+ * border box is the coordinate space, 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 `onRatioChangeEnd`, 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
+ * this.disposePointer = trackPointerRatio(this, {
+ *   enabled: () => !this.disabled && !this.readOnly,
+ *   onRatioChange: ({ x, y }) => this.seek(x, y),
+ *   onRatioChangeEnd: () => this.root?.commit(),
+ *   onDraggingChange: (dragging) => { this.dragging = dragging; },
+ * });
+ * ```
+ *
+ * @internal
+ */
+export declare function trackPointerRatio(element: HTMLElement, options: PointerRatioOptions): () => void;

package/dist/color-picker/pointer-ratio.js

@@ -0,0 +1 @@
+function l(r,e){let a=null,v=t=>{let n=r.getBoundingClientRect();return{x:n.width?Math.min(Math.max((t.clientX-n.left)/n.width,0),1):0,y:n.height?Math.min(Math.max((t.clientY-n.top)/n.height,0),1):0}},u=t=>{if(a||e.enabled&&!e.enabled())return;let{pointerId:n}=t;r.setPointerCapture?.(n);let d=v(t);e.onDraggingChange?.(!0),e.onRatioChange(d,t);let h=o=>{if(o.pointerId!==n)return;let c=v(o);c.x===d.x&&c.y===d.y||(d=c,e.onRatioChange(c,o))},g=o=>{o.pointerId===n&&(a?.(),e.onDraggingChange?.(!1),e.onRatioChangeEnd?.(o))},i=r.ownerDocument;i.addEventListener("pointermove",h),i.addEventListener("pointerup",g),i.addEventListener("pointercancel",g),a=()=>{i.removeEventListener("pointermove",h),i.removeEventListener("pointerup",g),i.removeEventListener("pointercancel",g),a=null}};return r.addEventListener("pointerdown",u),()=>{r.removeEventListener("pointerdown",u),a?.()}}export{l as trackPointerRatio};

package/dist/combobox/Combobox.cjs

@@ -0,0 +1,5 @@
+"use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var E=(t,r)=>{for(var e in r)h(t,e,{get:r[e],enumerable:!0})},F=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of I(r))!V.call(t,n)&&n!==e&&h(t,n,{get:()=>r[n],enumerable:!(i=m(r,n))||i.enumerable});return t};var O=t=>F(h({},"__esModule",{value:!0}),t),l=(t,r,e,i)=>{for(var n=i>1?void 0:i?m(r,e):r,c=t.length-1,p;c>=0;c--)(p=t[c])&&(n=(i?p(r,e,n):p(n))||n);return i&&n&&h(r,e,n),n};var q={};E(q,{OPTION_SELECTOR:()=>o,SkdxCombobox:()=>s,defaultGetResultCountLabel:()=>A});module.exports=O(q);var u=require("lit"),a=require("lit/decorators.js"),g=require("../internal/define.cjs"),f=require("../internal/form-associated.cjs"),v=require("../internal/ids.cjs"),y=require("../internal/open-change-complete.cjs"),d=require("../internal/selection.cjs"),b=require("../utils/live-announcer.cjs");var o='[role="option"]:not([data-disabled])';function A(t){return`${t} result${t===1?"":"s"} available`}var C={fromAttribute:t=>t??"",toAttribute:t=>Array.isArray(t)?null:t};function R(t,r){return Array.isArray(t)!==Array.isArray(r)?!1:!Array.isArray(t)||!Array.isArray(r)?t===r:t.length===r.length&&t.every((e,i)=>e===r[i])}var s=class extends(0,f.FormAssociated)(u.LitElement){constructor(){super(...arguments);this.value="";this.multiple=!1;this.allowCustomValue=!1;this.filter="manual";this.autoHighlight=!1;this.loading=!1;this.inputValue="";this.open=!1;this.invalid=!1;this.readOnly=!1;this.disabled=!1;this.required=!1;this.getResultCountLabel=A;this.contentId=(0,v.nextId)("skdx-combobox-content");this.activeId=null;this.inputHost=null;this.contentEl=null;this.itemRegistry=new Map;this.itemObserver=new MutationObserver(()=>this.announceResultCount());this.hasUpdatedOnce=!1}setValue(e){R(this.value,e)||(this.value=e,this.emit("value-change",e))}get selectedValues(){return(0,d.toValues)(this.value)}isSelected(e){return this.selectedValues.includes(e)}selectItem(e,i){if(!this.multiple){this.setValue(e),this.setInputValue(i),this.setOpen(!1);return}this.setValue((0,d.nextSelection)(this.selectedValues,e,this.multiple)),this.setInputValue("")}matchesFilter(e){return this.filter==="manual"||this.filter(e,this.inputValue)}registerItem(e,i){this.itemRegistry.set(e,i)}unregisterItem(e){this.itemRegistry.delete(e),this.activeId===e&&this.scheduleReseed()}scheduleReseed(){this.reseedFrame===void 0&&(this.reseedFrame=requestAnimationFrame(()=>{this.reseedFrame=void 0;let e=this.activeId;if(e===null)return;let i=Array.from(this.querySelectorAll(o));i.some(n=>n.id===e)||this.setActiveId(i[0]?.id??null)}))}getItem(e){return this.itemRegistry.get(e)}setInputValue(e){this.inputValue!==e&&(this.inputValue=e,this.emit("input-value-change",e))}setOpen(e){this.open!==e&&(this.open=e,e||(this.activeId=null),this.emit("open-change",e))}openWithHighlight(e){this.setOpen(!0),requestAnimationFrame(()=>{let i=Array.from(this.querySelectorAll(o));i.length!==0&&this.setActiveId((e==="last"?i[i.length-1]:i[0]).id)})}setActiveId(e){this.activeId=e,this.notify()}emit(e,i){this.dispatchEvent(new CustomEvent(e,{detail:i,bubbles:!0,composed:!0})),this.notify()}notify(){this.dispatchEvent(new CustomEvent("skdx-combobox-internal-update",{bubbles:!0,composed:!0})),this.requestUpdate()}announceResultCount(){!this.open||this.loading||(0,b.announce)(this.getResultCountLabel(this.querySelectorAll(o).length))}maybeAutoHighlight(){!this.autoHighlight||!this.open||this.activeId!==null||requestAnimationFrame(()=>{if(!this.autoHighlight||!this.open||this.activeId!==null)return;let e=this.querySelector(o);e&&this.setActiveId(e.id)})}connectedCallback(){super.connectedCallback(),this.defaultValue??(this.defaultValue=this.value),this.itemObserver.observe(this,{childList:!0,subtree:!0,attributeFilter:["data-disabled","role"]})}disconnectedCallback(){this.itemObserver.disconnect(),this.reseedFrame!==void 0&&cancelAnimationFrame(this.reseedFrame),this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let i=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("value")||e.has("required")||e.has("multiple"))&&this.syncFormState(),e.has("open")&&this.open&&this.announceResultCount(),this.maybeAutoHighlight(),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-combobox-internal-update",{bubbles:!0,composed:!0})),e.has("open")&&!i&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,y.notifyOpenChangeComplete)(()=>this.contentEl,this.open,n=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:n,bubbles:!0,composed:!0}))))}syncFormState(){this.setFormValue(this.multiple?this.multiFormValue(this.selectedValues):this.value),this.setValueMissing(this.required&&this.selectedValues.length===0,"Please select an item in the list.",this.inputHost?.shadowRoot?.querySelector("input"))}formResetCallback(){this.value=this.defaultValue??"",this.inputValue=this.getAttribute("input-value")??""}render(){return u.html`<slot></slot>`}};s.styles=u.css`
+    :host {
+      display: contents;
+    }
+  `,l([(0,a.property)({converter:C,reflect:!0})],s.prototype,"value",2),l([(0,a.property)({type:Boolean,reflect:!0})],s.prototype,"multiple",2),l([(0,a.property)({type:Boolean,attribute:"allow-custom-value",reflect:!0})],s.prototype,"allowCustomValue",2),l([(0,a.property)({attribute:!1})],s.prototype,"filter",2),l([(0,a.property)({type:Boolean,attribute:"auto-highlight",reflect:!0})],s.prototype,"autoHighlight",2),l([(0,a.property)({type:Boolean,reflect:!0})],s.prototype,"loading",2),l([(0,a.property)({type:String,attribute:"input-value"})],s.prototype,"inputValue",2),l([(0,a.property)({type:Boolean,reflect:!0})],s.prototype,"open",2),l([(0,a.property)({type:Boolean,reflect:!0})],s.prototype,"invalid",2),l([(0,a.property)({type:Boolean,attribute:"read-only",reflect:!0})],s.prototype,"readOnly",2),l([(0,a.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),l([(0,a.property)({type:Boolean,reflect:!0})],s.prototype,"required",2),l([(0,a.property)({type:String,reflect:!0})],s.prototype,"name",2),l([(0,a.property)({attribute:"required-message"})],s.prototype,"requiredMessage",2),l([(0,a.property)({attribute:!1})],s.prototype,"getResultCountLabel",2),s=l([(0,g.customElement)("skdx-combobox")],s);0&&(module.exports={OPTION_SELECTOR,SkdxCombobox,defaultGetResultCountLabel});