@skdx/vue 0.28.0 → 0.29.0

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

@@ -1 +1 @@
-import{formatColor as e}from"../utils/color.js";import{useColorPickerContext as o}from"./context.js";import{useChannelSlider as a}from"./useChannelSlider.js";import{createCommentVNode as r,createElementBlock as l,defineComponent as t,mergeProps as n,openBlock as s,ref as i,renderSlot as d,unref as u}from"vue";var c=/* @__PURE__ */t({__name:"ColorPickerAlphaSlider",props:{orientation:{default:"horizontal"},label:{default:"Opacity"}},setup(t){const c=t,p=o("SkdxColorPickerAlphaSlider"),m=i(null),{attrs:f,onKeydown:h,onPointerdown:k}=a(m,{channel:"alpha",consumerName:"SkdxColorPickerAlphaSlider",max:100,value:()=>100*p.color.value.a,orientation:()=>c.orientation,defaultLabel:c.label,valueText:o=>`${Math.round(o)}% opaque, ${e(p.color.value,"hex",!1)}`,onChange:e=>p.setColor({...p.color.value,a:e/100})});return(e,o)=>u(p).alpha.value?(s(),l("div",n({key:0,class:"skdx-color-picker__alpha-slider","data-part":"alpha-slider",ref_key:"trackRef",ref:m},u(f),{style:{"touch-action":"none"},onKeydown:o[0]||(o[0]=(...e)=>u(h)&&u(h)(...e)),onPointerdown:o[1]||(o[1]=(...e)=>u(k)&&u(k)(...e))}),[d(e.$slots,"default")],16)):r("",!0)}});export{c as default};
+import{formatColor as e}from"../utils/color.js";import{useColorPickerContext as o}from"./context.js";import{useChannelSlider as a}from"./useChannelSlider.js";import{createCommentVNode as r,createElementBlock as l,defineComponent as t,mergeProps as n,openBlock as s,ref as i,renderSlot as d,unref as u}from"vue";var c=/* @__PURE__ */t({__name:"ColorPickerAlphaSlider",props:{orientation:{default:"horizontal"},label:{default:"Opacity"}},setup(t){const c=t,p=o("SkdxColorPickerAlphaSlider"),m=i(null),{attrs:f,onKeydown:h,onPointerdown:k}=a(m,{channel:"alpha",consumerName:"SkdxColorPickerAlphaSlider",max:100,value:()=>100*p.color.value.a,orientation:()=>c.orientation,defaultLabel:c.label,valueText:o=>`${Math.round(o)}% opaque, ${e(p.color.value,"hex",!1)}`,onChange:e=>p.setColor({...p.color.value,a:e/100})});return(e,o)=>u(p).alpha.value?(s(),l("div",n({key:0,ref_key:"trackRef",ref:m,class:"skdx-color-picker__alpha-slider","data-part":"alpha-slider"},u(f),{style:{"touch-action":"none"},onKeydown:o[0]||(o[0]=(...e)=>u(h)&&u(h)(...e)),onPointerdown:o[1]||(o[1]=(...e)=>u(k)&&u(k)(...e))}),[d(e.$slots,"default")],16)):r("",!0)}});export{c as default};

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

@@ -1,11 +1,7 @@
 /**
- * Purely visual `aria-hidden` thumb on the alpha slider. The track carries the
- * `role="slider"` semantics and tab stop; a second focusable element would
- * announce the same value twice.
- *
- * Publishes `--skdx-color-picker-alpha-position` (percentage) for positioning via
- * a single CSS rule. `data-value` reports opacity in percent (not the `0–1` alpha
- * the colour stores). Style drag state with `[data-channel='alpha'][data-dragging]`.
+ * Purely visual `aria-hidden` thumb on the alpha slider, since the track
+ * already carries the `role="slider"` semantics and tab stop, publishing
+ * `--skdx-color-picker-alpha-position` and a percent `data-value` for positioning.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,11 +1,7 @@
 /**
- * Purely visual `aria-hidden` thumb on the alpha slider. The track carries the
- * `role="slider"` semantics and tab stop; a second focusable element would
- * announce the same value twice.
- *
- * Publishes `--skdx-color-picker-alpha-position` (percentage) for positioning via
- * a single CSS rule. `data-value` reports opacity in percent (not the `0–1` alpha
- * the colour stores). Style drag state with `[data-channel='alpha'][data-dragging]`.
+ * Purely visual `aria-hidden` thumb on the alpha slider, since the track
+ * already carries the `role="slider"` semantics and tab stop, publishing
+ * `--skdx-color-picker-alpha-position` and a percent `data-value` for positioning.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,20 +1,20 @@
 /**
- * Anatomy when default slot empty: 2D area, hue/alpha tracks, optional swatches/input/eyedropper.
- * React port's `ColorPickerAnatomy.tsx` must stay synchronized.
+ * Anatomy rendered when the default slot is empty: 2D area, hue/alpha tracks,
+ * optional input/swatches/eyedropper.
  * @internal
  */
 type __VLS_Props = {
-    alpha?: boolean;
-    showInput?: boolean;
-    showSwatches?: boolean;
-    showEyeDropper?: boolean;
-    swatches?: string[];
+    alpha?: boolean | undefined;
+    showInput?: boolean | undefined;
+    showSwatches?: boolean | undefined;
+    showEyeDropper?: boolean | undefined;
+    swatches?: string[] | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    alpha: boolean;
-    showInput: boolean;
-    showSwatches: boolean;
-    showEyeDropper: boolean;
-    swatches: string[];
+    alpha: boolean | undefined;
+    showInput: boolean | undefined;
+    showSwatches: boolean | undefined;
+    showEyeDropper: boolean | undefined;
+    swatches: string[] | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,20 +1,20 @@
 /**
- * Anatomy when default slot empty: 2D area, hue/alpha tracks, optional swatches/input/eyedropper.
- * React port's `ColorPickerAnatomy.tsx` must stay synchronized.
+ * Anatomy rendered when the default slot is empty: 2D area, hue/alpha tracks,
+ * optional input/swatches/eyedropper.
  * @internal
  */
 type __VLS_Props = {
-    alpha?: boolean;
-    showInput?: boolean;
-    showSwatches?: boolean;
-    showEyeDropper?: boolean;
-    swatches?: string[];
+    alpha?: boolean | undefined;
+    showInput?: boolean | undefined;
+    showSwatches?: boolean | undefined;
+    showEyeDropper?: boolean | undefined;
+    swatches?: string[] | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    alpha: boolean;
-    showInput: boolean;
-    showSwatches: boolean;
-    showEyeDropper: boolean;
-    swatches: string[];
+    alpha: boolean | undefined;
+    showInput: boolean | undefined;
+    showSwatches: boolean | undefined;
+    showEyeDropper: boolean | undefined;
+    swatches: string[] | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1 +1 @@
-const o=require("./ColorPickerAlphaSlider.vue.cjs"),l=require("./ColorPickerAlphaSliderThumb.vue.cjs"),u=require("./ColorPickerArea.vue.cjs"),a=require("./ColorPickerAreaThumb.vue.cjs"),c=require("./ColorPickerEyeDropper.vue.cjs"),n=require("./ColorPickerHueSlider.vue.cjs"),i=require("./ColorPickerHueSliderThumb.vue.cjs"),d=require("./ColorPickerInput.vue.cjs"),k=require("./ColorPickerSwatch.vue.cjs"),h=require("./ColorPickerSwatchGroup.vue.cjs");let e=require("vue");var s=(0,e.defineComponent)({__name:"ColorPickerAnatomy",props:{alpha:{type:Boolean,default:!0},showInput:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},showEyeDropper:{type:Boolean,default:!0},swatches:{default:()=>[]}},setup(r){return(f,p)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(u.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(a.default)]),_:1}),(0,e.createVNode)(n.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(i.default)]),_:1}),r.alpha?((0,e.openBlock)(),(0,e.createBlock)(o.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(l.default)]),_:1})):(0,e.createCommentVNode)("",!0),r.showSwatches&&r.swatches.length>0?((0,e.openBlock)(),(0,e.createBlock)(h.default,{key:1,"aria-label":"Preset colours"},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.swatches,t=>((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:t,value:t},null,8,["value"]))),128))]),_:1})):(0,e.createCommentVNode)("",!0),r.showInput?((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:2})):(0,e.createCommentVNode)("",!0),r.showEyeDropper?((0,e.openBlock)(),(0,e.createBlock)(c.default,{key:3})):(0,e.createCommentVNode)("",!0)],64))}});exports.default=s;
+const o=require("./ColorPickerAlphaSlider.vue.cjs"),l=require("./ColorPickerAlphaSliderThumb.vue.cjs"),u=require("./ColorPickerArea.vue.cjs"),a=require("./ColorPickerAreaThumb.vue.cjs"),c=require("./ColorPickerEyeDropper.vue.cjs"),n=require("./ColorPickerHueSlider.vue.cjs"),i=require("./ColorPickerHueSliderThumb.vue.cjs"),d=require("./ColorPickerInput.vue.cjs"),k=require("./ColorPickerSwatch.vue.cjs"),h=require("./ColorPickerSwatchGroup.vue.cjs");let e=require("vue");var s=(0,e.defineComponent)({__name:"ColorPickerAnatomy",props:{alpha:{type:Boolean,default:!0},showInput:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},showEyeDropper:{type:Boolean,default:!0},swatches:{default:()=>[]}},setup(r){return(f,p)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(u.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(a.default)]),_:1}),(0,e.createVNode)(n.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(i.default)]),_:1}),r.alpha?((0,e.openBlock)(),(0,e.createBlock)(o.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(l.default)]),_:1})):(0,e.createCommentVNode)("",!0),r.showInput?((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:1})):(0,e.createCommentVNode)("",!0),r.showSwatches&&r.swatches?.length?((0,e.openBlock)(),(0,e.createBlock)(h.default,{key:2,"aria-label":"Preset colours"},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.swatches,t=>((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:t,value:t},null,8,["value"]))),128))]),_:1})):(0,e.createCommentVNode)("",!0),r.showEyeDropper?((0,e.openBlock)(),(0,e.createBlock)(c.default,{key:3})):(0,e.createCommentVNode)("",!0)],64))}});exports.default=s;

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

@@ -1 +1 @@
-import e from"./ColorPickerAlphaSlider.vue.js";import o from"./ColorPickerAlphaSliderThumb.vue.js";import r from"./ColorPickerArea.vue.js";import l from"./ColorPickerAreaThumb.vue.js";import a from"./ColorPickerEyeDropper.vue.js";import t from"./ColorPickerHueSlider.vue.js";import s from"./ColorPickerHueSliderThumb.vue.js";import u from"./ColorPickerInput.vue.js";import p from"./ColorPickerSwatch.vue.js";import m from"./ColorPickerSwatchGroup.vue.js";import{Fragment as i,createBlock as c,createCommentVNode as n,createElementBlock as f,createVNode as h,defineComponent as k,openBlock as d,renderList as v,withCtx as w}from"vue";var C=/* @__PURE__ */k({__name:"ColorPickerAnatomy",props:{alpha:{type:Boolean,default:!0},showInput:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},showEyeDropper:{type:Boolean,default:!0},swatches:{default:()=>[]}},setup:k=>(C,y)=>(d(),f(i,null,[h(r,null,{default:w(()=>[h(l)]),_:1}),h(t,null,{default:w(()=>[h(s)]),_:1}),k.alpha?(d(),c(e,{key:0},{default:w(()=>[h(o)]),_:1})):n("",!0),k.showSwatches&&k.swatches.length>0?(d(),c(m,{key:1,"aria-label":"Preset colours"},{default:w(()=>[(d(!0),f(i,null,v(k.swatches,e=>(d(),c(p,{key:e,value:e},null,8,["value"]))),128))]),_:1})):n("",!0),k.showInput?(d(),c(u,{key:2})):n("",!0),k.showEyeDropper?(d(),c(a,{key:3})):n("",!0)],64))});export{C as default};
+import e from"./ColorPickerAlphaSlider.vue.js";import o from"./ColorPickerAlphaSliderThumb.vue.js";import r from"./ColorPickerArea.vue.js";import l from"./ColorPickerAreaThumb.vue.js";import a from"./ColorPickerEyeDropper.vue.js";import t from"./ColorPickerHueSlider.vue.js";import s from"./ColorPickerHueSliderThumb.vue.js";import u from"./ColorPickerInput.vue.js";import p from"./ColorPickerSwatch.vue.js";import m from"./ColorPickerSwatchGroup.vue.js";import{Fragment as i,createBlock as c,createCommentVNode as n,createElementBlock as f,createVNode as h,defineComponent as k,openBlock as d,renderList as v,withCtx as w}from"vue";var C=/* @__PURE__ */k({__name:"ColorPickerAnatomy",props:{alpha:{type:Boolean,default:!0},showInput:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},showEyeDropper:{type:Boolean,default:!0},swatches:{default:()=>[]}},setup:k=>(C,y)=>(d(),f(i,null,[h(r,null,{default:w(()=>[h(l)]),_:1}),h(t,null,{default:w(()=>[h(s)]),_:1}),k.alpha?(d(),c(e,{key:0},{default:w(()=>[h(o)]),_:1})):n("",!0),k.showInput?(d(),c(u,{key:1})):n("",!0),k.showSwatches&&k.swatches?.length?(d(),c(m,{key:2,"aria-label":"Preset colours"},{default:w(()=>[(d(!0),f(i,null,v(k.swatches,e=>(d(),c(p,{key:e,value:e},null,8,["value"]))),128))]),_:1})):n("",!0),k.showEyeDropper?(d(),c(a,{key:3})):n("",!0)],64))});export{C as default};

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

@@ -1,28 +1,7 @@
 /**
- * The 2D saturation/brightness surface: **saturation runs left-to-right,
- * brightness bottom-to-top**, at the current hue. Dragging commits changes
- * on release; dismissed drags still commit rather than reverting.
- *
- * Carries **no ARIA of its own and no `role="application"`** — accessibility
- * lives in the thumb, which renders one `role="slider"` per axis; a
- * `role="application"` here would remove screen reader navigation.
- *
- * Publish thumb position via `--skdx-color-picker-saturation` and
- * `--skdx-color-picker-brightness` (percentages), and hue via
- * `--skdx-color-picker-hue`:
- *
- * ```css
- * .my-area {
- *   background:
- *     linear-gradient(to top, #000, transparent),
- *     linear-gradient(to right, #fff, transparent),
- *     hsl(var(--skdx-color-picker-hue) 100% 50%);
- * }
- * .my-area-thumb {
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * ```
+ * The 2D saturation/brightness surface at the current hue — saturation
+ * left-to-right, brightness bottom-to-top — carrying no ARIA of its own since
+ * accessibility lives in the thumb, and committing a drag's final value on release.
  *
  * @example
  * ```vue

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

@@ -1,28 +1,7 @@
 /**
- * The 2D saturation/brightness surface: **saturation runs left-to-right,
- * brightness bottom-to-top**, at the current hue. Dragging commits changes
- * on release; dismissed drags still commit rather than reverting.
- *
- * Carries **no ARIA of its own and no `role="application"`** — accessibility
- * lives in the thumb, which renders one `role="slider"` per axis; a
- * `role="application"` here would remove screen reader navigation.
- *
- * Publish thumb position via `--skdx-color-picker-saturation` and
- * `--skdx-color-picker-brightness` (percentages), and hue via
- * `--skdx-color-picker-hue`:
- *
- * ```css
- * .my-area {
- *   background:
- *     linear-gradient(to top, #000, transparent),
- *     linear-gradient(to right, #fff, transparent),
- *     hsl(var(--skdx-color-picker-hue) 100% 50%);
- * }
- * .my-area-thumb {
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * ```
+ * The 2D saturation/brightness surface at the current hue — saturation
+ * left-to-right, brightness bottom-to-top — carrying no ARIA of its own since
+ * accessibility lives in the thumb, and committing a drag's final value on release.
  *
  * @example
  * ```vue

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

@@ -1 +1 @@
-const o=require("./context.cjs"),u=require("./usePointerRatio.cjs");let a=require("vue");var s=["data-disabled","data-readonly","data-dragging"],c=(0,a.defineComponent)({__name:"ColorPickerArea",setup(_){const e=o.useColorPickerContext("SkdxColorPickerArea"),n=(0,a.ref)(null),{onPointerDown:i,dragging:l}=u.usePointerRatio(n,{onRatioChange:({x:r,y:t})=>e.setColor({...e.color.value,s:o.snapChannel(r*100,e.step.value,100),b:o.snapChannel((1-t)*100,e.step.value,100)}),onRatioChangeEnd:()=>e.commit()});function d(r){e.interactive.value&&i(r)}return(r,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-color-picker__area","data-part":"area",ref_key:"areaRef",ref:n,"data-disabled":(0,a.unref)(e).disabled.value?"":void 0,"data-readonly":(0,a.unref)(e).readOnly.value?"":void 0,"data-dragging":(0,a.unref)(l)?"":void 0,style:{"touch-action":"none"},onPointerdown:d},[(0,a.renderSlot)(r.$slots,"default")],40,s))}});exports.default=c;
+const o=require("./context.cjs"),u=require("./usePointerRatio.cjs");let a=require("vue");var s=["data-disabled","data-readonly","data-dragging"],c=(0,a.defineComponent)({__name:"ColorPickerArea",setup(_){const e=o.useColorPickerContext("SkdxColorPickerArea"),n=(0,a.ref)(null),{onPointerDown:i,dragging:l}=u.usePointerRatio(n,{onRatioChange:({x:r,y:t})=>e.setColor({...e.color.value,s:o.snapChannel(r*100,e.step.value,100),b:o.snapChannel((1-t)*100,e.step.value,100)}),onRatioChangeEnd:()=>e.commit()});function d(r){e.interactive.value&&i(r)}return(r,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{ref_key:"areaRef",ref:n,class:"skdx-color-picker__area","data-part":"area","data-disabled":(0,a.unref)(e).disabled.value?"":void 0,"data-readonly":(0,a.unref)(e).readOnly.value?"":void 0,"data-dragging":(0,a.unref)(l)?"":void 0,style:{"touch-action":"none"},onPointerdown:d},[(0,a.renderSlot)(r.$slots,"default")],40,s))}});exports.default=c;

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

@@ -1 +1 @@
-import{snapChannel as a,useColorPickerContext as e}from"./context.js";import{usePointerRatio as o}from"./usePointerRatio.js";import{createElementBlock as r,defineComponent as t,openBlock as n,ref as d,renderSlot as i,unref as s}from"vue";var l=["data-disabled","data-readonly","data-dragging"],u=/* @__PURE__ */t({__name:"ColorPickerArea",setup(t){const u=e("SkdxColorPickerArea"),c=d(null),{onPointerDown:v,dragging:f}=o(c,{onRatioChange:({x:e,y:o})=>u.setColor({...u.color.value,s:a(100*e,u.step.value,100),b:a(100*(1-o),u.step.value,100)}),onRatioChangeEnd:()=>u.commit()});function p(a){u.interactive.value&&v(a)}return(a,e)=>(n(),r("div",{class:"skdx-color-picker__area","data-part":"area",ref_key:"areaRef",ref:c,"data-disabled":s(u).disabled.value?"":void 0,"data-readonly":s(u).readOnly.value?"":void 0,"data-dragging":s(f)?"":void 0,style:{"touch-action":"none"},onPointerdown:p},[i(a.$slots,"default")],40,l))}});export{u as default};
+import{snapChannel as a,useColorPickerContext as e}from"./context.js";import{usePointerRatio as o}from"./usePointerRatio.js";import{createElementBlock as r,defineComponent as t,openBlock as n,ref as d,renderSlot as i,unref as s}from"vue";var l=["data-disabled","data-readonly","data-dragging"],u=/* @__PURE__ */t({__name:"ColorPickerArea",setup(t){const u=e("SkdxColorPickerArea"),c=d(null),{onPointerDown:v,dragging:f}=o(c,{onRatioChange:({x:e,y:o})=>u.setColor({...u.color.value,s:a(100*e,u.step.value,100),b:a(100*(1-o),u.step.value,100)}),onRatioChangeEnd:()=>u.commit()});function p(a){u.interactive.value&&v(a)}return(a,e)=>(n(),r("div",{ref_key:"areaRef",ref:c,class:"skdx-color-picker__area","data-part":"area","data-disabled":s(u).disabled.value?"":void 0,"data-readonly":s(u).readOnly.value?"":void 0,"data-dragging":s(f)?"":void 0,style:{"touch-action":"none"},onPointerdown:p},[i(a.$slots,"default")],40,l))}});export{u as default};

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

@@ -1,29 +1,7 @@
 /**
- * The handle on the `SkdxColorPickerArea`, and the area's entire accessibility
- * surface: it renders **two nested `role="slider"` elements**, one for
- * saturation and one for brightness, each with its own accessible name and its
- * own truthful `aria-valuenow`.
- *
- * Two sliders rather than one: `role="slider"` requires `aria-valuenow`, and a
- * 2D colour has no single number to put there — a lone slider would have to
- * report one axis and lie about the other, which is the failure mode
- * `aria-valuetext` cannot paper over. Two axes each report a number that is
- * true. The cost is two tab stops inside one visual thumb, which is the same
- * trade every shipped 2D colour area makes, and it is the cheaper of the two:
- * an extra Tab press versus an announcement that is wrong.
- *
- * Both axes accept **all four arrow keys**, so no key is dead wherever focus
- * happens to sit; `Home`/`End` are the one axis-specific pair, sending *that*
- * axis to its extremes. Because each axis's `aria-valuetext` names both
- * percentages and the resulting colour, a move on either axis re-announces from
- * whichever slider is focused — which is why nothing here calls `announce`.
- *
- * The two axes are the focus targets, not the wrapper, so give them size in
- * CSS — typically by filling the thumb:
- *
- * ```css
- * .my-area-thumb [role='slider'] { position: absolute; inset: 0; }
- * ```
+ * The handle on `SkdxColorPickerArea` and its entire accessibility surface,
+ * rendering two nested `role="slider"` elements — one for saturation, one for
+ * brightness — each with its own accessible name and truthful `aria-valuenow`.
  *
  * @example
  * ```vue

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

@@ -1,29 +1,7 @@
 /**
- * The handle on the `SkdxColorPickerArea`, and the area's entire accessibility
- * surface: it renders **two nested `role="slider"` elements**, one for
- * saturation and one for brightness, each with its own accessible name and its
- * own truthful `aria-valuenow`.
- *
- * Two sliders rather than one: `role="slider"` requires `aria-valuenow`, and a
- * 2D colour has no single number to put there — a lone slider would have to
- * report one axis and lie about the other, which is the failure mode
- * `aria-valuetext` cannot paper over. Two axes each report a number that is
- * true. The cost is two tab stops inside one visual thumb, which is the same
- * trade every shipped 2D colour area makes, and it is the cheaper of the two:
- * an extra Tab press versus an announcement that is wrong.
- *
- * Both axes accept **all four arrow keys**, so no key is dead wherever focus
- * happens to sit; `Home`/`End` are the one axis-specific pair, sending *that*
- * axis to its extremes. Because each axis's `aria-valuetext` names both
- * percentages and the resulting colour, a move on either axis re-announces from
- * whichever slider is focused — which is why nothing here calls `announce`.
- *
- * The two axes are the focus targets, not the wrapper, so give them size in
- * CSS — typically by filling the thumb:
- *
- * ```css
- * .my-area-thumb [role='slider'] { position: absolute; inset: 0; }
- * ```
+ * The handle on `SkdxColorPickerArea` and its entire accessibility surface,
+ * rendering two nested `role="slider"` elements — one for saturation, one for
+ * brightness — each with its own accessible name and truthful `aria-valuenow`.
  *
  * @example
  * ```vue

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

@@ -1,14 +1,7 @@
 /**
- * Opens the browser's screen colour picker. The one way to sample a colour
- * outside the widget.
- *
- * **Renders nothing where `window.EyeDropper` does not exist** (Firefox and
- * Safari today). Feature detection defers to mount to align server and client
- * hydration.
- *
- * The sampled colour is opaque, so the picker's **current alpha is kept**;
- * dismissing (Escape) is a cancellation and changes nothing. The result **is
- * announced** to screen readers.
+ * Opens the browser's screen colour picker, rendering nothing where
+ * `window.EyeDropper` doesn't exist, keeping the picker's current alpha for
+ * the sampled (opaque) colour, and announcing the result.
  *
  * @example
  * ```vue

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

@@ -1,14 +1,7 @@
 /**
- * Opens the browser's screen colour picker. The one way to sample a colour
- * outside the widget.
- *
- * **Renders nothing where `window.EyeDropper` does not exist** (Firefox and
- * Safari today). Feature detection defers to mount to align server and client
- * hydration.
- *
- * The sampled colour is opaque, so the picker's **current alpha is kept**;
- * dismissing (Escape) is a cancellation and changes nothing. The result **is
- * announced** to screen readers.
+ * Opens the browser's screen colour picker, rendering nothing where
+ * `window.EyeDropper` doesn't exist, keeping the picker's current alpha for
+ * the sampled (opaque) colour, and announcing the result.
  *
  * @example
  * ```vue

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

@@ -1,15 +1,8 @@
 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.
+ * Switches the notation `value` is written in, rendered as a native
+ * `<select>`, firing `value-change` alongside `format-change` since the
+ * re-spelled string changes even though the colour doesn't.
  *
  * @example
  * ```vue

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

@@ -1,15 +1,8 @@
 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.
+ * Switches the notation `value` is written in, rendered as a native
+ * `<select>`, firing `value-change` alongside `format-change` since the
+ * re-spelled string changes even though the colour doesn't.
  *
  * @example
  * ```vue

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

@@ -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,14 +11,14 @@
  */
 type __VLS_Props = {
     /**
-     * Axis the track runs along: `clientX`/`clientY` for horizontal/vertical.
-     * 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 doesn't need to reach past the component's API to translate it.
+     * 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;

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,14 +11,14 @@
  */
 type __VLS_Props = {
     /**
-     * Axis the track runs along: `clientX`/`clientY` for horizontal/vertical.
-     * 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 doesn't need to reach past the component's API to translate it.
+     * 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;

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"},label:{default:"Hue"}},setup(s){const l=s,r=c.useColorPickerContext("SkdxColorPickerHueSlider"),u=(0,e.ref)(null),{attrs:d,onKeydown:a,onPointerdown:i}=f.useChannelSlider(u,{channel:"hue",consumerName:"SkdxColorPickerHueSlider",max:360,limit:()=>r.step.value>0?Math.floor(359/r.step.value)*r.step.value:359,value:()=>r.color.value.h,orientation:()=>l.orientation,defaultLabel:l.label,valueText:o=>`${Math.round(o)} degrees, ${r.describe(r.color.value)}`,onChange:o=>r.setColor({...r.color.value,h:o})});return(o,t)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({class:"skdx-color-picker__hue-slider","data-part":"hue-slider",ref_key:"trackRef",ref:u},(0,e.unref)(d),{style:{"touch-action":"none"},onKeydown:t[0]||(t[0]=(...n)=>(0,e.unref)(a)&&(0,e.unref)(a)(...n)),onPointerdown:t[1]||(t[1]=(...n)=>(0,e.unref)(i)&&(0,e.unref)(i)(...n))}),[(0,e.renderSlot)(o.$slots,"default")],16))}});exports.default=p;
+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 l,mergeProps as a,openBlock as t,ref as n,renderSlot as s,unref as u}from"vue";var i=/* @__PURE__ */l({__name:"ColorPickerHueSlider",props:{orientation:{default:"horizontal"},label:{default:"Hue"}},setup(l){const i=l,d=e("SkdxColorPickerHueSlider"),c=n(null),{attrs:f,onKeydown:p,onPointerdown:m}=o(c,{channel:"hue",consumerName:"SkdxColorPickerHueSlider",max:360,limit:()=>d.step.value>0?Math.floor(359/d.step.value)*d.step.value:359,value:()=>d.color.value.h,orientation:()=>i.orientation,defaultLabel:i.label,valueText:e=>`${Math.round(e)} degrees, ${d.describe(d.color.value)}`,onChange:e=>d.setColor({...d.color.value,h:e})});return(e,o)=>(t(),r("div",a({class:"skdx-color-picker__hue-slider","data-part":"hue-slider",ref_key:"trackRef",ref:c},u(f),{style:{"touch-action":"none"},onKeydown:o[0]||(o[0]=(...e)=>u(p)&&u(p)(...e)),onPointerdown:o[1]||(o[1]=(...e)=>u(m)&&u(m)(...e))}),[s(e.$slots,"default")],16))}});export{i as default};
+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,11 +1,7 @@
 /**
- * Purely visual `aria-hidden` thumb on the hue slider. The track carries the
- * `role="slider"` semantics and tab stop; a second focusable element would
- * announce the same value twice.
- *
- * Publishes `--skdx-color-picker-hue-position` (percentage) for positioning via
- * a single CSS rule. Style with the ancestor selector
- * `[data-channel='hue'][data-dragging] .my-hue-thumb` to react to drag state.
+ * 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,11 +1,7 @@
 /**
- * Purely visual `aria-hidden` thumb on the hue slider. The track carries the
- * `role="slider"` semantics and tab stop; a second focusable element would
- * announce the same value twice.
- *
- * Publishes `--skdx-color-picker-hue-position` (percentage) for positioning via
- * a single CSS rule. Style with the ancestor selector
- * `[data-channel='hue'][data-dragging] .my-hue-thumb` to react to drag state.
+ * 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
@@ -29,9 +18,14 @@ type __VLS_Props = {
      * 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
@@ -29,9 +18,14 @@ type __VLS_Props = {
      * 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;