@skdx/vue 0.26.0 → 0.28.0

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

@@ -1,22 +1,14 @@
 /**
- * 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.
+ * Opens the browser's screen colour picker. The one way to sample a colour
+ * outside the widget.
  *
- * **It renders nothing where `window.EyeDropper` does not exist**, which today
- * is Firefox and Safari. The feature detection runs in `onMounted`, never in
- * `setup`: `setup` also runs on the server, where there is no `window` at all,
- * and reading one there would break SSR outright. So the server and the
- * client's first pass agree that the button is absent, and it appears on the
- * client's next tick where it is supported.
+ * **Renders nothing where `window.EyeDropper` does not exist** (Firefox and
+ * Safari today). Feature detection defers to mount to align server and client
+ * hydration.
  *
- * 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.
+ * The sampled colour is opaque, so the picker's **current alpha is kept**;
+ * dismissing (Escape) is a cancellation and changes nothing. The result **is
+ * announced** to screen readers.
  *
  * @example
  * ```vue

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

@@ -19,7 +19,7 @@ import type { ColorFormat } from '../utils/color.cjs';
  */
 type __VLS_Props = {
     /**
-     * Which notations to offer, in the order they should appear.
+     * Which notations to offer, in display order.
      * @default ['hex', 'rgb', 'hsl', 'hsb'] — every format the picker can emit.
      */
     formats?: ColorFormat[];

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

@@ -19,7 +19,7 @@ import type { ColorFormat } from '../utils/color.js';
  */
 type __VLS_Props = {
     /**
-     * Which notations to offer, in the order they should appear.
+     * Which notations to offer, in display order.
      * @default ['hex', 'rgb', 'hsl', 'hsb'] — every format the picker can emit.
      */
     formats?: ColorFormat[];

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

@@ -29,18 +29,24 @@
  */
 type __VLS_Props = {
     /**
-     * Axis the track runs along, which decides whether pointer position is read
-     * from `clientX` or `clientY` and is published as `data-orientation`.
+     * Axis the track runs along: `clientX`/`clientY` for horizontal/vertical.
      * Vertical tracks run bottom-to-top, matching `SkdxSlider`.
      * @default 'horizontal' — the track runs left-to-right.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Accessible name of the slider. A prop, not just `aria-label`, so a
+     * localised UI doesn't need to reach past the component's API to translate it.
+     * @default 'Hue'
+     */
+    label?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -29,18 +29,24 @@
  */
 type __VLS_Props = {
     /**
-     * Axis the track runs along, which decides whether pointer position is read
-     * from `clientX` or `clientY` and is published as `data-orientation`.
+     * Axis the track runs along: `clientX`/`clientY` for horizontal/vertical.
      * Vertical tracks run bottom-to-top, matching `SkdxSlider`.
      * @default 'horizontal' — the track runs left-to-right.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Accessible name of the slider. A prop, not just `aria-label`, so a
+     * localised UI doesn't need to reach past the component's API to translate it.
+     * @default 'Hue'
+     */
+    label?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/color-picker/ColorPickerHueSlider.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const c=require("./context.cjs"),f=require("./useChannelSlider.cjs");let e=require("vue");var p=(0,e.defineComponent)({__name:"ColorPickerHueSlider",props:{orientation:{default:"horizontal"}},setup(i){const s=i,r=c.useColorPickerContext("SkdxColorPickerHueSlider"),l=(0,e.ref)(null),{attrs:d,onKeydown:u,onPointerdown:a}=f.useChannelSlider(l,{channel:"hue",consumerName:"SkdxColorPickerHueSlider",max:360,limit:()=>r.step.value>0?Math.floor(359/r.step.value)*r.step.value:359,value:()=>r.color.value.h,orientation:()=>s.orientation,defaultLabel:"Hue",valueText:o=>`${Math.round(o)} degrees, ${r.describe(r.color.value)}`,onChange:o=>r.setColor({...r.color.value,h:o})});return(o,t)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({class:"skdx-color-picker__hue-slider","data-part":"hue-slider",ref_key:"trackRef",ref:l},(0,e.unref)(d),{style:{"touch-action":"none"},onKeydown:t[0]||(t[0]=(...n)=>(0,e.unref)(u)&&(0,e.unref)(u)(...n)),onPointerdown:t[1]||(t[1]=(...n)=>(0,e.unref)(a)&&(0,e.unref)(a)(...n))}),[(0,e.renderSlot)(o.$slots,"default")],16))}});exports.default=p;
+const c=require("./context.cjs"),f=require("./useChannelSlider.cjs");let e=require("vue");var p=(0,e.defineComponent)({__name:"ColorPickerHueSlider",props:{orientation:{default:"horizontal"},label:{default:"Hue"}},setup(s){const l=s,r=c.useColorPickerContext("SkdxColorPickerHueSlider"),u=(0,e.ref)(null),{attrs:d,onKeydown:a,onPointerdown:i}=f.useChannelSlider(u,{channel:"hue",consumerName:"SkdxColorPickerHueSlider",max:360,limit:()=>r.step.value>0?Math.floor(359/r.step.value)*r.step.value:359,value:()=>r.color.value.h,orientation:()=>l.orientation,defaultLabel:l.label,valueText:o=>`${Math.round(o)} degrees, ${r.describe(r.color.value)}`,onChange:o=>r.setColor({...r.color.value,h:o})});return(o,t)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({class:"skdx-color-picker__hue-slider","data-part":"hue-slider",ref_key:"trackRef",ref:u},(0,e.unref)(d),{style:{"touch-action":"none"},onKeydown:t[0]||(t[0]=(...n)=>(0,e.unref)(a)&&(0,e.unref)(a)(...n)),onPointerdown:t[1]||(t[1]=(...n)=>(0,e.unref)(i)&&(0,e.unref)(i)(...n))}),[(0,e.renderSlot)(o.$slots,"default")],16))}});exports.default=p;

package/dist/color-picker/ColorPickerHueSlider.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useColorPickerContext as e}from"./context.js";import{useChannelSlider as o}from"./useChannelSlider.js";import{createElementBlock as r,defineComponent as a,mergeProps as t,openBlock as l,ref as n,renderSlot as s,unref as i}from"vue";var u=/* @__PURE__ */a({__name:"ColorPickerHueSlider",props:{orientation:{default:"horizontal"}},setup(a){const u=a,d=e("SkdxColorPickerHueSlider"),c=n(null),{attrs:p,onKeydown:f,onPointerdown:m}=o(c,{channel:"hue",consumerName:"SkdxColorPickerHueSlider",max:360,limit:()=>d.step.value>0?Math.floor(359/d.step.value)*d.step.value:359,value:()=>d.color.value.h,orientation:()=>u.orientation,defaultLabel:"Hue",valueText:e=>`${Math.round(e)} degrees, ${d.describe(d.color.value)}`,onChange:e=>d.setColor({...d.color.value,h:e})});return(e,o)=>(l(),r("div",t({class:"skdx-color-picker__hue-slider","data-part":"hue-slider",ref_key:"trackRef",ref:c},i(p),{style:{"touch-action":"none"},onKeydown:o[0]||(o[0]=(...e)=>i(f)&&i(f)(...e)),onPointerdown:o[1]||(o[1]=(...e)=>i(m)&&i(m)(...e))}),[s(e.$slots,"default")],16))}});export{u as default};
+import{useColorPickerContext as e}from"./context.js";import{useChannelSlider as o}from"./useChannelSlider.js";import{createElementBlock as r,defineComponent as l,mergeProps as a,openBlock as t,ref as n,renderSlot as s,unref as u}from"vue";var i=/* @__PURE__ */l({__name:"ColorPickerHueSlider",props:{orientation:{default:"horizontal"},label:{default:"Hue"}},setup(l){const i=l,d=e("SkdxColorPickerHueSlider"),c=n(null),{attrs:f,onKeydown:p,onPointerdown:m}=o(c,{channel:"hue",consumerName:"SkdxColorPickerHueSlider",max:360,limit:()=>d.step.value>0?Math.floor(359/d.step.value)*d.step.value:359,value:()=>d.color.value.h,orientation:()=>i.orientation,defaultLabel:i.label,valueText:e=>`${Math.round(e)} degrees, ${d.describe(d.color.value)}`,onChange:e=>d.setColor({...d.color.value,h:e})});return(e,o)=>(t(),r("div",a({class:"skdx-color-picker__hue-slider","data-part":"hue-slider",ref_key:"trackRef",ref:c},u(f),{style:{"touch-action":"none"},onKeydown:o[0]||(o[0]=(...e)=>u(p)&&u(p)(...e)),onPointerdown:o[1]||(o[1]=(...e)=>u(m)&&u(m)(...e))}),[s(e.$slots,"default")],16))}});export{i as default};

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

@@ -1,23 +1,11 @@
 /**
- * The handle on a `SkdxColorPickerHueSlider`. 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
+ * Purely visual `aria-hidden` thumb on the hue slider. The track carries the
+ * `role="slider"` semantics and tab stop; a second focusable element would
  * announce the same value twice.
  *
- * 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.
+ * Publishes `--skdx-color-picker-hue-position` (percentage) for positioning via
+ * a single CSS rule. Style with the ancestor selector
+ * `[data-channel='hue'][data-dragging] .my-hue-thumb` to react to drag state.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,23 +1,11 @@
 /**
- * The handle on a `SkdxColorPickerHueSlider`. 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
+ * Purely visual `aria-hidden` thumb on the hue slider. The track carries the
+ * `role="slider"` semantics and tab stop; a second focusable element would
  * announce the same value twice.
  *
- * 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.
+ * Publishes `--skdx-color-picker-hue-position` (percentage) for positioning via
+ * a single CSS rule. Style with the ancestor selector
+ * `[data-channel='hue'][data-dragging] .my-hue-thumb` to react to drag state.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -25,9 +25,8 @@ import { type ColorChannel } from './context.cjs';
  */
 type __VLS_Props = {
     /**
-     * Which single channel this input edits. Omit it and the input carries the
-     * whole colour as one string in the picker's current `format` — the hex box
-     * people expect, 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;

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

@@ -25,9 +25,8 @@ import { type ColorChannel } from './context.js';
  */
 type __VLS_Props = {
     /**
-     * Which single channel this input edits. Omit it and the input carries the
-     * whole colour as one string in the picker's current `format` — the hex box
-     * people expect, 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;

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

@@ -24,9 +24,8 @@
  */
 type __VLS_Props = {
     /**
-     * The colour this swatch selects, in any notation `parseColor` understands.
-     * An unparseable value renders a disabled swatch rather than a button that
-     * silently does nothing when clicked.
+     * The colour this swatch selects. Unparseable values render disabled; valid
+     * colours are accepted in any `parseColor` notation.
      */
     value: string;
     /**

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

@@ -24,9 +24,8 @@
  */
 type __VLS_Props = {
     /**
-     * The colour this swatch selects, in any notation `parseColor` understands.
-     * An unparseable value renders a disabled swatch rather than a button that
-     * silently does nothing when clicked.
+     * The colour this swatch selects. Unparseable values render disabled; valid
+     * colours are accepted in any `parseColor` notation.
      */
     value: string;
     /**

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

@@ -22,7 +22,7 @@
  */
 type __VLS_Props = {
     /**
-     * Whether arrow-key navigation wraps from the last swatch back to the first.
+     * Whether arrow-key navigation wraps from the last swatch to the first.
      * @default true — the set is a ring, so no arrow key ever dead-ends.
      */
     loop?: boolean;

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

@@ -22,7 +22,7 @@
  */
 type __VLS_Props = {
     /**
-     * Whether arrow-key navigation wraps from the last swatch back to the first.
+     * Whether arrow-key navigation wraps from the last swatch to the first.
      * @default true — the set is a ring, so no arrow key ever dead-ends.
      */
     loop?: boolean;

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

@@ -1,22 +1,18 @@
 /**
- * Shared state and the small pieces of channel arithmetic every part of the
- * colour picker agrees on. Mirrors the context and helpers in
- * `packages/react/src/color-picker/` (`ColorPicker.tsx`,
- * `ColorPickerSwatchGroup.tsx`, `useChannelSlider.ts`). @internal
+ * Shared state and channel arithmetic every picker part agrees on. @internal
  */
 import { type ComputedRef, type InjectionKey, type Ref } from 'vue';
 import type { ColorFormat, HsbColor } from '../utils/color.cjs';
 /** Which single channel a `SkdxColorPickerInput` edits. */
 export type ColorChannel = 'hex' | 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'brightness' | 'lightness' | 'alpha';
 /**
- * @internal Shared state distributed from `SkdxColorPicker` to its parts.
- * Every field is a `ComputedRef` rather than a snapshot: a part that read a
- * plain value would keep rendering the colour the picker mounted with.
+ * @internal Shared state from SkdxColorPicker to parts, ComputedRef not snapshot
+ * so parts re-render on color changes.
  */
 export interface ColorPickerContext {
     /** The canonical colour. HSB, so the hue survives a trip to black. */
     color: ComputedRef<HsbColor>;
-    /** The colour serialised in the current `format`; what `value`/`value-change` speak. */
+    /** Color in current format; what value/value-change speak. */
     value: ComputedRef<string>;
     format: ComputedRef<ColorFormat>;
     alpha: ComputedRef<boolean>;
@@ -25,21 +21,20 @@ export interface ColorPickerContext {
     readOnly: ComputedRef<boolean>;
     /** `!disabled && !readOnly` — the single condition every part gates input on. */
     interactive: ComputedRef<boolean>;
-    /** Human-readable description of a colour, used both as `aria-valuetext` and as the body of a live announcement. */
+    /** Human-readable color description for aria-valuetext and live announcement. */
     describe: (color: HsbColor) => string;
-    /** Applies a new colour. `announce` is for controls whose own role does not already speak the result. */
+    /** Applies new color; announce for controls whose role doesn't speak it. */
     setColor: (next: HsbColor, options?: {
         announce?: boolean;
     }) => void;
-    /** Emits `value-commit` with the value as it currently stands. Called once at the end of a drag. */
+    /** Emits value-commit with current value at end of drag. */
     commit: () => void;
     setFormat: (format: ColorFormat) => void;
 }
 /** @internal Injection key the root provides so every part shares one colour, one format and one set of policies. */
 export declare const COLOR_PICKER_CONTEXT: InjectionKey<ColorPickerContext>;
 /**
- * @internal The context, or a descriptive throw naming both the part and the
- * root it is missing — the Vue counterpart of React's `createSafeContext`.
+ * @internal Context or descriptive throw naming part and missing root.
  */
 export declare function useColorPickerContext(consumerName: string): ColorPickerContext;
 /** @internal Swatches are found by attribute at interaction time, so a swatch added later needs no registration. */
@@ -53,21 +48,17 @@ export interface ColorPickerSwatchGroupContext {
 export declare const COLOR_PICKER_SWATCH_GROUP_CONTEXT: InjectionKey<ColorPickerSwatchGroupContext>;
 /** @internal The swatch group context, or a descriptive throw. */
 export declare function useSwatchGroupContext(consumerName: string): ColorPickerSwatchGroupContext;
-/** @internal Shift multiplies the arrow step, so a 1-unit picker still has a coarse gear without a second prop. */
+/** @internal Shift multiplies arrow step, so 1-unit picker has coarse gear. */
 export declare const SHIFT_MULTIPLIER = 10;
-/** @internal Two decimals, so a fractional `step` neither leaks float noise into the DOM nor is rounded away. */
+/** @internal Two decimals prevent float noise leaking to DOM or rounding 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 `SkdxSlider` and
- * `SkdxAngleSlider` 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 channel value to step grid with float correction, clamps to 0…max.
+ * Shared by all channels so all land on same grid.
  */
 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 `SkdxAngleSlider` makes.
+ * @internal step: 0 = continuous under pointer, not "keyboard does nothing";
+ * arrows fall back to one unit.
  */
 export declare function arrowStep(step: number): number;

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

@@ -1,22 +1,18 @@
 /**
- * Shared state and the small pieces of channel arithmetic every part of the
- * colour picker agrees on. Mirrors the context and helpers in
- * `packages/react/src/color-picker/` (`ColorPicker.tsx`,
- * `ColorPickerSwatchGroup.tsx`, `useChannelSlider.ts`). @internal
+ * Shared state and channel arithmetic every picker part agrees on. @internal
  */
 import { type ComputedRef, type InjectionKey, type Ref } from 'vue';
 import type { ColorFormat, HsbColor } from '../utils/color.js';
 /** Which single channel a `SkdxColorPickerInput` edits. */
 export type ColorChannel = 'hex' | 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'brightness' | 'lightness' | 'alpha';
 /**
- * @internal Shared state distributed from `SkdxColorPicker` to its parts.
- * Every field is a `ComputedRef` rather than a snapshot: a part that read a
- * plain value would keep rendering the colour the picker mounted with.
+ * @internal Shared state from SkdxColorPicker to parts, ComputedRef not snapshot
+ * so parts re-render on color changes.
  */
 export interface ColorPickerContext {
     /** The canonical colour. HSB, so the hue survives a trip to black. */
     color: ComputedRef<HsbColor>;
-    /** The colour serialised in the current `format`; what `value`/`value-change` speak. */
+    /** Color in current format; what value/value-change speak. */
     value: ComputedRef<string>;
     format: ComputedRef<ColorFormat>;
     alpha: ComputedRef<boolean>;
@@ -25,21 +21,20 @@ export interface ColorPickerContext {
     readOnly: ComputedRef<boolean>;
     /** `!disabled && !readOnly` — the single condition every part gates input on. */
     interactive: ComputedRef<boolean>;
-    /** Human-readable description of a colour, used both as `aria-valuetext` and as the body of a live announcement. */
+    /** Human-readable color description for aria-valuetext and live announcement. */
     describe: (color: HsbColor) => string;
-    /** Applies a new colour. `announce` is for controls whose own role does not already speak the result. */
+    /** Applies new color; announce for controls whose role doesn't speak it. */
     setColor: (next: HsbColor, options?: {
         announce?: boolean;
     }) => void;
-    /** Emits `value-commit` with the value as it currently stands. Called once at the end of a drag. */
+    /** Emits value-commit with current value at end of drag. */
     commit: () => void;
     setFormat: (format: ColorFormat) => void;
 }
 /** @internal Injection key the root provides so every part shares one colour, one format and one set of policies. */
 export declare const COLOR_PICKER_CONTEXT: InjectionKey<ColorPickerContext>;
 /**
- * @internal The context, or a descriptive throw naming both the part and the
- * root it is missing — the Vue counterpart of React's `createSafeContext`.
+ * @internal Context or descriptive throw naming part and missing root.
  */
 export declare function useColorPickerContext(consumerName: string): ColorPickerContext;
 /** @internal Swatches are found by attribute at interaction time, so a swatch added later needs no registration. */
@@ -53,21 +48,17 @@ export interface ColorPickerSwatchGroupContext {
 export declare const COLOR_PICKER_SWATCH_GROUP_CONTEXT: InjectionKey<ColorPickerSwatchGroupContext>;
 /** @internal The swatch group context, or a descriptive throw. */
 export declare function useSwatchGroupContext(consumerName: string): ColorPickerSwatchGroupContext;
-/** @internal Shift multiplies the arrow step, so a 1-unit picker still has a coarse gear without a second prop. */
+/** @internal Shift multiplies arrow step, so 1-unit picker has coarse gear. */
 export declare const SHIFT_MULTIPLIER = 10;
-/** @internal Two decimals, so a fractional `step` neither leaks float noise into the DOM nor is rounded away. */
+/** @internal Two decimals prevent float noise leaking to DOM or rounding 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 `SkdxSlider` and
- * `SkdxAngleSlider` 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 channel value to step grid with float correction, clamps to 0…max.
+ * Shared by all channels so all land on same grid.
  */
 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 `SkdxAngleSlider` makes.
+ * @internal step: 0 = continuous under pointer, not "keyboard does nothing";
+ * arrows fall back to one unit.
  */
 export declare function arrowStep(step: number): number;

package/dist/color-picker/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./ColorPicker.vue.cjs"),e=require("./ColorPickerArea.vue.cjs"),o=require("./ColorPickerAreaThumb.vue.cjs"),i=require("./ColorPickerHueSlider.vue.cjs"),l=require("./ColorPickerHueSliderThumb.vue.cjs"),u=require("./ColorPickerAlphaSlider.vue.cjs"),c=require("./ColorPickerAlphaSliderThumb.vue.cjs"),t=require("./ColorPickerSwatchGroup.vue.cjs"),k=require("./ColorPickerSwatch.vue.cjs"),d=require("./ColorPickerInput.vue.cjs"),a=require("./ColorPickerFormatSelect.vue.cjs"),S=require("./ColorPickerEyeDropper.vue.cjs");exports.SkdxColorPicker=r.default;exports.SkdxColorPickerAlphaSlider=u.default;exports.SkdxColorPickerAlphaSliderThumb=c.default;exports.SkdxColorPickerArea=e.default;exports.SkdxColorPickerAreaThumb=o.default;exports.SkdxColorPickerEyeDropper=S.default;exports.SkdxColorPickerFormatSelect=a.default;exports.SkdxColorPickerHueSlider=i.default;exports.SkdxColorPickerHueSliderThumb=l.default;exports.SkdxColorPickerInput=d.default;exports.SkdxColorPickerSwatch=k.default;exports.SkdxColorPickerSwatchGroup=t.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ColorPicker.vue.cjs");exports.SkdxColorPicker=e.default;

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

@@ -1,13 +1 @@
 export { default as SkdxColorPicker } from './ColorPicker.vue.cjs';
-export { default as SkdxColorPickerArea } from './ColorPickerArea.vue.cjs';
-export { default as SkdxColorPickerAreaThumb } from './ColorPickerAreaThumb.vue.cjs';
-export { default as SkdxColorPickerHueSlider } from './ColorPickerHueSlider.vue.cjs';
-export { default as SkdxColorPickerHueSliderThumb } from './ColorPickerHueSliderThumb.vue.cjs';
-export { default as SkdxColorPickerAlphaSlider } from './ColorPickerAlphaSlider.vue.cjs';
-export { default as SkdxColorPickerAlphaSliderThumb } from './ColorPickerAlphaSliderThumb.vue.cjs';
-export { default as SkdxColorPickerSwatchGroup } from './ColorPickerSwatchGroup.vue.cjs';
-export { default as SkdxColorPickerSwatch } from './ColorPickerSwatch.vue.cjs';
-export { default as SkdxColorPickerInput } from './ColorPickerInput.vue.cjs';
-export { default as SkdxColorPickerFormatSelect } from './ColorPickerFormatSelect.vue.cjs';
-export { default as SkdxColorPickerEyeDropper } from './ColorPickerEyeDropper.vue.cjs';
-export type { ColorChannel } from './context.cjs';

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

@@ -1,13 +1 @@
 export { default as SkdxColorPicker } from './ColorPicker.vue.js';
-export { default as SkdxColorPickerArea } from './ColorPickerArea.vue.js';
-export { default as SkdxColorPickerAreaThumb } from './ColorPickerAreaThumb.vue.js';
-export { default as SkdxColorPickerHueSlider } from './ColorPickerHueSlider.vue.js';
-export { default as SkdxColorPickerHueSliderThumb } from './ColorPickerHueSliderThumb.vue.js';
-export { default as SkdxColorPickerAlphaSlider } from './ColorPickerAlphaSlider.vue.js';
-export { default as SkdxColorPickerAlphaSliderThumb } from './ColorPickerAlphaSliderThumb.vue.js';
-export { default as SkdxColorPickerSwatchGroup } from './ColorPickerSwatchGroup.vue.js';
-export { default as SkdxColorPickerSwatch } from './ColorPickerSwatch.vue.js';
-export { default as SkdxColorPickerInput } from './ColorPickerInput.vue.js';
-export { default as SkdxColorPickerFormatSelect } from './ColorPickerFormatSelect.vue.js';
-export { default as SkdxColorPickerEyeDropper } from './ColorPickerEyeDropper.vue.js';
-export type { ColorChannel } from './context.js';

package/dist/color-picker/index.js

@@ -1 +1 @@
-import r from"./ColorPicker.vue.js";import o from"./ColorPickerArea.vue.js";import e from"./ColorPickerAreaThumb.vue.js";import i from"./ColorPickerHueSlider.vue.js";import l from"./ColorPickerHueSliderThumb.vue.js";import k from"./ColorPickerAlphaSlider.vue.js";import m from"./ColorPickerAlphaSliderThumb.vue.js";import c from"./ColorPickerSwatchGroup.vue.js";import a from"./ColorPickerSwatch.vue.js";import u from"./ColorPickerInput.vue.js";import S from"./ColorPickerFormatSelect.vue.js";import p from"./ColorPickerEyeDropper.vue.js";export{r as SkdxColorPicker,k as SkdxColorPickerAlphaSlider,m as SkdxColorPickerAlphaSliderThumb,o as SkdxColorPickerArea,e as SkdxColorPickerAreaThumb,p as SkdxColorPickerEyeDropper,S as SkdxColorPickerFormatSelect,i as SkdxColorPickerHueSlider,l as SkdxColorPickerHueSliderThumb,u as SkdxColorPickerInput,a as SkdxColorPickerSwatch,c as SkdxColorPickerSwatchGroup};
+import o from"./ColorPicker.vue.js";export{o as SkdxColorPicker};

package/dist/color-picker/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./ColorPickerAlphaSlider.vue.cjs"),e=require("./ColorPickerAlphaSliderThumb.vue.cjs"),o=require("./ColorPickerArea.vue.cjs"),i=require("./ColorPickerAreaThumb.vue.cjs"),l=require("./ColorPickerEyeDropper.vue.cjs"),u=require("./ColorPickerHueSlider.vue.cjs"),c=require("./ColorPickerHueSliderThumb.vue.cjs"),t=require("./ColorPickerInput.vue.cjs"),k=require("./ColorPickerSwatch.vue.cjs"),d=require("./ColorPickerSwatchGroup.vue.cjs"),a=require("./ColorPicker.vue.cjs"),S=require("./ColorPickerFormatSelect.vue.cjs");exports.SkdxColorPicker=a.default;exports.SkdxColorPickerAlphaSlider=r.default;exports.SkdxColorPickerAlphaSliderThumb=e.default;exports.SkdxColorPickerArea=o.default;exports.SkdxColorPickerAreaThumb=i.default;exports.SkdxColorPickerEyeDropper=l.default;exports.SkdxColorPickerFormatSelect=S.default;exports.SkdxColorPickerHueSlider=u.default;exports.SkdxColorPickerHueSliderThumb=c.default;exports.SkdxColorPickerInput=t.default;exports.SkdxColorPickerSwatch=k.default;exports.SkdxColorPickerSwatchGroup=d.default;

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

@@ -0,0 +1,33 @@
+/**
+ * Advanced primitives for `SkdxColorPicker` — the parts the recipe composes.
+ * Use when you need a different structure. ColorPicker here is the barrel
+ * export, derives anatomy when given no children.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxColorPicker, SkdxColorPickerArea, SkdxColorPickerAreaThumb, SkdxColorPickerHueSlider, SkdxColorPickerHueSliderThumb, SkdxColorPickerInput } from '@skdx/vue/primitives/color-picker';
+ * </script>
+ *
+ * <template>
+ *   <SkdxColorPicker default-value="#d94c4c">
+ *     <SkdxColorPickerArea><SkdxColorPickerAreaThumb /></SkdxColorPickerArea>
+ *     <SkdxColorPickerHueSlider><SkdxColorPickerHueSliderThumb /></SkdxColorPickerHueSlider>
+ *     <SkdxColorPickerInput />
+ *   </SkdxColorPicker>
+ * </template>
+ * ```
+ */
+export { default as SkdxColorPicker } from './ColorPicker.vue.cjs';
+export { default as SkdxColorPickerArea } from './ColorPickerArea.vue.cjs';
+export { default as SkdxColorPickerAreaThumb } from './ColorPickerAreaThumb.vue.cjs';
+export { default as SkdxColorPickerHueSlider } from './ColorPickerHueSlider.vue.cjs';
+export { default as SkdxColorPickerHueSliderThumb } from './ColorPickerHueSliderThumb.vue.cjs';
+export { default as SkdxColorPickerAlphaSlider } from './ColorPickerAlphaSlider.vue.cjs';
+export { default as SkdxColorPickerAlphaSliderThumb } from './ColorPickerAlphaSliderThumb.vue.cjs';
+export { default as SkdxColorPickerSwatchGroup } from './ColorPickerSwatchGroup.vue.cjs';
+export { default as SkdxColorPickerSwatch } from './ColorPickerSwatch.vue.cjs';
+export { default as SkdxColorPickerInput } from './ColorPickerInput.vue.cjs';
+export { default as SkdxColorPickerFormatSelect } from './ColorPickerFormatSelect.vue.cjs';
+export { default as SkdxColorPickerEyeDropper } from './ColorPickerEyeDropper.vue.cjs';
+export type { ColorChannel } from './context.cjs';

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

@@ -0,0 +1,33 @@
+/**
+ * Advanced primitives for `SkdxColorPicker` — the parts the recipe composes.
+ * Use when you need a different structure. ColorPicker here is the barrel
+ * export, derives anatomy when given no children.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxColorPicker, SkdxColorPickerArea, SkdxColorPickerAreaThumb, SkdxColorPickerHueSlider, SkdxColorPickerHueSliderThumb, SkdxColorPickerInput } from '@skdx/vue/primitives/color-picker';
+ * </script>
+ *
+ * <template>
+ *   <SkdxColorPicker default-value="#d94c4c">
+ *     <SkdxColorPickerArea><SkdxColorPickerAreaThumb /></SkdxColorPickerArea>
+ *     <SkdxColorPickerHueSlider><SkdxColorPickerHueSliderThumb /></SkdxColorPickerHueSlider>
+ *     <SkdxColorPickerInput />
+ *   </SkdxColorPicker>
+ * </template>
+ * ```
+ */
+export { default as SkdxColorPicker } from './ColorPicker.vue.js';
+export { default as SkdxColorPickerArea } from './ColorPickerArea.vue.js';
+export { default as SkdxColorPickerAreaThumb } from './ColorPickerAreaThumb.vue.js';
+export { default as SkdxColorPickerHueSlider } from './ColorPickerHueSlider.vue.js';
+export { default as SkdxColorPickerHueSliderThumb } from './ColorPickerHueSliderThumb.vue.js';
+export { default as SkdxColorPickerAlphaSlider } from './ColorPickerAlphaSlider.vue.js';
+export { default as SkdxColorPickerAlphaSliderThumb } from './ColorPickerAlphaSliderThumb.vue.js';
+export { default as SkdxColorPickerSwatchGroup } from './ColorPickerSwatchGroup.vue.js';
+export { default as SkdxColorPickerSwatch } from './ColorPickerSwatch.vue.js';
+export { default as SkdxColorPickerInput } from './ColorPickerInput.vue.js';
+export { default as SkdxColorPickerFormatSelect } from './ColorPickerFormatSelect.vue.js';
+export { default as SkdxColorPickerEyeDropper } from './ColorPickerEyeDropper.vue.js';
+export type { ColorChannel } from './context.js';

package/dist/color-picker/primitives.js

@@ -0,0 +1 @@
+import r from"./ColorPickerAlphaSlider.vue.js";import o from"./ColorPickerAlphaSliderThumb.vue.js";import e from"./ColorPickerArea.vue.js";import i from"./ColorPickerAreaThumb.vue.js";import l from"./ColorPickerEyeDropper.vue.js";import k from"./ColorPickerHueSlider.vue.js";import m from"./ColorPickerHueSliderThumb.vue.js";import c from"./ColorPickerInput.vue.js";import a from"./ColorPickerSwatch.vue.js";import u from"./ColorPickerSwatchGroup.vue.js";import S from"./ColorPicker.vue.js";import p from"./ColorPickerFormatSelect.vue.js";export{S as SkdxColorPicker,r as SkdxColorPickerAlphaSlider,o as SkdxColorPickerAlphaSliderThumb,e as SkdxColorPickerArea,i as SkdxColorPickerAreaThumb,l as SkdxColorPickerEyeDropper,p as SkdxColorPickerFormatSelect,k as SkdxColorPickerHueSlider,m as SkdxColorPickerHueSliderThumb,c as SkdxColorPickerInput,a as SkdxColorPickerSwatch,u as SkdxColorPickerSwatchGroup};

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

@@ -1,8 +1,4 @@
-/**
- * The behaviour shared by `SkdxColorPickerHueSlider` and
- * `SkdxColorPickerAlphaSlider`. Mirrors
- * `packages/react/src/color-picker/useChannelSlider.ts`. @internal
- */
+/** @internal Behaviour shared by `SkdxColorPickerHueSlider` and `SkdxColorPickerAlphaSlider`. */
 import { type MaybeRefOrGetter, type Ref } from 'vue';
 /** @internal Options for {@link useChannelSlider}. */
 export interface UseChannelSliderOptions {
@@ -13,10 +9,8 @@ export interface UseChannelSliderOptions {
     /** Top of the range as ARIA reports it; the bottom is always 0. */
     max: number;
     /**
-     * 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 actually reachable, when not `max` — hue needs it so the
+     * track stops before wrapping 360° back to 0° mid-drag.
      * @default options.max
      */
     limit?: MaybeRefOrGetter<number>;
@@ -31,36 +25,11 @@ export interface UseChannelSliderOptions {
     onChange: (value: number) => void;
 }
 /**
- * A linear `role="slider"` track over `0…max` with pointer drag,
- * click-to-seek and a full keyboard path.
- *
- * The two parts that use it 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.
- * `SkdxAngleSlider` is the wrapping control.
- *
- * Pointer geometry is physical (left-to-right, bottom-to-top), matching
- * `SkdxSlider`; only the arrow **keys** are mirrored under `dir="rtl"`, via
- * `directionalKey`.
- *
- * Returns `attrs` (ARIA, `data-*` and `tabindex`, for `v-bind` on the track),
- * the two handlers to bind, and `dragging`. The return type is deliberately
- * *inferred* rather than declared as a `Record`: `v-bind` on a native element
- * is typechecked attribute by attribute, and an index signature widens
- * `aria-orientation` past the literal union Vue's `HTMLAttributes` wants — the
- * same trap `RatingItem.vue` documents.
- *
- * Vue's fallthrough attributes are merged *after* `attrs`, so every one of them
- * stays overridable by the consumer — the precedence React gets from spreading
- * `{...slider.props} {...props}`.
+ * @internal Linear role="slider" track over 0…max with pointer drag, click-to-seek,
+ * keyboard. Track has ends (doesn't wrap). Pointer geometry is physical; only arrows
+ * mirror under dir="rtl". Return type inferred to preserve aria-orientation literal union.
  *
- * @param trackRef Template ref for the track element, whose box the drag is measured against.
- * @internal
+ * @param trackRef Template ref for track element; drag measured against its box.
  */
 export declare function useChannelSlider(trackRef: Ref<HTMLElement | null>, options: UseChannelSliderOptions): {
     attrs: import("vue").ComputedRef<{