@skdx/web-components 0.26.0 → 0.28.0

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

@@ -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>
  * ```

package/dist/color-picker/ColorPickerAreaThumb.cjs

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

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

@@ -1,42 +1,11 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-color-picker-area-thumb>` — the handle on a
- * `<skdx-color-picker-area>`, and the area's entire accessibility surface: it
- * renders **two `role="slider"` elements**, one for saturation and one for
- * brightness, each with its own accessible name and its own truthful
- * `aria-valuenow`. Must be used inside `<skdx-color-picker>`.
- *
- * Two sliders rather than one: `role="slider"` requires `aria-valuenow`, and a
- * 2D colour has no single number to put there — a lone slider would have to
- * report one axis and lie about the other, which is the failure mode
- * `aria-valuetext` cannot paper over. Two axes each report a number that is
- * true. The cost is two tab stops inside one visual thumb, which is the same
- * trade every shipped 2D colour area makes: an extra Tab press versus an
- * announcement that is wrong.
- *
- * Both axes accept **all four arrow keys**, so no key is dead wherever focus
- * happens to sit; `Home`/`End` are the one axis-specific pair, sending *that*
- * axis to its extremes. Shift multiplies the step by ten. Because each axis's
- * `aria-valuetext` names both percentages and the resulting colour, a move on
- * either axis re-announces from the focused slider — which is why nothing here
- * writes to the live region.
- *
- * The two axes are the focus targets, not the host, so give them size in CSS —
- * typically by filling the thumb. They render into this element's light DOM,
- * so an ordinary descendant selector reaches them, the same one the React,
- * Vue, Svelte and Angular builds use:
- *
- * ```css
- * skdx-color-picker-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * skdx-color-picker-area-thumb > [role='slider'] {
- *   position: absolute;
- *   inset: 0;
- * }
- * ```
+ * The handle on a `<skdx-color-picker-area>` and the area's accessibility
+ * surface: renders two `role="slider"` elements, one for saturation and one for
+ * brightness, each with its own accessible name and truthful `aria-valuenow`.
+ * Two sliders rather than one, since a 2D colour has no single number to report
+ * — a lone slider would have to lie about one axis. Must be used inside
+ * `<skdx-color-picker>`.
  *
  * @example
  * ```html
@@ -47,7 +16,6 @@ import { LitElement } from 'lit';
  *   ></skdx-color-picker-area-thumb>
  * </skdx-color-picker-area>
  * ```
- *
  */
 export declare class SkdxColorPickerAreaThumb extends LitElement {
     /**
@@ -70,14 +38,13 @@ export declare class SkdxColorPickerAreaThumb extends LitElement {
      */
     protected createRenderRoot(): HTMLElement;
     /**
-     * Accessible name of the horizontal axis, which is a `role="slider"` of its
-     * own — two unnamed sliders in the same box are indistinguishable.
-     * @default 'Saturation' — override it for a localised UI.
+     * Accessible name of the horizontal saturation slider.
+     * @default 'Saturation'
      */
     saturationLabel: string;
     /**
-     * Accessible name of the vertical axis, which is a second `role="slider"`.
-     * @default 'Brightness' — override it for a localised UI.
+     * Accessible name of the vertical brightness slider.
+     * @default 'Brightness'
      */
     brightnessLabel: string;
     private root;

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

@@ -1,42 +1,11 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-color-picker-area-thumb>` — the handle on a
- * `<skdx-color-picker-area>`, and the area's entire accessibility surface: it
- * renders **two `role="slider"` elements**, one for saturation and one for
- * brightness, each with its own accessible name and its own truthful
- * `aria-valuenow`. Must be used inside `<skdx-color-picker>`.
- *
- * Two sliders rather than one: `role="slider"` requires `aria-valuenow`, and a
- * 2D colour has no single number to put there — a lone slider would have to
- * report one axis and lie about the other, which is the failure mode
- * `aria-valuetext` cannot paper over. Two axes each report a number that is
- * true. The cost is two tab stops inside one visual thumb, which is the same
- * trade every shipped 2D colour area makes: an extra Tab press versus an
- * announcement that is wrong.
- *
- * Both axes accept **all four arrow keys**, so no key is dead wherever focus
- * happens to sit; `Home`/`End` are the one axis-specific pair, sending *that*
- * axis to its extremes. Shift multiplies the step by ten. Because each axis's
- * `aria-valuetext` names both percentages and the resulting colour, a move on
- * either axis re-announces from the focused slider — which is why nothing here
- * writes to the live region.
- *
- * The two axes are the focus targets, not the host, so give them size in CSS —
- * typically by filling the thumb. They render into this element's light DOM,
- * so an ordinary descendant selector reaches them, the same one the React,
- * Vue, Svelte and Angular builds use:
- *
- * ```css
- * skdx-color-picker-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * skdx-color-picker-area-thumb > [role='slider'] {
- *   position: absolute;
- *   inset: 0;
- * }
- * ```
+ * The handle on a `<skdx-color-picker-area>` and the area's accessibility
+ * surface: renders two `role="slider"` elements, one for saturation and one for
+ * brightness, each with its own accessible name and truthful `aria-valuenow`.
+ * Two sliders rather than one, since a 2D colour has no single number to report
+ * — a lone slider would have to lie about one axis. Must be used inside
+ * `<skdx-color-picker>`.
  *
  * @example
  * ```html
@@ -47,7 +16,6 @@ import { LitElement } from 'lit';
  *   ></skdx-color-picker-area-thumb>
  * </skdx-color-picker-area>
  * ```
- *
  */
 export declare class SkdxColorPickerAreaThumb extends LitElement {
     /**
@@ -70,14 +38,13 @@ export declare class SkdxColorPickerAreaThumb extends LitElement {
      */
     protected createRenderRoot(): HTMLElement;
     /**
-     * Accessible name of the horizontal axis, which is a `role="slider"` of its
-     * own — two unnamed sliders in the same box are indistinguishable.
-     * @default 'Saturation' — override it for a localised UI.
+     * Accessible name of the horizontal saturation slider.
+     * @default 'Saturation'
      */
     saturationLabel: string;
     /**
-     * Accessible name of the vertical axis, which is a second `role="slider"`.
-     * @default 'Brightness' — override it for a localised UI.
+     * Accessible name of the vertical brightness slider.
+     * @default 'Brightness'
      */
     brightnessLabel: string;
     private root;

package/dist/color-picker/ColorPickerAreaThumb.js

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

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

@@ -1,22 +1,13 @@
 import { LitElement, nothing } from 'lit';
 /**
- * `<skdx-color-picker-eye-dropper>` — opens the browser's screen colour picker
- * and applies whatever the user clicks: the one way to sample a colour that is
- * not already inside this widget. Must be used inside `<skdx-color-picker>`.
+ * Opens the browser's screen colour picker and applies whatever the user clicks.
+ * Renders nothing where `window.EyeDropper` does not exist (Firefox, Safari, SSR).
  *
- * **It renders nothing where `window.EyeDropper` does not exist** — today
- * Firefox and Safari — and hides its host with it, rather than offering a
- * button that cannot work. Support is feature-detected on connect, because
- * whether the platform has the API cannot change over a page's lifetime.
- *
- * The sampled colour is always opaque, so the picker's **current alpha is
- * kept** — sampling a colour off the screen is not a statement about
- * transparency, and resetting opacity to 100% would quietly undo the user's
- * last decision. Dismissing the picker (Escape) is a cancellation, not an
- * error, and changes nothing.
- *
- * The result **is announced** through the shared live region: a button press
- * tells a screen-reader user nothing about the colour it produced.
+ * The sampled colour is always opaque, so the picker's current alpha is kept —
+ * sampling is not a statement about transparency. Dismissing the picker (Escape)
+ * is a cancellation and changes nothing. The result is announced: a button press
+ * tells a screen-reader user nothing about the colour it produced. Must be used
+ * inside `<skdx-color-picker>`.
  *
  * @example
  * ```html

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

@@ -1,22 +1,13 @@
 import { LitElement, nothing } from 'lit';
 /**
- * `<skdx-color-picker-eye-dropper>` — opens the browser's screen colour picker
- * and applies whatever the user clicks: the one way to sample a colour that is
- * not already inside this widget. Must be used inside `<skdx-color-picker>`.
+ * Opens the browser's screen colour picker and applies whatever the user clicks.
+ * Renders nothing where `window.EyeDropper` does not exist (Firefox, Safari, SSR).
  *
- * **It renders nothing where `window.EyeDropper` does not exist** — today
- * Firefox and Safari — and hides its host with it, rather than offering a
- * button that cannot work. Support is feature-detected on connect, because
- * whether the platform has the API cannot change over a page's lifetime.
- *
- * The sampled colour is always opaque, so the picker's **current alpha is
- * kept** — sampling a colour off the screen is not a statement about
- * transparency, and resetting opacity to 100% would quietly undo the user's
- * last decision. Dismissing the picker (Escape) is a cancellation, not an
- * error, and changes nothing.
- *
- * The result **is announced** through the shared live region: a button press
- * tells a screen-reader user nothing about the colour it produced.
+ * The sampled colour is always opaque, so the picker's current alpha is kept —
+ * sampling is not a statement about transparency. Dismissing the picker (Escape)
+ * is a cancellation and changes nothing. The result is announced: a button press
+ * tells a screen-reader user nothing about the colour it produced. Must be used
+ * inside `<skdx-color-picker>`.
  *
  * @example
  * ```html

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

@@ -1,41 +1,16 @@
 import { LitElement } from 'lit';
 import type { ColorFormat } from '../internal/color.cjs';
 /**
- * `<skdx-color-picker-format-select>` — switches the notation `value` is written
- * in. Renders a **native `<select>`** — a listbox, its keyboard, its typeahead
- * and its mobile presentation all come free and correct from the platform, and
- * there is nothing about four fixed options that a custom popup would do
- * better. Must be used inside `<skdx-color-picker>`.
- *
- * Want a styled popup instead? Drive the root's `format` property and its
- * `format-change` event from `<skdx-select>` and leave this part out.
- *
- * Switching format does **not** change the colour, but it does change `value`,
- * so `value-change` fires alongside `format-change` with the re-spelled string.
- * A read-only picker refuses the switch for that reason, and the controlled
- * `value` on the native element snaps it back while leaving it focusable —
- * which is the whole point of `read-only` over `disabled`.
+ * Switches the notation `value` is written in. Renders a native `<select>` with
+ * its keyboard, typeahead and mobile presentation. A read-only picker refuses
+ * the switch, snapping the select back to the notation still in force while
+ * staying focusable. Must be used inside `<skdx-color-picker>`.
  *
  * @example
  * ```html
  * <skdx-color-picker-format-select></skdx-color-picker-format-select>
- * <skdx-color-picker-format-select formats='["hex","rgb"]' aria-label="Notation">
- * </skdx-color-picker-format-select>
+ * <skdx-color-picker-format-select formats='["hex","rgb"]'></skdx-color-picker-format-select>
  * ```
- *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
- * boundary a wrapping `<label>` cannot name the `<select>` (a label names its
- * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()`
- * cannot see it (`querySelectorAll()` does not pierce a shadow root). Putting
- * `display: contents` on the `<select>` instead is not an option: CSS Display 3
- * computes it to `none` on form controls.
- *
- * @csspart format-select - The native `<select>` element. **`::part(format-select)` does not
- * reach it.** This element renders into the light DOM (see `createRenderRoot` below) and
- * `::part()` only matches inside a shadow root, so the `part` attribute is inert here. It is
- * kept so the name matches the shadow-DOM components and the styling-hooks contract. Style it
- * as an ordinary descendant instead: `skdx-color-picker-format-select > select { … }`.
  */
 export declare class SkdxColorPickerFormatSelect extends LitElement {
     /** Light DOM, for the labelling reasons in the class docblock. */
@@ -47,10 +22,8 @@ export declare class SkdxColorPickerFormatSelect extends LitElement {
      */
     focus(options?: FocusOptions): void;
     /**
-     * Which notations to offer, in the order they should appear. As an attribute
-     * it is JSON, like every other array property in this package:
-     * `formats='["hex","rgb"]'`.
-     * @default ['hex', 'rgb', 'hsl', 'hsb'] — every format the picker can emit.
+     * Which notations to offer, in display order.
+     * @default ['hex', 'rgb', 'hsl', 'hsb']
      */
     formats: ColorFormat[];
     private root;

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

@@ -1,41 +1,16 @@
 import { LitElement } from 'lit';
 import type { ColorFormat } from '../internal/color.js';
 /**
- * `<skdx-color-picker-format-select>` — switches the notation `value` is written
- * in. Renders a **native `<select>`** — a listbox, its keyboard, its typeahead
- * and its mobile presentation all come free and correct from the platform, and
- * there is nothing about four fixed options that a custom popup would do
- * better. Must be used inside `<skdx-color-picker>`.
- *
- * Want a styled popup instead? Drive the root's `format` property and its
- * `format-change` event from `<skdx-select>` and leave this part out.
- *
- * Switching format does **not** change the colour, but it does change `value`,
- * so `value-change` fires alongside `format-change` with the re-spelled string.
- * A read-only picker refuses the switch for that reason, and the controlled
- * `value` on the native element snaps it back while leaving it focusable —
- * which is the whole point of `read-only` over `disabled`.
+ * Switches the notation `value` is written in. Renders a native `<select>` with
+ * its keyboard, typeahead and mobile presentation. A read-only picker refuses
+ * the switch, snapping the select back to the notation still in force while
+ * staying focusable. Must be used inside `<skdx-color-picker>`.
  *
  * @example
  * ```html
  * <skdx-color-picker-format-select></skdx-color-picker-format-select>
- * <skdx-color-picker-format-select formats='["hex","rgb"]' aria-label="Notation">
- * </skdx-color-picker-format-select>
+ * <skdx-color-picker-format-select formats='["hex","rgb"]'></skdx-color-picker-format-select>
  * ```
- *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
- * boundary a wrapping `<label>` cannot name the `<select>` (a label names its
- * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()`
- * cannot see it (`querySelectorAll()` does not pierce a shadow root). Putting
- * `display: contents` on the `<select>` instead is not an option: CSS Display 3
- * computes it to `none` on form controls.
- *
- * @csspart format-select - The native `<select>` element. **`::part(format-select)` does not
- * reach it.** This element renders into the light DOM (see `createRenderRoot` below) and
- * `::part()` only matches inside a shadow root, so the `part` attribute is inert here. It is
- * kept so the name matches the shadow-DOM components and the styling-hooks contract. Style it
- * as an ordinary descendant instead: `skdx-color-picker-format-select > select { … }`.
  */
 export declare class SkdxColorPickerFormatSelect extends LitElement {
     /** Light DOM, for the labelling reasons in the class docblock. */
@@ -47,10 +22,8 @@ export declare class SkdxColorPickerFormatSelect extends LitElement {
      */
     focus(options?: FocusOptions): void;
     /**
-     * Which notations to offer, in the order they should appear. As an attribute
-     * it is JSON, like every other array property in this package:
-     * `formats='["hex","rgb"]'`.
-     * @default ['hex', 'rgb', 'hsl', 'hsb'] — every format the picker can emit.
+     * Which notations to offer, in display order.
+     * @default ['hex', 'rgb', 'hsl', 'hsb']
      */
     formats: ColorFormat[];
     private root;

package/dist/color-picker/ColorPickerHueSlider.cjs

@@ -1 +1 @@
-"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var v=(n,r)=>{for(var e in r)i(n,e,{get:r[e],enumerable:!0})},b=(n,r,e,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of p(r))!m.call(n,t)&&t!==e&&i(n,t,{get:()=>r[t],enumerable:!(o=s(r,t))||o.enumerable});return n};var f=n=>b(i({},"__esModule",{value:!0}),n),a=(n,r,e,o)=>{for(var t=o>1?void 0:o?s(r,e):r,l=n.length-1,c;l>=0;l--)(c=n[l])&&(t=(o?c(r,e,t):c(t))||t);return o&&t&&i(r,e,t),t};var g={};v(g,{SkdxColorPickerHueSlider:()=>d});module.exports=f(g);var u=require("../internal/define.cjs"),h=require("./channel-slider.cjs");var d=class extends h.SkdxColorPickerChannelSlider{constructor(){super(...arguments);this.channel="hue";this.max=360;this.defaultLabel="Hue"}get limit(){let e=this.root?.step??1;return e>0?Math.floor(359/e)*e:359}get channelValue(){return this.root?.color.h??0}valueTextFor(e){let o=this.root;return o?`${Math.round(e)} degrees, ${o.describe(o.color)}`:`${Math.round(e)} degrees`}writeChannel(e){let o=this.root;o&&o.setColor({...o.color,h:e})}};d=a([(0,u.customElement)("skdx-color-picker-hue-slider","color-picker","hue-slider")],d);0&&(module.exports={SkdxColorPickerHueSlider});
+"use strict";var l=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var b=(n,r)=>{for(var e in r)l(n,e,{get:r[e],enumerable:!0})},f=(n,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of m(r))!g.call(n,o)&&o!==e&&l(n,o,{get:()=>r[o],enumerable:!(t=a(r,o))||t.enumerable});return n};var v=n=>f(l({},"__esModule",{value:!0}),n),c=(n,r,e,t)=>{for(var o=t>1?void 0:t?a(r,e):r,d=n.length-1,s;d>=0;d--)(s=n[d])&&(o=(t?s(r,e,o):s(o))||o);return t&&o&&l(r,e,o),o};var M={};b(M,{SkdxColorPickerHueSlider:()=>i});module.exports=v(M);var p=require("lit/decorators.js"),h=require("../internal/define.cjs"),u=require("./channel-slider.cjs");var i=class extends u.SkdxColorPickerChannelSlider{constructor(){super(...arguments);this.channel="hue";this.max=360;this.label="Hue"}get defaultLabel(){return this.label}get limit(){let e=this.root?.step??1;return e>0?Math.floor(359/e)*e:359}get channelValue(){return this.root?.color.h??0}valueTextFor(e){let t=this.root;return t?`${Math.round(e)} degrees, ${t.describe(t.color)}`:`${Math.round(e)} degrees`}writeChannel(e){let t=this.root;t&&t.setColor({...t.color,h:e})}};c([(0,p.property)({type:String})],i.prototype,"label",2),i=c([(0,h.customElement)("skdx-color-picker-hue-slider","color-picker","hue-slider")],i);0&&(module.exports={SkdxColorPickerHueSlider});

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

@@ -1,41 +1,13 @@
 import { SkdxColorPickerChannelSlider } from './channel-slider.cjs';
 /**
- * `<skdx-color-picker-hue-slider>` — the hue track: a linear `role="slider"`
- * over 0–360°, independent of the saturation and brightness the 2D area holds.
- * Must be used inside `<skdx-color-picker>`, which it finds with `closest()`.
- *
- * **It has ends and does not wrap.** Hue is circular, but a linear control
- * reporting `aria-valuemin="0"`/`aria-valuemax="360"` that teleported from one
- * end to the other would be lying to assistive tech — so the track stops at the
- * last hue on the step grid below 360, since 360° *is* 0° and folding would
- * throw the thumb back to the left edge mid-drag. Reach for
- * `<skdx-angle-slider>` when you want a hue control that genuinely wraps.
- *
- * Pointer geometry is physical — left-to-right when horizontal, bottom-to-top
- * when vertical, matching `<skdx-slider>` — while the arrow **keys** mirror
- * under `dir="rtl"`. The gradient is yours, and so is its direction.
- *
- * It ships no CSS beyond `position: relative` and `touch-action: none`:
- *
- * ```css
- * .my-hue {
- *   background: linear-gradient(
- *     to right,
- *     #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%
- *   );
- * }
- * skdx-color-picker-hue-slider-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-hue-position);
- * }
- * ```
- *
- * Named "Hue" by default, so an unlabelled track is still navigable; write your
- * own `aria-label` for a localised UI and it wins.
+ * A linear hue track (`role="slider"` over 0–360°) independent of saturation
+ * and brightness. Does not wrap: hue is circular, but a linear control
+ * teleporting from one end to the other would be lying to assistive tech.
+ * Must be used inside `<skdx-color-picker>`.
  *
  * @example
  * ```html
- * <skdx-color-picker-hue-slider class="my-hue">
+ * <skdx-color-picker-hue-slider>
  *   <skdx-color-picker-hue-slider-thumb></skdx-color-picker-hue-slider-thumb>
  * </skdx-color-picker-hue-slider>
  * ```
@@ -43,7 +15,13 @@ import { SkdxColorPickerChannelSlider } from './channel-slider.cjs';
 export declare class SkdxColorPickerHueSlider extends SkdxColorPickerChannelSlider {
     protected readonly channel = "hue";
     protected readonly max = 360;
-    protected readonly defaultLabel = "Hue";
+    /**
+     * 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 'Hue'
+     */
+    label: string;
+    protected get defaultLabel(): string;
     /**
      * The last hue actually on the step grid — 359 at `step="1"`, 355 at
      * `step="5"` — which is the same rule `<skdx-angle-slider>` applies to its End

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

@@ -1,41 +1,13 @@
 import { SkdxColorPickerChannelSlider } from './channel-slider.js';
 /**
- * `<skdx-color-picker-hue-slider>` — the hue track: a linear `role="slider"`
- * over 0–360°, independent of the saturation and brightness the 2D area holds.
- * Must be used inside `<skdx-color-picker>`, which it finds with `closest()`.
- *
- * **It has ends and does not wrap.** Hue is circular, but a linear control
- * reporting `aria-valuemin="0"`/`aria-valuemax="360"` that teleported from one
- * end to the other would be lying to assistive tech — so the track stops at the
- * last hue on the step grid below 360, since 360° *is* 0° and folding would
- * throw the thumb back to the left edge mid-drag. Reach for
- * `<skdx-angle-slider>` when you want a hue control that genuinely wraps.
- *
- * Pointer geometry is physical — left-to-right when horizontal, bottom-to-top
- * when vertical, matching `<skdx-slider>` — while the arrow **keys** mirror
- * under `dir="rtl"`. The gradient is yours, and so is its direction.
- *
- * It ships no CSS beyond `position: relative` and `touch-action: none`:
- *
- * ```css
- * .my-hue {
- *   background: linear-gradient(
- *     to right,
- *     #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%
- *   );
- * }
- * skdx-color-picker-hue-slider-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-hue-position);
- * }
- * ```
- *
- * Named "Hue" by default, so an unlabelled track is still navigable; write your
- * own `aria-label` for a localised UI and it wins.
+ * A linear hue track (`role="slider"` over 0–360°) independent of saturation
+ * and brightness. Does not wrap: hue is circular, but a linear control
+ * teleporting from one end to the other would be lying to assistive tech.
+ * Must be used inside `<skdx-color-picker>`.
  *
  * @example
  * ```html
- * <skdx-color-picker-hue-slider class="my-hue">
+ * <skdx-color-picker-hue-slider>
  *   <skdx-color-picker-hue-slider-thumb></skdx-color-picker-hue-slider-thumb>
  * </skdx-color-picker-hue-slider>
  * ```
@@ -43,7 +15,13 @@ import { SkdxColorPickerChannelSlider } from './channel-slider.js';
 export declare class SkdxColorPickerHueSlider extends SkdxColorPickerChannelSlider {
     protected readonly channel = "hue";
     protected readonly max = 360;
-    protected readonly defaultLabel = "Hue";
+    /**
+     * 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 'Hue'
+     */
+    label: string;
+    protected get defaultLabel(): string;
     /**
      * The last hue actually on the step grid — 359 at `step="1"`, 355 at
      * `step="5"` — which is the same rule `<skdx-angle-slider>` applies to its End