@skdx/vue 0.26.0 → 0.28.0

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

@@ -56,11 +56,8 @@ import { type ColorFormat } from '../utils/color.cjs';
  */
 type __VLS_Props = {
     /**
-     * Current colour as a string in the active `format`, for controlled usage.
-     * Pair with `v-model:value` or `@value-change`. Anything `parseColor`
-     * understands is accepted regardless of `format`; an unparseable string is
-     * ignored and the last good colour is kept, because a half-typed `#ab`
-     * should not blank the picker.
+     * Current colour for controlled usage. Pair with `v-model:value` or
+     * `@value-change`. Accepts any `parseColor` notation; unparseable input keeps the last colour.
      * @default undefined — uncontrolled, tracks its own colour internally.
      */
     value?: string;
@@ -71,8 +68,7 @@ type __VLS_Props = {
     defaultValue?: string;
     /**
      * Notation `value` is written in, for controlled usage. Pair with
-     * `v-model:format` or `@format-change`. The colour itself is stored as HSB
-     * whatever this says; the format only decides how it is spelled on the way out.
+     * `v-model:format` or `@format-change`. Colour is stored as HSB; format only decides spelling.
      * @default undefined — uncontrolled, tracks its own format internally.
      */
     format?: ColorFormat;
@@ -83,18 +79,14 @@ type __VLS_Props = {
     defaultFormat?: ColorFormat;
     /**
      * Whether the picker has an alpha channel. When `false`,
-     * `SkdxColorPickerAlphaSlider` renders nothing and every emitted string is
-     * fully opaque — so a consumer that cannot handle transparency never
-     * receives an `rgba()` it must strip.
+     * `SkdxColorPickerAlphaSlider` renders nothing and every emitted string is fully opaque.
      * @default true — the picker has an opacity channel.
      */
     alpha?: boolean;
     /**
-     * Keyboard increment, in the units of whichever channel is being stepped:
-     * percentage points for saturation/brightness/alpha, degrees for hue.
-     * Shift multiplies it by ten, so a 1-unit picker still has a coarse gear.
-     * `0` makes pointer input continuous while the arrows keep falling back to
-     * one unit, so every value stays reachable by keyboard.
+     * Keyboard increment in channel units: percent for saturation/brightness/alpha,
+     * degrees for hue. Shift multiplies by ten. `0` makes pointer continuous
+     * while keyboard falls back to one unit.
      * @default 1 — every whole unit is reachable without a pointer.
      */
     step?: number;
@@ -112,6 +104,30 @@ type __VLS_Props = {
      * @default false — changes are accepted.
      */
     readOnly?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerInput`. Ignored when the default
+     * slot supplies its own parts.
+     * @default true — a picker with no way to type a value is not a complete one.
+     */
+    showInput?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerSwatchGroup`. Ignored when the
+     * default slot supplies its own parts or `swatches` is empty.
+     * @default true — rendered only once `swatches` is non-empty.
+     */
+    showSwatches?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerEyeDropper` trigger. Ignored when
+     * the default slot supplies its own parts.
+     * @default true — rendered only where the platform supports it.
+     */
+    showEyeDropper?: boolean;
+    /**
+     * Preset colours for the derived swatch group, in any notation
+     * `parseColor` understands. Ignored unless `showSwatches` is set.
+     * @default [] — no presets, so `showSwatches` alone renders nothing.
+     */
+    swatches?: string[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -132,11 +148,15 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }>, {
     disabled: boolean;
     value: string;
-    defaultValue: string;
-    alpha: boolean;
     readOnly: boolean;
+    defaultValue: string;
     step: number;
+    alpha: boolean;
     format: ColorFormat;
+    showInput: boolean;
+    showSwatches: boolean;
+    showEyeDropper: boolean;
+    swatches: string[];
     defaultFormat: ColorFormat;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -56,11 +56,8 @@ import { type ColorFormat } from '../utils/color.js';
  */
 type __VLS_Props = {
     /**
-     * Current colour as a string in the active `format`, for controlled usage.
-     * Pair with `v-model:value` or `@value-change`. Anything `parseColor`
-     * understands is accepted regardless of `format`; an unparseable string is
-     * ignored and the last good colour is kept, because a half-typed `#ab`
-     * should not blank the picker.
+     * Current colour for controlled usage. Pair with `v-model:value` or
+     * `@value-change`. Accepts any `parseColor` notation; unparseable input keeps the last colour.
      * @default undefined — uncontrolled, tracks its own colour internally.
      */
     value?: string;
@@ -71,8 +68,7 @@ type __VLS_Props = {
     defaultValue?: string;
     /**
      * Notation `value` is written in, for controlled usage. Pair with
-     * `v-model:format` or `@format-change`. The colour itself is stored as HSB
-     * whatever this says; the format only decides how it is spelled on the way out.
+     * `v-model:format` or `@format-change`. Colour is stored as HSB; format only decides spelling.
      * @default undefined — uncontrolled, tracks its own format internally.
      */
     format?: ColorFormat;
@@ -83,18 +79,14 @@ type __VLS_Props = {
     defaultFormat?: ColorFormat;
     /**
      * Whether the picker has an alpha channel. When `false`,
-     * `SkdxColorPickerAlphaSlider` renders nothing and every emitted string is
-     * fully opaque — so a consumer that cannot handle transparency never
-     * receives an `rgba()` it must strip.
+     * `SkdxColorPickerAlphaSlider` renders nothing and every emitted string is fully opaque.
      * @default true — the picker has an opacity channel.
      */
     alpha?: boolean;
     /**
-     * Keyboard increment, in the units of whichever channel is being stepped:
-     * percentage points for saturation/brightness/alpha, degrees for hue.
-     * Shift multiplies it by ten, so a 1-unit picker still has a coarse gear.
-     * `0` makes pointer input continuous while the arrows keep falling back to
-     * one unit, so every value stays reachable by keyboard.
+     * Keyboard increment in channel units: percent for saturation/brightness/alpha,
+     * degrees for hue. Shift multiplies by ten. `0` makes pointer continuous
+     * while keyboard falls back to one unit.
      * @default 1 — every whole unit is reachable without a pointer.
      */
     step?: number;
@@ -112,6 +104,30 @@ type __VLS_Props = {
      * @default false — changes are accepted.
      */
     readOnly?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerInput`. Ignored when the default
+     * slot supplies its own parts.
+     * @default true — a picker with no way to type a value is not a complete one.
+     */
+    showInput?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerSwatchGroup`. Ignored when the
+     * default slot supplies its own parts or `swatches` is empty.
+     * @default true — rendered only once `swatches` is non-empty.
+     */
+    showSwatches?: boolean;
+    /**
+     * Whether to render a `SkdxColorPickerEyeDropper` trigger. Ignored when
+     * the default slot supplies its own parts.
+     * @default true — rendered only where the platform supports it.
+     */
+    showEyeDropper?: boolean;
+    /**
+     * Preset colours for the derived swatch group, in any notation
+     * `parseColor` understands. Ignored unless `showSwatches` is set.
+     * @default [] — no presets, so `showSwatches` alone renders nothing.
+     */
+    swatches?: string[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -132,11 +148,15 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }>, {
     disabled: boolean;
     value: string;
-    defaultValue: string;
-    alpha: boolean;
     readOnly: boolean;
+    defaultValue: string;
     step: number;
+    alpha: boolean;
     format: ColorFormat;
+    showInput: boolean;
+    showSwatches: boolean;
+    showEyeDropper: boolean;
+    swatches: string[];
     defaultFormat: ColorFormat;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1 +1 @@
-const $=require("../utils/liveAnnouncer.cjs"),c=require("../utils/color.cjs"),x=require("./context.cjs");let o=require("vue");var B=["data-value","data-format","data-disabled","data-readonly"],V=(0,o.defineComponent)({__name:"ColorPicker",props:{value:{default:void 0},defaultValue:{default:"#000000"},format:{default:void 0},defaultFormat:{default:"hex"},alpha:{type:Boolean,default:!0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit","update:format","format-change"],setup(s,{emit:_}){const y={h:0,s:0,b:0,a:1};function r(e){return Math.round(e*1e3)/1e3}const a=s,n=_,m=(0,o.ref)(a.defaultValue),t=(0,o.computed)(()=>a.value===void 0?m.value:a.value),h=(0,o.ref)(a.defaultFormat),v=(0,o.computed)(()=>a.format===void 0?h.value:a.format),d=(0,o.ref)({color:c.parseColor(a.value??a.defaultValue)??y,value:t.value}),l=(0,o.computed)(()=>t.value===d.value.value?d.value.color:c.parseColor(t.value)??d.value.color),p=(0,o.computed)(()=>!a.disabled&&!a.readOnly);function k(e){const u=c.formatColor(e,"hex",!1);return a.alpha&&e.a<1?`${u}, ${Math.round(e.a*100)}% opaque`:u}function C(e,u){a.value===void 0&&(m.value=e),e!==u&&(n("update:value",e),n("value-change",e))}function b(e,u){if(!p.value)return;const f=t.value,i=c.formatColor(e,v.value,a.alpha);d.value={color:e,value:i},C(i,f),u?.announce&&$.announce(k(e))}function q(e){if(!p.value)return;const u=t.value,f=v.value,i=l.value;a.format===void 0&&(h.value=e),e!==f&&(n("update:format",e),n("format-change",e)),d.value={color:i,value:c.formatColor(i,e,a.alpha)},C(d.value.value,u)}(0,o.provide)(x.COLOR_PICKER_CONTEXT,{color:l,value:t,format:v,alpha:(0,o.computed)(()=>a.alpha),step:(0,o.computed)(()=>a.step),disabled:(0,o.computed)(()=>a.disabled),readOnly:(0,o.computed)(()=>a.readOnly),interactive:p,describe:k,setColor:b,commit:()=>n("value-commit",t.value),setFormat:q});const O=(0,o.computed)(()=>({"--skdx-color-picker-hue":`${r(l.value.h)}deg`,"--skdx-color-picker-hue-position":`${r(l.value.h/360*100)}%`,"--skdx-color-picker-saturation":`${r(l.value.s)}%`,"--skdx-color-picker-brightness":`${r(l.value.b)}%`,"--skdx-color-picker-alpha":r(l.value.a),"--skdx-color-picker-alpha-position":`${r(l.value.a*100)}%`,"--skdx-color-picker-value":c.formatColor(l.value,"hex",a.alpha)}));return(e,u)=>((0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"skdx-color-picker","data-part":"root","data-skdx-component":"color-picker","data-value":t.value,"data-format":v.value,"data-disabled":s.disabled?"":void 0,"data-readonly":s.readOnly?"":void 0,style:(0,o.normalizeStyle)(O.value)},[(0,o.renderSlot)(e.$slots,"default")],12,B))}});exports.default=V;
+const O=require("../utils/liveAnnouncer.cjs"),s=require("../utils/color.cjs"),$=require("./context.cjs"),x=require("./ColorPickerAnatomy.vue.cjs");let o=require("vue");var V=["data-value","data-format","data-disabled","data-readonly"],g=(0,o.defineComponent)({__name:"ColorPicker",props:{value:{default:void 0},defaultValue:{default:"#000000"},format:{default:void 0},defaultFormat:{default:"hex"},alpha:{type:Boolean,default:!0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},showInput:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},showEyeDropper:{type:Boolean,default:!0},swatches:{default:()=>[]}},emits:["update:value","value-change","value-commit","update:format","format-change"],setup(u,{emit:y}){const C={h:0,s:0,b:0,a:1};function c(e){return Math.round(e*1e3)/1e3}const a=u,n=y,f=(0,o.ref)(a.defaultValue),r=(0,o.computed)(()=>a.value===void 0?f.value:a.value),h=(0,o.ref)(a.defaultFormat),i=(0,o.computed)(()=>a.format===void 0?h.value:a.format),d=(0,o.ref)({color:s.parseColor(a.value??a.defaultValue)??C,value:r.value}),t=(0,o.computed)(()=>r.value===d.value.value?d.value.color:s.parseColor(r.value)??d.value.color),p=(0,o.computed)(()=>!a.disabled&&!a.readOnly);function m(e){const l=s.formatColor(e,"hex",!1);return a.alpha&&e.a<1?`${l}, ${Math.round(e.a*100)}% opaque`:l}function k(e,l){a.value===void 0&&(f.value=e),e!==l&&(n("update:value",e),n("value-change",e))}function b(e,l){if(!p.value)return;const v=r.value,w=s.formatColor(e,i.value,a.alpha);d.value={color:e,value:w},k(w,v),l?.announce&&O.announce(m(e))}function q(e){if(!p.value)return;const l=i.value;a.format===void 0&&(h.value=e),e!==l&&(n("update:format",e),n("format-change",e))}(0,o.watch)(i,e=>{const l=r.value,v=t.value;d.value={color:v,value:s.formatColor(v,e,a.alpha)},k(d.value.value,l)}),(0,o.provide)($.COLOR_PICKER_CONTEXT,{color:t,value:r,format:i,alpha:(0,o.computed)(()=>a.alpha),step:(0,o.computed)(()=>a.step),disabled:(0,o.computed)(()=>a.disabled),readOnly:(0,o.computed)(()=>a.readOnly),interactive:p,describe:m,setColor:b,commit:()=>n("value-commit",r.value),setFormat:q});const B=(0,o.computed)(()=>({"--skdx-color-picker-hue":`${c(t.value.h)}deg`,"--skdx-color-picker-hue-position":`${c(t.value.h/360*100)}%`,"--skdx-color-picker-saturation":`${c(t.value.s)}%`,"--skdx-color-picker-brightness":`${c(t.value.b)}%`,"--skdx-color-picker-alpha":c(t.value.a),"--skdx-color-picker-alpha-position":`${c(t.value.a*100)}%`,"--skdx-color-picker-value":s.formatColor(t.value,"hex",a.alpha)}));return(e,l)=>((0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"skdx-color-picker","data-part":"root","data-skdx-component":"color-picker","data-value":r.value,"data-format":i.value,"data-disabled":u.disabled?"":void 0,"data-readonly":u.readOnly?"":void 0,style:(0,o.normalizeStyle)(B.value)},[(0,o.renderSlot)(e.$slots,"default",{},()=>[(0,o.createVNode)(x.default,{alpha:u.alpha,"show-input":u.showInput,"show-swatches":u.showSwatches,"show-eye-dropper":u.showEyeDropper,swatches:u.swatches},null,8,["alpha","show-input","show-swatches","show-eye-dropper","swatches"])])],12,V))}});exports.default=g;

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

@@ -1 +1 @@
-import{announce as a}from"../utils/liveAnnouncer.js";import{formatColor as e,parseColor as l}from"../utils/color.js";import{COLOR_PICKER_CONTEXT as o}from"./context.js";import{computed as t,createElementBlock as u,defineComponent as r,normalizeStyle as d,openBlock as v,provide as n,ref as s,renderSlot as i}from"vue";var c=["data-value","data-format","data-disabled","data-readonly"],p=/* @__PURE__ */r({__name:"ColorPicker",props:{value:{default:void 0},defaultValue:{default:"#000000"},format:{default:void 0},defaultFormat:{default:"hex"},alpha:{type:Boolean,default:!0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit","update:format","format-change"],setup(r,{emit:p}){function f(a){return Math.round(1e3*a)/1e3}const m=r,h=p,k=s(m.defaultValue),x=t(()=>void 0===m.value?k.value:m.value),y=s(m.defaultFormat),b=t(()=>void 0===m.format?y.value:m.format),C=s({color:l(m.value??m.defaultValue)??{h:0,s:0,b:0,a:1},value:x.value}),O=t(()=>x.value===C.value.value?C.value.color:l(x.value)??C.value.color),$=t(()=>!m.disabled&&!m.readOnly);function g(a){const l=e(a,"hex",!1);return m.alpha&&a.a<1?`${l}, ${Math.round(100*a.a)}% opaque`:l}function B(a,e){void 0===m.value&&(k.value=a),a!==e&&(h("update:value",a),h("value-change",a))}n(o,{color:O,value:x,format:b,alpha:t(()=>m.alpha),step:t(()=>m.step),disabled:t(()=>m.disabled),readOnly:t(()=>m.readOnly),interactive:$,describe:g,setColor:function(l,o){if(!$.value)return;const t=x.value,u=e(l,b.value,m.alpha);C.value={color:l,value:u},B(u,t),o?.announce&&a(g(l))},commit:()=>h("value-commit",x.value),setFormat:function(a){if(!$.value)return;const l=x.value,o=b.value,t=O.value;void 0===m.format&&(y.value=a),a!==o&&(h("update:format",a),h("format-change",a)),C.value={color:t,value:e(t,a,m.alpha)},B(C.value.value,l)}});const _=t(()=>({"--skdx-color-picker-hue":`${f(O.value.h)}deg`,"--skdx-color-picker-hue-position":`${f(O.value.h/360*100)}%`,"--skdx-color-picker-saturation":`${f(O.value.s)}%`,"--skdx-color-picker-brightness":`${f(O.value.b)}%`,"--skdx-color-picker-alpha":f(O.value.a),"--skdx-color-picker-alpha-position":`${f(100*O.value.a)}%`,"--skdx-color-picker-value":e(O.value,"hex",m.alpha)}));return(a,e)=>(v(),u("div",{class:"skdx-color-picker","data-part":"root","data-skdx-component":"color-picker","data-value":x.value,"data-format":b.value,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,style:d(_.value)},[i(a.$slots,"default")],12,c))}});export{p as default};
+import{announce as a}from"../utils/liveAnnouncer.js";import{formatColor as e,parseColor as o}from"../utils/color.js";import{COLOR_PICKER_CONTEXT as l}from"./context.js";import t from"./ColorPickerAnatomy.vue.js";import{computed as u,createElementBlock as r,createVNode as s,defineComponent as d,normalizeStyle as n,openBlock as c,provide as v,ref as p,renderSlot as i,watch as h}from"vue";var f=["data-value","data-format","data-disabled","data-readonly"],m=/* @__PURE__ */d({__name:"ColorPicker",props:{value:{default:void 0},defaultValue:{default:"#000000"},format:{default:void 0},defaultFormat:{default:"hex"},alpha:{type:Boolean,default:!0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},showInput:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},showEyeDropper:{type:Boolean,default:!0},swatches:{default:()=>[]}},emits:["update:value","value-change","value-commit","update:format","format-change"],setup(d,{emit:m}){function k(a){return Math.round(1e3*a)/1e3}const w=d,y=m,x=p(w.defaultValue),b=u(()=>void 0===w.value?x.value:w.value),C=p(w.defaultFormat),B=u(()=>void 0===w.format?C.value:w.format),O=p({color:o(w.value??w.defaultValue)??{h:0,s:0,b:0,a:1},value:b.value}),$=u(()=>b.value===O.value.value?O.value.color:o(b.value)??O.value.color),g=u(()=>!w.disabled&&!w.readOnly);function E(a){const o=e(a,"hex",!1);return w.alpha&&a.a<1?`${o}, ${Math.round(100*a.a)}% opaque`:o}function j(a,e){void 0===w.value&&(x.value=a),a!==e&&(y("update:value",a),y("value-change",a))}h(B,a=>{const o=b.value,l=$.value;O.value={color:l,value:e(l,a,w.alpha)},j(O.value.value,o)}),v(l,{color:$,value:b,format:B,alpha:u(()=>w.alpha),step:u(()=>w.step),disabled:u(()=>w.disabled),readOnly:u(()=>w.readOnly),interactive:g,describe:E,setColor:function(o,l){if(!g.value)return;const t=b.value,u=e(o,B.value,w.alpha);O.value={color:o,value:u},j(u,t),l?.announce&&a(E(o))},commit:()=>y("value-commit",b.value),setFormat:function(a){if(!g.value)return;const e=B.value;void 0===w.format&&(C.value=a),a!==e&&(y("update:format",a),y("format-change",a))}});const S=u(()=>({"--skdx-color-picker-hue":`${k($.value.h)}deg`,"--skdx-color-picker-hue-position":`${k($.value.h/360*100)}%`,"--skdx-color-picker-saturation":`${k($.value.s)}%`,"--skdx-color-picker-brightness":`${k($.value.b)}%`,"--skdx-color-picker-alpha":k($.value.a),"--skdx-color-picker-alpha-position":`${k(100*$.value.a)}%`,"--skdx-color-picker-value":e($.value,"hex",w.alpha)}));return(a,e)=>(c(),r("div",{class:"skdx-color-picker","data-part":"root","data-skdx-component":"color-picker","data-value":b.value,"data-format":B.value,"data-disabled":d.disabled?"":void 0,"data-readonly":d.readOnly?"":void 0,style:n(S.value)},[i(a.$slots,"default",{},()=>[s(t,{alpha:d.alpha,"show-input":d.showInput,"show-swatches":d.showSwatches,"show-eye-dropper":d.showEyeDropper,swatches:d.swatches},null,8,["alpha","show-input","show-swatches","show-eye-dropper","swatches"])])],12,f))}});export{m as default};

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

@@ -34,18 +34,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`.
+     * Axis the track runs along: `clientX`/`clientY` for horizontal/vertical.
      * Vertical tracks run bottom-to-top, matching `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.
+     * @default 'Opacity'
+     */
+    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/ColorPickerAlphaSlider.vue.d.ts

@@ -34,18 +34,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`.
+     * Axis the track runs along: `clientX`/`clientY` for horizontal/vertical.
      * Vertical tracks run bottom-to-top, matching `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.
+     * @default 'Opacity'
+     */
+    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/ColorPickerAlphaSlider.vue_vue_type_script_setup_true_lang.cjs

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

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 c}from"vue";var u=/* @__PURE__ */t({__name:"ColorPickerAlphaSlider",props:{orientation:{default:"horizontal"}},setup(t){const u=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:()=>u.orientation,defaultLabel:"Opacity",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)=>c(p).alpha.value?(s(),l("div",n({key:0,class:"skdx-color-picker__alpha-slider","data-part":"alpha-slider",ref_key:"trackRef",ref:m},c(f),{style:{"touch-action":"none"},onKeydown:o[0]||(o[0]=(...e)=>c(h)&&c(h)(...e)),onPointerdown:o[1]||(o[1]=(...e)=>c(k)&&c(k)(...e))}),[d(e.$slots,"default")],16)):r("",!0)}});export{u 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,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};

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

@@ -1,21 +1,11 @@
 /**
- * The handle on a `SkdxColorPickerAlphaSlider`. Purely visual: `aria-hidden` and
- * out of the tab order, because the track carries the `role="slider"` semantics
- * and takes the tab stop.
+ * 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.
  *
- * It ships **no positioning**. The root publishes
- * `--skdx-color-picker-alpha-position` as a percentage:
- *
- * ```css
- * .my-alpha-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-alpha-position);
- * }
- * ```
- *
- * `data-value` is the opacity in **percent**, matching what the track reports,
- * not the `0–1` alpha the colour stores. `data-dragging` lives on the track;
- * reach it with `[data-channel='alpha'][data-dragging] .my-alpha-thumb`.
+ * 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]`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,21 +1,11 @@
 /**
- * The handle on a `SkdxColorPickerAlphaSlider`. Purely visual: `aria-hidden` and
- * out of the tab order, because the track carries the `role="slider"` semantics
- * and takes the tab stop.
+ * 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.
  *
- * It ships **no positioning**. The root publishes
- * `--skdx-color-picker-alpha-position` as a percentage:
- *
- * ```css
- * .my-alpha-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-alpha-position);
- * }
- * ```
- *
- * `data-value` is the opacity in **percent**, matching what the track reports,
- * not the `0–1` alpha the colour stores. `data-dragging` lives on the track;
- * reach it with `[data-channel='alpha'][data-dragging] .my-alpha-thumb`.
+ * 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]`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * Anatomy when default slot empty: 2D area, hue/alpha tracks, optional swatches/input/eyedropper.
+ * React port's `ColorPickerAnatomy.tsx` must stay synchronized.
+ * @internal
+ */
+type __VLS_Props = {
+    alpha?: boolean;
+    showInput?: boolean;
+    showSwatches?: boolean;
+    showEyeDropper?: boolean;
+    swatches?: string[];
+};
+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[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,20 @@
+/**
+ * Anatomy when default slot empty: 2D area, hue/alpha tracks, optional swatches/input/eyedropper.
+ * React port's `ColorPickerAnatomy.tsx` must stay synchronized.
+ * @internal
+ */
+type __VLS_Props = {
+    alpha?: boolean;
+    showInput?: boolean;
+    showSwatches?: boolean;
+    showEyeDropper?: boolean;
+    swatches?: string[];
+};
+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[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

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

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

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

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

@@ -1,20 +1,15 @@
 /**
  * The 2D saturation/brightness surface: **saturation runs left-to-right,
- * brightness bottom-to-top**, at whatever hue the picker currently holds.
- * Pointer down anywhere inside it seeks straight to that colour, and dragging
- * keeps updating until release — the drag survives leaving the element and the
- * window, and a cancelled drag still commits rather than hanging.
+ * brightness bottom-to-top**, at the current hue. Dragging commits changes
+ * on release; dismissed drags still commit rather than reverting.
  *
- * It carries **no ARIA of its own and no `role="application"`**. The
- * accessibility lives in `SkdxColorPickerAreaThumb`, which renders one
- * `role="slider"` per axis; a `role="application"` here would hand the whole
- * surface to the browser as an opaque box and take the screen reader's own
- * navigation away from the user.
+ * 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.
  *
- * Ships no CSS. The hue backdrop and the black/white gradients on top of it
- * are the consumer's, driven by `--skdx-color-picker-hue`; the thumb is placed
- * from `--skdx-color-picker-saturation` and `--skdx-color-picker-brightness`,
- * both already percentages:
+ * Publish thumb position via `--skdx-color-picker-saturation` and
+ * `--skdx-color-picker-brightness` (percentages), and hue via
+ * `--skdx-color-picker-hue`:
  *
  * ```css
  * .my-area {
@@ -24,7 +19,6 @@
  *     hsl(var(--skdx-color-picker-hue) 100% 50%);
  * }
  * .my-area-thumb {
- *   position: absolute;
  *   inset-inline-start: var(--skdx-color-picker-saturation);
  *   inset-block-end: var(--skdx-color-picker-brightness);
  * }

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

@@ -1,20 +1,15 @@
 /**
  * The 2D saturation/brightness surface: **saturation runs left-to-right,
- * brightness bottom-to-top**, at whatever hue the picker currently holds.
- * Pointer down anywhere inside it seeks straight to that colour, and dragging
- * keeps updating until release — the drag survives leaving the element and the
- * window, and a cancelled drag still commits rather than hanging.
+ * brightness bottom-to-top**, at the current hue. Dragging commits changes
+ * on release; dismissed drags still commit rather than reverting.
  *
- * It carries **no ARIA of its own and no `role="application"`**. The
- * accessibility lives in `SkdxColorPickerAreaThumb`, which renders one
- * `role="slider"` per axis; a `role="application"` here would hand the whole
- * surface to the browser as an opaque box and take the screen reader's own
- * navigation away from the user.
+ * 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.
  *
- * Ships no CSS. The hue backdrop and the black/white gradients on top of it
- * are the consumer's, driven by `--skdx-color-picker-hue`; the thumb is placed
- * from `--skdx-color-picker-saturation` and `--skdx-color-picker-brightness`,
- * both already percentages:
+ * Publish thumb position via `--skdx-color-picker-saturation` and
+ * `--skdx-color-picker-brightness` (percentages), and hue via
+ * `--skdx-color-picker-hue`:
  *
  * ```css
  * .my-area {
@@ -24,7 +19,6 @@
  *     hsl(var(--skdx-color-picker-hue) 100% 50%);
  * }
  * .my-area-thumb {
- *   position: absolute;
  *   inset-inline-start: var(--skdx-color-picker-saturation);
  *   inset-block-end: var(--skdx-color-picker-brightness);
  * }

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

@@ -34,12 +34,12 @@
  */
 type __VLS_Props = {
     /**
-     * Accessible name of the horizontal axis, which is a `role="slider"` of its own.
+     * Accessible name of the horizontal saturation slider.
      * @default 'Saturation' — two unnamed sliders in the same box are indistinguishable.
      */
     saturationLabel?: string;
     /**
-     * Accessible name of the vertical axis, which is a second `role="slider"`.
+     * Accessible name of the vertical brightness slider.
      * @default 'Brightness' — as above, for the other axis.
      */
     brightnessLabel?: string;

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

@@ -34,12 +34,12 @@
  */
 type __VLS_Props = {
     /**
-     * Accessible name of the horizontal axis, which is a `role="slider"` of its own.
+     * Accessible name of the horizontal saturation slider.
      * @default 'Saturation' — two unnamed sliders in the same box are indistinguishable.
      */
     saturationLabel?: string;
     /**
-     * Accessible name of the vertical axis, which is a second `role="slider"`.
+     * Accessible name of the vertical brightness slider.
      * @default 'Brightness' — as above, for the other axis.
      */
     brightnessLabel?: string;

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

@@ -1 +1 @@
-const p=require("../utils/direction.cjs"),c=require("./context.cjs");let a=require("vue");var y=["data-value","data-disabled","data-readonly"],g=["onKeydown"],w=(0,a.defineComponent)({__name:"ColorPickerAreaThumb",props:{saturationLabel:{default:"Saturation"},brightnessLabel:{default:"Brightness"}},setup(f){const v=f,r=c.useColorPickerContext("SkdxColorPickerAreaThumb"),h=p.useDirection(),m=(0,a.computed)(()=>["saturation","brightness"].map(o=>{const t=r.color.value,e=c.round2(o==="saturation"?t.s:t.b);return{axis:o,attrs:{role:"slider","aria-label":o==="saturation"?v.saturationLabel:v.brightnessLabel,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":e,"aria-valuetext":`${Math.round(t.s)}% saturation, ${Math.round(t.b)}% brightness, ${r.describe(t)}`,"aria-orientation":o==="saturation"?"horizontal":"vertical","aria-disabled":r.disabled.value||void 0,"aria-readonly":r.readOnly.value||void 0,tabindex:r.disabled.value?-1:0,"data-channel":o,"data-value":e,"data-disabled":r.disabled.value?"":void 0,"data-readonly":r.readOnly.value?"":void 0}}}));function _(o,t){if(!r.interactive.value)return;const e=r.color.value,i=r.step.value,n=p.directionalKey(t.key,t.currentTarget,h()),b=c.arrowStep(i),s=t.shiftKey?b*10:b,u=(d,k)=>c.snapChannel(d+k,i,100);let l=null;if(n==="ArrowRight")l={...e,s:u(e.s,s)};else if(n==="ArrowLeft")l={...e,s:u(e.s,-s)};else if(n==="ArrowUp")l={...e,b:u(e.b,s)};else if(n==="ArrowDown")l={...e,b:u(e.b,-s)};else if(n==="Home"||n==="End"){const d=n==="Home"?0:100;l=o==="saturation"?{...e,s:d}:{...e,b:d}}l&&(t.preventDefault(),r.setColor(l))}return(o,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-color-picker__area-thumb","data-part":"area-thumb","data-value":(0,a.unref)(r).value.value,"data-disabled":(0,a.unref)(r).disabled.value?"":void 0,"data-readonly":(0,a.unref)(r).readOnly.value?"":void 0},[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(m.value,e=>((0,a.openBlock)(),(0,a.createElementBlock)("span",(0,a.mergeProps)({key:e.axis},{ref_for:!0},e.attrs,{onKeydown:i=>_(e.axis,i)}),null,16,g))),128)),(0,a.renderSlot)(o.$slots,"default")],8,y))}});exports.default=w;
+const h=require("../utils/direction.cjs"),s=require("./context.cjs");let e=require("vue");var g=["data-value","data-disabled","data-readonly"],w=["onKeydown"],x=(0,e.defineComponent)({__name:"ColorPickerAreaThumb",props:{saturationLabel:{default:"Saturation"},brightnessLabel:{default:"Brightness"}},setup(f){const d=f,a=s.useColorPickerContext("SkdxColorPickerAreaThumb"),m=h.useDirection(),_=(0,e.computed)(()=>["saturation","brightness"].map(o=>{const t=a.color.value,r=s.round2(o==="saturation"?t.s:t.b);return{axis:o,attrs:{role:"slider","aria-label":o==="saturation"?d.saturationLabel:d.brightnessLabel,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":r,"aria-valuetext":`${Math.round(t.s)}% saturation, ${Math.round(t.b)}% brightness, ${a.describe(t)}`,"aria-orientation":o==="saturation"?"horizontal":"vertical","aria-disabled":a.disabled.value||void 0,"aria-readonly":a.readOnly.value||void 0,tabindex:a.disabled.value?-1:0,"data-channel":o,"data-value":r,"data-disabled":a.disabled.value?"":void 0,"data-readonly":a.readOnly.value?"":void 0}}}));function k(o,t){if(!a.interactive.value)return;const r=a.color.value,i=a.step.value,n=h.directionalKey(t.key,t.currentTarget,m()),c=s.arrowStep(i),v=t.shiftKey?c*10:c,b=(l,y)=>s.snapChannel(l+y,i,100);let u=null;const p=n==="ArrowRight"||n==="ArrowUp";if(p||n==="ArrowLeft"||n==="ArrowDown"){const l=p?v:-v;u=o==="saturation"?{...r,s:b(r.s,l)}:{...r,b:b(r.b,l)}}else if(n==="Home"||n==="End"){const l=n==="Home"?0:100;u=o==="saturation"?{...r,s:l}:{...r,b:l}}u&&(t.preventDefault(),a.setColor(u))}return(o,t)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-color-picker__area-thumb","data-part":"area-thumb","data-value":(0,e.unref)(a).value.value,"data-disabled":(0,e.unref)(a).disabled.value?"":void 0,"data-readonly":(0,e.unref)(a).readOnly.value?"":void 0},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(_.value,r=>((0,e.openBlock)(),(0,e.createElementBlock)("span",(0,e.mergeProps)({key:r.axis},{ref_for:!0},r.attrs,{onKeydown:i=>k(r.axis,i)}),null,16,w))),128)),(0,e.renderSlot)(o.$slots,"default")],8,g))}});exports.default=x;

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

@@ -1 +1 @@
-import{directionalKey as a,useDirection as e}from"../utils/direction.js";import{arrowStep as r,round2 as t,snapChannel as s,useColorPickerContext as o}from"./context.js";import{Fragment as l,computed as i,createElementBlock as n,defineComponent as d,mergeProps as u,openBlock as v,renderList as b,renderSlot as c,unref as f}from"vue";var m=["data-value","data-disabled","data-readonly"],p=["onKeydown"],h=/* @__PURE__ */d({__name:"ColorPickerAreaThumb",props:{saturationLabel:{default:"Saturation"},brightnessLabel:{default:"Brightness"}},setup(d){const h=d,y=o("SkdxColorPickerAreaThumb"),x=e(),k=i(()=>["saturation","brightness"].map(a=>{const e=y.color.value,r=t("saturation"===a?e.s:e.b);return{axis:a,attrs:{role:"slider","aria-label":"saturation"===a?h.saturationLabel:h.brightnessLabel,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":r,"aria-valuetext":`${Math.round(e.s)}% saturation, ${Math.round(e.b)}% brightness, ${y.describe(e)}`,"aria-orientation":"saturation"===a?"horizontal":"vertical","aria-disabled":y.disabled.value||void 0,"aria-readonly":y.readOnly.value||void 0,tabindex:y.disabled.value?-1:0,"data-channel":a,"data-value":r,"data-disabled":y.disabled.value?"":void 0,"data-readonly":y.readOnly.value?"":void 0}}}));return(e,t)=>(v(),n("div",{class:"skdx-color-picker__area-thumb","data-part":"area-thumb","data-value":f(y).value.value,"data-disabled":f(y).disabled.value?"":void 0,"data-readonly":f(y).readOnly.value?"":void 0},[(v(!0),n(l,null,b(k.value,e=>(v(),n("span",u({key:e.axis},{ref_for:!0},e.attrs,{onKeydown:t=>function(e,t){if(!y.interactive.value)return;const o=y.color.value,l=y.step.value,i=a(t.key,t.currentTarget,x()),n=r(l),d=t.shiftKey?10*n:n,u=(a,e)=>s(a+e,l,100);let v=null;if("ArrowRight"===i)v={...o,s:u(o.s,d)};else if("ArrowLeft"===i)v={...o,s:u(o.s,-d)};else if("ArrowUp"===i)v={...o,b:u(o.b,d)};else if("ArrowDown"===i)v={...o,b:u(o.b,-d)};else if("Home"===i||"End"===i){const a="Home"===i?0:100;v="saturation"===e?{...o,s:a}:{...o,b:a}}v&&(t.preventDefault(),y.setColor(v))}(e.axis,t)}),null,16,p))),128)),c(e.$slots,"default")],8,m))}});export{h as default};
+import{directionalKey as a,useDirection as e}from"../utils/direction.js";import{arrowStep as r,round2 as t,snapChannel as o,useColorPickerContext as s}from"./context.js";import{Fragment as l,computed as n,createElementBlock as i,defineComponent as d,mergeProps as u,openBlock as v,renderList as b,renderSlot as c,unref as m}from"vue";var p=["data-value","data-disabled","data-readonly"],f=["onKeydown"],h=/* @__PURE__ */d({__name:"ColorPickerAreaThumb",props:{saturationLabel:{default:"Saturation"},brightnessLabel:{default:"Brightness"}},setup(d){const h=d,y=s("SkdxColorPickerAreaThumb"),x=e(),k=n(()=>["saturation","brightness"].map(a=>{const e=y.color.value,r=t("saturation"===a?e.s:e.b);return{axis:a,attrs:{role:"slider","aria-label":"saturation"===a?h.saturationLabel:h.brightnessLabel,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":r,"aria-valuetext":`${Math.round(e.s)}% saturation, ${Math.round(e.b)}% brightness, ${y.describe(e)}`,"aria-orientation":"saturation"===a?"horizontal":"vertical","aria-disabled":y.disabled.value||void 0,"aria-readonly":y.readOnly.value||void 0,tabindex:y.disabled.value?-1:0,"data-channel":a,"data-value":r,"data-disabled":y.disabled.value?"":void 0,"data-readonly":y.readOnly.value?"":void 0}}}));return(e,t)=>(v(),i("div",{class:"skdx-color-picker__area-thumb","data-part":"area-thumb","data-value":m(y).value.value,"data-disabled":m(y).disabled.value?"":void 0,"data-readonly":m(y).readOnly.value?"":void 0},[(v(!0),i(l,null,b(k.value,e=>(v(),i("span",u({key:e.axis},{ref_for:!0},e.attrs,{onKeydown:t=>function(e,t){if(!y.interactive.value)return;const s=y.color.value,l=y.step.value,n=a(t.key,t.currentTarget,x()),i=r(l),d=t.shiftKey?10*i:i,u=(a,e)=>o(a+e,l,100);let v=null;const b="ArrowRight"===n||"ArrowUp"===n;if(b||"ArrowLeft"===n||"ArrowDown"===n){const a=b?d:-d;v="saturation"===e?{...s,s:u(s.s,a)}:{...s,b:u(s.b,a)}}else if("Home"===n||"End"===n){const a="Home"===n?0:100;v="saturation"===e?{...s,s:a}:{...s,b:a}}v&&(t.preventDefault(),y.setColor(v))}(e.axis,t)}),null,16,f))),128)),c(e.$slots,"default")],8,p))}});export{h as default};

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

@@ -1,22 +1,14 @@
 /**
- * Opens the browser's screen colour picker and applies whatever the user clicks
- * — the one way to sample a colour that is not already inside this widget.
+ * Opens the browser's screen colour picker. The one way to sample a colour
+ * outside the widget.
  *
- * **It renders nothing where `window.EyeDropper` does not exist**, which today
- * is Firefox and Safari. The feature detection runs in `onMounted`, never in
- * `setup`: `setup` also runs on the server, where there is no `window` at all,
- * and reading one there would break SSR outright. So the server and the
- * client's first pass agree that the button is absent, and it appears on the
- * client's next tick where it is supported.
+ * **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 always opaque, so the picker's **current alpha is
- * kept** — sampling a colour off the screen is not a statement about
- * transparency, and resetting opacity to 100% would quietly undo the user's
- * last decision. Dismissing the picker (Escape) is a cancellation, not an
- * error, and changes nothing.
- *
- * The result **is announced**: a button press tells a screen-reader user
- * nothing about the colour it produced.
+ * 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.
  *
  * @example
  * ```vue