@skdx/web-components 0.28.0 → 0.30.0

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

@@ -1,17 +1,10 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /** Which single channel a {@link SkdxColorPickerInput} edits. */
 export type ColorChannel = 'hex' | 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'brightness' | 'lightness' | 'alpha';
 /**
- * A text field over the colour. With no `channel` it carries the whole colour
- * in the picker's current format — the hex box people expect, which re-spells
- * itself when the format changes. With a `channel` it edits one number: `red`,
- * `hue`, `alpha`, etc., which is how an RGB spinbox row is built without eight
- * elements. Must be used inside `<skdx-color-picker>`.
- *
- * Editing is draft-based: keystrokes are held locally and only applied on
- * `Enter` or blur, because `#ab` on the way to `#abcdef` is not a colour.
- * `Escape` abandons the draft, and an unparseable entry reverts rather than
- * clearing the colour. A commit announces the resulting colour.
+ * A text field over the colour: with no `channel` it carries the whole colour
+ * in the picker's current format, with a `channel` it edits one number
+ * (`red`, `hue`, `alpha`, etc.), and editing is draft-based, applying only on `Enter` or blur.
  *
  * @example
  * ```html
@@ -22,38 +15,31 @@ export type ColorChannel = 'hex' | 'red' | 'green' | 'blue' | 'hue' | 'saturatio
  */
 export declare class SkdxColorPickerInput extends LitElement {
     /** Light DOM, for the labelling reasons in the class docblock. */
-    createRenderRoot(): this;
-    /**
-     * Reaches through to the native `<input>`. The shadow root used to carry
-     * `delegatesFocus`, which did this for free; a light-DOM element has to
-     * forward focus itself.
-     */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Reaches through to the native `<input>`; a light-DOM element has to forward focus itself. */
     focus(options?: FocusOptions): void;
     /**
-     * Which single channel this input edits. Omit to carry the whole colour in the
-     * picker's current `format`; it re-spells itself on format changes.
+     * Which single channel this input edits, omitted to carry the whole colour
+     * in the picker's current `format` (re-spelling itself on format changes).
      * @default undefined — the whole colour in the current format.
      */
     channel?: ColorChannel;
     /** @internal The in-progress edit, or `null` when the field is showing the committed colour. */
     private draft;
     private root;
-    /** The consumer's own name for this field, 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;
     private get numeric();
-    /** The text the field shows when nothing is being typed into it. */
     private get committed();
     protected updated(): void;
-    /** Applies `text`, or reports that it could not be read so the caller can revert. */
     private commitText;
     private readonly handleInput;
     private readonly handleKeydown;
     private readonly handleBlur;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/color-picker/ColorPickerInput.js

@@ -1,4 +1,4 @@
-var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=(e,r,t,i)=>{for(var o=i>1?void 0:i?p(r,t):r,l=e.length-1,a;l>=0;l--)(a=e[l])&&(o=(i?a(r,t,o):a(o))||o);return i&&o&&m(r,t,o),o};import{html as c,LitElement as b}from"lit";import{property as f,state as v}from"lit/decorators.js";import{takeHostAriaLabel as g}from"../internal/aria-label.js";import{formatColor as x,hsbToHsl as h,hsbToRgb as n,hslToHsb as y,parseColor as C,rgbToHsb as d}from"../internal/color.js";import{customElement as k}from"../internal/define.js";import{installLightDomStyles as w}from"../internal/styles.js";var E={red:{max:255,label:"Red",read:e=>n(e).r,write:(e,r)=>d({...n(e),r})},green:{max:255,label:"Green",read:e=>n(e).g,write:(e,r)=>d({...n(e),g:r})},blue:{max:255,label:"Blue",read:e=>n(e).b,write:(e,r)=>d({...n(e),b:r})},hue:{max:360,label:"Hue",read:e=>e.h,write:(e,r)=>({...e,h:r})},saturation:{max:100,label:"Saturation",read:e=>e.s,write:(e,r)=>({...e,s:r})},brightness:{max:100,label:"Brightness",read:e=>e.b,write:(e,r)=>({...e,b:r})},lightness:{max:100,label:"Lightness",read:e=>h(e).l,write:(e,r)=>y({...h(e),l:r})},alpha:{max:100,label:"Opacity",read:e=>e.a*100,write:(e,r)=>({...e,a:r/100})}},s=class extends b{constructor(){super(...arguments);this.draft=null;this.root=null;this.label=null;this.handleInput=t=>{this.draft=t.target.value};this.handleKeydown=t=>{t.key==="Enter"?(t.preventDefault(),this.commitText(this.draft??this.committed),this.draft=null):t.key==="Escape"&&(this.draft=null)};this.handleBlur=()=>{this.draft!==null&&this.commitText(this.draft),this.draft=null}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}connectedCallback(){if(super.connectedCallback(),w(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-input> must be used inside <skdx-color-picker>.");this.label=g(this)}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get numeric(){let t=this.channel;return t&&t!=="hex"?E[t]:null}get committed(){let t=this.root;if(!t)return"";let i=this.numeric;return i?String(Math.round(i.read(t.color))):this.channel==="hex"?x(t.color,"hex",t.alpha):t.value}updated(){let t=this.root;t&&(this.setAttribute("data-channel",this.channel??"value"),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly))}commitText(t){let i=this.root;if(!i?.interactive)return!1;let o=this.numeric;if(o){let a=Number(t.trim());return t.trim()===""||!Number.isFinite(a)?!1:(i.setColor(o.write(i.color,Math.min(Math.max(a,0),o.max)),{announce:!0}),!0)}let l=C(t);return l?(i.setColor(l,{announce:!0}),!0):!1}render(){let t=this.root;if(!t)return c`<input part="input" />`;let i=this.numeric;return c`<input
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=(e,r,t,i)=>{for(var l=i>1?void 0:i?p(r,t):r,o=e.length-1,a;o>=0;o--)(a=e[o])&&(l=(i?a(r,t,l):a(l))||l);return i&&l&&m(r,t,l),l};import{html as c,LitElement as b}from"lit";import{property as f,state as v}from"lit/decorators.js";import{takeHostAriaLabel as g}from"../internal/aria-label.js";import{formatColor as x,hsbToHsl as h,hsbToRgb as n,hslToHsb as y,parseColor as C,rgbToHsb as d}from"../internal/color.js";import{customElement as k}from"../internal/define.js";import{installLightDomStyles as w}from"../internal/light-dom-styles.js";var T={red:{max:255,label:"Red",read:e=>n(e).r,write:(e,r)=>d({...n(e),r})},green:{max:255,label:"Green",read:e=>n(e).g,write:(e,r)=>d({...n(e),g:r})},blue:{max:255,label:"Blue",read:e=>n(e).b,write:(e,r)=>d({...n(e),b:r})},hue:{max:360,label:"Hue",read:e=>e.h,write:(e,r)=>({...e,h:r})},saturation:{max:100,label:"Saturation",read:e=>e.s,write:(e,r)=>({...e,s:r})},brightness:{max:100,label:"Brightness",read:e=>e.b,write:(e,r)=>({...e,b:r})},lightness:{max:100,label:"Lightness",read:e=>h(e).l,write:(e,r)=>y({...h(e),l:r})},alpha:{max:100,label:"Opacity",read:e=>e.a*100,write:(e,r)=>({...e,a:r/100})}},s=class extends b{constructor(){super(...arguments);this.draft=null;this.root=null;this.label=null;this.handleInput=t=>{this.draft=t.target.value};this.handleKeydown=t=>{t.key==="Enter"?(t.preventDefault(),this.commitText(this.draft??this.committed),this.draft=null):t.key==="Escape"&&(this.draft=null)};this.handleBlur=()=>{this.draft!==null&&this.commitText(this.draft),this.draft=null}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}connectedCallback(){if(super.connectedCallback(),w(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-input> must be used inside <skdx-color-picker>.");this.label=g(this)}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get numeric(){let t=this.channel;return t&&t!=="hex"?T[t]:null}get committed(){let t=this.root;if(!t)return"";let i=this.numeric;return i?String(Math.round(i.read(t.color))):this.channel==="hex"?x(t.color,"hex",t.alpha):t.value}updated(){let t=this.root;t&&(this.setAttribute("data-channel",this.channel??"value"),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly))}commitText(t){let i=this.root;if(!i?.interactive)return!1;let l=this.numeric;if(l){let a=Number(t.trim());return t.trim()===""||!Number.isFinite(a)?!1:(i.setColor(l.write(i.color,Math.min(Math.max(a,0),l.max)),{announce:!0}),!0)}let o=C(t);return o?(i.setColor(o,{announce:!0}),!0):!1}render(){let t=this.root;if(!t)return c`<input part="input" />`;let i=this.numeric;return c`<input
       part="input"
       type="text"
       inputmode=${i?"numeric":"text"}

package/dist/color-picker/ColorPickerSwatch.cjs

@@ -1,40 +1,22 @@
-"use strict";var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var v=(s,e)=>{for(var t in e)c(s,t,{get:e[t],enumerable:!0})},f=(s,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!w.call(s,o)&&o!==t&&c(s,o,{get:()=>e[o],enumerable:!(i=k(e,o))||i.enumerable});return s};var g=s=>f(c({},"__esModule",{value:!0}),s),h=(s,e,t,i)=>{for(var o=i>1?void 0:i?k(e,t):e,d=s.length-1,u;d>=0;d--)(u=s[d])&&(o=(i?u(e,t,o):u(o))||o);return i&&o&&c(e,t,o),o};var x={};v(x,{SkdxColorPickerSwatch:()=>r});module.exports=g(x);var a=require("lit"),p=require("lit/decorators.js"),n=require("../internal/color.cjs"),b=require("../internal/define.cjs"),l=require("../internal/styles.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.group=null;this.handleClick=()=>{let t=this.parsed;t&&this.root?.setColor(t,{announce:!0})};this.handleFocus=()=>{this.group?.setFocusedValue(this.value)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),this.group=this.closest("skdx-color-picker-swatch-group"),!this.root||!this.group)throw new Error("<skdx-color-picker-swatch> must be used inside <skdx-color-picker-swatch-group>, inside <skdx-color-picker>.")}disconnectedCallback(){this.root=null,this.group=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get parsed(){return(0,n.parseColor)(this.value)}get swatchHex(){let t=this.parsed;return t?(0,n.formatColor)(t,"hex",this.root?.alpha??!0):this.value}get checked(){let t=this.root;return!t||this.parsed===null?!1:this.swatchHex===(0,n.formatColor)(t.color,"hex",t.alpha)}get isDisabled(){return this.disabled||(this.root?.disabled??!1)||this.parsed===null}updated(){let t=this.root;t&&(this.setAttribute("data-value",this.value),this.setAttribute("data-state",this.checked?"checked":"unchecked"),this.toggleAttribute("data-disabled",this.isDisabled),this.toggleAttribute("data-readonly",t.readOnly),this.style.setProperty("--skdx-color-picker-swatch-value",this.swatchHex))}render(){let t=this.isDisabled,i=this.checked;return a.html`<button
+"use strict";var d=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(s,e)=>{for(var t in e)d(s,t,{get:e[t],enumerable:!0})},x=(s,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!f.call(s,o)&&o!==t&&d(s,o,{get:()=>e[o],enumerable:!(r=k(e,o))||r.enumerable});return s};var y=s=>x(d({},"__esModule",{value:!0}),s),h=(s,e,t,r)=>{for(var o=r>1?void 0:r?k(e,t):e,n=s.length-1,u;n>=0;n--)(u=s[n])&&(o=(r?u(e,t,o):u(o))||o);return r&&o&&d(e,t,o),o};var w={};g(w,{SkdxColorPickerSwatch:()=>i});module.exports=y(w);var a=require("lit"),p=require("lit/decorators.js"),b=require("../internal/aria-label.cjs"),c=require("../internal/color.cjs"),v=require("../internal/define.cjs"),l=require("../internal/styles.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.group=null;this.hostLabel=null;this.handleClick=()=>{let t=this.parsed;t&&this.root?.setColor(t,{announce:!0})};this.handleFocus=()=>{this.group?.setFocusedValue(this.value),this.checked||this.handleClick()}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),this.group=this.closest("skdx-color-picker-swatch-group"),this.hostLabel=(0,b.takeHostAriaLabel)(this),!this.root||!this.group)throw new Error("<skdx-color-picker-swatch> must be used inside <skdx-color-picker-swatch-group>, inside <skdx-color-picker>.")}disconnectedCallback(){this.root=null,this.group=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get parsed(){return(0,c.parseColor)(this.value)}get swatchHex(){let t=this.parsed;return t?(0,c.formatColor)(t,"hex",this.root?.alpha??!0):this.value}get checked(){let t=this.root;return!t||this.parsed===null?!1:this.swatchHex===(0,c.formatColor)(t.color,"hex",t.alpha)}get isDisabled(){return this.disabled||(this.root?.disabled??!1)||this.parsed===null}updated(){let t=this.root;t&&(this.setAttribute("data-skdx-color-picker-swatch",""),this.setAttribute("data-value",this.value),this.setAttribute("data-state",this.checked?"checked":"unchecked"),this.toggleAttribute("data-disabled",this.isDisabled),this.toggleAttribute("data-readonly",t.readOnly),this.style.setProperty("--skdx-color-picker-swatch-value",this.swatchHex))}render(){let t=this.isDisabled,r=this.checked;return a.html`<button
       part="swatch"
       type="button"
       role="radio"
-      aria-checked=${i}
-      aria-label=${this.swatchHex}
+      aria-checked=${r}
+      aria-label=${this.hostLabel??this.swatchHex}
       aria-disabled=${t?"true":a.nothing}
       tabindex=${this.group?.activeValue===this.value?"0":"-1"}
-      data-state=${i?"checked":"unchecked"}
+      data-state=${r?"checked":"unchecked"}
       ?disabled=${t}
       @click=${this.handleClick}
       @focus=${this.handleFocus}
     >
       <slot></slot>
-    </button>`}};r.shadowRootOptions=l.delegatesFocusShadowRootOptions,r.styles=[l.resetNativeControl,l.hiddenHostStyles,a.css`
-      /**
-       * A flex container, not an inline-block, and that is load-bearing.
-       *
-       * A swatch has no content — it is a colour square, so the shadow
-       * <button>'s <slot> is empty and the button has no intrinsic size of its
-       * own. The box comes from the skin, which paints the *host*:
-       * .skdx-color-picker__swatch is 32x32 (skins/src/components/color-picker.css:170),
-       * and React puts that same class straight on its <button>
-       * (react/src/color-picker/ColorPickerSwatch.tsx:86).
-       *
-       * controlBoxOnHost is what carries the host's box down to the control
-       * here, and it does it with flex: 1 and align-self: stretch — both of
-       * which are inert unless the host is a flex container. As an
-       * inline-block the host painted its 32x32 square while the button inside
-       * it measured 0x0: the swatch was visible but the thing that takes focus
-       * was not, so the focus ring had nothing to draw around.
-       *
-       * The skin sets no display on this part, so this rule is the one that
-       * decides. No backticks anywhere in this block: it lives inside a
-       * template literal, where one would terminate the string.
-       */
+    </button>`}};i.shadowRootOptions=l.delegatesFocusShadowRootOptions,i.styles=[l.resetNativeControl,l.hiddenHostStyles,a.css`
+      /* flex, not inline-block: controlBoxOnHost carries the host's box to the
+         button via flex: 1 / align-self: stretch, which needs a flex
+         container or the button (and its focus ring) measures 0x0. */
       :host {
         display: inline-flex;
       }
-    `,l.controlBoxOnHost],h([(0,p.property)({type:String,reflect:!0})],r.prototype,"value",2),h([(0,p.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=h([(0,b.customElement)("skdx-color-picker-swatch","color-picker","swatch")],r);0&&(module.exports={SkdxColorPickerSwatch});
+    `,l.controlBoxOnHost],h([(0,p.property)({type:String,reflect:!0})],i.prototype,"value",2),h([(0,p.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),i=h([(0,v.customElement)("skdx-color-picker-swatch","color-picker","swatch")],i);0&&(module.exports={SkdxColorPickerSwatch});

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

@@ -1,16 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * One preset colour inside a `ColorPickerSwatchGroup`. Renders a `role="radio"`
- * `<button>` whose `aria-checked` is true when the picker's current colour
- * matches this swatch exactly — compared as hex, so `#f00`, `#ff0000` and
- * `rgb(255, 0, 0)` are all recognised as the same preset. Must be used inside
- * both the group and `<skdx-color-picker>`.
- *
- * Clicking it announces the resulting colour. A swatch is a button, not a
- * slider: nothing about pressing it tells a screen-reader user what colour they
- * now have, so this part speaks for itself. An unparseable `value` renders
- * disabled rather than a button that silently does nothing — a preset list
- * built from user data should fail visibly.
+ * One preset colour inside a `ColorPickerSwatchGroup`, rendered as a
+ * `role="radio"` `<button>` whose `aria-checked` matches the picker's current
+ * colour (compared as hex), announcing the resulting colour on click, and
+ * rendering disabled for an unparseable `value`.
  *
  * @example
  * ```html
@@ -26,14 +19,7 @@ export declare class SkdxColorPickerSwatch extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     /**
-     * The colour this swatch selects, in any notation the picker's parser
-     * understands — hex, `rgb()`, `hsl()` or this library's `hsb()`.
-     * @default '' — which is unparseable, so a swatch with no value renders
-     * disabled rather than as a button that does nothing when clicked.
-     */
-    /**
-     * The colour this swatch selects. Unparseable values render disabled;
-     * valid colours are accepted in any `parseColor` notation.
+     * The colour this swatch selects, in any notation the picker's parser understands.
      * @default '' — which is unparseable, so a swatch with no value renders disabled.
      */
     value: string;
@@ -47,23 +33,20 @@ export declare class SkdxColorPickerSwatch extends LitElement {
     private group;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** @internal Mirrors the root's (and the group's) state onto this host. Called by both after every update. */
+    /** @internal Mirrors the root's (and the group's) state onto this host, called by both after every update. */
     syncFromRoot(): void;
-    /** The parsed colour, or `null` when `value` is not a colour this library reads. */
     private get parsed();
-    /**
-     * Hex is the comparison currency: two notations for the same colour must read
-     * as the same preset, and hex is the one every notation converts to.
-     */
     private get swatchHex();
-    /** @internal Whether this preset is the picker's current colour. Read by the group to place the tab stop. */
+    /** A consumer's own `aria-label`, re-homed onto the shadow button that carries the role. */
+    private hostLabel;
+    /** @internal Whether this preset is the picker's current colour, read by the group to place the tab stop. */
     get checked(): boolean;
-    /** @internal Disabled by its own prop, by the root, or by a `value` that is not a colour. Read by the group's roving focus. */
+    /** @internal Disabled by its own prop, by the root, or by a `value` that is not a colour, read by the group's roving focus. */
     get isDisabled(): boolean;
     protected updated(): void;
     private readonly handleClick;
     private readonly handleFocus;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,16 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * One preset colour inside a `ColorPickerSwatchGroup`. Renders a `role="radio"`
- * `<button>` whose `aria-checked` is true when the picker's current colour
- * matches this swatch exactly — compared as hex, so `#f00`, `#ff0000` and
- * `rgb(255, 0, 0)` are all recognised as the same preset. Must be used inside
- * both the group and `<skdx-color-picker>`.
- *
- * Clicking it announces the resulting colour. A swatch is a button, not a
- * slider: nothing about pressing it tells a screen-reader user what colour they
- * now have, so this part speaks for itself. An unparseable `value` renders
- * disabled rather than a button that silently does nothing — a preset list
- * built from user data should fail visibly.
+ * One preset colour inside a `ColorPickerSwatchGroup`, rendered as a
+ * `role="radio"` `<button>` whose `aria-checked` matches the picker's current
+ * colour (compared as hex), announcing the resulting colour on click, and
+ * rendering disabled for an unparseable `value`.
  *
  * @example
  * ```html
@@ -26,14 +19,7 @@ export declare class SkdxColorPickerSwatch extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     /**
-     * The colour this swatch selects, in any notation the picker's parser
-     * understands — hex, `rgb()`, `hsl()` or this library's `hsb()`.
-     * @default '' — which is unparseable, so a swatch with no value renders
-     * disabled rather than as a button that does nothing when clicked.
-     */
-    /**
-     * The colour this swatch selects. Unparseable values render disabled;
-     * valid colours are accepted in any `parseColor` notation.
+     * The colour this swatch selects, in any notation the picker's parser understands.
      * @default '' — which is unparseable, so a swatch with no value renders disabled.
      */
     value: string;
@@ -47,23 +33,20 @@ export declare class SkdxColorPickerSwatch extends LitElement {
     private group;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** @internal Mirrors the root's (and the group's) state onto this host. Called by both after every update. */
+    /** @internal Mirrors the root's (and the group's) state onto this host, called by both after every update. */
     syncFromRoot(): void;
-    /** The parsed colour, or `null` when `value` is not a colour this library reads. */
     private get parsed();
-    /**
-     * Hex is the comparison currency: two notations for the same colour must read
-     * as the same preset, and hex is the one every notation converts to.
-     */
     private get swatchHex();
-    /** @internal Whether this preset is the picker's current colour. Read by the group to place the tab stop. */
+    /** A consumer's own `aria-label`, re-homed onto the shadow button that carries the role. */
+    private hostLabel;
+    /** @internal Whether this preset is the picker's current colour, read by the group to place the tab stop. */
     get checked(): boolean;
-    /** @internal Disabled by its own prop, by the root, or by a `value` that is not a colour. Read by the group's roving focus. */
+    /** @internal Disabled by its own prop, by the root, or by a `value` that is not a colour, read by the group's roving focus. */
     get isDisabled(): boolean;
     protected updated(): void;
     private readonly handleClick;
     private readonly handleFocus;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/color-picker/ColorPickerSwatch.js

@@ -1,10 +1,10 @@
-var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(a,i,t,o)=>{for(var s=o>1?void 0:o?u(i,t):i,l=a.length-1,n;l>=0;l--)(n=a[l])&&(s=(o?n(i,t,s):n(s))||s);return o&&s&&d(i,t,s),s};import{css as p,html as k,LitElement as b,nothing as m}from"lit";import{property as c}from"lit/decorators.js";import{formatColor as h,parseColor as w}from"../internal/color.js";import{customElement as v}from"../internal/define.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as g,hiddenHostStyles as x,resetNativeControl as y}from"../internal/styles.js";var e=class extends b{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.group=null;this.handleClick=()=>{let t=this.parsed;t&&this.root?.setColor(t,{announce:!0})};this.handleFocus=()=>{this.group?.setFocusedValue(this.value)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),this.group=this.closest("skdx-color-picker-swatch-group"),!this.root||!this.group)throw new Error("<skdx-color-picker-swatch> must be used inside <skdx-color-picker-swatch-group>, inside <skdx-color-picker>.")}disconnectedCallback(){this.root=null,this.group=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get parsed(){return w(this.value)}get swatchHex(){let t=this.parsed;return t?h(t,"hex",this.root?.alpha??!0):this.value}get checked(){let t=this.root;return!t||this.parsed===null?!1:this.swatchHex===h(t.color,"hex",t.alpha)}get isDisabled(){return this.disabled||(this.root?.disabled??!1)||this.parsed===null}updated(){let t=this.root;t&&(this.setAttribute("data-value",this.value),this.setAttribute("data-state",this.checked?"checked":"unchecked"),this.toggleAttribute("data-disabled",this.isDisabled),this.toggleAttribute("data-readonly",t.readOnly),this.style.setProperty("--skdx-color-picker-swatch-value",this.swatchHex))}render(){let t=this.isDisabled,o=this.checked;return k`<button
+var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=(a,r,t,o)=>{for(var s=o>1?void 0:o?u(r,t):r,l=a.length-1,c;l>=0;l--)(c=a[l])&&(s=(o?c(r,t,s):c(s))||s);return o&&s&&n(r,t,s),s};import{css as p,html as k,LitElement as b,nothing as v}from"lit";import{property as d}from"lit/decorators.js";import{takeHostAriaLabel as m}from"../internal/aria-label.js";import{formatColor as h,parseColor as f}from"../internal/color.js";import{customElement as g}from"../internal/define.js";import{controlBoxOnHost as x,delegatesFocusShadowRootOptions as y,hiddenHostStyles as w,resetNativeControl as C}from"../internal/styles.js";var e=class extends b{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.group=null;this.hostLabel=null;this.handleClick=()=>{let t=this.parsed;t&&this.root?.setColor(t,{announce:!0})};this.handleFocus=()=>{this.group?.setFocusedValue(this.value),this.checked||this.handleClick()}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),this.group=this.closest("skdx-color-picker-swatch-group"),this.hostLabel=m(this),!this.root||!this.group)throw new Error("<skdx-color-picker-swatch> must be used inside <skdx-color-picker-swatch-group>, inside <skdx-color-picker>.")}disconnectedCallback(){this.root=null,this.group=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get parsed(){return f(this.value)}get swatchHex(){let t=this.parsed;return t?h(t,"hex",this.root?.alpha??!0):this.value}get checked(){let t=this.root;return!t||this.parsed===null?!1:this.swatchHex===h(t.color,"hex",t.alpha)}get isDisabled(){return this.disabled||(this.root?.disabled??!1)||this.parsed===null}updated(){let t=this.root;t&&(this.setAttribute("data-skdx-color-picker-swatch",""),this.setAttribute("data-value",this.value),this.setAttribute("data-state",this.checked?"checked":"unchecked"),this.toggleAttribute("data-disabled",this.isDisabled),this.toggleAttribute("data-readonly",t.readOnly),this.style.setProperty("--skdx-color-picker-swatch-value",this.swatchHex))}render(){let t=this.isDisabled,o=this.checked;return k`<button
       part="swatch"
       type="button"
       role="radio"
       aria-checked=${o}
-      aria-label=${this.swatchHex}
-      aria-disabled=${t?"true":m}
+      aria-label=${this.hostLabel??this.swatchHex}
+      aria-disabled=${t?"true":v}
       tabindex=${this.group?.activeValue===this.value?"0":"-1"}
       data-state=${o?"checked":"unchecked"}
       ?disabled=${t}
@@ -12,29 +12,11 @@ var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(a,i,t,o
       @focus=${this.handleFocus}
     >
       <slot></slot>
-    </button>`}};e.shadowRootOptions=g,e.styles=[y,x,p`
-      /**
-       * A flex container, not an inline-block, and that is load-bearing.
-       *
-       * A swatch has no content — it is a colour square, so the shadow
-       * <button>'s <slot> is empty and the button has no intrinsic size of its
-       * own. The box comes from the skin, which paints the *host*:
-       * .skdx-color-picker__swatch is 32x32 (skins/src/components/color-picker.css:170),
-       * and React puts that same class straight on its <button>
-       * (react/src/color-picker/ColorPickerSwatch.tsx:86).
-       *
-       * controlBoxOnHost is what carries the host's box down to the control
-       * here, and it does it with flex: 1 and align-self: stretch — both of
-       * which are inert unless the host is a flex container. As an
-       * inline-block the host painted its 32x32 square while the button inside
-       * it measured 0x0: the swatch was visible but the thing that takes focus
-       * was not, so the focus ring had nothing to draw around.
-       *
-       * The skin sets no display on this part, so this rule is the one that
-       * decides. No backticks anywhere in this block: it lives inside a
-       * template literal, where one would terminate the string.
-       */
+    </button>`}};e.shadowRootOptions=y,e.styles=[C,w,p`
+      /* flex, not inline-block: controlBoxOnHost carries the host's box to the
+         button via flex: 1 / align-self: stretch, which needs a flex
+         container or the button (and its focus ring) measures 0x0. */
       :host {
         display: inline-flex;
       }
-    `,f],r([c({type:String,reflect:!0})],e.prototype,"value",2),r([c({type:Boolean,reflect:!0})],e.prototype,"disabled",2),e=r([v("skdx-color-picker-swatch","color-picker","swatch")],e);export{e as SkdxColorPickerSwatch};
+    `,x],i([d({type:String,reflect:!0})],e.prototype,"value",2),i([d({type:Boolean,reflect:!0})],e.prototype,"disabled",2),e=i([g("skdx-color-picker-swatch","color-picker","swatch")],e);export{e as SkdxColorPickerSwatch};

package/dist/color-picker/ColorPickerSwatchGroup.cjs

@@ -1,5 +1,5 @@
-"use strict";var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var w=(s,o)=>{for(var e in o)c(s,e,{get:o[e],enumerable:!0})},g=(s,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of y(o))!b.call(s,t)&&t!==e&&c(s,t,{get:()=>o[t],enumerable:!(r=h(o,t))||r.enumerable});return s};var x=s=>g(c({},"__esModule",{value:!0}),s),a=(s,o,e,r)=>{for(var t=r>1?void 0:r?h(o,e):o,l=s.length-1,i;l>=0;l--)(i=s[l])&&(t=(r?i(o,e,t):i(t))||t);return r&&t&&c(o,e,t),t};var C={};w(C,{SkdxColorPickerSwatchGroup:()=>d});module.exports=x(C);var n=require("lit"),u=require("lit/decorators.js"),f=require("../internal/define.cjs"),p=require("../internal/direction.cjs"),m=require("../internal/positioning.cjs"),k=require("../internal/styles.cjs");var A="skdx-color-picker-swatch",d=class extends n.LitElement{constructor(){super(...arguments);this.loop=!0;this.focusedValue=null;this.root=null;this.childObserver=new MutationObserver(()=>this.notifySwatches());this.handleKeydown=e=>{let r=this.swatches().filter(v=>!v.isDisabled);if(r.length===0)return;let t=r.indexOf(e.target),l=(0,p.directionalKey)(e.key,this),i;l==="ArrowRight"||l==="ArrowDown"?(i=t+1,i>=r.length&&(i=this.loop?0:r.length-1)):l==="ArrowLeft"||l==="ArrowUp"?(i=t-1,i<0&&(i=this.loop?r.length-1:0)):l==="Home"?i=0:l==="End"&&(i=r.length-1),i!==void 0&&(e.preventDefault(),r[i]?.focus())}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-swatch-group> must be used inside <skdx-color-picker>.");this.addEventListener("keydown",this.handleKeydown),this.childObserver.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.childObserver.disconnect(),this.root=null,super.disconnectedCallback()}swatches(){return Array.from(this.querySelectorAll(A))}get activeValue(){let e=this.swatches();return this.focusedValue!==null&&e.some(t=>t.value===this.focusedValue)?this.focusedValue:(e.find(t=>t.checked)??e[0])?.value??null}setFocusedValue(e){this.focusedValue!==e&&(this.focusedValue=e,this.notifySwatches())}notifySwatches(){for(let e of this.swatches())e.syncFromRoot()}syncFromRoot(){this.requestUpdate()}updated(){let e=this.root;e&&(this.setAttribute("role","radiogroup"),e.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),e.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}render(){return n.html`<slot></slot>`}};d.styles=[k.hiddenHostStyles,n.css`
+"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var w=(s,o)=>{for(var e in o)a(s,e,{get:o[e],enumerable:!0})},g=(s,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of y(o))!b.call(s,t)&&t!==e&&a(s,t,{get:()=>o[t],enumerable:!(r=h(o,t))||r.enumerable});return s};var x=s=>g(a({},"__esModule",{value:!0}),s),c=(s,o,e,r)=>{for(var t=r>1?void 0:r?h(o,e):o,l=s.length-1,i;l>=0;l--)(i=s[l])&&(t=(r?i(o,e,t):i(t))||t);return r&&t&&a(o,e,t),t};var C={};w(C,{SkdxColorPickerSwatchGroup:()=>d});module.exports=x(C);var n=require("lit"),u=require("lit/decorators.js"),f=require("../internal/define.cjs"),p=require("../internal/direction.cjs"),m=require("../internal/positioning.cjs"),k=require("../internal/styles.cjs");var A="skdx-color-picker-swatch",d=class extends n.LitElement{constructor(){super(...arguments);this.loop=!0;this.focusedValue=null;this.root=null;this.childObserver=new MutationObserver(()=>this.notifySwatches());this.handleKeydown=e=>{let r=this.swatches().filter(v=>!v.isDisabled);if(r.length===0)return;let t=r.indexOf(e.target),l=(0,p.directionalKey)(e.key,this),i;l==="ArrowRight"||l==="ArrowDown"?(i=t+1,i>=r.length&&(i=this.loop?0:r.length-1)):l==="ArrowLeft"||l==="ArrowUp"?(i=t-1,i<0&&(i=this.loop?r.length-1:0)):l==="Home"?i=0:l==="End"&&(i=r.length-1),i!==void 0&&(e.preventDefault(),r[i]?.focus())}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-swatch-group> must be used inside <skdx-color-picker>.");this.addEventListener("keydown",this.handleKeydown),this.childObserver.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.childObserver.disconnect(),this.root=null,super.disconnectedCallback()}swatches(){return Array.from(this.querySelectorAll(A))}get activeValue(){let e=this.swatches();return this.focusedValue!==null&&e.some(t=>t.value===this.focusedValue)?this.focusedValue:(e.find(t=>t.checked)??e[0])?.value??null}setFocusedValue(e){this.focusedValue!==e&&(this.focusedValue=e,this.notifySwatches())}notifySwatches(){for(let e of this.swatches())e.syncFromRoot()}syncFromRoot(){this.requestUpdate()}updated(){let e=this.root;e&&(this.setAttribute("role","radiogroup"),e.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),e.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}render(){return n.html`<slot></slot>`}};d.styles=[k.hiddenHostStyles,n.css`
       :host {
         display: block;
       }
-    `],a([(0,u.property)({converter:m.optOutBoolean})],d.prototype,"loop",2),d=a([(0,f.customElement)("skdx-color-picker-swatch-group","color-picker","swatch-group")],d);0&&(module.exports={SkdxColorPickerSwatchGroup});
+    `],c([(0,u.property)({converter:m.optOutBoolean})],d.prototype,"loop",2),d=c([(0,f.customElement)("skdx-color-picker-swatch-group","color-picker","swatch-group")],d);0&&(module.exports={SkdxColorPickerSwatchGroup});

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

@@ -1,11 +1,8 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Container for a set of preset `ColorPickerSwatch`es. Renders `role="radiogroup"`
- * with a single tab stop for the whole set: arrow keys move between swatches,
- * `Home`/`End` jump to the ends. All four arrows navigate, since swatches are
- * normally a grid. Give the group an accessible name (`aria-label` or
- * `aria-labelledby`) — an unnamed radiogroup announces a bare count of options.
- * Must be used inside `<skdx-color-picker>`.
+ * Container for a set of preset `ColorPickerSwatch`es, rendering
+ * `role="radiogroup"` with a single tab stop — arrow keys (all four, since
+ * swatches are normally a grid) move between them, `Home`/`End` jump to the ends.
  *
  * @example
  * ```html
@@ -25,28 +22,17 @@ export declare class SkdxColorPickerSwatchGroup extends LitElement {
     /** @internal The swatch the user last focused, if it is still rendered. */
     private focusedValue;
     private root;
-    /**
-     * Swatches added or removed after the first render have to re-derive the tab
-     * stop: removing the swatch that held it would otherwise leave the group with
-     * no `tabindex="0"` at all, silently dropping it out of the tab order with
-     * nothing on screen to explain why. React gets this from re-rendering the
-     * list; a custom element has to be told.
-     */
     private readonly childObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** Every rendered swatch, in DOM order. */
     private swatches;
     /**
      * @internal Which swatch holds the group's single tab stop: the last focused
-     * one, else the checked one (so tabbing in lands on the current selection),
-     * else the first. Derived rather than stored, which is what keeps the tab stop
-     * on a swatch that still exists — a stored value pointing at a removed swatch
-     * would drop the whole group out of the tab order with nothing on screen to
-     * explain why.
+     * one, else the checked one, else the first — derived rather than stored, so
+     * a removed swatch never strands the tab order.
      */
     get activeValue(): string | null;
-    /** @internal Hands the tab stop to a swatch the user just focused. Called by `<skdx-color-picker-swatch>`. */
+    /** @internal Hands the tab stop to a swatch the user just focused, called by `<skdx-color-picker-swatch>`. */
     setFocusedValue(value: string): void;
     /** @internal Re-pushes the tab stop onto every swatch; the group owns it, so the group announces the change. */
     private notifySwatches;
@@ -54,7 +40,7 @@ export declare class SkdxColorPickerSwatchGroup extends LitElement {
     syncFromRoot(): void;
     protected updated(): void;
     private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,11 +1,8 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Container for a set of preset `ColorPickerSwatch`es. Renders `role="radiogroup"`
- * with a single tab stop for the whole set: arrow keys move between swatches,
- * `Home`/`End` jump to the ends. All four arrows navigate, since swatches are
- * normally a grid. Give the group an accessible name (`aria-label` or
- * `aria-labelledby`) — an unnamed radiogroup announces a bare count of options.
- * Must be used inside `<skdx-color-picker>`.
+ * Container for a set of preset `ColorPickerSwatch`es, rendering
+ * `role="radiogroup"` with a single tab stop — arrow keys (all four, since
+ * swatches are normally a grid) move between them, `Home`/`End` jump to the ends.
  *
  * @example
  * ```html
@@ -25,28 +22,17 @@ export declare class SkdxColorPickerSwatchGroup extends LitElement {
     /** @internal The swatch the user last focused, if it is still rendered. */
     private focusedValue;
     private root;
-    /**
-     * Swatches added or removed after the first render have to re-derive the tab
-     * stop: removing the swatch that held it would otherwise leave the group with
-     * no `tabindex="0"` at all, silently dropping it out of the tab order with
-     * nothing on screen to explain why. React gets this from re-rendering the
-     * list; a custom element has to be told.
-     */
     private readonly childObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** Every rendered swatch, in DOM order. */
     private swatches;
     /**
      * @internal Which swatch holds the group's single tab stop: the last focused
-     * one, else the checked one (so tabbing in lands on the current selection),
-     * else the first. Derived rather than stored, which is what keeps the tab stop
-     * on a swatch that still exists — a stored value pointing at a removed swatch
-     * would drop the whole group out of the tab order with nothing on screen to
-     * explain why.
+     * one, else the checked one, else the first — derived rather than stored, so
+     * a removed swatch never strands the tab order.
      */
     get activeValue(): string | null;
-    /** @internal Hands the tab stop to a swatch the user just focused. Called by `<skdx-color-picker-swatch>`. */
+    /** @internal Hands the tab stop to a swatch the user just focused, called by `<skdx-color-picker-swatch>`. */
     setFocusedValue(value: string): void;
     /** @internal Re-pushes the tab stop onto every swatch; the group owns it, so the group announces the change. */
     private notifySwatches;
@@ -54,7 +40,7 @@ export declare class SkdxColorPickerSwatchGroup extends LitElement {
     syncFromRoot(): void;
     protected updated(): void;
     private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/color-picker/ColorPickerSwatchGroup.js

@@ -1,4 +1,4 @@
-var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(d,l,e,o)=>{for(var t=o>1?void 0:o?h(l,e):l,i=d.length-1,r;i>=0;i--)(r=d[i])&&(t=(o?r(l,e,t):r(t))||t);return o&&t&&a(l,e,t),t};import{css as u,html as f,LitElement as p}from"lit";import{property as m}from"lit/decorators.js";import{customElement as k}from"../internal/define.js";import{directionalKey as v}from"../internal/direction.js";import{optOutBoolean as y}from"../internal/positioning.js";import{hiddenHostStyles as b}from"../internal/styles.js";var w="skdx-color-picker-swatch",s=class extends p{constructor(){super(...arguments);this.loop=!0;this.focusedValue=null;this.root=null;this.childObserver=new MutationObserver(()=>this.notifySwatches());this.handleKeydown=e=>{let o=this.swatches().filter(c=>!c.isDisabled);if(o.length===0)return;let t=o.indexOf(e.target),i=v(e.key,this),r;i==="ArrowRight"||i==="ArrowDown"?(r=t+1,r>=o.length&&(r=this.loop?0:o.length-1)):i==="ArrowLeft"||i==="ArrowUp"?(r=t-1,r<0&&(r=this.loop?o.length-1:0)):i==="Home"?r=0:i==="End"&&(r=o.length-1),r!==void 0&&(e.preventDefault(),o[r]?.focus())}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-swatch-group> must be used inside <skdx-color-picker>.");this.addEventListener("keydown",this.handleKeydown),this.childObserver.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.childObserver.disconnect(),this.root=null,super.disconnectedCallback()}swatches(){return Array.from(this.querySelectorAll(w))}get activeValue(){let e=this.swatches();return this.focusedValue!==null&&e.some(t=>t.value===this.focusedValue)?this.focusedValue:(e.find(t=>t.checked)??e[0])?.value??null}setFocusedValue(e){this.focusedValue!==e&&(this.focusedValue=e,this.notifySwatches())}notifySwatches(){for(let e of this.swatches())e.syncFromRoot()}syncFromRoot(){this.requestUpdate()}updated(){let e=this.root;e&&(this.setAttribute("role","radiogroup"),e.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),e.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}render(){return f`<slot></slot>`}};s.styles=[b,u`
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(d,l,e,o)=>{for(var t=o>1?void 0:o?h(l,e):l,i=d.length-1,r;i>=0;i--)(r=d[i])&&(t=(o?r(l,e,t):r(t))||t);return o&&t&&c(l,e,t),t};import{css as u,html as f,LitElement as p}from"lit";import{property as m}from"lit/decorators.js";import{customElement as k}from"../internal/define.js";import{directionalKey as v}from"../internal/direction.js";import{optOutBoolean as y}from"../internal/positioning.js";import{hiddenHostStyles as b}from"../internal/styles.js";var w="skdx-color-picker-swatch",s=class extends p{constructor(){super(...arguments);this.loop=!0;this.focusedValue=null;this.root=null;this.childObserver=new MutationObserver(()=>this.notifySwatches());this.handleKeydown=e=>{let o=this.swatches().filter(a=>!a.isDisabled);if(o.length===0)return;let t=o.indexOf(e.target),i=v(e.key,this),r;i==="ArrowRight"||i==="ArrowDown"?(r=t+1,r>=o.length&&(r=this.loop?0:o.length-1)):i==="ArrowLeft"||i==="ArrowUp"?(r=t-1,r<0&&(r=this.loop?o.length-1:0)):i==="Home"?r=0:i==="End"&&(r=o.length-1),r!==void 0&&(e.preventDefault(),o[r]?.focus())}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-swatch-group> must be used inside <skdx-color-picker>.");this.addEventListener("keydown",this.handleKeydown),this.childObserver.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.childObserver.disconnect(),this.root=null,super.disconnectedCallback()}swatches(){return Array.from(this.querySelectorAll(w))}get activeValue(){let e=this.swatches();return this.focusedValue!==null&&e.some(t=>t.value===this.focusedValue)?this.focusedValue:(e.find(t=>t.checked)??e[0])?.value??null}setFocusedValue(e){this.focusedValue!==e&&(this.focusedValue=e,this.notifySwatches())}notifySwatches(){for(let e of this.swatches())e.syncFromRoot()}syncFromRoot(){this.requestUpdate()}updated(){let e=this.root;e&&(this.setAttribute("role","radiogroup"),e.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),e.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}render(){return f`<slot></slot>`}};s.styles=[b,u`
       :host {
         display: block;
       }

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

@@ -1,4 +1,4 @@
-"use strict";var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var E=(r,i)=>{for(var t in i)l(r,t,{get:i[t],enumerable:!0})},C=(r,i,t,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of k(i))!R.call(r,e)&&e!==t&&l(r,e,{get:()=>i[e],enumerable:!(o=y(i,e))||o.enumerable});return r};var L=r=>C(l({},"__esModule",{value:!0}),r),b=(r,i,t,o)=>{for(var e=o>1?void 0:o?y(i,t):i,n=r.length-1,a;n>=0;n--)(a=r[n])&&(e=(o?a(i,t,e):a(e))||e);return o&&e&&l(i,t,e),e};var F={};E(F,{SkdxColorPickerChannelSlider:()=>d,SkdxColorPickerChannelSliderThumb:()=>h,arrowStep:()=>w,round2:()=>c,snapChannel:()=>p});module.exports=L(F);var s=require("lit"),u=require("lit/decorators.js"),f=require("../internal/direction.cjs"),m=require("../internal/styles.cjs"),A=require("./pointer-ratio.cjs");var M=10;function c(r){return Math.round(r*100)/100}function p(r,i,t){let o=i>0?Math.round(Math.round(r/i)*i*1e6)/1e6:r;return Math.min(Math.max(o,0),t)}function w(r){return r>0?r:1}var d=class extends s.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.dragging=!1;this.root=null;this.handleKeydown=t=>{let o=this.root;if(!o?.interactive)return;let e=(0,f.directionalKey)(t.key,this),n=this.limit;if(e==="Home"||e==="End"){t.preventDefault(),this.writeChannel(e==="Home"?0:n);return}let a=w(o.step),g=Math.max(this.max/10,a),v={ArrowRight:a,ArrowUp:a,ArrowLeft:-a,ArrowDown:-a,PageUp:g,PageDown:-g}[e];if(v===void 0)return;t.preventDefault();let x=t.shiftKey&&e.startsWith("Arrow")?M:1;this.writeChannel(p(this.channelValue+v*x,o.step,n))}}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=(0,A.trackPointerRatio)(this,{enabled:()=>this.root?.interactive??!1,onRatioChange:t=>{let o=this.root;if(!o)return;let e=this.orientation==="horizontal"?t.x:1-t.y;this.writeChannel(p(e*this.max,o.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 o=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(c(o))),this.setAttribute("aria-valuetext",this.valueTextFor(o)),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(c(o))),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly),this.toggleAttribute("data-dragging",this.dragging)}render(){return s.html`<slot></slot>`}};d.styles=[m.hiddenHostStyles,s.css`
+"use strict";var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var C=(i,r)=>{for(var t in r)l(i,t,{get:r[t],enumerable:!0})},E=(i,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of k(r))!R.call(i,e)&&e!==t&&l(i,e,{get:()=>r[e],enumerable:!(a=y(r,e))||a.enumerable});return i};var S=i=>E(l({},"__esModule",{value:!0}),i),b=(i,r,t,a)=>{for(var e=a>1?void 0:a?y(r,t):r,n=i.length-1,o;n>=0;n--)(o=i[n])&&(e=(a?o(r,t,e):o(e))||e);return a&&e&&l(r,t,e),e};var M={};C(M,{SkdxColorPickerChannelSlider:()=>d,SkdxColorPickerChannelSliderThumb:()=>h,arrowStep:()=>x,round2:()=>c,snapChannel:()=>p});module.exports=S(M);var s=require("lit"),u=require("lit/decorators.js"),f=require("../internal/direction.cjs"),m=require("../internal/styles.cjs"),A=require("./pointer-ratio.cjs");var L=10;function c(i){return Math.round(i*100)/100}function p(i,r,t){let a=r>0?Math.round(Math.round(i/r)*r*1e6)/1e6:i;return Math.min(Math.max(a,0),t)}function x(i){return i>0?i:1}var d=class extends s.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.dragging=!1;this.root=null;this.handleKeydown=t=>{let a=this.root;if(!a?.interactive||this.hiddenByRoot)return;let e=(0,f.directionalKey)(t.key,this),n=this.limit;if(e==="Home"||e==="End"){t.preventDefault(),this.writeChannel(e==="Home"?0:n);return}let o=x(a.step),g=Math.max(this.max/10,o),v={ArrowRight:o,ArrowUp:o,ArrowLeft:-o,ArrowDown:-o,PageUp:g,PageDown:-g}[e];if(v===void 0)return;t.preventDefault();let w=t.shiftKey&&e.startsWith("Arrow")?L:1;this.writeChannel(p(this.channelValue+v*w,a.step,n))}}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=(0,A.trackPointerRatio)(this,{enabled:()=>this.root?.interactive??!1,onRatioChange:t=>{let a=this.root;if(!a)return;let e=this.orientation==="horizontal"?t.x:1-t.y;this.writeChannel(p(e*this.max,a.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){if(this.hidden=this.hiddenByRoot,this.hidden){this.shedSliderSemantics();return}this.syncSliderState(t)}}shedSliderSemantics(){for(let t of["role","tabindex","aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-orientation","aria-disabled","aria-readonly"])this.removeAttribute(t)}syncSliderState(t){let a=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(c(a))),this.setAttribute("aria-valuetext",this.valueTextFor(a)),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(c(a))),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly),this.toggleAttribute("data-dragging",this.dragging)}render(){return s.html`<slot></slot>`}};d.styles=[m.hiddenHostStyles,s.css`
       :host {
         display: block;
         position: relative;

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } 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;
@@ -7,8 +7,8 @@ export declare function snapChannel(raw: number, step: number, max: number): num
 /** @internal Keyboard arrow step (defaults to 1 when step is 0 for continuous pointer mode). */
 export declare function arrowStep(step: number): number;
 /**
- * Base for hue and alpha channel sliders. Linear `role="slider"` with pointer
- * drag, click-to-seek, and keyboard navigation. Track has ends (does not wrap).
+ * Base for hue and alpha channel sliders: a linear `role="slider"` with
+ * pointer drag, click-to-seek, and keyboard navigation, whose track has ends and does not wrap.
  * @internal
  */
 export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
@@ -25,9 +25,9 @@ export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
     /** 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. Each part exposes it
-     * as a `label` property/attribute, so a localised UI can translate the track
-     * without reaching past the element's own API for an `aria-label`.
+     * Accessible name used when the consumer supplies none, exposed as a
+     * `label` property/attribute so a localised UI can translate it without
+     * reaching past the element's API.
      */
     protected abstract readonly defaultLabel: string;
     /** This track's current position on its range. */
@@ -45,24 +45,15 @@ export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
     /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
     syncFromRoot(): void;
     protected updated(): void;
+    private shedSliderSemantics;
+    private syncSliderState;
     private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 /**
- * 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.
- *
+ * The handle on a channel track: purely visual (`aria-hidden`, out of the tab
+ * order) since the track carries the `role="slider"` semantics, positioned
+ * entirely by the root's `--skdx-color-picker-*-position` custom properties.
  * @internal
  */
 export declare abstract class SkdxColorPickerChannelSliderThumb extends LitElement {
@@ -77,5 +68,5 @@ export declare abstract class SkdxColorPickerChannelSliderThumb extends LitEleme
     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>;
+    render(): TemplateResult;
 }