@skdx/vue 0.28.0 → 0.29.0

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,31 +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. Unparseable values render disabled; valid
-     * colours are accepted in any `parseColor` notation.
+     * 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,31 +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. Unparseable values render disabled; valid
-     * colours are accepted in any `parseColor` notation.
+     * 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

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

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,6 +1,3 @@
-/**
- * Shared state and channel arithmetic every picker part agrees on. @internal
- */
 import { type ComputedRef, type InjectionKey, type Ref } from 'vue';
 import type { ColorFormat, HsbColor } from '../utils/color.cjs';
 /** Which single channel a `SkdxColorPickerInput` edits. */
@@ -10,7 +7,7 @@ export type ColorChannel = 'hex' | 'red' | 'green' | 'blue' | 'hue' | 'saturatio
  * 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>;
     /** Color in current format; what value/value-change speak. */
     value: ComputedRef<string>;
@@ -33,9 +30,7 @@ export interface ColorPickerContext {
 }
 /** @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 Context or descriptive throw naming part and missing root.
- */
+/** @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]";
@@ -52,13 +47,7 @@ export declare function useSwatchGroupContext(consumerName: string): ColorPicker
 export declare const SHIFT_MULTIPLIER = 10;
 /** @internal Two decimals prevent float noise leaking to DOM or rounding away. */
 export declare function round2(value: number): number;
-/**
- * @internal Rounds channel value to step grid with float correction, clamps to 0…max.
- * Shared by all channels so all land on 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 = continuous under pointer, not "keyboard does nothing";
- * arrows fall back to one unit.
- */
+/** @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,6 +1,3 @@
-/**
- * Shared state and channel arithmetic every picker part agrees on. @internal
- */
 import { type ComputedRef, type InjectionKey, type Ref } from 'vue';
 import type { ColorFormat, HsbColor } from '../utils/color.js';
 /** Which single channel a `SkdxColorPickerInput` edits. */
@@ -10,7 +7,7 @@ export type ColorChannel = 'hex' | 'red' | 'green' | 'blue' | 'hue' | 'saturatio
  * 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>;
     /** Color in current format; what value/value-change speak. */
     value: ComputedRef<string>;
@@ -33,9 +30,7 @@ export interface ColorPickerContext {
 }
 /** @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 Context or descriptive throw naming part and missing root.
- */
+/** @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]";
@@ -52,13 +47,7 @@ export declare function useSwatchGroupContext(consumerName: string): ColorPicker
 export declare const SHIFT_MULTIPLIER = 10;
 /** @internal Two decimals prevent float noise leaking to DOM or rounding away. */
 export declare function round2(value: number): number;
-/**
- * @internal Rounds channel value to step grid with float correction, clamps to 0…max.
- * Shared by all channels so all land on 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 = continuous under pointer, not "keyboard does nothing";
- * arrows fall back to one unit.
- */
+/** @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/primitives.d.cts

@@ -1,7 +1,6 @@
 /**
- * Advanced primitives for `SkdxColorPicker` — the parts the recipe composes.
- * Use when you need a different structure. ColorPicker here is the barrel
- * export, derives anatomy when given no children.
+ * Advanced primitives for `SkdxColorPicker`, the parts the recipe composes,
+ * for a different structure than the derived default anatomy.
  *
  * @example
  * ```vue

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

@@ -1,7 +1,6 @@
 /**
- * Advanced primitives for `SkdxColorPicker` — the parts the recipe composes.
- * Use when you need a different structure. ColorPicker here is the barrel
- * export, derives anatomy when given no children.
+ * Advanced primitives for `SkdxColorPicker`, the parts the recipe composes,
+ * for a different structure than the derived default anatomy.
  *
  * @example
  * ```vue

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

@@ -1,20 +1,19 @@
-/** @internal Behaviour shared by `SkdxColorPickerHueSlider` and `SkdxColorPickerAlphaSlider`. */
-import { type MaybeRefOrGetter, type Ref } from 'vue';
+import { type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue';
 /** @internal Options for {@link useChannelSlider}. */
 export interface UseChannelSliderOptions {
-    /** Published as `data-channel`. */
+    /** Published as the element's `data-channel` attribute. */
     channel: 'hue' | 'alpha';
     /** Name of the calling part, for the context error message. */
     consumerName: string;
     /** Top of the range as ARIA reports it; the bottom is always 0. */
     max: number;
     /**
-     * Highest value actually reachable, when not `max` — hue needs it so the
+     * Highest value actually reachable when not `max`, which hue needs so the
      * track stops before wrapping 360° back to 0° mid-drag.
      * @default options.max
      */
     limit?: MaybeRefOrGetter<number>;
-    /** Current position on that range. A ref or getter, so the track follows the colour. */
+    /** Current position on that range, a ref or getter so the track follows the colour. */
     value: MaybeRefOrGetter<number>;
     orientation: MaybeRefOrGetter<'horizontal' | 'vertical'>;
     /** Accessible name used when the consumer supplies none. */
@@ -25,32 +24,14 @@ export interface UseChannelSliderOptions {
     onChange: (value: number) => void;
 }
 /**
- * @internal Linear role="slider" track over 0…max with pointer drag, click-to-seek,
- * keyboard. Track has ends (doesn't wrap). Pointer geometry is physical; only arrows
- * mirror under dir="rtl". Return type inferred to preserve aria-orientation literal union.
+ * @internal Linear `role="slider"` track over 0…max with pointer drag,
+ * click-to-seek, and keyboard support, with ends that don't wrap.
  *
  * @param trackRef Template ref for track element; drag measured against its box.
  */
 export declare function useChannelSlider(trackRef: Ref<HTMLElement | null>, options: UseChannelSliderOptions): {
-    attrs: import("vue").ComputedRef<{
-        role: string;
-        'aria-label': string;
-        'aria-valuemin': number;
-        'aria-valuemax': number;
-        'aria-valuenow': number;
-        'aria-valuetext': string;
-        'aria-orientation': "horizontal" | "vertical";
-        'aria-disabled': true | undefined;
-        'aria-readonly': true | undefined;
-        tabindex: number;
-        'data-channel': "hue" | "alpha";
-        'data-orientation': "horizontal" | "vertical";
-        'data-value': number;
-        'data-disabled': string | undefined;
-        'data-readonly': string | undefined;
-        'data-dragging': string | undefined;
-    }>;
+    attrs: ComputedRef<Record<string, string | number | boolean | undefined>>;
     onKeydown: (event: KeyboardEvent) => void;
     onPointerdown: (event: PointerEvent) => void;
-    dragging: Readonly<Ref<boolean, boolean>>;
+    dragging: Readonly<Ref<boolean>>;
 };

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

@@ -1,20 +1,19 @@
-/** @internal Behaviour shared by `SkdxColorPickerHueSlider` and `SkdxColorPickerAlphaSlider`. */
-import { type MaybeRefOrGetter, type Ref } from 'vue';
+import { type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue';
 /** @internal Options for {@link useChannelSlider}. */
 export interface UseChannelSliderOptions {
-    /** Published as `data-channel`. */
+    /** Published as the element's `data-channel` attribute. */
     channel: 'hue' | 'alpha';
     /** Name of the calling part, for the context error message. */
     consumerName: string;
     /** Top of the range as ARIA reports it; the bottom is always 0. */
     max: number;
     /**
-     * Highest value actually reachable, when not `max` — hue needs it so the
+     * Highest value actually reachable when not `max`, which hue needs so the
      * track stops before wrapping 360° back to 0° mid-drag.
      * @default options.max
      */
     limit?: MaybeRefOrGetter<number>;
-    /** Current position on that range. A ref or getter, so the track follows the colour. */
+    /** Current position on that range, a ref or getter so the track follows the colour. */
     value: MaybeRefOrGetter<number>;
     orientation: MaybeRefOrGetter<'horizontal' | 'vertical'>;
     /** Accessible name used when the consumer supplies none. */
@@ -25,32 +24,14 @@ export interface UseChannelSliderOptions {
     onChange: (value: number) => void;
 }
 /**
- * @internal Linear role="slider" track over 0…max with pointer drag, click-to-seek,
- * keyboard. Track has ends (doesn't wrap). Pointer geometry is physical; only arrows
- * mirror under dir="rtl". Return type inferred to preserve aria-orientation literal union.
+ * @internal Linear `role="slider"` track over 0…max with pointer drag,
+ * click-to-seek, and keyboard support, with ends that don't wrap.
  *
  * @param trackRef Template ref for track element; drag measured against its box.
  */
 export declare function useChannelSlider(trackRef: Ref<HTMLElement | null>, options: UseChannelSliderOptions): {
-    attrs: import("vue").ComputedRef<{
-        role: string;
-        'aria-label': string;
-        'aria-valuemin': number;
-        'aria-valuemax': number;
-        'aria-valuenow': number;
-        'aria-valuetext': string;
-        'aria-orientation': "horizontal" | "vertical";
-        'aria-disabled': true | undefined;
-        'aria-readonly': true | undefined;
-        tabindex: number;
-        'data-channel': "hue" | "alpha";
-        'data-orientation': "horizontal" | "vertical";
-        'data-value': number;
-        'data-disabled': string | undefined;
-        'data-readonly': string | undefined;
-        'data-dragging': string | undefined;
-    }>;
+    attrs: ComputedRef<Record<string, string | number | boolean | undefined>>;
     onKeydown: (event: KeyboardEvent) => void;
     onPointerdown: (event: PointerEvent) => void;
-    dragging: Readonly<Ref<boolean, boolean>>;
+    dragging: Readonly<Ref<boolean>>;
 };

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

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-/** Position inside an element's border box, as fractions of its width and height. `{ x: 0, y: 0 }` is the top-left corner. */
+/** Position inside an element's border box, as fractions of its width and height, where `{ x: 0, y: 0 }` is the top-left corner. */
 export interface PointerRatio {
     x: number;
     y: number;
@@ -8,22 +8,19 @@ export interface PointerRatio {
 export interface UsePointerRatioOptions {
     /** Fires with the position on pointer down and on every subsequent move that changes it, plus the native event. */
     onRatioChange: (ratio: PointerRatio, event: PointerEvent) => void;
-    /** Fires once when the drag ends — `pointerup` or `pointercancel`. The final position was already reported by `onRatioChange`. */
+    /** Fires once when the drag ends (`pointerup` or `pointercancel`), after the final position was already reported by `onRatioChange`. */
     onRatioChangeEnd?: (event: PointerEvent) => void;
 }
 /** Return value of {@link usePointerRatio}. @internal */
 export interface UsePointerRatioResult {
-    /**
-     * Bind on element defining coordinate space. Re-measured on every move.
-     */
+    /** Bind on the element defining coordinate space, re-measured on every move. */
     onPointerDown: (event: PointerEvent) => void;
-    /** `true` between pointer down and pointer up/cancel. Suitable for a `data-dragging` styling hook. */
+    /** `true` between pointer down and pointer up/cancel, suitable for a `data-dragging` styling hook. */
     dragging: Readonly<Ref<boolean>>;
 }
 /**
- * Turns pointer position into normalized [0,1] fractions for position-input widgets
- * (color picker area/tracks). Ignores value ranges, channels, ARIA, RTL, disabled/readOnly.
- * Safe under SSR.
+ * Turns pointer position into normalized [0,1] fractions for position-input
+ * widgets like a colour picker area or track, safe under SSR.
  *
  * @param elementRef Template ref for coordinate space element.
  * @internal

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

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-/** Position inside an element's border box, as fractions of its width and height. `{ x: 0, y: 0 }` is the top-left corner. */
+/** Position inside an element's border box, as fractions of its width and height, where `{ x: 0, y: 0 }` is the top-left corner. */
 export interface PointerRatio {
     x: number;
     y: number;
@@ -8,22 +8,19 @@ export interface PointerRatio {
 export interface UsePointerRatioOptions {
     /** Fires with the position on pointer down and on every subsequent move that changes it, plus the native event. */
     onRatioChange: (ratio: PointerRatio, event: PointerEvent) => void;
-    /** Fires once when the drag ends — `pointerup` or `pointercancel`. The final position was already reported by `onRatioChange`. */
+    /** Fires once when the drag ends (`pointerup` or `pointercancel`), after the final position was already reported by `onRatioChange`. */
     onRatioChangeEnd?: (event: PointerEvent) => void;
 }
 /** Return value of {@link usePointerRatio}. @internal */
 export interface UsePointerRatioResult {
-    /**
-     * Bind on element defining coordinate space. Re-measured on every move.
-     */
+    /** Bind on the element defining coordinate space, re-measured on every move. */
     onPointerDown: (event: PointerEvent) => void;
-    /** `true` between pointer down and pointer up/cancel. Suitable for a `data-dragging` styling hook. */
+    /** `true` between pointer down and pointer up/cancel, suitable for a `data-dragging` styling hook. */
     dragging: Readonly<Ref<boolean>>;
 }
 /**
- * Turns pointer position into normalized [0,1] fractions for position-input widgets
- * (color picker area/tracks). Ignores value ranges, channels, ARIA, RTL, disabled/readOnly.
- * Safe under SSR.
+ * Turns pointer position into normalized [0,1] fractions for position-input
+ * widgets like a colour picker area or track, safe under SSR.
  *
  * @param elementRef Template ref for coordinate space element.
  * @internal