@skdx/vue 0.26.0

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

@@ -0,0 +1,40 @@
+import type { ColorFormat } from '../utils/color.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. Want a styled popup instead?
+ * Drive `format` / `@format-change` from the `SkdxSelect` family and leave this
+ * part out.
+ *
+ * Switching format does **not** change the colour, but it does change `value`,
+ * so `value-change` fires alongside `format-change` with the re-spelled string.
+ * A `readOnly` picker refuses the switch for that reason.
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerFormatSelect />
+ * <SkdxColorPickerFormatSelect :formats="['hex', 'rgb']" aria-label="Notation" />
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Which notations to offer, in the order they should appear.
+     * @default ['hex', 'rgb', 'hsl', 'hsb'] — every format the picker can emit.
+     */
+    formats?: ColorFormat[];
+};
+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<{}>, {
+    formats: ColorFormat[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,40 @@
+import type { ColorFormat } from '../utils/color.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. Want a styled popup instead?
+ * Drive `format` / `@format-change` from the `SkdxSelect` family and leave this
+ * part out.
+ *
+ * Switching format does **not** change the colour, but it does change `value`,
+ * so `value-change` fires alongside `format-change` with the re-spelled string.
+ * A `readOnly` picker refuses the switch for that reason.
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerFormatSelect />
+ * <SkdxColorPickerFormatSelect :formats="['hex', 'rgb']" aria-label="Notation" />
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Which notations to offer, in the order they should appear.
+     * @default ['hex', 'rgb', 'hsl', 'hsb'] — every format the picker can emit.
+     */
+    formats?: ColorFormat[];
+};
+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<{}>, {
+    formats: ColorFormat[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/color-picker/ColorPickerFormatSelect.vue.js

@@ -0,0 +1 @@
+import e from"./ColorPickerFormatSelect.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

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

@@ -0,0 +1 @@
+const d=require("./context.cjs");let e=require("vue");var s=["aria-readonly","data-disabled","data-readonly","disabled","value"],c=["value"],i=(0,e.defineComponent)({__name:"ColorPickerFormatSelect",props:{formats:{default:()=>["hex","rgb","hsl","hsb"]}},setup(o){const n={hex:"HEX",rgb:"RGB",hsl:"HSL",hsb:"HSB"},a=d.useColorPickerContext("SkdxColorPickerFormatSelect");function u(r){const t=r.target;a.setFormat(t.value),t.value=a.format.value}return(r,t)=>((0,e.openBlock)(),(0,e.createElementBlock)("select",{class:"skdx-color-picker__format-select","data-part":"format-select","aria-label":"Colour format","aria-readonly":(0,e.unref)(a).readOnly.value||void 0,"data-disabled":(0,e.unref)(a).disabled.value?"":void 0,"data-readonly":(0,e.unref)(a).readOnly.value?"":void 0,disabled:(0,e.unref)(a).disabled.value,value:(0,e.unref)(a).format.value,onChange:u},[(0,e.renderSlot)(r.$slots,"default",{},()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(o.formats,l=>((0,e.openBlock)(),(0,e.createElementBlock)("option",{key:l,value:l},(0,e.toDisplayString)(n[l]),9,c))),128))])],40,s))}});exports.default=i;

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

@@ -0,0 +1 @@
+import{useColorPickerContext as a}from"./context.js";import{Fragment as e,createElementBlock as l,defineComponent as o,openBlock as r,renderList as t,renderSlot as s,toDisplayString as d,unref as n}from"vue";var i=["aria-readonly","data-disabled","data-readonly","disabled","value"],u=["value"],c=/* @__PURE__ */o({__name:"ColorPickerFormatSelect",props:{formats:{default:()=>["hex","rgb","hsl","hsb"]}},setup(o){const c={hex:"HEX",rgb:"RGB",hsl:"HSL",hsb:"HSB"},m=a("SkdxColorPickerFormatSelect");function v(a){const e=a.target;m.setFormat(e.value),e.value=m.format.value}return(a,f)=>(r(),l("select",{class:"skdx-color-picker__format-select","data-part":"format-select","aria-label":"Colour format","aria-readonly":n(m).readOnly.value||void 0,"data-disabled":n(m).disabled.value?"":void 0,"data-readonly":n(m).readOnly.value?"":void 0,disabled:n(m).disabled.value,value:n(m).format.value,onChange:v},[s(a.$slots,"default",{},()=>[(r(!0),l(e,null,t(o.formats,a=>(r(),l("option",{key:a,value:a},d(c[a]),9,u))),128))])],40,i))}});export{c as default};

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

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

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

@@ -0,0 +1,52 @@
+/**
+ * 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 `SkdxAngleSlider`
+ * when you want a hue control that genuinely wraps.
+ *
+ * Pointer geometry is physical — left-to-right when horizontal, bottom-to-top
+ * when vertical, matching `SkdxSlider` — while the arrow **keys** mirror under
+ * `dir="rtl"`. The gradient is yours, and so is its direction.
+ *
+ * ```css
+ * .my-hue-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-hue-position);
+ * }
+ * ```
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerHueSlider class="my-hue">
+ *   <SkdxColorPickerHueSliderThumb class="my-hue-thumb" />
+ * </SkdxColorPickerHueSlider>
+ * ```
+ */
+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`.
+     * Vertical tracks run bottom-to-top, matching `SkdxSlider`.
+     * @default 'horizontal' — the track runs left-to-right.
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
+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<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,52 @@
+/**
+ * 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 `SkdxAngleSlider`
+ * when you want a hue control that genuinely wraps.
+ *
+ * Pointer geometry is physical — left-to-right when horizontal, bottom-to-top
+ * when vertical, matching `SkdxSlider` — while the arrow **keys** mirror under
+ * `dir="rtl"`. The gradient is yours, and so is its direction.
+ *
+ * ```css
+ * .my-hue-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-hue-position);
+ * }
+ * ```
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerHueSlider class="my-hue">
+ *   <SkdxColorPickerHueSliderThumb class="my-hue-thumb" />
+ * </SkdxColorPickerHueSlider>
+ * ```
+ */
+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`.
+     * Vertical tracks run bottom-to-top, matching `SkdxSlider`.
+     * @default 'horizontal' — the track runs left-to-right.
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
+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<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1 @@
+import e from"./ColorPickerHueSlider.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

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

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

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

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

package/dist/color-picker/ColorPickerHueSliderThumb.vue.cjs

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

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

@@ -0,0 +1,34 @@
+/**
+ * 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
+ * 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.
+ */
+type __VLS_Props = {};
+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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,34 @@
+/**
+ * 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
+ * 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.
+ */
+type __VLS_Props = {};
+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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/color-picker/ColorPickerHueSliderThumb.vue.js

@@ -0,0 +1 @@
+import e from"./ColorPickerHueSliderThumb.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

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

@@ -0,0 +1 @@
+const a=require("./context.cjs");let e=require("vue");var u=["data-value","data-disabled","data-readonly"],d=(0,e.defineComponent)({__name:"ColorPickerHueSliderThumb",setup(l){const r=a.useColorPickerContext("SkdxColorPickerHueSliderThumb");return(t,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-color-picker__hue-slider-thumb","data-part":"hue-slider-thumb","aria-hidden":"true","data-channel":"hue","data-value":(0,e.unref)(a.round2)((0,e.unref)(r).color.value.h),"data-disabled":(0,e.unref)(r).disabled.value?"":void 0,"data-readonly":(0,e.unref)(r).readOnly.value?"":void 0},[(0,e.renderSlot)(t.$slots,"default")],8,u))}});exports.default=d;

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

@@ -0,0 +1 @@
+import{round2 as e,useColorPickerContext as a}from"./context.js";import{createElementBlock as d,defineComponent as r,openBlock as o,renderSlot as l,unref as t}from"vue";var u=["data-value","data-disabled","data-readonly"],s=/* @__PURE__ */r({__name:"ColorPickerHueSliderThumb",setup(r){const s=a("SkdxColorPickerHueSliderThumb");return(a,r)=>(o(),d("div",{class:"skdx-color-picker__hue-slider-thumb","data-part":"hue-slider-thumb","aria-hidden":"true","data-channel":"hue","data-value":t(e)(t(s).color.value.h),"data-disabled":t(s).disabled.value?"":void 0,"data-readonly":t(s).readOnly.value?"":void 0},[l(a.$slots,"default")],8,u))}});export{s as default};

package/dist/color-picker/ColorPickerInput.vue.cjs

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

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

@@ -0,0 +1,38 @@
+import { type ColorChannel } from './context.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.
+ *
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerInput aria-label="Hex value" />
+ * <SkdxColorPickerInput channel="red" />
+ * <SkdxColorPickerInput channel="alpha" />
+ * ```
+ */
+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.
+     * @default undefined — the whole colour, in the current format.
+     */
+    channel?: ColorChannel;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    channel: ColorChannel;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,38 @@
+import { type ColorChannel } from './context.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.
+ *
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerInput aria-label="Hex value" />
+ * <SkdxColorPickerInput channel="red" />
+ * <SkdxColorPickerInput channel="alpha" />
+ * ```
+ */
+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.
+     * @default undefined — the whole colour, in the current format.
+     */
+    channel?: ColorChannel;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    channel: ColorChannel;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/color-picker/ColorPickerInput.vue.js

@@ -0,0 +1 @@
+import e from"./ColorPickerInput.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

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

@@ -0,0 +1 @@
+const m=require("../utils/clamp.cjs"),l=require("../utils/color.cjs"),g=require("./context.cjs");let n=require("vue");var x=["inputmode","aria-label","data-channel","data-disabled","data-readonly","disabled","readonly","value"],_=(0,n.defineComponent)({__name:"ColorPickerInput",props:{channel:{default:void 0}},setup(i){const v={red:{max:255,label:"Red",read:e=>l.hsbToRgb(e).r,write:(e,a)=>l.rgbToHsb({...l.hsbToRgb(e),r:a})},green:{max:255,label:"Green",read:e=>l.hsbToRgb(e).g,write:(e,a)=>l.rgbToHsb({...l.hsbToRgb(e),g:a})},blue:{max:255,label:"Blue",read:e=>l.hsbToRgb(e).b,write:(e,a)=>l.rgbToHsb({...l.hsbToRgb(e),b:a})},hue:{max:360,label:"Hue",read:e=>e.h,write:(e,a)=>({...e,h:a})},saturation:{max:100,label:"Saturation",read:e=>e.s,write:(e,a)=>({...e,s:a})},brightness:{max:100,label:"Brightness",read:e=>e.b,write:(e,a)=>({...e,b:a})},lightness:{max:100,label:"Lightness",read:e=>l.hsbToHsl(e).l,write:(e,a)=>l.hslToHsb({...l.hsbToHsl(e),l:a})},alpha:{max:100,label:"Opacity",read:e=>e.a*100,write:(e,a)=>({...e,a:a/100})}},o=i,r=g.useColorPickerContext("SkdxColorPickerInput"),t=(0,n.ref)(null),u=(0,n.computed)(()=>o.channel&&o.channel!=="hex"?v[o.channel]:null),s=(0,n.computed)(()=>{const e=u.value;return e?String(Math.round(e.read(r.color.value))):o.channel==="hex"?l.formatColor(r.color.value,"hex",r.alpha.value):r.value.value});function c(e){if(!r.interactive.value)return!1;const a=u.value;if(a){const b=Number(e.trim());return e.trim()===""||!Number.isFinite(b)?!1:(r.setColor(a.write(r.color.value,m.clamp(b,0,a.max)),{announce:!0}),!0)}const d=l.parseColor(e);return d?(r.setColor(d,{announce:!0}),!0):!1}function h(e){t.value=e.target.value}function p(e){e.key==="Enter"?(e.preventDefault(),c(t.value??s.value),t.value=null):e.key==="Escape"&&(t.value=null)}function f(){t.value!==null&&c(t.value),t.value=null}return(e,a)=>((0,n.openBlock)(),(0,n.createElementBlock)("input",{class:"skdx-color-picker__input","data-part":"input",type:"text",autocomplete:"off",spellcheck:!1,inputmode:u.value?"numeric":"text","aria-label":u.value?u.value.label:"Colour value","data-channel":i.channel??"value","data-disabled":(0,n.unref)(r).disabled.value?"":void 0,"data-readonly":(0,n.unref)(r).readOnly.value?"":void 0,disabled:(0,n.unref)(r).disabled.value,readonly:(0,n.unref)(r).readOnly.value,value:t.value??s.value,onInput:h,onKeydown:p,onBlur:f},null,40,x))}});exports.default=_;

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

@@ -0,0 +1 @@
+import{clamp as e}from"../utils/clamp.js";import{formatColor as a,hsbToHsl as l,hsbToRgb as r,hslToHsb as n,parseColor as t,rgbToHsb as u}from"../utils/color.js";import{useColorPickerContext as o}from"./context.js";import{computed as s,createElementBlock as i,defineComponent as d,openBlock as c,ref as v,unref as m}from"vue";var p=["inputmode","aria-label","data-channel","data-disabled","data-readonly","disabled","readonly","value"],b=/* @__PURE__ */d({__name:"ColorPickerInput",props:{channel:{default:void 0}},setup(d){const b={red:{max:255,label:"Red",read:e=>r(e).r,write:(e,a)=>u({...r(e),r:a})},green:{max:255,label:"Green",read:e=>r(e).g,write:(e,a)=>u({...r(e),g:a})},blue:{max:255,label:"Blue",read:e=>r(e).b,write:(e,a)=>u({...r(e),b:a})},hue:{max:360,label:"Hue",read:e=>e.h,write:(e,a)=>({...e,h:a})},saturation:{max:100,label:"Saturation",read:e=>e.s,write:(e,a)=>({...e,s:a})},brightness:{max:100,label:"Brightness",read:e=>e.b,write:(e,a)=>({...e,b:a})},lightness:{max:100,label:"Lightness",read:e=>l(e).l,write:(e,a)=>n({...l(e),l:a})},alpha:{max:100,label:"Opacity",read:e=>100*e.a,write:(e,a)=>({...e,a:a/100})}},h=d,f=o("SkdxColorPickerInput"),x=v(null),g=s(()=>h.channel&&"hex"!==h.channel?b[h.channel]:null),k=s(()=>{const e=g.value;return e?String(Math.round(e.read(f.color.value))):"hex"===h.channel?a(f.color.value,"hex",f.alpha.value):f.value.value});function y(a){if(!f.interactive.value)return!1;const l=g.value;if(l){const r=Number(a.trim());return!(""===a.trim()||!Number.isFinite(r)||(f.setColor(l.write(f.color.value,e(r,0,l.max)),{announce:!0}),0))}const r=t(a);return!!r&&(f.setColor(r,{announce:!0}),!0)}function w(e){x.value=e.target.value}function C(e){"Enter"===e.key?(e.preventDefault(),y(x.value??k.value),x.value=null):"Escape"===e.key&&(x.value=null)}function B(){null!==x.value&&y(x.value),x.value=null}return(e,a)=>(c(),i("input",{class:"skdx-color-picker__input","data-part":"input",type:"text",autocomplete:"off",spellcheck:!1,inputmode:g.value?"numeric":"text","aria-label":g.value?g.value.label:"Colour value","data-channel":d.channel??"value","data-disabled":m(f).disabled.value?"":void 0,"data-readonly":m(f).readOnly.value?"":void 0,disabled:m(f).disabled.value,readonly:m(f).readOnly.value,value:x.value??k.value,onInput:w,onKeydown:C,onBlur:B},null,40,p))}});export{b as default};

package/dist/color-picker/ColorPickerSwatch.vue.cjs

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

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

@@ -0,0 +1,51 @@
+/**
+ * One preset colour inside a `SkdxColorPickerSwatchGroup`. Renders a
+ * `role="radio"` `<button>` whose `aria-checked` is true when the picker's
+ * current colour matches this swatch exactly — compared as hex, so `#f00`,
+ * `#ff0000` and `rgb(255, 0, 0)` are all recognised as the same preset.
+ *
+ * Clicking it **announces the resulting colour**. A swatch is a button, not a
+ * slider: nothing about pressing it tells a screen-reader user what colour they
+ * now have, so this is one of the few controls in the family that speaks for
+ * itself.
+ *
+ * A `value` that `parseColor` cannot read renders a **disabled** swatch rather
+ * than a button that silently does nothing — a preset list built from user data
+ * should fail visibly.
+ *
+ * It publishes `--skdx-color-picker-swatch-value` (always hex, always a real CSS
+ * colour) so the fill is one rule and never a second copy of the value in an
+ * inline `background`:
+ *
+ * ```css
+ * .my-swatch { background: var(--skdx-color-picker-swatch-value); }
+ * .my-swatch[data-state='checked'] { outline: 2px solid currentColor; }
+ * ```
+ */
+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.
+     */
+    value: string;
+    /**
+     * Excludes this one swatch, leaving the rest of the group interactive.
+     * @default false — the swatch is selectable unless the root or its own value says otherwise.
+     */
+    disabled?: boolean;
+};
+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<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,51 @@
+/**
+ * One preset colour inside a `SkdxColorPickerSwatchGroup`. Renders a
+ * `role="radio"` `<button>` whose `aria-checked` is true when the picker's
+ * current colour matches this swatch exactly — compared as hex, so `#f00`,
+ * `#ff0000` and `rgb(255, 0, 0)` are all recognised as the same preset.
+ *
+ * Clicking it **announces the resulting colour**. A swatch is a button, not a
+ * slider: nothing about pressing it tells a screen-reader user what colour they
+ * now have, so this is one of the few controls in the family that speaks for
+ * itself.
+ *
+ * A `value` that `parseColor` cannot read renders a **disabled** swatch rather
+ * than a button that silently does nothing — a preset list built from user data
+ * should fail visibly.
+ *
+ * It publishes `--skdx-color-picker-swatch-value` (always hex, always a real CSS
+ * colour) so the fill is one rule and never a second copy of the value in an
+ * inline `background`:
+ *
+ * ```css
+ * .my-swatch { background: var(--skdx-color-picker-swatch-value); }
+ * .my-swatch[data-state='checked'] { outline: 2px solid currentColor; }
+ * ```
+ */
+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.
+     */
+    value: string;
+    /**
+     * Excludes this one swatch, leaving the rest of the group interactive.
+     * @default false — the swatch is selectable unless the root or its own value says otherwise.
+     */
+    disabled?: boolean;
+};
+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<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/color-picker/ColorPickerSwatch.vue.js

@@ -0,0 +1 @@
+import e from"./ColorPickerSwatch.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

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

@@ -0,0 +1 @@
+const n=require("../utils/color.cjs"),s=require("./context.cjs");let e=require("vue");var h=["aria-checked","aria-label","aria-disabled","tabindex","data-value","data-state","data-disabled","data-readonly","disabled"],p=(0,e.defineComponent)({__name:"ColorPickerSwatch",props:{value:{},disabled:{type:Boolean,default:!1}},setup(t){const o=t,a=s.useColorPickerContext("SkdxColorPickerSwatch"),u=s.useSwatchGroupContext("SkdxColorPickerSwatch"),l=(0,e.computed)(()=>n.parseColor(o.value)),r=(0,e.computed)(()=>a.disabled.value||o.disabled||l.value===null),d=(0,e.computed)(()=>l.value?n.formatColor(l.value,"hex",a.alpha.value):o.value),c=(0,e.computed)(()=>l.value!==null&&d.value===n.formatColor(a.color.value,"hex",a.alpha.value));(0,e.watchEffect)(()=>{c.value&&u.setActiveValue(o.value)});function v(){l.value&&a.setColor(l.value,{announce:!0})}return(k,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-color-picker__swatch","data-part":"swatch",type:"button",role:"radio","data-skdx-color-picker-swatch":"","aria-checked":c.value,"aria-label":d.value,"aria-disabled":r.value||void 0,tabindex:(0,e.unref)(u).activeValue.value===t.value?0:-1,"data-value":t.value,"data-state":c.value?"checked":"unchecked","data-disabled":r.value?"":void 0,"data-readonly":(0,e.unref)(a).readOnly.value?"":void 0,disabled:r.value,style:(0,e.normalizeStyle)({"--skdx-color-picker-swatch-value":d.value}),onFocus:i[0]||(i[0]=b=>(0,e.unref)(u).setActiveValue(t.value)),onClick:v},[(0,e.renderSlot)(k.$slots,"default")],44,h))}});exports.default=p;

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

@@ -0,0 +1 @@
+import{formatColor as a,parseColor as e}from"../utils/color.js";import{useColorPickerContext as l,useSwatchGroupContext as t}from"./context.js";import{computed as o,createElementBlock as u,defineComponent as d,normalizeStyle as r,openBlock as s,renderSlot as c,unref as i,watchEffect as v}from"vue";var n=["aria-checked","aria-label","aria-disabled","tabindex","data-value","data-state","data-disabled","data-readonly","disabled"],p=/* @__PURE__ */d({__name:"ColorPickerSwatch",props:{value:{},disabled:{type:Boolean,default:!1}},setup(d){const p=d,k=l("SkdxColorPickerSwatch"),h=t("SkdxColorPickerSwatch"),b=o(()=>e(p.value)),x=o(()=>k.disabled.value||p.disabled||null===b.value),f=o(()=>b.value?a(b.value,"hex",k.alpha.value):p.value),m=o(()=>null!==b.value&&f.value===a(k.color.value,"hex",k.alpha.value));function C(){b.value&&k.setColor(b.value,{announce:!0})}return v(()=>{m.value&&h.setActiveValue(p.value)}),(a,e)=>(s(),u("button",{class:"skdx-color-picker__swatch","data-part":"swatch",type:"button",role:"radio","data-skdx-color-picker-swatch":"","aria-checked":m.value,"aria-label":f.value,"aria-disabled":x.value||void 0,tabindex:i(h).activeValue.value===d.value?0:-1,"data-value":d.value,"data-state":m.value?"checked":"unchecked","data-disabled":x.value?"":void 0,"data-readonly":i(k).readOnly.value?"":void 0,disabled:x.value,style:r({"--skdx-color-picker-swatch-value":f.value}),onFocus:e[0]||(e[0]=a=>i(h).setActiveValue(d.value)),onClick:C},[c(a.$slots,"default")],44,n))}});export{p as default};

package/dist/color-picker/ColorPickerSwatchGroup.vue.cjs

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

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

@@ -0,0 +1,43 @@
+/**
+ * Container for a set of preset `SkdxColorPickerSwatch`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.
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerSwatchGroup aria-label="Preset colours">
+ *   <SkdxColorPickerSwatch v-for="preset in PRESETS" :key="preset" :value="preset" />
+ * </SkdxColorPickerSwatchGroup>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Whether arrow-key navigation wraps from the last swatch back to the first.
+     * @default true — the set is a ring, so no arrow key ever dead-ends.
+     */
+    loop?: boolean;
+};
+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<{}>, {
+    loop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,43 @@
+/**
+ * Container for a set of preset `SkdxColorPickerSwatch`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.
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerSwatchGroup aria-label="Preset colours">
+ *   <SkdxColorPickerSwatch v-for="preset in PRESETS" :key="preset" :value="preset" />
+ * </SkdxColorPickerSwatchGroup>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Whether arrow-key navigation wraps from the last swatch back to the first.
+     * @default true — the set is a ring, so no arrow key ever dead-ends.
+     */
+    loop?: boolean;
+};
+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<{}>, {
+    loop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1 @@
+import r from"./ColorPickerSwatchGroup.vue_vue_type_script_setup_true_lang.js";var e=r;export{e as default};

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

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