@skdx/react 0.26.0 → 0.28.0

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

@@ -1,25 +1,12 @@
 import * as React from 'react';
 import type { ColorPickerAlphaSliderProps } from './types.cjs';
 /**
- * The opacity track: a linear `role="slider"` over 0–100%, reported and
- * stepped in whole percentage points even though the colour stores alpha as
- * `0–1` — "50%" is what a user reads and types, `0.5` is what CSS wants, and
- * only one of those belongs in an announcement.
- *
- * **Renders nothing when the root has `alpha={false}`.** A picker that cannot
- * express transparency should not show a control that appears to set it; the
- * part is left in the tree so a layout does not have to be conditionally
- * authored twice.
- *
- * Ships no CSS. The checkerboard behind the gradient and the gradient itself
- * are yours, and `--skdx-color-picker-value` gives you the current colour to
- * fade out to:
+ * Opacity track, 0–100% (reports in percent, stores as 0–1 alpha).
+ * Renders nothing when root has `alpha={false}`.
  *
  * ```css
  * .my-alpha {
- *   background:
- *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
- *     var(--my-checkerboard);
+ *   background: linear-gradient(to right, transparent, var(--skdx-color-picker-value)), var(--my-checkerboard);
  * }
  * .my-alpha-thumb {
  *   position: absolute;

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

@@ -1,25 +1,12 @@
 import * as React from 'react';
 import type { ColorPickerAlphaSliderProps } from './types.js';
 /**
- * The opacity track: a linear `role="slider"` over 0–100%, reported and
- * stepped in whole percentage points even though the colour stores alpha as
- * `0–1` — "50%" is what a user reads and types, `0.5` is what CSS wants, and
- * only one of those belongs in an announcement.
- *
- * **Renders nothing when the root has `alpha={false}`.** A picker that cannot
- * express transparency should not show a control that appears to set it; the
- * part is left in the tree so a layout does not have to be conditionally
- * authored twice.
- *
- * Ships no CSS. The checkerboard behind the gradient and the gradient itself
- * are yours, and `--skdx-color-picker-value` gives you the current colour to
- * fade out to:
+ * Opacity track, 0–100% (reports in percent, stores as 0–1 alpha).
+ * Renders nothing when root has `alpha={false}`.
  *
  * ```css
  * .my-alpha {
- *   background:
- *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
- *     var(--my-checkerboard);
+ *   background: linear-gradient(to right, transparent, var(--skdx-color-picker-value)), var(--my-checkerboard);
  * }
  * .my-alpha-thumb {
  *   position: absolute;

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

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { ColorPickerAlphaSliderThumbProps } from './types.cjs';
 /**
- * The handle on a {@link ColorPickerAlphaSlider}. Purely visual: `aria-hidden`
- * and out of the tab order, because the track carries the `role="slider"`
- * semantics and takes the tab stop.
+ * Visual-only alpha slider thumb, `aria-hidden` since track carries slider semantics.
  *
- * It ships **no positioning**. The root publishes
- * `--skdx-color-picker-alpha-position` as a percentage:
+ * Ships no positioning — use `--skdx-color-picker-alpha-position` CSS variable.
  *
  * ```css
  * .my-alpha-thumb {

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

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { ColorPickerAlphaSliderThumbProps } from './types.js';
 /**
- * The handle on a {@link ColorPickerAlphaSlider}. Purely visual: `aria-hidden`
- * and out of the tab order, because the track carries the `role="slider"`
- * semantics and takes the tab stop.
+ * Visual-only alpha slider thumb, `aria-hidden` since track carries slider semantics.
  *
- * It ships **no positioning**. The root publishes
- * `--skdx-color-picker-alpha-position` as a percentage:
+ * Ships no positioning — use `--skdx-color-picker-alpha-position` CSS variable.
  *
  * ```css
  * .my-alpha-thumb {

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

@@ -0,0 +1,11 @@
+/**
+ * Default anatomy for {@link ColorPicker}: 2D area, hue and alpha tracks, optional input, swatches, and eyedropper. `ColorPickerAlphaSlider` auto-gates on the root's `alpha` prop.
+ *
+ * @internal
+ */
+export declare const ColorPickerAnatomy: ({ showInput, showSwatches, showEyeDropper, swatches, }: {
+    showInput?: boolean;
+    showSwatches?: boolean;
+    showEyeDropper?: boolean;
+    swatches?: string[];
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+/**
+ * Default anatomy for {@link ColorPicker}: 2D area, hue and alpha tracks, optional input, swatches, and eyedropper. `ColorPickerAlphaSlider` auto-gates on the root's `alpha` prop.
+ *
+ * @internal
+ */
+export declare const ColorPickerAnatomy: ({ showInput, showSwatches, showEyeDropper, swatches, }: {
+    showInput?: boolean;
+    showSwatches?: boolean;
+    showEyeDropper?: boolean;
+    swatches?: string[];
+}) => import("react").JSX.Element;

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

@@ -1,36 +1,12 @@
 import * as React from 'react';
 import type { ColorPickerAreaProps } from './types.cjs';
 /**
- * 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.
+ * 2D saturation/brightness surface: saturation runs left-to-right,
+ * brightness bottom-to-top at the current hue. Pointer down seeks to color; drag updates until release.
  *
- * It carries **no ARIA of its own and no `role="application"`**. The
- * accessibility lives in `ColorPickerAreaThumb`, which renders one
- * `role="slider"` per axis; a `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. See `ColorPicker.md`.
- *
- * Ships no CSS. The hue backdrop and the black/white gradients on top of it
- * are the consumer's, 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%);
- * }
- * .my-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * ```
+ * No ARIA of its own; accessibility lives in `ColorPickerAreaThumb` (`role="slider"` per axis).
+ * Drag persists across window leaving. Ships no CSS — use `--skdx-color-picker-hue`,
+ * `--skdx-color-picker-saturation`, `--skdx-color-picker-brightness` custom properties.
  *
  * @example
  * ```tsx

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

@@ -1,36 +1,12 @@
 import * as React from 'react';
 import type { ColorPickerAreaProps } from './types.js';
 /**
- * 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.
+ * 2D saturation/brightness surface: saturation runs left-to-right,
+ * brightness bottom-to-top at the current hue. Pointer down seeks to color; drag updates until release.
  *
- * It carries **no ARIA of its own and no `role="application"`**. The
- * accessibility lives in `ColorPickerAreaThumb`, which renders one
- * `role="slider"` per axis; a `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. See `ColorPicker.md`.
- *
- * Ships no CSS. The hue backdrop and the black/white gradients on top of it
- * are the consumer's, 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%);
- * }
- * .my-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * ```
+ * No ARIA of its own; accessibility lives in `ColorPickerAreaThumb` (`role="slider"` per axis).
+ * Drag persists across window leaving. Ships no CSS — use `--skdx-color-picker-hue`,
+ * `--skdx-color-picker-saturation`, `--skdx-color-picker-brightness` custom properties.
  *
  * @example
  * ```tsx

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

@@ -1,32 +1,14 @@
 import * as React from 'react';
 import type { ColorPickerAreaThumbProps } from './types.cjs';
 /**
- * The handle on the {@link ColorPickerArea}, and the area's entire
- * accessibility surface: it renders **two nested `role="slider"` elements**,
- * one for saturation and one for brightness, each with its own accessible name
- * and its own truthful `aria-valuenow`.
+ * The handle on the {@link ColorPickerArea}: two nested `role="slider"`
+ * elements for saturation and brightness, each with truthful `aria-valuenow`.
  *
- * 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.
+ * Two sliders: `role="slider"` requires `aria-valuenow` per number. 2D colour
+ * has no single number, so one slider would lie. Two axes each report truth.
+ * Cost: two tab stops in one visual thumb (standard trade in 2D pickers).
  *
- * The two axes are the focus targets, not the wrapper, so give them size in
- * CSS — typically by filling the thumb:
- *
- * ```css
- * .my-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * .my-area-thumb [role='slider'] {
- *   position: absolute;
- *   inset: 0;
- * }
- * ```
+ * Axes are focus targets; size them in CSS (typically fill the thumb).
  *
  * @example
  * ```tsx

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

@@ -1,32 +1,14 @@
 import * as React from 'react';
 import type { ColorPickerAreaThumbProps } from './types.js';
 /**
- * The handle on the {@link ColorPickerArea}, and the area's entire
- * accessibility surface: it renders **two nested `role="slider"` elements**,
- * one for saturation and one for brightness, each with its own accessible name
- * and its own truthful `aria-valuenow`.
+ * The handle on the {@link ColorPickerArea}: two nested `role="slider"`
+ * elements for saturation and brightness, each with truthful `aria-valuenow`.
  *
- * 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.
+ * Two sliders: `role="slider"` requires `aria-valuenow` per number. 2D colour
+ * has no single number, so one slider would lie. Two axes each report truth.
+ * Cost: two tab stops in one visual thumb (standard trade in 2D pickers).
  *
- * The two axes are the focus targets, not the wrapper, so give them size in
- * CSS — typically by filling the thumb:
- *
- * ```css
- * .my-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * .my-area-thumb [role='slider'] {
- *   position: absolute;
- *   inset: 0;
- * }
- * ```
+ * Axes are focus targets; size them in CSS (typically fill the thumb).
  *
  * @example
  * ```tsx

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

@@ -1,24 +1,9 @@
 import * as React from 'react';
 import type { ColorPickerEyeDropperProps } from './types.cjs';
 /**
- * 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.
- *
- * **It renders `null` where `window.EyeDropper` does not exist**, which today
- * is Firefox and Safari. Feature-detected through `useSyncExternalStore` rather
- * than a mount effect, so the server and the client's first render agree that
- * it is absent and hydration never mismatches; the button appears on the
- * client's second pass, where it is supported.
- *
- * 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**: a button press tells a screen-reader user
- * nothing about the colour it produced.
+ * Opens browser's screen colour picker. Renders `null` where `EyeDropper` is unsupported (Firefox, Safari),
+ * feature-detected through `useSyncExternalStore` so hydration doesn't mismatch.
+ * Sampled colour is opaque; current alpha is preserved. Result is announced to screen readers.
  *
  * @example
  * ```tsx

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

@@ -1,24 +1,9 @@
 import * as React from 'react';
 import type { ColorPickerEyeDropperProps } from './types.js';
 /**
- * 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.
- *
- * **It renders `null` where `window.EyeDropper` does not exist**, which today
- * is Firefox and Safari. Feature-detected through `useSyncExternalStore` rather
- * than a mount effect, so the server and the client's first render agree that
- * it is absent and hydration never mismatches; the button appears on the
- * client's second pass, where it is supported.
- *
- * 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**: a button press tells a screen-reader user
- * nothing about the colour it produced.
+ * Opens browser's screen colour picker. Renders `null` where `EyeDropper` is unsupported (Firefox, Safari),
+ * feature-detected through `useSyncExternalStore` so hydration doesn't mismatch.
+ * Sampled colour is opaque; current alpha is preserved. Result is announced to screen readers.
  *
  * @example
  * ```tsx

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

@@ -1,20 +1,9 @@
 import * as React from 'react';
 import type { ColorPickerFormatSelectProps } from './types.cjs';
 /**
- * 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.
- *
- * It is the one part of the family that is not a `Primitive`, and so takes no
- * `asChild`: `Primitive` has no `select` node, and a slotted `<div>` pretending
- * to be a listbox is exactly the trade this part exists to avoid. Want a styled
- * popup instead? Drive `format` / `onFormatChange` from the `Select` family and
- * leave this part out.
- *
- * Switching format does **not** change the colour, but it does change `value`,
- * so `onValueChange` fires alongside `onFormatChange` with the re-spelled
- * string. A `readOnly` picker refuses the switch for that reason.
+ * Switches notation (`hex`, `rgb`, `hsl`, `hsb`) via native `<select>`.
+ * Format change doesn't alter color but re-spells `value`, firing
+ * `onValueChange` alongside `onFormatChange`.
  *
  * @example
  * ```tsx

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

@@ -1,20 +1,9 @@
 import * as React from 'react';
 import type { ColorPickerFormatSelectProps } from './types.js';
 /**
- * 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.
- *
- * It is the one part of the family that is not a `Primitive`, and so takes no
- * `asChild`: `Primitive` has no `select` node, and a slotted `<div>` pretending
- * to be a listbox is exactly the trade this part exists to avoid. Want a styled
- * popup instead? Drive `format` / `onFormatChange` from the `Select` family and
- * leave this part out.
- *
- * Switching format does **not** change the colour, but it does change `value`,
- * so `onValueChange` fires alongside `onFormatChange` with the re-spelled
- * string. A `readOnly` picker refuses the switch for that reason.
+ * Switches notation (`hex`, `rgb`, `hsl`, `hsb`) via native `<select>`.
+ * Format change doesn't alter color but re-spells `value`, firing
+ * `onValueChange` alongside `onFormatChange`.
  *
  * @example
  * ```tsx

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

@@ -1,26 +1,13 @@
 import * as React from 'react';
 import type { ColorPickerHueSliderProps } from './types.cjs';
 /**
- * The hue track: a linear `role="slider"` over 0–360°, independent of the
- * saturation and brightness the 2D area holds.
- *
- * **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
- * `AngleSlider` when you want a hue control that genuinely wraps.
- *
- * Pointer geometry is physical — left-to-right when horizontal,
- * bottom-to-top when vertical, matching `Slider` — while the arrow **keys**
- * mirror under `dir="rtl"`. The gradient is yours, and so is its direction.
+ * Linear hue slider, 0–360° (not wrapping; use `AngleSlider` for wrapping).
+ * Pointer moves left-to-right when horizontal, bottom-to-top when vertical.
+ * Arrow keys mirror under `dir="rtl"`.
  *
  * ```css
  * .my-hue {
- *   background: linear-gradient(
- *     to right,
- *     #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%
- *   );
+ *   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  * }
  * .my-hue-thumb {
  *   position: absolute;

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

@@ -1,26 +1,13 @@
 import * as React from 'react';
 import type { ColorPickerHueSliderProps } from './types.js';
 /**
- * The hue track: a linear `role="slider"` over 0–360°, independent of the
- * saturation and brightness the 2D area holds.
- *
- * **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
- * `AngleSlider` when you want a hue control that genuinely wraps.
- *
- * Pointer geometry is physical — left-to-right when horizontal,
- * bottom-to-top when vertical, matching `Slider` — while the arrow **keys**
- * mirror under `dir="rtl"`. The gradient is yours, and so is its direction.
+ * Linear hue slider, 0–360° (not wrapping; use `AngleSlider` for wrapping).
+ * Pointer moves left-to-right when horizontal, bottom-to-top when vertical.
+ * Arrow keys mirror under `dir="rtl"`.
  *
  * ```css
  * .my-hue {
- *   background: linear-gradient(
- *     to right,
- *     #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%
- *   );
+ *   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  * }
  * .my-hue-thumb {
  *   position: absolute;

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

@@ -1,25 +1,9 @@
 import * as React from 'react';
 import type { ColorPickerHueSliderThumbProps } from './types.cjs';
 /**
- * The handle on a {@link ColorPickerHueSlider}. Purely visual: `aria-hidden`
- * and out of the tab order, because the track itself carries the
- * `role="slider"` semantics and takes the tab stop — a second focusable
- * element here would announce the same value twice.
+ * Visual-only thumb on hue slider, `aria-hidden` since track carries slider semantics.
  *
- * It ships **no positioning**. The root publishes
- * `--skdx-color-picker-hue-position` as a percentage, so one CSS rule places it
- * and nothing recomputes an offset per frame:
- *
- * ```css
- * .my-hue-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-hue-position);
- * }
- * ```
- *
- * `data-dragging` lives on the **track**, not here — one attribute, and the
- * descendant selector `[data-channel='hue'][data-dragging] .my-hue-thumb` costs
- * nothing to write and nothing to plumb.
+ * Ships no positioning — use `--skdx-color-picker-hue-position` CSS variable. `data-dragging` lives on track, use descendant selector `[data-channel='hue'][data-dragging]`.
  *
  * @example
  * ```tsx

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

@@ -1,25 +1,9 @@
 import * as React from 'react';
 import type { ColorPickerHueSliderThumbProps } from './types.js';
 /**
- * The handle on a {@link ColorPickerHueSlider}. Purely visual: `aria-hidden`
- * and out of the tab order, because the track itself carries the
- * `role="slider"` semantics and takes the tab stop — a second focusable
- * element here would announce the same value twice.
+ * Visual-only thumb on hue slider, `aria-hidden` since track carries slider semantics.
  *
- * It ships **no positioning**. The root publishes
- * `--skdx-color-picker-hue-position` as a percentage, so one CSS rule places it
- * and nothing recomputes an offset per frame:
- *
- * ```css
- * .my-hue-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-hue-position);
- * }
- * ```
- *
- * `data-dragging` lives on the **track**, not here — one attribute, and the
- * descendant selector `[data-channel='hue'][data-dragging] .my-hue-thumb` costs
- * nothing to write and nothing to plumb.
+ * Ships no positioning — use `--skdx-color-picker-hue-position` CSS variable. `data-dragging` lives on track, use descendant selector `[data-channel='hue'][data-dragging]`.
  *
  * @example
  * ```tsx

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

@@ -1,21 +1,13 @@
 import * as React from 'react';
 import type { ColorPickerInputProps } from './types.cjs';
 /**
- * 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 components.
+ * A text field over the colour. No `channel` = whole value in current format
+ * (hex box that re-spells on format change). With `channel` edits one number
+ * (red, hue, alpha, etc.).
  *
- * 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**. An input is not a slider: a
- * screen reader echoes the characters typed, which says nothing about the
- * colour they produced. See `ColorPicker.md` for where that line is drawn.
+ * Draft-based: keystrokes held locally, committed on Enter/blur (`#ab` isn't
+ * a colour). `Escape` abandons; unparseable input reverts. Commits announce
+ * the colour (input echoes keystrokes, not the colour they produce).
  *
  * @example
  * ```tsx

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

@@ -1,21 +1,13 @@
 import * as React from 'react';
 import type { ColorPickerInputProps } from './types.js';
 /**
- * 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 components.
+ * A text field over the colour. No `channel` = whole value in current format
+ * (hex box that re-spells on format change). With `channel` edits one number
+ * (red, hue, alpha, etc.).
  *
- * 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**. An input is not a slider: a
- * screen reader echoes the characters typed, which says nothing about the
- * colour they produced. See `ColorPicker.md` for where that line is drawn.
+ * Draft-based: keystrokes held locally, committed on Enter/blur (`#ab` isn't
+ * a colour). `Escape` abandons; unparseable input reverts. Commits announce
+ * the colour (input echoes keystrokes, not the colour they produce).
  *
  * @example
  * ```tsx

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

@@ -14,19 +14,9 @@ export declare const ColorPickerSwatchGroupProvider: {
     displayName: string;
 }, useColorPickerSwatchGroupContext: (consumerName: string) => ColorPickerSwatchGroupContextValue;
 /**
- * Container for a set of preset {@link ColorPickerSwatch}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.
- *
- * 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. The tab stop follows the checked swatch, or the first one when
- * none is checked.
- *
- * Give the group an accessible name (`aria-label` or `aria-labelledby`) — an
- * unnamed radiogroup announces a bare count of options.
+ * Container for preset {@link ColorPickerSwatch}es, with single tab stop.
+ * Arrow keys navigate, `Home`/`End` jump to ends (all four arrows, since
+ * grid layout). Give it an accessible name with `aria-label` or `aria-labelledby`.
  *
  * @example
  * ```tsx

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

@@ -14,19 +14,9 @@ export declare const ColorPickerSwatchGroupProvider: {
     displayName: string;
 }, useColorPickerSwatchGroupContext: (consumerName: string) => ColorPickerSwatchGroupContextValue;
 /**
- * Container for a set of preset {@link ColorPickerSwatch}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.
- *
- * 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. The tab stop follows the checked swatch, or the first one when
- * none is checked.
- *
- * Give the group an accessible name (`aria-label` or `aria-labelledby`) — an
- * unnamed radiogroup announces a bare count of options.
+ * Container for preset {@link ColorPickerSwatch}es, with single tab stop.
+ * Arrow keys navigate, `Home`/`End` jump to ends (all four arrows, since
+ * grid layout). Give it an accessible name with `aria-label` or `aria-labelledby`.
  *
  * @example
  * ```tsx