@skdx/vue 0.26.0

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

@@ -0,0 +1 @@
+import{useRovingFocus as a,useRovingTabStop as e}from"../utils/useRovingFocus.js";import{COLOR_PICKER_SWATCH_GROUP_CONTEXT as o,SWATCH_SELECTOR as r,useColorPickerContext as l}from"./context.js";import{createElementBlock as t,defineComponent as s,openBlock as d,provide as i,ref as n,renderSlot as u,unref as p}from"vue";var c=["aria-disabled","aria-readonly","data-disabled","data-readonly"],v=/* @__PURE__ */s({__name:"ColorPickerSwatchGroup",props:{loop:{type:Boolean,default:!0}},setup(s){const v=s,f=l("SkdxColorPickerSwatchGroup"),C=n(null),m=n(null);e(C,r,"data-value",m);const _=a({orientation:"both",loop:v.loop,itemSelector:r});return i(o,{activeValue:m,setActiveValue:a=>{m.value=a}}),(a,e)=>(d(),t("div",{class:"skdx-color-picker__swatch-group","data-part":"swatch-group",ref_key:"rootRef",ref:C,role:"radiogroup","aria-disabled":p(f).disabled.value||void 0,"aria-readonly":p(f).readOnly.value||void 0,"data-disabled":p(f).disabled.value?"":void 0,"data-readonly":p(f).readOnly.value?"":void 0,onKeydown:e[0]||(e[0]=(...a)=>p(_)&&p(_)(...a))},[u(a.$slots,"default")],40,c))}});export{v as default};

package/dist/color-picker/context.cjs

@@ -0,0 +1 @@
+const c=require("../utils/clamp.cjs");let e=require("vue");var n=Symbol("skdx-color-picker-context");function C(r){const o=(0,e.inject)(n,null);if(!o)throw new Error(`<${r}> must be used inside <SkdxColorPicker>.`);return o}var i="[data-skdx-color-picker-swatch]",t=Symbol("skdx-color-picker-swatch-group-context");function a(r){const o=(0,e.inject)(t,null);if(!o)throw new Error(`<${r}> must be used inside <SkdxColorPickerSwatchGroup>.`);return o}function l(r){return Math.round(r*100)/100}function s(r,o,u){return c.clamp(o>0?Math.round(Math.round(r/o)*o*1e6)/1e6:r,0,u)}function O(r){return r>0?r:1}exports.COLOR_PICKER_CONTEXT=n;exports.COLOR_PICKER_SWATCH_GROUP_CONTEXT=t;exports.SWATCH_SELECTOR=i;exports.arrowStep=O;exports.round2=l;exports.snapChannel=s;exports.useColorPickerContext=C;exports.useSwatchGroupContext=a;

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

@@ -0,0 +1,73 @@
+/**
+ * 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
+ */
+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.
+ */
+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. */
+    value: ComputedRef<string>;
+    format: ComputedRef<ColorFormat>;
+    alpha: ComputedRef<boolean>;
+    step: ComputedRef<number>;
+    disabled: ComputedRef<boolean>;
+    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. */
+    describe: (color: HsbColor) => string;
+    /** Applies a new colour. `announce` is for controls whose own role does not already speak the result. */
+    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. */
+    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`.
+ */
+export declare function useColorPickerContext(consumerName: string): ColorPickerContext;
+/** @internal Swatches are found by attribute at interaction time, so a swatch added later needs no registration. */
+export declare const SWATCH_SELECTOR = "[data-skdx-color-picker-swatch]";
+/** @internal Which swatch currently holds the group's single tab stop. */
+export interface ColorPickerSwatchGroupContext {
+    activeValue: Ref<string | null>;
+    setActiveValue: (value: string) => void;
+}
+/** @internal Injection key a swatch group provides so its swatches share one roving tab stop. */
+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. */
+export declare const SHIFT_MULTIPLIER = 10;
+/** @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 `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.
+ */
+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.
+ */
+export declare function arrowStep(step: number): number;

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

@@ -0,0 +1,73 @@
+/**
+ * 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
+ */
+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.
+ */
+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. */
+    value: ComputedRef<string>;
+    format: ComputedRef<ColorFormat>;
+    alpha: ComputedRef<boolean>;
+    step: ComputedRef<number>;
+    disabled: ComputedRef<boolean>;
+    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. */
+    describe: (color: HsbColor) => string;
+    /** Applies a new colour. `announce` is for controls whose own role does not already speak the result. */
+    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. */
+    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`.
+ */
+export declare function useColorPickerContext(consumerName: string): ColorPickerContext;
+/** @internal Swatches are found by attribute at interaction time, so a swatch added later needs no registration. */
+export declare const SWATCH_SELECTOR = "[data-skdx-color-picker-swatch]";
+/** @internal Which swatch currently holds the group's single tab stop. */
+export interface ColorPickerSwatchGroupContext {
+    activeValue: Ref<string | null>;
+    setActiveValue: (value: string) => void;
+}
+/** @internal Injection key a swatch group provides so its swatches share one roving tab stop. */
+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. */
+export declare const SHIFT_MULTIPLIER = 10;
+/** @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 `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.
+ */
+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.
+ */
+export declare function arrowStep(step: number): number;

package/dist/color-picker/context.js

@@ -0,0 +1 @@
+import{clamp as r}from"../utils/clamp.js";import{inject as o}from"vue";var t=/* @__PURE__ */Symbol("skdx-color-picker-context");function n(r){const n=o(t,null);if(!n)throw new Error(`<${r}> must be used inside <SkdxColorPicker>.`);return n}var e="[data-skdx-color-picker-swatch]",s=/* @__PURE__ */Symbol("skdx-color-picker-swatch-group-context");function u(r){const t=o(s,null);if(!t)throw new Error(`<${r}> must be used inside <SkdxColorPickerSwatchGroup>.`);return t}function a(r){return Math.round(100*r)/100}function c(o,t,n){return r(t>0?Math.round(Math.round(o/t)*t*1e6)/1e6:o,0,n)}function i(r){return r>0?r:1}export{t as COLOR_PICKER_CONTEXT,s as COLOR_PICKER_SWATCH_GROUP_CONTEXT,e as SWATCH_SELECTOR,i as arrowStep,a as round2,c as snapChannel,n as useColorPickerContext,u as useSwatchGroupContext};

package/dist/color-picker/index.cjs

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

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

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

package/dist/color-picker/useChannelSlider.cjs

@@ -0,0 +1 @@
+const m=require("../utils/direction.cjs"),o=require("./context.cjs"),R=require("./usePointerRatio.cjs");let u=require("vue");function k(w,r){const{channel:x,consumerName:y,max:i,defaultLabel:p,valueText:b,onChange:d}=r,a=o.useColorPickerContext(y),C=m.useDirection(),l=()=>(0,u.toValue)(r.value),s=()=>(0,u.toValue)(r.orientation),c=()=>(0,u.toValue)(r.limit)??i,v=e=>o.snapChannel(e,a.step.value,c()),{onPointerDown:q,dragging:g}=R.usePointerRatio(w,{onRatioChange:e=>{const n=s()==="horizontal"?e.x:1-e.y;d(v(n*i))},onRatioChangeEnd:()=>a.commit()});function P(e){if(!a.interactive.value)return;const n=m.directionalKey(e.key,e.currentTarget,C());if(n==="Home"||n==="End"){e.preventDefault(),d(n==="Home"?0:c());return}const t=o.arrowStep(a.step.value),f=Math.max(i/10,t),h={ArrowRight:t,ArrowUp:t,ArrowLeft:-t,ArrowDown:-t,PageUp:f,PageDown:-f}[n];if(h===void 0)return;e.preventDefault();const A=e.shiftKey&&n.startsWith("Arrow")?10:1;d(v(l()+h*A))}function D(e){a.interactive.value&&q(e)}return{attrs:(0,u.computed)(()=>({role:"slider","aria-label":p,"aria-valuemin":0,"aria-valuemax":i,"aria-valuenow":o.round2(l()),"aria-valuetext":b(l()),"aria-orientation":s(),"aria-disabled":a.disabled.value||void 0,"aria-readonly":a.readOnly.value||void 0,tabindex:a.disabled.value?-1:0,"data-channel":x,"data-orientation":s(),"data-value":o.round2(l()),"data-disabled":a.disabled.value?"":void 0,"data-readonly":a.readOnly.value?"":void 0,"data-dragging":g.value?"":void 0})),onKeydown:P,onPointerdown:D,dragging:g}}exports.useChannelSlider=k;

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

@@ -0,0 +1,87 @@
+/**
+ * The behaviour shared by `SkdxColorPickerHueSlider` and
+ * `SkdxColorPickerAlphaSlider`. Mirrors
+ * `packages/react/src/color-picker/useChannelSlider.ts`. @internal
+ */
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+/** @internal Options for {@link useChannelSlider}. */
+export interface UseChannelSliderOptions {
+    /** Published as `data-channel`. */
+    channel: 'hue' | 'alpha';
+    /** Name of the calling part, for the context error message. */
+    consumerName: string;
+    /** 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.
+     * @default options.max
+     */
+    limit?: MaybeRefOrGetter<number>;
+    /** Current position on that range. A ref or getter, so the track follows the colour. */
+    value: MaybeRefOrGetter<number>;
+    orientation: MaybeRefOrGetter<'horizontal' | 'vertical'>;
+    /** Accessible name used when the consumer supplies none. */
+    defaultLabel: string;
+    /** Builds `aria-valuetext` — the number alone never conveys which colour resulted. */
+    valueText: (value: number) => string;
+    /** Receives an already clamped and step-snapped value. */
+    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}`.
+ *
+ * @param trackRef Template ref for the track element, whose box the drag is measured against.
+ * @internal
+ */
+export declare function useChannelSlider(trackRef: Ref<HTMLElement | null>, options: UseChannelSliderOptions): {
+    attrs: import("vue").ComputedRef<{
+        role: string;
+        'aria-label': string;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        'aria-valuenow': number;
+        'aria-valuetext': string;
+        'aria-orientation': "horizontal" | "vertical";
+        'aria-disabled': true | undefined;
+        'aria-readonly': true | undefined;
+        tabindex: number;
+        'data-channel': "hue" | "alpha";
+        'data-orientation': "horizontal" | "vertical";
+        'data-value': number;
+        'data-disabled': string | undefined;
+        'data-readonly': string | undefined;
+        'data-dragging': string | undefined;
+    }>;
+    onKeydown: (event: KeyboardEvent) => void;
+    onPointerdown: (event: PointerEvent) => void;
+    dragging: Readonly<Ref<boolean, boolean>>;
+};

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

@@ -0,0 +1,87 @@
+/**
+ * The behaviour shared by `SkdxColorPickerHueSlider` and
+ * `SkdxColorPickerAlphaSlider`. Mirrors
+ * `packages/react/src/color-picker/useChannelSlider.ts`. @internal
+ */
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+/** @internal Options for {@link useChannelSlider}. */
+export interface UseChannelSliderOptions {
+    /** Published as `data-channel`. */
+    channel: 'hue' | 'alpha';
+    /** Name of the calling part, for the context error message. */
+    consumerName: string;
+    /** 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.
+     * @default options.max
+     */
+    limit?: MaybeRefOrGetter<number>;
+    /** Current position on that range. A ref or getter, so the track follows the colour. */
+    value: MaybeRefOrGetter<number>;
+    orientation: MaybeRefOrGetter<'horizontal' | 'vertical'>;
+    /** Accessible name used when the consumer supplies none. */
+    defaultLabel: string;
+    /** Builds `aria-valuetext` — the number alone never conveys which colour resulted. */
+    valueText: (value: number) => string;
+    /** Receives an already clamped and step-snapped value. */
+    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}`.
+ *
+ * @param trackRef Template ref for the track element, whose box the drag is measured against.
+ * @internal
+ */
+export declare function useChannelSlider(trackRef: Ref<HTMLElement | null>, options: UseChannelSliderOptions): {
+    attrs: import("vue").ComputedRef<{
+        role: string;
+        'aria-label': string;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        'aria-valuenow': number;
+        'aria-valuetext': string;
+        'aria-orientation': "horizontal" | "vertical";
+        'aria-disabled': true | undefined;
+        'aria-readonly': true | undefined;
+        tabindex: number;
+        'data-channel': "hue" | "alpha";
+        'data-orientation': "horizontal" | "vertical";
+        'data-value': number;
+        'data-disabled': string | undefined;
+        'data-readonly': string | undefined;
+        'data-dragging': string | undefined;
+    }>;
+    onKeydown: (event: KeyboardEvent) => void;
+    onPointerdown: (event: PointerEvent) => void;
+    dragging: Readonly<Ref<boolean, boolean>>;
+};

package/dist/color-picker/useChannelSlider.js

@@ -0,0 +1 @@
+import{directionalKey as a,useDirection as e}from"../utils/direction.js";import{arrowStep as t,round2 as o,snapChannel as n,useColorPickerContext as r}from"./context.js";import{usePointerRatio as i}from"./usePointerRatio.js";import{computed as l,toValue as d}from"vue";function u(u,s){const{channel:v,consumerName:c,max:m,defaultLabel:g,valueText:f,onChange:p}=s,h=r(c),w=e(),x=()=>d(s.value),y=()=>d(s.orientation),b=()=>d(s.limit)??m,C=a=>n(a,h.step.value,b()),{onPointerDown:P,dragging:D}=i(u,{onRatioChange:a=>{const e="horizontal"===y()?a.x:1-a.y;p(C(e*m))},onRatioChangeEnd:()=>h.commit()});return{attrs:l(()=>({role:"slider","aria-label":g,"aria-valuemin":0,"aria-valuemax":m,"aria-valuenow":o(x()),"aria-valuetext":f(x()),"aria-orientation":y(),"aria-disabled":h.disabled.value||void 0,"aria-readonly":h.readOnly.value||void 0,tabindex:h.disabled.value?-1:0,"data-channel":v,"data-orientation":y(),"data-value":o(x()),"data-disabled":h.disabled.value?"":void 0,"data-readonly":h.readOnly.value?"":void 0,"data-dragging":D.value?"":void 0})),onKeydown:function(e){if(!h.interactive.value)return;const o=a(e.key,e.currentTarget,w());if("Home"===o||"End"===o)return e.preventDefault(),void p("Home"===o?0:b());const n=t(h.step.value),r=Math.max(m/10,n),i={ArrowRight:n,ArrowUp:n,ArrowLeft:-n,ArrowDown:-n,PageUp:r,PageDown:-r}[o];if(void 0===i)return;e.preventDefault();const l=e.shiftKey&&o.startsWith("Arrow")?10:1;p(C(x()+i*l))},onPointerdown:function(a){h.interactive.value&&P(a)},dragging:D}}export{u as useChannelSlider};

package/dist/color-picker/usePointerRatio.cjs

@@ -0,0 +1 @@
+const f=require("../utils/clamp.cjs");let m=require("vue");function v(g,l){const s=(0,m.ref)(!1);let i=null;const d=(n,t)=>{const e=t.getBoundingClientRect();return{x:e.width?f.clamp((n.clientX-e.left)/e.width,0,1):0,y:e.height?f.clamp((n.clientY-e.top)/e.height,0,1):0}};function h(n){if(i)return;const t=g.value;if(!t)return;const{pointerId:e}=n;t.setPointerCapture?.(e);let u=d(n,t);s.value=!0,l.onRatioChange(u,n);const p=o=>{if(o.pointerId!==e)return;const a=d(o,t);a.x===u.x&&a.y===u.y||(u=a,l.onRatioChange(a,o))},c=o=>{o.pointerId===e&&(i?.(),s.value=!1,l.onRatioChangeEnd?.(o))},r=t.ownerDocument;r.addEventListener("pointermove",p),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c),i=()=>{r.removeEventListener("pointermove",p),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),i=null}}return(0,m.onUnmounted)(()=>i?.()),{onPointerDown:h,dragging:s}}exports.usePointerRatio=v;

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

@@ -0,0 +1,50 @@
+/**
+ * Pointer-drag-to-position, the linear twin of `utils/usePointerAngle`.
+ * Mirrors `packages/react/src/color-picker/usePointerRatio.ts`. @internal
+ */
+import { type Ref } from 'vue';
+/** Position inside an element's border box, as fractions of its width and height. `{ x: 0, y: 0 }` is the top-left corner. */
+export interface PointerRatio {
+    x: number;
+    y: number;
+}
+/** Options for {@link usePointerRatio}. @internal */
+export interface UsePointerRatioOptions {
+    /** Fires with the position on pointer down and on every subsequent move that changes it, plus the native event. */
+    onRatioChange: (ratio: PointerRatio, event: PointerEvent) => void;
+    /** Fires once when the drag ends — `pointerup` or `pointercancel`. The final position was already reported by `onRatioChange`. */
+    onRatioChangeEnd?: (event: PointerEvent) => void;
+}
+/** Return value of {@link usePointerRatio}. @internal */
+export interface UsePointerRatioResult {
+    /**
+     * Bind on the element whose box defines the coordinate space via
+     * `@pointerdown`. The measurement source is the element in the ref handed to
+     * the composable, and it is re-measured on every move.
+     */
+    onPointerDown: (event: PointerEvent) => void;
+    /** `true` between pointer down and pointer up/cancel. Suitable for a `data-dragging` styling hook. */
+    dragging: Readonly<Ref<boolean>>;
+}
+/**
+ * Turns a pointer position inside an element into normalized `x`/`y` fractions
+ * in `[0, 1]`, for widgets whose input is a *position* rather than a direction
+ * — the colour picker's 2D area and its hue and alpha tracks.
+ *
+ * It exists rather than three copies of `SkdxSlider`'s pointer block because
+ * those three parts each need a genuine drag-end signal (`value-commit` fires
+ * once per drag) and each needs `data-dragging`, and because document-level
+ * listeners keep a drag alive when the pointer leaves the window — which
+ * element-level `pointermove` does not.
+ *
+ * Deliberately knows nothing about value ranges, channels, ARIA, RTL, or
+ * `disabled`/`readOnly`: `x` is always measured left-to-right from the border
+ * box, exactly as `SkdxSlider` measures it, and a part that must ignore pointer
+ * input simply does not call `onPointerDown`.
+ *
+ * Nothing is measured or subscribed during `setup`, so it is safe under SSR.
+ *
+ * @param elementRef Template ref for the element whose border box is the coordinate space.
+ * @internal
+ */
+export declare function usePointerRatio(elementRef: Ref<HTMLElement | null>, options: UsePointerRatioOptions): UsePointerRatioResult;

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

@@ -0,0 +1,50 @@
+/**
+ * Pointer-drag-to-position, the linear twin of `utils/usePointerAngle`.
+ * Mirrors `packages/react/src/color-picker/usePointerRatio.ts`. @internal
+ */
+import { type Ref } from 'vue';
+/** Position inside an element's border box, as fractions of its width and height. `{ x: 0, y: 0 }` is the top-left corner. */
+export interface PointerRatio {
+    x: number;
+    y: number;
+}
+/** Options for {@link usePointerRatio}. @internal */
+export interface UsePointerRatioOptions {
+    /** Fires with the position on pointer down and on every subsequent move that changes it, plus the native event. */
+    onRatioChange: (ratio: PointerRatio, event: PointerEvent) => void;
+    /** Fires once when the drag ends — `pointerup` or `pointercancel`. The final position was already reported by `onRatioChange`. */
+    onRatioChangeEnd?: (event: PointerEvent) => void;
+}
+/** Return value of {@link usePointerRatio}. @internal */
+export interface UsePointerRatioResult {
+    /**
+     * Bind on the element whose box defines the coordinate space via
+     * `@pointerdown`. The measurement source is the element in the ref handed to
+     * the composable, and it is re-measured on every move.
+     */
+    onPointerDown: (event: PointerEvent) => void;
+    /** `true` between pointer down and pointer up/cancel. Suitable for a `data-dragging` styling hook. */
+    dragging: Readonly<Ref<boolean>>;
+}
+/**
+ * Turns a pointer position inside an element into normalized `x`/`y` fractions
+ * in `[0, 1]`, for widgets whose input is a *position* rather than a direction
+ * — the colour picker's 2D area and its hue and alpha tracks.
+ *
+ * It exists rather than three copies of `SkdxSlider`'s pointer block because
+ * those three parts each need a genuine drag-end signal (`value-commit` fires
+ * once per drag) and each needs `data-dragging`, and because document-level
+ * listeners keep a drag alive when the pointer leaves the window — which
+ * element-level `pointermove` does not.
+ *
+ * Deliberately knows nothing about value ranges, channels, ARIA, RTL, or
+ * `disabled`/`readOnly`: `x` is always measured left-to-right from the border
+ * box, exactly as `SkdxSlider` measures it, and a part that must ignore pointer
+ * input simply does not call `onPointerDown`.
+ *
+ * Nothing is measured or subscribed during `setup`, so it is safe under SSR.
+ *
+ * @param elementRef Template ref for the element whose border box is the coordinate space.
+ * @internal
+ */
+export declare function usePointerRatio(elementRef: Ref<HTMLElement | null>, options: UsePointerRatioOptions): UsePointerRatioResult;

package/dist/color-picker/usePointerRatio.js

@@ -0,0 +1 @@
+import{clamp as e}from"../utils/clamp.js";import{onUnmounted as n,ref as t}from"vue";function o(o,r){const i=t(!1);let a=null;const s=(n,t)=>{const o=t.getBoundingClientRect();return{x:o.width?e((n.clientX-o.left)/o.width,0,1):0,y:o.height?e((n.clientY-o.top)/o.height,0,1):0}};return n(()=>a?.()),{onPointerDown:function(e){if(a)return;const n=o.value;if(!n)return;const{pointerId:t}=e;n.setPointerCapture?.(t);let u=s(e,n);i.value=!0,r.onRatioChange(u,e);const c=e=>{if(e.pointerId!==t)return;const o=s(e,n);o.x===u.x&&o.y===u.y||(u=o,r.onRatioChange(o,e))},l=e=>{e.pointerId===t&&(a?.(),i.value=!1,r.onRatioChangeEnd?.(e))},p=n.ownerDocument;p.addEventListener("pointermove",c),p.addEventListener("pointerup",l),p.addEventListener("pointercancel",l),a=()=>{p.removeEventListener("pointermove",c),p.removeEventListener("pointerup",l),p.removeEventListener("pointercancel",l),a=null}},dragging:i}}export{o as usePointerRatio};

package/dist/combobox/Combobox.vue.cjs

@@ -0,0 +1 @@
+const e=require("./Combobox.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;