@skdx/web-components 0.27.0 → 0.28.0

package/dist/color-picker/ColorPickerHueSlider.js

@@ -1 +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};
+var c=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=(i,o,e,r)=>{for(var t=r>1?void 0:r?a(o,e):o,l=i.length-1,d;l>=0;l--)(d=i[l])&&(t=(r?d(o,e,t):d(t))||t);return r&&t&&c(o,e,t),t};import{property as p}from"lit/decorators.js";import{customElement as h}from"../internal/define.js";import{SkdxColorPickerChannelSlider as u}from"./channel-slider.js";var n=class extends u{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 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})}};s([p({type:String})],n.prototype,"label",2),n=s([h("skdx-color-picker-hue-slider","color-picker","hue-slider")],n);export{n as SkdxColorPickerHueSlider};

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

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

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

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

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

@@ -2,46 +2,23 @@ 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>`.
+ * 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 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.
+ * 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.
  *
  * @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. */
@@ -53,10 +30,9 @@ export declare class SkdxColorPickerInput extends LitElement {
      */
     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.
+     * 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.
+     * @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. */

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

@@ -2,46 +2,23 @@ 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>`.
+ * 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 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.
+ * 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.
  *
  * @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. */
@@ -53,10 +30,9 @@ export declare class SkdxColorPickerInput extends LitElement {
      */
     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.
+     * 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.
+     * @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. */

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

@@ -1,33 +1,16 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-color-picker-swatch>` — one preset colour inside a
- * `<skdx-color-picker-swatch-group>`. 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>`.
+ * 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** through the shared live
- * region. A swatch is a button, not a slider: nothing about pressing it tells a
- * screen-reader user what colour they now have, so this is one of the few
- * controls in the family that speaks for itself.
- *
- * A `value` the parser cannot read renders a **disabled** swatch rather than a
- * button that silently does nothing — a preset list built from user data should
- * fail visibly.
- *
- * It publishes `--skdx-color-picker-swatch-value` (always hex, always a real CSS
- * colour) so the fill is one rule and never a second copy of the value in an
- * inline `background`:
- *
- * ```css
- * skdx-color-picker-swatch::part(swatch) {
- *   background: var(--skdx-color-picker-swatch-value);
- * }
- * skdx-color-picker-swatch[data-state='checked']::part(swatch) {
- *   outline: 2px solid currentColor;
- * }
- * ```
+ * 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.
  *
  * @example
  * ```html
@@ -48,6 +31,11 @@ export declare class SkdxColorPickerSwatch extends LitElement {
      * @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.
+     * @default '' — which is unparseable, so a swatch with no value renders disabled.
+     */
     value: string;
     /**
      * Disables this swatch specifically, in addition to the root's disabled

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

@@ -1,33 +1,16 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-color-picker-swatch>` — one preset colour inside a
- * `<skdx-color-picker-swatch-group>`. 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>`.
+ * 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** through the shared live
- * region. A swatch is a button, not a slider: nothing about pressing it tells a
- * screen-reader user what colour they now have, so this is one of the few
- * controls in the family that speaks for itself.
- *
- * A `value` the parser cannot read renders a **disabled** swatch rather than a
- * button that silently does nothing — a preset list built from user data should
- * fail visibly.
- *
- * It publishes `--skdx-color-picker-swatch-value` (always hex, always a real CSS
- * colour) so the fill is one rule and never a second copy of the value in an
- * inline `background`:
- *
- * ```css
- * skdx-color-picker-swatch::part(swatch) {
- *   background: var(--skdx-color-picker-swatch-value);
- * }
- * skdx-color-picker-swatch[data-state='checked']::part(swatch) {
- *   outline: 2px solid currentColor;
- * }
- * ```
+ * 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.
  *
  * @example
  * ```html
@@ -48,6 +31,11 @@ export declare class SkdxColorPickerSwatch extends LitElement {
      * @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.
+     * @default '' — which is unparseable, so a swatch with no value renders disabled.
+     */
     value: string;
     /**
      * Disables this swatch specifically, in addition to the root's disabled

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

@@ -1,44 +1,25 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-color-picker-swatch-group>` — the container for a set of preset
- * `<skdx-color-picker-swatch>`es. Renders `role="radiogroup"` — picking one of N
- * presets is exactly the radio pattern, and "none of them" is a legitimate
- * radiogroup state, which matters because the picker's colour usually is *not*
- * one of the presets. Must be used inside `<skdx-color-picker>`.
- *
- * That brings 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 laid out as a grid and forcing one axis would strand
- * half of it. Under `dir="rtl"` the horizontal arrows swap. The tab stop
- * follows the last focused swatch, then the checked one, then the first — and
- * it re-derives from the DOM on every push, so removing the swatch that held it
- * cannot drop the group out of the tab order.
- *
- * Arrow keys move focus; they do not select. Selection is a click (or `Space` /
- * `Enter` on the focused swatch), which is what the React, Vue, Angular and
- * Svelte ports do too.
- *
- * Give the group an accessible name (`aria-label` or `aria-labelledby`) — an
- * unnamed radiogroup announces a bare count of options.
+ * 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>`.
  *
  * @example
  * ```html
  * <skdx-color-picker-swatch-group aria-label="Preset colours">
  *   <skdx-color-picker-swatch value="#e11d48"></skdx-color-picker-swatch>
  *   <skdx-color-picker-swatch value="#f59e0b"></skdx-color-picker-swatch>
- *   <skdx-color-picker-swatch value="#10b981"></skdx-color-picker-swatch>
  * </skdx-color-picker-swatch-group>
  * ```
  */
 export declare class SkdxColorPickerSwatchGroup extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
-     * Whether arrow-key navigation wraps from the last swatch back to the first.
-     *
-     * Uses the `optOutBoolean` converter rather than Lit's stock `Boolean`, which
-     * reads attribute *presence*: a prop that defaults to `true` can only be
-     * switched off by value, so `loop="false"` is the way to opt out.
-     * @default true — navigation wraps at both ends.
+     * Whether arrow-key navigation wraps from the last swatch to the first.
+     * @default true
      */
     loop: boolean;
     /** @internal The swatch the user last focused, if it is still rendered. */

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

@@ -1,44 +1,25 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-color-picker-swatch-group>` — the container for a set of preset
- * `<skdx-color-picker-swatch>`es. Renders `role="radiogroup"` — picking one of N
- * presets is exactly the radio pattern, and "none of them" is a legitimate
- * radiogroup state, which matters because the picker's colour usually is *not*
- * one of the presets. Must be used inside `<skdx-color-picker>`.
- *
- * That brings 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 laid out as a grid and forcing one axis would strand
- * half of it. Under `dir="rtl"` the horizontal arrows swap. The tab stop
- * follows the last focused swatch, then the checked one, then the first — and
- * it re-derives from the DOM on every push, so removing the swatch that held it
- * cannot drop the group out of the tab order.
- *
- * Arrow keys move focus; they do not select. Selection is a click (or `Space` /
- * `Enter` on the focused swatch), which is what the React, Vue, Angular and
- * Svelte ports do too.
- *
- * Give the group an accessible name (`aria-label` or `aria-labelledby`) — an
- * unnamed radiogroup announces a bare count of options.
+ * 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>`.
  *
  * @example
  * ```html
  * <skdx-color-picker-swatch-group aria-label="Preset colours">
  *   <skdx-color-picker-swatch value="#e11d48"></skdx-color-picker-swatch>
  *   <skdx-color-picker-swatch value="#f59e0b"></skdx-color-picker-swatch>
- *   <skdx-color-picker-swatch value="#10b981"></skdx-color-picker-swatch>
  * </skdx-color-picker-swatch-group>
  * ```
  */
 export declare class SkdxColorPickerSwatchGroup extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
-     * Whether arrow-key navigation wraps from the last swatch back to the first.
-     *
-     * Uses the `optOutBoolean` converter rather than Lit's stock `Boolean`, which
-     * reads attribute *presence*: a prop that defaults to `true` can only be
-     * switched off by value, so `loop="false"` is the way to opt out.
-     * @default true — navigation wraps at both ends.
+     * Whether arrow-key navigation wraps from the last swatch to the first.
+     * @default true
      */
     loop: boolean;
     /** @internal The swatch the user last focused, if it is still rendered. */

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

@@ -2,52 +2,18 @@ import { LitElement } 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;
-/**
- * @internal Rounds a raw channel value onto the `step` grid — with the
- * float-drift correction a fractional step needs, the same one `<skdx-slider>`
- * and `<skdx-angle-slider>` apply — and then into `0…max`. Shared by every
- * channel in the family so the hue track, the alpha track and the 2D area all
- * land on the same grid.
- */
+/** @internal Rounds a raw value onto the step grid with float-drift correction, then into [0, max]. */
 export declare function snapChannel(raw: number, step: number, max: number): number;
-/**
- * @internal `step: 0` means "continuous under the pointer", not "the keyboard
- * does nothing" — the arrows fall back to one unit so every value stays
- * reachable without a pointer, the same fallback `<skdx-angle-slider>` makes.
- */
+/** @internal Keyboard arrow step (defaults to 1 when step is 0 for continuous pointer mode). */
 export declare function arrowStep(step: number): number;
 /**
- * The behaviour shared by `<skdx-color-picker-hue-slider>` and
- * `<skdx-color-picker-alpha-slider>`: a linear `role="slider"` track over
- * `0…max` with pointer drag, click-to-seek and a full keyboard path. The port
- * of React's `useChannelSlider` hook — a base class rather than a hook, because
- * what the two tracks share in this package is host ARIA and listener wiring,
- * which is what a superclass is.
- *
- * The two tracks differ only in their range, their wording and which field of
- * the colour they write, so the alternative is one file copied onto another
- * with three identifiers changed — and a keyboard bug fixed in one of them.
- *
- * **The track has ends; it does not wrap.** Hue is circular, but a linear
- * control reporting `aria-valuemin="0"`/`aria-valuemax="360"` that silently
- * teleported from one end to the other would be lying to assistive tech.
- * `<skdx-angle-slider>` is the wrapping control.
- *
- * Pointer geometry is physical (left-to-right, bottom-to-top), matching
- * `<skdx-slider>`; only the arrow **keys** are mirrored under `dir="rtl"`, via
- * `directionalKey`, because the gradient's direction is the consumer's CSS and
- * this element has no way to know which way they painted it.
- *
+ * 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).
  * @internal
  */
 export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
     static styles: import("lit").CSSResult[];
-    /**
-     * Axis the track runs along, which decides whether pointer position is read
-     * horizontally or vertically and is published as `data-orientation`. Vertical
-     * tracks run bottom-to-top, matching `<skdx-slider>`.
-     * @default 'horizontal' — the track runs left-to-right.
-     */
+    /** Track orientation; vertical tracks run bottom-to-top. @default 'horizontal' */
     orientation: 'horizontal' | 'vertical';
     /** @internal True between pointer down and release/cancel; drives `data-dragging` on this host. */
     protected dragging: boolean;
@@ -58,7 +24,11 @@ export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
     protected abstract readonly channel: 'hue' | 'alpha';
     /** 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. */
+    /**
+     * 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`.
+     */
     protected abstract readonly defaultLabel: string;
     /** This track's current position on its range. */
     protected abstract get channelValue(): number;
@@ -66,12 +36,7 @@ export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
     protected abstract valueTextFor(value: number): string;
     /** Receives an already clamped and step-snapped value, and writes it into the colour. */
     protected abstract writeChannel(value: number): void;
-    /**
-     * Highest value actually reachable, when that is not `max`. Hue needs it: the
-     * axis genuinely spans 360°, but 360 *is* 0, so the track stops at the last
-     * hue on the step grid below it rather than folding round and throwing the
-     * thumb back to the left edge mid-drag.
-     */
+    /** Highest value reachable; differs from max when wrapping would break semantics. */
     protected get limit(): number;
     /** Whether the root has switched this track off entirely — the alpha track when `alpha` is false. */
     protected get hiddenByRoot(): boolean;

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

@@ -2,52 +2,18 @@ import { LitElement } from 'lit';
 import type { SkdxColorPicker } from './ColorPicker.js';
 /** @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;
-/**
- * @internal Rounds a raw channel value onto the `step` grid — with the
- * float-drift correction a fractional step needs, the same one `<skdx-slider>`
- * and `<skdx-angle-slider>` apply — and then into `0…max`. Shared by every
- * channel in the family so the hue track, the alpha track and the 2D area all
- * land on the same grid.
- */
+/** @internal Rounds a raw value onto the step grid with float-drift correction, then into [0, max]. */
 export declare function snapChannel(raw: number, step: number, max: number): number;
-/**
- * @internal `step: 0` means "continuous under the pointer", not "the keyboard
- * does nothing" — the arrows fall back to one unit so every value stays
- * reachable without a pointer, the same fallback `<skdx-angle-slider>` makes.
- */
+/** @internal Keyboard arrow step (defaults to 1 when step is 0 for continuous pointer mode). */
 export declare function arrowStep(step: number): number;
 /**
- * The behaviour shared by `<skdx-color-picker-hue-slider>` and
- * `<skdx-color-picker-alpha-slider>`: a linear `role="slider"` track over
- * `0…max` with pointer drag, click-to-seek and a full keyboard path. The port
- * of React's `useChannelSlider` hook — a base class rather than a hook, because
- * what the two tracks share in this package is host ARIA and listener wiring,
- * which is what a superclass is.
- *
- * The two tracks differ only in their range, their wording and which field of
- * the colour they write, so the alternative is one file copied onto another
- * with three identifiers changed — and a keyboard bug fixed in one of them.
- *
- * **The track has ends; it does not wrap.** Hue is circular, but a linear
- * control reporting `aria-valuemin="0"`/`aria-valuemax="360"` that silently
- * teleported from one end to the other would be lying to assistive tech.
- * `<skdx-angle-slider>` is the wrapping control.
- *
- * Pointer geometry is physical (left-to-right, bottom-to-top), matching
- * `<skdx-slider>`; only the arrow **keys** are mirrored under `dir="rtl"`, via
- * `directionalKey`, because the gradient's direction is the consumer's CSS and
- * this element has no way to know which way they painted it.
- *
+ * 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).
  * @internal
  */
 export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
     static styles: import("lit").CSSResult[];
-    /**
-     * Axis the track runs along, which decides whether pointer position is read
-     * horizontally or vertically and is published as `data-orientation`. Vertical
-     * tracks run bottom-to-top, matching `<skdx-slider>`.
-     * @default 'horizontal' — the track runs left-to-right.
-     */
+    /** Track orientation; vertical tracks run bottom-to-top. @default 'horizontal' */
     orientation: 'horizontal' | 'vertical';
     /** @internal True between pointer down and release/cancel; drives `data-dragging` on this host. */
     protected dragging: boolean;
@@ -58,7 +24,11 @@ export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
     protected abstract readonly channel: 'hue' | 'alpha';
     /** 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. */
+    /**
+     * 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`.
+     */
     protected abstract readonly defaultLabel: string;
     /** This track's current position on its range. */
     protected abstract get channelValue(): number;
@@ -66,12 +36,7 @@ export declare abstract class SkdxColorPickerChannelSlider extends LitElement {
     protected abstract valueTextFor(value: number): string;
     /** Receives an already clamped and step-snapped value, and writes it into the colour. */
     protected abstract writeChannel(value: number): void;
-    /**
-     * Highest value actually reachable, when that is not `max`. Hue needs it: the
-     * axis genuinely spans 360°, but 360 *is* 0, so the track stops at the last
-     * hue on the step grid below it rather than folding round and throwing the
-     * thumb back to the left edge mid-drag.
-     */
+    /** Highest value reachable; differs from max when wrapping would break semantics. */
     protected get limit(): number;
     /** Whether the root has switched this track off entirely — the alpha track when `alpha` is false. */
     protected get hiddenByRoot(): boolean;

package/dist/color-picker/index.cjs

@@ -1 +1 @@
-"use strict";var x=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var n=(o,r)=>{for(var k in r)x(o,k,{get:r[k],enumerable:!0})},T=(o,r,k,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of A(r))!b.call(o,e)&&e!==k&&x(o,e,{get:()=>r[e],enumerable:!(l=u(r,e))||l.enumerable});return o};var w=o=>T(x({},"__esModule",{value:!0}),o);var y={};n(y,{SkdxColorPicker:()=>p.SkdxColorPicker,SkdxColorPickerAlphaSlider:()=>m.SkdxColorPickerAlphaSlider,SkdxColorPickerAlphaSliderThumb:()=>c.SkdxColorPickerAlphaSliderThumb,SkdxColorPickerArea:()=>S.SkdxColorPickerArea,SkdxColorPickerAreaThumb:()=>t.SkdxColorPickerAreaThumb,SkdxColorPickerEyeDropper:()=>h.SkdxColorPickerEyeDropper,SkdxColorPickerFormatSelect:()=>a.SkdxColorPickerFormatSelect,SkdxColorPickerHueSlider:()=>d.SkdxColorPickerHueSlider,SkdxColorPickerHueSliderThumb:()=>i.SkdxColorPickerHueSliderThumb,SkdxColorPickerInput:()=>P.SkdxColorPickerInput,SkdxColorPickerSwatch:()=>f.SkdxColorPickerSwatch,SkdxColorPickerSwatchGroup:()=>C.SkdxColorPickerSwatchGroup});module.exports=w(y);var p=require("./ColorPicker.cjs"),S=require("./ColorPickerArea.cjs"),t=require("./ColorPickerAreaThumb.cjs"),d=require("./ColorPickerHueSlider.cjs"),i=require("./ColorPickerHueSliderThumb.cjs"),m=require("./ColorPickerAlphaSlider.cjs"),c=require("./ColorPickerAlphaSliderThumb.cjs"),C=require("./ColorPickerSwatchGroup.cjs"),f=require("./ColorPickerSwatch.cjs"),P=require("./ColorPickerInput.cjs"),a=require("./ColorPickerFormatSelect.cjs"),h=require("./ColorPickerEyeDropper.cjs");0&&(module.exports={SkdxColorPicker,SkdxColorPickerAlphaSlider,SkdxColorPickerAlphaSliderThumb,SkdxColorPickerArea,SkdxColorPickerAreaThumb,SkdxColorPickerEyeDropper,SkdxColorPickerFormatSelect,SkdxColorPickerHueSlider,SkdxColorPickerHueSliderThumb,SkdxColorPickerInput,SkdxColorPickerSwatch,SkdxColorPickerSwatchGroup});
+"use strict";var c=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var m=(r,o)=>{for(var t in o)c(r,t,{get:o[t],enumerable:!0})},C=(r,o,t,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of k(o))!x.call(r,e)&&e!==t&&c(r,e,{get:()=>o[e],enumerable:!(l=i(o,e))||l.enumerable});return r};var a=r=>C(c({},"__esModule",{value:!0}),r);var f={};m(f,{SkdxColorPicker:()=>p.SkdxColorPicker});module.exports=a(f);var p=require("./ColorPicker.cjs");0&&(module.exports={SkdxColorPicker});

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

@@ -1,12 +1,3 @@
 export { SkdxColorPicker } from './ColorPicker.cjs';
-export { SkdxColorPickerArea } from './ColorPickerArea.cjs';
-export { SkdxColorPickerAreaThumb } from './ColorPickerAreaThumb.cjs';
-export { SkdxColorPickerHueSlider } from './ColorPickerHueSlider.cjs';
-export { SkdxColorPickerHueSliderThumb } from './ColorPickerHueSliderThumb.cjs';
-export { SkdxColorPickerAlphaSlider } from './ColorPickerAlphaSlider.cjs';
-export { SkdxColorPickerAlphaSliderThumb } from './ColorPickerAlphaSliderThumb.cjs';
-export { SkdxColorPickerSwatchGroup } from './ColorPickerSwatchGroup.cjs';
-export { SkdxColorPickerSwatch } from './ColorPickerSwatch.cjs';
-export { SkdxColorPickerInput, type ColorChannel } from './ColorPickerInput.cjs';
-export { SkdxColorPickerFormatSelect } from './ColorPickerFormatSelect.cjs';
-export { SkdxColorPickerEyeDropper } from './ColorPickerEyeDropper.cjs';
+export type { SkdxColorPickerSwatchDescriptor } from './ColorPicker.cjs';
+export type { ColorFormat } from '../internal/color.cjs';