@skdx/web-components 0.26.0

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

@@ -0,0 +1,54 @@
+import { SkdxColorPickerChannelSlider } from './channel-slider.js';
+/**
+ * `<skdx-color-picker-alpha-slider>` — the opacity track: a linear
+ * `role="slider"` over 0–100%, reported and stepped in whole percentage points
+ * even though the colour stores alpha as `0–1` — "50%" is what a user reads and
+ * types, `0.5` is what CSS wants, and only one of those belongs in an
+ * announcement. Must be used inside `<skdx-color-picker>`, which it finds with
+ * `closest()`.
+ *
+ * **It hides itself while the root has `alpha="false"`.** A picker that cannot
+ * express transparency should not show a control that appears to set it; the
+ * element stays in the tree (`hidden`, so `display: none`) rather than
+ * unmounting, so a layout does not have to be authored twice.
+ *
+ * It ships no CSS beyond `position: relative` and `touch-action: none`. The
+ * checkerboard behind the gradient and the gradient itself are yours, and
+ * `--skdx-color-picker-value` gives you the current colour to fade out to:
+ *
+ * ```css
+ * .my-alpha {
+ *   background:
+ *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
+ *     var(--my-checkerboard);
+ * }
+ * skdx-color-picker-alpha-slider-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-alpha-position);
+ * }
+ * ```
+ *
+ * Named "Opacity" by default; write your own `aria-label` for a localised UI
+ * and it wins.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-alpha-slider class="my-alpha">
+ *   <skdx-color-picker-alpha-slider-thumb></skdx-color-picker-alpha-slider-thumb>
+ * </skdx-color-picker-alpha-slider>
+ * ```
+ */
+export declare class SkdxColorPickerAlphaSlider extends SkdxColorPickerChannelSlider {
+    protected readonly channel = "alpha";
+    protected readonly max = 100;
+    protected readonly defaultLabel = "Opacity";
+    protected get hiddenByRoot(): boolean;
+    protected get channelValue(): number;
+    protected valueTextFor(value: number): string;
+    protected writeChannel(percent: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-alpha-slider': SkdxColorPickerAlphaSlider;
+    }
+}

package/dist/color-picker/ColorPickerAlphaSlider.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(l,t,r,e)=>{for(var o=e>1?void 0:e?p(t,r):t,n=l.length-1,d;n>=0;n--)(d=l[n])&&(o=(e?d(t,r,o):d(o))||o);return e&&o&&c(t,r,o),o};import{formatColor as s}from"../internal/color.js";import{customElement as u}from"../internal/define.js";import{SkdxColorPickerChannelSlider as h}from"./channel-slider.js";var a=class extends h{constructor(){super(...arguments);this.channel="alpha";this.max=100;this.defaultLabel="Opacity"}get hiddenByRoot(){return!(this.root?.alpha??!0)}get channelValue(){return(this.root?.color.a??1)*100}valueTextFor(r){let e=this.root;return e?`${Math.round(r)}% opaque, ${s(e.color,"hex",!1)}`:`${Math.round(r)}% opaque`}writeChannel(r){let e=this.root;e&&e.setColor({...e.color,a:r/100})}};a=i([u("skdx-color-picker-alpha-slider","color-picker","alpha-slider")],a);export{a as SkdxColorPickerAlphaSlider};

package/dist/color-picker/ColorPickerAlphaSliderThumb.cjs

@@ -0,0 +1 @@
+"use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var a in e)c(o,a,{get:e[a],enumerable:!0})},f=(o,e,a,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of h(e))!u.call(o,r)&&r!==a&&c(o,r,{get:()=>e[r],enumerable:!(t=p(e,r))||t.enumerable});return o};var g=o=>f(c({},"__esModule",{value:!0}),o),d=(o,e,a,t)=>{for(var r=t>1?void 0:t?p(e,a):e,n=o.length-1,m;n>=0;n--)(m=o[n])&&(r=(t?m(e,a,r):m(r))||r);return t&&r&&c(e,a,r),r};var k={};b(k,{SkdxColorPickerAlphaSliderThumb:()=>l});module.exports=g(k);var i=require("../internal/define.cjs"),s=require("./channel-slider.cjs");var l=class extends s.SkdxColorPickerChannelSliderThumb{constructor(){super(...arguments);this.channel="alpha"}get channelValue(){return(this.root?.color.a??1)*100}};l=d([(0,i.customElement)("skdx-color-picker-alpha-slider-thumb","color-picker","alpha-slider-thumb")],l);0&&(module.exports={SkdxColorPickerAlphaSliderThumb});

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

@@ -0,0 +1,37 @@
+import { SkdxColorPickerChannelSliderThumb } from './channel-slider.cjs';
+/**
+ * `<skdx-color-picker-alpha-slider-thumb>` — the handle on a
+ * `<skdx-color-picker-alpha-slider>`. Purely visual: `aria-hidden` and out of
+ * the tab order, because the track carries the `role="slider"` semantics and
+ * takes the tab stop. Must be used inside `<skdx-color-picker>`.
+ *
+ * It ships **no positioning**. The root publishes
+ * `--skdx-color-picker-alpha-position` as a percentage:
+ *
+ * ```css
+ * skdx-color-picker-alpha-slider-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-alpha-position);
+ * }
+ * ```
+ *
+ * `data-value` is the opacity in **percent**, matching what the track reports,
+ * not the `0–1` alpha the colour stores. `data-dragging` lives on the track;
+ * reach it with `[data-channel='alpha'][data-dragging] skdx-color-picker-alpha-slider-thumb`.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-alpha-slider>
+ *   <skdx-color-picker-alpha-slider-thumb></skdx-color-picker-alpha-slider-thumb>
+ * </skdx-color-picker-alpha-slider>
+ * ```
+ */
+export declare class SkdxColorPickerAlphaSliderThumb extends SkdxColorPickerChannelSliderThumb {
+    protected readonly channel = "alpha";
+    protected get channelValue(): number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-alpha-slider-thumb': SkdxColorPickerAlphaSliderThumb;
+    }
+}

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

@@ -0,0 +1,37 @@
+import { SkdxColorPickerChannelSliderThumb } from './channel-slider.js';
+/**
+ * `<skdx-color-picker-alpha-slider-thumb>` — the handle on a
+ * `<skdx-color-picker-alpha-slider>`. Purely visual: `aria-hidden` and out of
+ * the tab order, because the track carries the `role="slider"` semantics and
+ * takes the tab stop. Must be used inside `<skdx-color-picker>`.
+ *
+ * It ships **no positioning**. The root publishes
+ * `--skdx-color-picker-alpha-position` as a percentage:
+ *
+ * ```css
+ * skdx-color-picker-alpha-slider-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-alpha-position);
+ * }
+ * ```
+ *
+ * `data-value` is the opacity in **percent**, matching what the track reports,
+ * not the `0–1` alpha the colour stores. `data-dragging` lives on the track;
+ * reach it with `[data-channel='alpha'][data-dragging] skdx-color-picker-alpha-slider-thumb`.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-alpha-slider>
+ *   <skdx-color-picker-alpha-slider-thumb></skdx-color-picker-alpha-slider-thumb>
+ * </skdx-color-picker-alpha-slider>
+ * ```
+ */
+export declare class SkdxColorPickerAlphaSliderThumb extends SkdxColorPickerChannelSliderThumb {
+    protected readonly channel = "alpha";
+    protected get channelValue(): number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-alpha-slider-thumb': SkdxColorPickerAlphaSliderThumb;
+    }
+}

package/dist/color-picker/ColorPickerAlphaSliderThumb.js

@@ -0,0 +1 @@
+var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=(t,r,l,o)=>{for(var e=o>1?void 0:o?d(r,l):r,c=t.length-1,n;c>=0;c--)(n=t[c])&&(e=(o?n(r,l,e):n(e))||e);return o&&e&&p(r,l,e),e};import{customElement as i}from"../internal/define.js";import{SkdxColorPickerChannelSliderThumb as s}from"./channel-slider.js";var a=class extends s{constructor(){super(...arguments);this.channel="alpha"}get channelValue(){return(this.root?.color.a??1)*100}};a=m([i("skdx-color-picker-alpha-slider-thumb","color-picker","alpha-slider-thumb")],a);export{a as SkdxColorPickerAlphaSliderThumb};

package/dist/color-picker/ColorPickerArea.cjs

@@ -0,0 +1,8 @@
+"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var k=(r,e)=>{for(var o in e)n(r,o,{get:e[o],enumerable:!0})},y=(r,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!v.call(r,t)&&t!==o&&n(r,t,{get:()=>e[t],enumerable:!(i=p(e,t))||i.enumerable});return r};var C=r=>y(n({},"__esModule",{value:!0}),r),c=(r,e,o,i)=>{for(var t=i>1?void 0:i?p(e,o):e,d=r.length-1,l;d>=0;d--)(l=r[d])&&(t=(i?l(e,o,t):l(t))||t);return i&&t&&n(e,o,t),t};var x={};k(x,{SkdxColorPickerArea:()=>s});module.exports=C(x);var a=require("lit"),h=require("lit/decorators.js"),m=require("../internal/define.cjs"),u=require("../internal/styles.cjs"),g=require("./channel-slider.cjs"),b=require("./pointer-ratio.cjs");var s=class extends a.LitElement{constructor(){super(...arguments);this.dragging=!1;this.root=null}connectedCallback(){if(super.connectedCallback(),this.setAttribute("role","group"),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-area> must be used inside <skdx-color-picker>.");this.disposePointer=(0,b.trackPointerRatio)(this,{enabled:()=>this.root?.interactive??!1,onRatioChange:({x:o,y:i})=>{let t=this.root;t&&t.setColor({...t.color,s:(0,g.snapChannel)(o*100,t.step,100),b:(0,g.snapChannel)((1-i)*100,t.step,100)})},onRatioChangeEnd:()=>this.root?.commit(),onDraggingChange:o=>{this.dragging=o}})}disconnectedCallback(){this.disposePointer?.(),this.disposePointer=void 0,this.dragging=!1,this.removeAttribute("data-dragging"),this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}updated(){let o=this.root;o&&(this.toggleAttribute("data-disabled",o.disabled),this.toggleAttribute("data-readonly",o.readOnly),this.toggleAttribute("data-dragging",this.dragging))}render(){return a.html`<slot></slot>`}};s.styles=[u.hiddenHostStyles,a.css`
+      :host {
+        display: block;
+        position: relative;
+        /* So a touch drag across the surface is not stolen by the page scroll. */
+        touch-action: none;
+      }
+    `],c([(0,h.state)()],s.prototype,"dragging",2),s=c([(0,m.customElement)("skdx-color-picker-area","color-picker","area")],s);0&&(module.exports={SkdxColorPickerArea});

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

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-color-picker-area>` — the 2D saturation/brightness surface:
+ * **saturation runs left-to-right, brightness bottom-to-top**, at whatever hue
+ * the picker currently holds. Pointer down anywhere inside it seeks straight to
+ * that colour, and dragging keeps updating until release — the drag survives
+ * leaving the element and the window, and a cancelled drag still commits rather
+ * than hanging. Must be used inside `<skdx-color-picker>`, which it finds with
+ * `closest()`.
+ *
+ * It carries `role="group"` and **no `role="application"`**. The interaction
+ * accessibility lives in `<skdx-color-picker-area-thumb>`, which renders one
+ * `role="slider"` per axis; `role="application"` here would hand the whole
+ * surface to the browser as an opaque box and take the screen reader's own
+ * navigation away from the user, to buy keyboard handling the thumb already
+ * implements. `group` takes nothing away — it exists so that the `aria-label`
+ * this element is documented to take is *allowed* to land on it. A bare custom
+ * element has no role at all, and `aria-label` on a roleless element names
+ * nothing and is a prohibited use of the attribute (axe's
+ * `aria-prohibited-attr`).
+ *
+ * Ships no CSS beyond `position: relative` and `touch-action: none` (so a touch
+ * drag across the surface is not stolen by the page scroll). The hue backdrop
+ * and the black/white gradients on top of it are yours, driven by
+ * `--skdx-color-picker-hue`; the thumb is placed from
+ * `--skdx-color-picker-saturation` and `--skdx-color-picker-brightness`, both
+ * already percentages:
+ *
+ * ```css
+ * .my-area {
+ *   background:
+ *     linear-gradient(to top, #000, transparent),
+ *     linear-gradient(to right, #fff, transparent),
+ *     hsl(var(--skdx-color-picker-hue) 100% 50%);
+ * }
+ * skdx-color-picker-area-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-saturation);
+ *   inset-block-end: var(--skdx-color-picker-brightness);
+ * }
+ * ```
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-area class="my-area">
+ *   <skdx-color-picker-area-thumb></skdx-color-picker-area-thumb>
+ * </skdx-color-picker-area>
+ * ```
+ */
+export declare class SkdxColorPickerArea extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal True between pointer down and release/cancel; drives `data-dragging` on this host. */
+    private dragging;
+    private root;
+    private disposePointer?;
+    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;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-area': SkdxColorPickerArea;
+    }
+}

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

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-color-picker-area>` — the 2D saturation/brightness surface:
+ * **saturation runs left-to-right, brightness bottom-to-top**, at whatever hue
+ * the picker currently holds. Pointer down anywhere inside it seeks straight to
+ * that colour, and dragging keeps updating until release — the drag survives
+ * leaving the element and the window, and a cancelled drag still commits rather
+ * than hanging. Must be used inside `<skdx-color-picker>`, which it finds with
+ * `closest()`.
+ *
+ * It carries `role="group"` and **no `role="application"`**. The interaction
+ * accessibility lives in `<skdx-color-picker-area-thumb>`, which renders one
+ * `role="slider"` per axis; `role="application"` here would hand the whole
+ * surface to the browser as an opaque box and take the screen reader's own
+ * navigation away from the user, to buy keyboard handling the thumb already
+ * implements. `group` takes nothing away — it exists so that the `aria-label`
+ * this element is documented to take is *allowed* to land on it. A bare custom
+ * element has no role at all, and `aria-label` on a roleless element names
+ * nothing and is a prohibited use of the attribute (axe's
+ * `aria-prohibited-attr`).
+ *
+ * Ships no CSS beyond `position: relative` and `touch-action: none` (so a touch
+ * drag across the surface is not stolen by the page scroll). The hue backdrop
+ * and the black/white gradients on top of it are yours, driven by
+ * `--skdx-color-picker-hue`; the thumb is placed from
+ * `--skdx-color-picker-saturation` and `--skdx-color-picker-brightness`, both
+ * already percentages:
+ *
+ * ```css
+ * .my-area {
+ *   background:
+ *     linear-gradient(to top, #000, transparent),
+ *     linear-gradient(to right, #fff, transparent),
+ *     hsl(var(--skdx-color-picker-hue) 100% 50%);
+ * }
+ * skdx-color-picker-area-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-saturation);
+ *   inset-block-end: var(--skdx-color-picker-brightness);
+ * }
+ * ```
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-area class="my-area">
+ *   <skdx-color-picker-area-thumb></skdx-color-picker-area-thumb>
+ * </skdx-color-picker-area>
+ * ```
+ */
+export declare class SkdxColorPickerArea extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal True between pointer down and release/cancel; drives `data-dragging` on this host. */
+    private dragging;
+    private root;
+    private disposePointer?;
+    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;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-area': SkdxColorPickerArea;
+    }
+}

package/dist/color-picker/ColorPickerArea.js

@@ -0,0 +1,8 @@
+var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var d=(s,i,o,e)=>{for(var t=e>1?void 0:e?g(i,o):i,a=s.length-1,n;a>=0;a--)(n=s[a])&&(t=(e?n(i,o,t):n(t))||t);return e&&t&&c(i,o,t),t};import{css as p,html as h,LitElement as m}from"lit";import{state as u}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";import{snapChannel as l}from"./channel-slider.js";import{trackPointerRatio as v}from"./pointer-ratio.js";var r=class extends m{constructor(){super(...arguments);this.dragging=!1;this.root=null}connectedCallback(){if(super.connectedCallback(),this.setAttribute("role","group"),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-area> must be used inside <skdx-color-picker>.");this.disposePointer=v(this,{enabled:()=>this.root?.interactive??!1,onRatioChange:({x:o,y:e})=>{let t=this.root;t&&t.setColor({...t.color,s:l(o*100,t.step,100),b:l((1-e)*100,t.step,100)})},onRatioChangeEnd:()=>this.root?.commit(),onDraggingChange:o=>{this.dragging=o}})}disconnectedCallback(){this.disposePointer?.(),this.disposePointer=void 0,this.dragging=!1,this.removeAttribute("data-dragging"),this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}updated(){let o=this.root;o&&(this.toggleAttribute("data-disabled",o.disabled),this.toggleAttribute("data-readonly",o.readOnly),this.toggleAttribute("data-dragging",this.dragging))}render(){return h`<slot></slot>`}};r.styles=[f,p`
+      :host {
+        display: block;
+        position: relative;
+        /* So a touch drag across the surface is not stolen by the page scroll. */
+        touch-action: none;
+      }
+    `],d([u()],r.prototype,"dragging",2),r=d([b("skdx-color-picker-area","color-picker","area")],r);export{r as SkdxColorPickerArea};

package/dist/color-picker/ColorPickerAreaThumb.cjs

@@ -0,0 +1,17 @@
+"use strict";var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var A=(i,a)=>{for(var e in a)m(i,e,{get:a[e],enumerable:!0})},C=(i,a,e,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of L(a))!E.call(i,t)&&t!==e&&m(i,t,{get:()=>a[t],enumerable:!(r=g(a,t))||r.enumerable});return i};var H=i=>C(m({},"__esModule",{value:!0}),i),v=(i,a,e,r)=>{for(var t=r>1?void 0:r?g(a,e):a,o=i.length-1,n;o>=0;o--)(n=i[o])&&(t=(r?n(a,e,t):n(t))||t);return r&&t&&m(a,e,t),t};var M={};A(M,{SkdxColorPickerAreaThumb:()=>c});module.exports=H(M);var s=require("lit"),f=require("lit/decorators.js"),$=require("../internal/define.cjs"),k=require("../internal/direction.cjs"),w=require("../internal/styles.cjs"),u=require("./channel-slider.cjs");var K=10,c=class extends s.LitElement{constructor(){super(...arguments);this.saturationLabel="Saturation";this.brightnessLabel="Brightness";this.root=null}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),(0,w.installLightDomStyles)(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-area-thumb> must be used inside <skdx-color-picker>.")}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}updated(){let e=this.root;e&&(this.setAttribute("data-value",e.value),this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}handleAxisKeydown(e,r){let t=this.root;if(!t?.interactive)return;let o=t.color,n=t.step,l=(0,k.directionalKey)(r.key,this),y=(0,u.arrowStep)(n),b=r.shiftKey?y*K:y,h=(p,x)=>(0,u.snapChannel)(p+x,n,100),d=null;if(l==="ArrowRight")d={...o,s:h(o.s,b)};else if(l==="ArrowLeft")d={...o,s:h(o.s,-b)};else if(l==="ArrowUp")d={...o,b:h(o.b,b)};else if(l==="ArrowDown")d={...o,b:h(o.b,-b)};else if(l==="Home"||l==="End"){let p=l==="Home"?0:100;d=e==="saturation"?{...o,s:p}:{...o,b:p}}d&&(r.preventDefault(),t.setColor(d))}renderAxis(e){let r=this.root;if(!r)return s.nothing;let t=r.color,o=e==="saturation"?t.s:t.b;return s.html`<span
+      role="slider"
+      aria-label=${e==="saturation"?this.saturationLabel:this.brightnessLabel}
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow=${(0,u.round2)(o)}
+      aria-valuetext=${`${Math.round(t.s)}% saturation, ${Math.round(t.b)}% brightness, ${r.describe(t)}`}
+      aria-orientation=${e==="saturation"?"horizontal":"vertical"}
+      aria-disabled=${r.disabled?"true":s.nothing}
+      aria-readonly=${r.readOnly?"true":s.nothing}
+      tabindex=${r.disabled?"-1":"0"}
+      data-channel=${e}
+      data-value=${(0,u.round2)(o)}
+      data-disabled=${r.disabled?"":s.nothing}
+      data-readonly=${r.readOnly?"":s.nothing}
+      @keydown=${n=>this.handleAxisKeydown(e,n)}
+    ></span>`}render(){return s.html`${this.renderAxis("saturation")}${this.renderAxis("brightness")}`}};v([(0,f.property)({type:String,attribute:"saturation-label"})],c.prototype,"saturationLabel",2),v([(0,f.property)({type:String,attribute:"brightness-label"})],c.prototype,"brightnessLabel",2),c=v([(0,$.customElement)("skdx-color-picker-area-thumb","color-picker","area-thumb")],c);0&&(module.exports={SkdxColorPickerAreaThumb});

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

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-color-picker-area-thumb>` — the handle on a
+ * `<skdx-color-picker-area>`, and the area's entire accessibility surface: it
+ * renders **two `role="slider"` elements**, one for saturation and one for
+ * brightness, each with its own accessible name and its own truthful
+ * `aria-valuenow`. Must be used inside `<skdx-color-picker>`.
+ *
+ * Two sliders rather than one: `role="slider"` requires `aria-valuenow`, and a
+ * 2D colour has no single number to put there — a lone slider would have to
+ * report one axis and lie about the other, which is the failure mode
+ * `aria-valuetext` cannot paper over. Two axes each report a number that is
+ * true. The cost is two tab stops inside one visual thumb, which is the same
+ * trade every shipped 2D colour area makes: an extra Tab press versus an
+ * announcement that is wrong.
+ *
+ * Both axes accept **all four arrow keys**, so no key is dead wherever focus
+ * happens to sit; `Home`/`End` are the one axis-specific pair, sending *that*
+ * axis to its extremes. Shift multiplies the step by ten. Because each axis's
+ * `aria-valuetext` names both percentages and the resulting colour, a move on
+ * either axis re-announces from the focused slider — which is why nothing here
+ * writes to the live region.
+ *
+ * The two axes are the focus targets, not the host, so give them size in CSS —
+ * typically by filling the thumb. They render into this element's light DOM,
+ * so an ordinary descendant selector reaches them, the same one the React,
+ * Vue, Svelte and Angular builds use:
+ *
+ * ```css
+ * skdx-color-picker-area-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-saturation);
+ *   inset-block-end: var(--skdx-color-picker-brightness);
+ * }
+ * skdx-color-picker-area-thumb > [role='slider'] {
+ *   position: absolute;
+ *   inset: 0;
+ * }
+ * ```
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-area>
+ *   <skdx-color-picker-area-thumb
+ *     saturation-label="Saturation"
+ *     brightness-label="Brightness"
+ *   ></skdx-color-picker-area-thumb>
+ * </skdx-color-picker-area>
+ * ```
+ *
+ */
+export declare class SkdxColorPickerAreaThumb extends LitElement {
+    /**
+     * No shadow root: the two axes are rendered into this element's **light
+     * DOM**, exactly where React puts them (`ColorPickerAreaThumb.tsx:124-126`).
+     *
+     * They cannot live in a shadow root. `@skdx/skins` gives them their box
+     * with `:where(.skdx-color-picker__area-thumb) > [role='slider'] { inset: 0 }`
+     * — a document-level rule with a child combinator, which no shadow boundary
+     * lets through. Behind one, the two sliders got no size at all and were, in
+     * the skin's own words, "two tab stops with no box, which is a keyboard trap
+     * in everything but name".
+     *
+     * The boundary also collapsed both axes into a single
+     * `document.activeElement`, so from outside the component Tab looked like it
+     * was not moving between them.
+     *
+     * Host display (and `[hidden]`) come from the shared light-DOM sheet; there
+     * is no `<slot>` because light-DOM children are already children.
+     */
+    protected createRenderRoot(): HTMLElement;
+    /**
+     * Accessible name of the horizontal axis, which is a `role="slider"` of its
+     * own — two unnamed sliders in the same box are indistinguishable.
+     * @default 'Saturation' — override it for a localised UI.
+     */
+    saturationLabel: string;
+    /**
+     * Accessible name of the vertical axis, which is a second `role="slider"`.
+     * @default 'Brightness' — override it for a localised UI.
+     */
+    brightnessLabel: string;
+    private root;
+    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 handleAxisKeydown;
+    /** One axis of the 2D area, as a real `role="slider"` with a truthful `aria-valuenow`. */
+    private renderAxis;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-area-thumb': SkdxColorPickerAreaThumb;
+    }
+}

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

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-color-picker-area-thumb>` — the handle on a
+ * `<skdx-color-picker-area>`, and the area's entire accessibility surface: it
+ * renders **two `role="slider"` elements**, one for saturation and one for
+ * brightness, each with its own accessible name and its own truthful
+ * `aria-valuenow`. Must be used inside `<skdx-color-picker>`.
+ *
+ * Two sliders rather than one: `role="slider"` requires `aria-valuenow`, and a
+ * 2D colour has no single number to put there — a lone slider would have to
+ * report one axis and lie about the other, which is the failure mode
+ * `aria-valuetext` cannot paper over. Two axes each report a number that is
+ * true. The cost is two tab stops inside one visual thumb, which is the same
+ * trade every shipped 2D colour area makes: an extra Tab press versus an
+ * announcement that is wrong.
+ *
+ * Both axes accept **all four arrow keys**, so no key is dead wherever focus
+ * happens to sit; `Home`/`End` are the one axis-specific pair, sending *that*
+ * axis to its extremes. Shift multiplies the step by ten. Because each axis's
+ * `aria-valuetext` names both percentages and the resulting colour, a move on
+ * either axis re-announces from the focused slider — which is why nothing here
+ * writes to the live region.
+ *
+ * The two axes are the focus targets, not the host, so give them size in CSS —
+ * typically by filling the thumb. They render into this element's light DOM,
+ * so an ordinary descendant selector reaches them, the same one the React,
+ * Vue, Svelte and Angular builds use:
+ *
+ * ```css
+ * skdx-color-picker-area-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-saturation);
+ *   inset-block-end: var(--skdx-color-picker-brightness);
+ * }
+ * skdx-color-picker-area-thumb > [role='slider'] {
+ *   position: absolute;
+ *   inset: 0;
+ * }
+ * ```
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-area>
+ *   <skdx-color-picker-area-thumb
+ *     saturation-label="Saturation"
+ *     brightness-label="Brightness"
+ *   ></skdx-color-picker-area-thumb>
+ * </skdx-color-picker-area>
+ * ```
+ *
+ */
+export declare class SkdxColorPickerAreaThumb extends LitElement {
+    /**
+     * No shadow root: the two axes are rendered into this element's **light
+     * DOM**, exactly where React puts them (`ColorPickerAreaThumb.tsx:124-126`).
+     *
+     * They cannot live in a shadow root. `@skdx/skins` gives them their box
+     * with `:where(.skdx-color-picker__area-thumb) > [role='slider'] { inset: 0 }`
+     * — a document-level rule with a child combinator, which no shadow boundary
+     * lets through. Behind one, the two sliders got no size at all and were, in
+     * the skin's own words, "two tab stops with no box, which is a keyboard trap
+     * in everything but name".
+     *
+     * The boundary also collapsed both axes into a single
+     * `document.activeElement`, so from outside the component Tab looked like it
+     * was not moving between them.
+     *
+     * Host display (and `[hidden]`) come from the shared light-DOM sheet; there
+     * is no `<slot>` because light-DOM children are already children.
+     */
+    protected createRenderRoot(): HTMLElement;
+    /**
+     * Accessible name of the horizontal axis, which is a `role="slider"` of its
+     * own — two unnamed sliders in the same box are indistinguishable.
+     * @default 'Saturation' — override it for a localised UI.
+     */
+    saturationLabel: string;
+    /**
+     * Accessible name of the vertical axis, which is a second `role="slider"`.
+     * @default 'Brightness' — override it for a localised UI.
+     */
+    brightnessLabel: string;
+    private root;
+    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 handleAxisKeydown;
+    /** One axis of the 2D area, as a real `role="slider"` with a truthful `aria-valuenow`. */
+    private renderAxis;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-area-thumb': SkdxColorPickerAreaThumb;
+    }
+}

package/dist/color-picker/ColorPickerAreaThumb.js

@@ -0,0 +1,17 @@
+var $=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var h=(p,l,o,e)=>{for(var t=e>1?void 0:e?k(l,o):l,r=p.length-1,a;r>=0;r--)(a=p[r])&&(t=(e?a(l,o,t):a(t))||t);return e&&t&&$(l,o,t),t};import{html as v,LitElement as w,nothing as d}from"lit";import{property as f}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{directionalKey as L}from"../internal/direction.js";import{installLightDomStyles as E}from"../internal/styles.js";import{arrowStep as A,round2 as y,snapChannel as C}from"./channel-slider.js";var H=10,n=class extends w{constructor(){super(...arguments);this.saturationLabel="Saturation";this.brightnessLabel="Brightness";this.root=null}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),E(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-area-thumb> must be used inside <skdx-color-picker>.")}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}updated(){let o=this.root;o&&(this.setAttribute("data-value",o.value),this.toggleAttribute("data-disabled",o.disabled),this.toggleAttribute("data-readonly",o.readOnly))}handleAxisKeydown(o,e){let t=this.root;if(!t?.interactive)return;let r=t.color,a=t.step,i=L(e.key,this),m=A(a),c=e.shiftKey?m*H:m,u=(b,g)=>C(b+g,a,100),s=null;if(i==="ArrowRight")s={...r,s:u(r.s,c)};else if(i==="ArrowLeft")s={...r,s:u(r.s,-c)};else if(i==="ArrowUp")s={...r,b:u(r.b,c)};else if(i==="ArrowDown")s={...r,b:u(r.b,-c)};else if(i==="Home"||i==="End"){let b=i==="Home"?0:100;s=o==="saturation"?{...r,s:b}:{...r,b}}s&&(e.preventDefault(),t.setColor(s))}renderAxis(o){let e=this.root;if(!e)return d;let t=e.color,r=o==="saturation"?t.s:t.b;return v`<span
+      role="slider"
+      aria-label=${o==="saturation"?this.saturationLabel:this.brightnessLabel}
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow=${y(r)}
+      aria-valuetext=${`${Math.round(t.s)}% saturation, ${Math.round(t.b)}% brightness, ${e.describe(t)}`}
+      aria-orientation=${o==="saturation"?"horizontal":"vertical"}
+      aria-disabled=${e.disabled?"true":d}
+      aria-readonly=${e.readOnly?"true":d}
+      tabindex=${e.disabled?"-1":"0"}
+      data-channel=${o}
+      data-value=${y(r)}
+      data-disabled=${e.disabled?"":d}
+      data-readonly=${e.readOnly?"":d}
+      @keydown=${a=>this.handleAxisKeydown(o,a)}
+    ></span>`}render(){return v`${this.renderAxis("saturation")}${this.renderAxis("brightness")}`}};h([f({type:String,attribute:"saturation-label"})],n.prototype,"saturationLabel",2),h([f({type:String,attribute:"brightness-label"})],n.prototype,"brightnessLabel",2),n=h([x("skdx-color-picker-area-thumb","color-picker","area-thumb")],n);export{n as SkdxColorPickerAreaThumb};

package/dist/color-picker/ColorPickerEyeDropper.cjs

@@ -0,0 +1,13 @@
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var f=(r,o)=>{for(var e in o)a(r,e,{get:o[e],enumerable:!0})},v=(r,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of k(o))!y.call(r,t)&&t!==e&&a(r,t,{get:()=>o[t],enumerable:!(i=c(o,t))||i.enumerable});return r};var w=r=>v(a({},"__esModule",{value:!0}),r),u=(r,o,e,i)=>{for(var t=i>1?void 0:i?c(o,e):o,d=r.length-1,p;d>=0;d--)(p=r[d])&&(t=(i?p(o,e,t):p(t))||t);return i&&t&&a(o,e,t),t};var g={};f(g,{SkdxColorPickerEyeDropper:()=>l});module.exports=w(g);var s=require("lit"),h=require("../internal/aria-label.cjs"),m=require("../internal/color.cjs"),b=require("../internal/define.cjs"),n=require("../internal/styles.cjs");var l=class extends s.LitElement{constructor(){super(...arguments);this.root=null;this.supported=!1;this.label=null;this.handleClick=()=>{let e=this.root;if(!e?.interactive)return;let i=window.EyeDropper;i&&new i().open().then(({sRGBHex:t})=>{let d=(0,m.parseColor)(t);d&&e.setColor({...d,a:e.color.a},{announce:!0})}).catch(()=>{})}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-eye-dropper> must be used inside <skdx-color-picker>.");this.supported=typeof window<"u"&&"EyeDropper"in window,this.hidden=!this.supported,this.label=(0,h.takeHostAriaLabel)(this)}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}updated(){let e=this.root;e&&(this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}render(){let e=this.root;return!this.supported||!e?s.nothing:s.html`<button
+      part="eye-dropper"
+      type="button"
+      aria-label=${this.label??"Pick a colour from the screen"}
+      ?disabled=${e.disabled}
+      @click=${this.handleClick}
+    >
+      <slot></slot>
+    </button>`}};l.shadowRootOptions=n.delegatesFocusShadowRootOptions,l.styles=[n.resetNativeControl,n.hiddenHostStyles,s.css`
+      :host {
+        display: inline-block;
+      }
+    `,n.controlBoxOnHost],l=u([(0,b.customElement)("skdx-color-picker-eye-dropper","color-picker","eye-dropper")],l);0&&(module.exports={SkdxColorPickerEyeDropper});

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

@@ -0,0 +1,50 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-color-picker-eye-dropper>` — opens the browser's screen colour picker
+ * and applies whatever the user clicks: the one way to sample a colour that is
+ * not already inside this widget. Must be used inside `<skdx-color-picker>`.
+ *
+ * **It renders nothing where `window.EyeDropper` does not exist** — today
+ * Firefox and Safari — and hides its host with it, rather than offering a
+ * button that cannot work. Support is feature-detected on connect, because
+ * whether the platform has the API cannot change over a page's lifetime.
+ *
+ * The sampled colour is always opaque, so the picker's **current alpha is
+ * kept** — sampling a colour off the screen is not a statement about
+ * transparency, and resetting opacity to 100% would quietly undo the user's
+ * last decision. Dismissing the picker (Escape) is a cancellation, not an
+ * error, and changes nothing.
+ *
+ * The result **is announced** through the shared live region: a button press
+ * tells a screen-reader user nothing about the colour it produced.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-eye-dropper aria-label="Pick a colour from the screen">
+ *   🔍
+ * </skdx-color-picker-eye-dropper>
+ * ```
+ *
+ * @csspart eye-dropper - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxColorPickerEyeDropper extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    /** Whether this platform has the EyeDropper API at all. Fixed for the page's lifetime. */
+    private supported;
+    /** The consumer's own name for this button, moved off the host so it lands on the element that has the role. */
+    private label;
+    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 handleClick;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-eye-dropper': SkdxColorPickerEyeDropper;
+    }
+}