@skdx/vue 0.26.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+/**
+ * The opacity track: a linear `role="slider"` over 0–100%, reported and stepped
+ * in whole percentage points even though the colour stores alpha as `0–1` —
+ * "50%" is what a user reads and types, `0.5` is what CSS wants, and only one
+ * of those belongs in an announcement.
+ *
+ * **Renders nothing when the root has `alpha` turned off.** A picker that
+ * cannot express transparency should not show a control that appears to set it;
+ * the part is left in the tree so a layout does not have to be conditionally
+ * authored twice.
+ *
+ * Ships no CSS. The checkerboard behind the gradient and the gradient itself
+ * are yours, and `--skdx-color-picker-value` gives you the current colour to
+ * fade out to:
+ *
+ * ```css
+ * .my-alpha {
+ *   background:
+ *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
+ *     var(--my-checkerboard);
+ * }
+ * .my-alpha-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-alpha-position);
+ * }
+ * ```
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerAlphaSlider class="my-alpha">
+ *   <SkdxColorPickerAlphaSliderThumb class="my-alpha-thumb" />
+ * </SkdxColorPickerAlphaSlider>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Axis the track runs along, which decides whether pointer position is read
+     * from `clientX` or `clientY` and is published as `data-orientation`.
+     * Vertical tracks run bottom-to-top, matching `SkdxSlider`.
+     * @default 'horizontal' — the track runs left-to-right.
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,57 @@
+/**
+ * The opacity track: a linear `role="slider"` over 0–100%, reported and stepped
+ * in whole percentage points even though the colour stores alpha as `0–1` —
+ * "50%" is what a user reads and types, `0.5` is what CSS wants, and only one
+ * of those belongs in an announcement.
+ *
+ * **Renders nothing when the root has `alpha` turned off.** A picker that
+ * cannot express transparency should not show a control that appears to set it;
+ * the part is left in the tree so a layout does not have to be conditionally
+ * authored twice.
+ *
+ * Ships no CSS. The checkerboard behind the gradient and the gradient itself
+ * are yours, and `--skdx-color-picker-value` gives you the current colour to
+ * fade out to:
+ *
+ * ```css
+ * .my-alpha {
+ *   background:
+ *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
+ *     var(--my-checkerboard);
+ * }
+ * .my-alpha-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-alpha-position);
+ * }
+ * ```
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerAlphaSlider class="my-alpha">
+ *   <SkdxColorPickerAlphaSliderThumb class="my-alpha-thumb" />
+ * </SkdxColorPickerAlphaSlider>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Axis the track runs along, which decides whether pointer position is read
+     * from `clientX` or `clientY` and is published as `data-orientation`.
+     * Vertical tracks run bottom-to-top, matching `SkdxSlider`.
+     * @default 'horizontal' — the track runs left-to-right.
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * 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:
+ *
+ * ```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 {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-saturation);
+ *   inset-block-end: var(--skdx-color-picker-brightness);
+ * }
+ * ```
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerArea class="my-area">
+ *   <SkdxColorPickerAreaThumb class="my-area-thumb" />
+ * </SkdxColorPickerArea>
+ * ```
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,52 @@
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * 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:
+ *
+ * ```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 {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-saturation);
+ *   inset-block-end: var(--skdx-color-picker-brightness);
+ * }
+ * ```
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerArea class="my-area">
+ *   <SkdxColorPickerAreaThumb class="my-area-thumb" />
+ * </SkdxColorPickerArea>
+ * ```
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,61 @@
+/**
+ * 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; }
+ * ```
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerArea>
+ *   <SkdxColorPickerAreaThumb saturation-label="Saturation" brightness-label="Brightness" />
+ * </SkdxColorPickerArea>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Accessible name of the horizontal axis, which is a `role="slider"` of its own.
+     * @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"`.
+     * @default 'Brightness' — as above, for the other axis.
+     */
+    brightnessLabel?: 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<{}>, {
+    saturationLabel: string;
+    brightnessLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,61 @@
+/**
+ * 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; }
+ * ```
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerArea>
+ *   <SkdxColorPickerAreaThumb saturation-label="Saturation" brightness-label="Brightness" />
+ * </SkdxColorPickerArea>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Accessible name of the horizontal axis, which is a `role="slider"` of its own.
+     * @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"`.
+     * @default 'Brightness' — as above, for the other axis.
+     */
+    brightnessLabel?: 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<{}>, {
+    saturationLabel: string;
+    brightnessLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ *
+ * **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.
+ *
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerEyeDropper aria-label="Pick a colour from the screen">
+ *   <PipetteIcon />
+ * </SkdxColorPickerEyeDropper>
+ * ```
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ *
+ * **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.
+ *
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxColorPickerEyeDropper aria-label="Pick a colour from the screen">
+ *   <PipetteIcon />
+ * </SkdxColorPickerEyeDropper>
+ * ```
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1 @@
+const u=require("../utils/color.cjs"),c=require("./context.cjs");let e=require("vue");var i=["data-disabled","data-readonly","disabled"],p=(0,e.defineComponent)({__name:"ColorPickerEyeDropper",setup(s){const r=c.useColorPickerContext("SkdxColorPickerEyeDropper"),t=(0,e.ref)(!1);(0,e.onMounted)(()=>{t.value="EyeDropper"in window});function l(){const o=window.EyeDropper;o&&new o().open().then(({sRGBHex:a})=>{const n=u.parseColor(a);n&&r.setColor({...n,a:r.color.value.a},{announce:!0})}).catch(()=>{})}function d(){r.interactive.value&&l()}return(o,a)=>t.value?((0,e.openBlock)(),(0,e.createElementBlock)("button",{key:0,class:"skdx-color-picker__eye-dropper","data-part":"eye-dropper",type:"button","aria-label":"Pick a colour from the screen","data-disabled":(0,e.unref)(r).disabled.value?"":void 0,"data-readonly":(0,e.unref)(r).readOnly.value?"":void 0,disabled:(0,e.unref)(r).disabled.value,onClick:d},[(0,e.renderSlot)(o.$slots,"default")],8,i)):(0,e.createCommentVNode)("",!0)}});exports.default=p;

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

@@ -0,0 +1 @@
+import{parseColor as e}from"../utils/color.js";import{useColorPickerContext as o}from"./context.js";import{createCommentVNode as a,createElementBlock as r,defineComponent as t,onMounted as n,openBlock as l,ref as d,renderSlot as s,unref as i}from"vue";var c=["data-disabled","data-readonly","disabled"],p=/* @__PURE__ */t({__name:"ColorPickerEyeDropper",setup(t){const p=o("SkdxColorPickerEyeDropper"),u=d(!1);function m(){p.interactive.value&&function(){const o=window.EyeDropper;o&&(new o).open().then(({sRGBHex:o})=>{const a=e(o);a&&p.setColor({...a,a:p.color.value.a},{announce:!0})}).catch(()=>{})}()}return n(()=>{u.value="EyeDropper"in window}),(e,o)=>u.value?(l(),r("button",{key:0,class:"skdx-color-picker__eye-dropper","data-part":"eye-dropper",type:"button","aria-label":"Pick a colour from the screen","data-disabled":i(p).disabled.value?"":void 0,"data-readonly":i(p).readOnly.value?"":void 0,disabled:i(p).disabled.value,onClick:m},[s(e.$slots,"default")],8,c)):a("",!0)}});export{p as default};

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

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