@skdx/web-components 0.27.0 → 0.28.0

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

@@ -1,50 +1,33 @@
 import { LitElement, type PropertyValues } from 'lit';
 import { type ColorFormat, type HsbColor } from '../internal/color.js';
+import { type SkdxColorPickerSwatchDescriptor } from './ColorPickerAnatomy.js';
+export type { SkdxColorPickerSwatchDescriptor } from './ColorPickerAnatomy.js';
 /**
- * `<skdx-color-picker>` — the Web Components implementation of the shared
- * ColorPicker contract (see `@skdx/shared`'s `colorPickerContract`). Owns the
- * colour, owns the notation it is spelled in, and publishes both to every part
- * and to CSS through custom properties. The host carries **no role of its
- * own** — each interactive part carries its own semantics, so a role here would
- * only add an unnamed group between the user and them. Wrap it in a labelled
- * `role="group"` yourself if the picker needs introducing as a unit.
+ * Root of a colour picker: owns the colour and the notation it is spelled in,
+ * publishing both to every part and to CSS through custom properties. The host
+ * carries **no role** — each interactive part carries its own semantics. Wrap it
+ * in a labelled `role="group"` if the picker needs introducing as a unit.
  *
- * **The colour is stored as HSB, not as the string.** RGB and hex cannot
- * represent the hue of a black, so a picker that re-parsed its own string on
- * every change would lose the user's hue the moment they dragged brightness to
- * zero and hand them red on the way back up. `value` is the *serialisation*;
- * the canonical colour lives beside it and only re-syncs when a string arrives
- * that this picker did not produce. An unparseable `value` keeps the last good
- * colour rather than blanking the picker — `#ab` is one keystroke from valid.
+ * **The colour is stored as HSB.** RGB and hex cannot represent the hue of a black,
+ * so a picker that re-parsed its own string on every change would lose the user's
+ * hue the moment they dragged brightness to zero. `value` is the serialisation;
+ * the canonical colour lives beside it and only re-syncs when a string arrives that
+ * this picker did not produce. An unparseable value keeps the last good colour
+ * rather than blanking the picker — `#ab` is one keystroke from valid.
  *
- * Positioning is entirely CSS. The host publishes:
- *
- * | Property | Example | For |
- * | --- | --- | --- |
- * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop, `hsl(var(--…-hue) 100% 50%)` |
- * | `--skdx-color-picker-hue-position` | `58.333%` | the hue thumb's offset along its track |
- * | `--skdx-color-picker-saturation` | `65%` | the area thumb's horizontal offset |
- * | `--skdx-color-picker-brightness` | `85%` | the area thumb's vertical offset |
- * | `--skdx-color-picker-alpha` | `0.5` | an opacity, directly |
- * | `--skdx-color-picker-alpha-position` | `50%` | the alpha thumb's offset along its track |
- * | `--skdx-color-picker-value` | `#d94c4c` | the current colour as a swatch fill |
+ * Positioning is entirely CSS. The host publishes these custom properties:
+ * `--skdx-color-picker-hue` (hue in degrees), `--skdx-color-picker-hue-position`
+ * (thumb offset as %), `--skdx-color-picker-saturation` (%),
+ * `--skdx-color-picker-brightness` (%), `--skdx-color-picker-alpha` (0–1),
+ * `--skdx-color-picker-alpha-position` (%), `--skdx-color-picker-value` (hex, always).
  *
  * `--skdx-color-picker-value` is **always hex**, never the active format:
- * `hsb()` is this library's own notation and not a CSS colour, so publishing
- * the raw `value` would silently break every
- * `background: var(--skdx-color-picker-value)` the moment a user switched
- * format.
- *
- * Descendant parts find this root with `closest('skdx-color-picker')` — custom
- * elements have no context API — and the root pushes its state onto them after
- * every update, so no part duplicates it.
+ * `hsb()` is not a CSS colour, so publishing the raw value would break
+ * `background: var(--…-value)` when a user switched format.
  *
- * Not a form control in itself: the colour is submitted by the consumer,
- * typically through a hidden input carrying the emitted string.
- *
- * **An overlay picker composes `<skdx-popover>`** rather than growing a trigger
- * and a content part of its own — there is nothing about positioning a colour
- * picker that differs from positioning anything else.
+ * Descendant parts find this root with `closest('skdx-color-picker')` and read
+ * its state; the root pushes updates to them after every change, so no part
+ * duplicates it.
  *
  * @example
  * ```html
@@ -55,84 +38,87 @@ import { type ColorFormat, type HsbColor } from '../internal/color.js';
  *   <skdx-color-picker-hue-slider>
  *     <skdx-color-picker-hue-slider-thumb></skdx-color-picker-hue-slider-thumb>
  *   </skdx-color-picker-hue-slider>
- *   <skdx-color-picker-alpha-slider>
- *     <skdx-color-picker-alpha-slider-thumb></skdx-color-picker-alpha-slider-thumb>
- *   </skdx-color-picker-alpha-slider>
- *   <skdx-color-picker-format-select></skdx-color-picker-format-select>
- *   <skdx-color-picker-input></skdx-color-picker-input>
- *   <skdx-color-picker-eye-dropper>🔍</skdx-color-picker-eye-dropper>
  * </skdx-color-picker>
  * ```
  *
- * @fires value-change - Fires with the new colour string on every change: each arrow key, each frame of a drag that moves the colour, each swatch click — and also on a format change, because the string genuinely changed even though the colour did not. Suppressed when the new string equals the one already reported.
- * @fires value-commit - Fires once with the final colour string (string) when a pointer drag ends, by release or cancel. This is the event to hang an expensive effect on: a drag emits `value-change` per frame and this one exactly once. Keyboard and click changes do not fire it — each is already a discrete commit reported by `value-change`.
- * @fires format-change - Fires with the new notation (`'hex' | 'rgb' | 'hsl' | 'hsb'`) whenever it changes. `value-change` fires alongside it with the re-spelled string.
+ * @fires value-change Fires with the new string on every change: arrow keys, drag
+ * frames, swatch clicks, and format switches; suppressed when the string doesn't change.
+ * @fires value-commit Fires once with the final string when a pointer drag ends.
+ * Use for expensive effects; `value-change` fires per frame but this fires once.
+ * Keyboard and click changes do not fire it.
+ * @fires format-change Fires with the new notation. `value-change` fires alongside
+ * it with the re-spelled string.
  */
 export declare class SkdxColorPicker extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Current colour as a string in the active `format`. The property is the
-     * single source of truth, like a native `<input>`'s `value`: a consumer that
-     * wants controlled behaviour listens for `value-change` and writes it back.
-     * Anything {@link parseColor} understands is accepted regardless of `format`.
+     * Current colour for controlled usage. Pair with `value-change`. Accepts any
+     * {@link parseColor} notation; unparseable input keeps the last colour.
      * @default '#000000' — opaque black, the one colour every format agrees on.
-     * An unparseable string is ignored and the last good colour kept, because a
-     * half-typed `#ab` should not blank the picker.
      */
     value: string;
     /**
-     * Initial colour, for uncontrolled usage. Applied once, on connect, and only
-     * if the `value` attribute wasn't already set.
-     * @default '#000000' — the picker starts on opaque black.
+     * Initial colour, for uncontrolled usage, seeding the first render.
+     * @default '#000000' — opaque black, the one colour every format agrees on.
      */
     defaultValue: string;
     /**
-     * Notation `value` is written in. The colour itself is stored as HSB whatever
-     * this says; the format only decides how it is spelled on the way out.
+     * Notation `value` is written in, for controlled usage. Pair with `format-change`.
+     * Colour is stored as HSB; format only decides spelling.
      * @default 'hex' — the notation people paste, type and recognise.
      */
     format: ColorFormat;
     /**
-     * Initial notation, for uncontrolled usage. Applied once, on connect, and
-     * only if the `format` attribute wasn't already set.
-     * @default 'hex' — the picker starts spelling its colour as hex.
+     * The notation the picker starts in when it is left uncontrolled.
+     * @default 'hex' — the notation people paste, type and recognise.
      */
     defaultFormat: ColorFormat;
     /**
-     * Whether the picker has an alpha channel. With it off,
-     * `<skdx-color-picker-alpha-slider>` hides itself and every emitted string is
-     * fully opaque — so a consumer that cannot handle transparency never receives
-     * an `rgba()` it must strip.
-     *
-     * Uses the `optOutBoolean` converter rather than Lit's stock `Boolean`, which
-     * reads attribute *presence*: a prop that defaults to `true` can only be
-     * switched off by value, so `alpha="false"` is the way to opt out.
+     * Whether the picker has an alpha channel. When `false`, `ColorPickerAlphaSlider`
+     * renders nothing and every emitted string is fully opaque.
      * @default true — the picker offers transparency.
      */
     alpha: boolean;
     /**
-     * Keyboard increment, in the units of whichever channel is being stepped:
-     * percentage points for saturation, brightness and alpha, degrees for hue.
-     * Shift multiplies it by ten, so a 1-unit picker still has a coarse gear.
-     * @default 1 — every whole unit is reachable without a pointer. `0` makes
-     * pointer input continuous, while the arrows keep falling back to one unit so
-     * every value stays reachable by keyboard.
+     * Keyboard increment in channel units: percent for saturation/brightness/alpha,
+     * degrees for hue. Shift multiplies by ten.
+     * @default 1 — every whole unit is reachable without a pointer.
      */
     step: number;
     /**
      * Blocks pointer and keyboard interaction across every part, and takes the
      * focusable parts out of the tab order.
-     * @default false — the picker is interactive and in the tab order.
+     * @default false
      */
     disabled: boolean;
     /**
      * Displays the colour but blocks changes, while every part stays focusable
-     * and in the tab order — unlike `disabled`, a read-only picker can still be
-     * reached and read by a keyboard user. It also refuses a format switch,
-     * because switching format changes `value`.
-     * @default false — changes are accepted.
+     * and in the tab order — unlike `disabled`. Also refuses format switches.
+     * @default false
      */
     readOnly: boolean;
+    /**
+     * Whether to render a `ColorPickerInput`. Ignored when `children` is given.
+     * @default true
+     */
+    showInput: boolean;
+    /**
+     * Whether to render a `ColorPickerSwatchGroup`. Ignored when `children` is
+     * given or `swatches` is empty.
+     * @default true
+     */
+    showSwatches: boolean;
+    /**
+     * Whether to render a `ColorPickerEyeDropper` trigger. Ignored when `children` is given.
+     * @default true
+     */
+    showEyeDropper: boolean;
+    /**
+     * Preset colours the derived anatomy renders as `ColorPickerSwatch` parts,
+     * one per entry. Ignored when `children` is given or `showSwatches` is `false`.
+     * @default undefined
+     */
+    swatches?: readonly SkdxColorPickerSwatchDescriptor[];
     /**
      * @internal The canonical colour. HSB, so hue survives a trip to black.
      * Read by every part through `closest('skdx-color-picker')`; written only by
@@ -144,8 +130,17 @@ export declare class SkdxColorPicker extends LitElement {
     /** `!disabled && !readOnly` — the single condition every part gates input on. @internal */
     get interactive(): boolean;
     connectedCallback(): void;
+    private _anatomyBuilt;
+    /**
+     * Draws the canonical anatomy into the light DOM when this element has no
+     * consumer-authored part — "simple by default" — and hands it straight back
+     * once one appears.
+     */
+    private readonly _fillAnatomy;
+    /** Forces a rebuild — for a change that alters the derived structure itself. */
+    private readonly _rebuildAnatomy;
     protected willUpdate(changed: PropertyValues): void;
-    protected updated(): void;
+    protected updated(changed: PropertyValues): void;
     private syncHostAttributes;
     /**
      * What a change to this colour sounds like. Hex rather than the active

package/dist/color-picker/ColorPicker.js

@@ -1,5 +1,5 @@
-var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var s=(l,u,t,e)=>{for(var o=e>1?void 0:e?d(u,t):u,h=l.length-1,n;h>=0;h--)(n=l[h])&&(o=(e?n(u,t,o):n(o))||o);return e&&o&&p(u,t,o),o};import{css as m,html as b,LitElement as f}from"lit";import{property as a,state as v}from"lit/decorators.js";import{formatColor as c,parseColor as y}from"../internal/color.js";import{customElement as k}from"../internal/define.js";import{optOutBoolean as g}from"../internal/positioning.js";import{announce as E}from"../utils/live-announcer.js";var w=["skdx-color-picker-area","skdx-color-picker-area-thumb","skdx-color-picker-hue-slider","skdx-color-picker-hue-slider-thumb","skdx-color-picker-alpha-slider","skdx-color-picker-alpha-slider-thumb","skdx-color-picker-swatch-group","skdx-color-picker-swatch","skdx-color-picker-input","skdx-color-picker-format-select","skdx-color-picker-eye-dropper"].join(", "),x={h:0,s:0,b:0,a:1};function i(l){return Math.round(l*1e3)/1e3}var r=class extends f{constructor(){super(...arguments);this.value="#000000";this.defaultValue="#000000";this.format="hex";this.defaultFormat="hex";this.alpha=!0;this.step=1;this.disabled=!1;this.readOnly=!1;this.color=x;this.ownValue=""}get interactive(){return!this.disabled&&!this.readOnly}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")||(this.value=this.defaultValue),this.hasAttribute("format")||(this.format=this.defaultFormat)}willUpdate(t){if(t.has("value")&&this.value!==this.ownValue){this.ownValue=this.value;let e=y(this.value);e&&(this.color=e)}}updated(){this.syncHostAttributes();for(let t of Array.from(this.querySelectorAll(w)))t.syncFromRoot?.()}syncHostAttributes(){let t=this.color;this.setAttribute("data-value",this.value),this.setAttribute("data-format",this.format),this.toggleAttribute("data-disabled",this.disabled),this.toggleAttribute("data-readonly",this.readOnly),this.style.setProperty("--skdx-color-picker-hue",`${i(t.h)}deg`),this.style.setProperty("--skdx-color-picker-hue-position",`${i(t.h/360*100)}%`),this.style.setProperty("--skdx-color-picker-saturation",`${i(t.s)}%`),this.style.setProperty("--skdx-color-picker-brightness",`${i(t.b)}%`),this.style.setProperty("--skdx-color-picker-alpha",String(i(t.a))),this.style.setProperty("--skdx-color-picker-alpha-position",`${i(t.a*100)}%`),this.style.setProperty("--skdx-color-picker-value",c(t,"hex",this.alpha))}describe(t){let e=c(t,"hex",!1);return this.alpha&&t.a<1?`${e}, ${Math.round(t.a*100)}% opaque`:e}setColor(t,e){if(!this.interactive)return;let o=c(t,this.format,this.alpha);this.color=t,this.ownValue=o,o!==this.value&&(this.value=o,this.dispatchEvent(new CustomEvent("value-change",{detail:o,bubbles:!0,composed:!0}))),e?.announce&&E(this.describe(t))}setFormat(t){if(!this.interactive||t===this.format)return;this.format=t,this.dispatchEvent(new CustomEvent("format-change",{detail:t,bubbles:!0,composed:!0}));let e=c(this.color,t,this.alpha);this.ownValue=e,e!==this.value&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})))}commit(){this.dispatchEvent(new CustomEvent("value-commit",{detail:this.value,bubbles:!0,composed:!0}))}render(){return b`<slot></slot>`}};r.styles=m`
+var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var o=(l,h,t,e)=>{for(var s=e>1?void 0:e?d(h,t):h,n=l.length-1,p;n>=0;n--)(p=l[n])&&(s=(e?p(h,t,s):p(s))||s);return e&&s&&c(h,t,s),s};import{css as m,html as y,LitElement as f}from"lit";import{property as a,state as b}from"lit/decorators.js";import{hasAuthoredParts as v}from"../internal/authored.js";import{formatColor as u,parseColor as w}from"../internal/color.js";import{customElement as A}from"../internal/define.js";import{optOutBoolean as k}from"../internal/positioning.js";import{announce as E}from"../utils/live-announcer.js";import{COLOR_PICKER_ANATOMY_GENERATED as g,fillColorPickerAnatomy as _}from"./ColorPickerAnatomy.js";var C=["skdx-color-picker-area","skdx-color-picker-area-thumb","skdx-color-picker-hue-slider","skdx-color-picker-hue-slider-thumb","skdx-color-picker-alpha-slider","skdx-color-picker-alpha-slider-thumb","skdx-color-picker-swatch-group","skdx-color-picker-swatch","skdx-color-picker-input","skdx-color-picker-format-select","skdx-color-picker-eye-dropper"].join(", "),x={h:0,s:0,b:0,a:1};function i(l){return Math.round(l*1e3)/1e3}var r=class extends f{constructor(){super(...arguments);this.value="#000000";this.defaultValue="#000000";this.format="hex";this.defaultFormat="hex";this.alpha=!0;this.step=1;this.disabled=!1;this.readOnly=!1;this.showInput=!0;this.showSwatches=!0;this.showEyeDropper=!0;this.color=x;this.ownValue="";this._anatomyBuilt=!1;this._fillAnatomy=()=>{if(v(this,g)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,_(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()}}get interactive(){return!this.disabled&&!this.readOnly}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")||(this.value=this.defaultValue),this.hasAttribute("format")||(this.format=this.defaultFormat),queueMicrotask(this._fillAnatomy)}willUpdate(t){if(t.has("value")&&this.value!==this.ownValue){this.ownValue=this.value;let e=w(this.value);e&&(this.color=e)}}updated(t){t.has("alpha")||t.has("showSwatches")||t.has("swatches")||t.has("showInput")||t.has("showEyeDropper")?this._rebuildAnatomy():this._fillAnatomy(),this.syncHostAttributes();for(let e of Array.from(this.querySelectorAll(C)))e.syncFromRoot?.()}syncHostAttributes(){let t=this.color;this.setAttribute("data-value",this.value),this.setAttribute("data-format",this.format),this.toggleAttribute("data-disabled",this.disabled),this.toggleAttribute("data-readonly",this.readOnly),this.style.setProperty("--skdx-color-picker-hue",`${i(t.h)}deg`),this.style.setProperty("--skdx-color-picker-hue-position",`${i(t.h/360*100)}%`),this.style.setProperty("--skdx-color-picker-saturation",`${i(t.s)}%`),this.style.setProperty("--skdx-color-picker-brightness",`${i(t.b)}%`),this.style.setProperty("--skdx-color-picker-alpha",String(i(t.a))),this.style.setProperty("--skdx-color-picker-alpha-position",`${i(t.a*100)}%`),this.style.setProperty("--skdx-color-picker-value",u(t,"hex",this.alpha))}describe(t){let e=u(t,"hex",!1);return this.alpha&&t.a<1?`${e}, ${Math.round(t.a*100)}% opaque`:e}setColor(t,e){if(!this.interactive)return;let s=u(t,this.format,this.alpha);this.color=t,this.ownValue=s,s!==this.value&&(this.value=s,this.dispatchEvent(new CustomEvent("value-change",{detail:s,bubbles:!0,composed:!0}))),e?.announce&&E(this.describe(t))}setFormat(t){if(!this.interactive||t===this.format)return;this.format=t,this.dispatchEvent(new CustomEvent("format-change",{detail:t,bubbles:!0,composed:!0}));let e=u(this.color,t,this.alpha);this.ownValue=e,e!==this.value&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})))}commit(){this.dispatchEvent(new CustomEvent("value-commit",{detail:this.value,bubbles:!0,composed:!0}))}render(){return y`<slot @slotchange=${this._fillAnatomy}></slot>`}};r.styles=m`
     :host {
       display: block;
     }
-  `,s([a({type:String,reflect:!0})],r.prototype,"value",2),s([a({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),s([a({type:String,reflect:!0})],r.prototype,"format",2),s([a({type:String,attribute:"default-format"})],r.prototype,"defaultFormat",2),s([a({converter:g})],r.prototype,"alpha",2),s([a({type:Number,reflect:!0})],r.prototype,"step",2),s([a({type:Boolean,reflect:!0})],r.prototype,"disabled",2),s([a({type:Boolean,reflect:!0,attribute:"read-only"})],r.prototype,"readOnly",2),s([v()],r.prototype,"color",2),r=s([k("skdx-color-picker","color-picker","root")],r);export{r as SkdxColorPicker};
+  `,o([a({type:String,reflect:!0})],r.prototype,"value",2),o([a({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),o([a({type:String,reflect:!0})],r.prototype,"format",2),o([a({type:String,attribute:"default-format"})],r.prototype,"defaultFormat",2),o([a({converter:k})],r.prototype,"alpha",2),o([a({type:Number,reflect:!0})],r.prototype,"step",2),o([a({type:Boolean,reflect:!0})],r.prototype,"disabled",2),o([a({type:Boolean,reflect:!0,attribute:"read-only"})],r.prototype,"readOnly",2),o([a({type:Boolean,attribute:"show-input"})],r.prototype,"showInput",2),o([a({type:Boolean,attribute:"show-swatches"})],r.prototype,"showSwatches",2),o([a({type:Boolean,attribute:"show-eye-dropper"})],r.prototype,"showEyeDropper",2),o([a({attribute:!1})],r.prototype,"swatches",2),o([b()],r.prototype,"color",2),r=o([A("skdx-color-picker","color-picker","root")],r);export{r as SkdxColorPicker};

package/dist/color-picker/ColorPickerAlphaSlider.cjs

@@ -1 +1 @@
-"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var v=(a,e)=>{for(var o in e)n(a,o,{get:e[o],enumerable:!0})},b=(a,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!f.call(a,t)&&t!==o&&n(a,t,{get:()=>e[t],enumerable:!(r=c(e,t))||r.enumerable});return a};var x=a=>b(n({},"__esModule",{value:!0}),a),p=(a,e,o,r)=>{for(var t=r>1?void 0:r?c(e,o):e,d=a.length-1,i;d>=0;d--)(i=a[d])&&(t=(r?i(e,o,t):i(t))||t);return r&&t&&n(e,o,t),t};var g={};v(g,{SkdxColorPickerAlphaSlider:()=>l});module.exports=x(g);var s=require("../internal/color.cjs"),u=require("../internal/define.cjs"),h=require("./channel-slider.cjs");var l=class extends h.SkdxColorPickerChannelSlider{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(o){let r=this.root;return r?`${Math.round(o)}% opaque, ${(0,s.formatColor)(r.color,"hex",!1)}`:`${Math.round(o)}% opaque`}writeChannel(o){let r=this.root;r&&r.setColor({...r.color,a:o/100})}};l=p([(0,u.customElement)("skdx-color-picker-alpha-slider","color-picker","alpha-slider")],l);0&&(module.exports={SkdxColorPickerAlphaSlider});
+"use strict";var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(a,e)=>{for(var o in e)l(a,o,{get:e[o],enumerable:!0})},v=(a,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!b.call(a,t)&&t!==o&&l(a,t,{get:()=>e[t],enumerable:!(r=c(e,t))||r.enumerable});return a};var y=a=>v(l({},"__esModule",{value:!0}),a),p=(a,e,o,r)=>{for(var t=r>1?void 0:r?c(e,o):e,i=a.length-1,d;i>=0;i--)(d=a[i])&&(t=(r?d(e,o,t):d(t))||t);return r&&t&&l(e,o,t),t};var x={};g(x,{SkdxColorPickerAlphaSlider:()=>n});module.exports=y(x);var s=require("lit/decorators.js"),m=require("../internal/color.cjs"),u=require("../internal/define.cjs"),h=require("./channel-slider.cjs");var n=class extends h.SkdxColorPickerChannelSlider{constructor(){super(...arguments);this.channel="alpha";this.max=100;this.label="Opacity"}get defaultLabel(){return this.label}get hiddenByRoot(){return!(this.root?.alpha??!0)}get channelValue(){return(this.root?.color.a??1)*100}valueTextFor(o){let r=this.root;return r?`${Math.round(o)}% opaque, ${(0,m.formatColor)(r.color,"hex",!1)}`:`${Math.round(o)}% opaque`}writeChannel(o){let r=this.root;r&&r.setColor({...r.color,a:o/100})}};p([(0,s.property)({type:String})],n.prototype,"label",2),n=p([(0,u.customElement)("skdx-color-picker-alpha-slider","color-picker","alpha-slider")],n);0&&(module.exports={SkdxColorPickerAlphaSlider});

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

@@ -1,39 +1,15 @@
 import { SkdxColorPickerChannelSlider } from './channel-slider.cjs';
 /**
- * `<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
+ * A linear opacity track (`role="slider"` over 0–100%). Hides itself when the
+ * root has `alpha="false"`: the element stays in the tree (`hidden`) 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.
+ * Reported and stepped in whole percentage points, though the colour stores
+ * alpha as 0–1. Must be used inside `<skdx-color-picker>`.
  *
  * @example
  * ```html
- * <skdx-color-picker-alpha-slider class="my-alpha">
+ * <skdx-color-picker-alpha-slider>
  *   <skdx-color-picker-alpha-slider-thumb></skdx-color-picker-alpha-slider-thumb>
  * </skdx-color-picker-alpha-slider>
  * ```
@@ -41,7 +17,13 @@ import { SkdxColorPickerChannelSlider } from './channel-slider.cjs';
 export declare class SkdxColorPickerAlphaSlider extends SkdxColorPickerChannelSlider {
     protected readonly channel = "alpha";
     protected readonly max = 100;
-    protected readonly defaultLabel = "Opacity";
+    /**
+     * Accessible name of the slider. A prop, not just `aria-label`, so a
+     * localised UI doesn't need to reach past the element's API to translate it.
+     * @default 'Opacity'
+     */
+    label: string;
+    protected get defaultLabel(): string;
     protected get hiddenByRoot(): boolean;
     protected get channelValue(): number;
     protected valueTextFor(value: number): string;

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

@@ -1,39 +1,15 @@
 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
+ * A linear opacity track (`role="slider"` over 0–100%). Hides itself when the
+ * root has `alpha="false"`: the element stays in the tree (`hidden`) 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.
+ * Reported and stepped in whole percentage points, though the colour stores
+ * alpha as 0–1. Must be used inside `<skdx-color-picker>`.
  *
  * @example
  * ```html
- * <skdx-color-picker-alpha-slider class="my-alpha">
+ * <skdx-color-picker-alpha-slider>
  *   <skdx-color-picker-alpha-slider-thumb></skdx-color-picker-alpha-slider-thumb>
  * </skdx-color-picker-alpha-slider>
  * ```
@@ -41,7 +17,13 @@ import { SkdxColorPickerChannelSlider } from './channel-slider.js';
 export declare class SkdxColorPickerAlphaSlider extends SkdxColorPickerChannelSlider {
     protected readonly channel = "alpha";
     protected readonly max = 100;
-    protected readonly defaultLabel = "Opacity";
+    /**
+     * Accessible name of the slider. A prop, not just `aria-label`, so a
+     * localised UI doesn't need to reach past the element's API to translate it.
+     * @default 'Opacity'
+     */
+    label: string;
+    protected get defaultLabel(): string;
     protected get hiddenByRoot(): boolean;
     protected get channelValue(): number;
     protected valueTextFor(value: number): string;

package/dist/color-picker/ColorPickerAlphaSlider.js

@@ -1 +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};
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(n,t,r,e)=>{for(var o=e>1?void 0:e?c(t,r):t,l=n.length-1,i;l>=0;l--)(i=n[l])&&(o=(e?i(t,r,o):i(o))||o);return e&&o&&p(t,r,o),o};import{property as s}from"lit/decorators.js";import{formatColor as m}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.label="Opacity"}get defaultLabel(){return this.label}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, ${m(e.color,"hex",!1)}`:`${Math.round(r)}% opaque`}writeChannel(r){let e=this.root;e&&e.setColor({...e.color,a:r/100})}};d([s({type:String})],a.prototype,"label",2),a=d([u("skdx-color-picker-alpha-slider","color-picker","alpha-slider")],a);export{a as SkdxColorPickerAlphaSlider};

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

@@ -1,23 +1,8 @@
 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`.
+ * The handle on a `<skdx-color-picker-alpha-slider>`. Purely visual: `aria-hidden`
+ * and out of the tab order, since the track carries the `role="slider"`
+ * semantics. Must be used inside `<skdx-color-picker>`.
  *
  * @example
  * ```html

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

@@ -1,23 +1,8 @@
 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`.
+ * The handle on a `<skdx-color-picker-alpha-slider>`. Purely visual: `aria-hidden`
+ * and out of the tab order, since the track carries the `role="slider"`
+ * semantics. Must be used inside `<skdx-color-picker>`.
  *
  * @example
  * ```html

package/dist/color-picker/ColorPickerAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var n in t)a(e,n,{get:t[n],enumerable:!0})},E=(e,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of h(t))!k.call(e,o)&&o!==n&&a(e,o,{get:()=>t[o],enumerable:!(l=u(t,o))||l.enumerable});return e};var f=e=>E(a({},"__esModule",{value:!0}),e);var w={};x(w,{COLOR_PICKER_ANATOMY_GENERATED:()=>d,fillColorPickerAnatomy:()=>b});module.exports=f(w);var y=require("./ColorPickerArea.cjs"),C=require("./ColorPickerAreaThumb.cjs"),A=require("./ColorPickerHueSlider.cjs"),P=require("./ColorPickerHueSliderThumb.cjs"),S=require("./ColorPickerAlphaSlider.cjs"),v=require("./ColorPickerAlphaSliderThumb.cjs"),T=require("./ColorPickerSwatchGroup.cjs"),D=require("./ColorPickerSwatch.cjs"),O=require("./ColorPickerInput.cjs"),R=require("./ColorPickerEyeDropper.cjs"),d="data-skdx-color-picker-generated";function b(e){let t=document.createElement("skdx-color-picker-area-thumb"),n=document.createElement("skdx-color-picker-area");n.append(t);let l=document.createElement("skdx-color-picker-hue-slider-thumb"),o=document.createElement("skdx-color-picker-hue-slider");o.append(l);let p=[n,o];if(e.alpha){let r=document.createElement("skdx-color-picker-alpha-slider-thumb"),c=document.createElement("skdx-color-picker-alpha-slider");c.append(r),p.push(c)}if(e.showSwatches&&e.swatches&&e.swatches.length>0){let r=document.createElement("skdx-color-picker-swatch-group");for(let c of e.swatches){let s=document.createElement("skdx-color-picker-swatch"),m=typeof c=="string"?c:c.value,i=typeof c=="string"?void 0:c.label;s.setAttribute("value",m),i&&s.setAttribute("aria-label",i),r.append(s)}p.push(r)}if(e.showInput&&p.push(document.createElement("skdx-color-picker-input")),e.showEyeDropper){let r=document.createElement("skdx-color-picker-eye-dropper");r.textContent="\u{1F50D}",p.push(r)}for(let r of p)r.setAttribute(d,"");e.replaceChildren(...p)}0&&(module.exports={COLOR_PICKER_ANATOMY_GENERATED,fillColorPickerAnatomy});

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

@@ -0,0 +1,29 @@
+import type { SkdxColorPicker } from './ColorPicker.cjs';
+import './ColorPickerArea.cjs';
+import './ColorPickerAreaThumb.cjs';
+import './ColorPickerHueSlider.cjs';
+import './ColorPickerHueSliderThumb.cjs';
+import './ColorPickerAlphaSlider.cjs';
+import './ColorPickerAlphaSliderThumb.cjs';
+import './ColorPickerSwatchGroup.cjs';
+import './ColorPickerSwatch.cjs';
+import './ColorPickerInput.cjs';
+import './ColorPickerEyeDropper.cjs';
+/**
+ * One preset for `swatches`: a color string or `{ value, label }` to name meaningful
+ * colors like 'Brand red'. Mixing both forms in one array is fine.
+ */
+export type SkdxColorPickerSwatchDescriptor = string | {
+    value: string;
+    label?: string;
+};
+/** @internal Marks a direct child of `<skdx-color-picker>` this module generated. */
+export declare const COLOR_PICKER_ANATOMY_GENERATED = "data-skdx-color-picker-generated";
+/**
+ * Builds canonical anatomy (Area, Hue and Alpha sliders with thumbs, optional
+ * SwatchGroup/Input/EyeDropper) as light-DOM children of root. Skips FormatSelect
+ * (format/defaultFormat control notation). Called by ColorPicker after confirming
+ * no consumer composition.
+ * @internal
+ */
+export declare function fillColorPickerAnatomy(root: SkdxColorPicker): void;

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

@@ -0,0 +1,29 @@
+import type { SkdxColorPicker } from './ColorPicker.js';
+import './ColorPickerArea.js';
+import './ColorPickerAreaThumb.js';
+import './ColorPickerHueSlider.js';
+import './ColorPickerHueSliderThumb.js';
+import './ColorPickerAlphaSlider.js';
+import './ColorPickerAlphaSliderThumb.js';
+import './ColorPickerSwatchGroup.js';
+import './ColorPickerSwatch.js';
+import './ColorPickerInput.js';
+import './ColorPickerEyeDropper.js';
+/**
+ * One preset for `swatches`: a color string or `{ value, label }` to name meaningful
+ * colors like 'Brand red'. Mixing both forms in one array is fine.
+ */
+export type SkdxColorPickerSwatchDescriptor = string | {
+    value: string;
+    label?: string;
+};
+/** @internal Marks a direct child of `<skdx-color-picker>` this module generated. */
+export declare const COLOR_PICKER_ANATOMY_GENERATED = "data-skdx-color-picker-generated";
+/**
+ * Builds canonical anatomy (Area, Hue and Alpha sliders with thumbs, optional
+ * SwatchGroup/Input/EyeDropper) as light-DOM children of root. Skips FormatSelect
+ * (format/defaultFormat control notation). Called by ColorPicker after confirming
+ * no consumer composition.
+ * @internal
+ */
+export declare function fillColorPickerAnatomy(root: SkdxColorPicker): void;

package/dist/color-picker/ColorPickerAnatomy.js

@@ -0,0 +1 @@
+import"./ColorPickerArea.js";import"./ColorPickerAreaThumb.js";import"./ColorPickerHueSlider.js";import"./ColorPickerHueSliderThumb.js";import"./ColorPickerAlphaSlider.js";import"./ColorPickerAlphaSliderThumb.js";import"./ColorPickerSwatchGroup.js";import"./ColorPickerSwatch.js";import"./ColorPickerInput.js";import"./ColorPickerEyeDropper.js";var d="data-skdx-color-picker-generated";function y(t){let s=document.createElement("skdx-color-picker-area-thumb"),n=document.createElement("skdx-color-picker-area");n.append(s);let a=document.createElement("skdx-color-picker-hue-slider-thumb"),p=document.createElement("skdx-color-picker-hue-slider");p.append(a);let o=[n,p];if(t.alpha){let e=document.createElement("skdx-color-picker-alpha-slider-thumb"),r=document.createElement("skdx-color-picker-alpha-slider");r.append(e),o.push(r)}if(t.showSwatches&&t.swatches&&t.swatches.length>0){let e=document.createElement("skdx-color-picker-swatch-group");for(let r of t.swatches){let c=document.createElement("skdx-color-picker-swatch"),i=typeof r=="string"?r:r.value,l=typeof r=="string"?void 0:r.label;c.setAttribute("value",i),l&&c.setAttribute("aria-label",l),e.append(c)}o.push(e)}if(t.showInput&&o.push(document.createElement("skdx-color-picker-input")),t.showEyeDropper){let e=document.createElement("skdx-color-picker-eye-dropper");e.textContent="\u{1F50D}",o.push(e)}for(let e of o)e.setAttribute(d,"");t.replaceChildren(...o)}export{d as COLOR_PICKER_ANATOMY_GENERATED,y as fillColorPickerAnatomy};

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

@@ -1,48 +1,15 @@
 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);
- * }
- * ```
+ * The 2D saturation/brightness surface: saturation runs left-to-right,
+ * brightness bottom-to-top. Pointer down anywhere inside it seeks straight to
+ * that colour, and dragging keeps updating until release. Carries `role="group"`
+ * so that `aria-label` on the tag is allowed; accessibility lives in the
+ * `<skdx-color-picker-area-thumb>` sliders. Must be used inside
+ * `<skdx-color-picker>`.
  *
  * @example
  * ```html
- * <skdx-color-picker-area class="my-area">
+ * <skdx-color-picker-area>
  *   <skdx-color-picker-area-thumb></skdx-color-picker-area-thumb>
  * </skdx-color-picker-area>
  * ```