@skdx/web-components 0.26.0

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

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

package/dist/color-picker/ColorPickerEyeDropper.js

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

package/dist/color-picker/ColorPickerFormatSelect.cjs

@@ -0,0 +1,11 @@
+"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(i,r)=>{for(var t in r)l(i,t,{get:r[t],enumerable:!0})},k=(i,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of v(r))!b.call(i,o)&&o!==t&&l(i,o,{get:()=>r[o],enumerable:!(e=h(r,o))||e.enumerable});return i};var y=i=>k(l({},"__esModule",{value:!0}),i),c=(i,r,t,e)=>{for(var o=e>1?void 0:e?h(r,t):r,n=i.length-1,d;n>=0;n--)(d=i[n])&&(o=(e?d(r,t,o):d(o))||o);return e&&o&&l(r,t,o),o};var C={};g(C,{SkdxColorPickerFormatSelect:()=>a});module.exports=y(C);var s=require("lit"),p=require("lit/decorators.js"),m=require("../internal/aria-label.cjs"),u=require("../internal/define.cjs"),f=require("../internal/styles.cjs");var O=["hex","rgb","hsl","hsb"],A={hex:"HEX",rgb:"RGB",hsl:"HSL",hsb:"HSB"},a=class extends s.LitElement{constructor(){super(...arguments);this.formats=O;this.root=null;this.label=null;this.authoredOptions=null;this.handleChange=t=>{this.root?.setFormat(t.target.value),this.requestUpdate()}}createRenderRoot(){return this}focus(t){this.querySelector("select")?.focus(t)}connectedCallback(){if(super.connectedCallback(),(0,f.installLightDomStyles)(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-format-select> must be used inside <skdx-color-picker>.");this.label=(0,m.takeHostAriaLabel)(this)}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}takeAuthoredOptions(){let t=Array.from(this.children).filter(e=>e.tagName!=="SELECT");if(t.length!==0){for(let e of t)e.remove();this.authoredOptions=[...this.authoredOptions??[],...t]}}willUpdate(){this.takeAuthoredOptions()}updated(){let t=this.root,e=this.authoredOptions;if(this.takeAuthoredOptions(),this.authoredOptions!==e&&this.requestUpdate(),!t)return;this.setAttribute("data-format",t.format),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly);let o=this.querySelector("select");o&&(o.value=t.format)}render(){let t=this.root;return t?s.html`<select
+      part="format-select"
+      aria-label=${this.label??"Colour format"}
+      aria-readonly=${t.readOnly?"true":s.nothing}
+      ?disabled=${t.disabled}
+      @change=${this.handleChange}
+    >
+      ${this.authoredOptions??this.formats.map(e=>s.html`<option value=${e} ?selected=${e===t.format}>
+              ${A[e]}
+            </option>`)}
+    </select>`:s.html`<select part="format-select"></select>`}};c([(0,p.property)({type:Array})],a.prototype,"formats",2),a=c([(0,u.customElement)("skdx-color-picker-format-select","color-picker","format-select")],a);0&&(module.exports={SkdxColorPickerFormatSelect});

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

@@ -0,0 +1,94 @@
+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`.
+ *
+ * @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>
+ * ```
+ *
+ * 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. */
+    createRenderRoot(): this;
+    /**
+     * Reaches through to the native `<select>`. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    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.
+     */
+    formats: ColorFormat[];
+    private root;
+    /** The consumer's own name for this control, moved off the host so it lands on the element that has the role. */
+    private label;
+    /**
+     * The consumer's own `<option>`s, moved off the host so `render()` can put
+     * them *inside* the `<select>`.
+     *
+     * React's element **is** the `<select>`, so its children are its options and
+     * `{children ?? formats.map(…)}` is the whole story
+     * (`packages/react/src/color-picker/ColorPickerFormatSelect.tsx:58`); Vue and
+     * Svelte are the same shape. A custom element cannot be a `<select>`, so here
+     * the options are children of the *host* — and the host's render root is that
+     * same light DOM, which left them stranded beside the generated `<select>` as
+     * loose text while the default list rendered underneath. Taking them makes
+     * the fallback real: authored options replace the generated ones, exactly as
+     * everywhere else.
+     */
+    private authoredOptions;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
+    syncFromRoot(): void;
+    /**
+     * Moves any element child that is not the generated `<select>` into
+     * {@link authoredOptions}. Runs before every render rather than once in
+     * `connectedCallback`, so options the parser (or a framework wrapper) appends
+     * after this element upgraded are picked up too.
+     */
+    private takeAuthoredOptions;
+    protected willUpdate(): void;
+    protected updated(): void;
+    private readonly handleChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-format-select': SkdxColorPickerFormatSelect;
+    }
+}

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

@@ -0,0 +1,94 @@
+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`.
+ *
+ * @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>
+ * ```
+ *
+ * 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. */
+    createRenderRoot(): this;
+    /**
+     * Reaches through to the native `<select>`. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    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.
+     */
+    formats: ColorFormat[];
+    private root;
+    /** The consumer's own name for this control, moved off the host so it lands on the element that has the role. */
+    private label;
+    /**
+     * The consumer's own `<option>`s, moved off the host so `render()` can put
+     * them *inside* the `<select>`.
+     *
+     * React's element **is** the `<select>`, so its children are its options and
+     * `{children ?? formats.map(…)}` is the whole story
+     * (`packages/react/src/color-picker/ColorPickerFormatSelect.tsx:58`); Vue and
+     * Svelte are the same shape. A custom element cannot be a `<select>`, so here
+     * the options are children of the *host* — and the host's render root is that
+     * same light DOM, which left them stranded beside the generated `<select>` as
+     * loose text while the default list rendered underneath. Taking them makes
+     * the fallback real: authored options replace the generated ones, exactly as
+     * everywhere else.
+     */
+    private authoredOptions;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
+    syncFromRoot(): void;
+    /**
+     * Moves any element child that is not the generated `<select>` into
+     * {@link authoredOptions}. Runs before every render rather than once in
+     * `connectedCallback`, so options the parser (or a framework wrapper) appends
+     * after this element upgraded are picked up too.
+     */
+    private takeAuthoredOptions;
+    protected willUpdate(): void;
+    protected updated(): void;
+    private readonly handleChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-format-select': SkdxColorPickerFormatSelect;
+    }
+}

package/dist/color-picker/ColorPickerFormatSelect.js

@@ -0,0 +1,11 @@
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(s,r,t,e)=>{for(var o=e>1?void 0:e?h(r,t):r,a=s.length-1,l;a>=0;a--)(l=s[a])&&(o=(e?l(r,t,o):l(o))||o);return e&&o&&c(r,t,o),o};import{html as d,LitElement as p,nothing as m}from"lit";import{property as u}from"lit/decorators.js";import{takeHostAriaLabel as f}from"../internal/aria-label.js";import{customElement as v}from"../internal/define.js";import{installLightDomStyles as b}from"../internal/styles.js";var g=["hex","rgb","hsl","hsb"],k={hex:"HEX",rgb:"RGB",hsl:"HSL",hsb:"HSB"},i=class extends p{constructor(){super(...arguments);this.formats=g;this.root=null;this.label=null;this.authoredOptions=null;this.handleChange=t=>{this.root?.setFormat(t.target.value),this.requestUpdate()}}createRenderRoot(){return this}focus(t){this.querySelector("select")?.focus(t)}connectedCallback(){if(super.connectedCallback(),b(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-format-select> must be used inside <skdx-color-picker>.");this.label=f(this)}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}takeAuthoredOptions(){let t=Array.from(this.children).filter(e=>e.tagName!=="SELECT");if(t.length!==0){for(let e of t)e.remove();this.authoredOptions=[...this.authoredOptions??[],...t]}}willUpdate(){this.takeAuthoredOptions()}updated(){let t=this.root,e=this.authoredOptions;if(this.takeAuthoredOptions(),this.authoredOptions!==e&&this.requestUpdate(),!t)return;this.setAttribute("data-format",t.format),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly);let o=this.querySelector("select");o&&(o.value=t.format)}render(){let t=this.root;return t?d`<select
+      part="format-select"
+      aria-label=${this.label??"Colour format"}
+      aria-readonly=${t.readOnly?"true":m}
+      ?disabled=${t.disabled}
+      @change=${this.handleChange}
+    >
+      ${this.authoredOptions??this.formats.map(e=>d`<option value=${e} ?selected=${e===t.format}>
+              ${k[e]}
+            </option>`)}
+    </select>`:d`<select part="format-select"></select>`}};n([u({type:Array})],i.prototype,"formats",2),i=n([v("skdx-color-picker-format-select","color-picker","format-select")],i);export{i as SkdxColorPickerFormatSelect};

package/dist/color-picker/ColorPickerHueSlider.cjs

@@ -0,0 +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});

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

@@ -0,0 +1,61 @@
+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.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-hue-slider class="my-hue">
+ *   <skdx-color-picker-hue-slider-thumb></skdx-color-picker-hue-slider-thumb>
+ * </skdx-color-picker-hue-slider>
+ * ```
+ */
+export declare class SkdxColorPickerHueSlider extends SkdxColorPickerChannelSlider {
+    protected readonly channel = "hue";
+    protected readonly max = 360;
+    protected readonly defaultLabel = "Hue";
+    /**
+     * 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
+     * key.
+     */
+    protected get limit(): number;
+    protected get channelValue(): number;
+    protected valueTextFor(value: number): string;
+    protected writeChannel(h: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-hue-slider': SkdxColorPickerHueSlider;
+    }
+}

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

@@ -0,0 +1,61 @@
+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.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-hue-slider class="my-hue">
+ *   <skdx-color-picker-hue-slider-thumb></skdx-color-picker-hue-slider-thumb>
+ * </skdx-color-picker-hue-slider>
+ * ```
+ */
+export declare class SkdxColorPickerHueSlider extends SkdxColorPickerChannelSlider {
+    protected readonly channel = "hue";
+    protected readonly max = 360;
+    protected readonly defaultLabel = "Hue";
+    /**
+     * 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
+     * key.
+     */
+    protected get limit(): number;
+    protected get channelValue(): number;
+    protected valueTextFor(value: number): string;
+    protected writeChannel(h: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-hue-slider': SkdxColorPickerHueSlider;
+    }
+}

package/dist/color-picker/ColorPickerHueSlider.js

@@ -0,0 +1 @@
+var s=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var c=(d,t,e,r)=>{for(var o=r>1?void 0:r?a(t,e):t,i=d.length-1,l;i>=0;i--)(l=d[i])&&(o=(r?l(t,e,o):l(o))||o);return r&&o&&s(t,e,o),o};import{customElement as u}from"../internal/define.js";import{SkdxColorPickerChannelSlider as h}from"./channel-slider.js";var n=class extends h{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 r=this.root;return r?`${Math.round(e)} degrees, ${r.describe(r.color)}`:`${Math.round(e)} degrees`}writeChannel(e){let r=this.root;r&&r.setColor({...r.color,h:e})}};n=c([u("skdx-color-picker-hue-slider","color-picker","hue-slider")],n);export{n as SkdxColorPickerHueSlider};

package/dist/color-picker/ColorPickerHueSliderThumb.cjs

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

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

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

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

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

package/dist/color-picker/ColorPickerHueSliderThumb.js

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

package/dist/color-picker/ColorPickerInput.cjs

@@ -0,0 +1,14 @@
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var x=(e,r)=>{for(var t in r)d(e,t,{get:r[t],enumerable:!0})},y=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of v(r))!g.call(e,l)&&l!==t&&d(e,l,{get:()=>r[l],enumerable:!(o=m(r,l))||o.enumerable});return e};var C=e=>y(d({},"__esModule",{value:!0}),e),c=(e,r,t,o)=>{for(var l=o>1?void 0:o?m(r,t):r,n=e.length-1,s;n>=0;n--)(s=e[n])&&(l=(o?s(r,t,l):s(l))||l);return o&&l&&d(r,t,l),l};var w={};x(w,{SkdxColorPickerInput:()=>a});module.exports=C(w);var u=require("lit"),h=require("lit/decorators.js"),p=require("../internal/aria-label.cjs"),i=require("../internal/color.cjs"),b=require("../internal/define.cjs"),f=require("../internal/styles.cjs");var k={red:{max:255,label:"Red",read:e=>(0,i.hsbToRgb)(e).r,write:(e,r)=>(0,i.rgbToHsb)({...(0,i.hsbToRgb)(e),r})},green:{max:255,label:"Green",read:e=>(0,i.hsbToRgb)(e).g,write:(e,r)=>(0,i.rgbToHsb)({...(0,i.hsbToRgb)(e),g:r})},blue:{max:255,label:"Blue",read:e=>(0,i.hsbToRgb)(e).b,write:(e,r)=>(0,i.rgbToHsb)({...(0,i.hsbToRgb)(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=>(0,i.hsbToHsl)(e).l,write:(e,r)=>(0,i.hslToHsb)({...(0,i.hsbToHsl)(e),l:r})},alpha:{max:100,label:"Opacity",read:e=>e.a*100,write:(e,r)=>({...e,a:r/100})}},a=class extends u.LitElement{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(),(0,f.installLightDomStyles)(),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=(0,p.takeHostAriaLabel)(this)}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get numeric(){let t=this.channel;return t&&t!=="hex"?k[t]:null}get committed(){let t=this.root;if(!t)return"";let o=this.numeric;return o?String(Math.round(o.read(t.color))):this.channel==="hex"?(0,i.formatColor)(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 o=this.root;if(!o?.interactive)return!1;let l=this.numeric;if(l){let s=Number(t.trim());return t.trim()===""||!Number.isFinite(s)?!1:(o.setColor(l.write(o.color,Math.min(Math.max(s,0),l.max)),{announce:!0}),!0)}let n=(0,i.parseColor)(t);return n?(o.setColor(n,{announce:!0}),!0):!1}render(){let t=this.root;if(!t)return u.html`<input part="input" />`;let o=this.numeric;return u.html`<input
+      part="input"
+      type="text"
+      inputmode=${o?"numeric":"text"}
+      autocomplete="off"
+      spellcheck="false"
+      aria-label=${this.label??(o?o.label:"Colour value")}
+      ?disabled=${t.disabled}
+      ?readonly=${t.readOnly}
+      .value=${this.draft??this.committed}
+      @input=${this.handleInput}
+      @keydown=${this.handleKeydown}
+      @blur=${this.handleBlur}
+    />`}};c([(0,h.property)({type:String,reflect:!0})],a.prototype,"channel",2),c([(0,h.state)()],a.prototype,"draft",2),a=c([(0,b.customElement)("skdx-color-picker-input","color-picker","input")],a);0&&(module.exports={SkdxColorPickerInput});

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

@@ -0,0 +1,86 @@
+import { LitElement } from 'lit';
+/** Which single channel a {@link SkdxColorPickerInput} edits. */
+export type ColorChannel = 'hex' | 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'brightness' | 'lightness' | 'alpha';
+/**
+ * `<skdx-color-picker-input>` — a text field over the colour. With no `channel`
+ * it carries the **whole value in the picker's current format** — the hex box
+ * people expect, which re-spells itself the moment the format changes. With a
+ * `channel` it edits one number: `red`, `hue`, `alpha`, and so on, 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 and
+ * committing per keystroke would repaint the picker to black halfway through
+ * every hex the user types. `Escape` abandons the draft, and an entry that does
+ * not parse reverts rather than clearing the colour.
+ *
+ * A commit **announces the resulting colour** through the shared live region.
+ * An input is not a slider: a screen reader echoes the characters typed, which
+ * says nothing about the colour they produced.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-input aria-label="Hex value"></skdx-color-picker-input>
+ *
+ * <skdx-color-picker-input channel="red"></skdx-color-picker-input>
+ * <skdx-color-picker-input channel="green"></skdx-color-picker-input>
+ * <skdx-color-picker-input channel="blue"></skdx-color-picker-input>
+ * <skdx-color-picker-input channel="alpha"></skdx-color-picker-input>
+ * ```
+ *
+ * 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 `<input>` (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 `<input>` instead is not an option: CSS Display 3
+ * computes it to `none` on form controls.
+ *
+ * @csspart input - The native `<input>` element. **`::part(input)` 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-input > input { … }`.
+ */
+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.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Which single channel this input edits. Omit it and the input carries the
+     * whole colour as one string in the picker's current `format`.
+     * @default undefined — the whole colour, in the current format, which is the
+     * hex box people expect and which re-spells itself when the format changes.
+     */
+    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>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-input': SkdxColorPickerInput;
+    }
+}