@skdx/vue 0.27.0 → 0.29.0

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

@@ -1,24 +1,6 @@
 /**
- * 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);
- * }
- * ```
+ * The hue track, a linear `role="slider"` over 0–360° that does not wrap —
+ * reach for `SkdxAngleSlider` for a hue control that does.
  *
  * @example
  * ```vue
@@ -29,18 +11,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`.
-     * Vertical tracks run bottom-to-top, matching `SkdxSlider`.
+     * Axis the track runs along (`clientX`/`clientY` for horizontal/vertical),
+     * with vertical tracks running bottom-to-top to match `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 can translate it through the component's own API.
+     * @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)({ref_key:"trackRef",ref:u,class:"skdx-color-picker__hue-slider","data-part":"hue-slider"},(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({ref_key:"trackRef",ref:c,class:"skdx-color-picker__hue-slider","data-part":"hue-slider"},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,7 @@
 /**
- * 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.
+ * Purely visual `aria-hidden` thumb on the hue slider, since the track
+ * already carries the `role="slider"` semantics and tab stop, publishing
+ * `--skdx-color-picker-hue-position` for positioning.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,23 +1,7 @@
 /**
- * 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.
+ * Purely visual `aria-hidden` thumb on the hue slider, since the track
+ * already carries the `role="slider"` semantics and tab stop, publishing
+ * `--skdx-color-picker-hue-position` for positioning.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,20 +1,9 @@
 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.
+ * A text field over the colour — the whole value in the picker's current
+ * format with no `channel`, or a single number (`red`, `hue`, `alpha`, …)
+ * with one — editing as a local draft committed on `Enter` or blur, with
+ * `Escape` abandoning it and a commit announcing the resulting colour.
  *
  * @example
  * ```vue
@@ -25,14 +14,18 @@ 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;
+    channel?: ColorChannel | undefined;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    channel: ColorChannel;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    /** Moves keyboard focus onto the underlying native channel input. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The underlying native `<input>` element, for focus and measurement. */
+    el: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    channel: ColorChannel | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,20 +1,9 @@
 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.
+ * A text field over the colour — the whole value in the picker's current
+ * format with no `channel`, or a single number (`red`, `hue`, `alpha`, …)
+ * with one — editing as a local draft committed on `Enter` or blur, with
+ * `Escape` abandoning it and a commit announcing the resulting colour.
  *
  * @example
  * ```vue
@@ -25,14 +14,18 @@ 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;
+    channel?: ColorChannel | undefined;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    channel: ColorChannel;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    /** Moves keyboard focus onto the underlying native channel input. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The underlying native `<input>` element, for focus and measurement. */
+    el: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    channel: ColorChannel | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1 +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=_;
+const x=require("../utils/clamp.cjs"),l=require("../utils/color.cjs"),_=require("./context.cjs");let n=require("vue");var k=["inputmode","aria-label","data-channel","data-disabled","data-readonly","disabled","readonly","value"],y=(0,n.defineComponent)({__name:"ColorPickerInput",props:{channel:{default:void 0}},setup(s,{expose:f}){const h={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=s,r=_.useColorPickerContext("SkdxColorPickerInput"),i=(0,n.ref)(null),t=(0,n.ref)(null),u=(0,n.computed)(()=>o.channel&&o.channel!=="hex"?h[o.channel]:null),c=(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 d(e){if(!r.interactive.value)return!1;const a=u.value;if(a){const v=Number(e.trim());return e.trim()===""||!Number.isFinite(v)?!1:(r.setColor(a.write(r.color.value,x.clamp(v,0,a.max)),{announce:!0}),!0)}const b=l.parseColor(e);return b?(r.setColor(b,{announce:!0}),!0):!1}function p(e){t.value=e.target.value}function m(e){e.key==="Enter"?(e.preventDefault(),d(t.value??c.value),t.value=null):e.key==="Escape"&&(t.value=null)}function g(){t.value!==null&&d(t.value),t.value=null}return f({focus:e=>i.value?.focus(e),el:i}),(e,a)=>((0,n.openBlock)(),(0,n.createElementBlock)("input",{ref_key:"elRef",ref:i,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":s.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??c.value,onInput:p,onKeydown:m,onBlur:g},null,40,k))}});exports.default=y;

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

@@ -1 +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};
+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 p}from"vue";var m=["inputmode","aria-label","data-channel","data-disabled","data-readonly","disabled","readonly","value"],b=/* @__PURE__ */d({__name:"ColorPickerInput",props:{channel:{default:void 0}},setup(d,{expose:b}){const h={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})}},f=d,x=o("SkdxColorPickerInput"),k=v(null),y=v(null),g=s(()=>f.channel&&"hex"!==f.channel?h[f.channel]:null),w=s(()=>{const e=g.value;return e?String(Math.round(e.read(x.color.value))):"hex"===f.channel?a(x.color.value,"hex",x.alpha.value):x.value.value});function C(a){if(!x.interactive.value)return!1;const l=g.value;if(l){const r=Number(a.trim());return!(""===a.trim()||!Number.isFinite(r)||(x.setColor(l.write(x.color.value,e(r,0,l.max)),{announce:!0}),0))}const r=t(a);return!!r&&(x.setColor(r,{announce:!0}),!0)}function B(e){y.value=e.target.value}function _(e){"Enter"===e.key?(e.preventDefault(),C(y.value??w.value),y.value=null):"Escape"===e.key&&(y.value=null)}function H(){null!==y.value&&C(y.value),y.value=null}return b({focus:e=>k.value?.focus(e),el:k}),(e,a)=>(c(),i("input",{ref_key:"elRef",ref:k,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":p(x).disabled.value?"":void 0,"data-readonly":p(x).readOnly.value?"":void 0,disabled:p(x).disabled.value,readonly:p(x).readOnly.value,value:y.value??w.value,onInput:B,onKeydown:_,onBlur:H},null,40,m))}});export{b as default};

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

@@ -1,32 +1,13 @@
 /**
- * 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; }
- * ```
+ * One preset colour inside a `SkdxColorPickerSwatchGroup`, a `role="radio"`
+ * `<button>` whose `aria-checked` is true when the picker's current colour
+ * matches this swatch exactly (compared as hex), rendered disabled when
+ * `value` is unparseable.
  */
 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, accepted in any `parseColor` notation,
+     * with unparseable values rendering disabled.
      */
     value: string;
     /**

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

@@ -1,32 +1,13 @@
 /**
- * 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; }
- * ```
+ * One preset colour inside a `SkdxColorPickerSwatchGroup`, a `role="radio"`
+ * `<button>` whose `aria-checked` is true when the picker's current colour
+ * matches this swatch exactly (compared as hex), rendered disabled when
+ * `value` is unparseable.
  */
 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, accepted in any `parseColor` notation,
+     * with unparseable values rendering disabled.
      */
     value: string;
     /**

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

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

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

@@ -1 +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};
+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)),f=o(()=>k.disabled.value||p.disabled||null===b.value),x=o(()=>b.value?a(b.value,"hex",k.alpha.value):p.value),m=o(()=>null!==b.value&&x.value===a(k.color.value,"hex",k.alpha.value));function C(){b.value&&k.setColor(b.value,{announce:!0})}function w(){h.setActiveValue(p.value),m.value||C()}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":x.value,"aria-disabled":f.value||void 0,tabindex:i(h).activeValue.value===d.value?0:-1,"data-value":d.value,"data-state":m.value?"checked":"unchecked","data-disabled":f.value?"":void 0,"data-readonly":i(k).readOnly.value?"":void 0,disabled:f.value,style:r({"--skdx-color-picker-swatch-value":x.value}),onFocus:w,onClick:C},[c(a.$slots,"default")],44,n))}});export{p as default};

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

@@ -1,17 +1,7 @@
 /**
- * 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.
+ * Container for a set of preset `SkdxColorPickerSwatch`es, rendering
+ * `role="radiogroup"` with a single roving tab stop across arrow-key
+ * navigation; give it an accessible name via `aria-label` or `aria-labelledby`.
  *
  * @example
  * ```vue
@@ -22,7 +12,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

@@ -1,17 +1,7 @@
 /**
- * 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.
+ * Container for a set of preset `SkdxColorPickerSwatch`es, rendering
+ * `role="radiogroup"` with a single roving tab stop across arrow-key
+ * navigation; give it an accessible name via `aria-label` or `aria-labelledby`.
  *
  * @example
  * ```vue
@@ -22,7 +12,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_vue_type_script_setup_true_lang.cjs

@@ -1 +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;
+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",{ref_key:"rootRef",ref:l,class:"skdx-color-picker__swatch-group","data-part":"swatch-group",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;

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

@@ -1 +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};
+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",{ref_key:"rootRef",ref:C,class:"skdx-color-picker__swatch-group","data-part":"swatch-group",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.d.cts

@@ -1,22 +1,15 @@
-/**
- * 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.
+ * @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. */
+    /** The canonical colour, stored as 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,22 +18,19 @@ 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. */
 export declare const SWATCH_SELECTOR = "[data-skdx-color-picker-swatch]";
@@ -53,21 +43,11 @@ 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 the step grid with float correction, clamped to 0…max. */
 export declare function snapChannel(raw: number, step: number, max: number): number;
-/**
- * @internal `step: 0` means "continuous under the pointer", not "the keyboard
- * does nothing" — the arrows fall back to one unit so every value stays
- * reachable without a pointer, the same fallback `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,15 @@
-/**
- * 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.
+ * @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. */
+    /** The canonical colour, stored as 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,22 +18,19 @@ 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. */
 export declare const SWATCH_SELECTOR = "[data-skdx-color-picker-swatch]";
@@ -53,21 +43,11 @@ 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 the step grid with float correction, clamped to 0…max. */
 export declare function snapChannel(raw: number, step: number, max: number): number;
-/**
- * @internal `step: 0` means "continuous under the pointer", not "the keyboard
- * does nothing" — the arrows fall back to one unit so every value stays
- * reachable without a pointer, the same fallback `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;