@skdx/vue 0.26.0

package/dist/alert-dialog/AlertDialogTrigger.vue.d.cts

@@ -0,0 +1,18 @@
+/**
+ * Button that opens the alert dialog when clicked. Sets
+ * `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, and
+ * `data-state` (`open`/`closed`). Must be used inside `SkdxAlertDialog`.
+ */
+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/alert-dialog/AlertDialogTrigger.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Button that opens the alert dialog when clicked. Sets
+ * `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, and
+ * `data-state` (`open`/`closed`). Must be used inside `SkdxAlertDialog`.
+ */
+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/alert-dialog/AlertDialogTrigger.vue.js

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

package/dist/alert-dialog/AlertDialogTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const l=require("./context.cjs");let e=require("vue");var i=["aria-expanded","aria-controls","data-state"],u=(0,e.defineComponent)({__name:"AlertDialogTrigger",setup(d){const r=(0,e.inject)(l.ALERT_DIALOG_CONTEXT);if(!r)throw new Error("SkdxAlertDialogTrigger must be used within SkdxAlertDialog.");const t=r,a=(0,e.ref)(null);(0,e.onMounted)(()=>{t.triggerRef.value=a.value});function n(){t.setOpen(!0)}return(o,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-alert-dialog__trigger","data-part":"trigger",ref_key:"elRef",ref:a,type:"button","aria-haspopup":"dialog","aria-expanded":(0,e.unref)(t).open.value,"aria-controls":(0,e.unref)(t).contentId,"data-state":(0,e.unref)(t).open.value?"open":"closed",onClick:n},[(0,e.renderSlot)(o.$slots,"default")],8,i))}});exports.default=u;

package/dist/alert-dialog/AlertDialogTrigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{ALERT_DIALOG_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as t,inject as r,onMounted as o,openBlock as n,ref as l,renderSlot as s,unref as i}from"vue";var d=["aria-expanded","aria-controls","data-state"],u=/* @__PURE__ */t({__name:"AlertDialogTrigger",setup(t){const u=r(e);if(!u)throw new Error("SkdxAlertDialogTrigger must be used within SkdxAlertDialog.");const p=u,g=l(null);function c(){p.setOpen(!0)}return o(()=>{p.triggerRef.value=g.value}),(e,t)=>(n(),a("button",{class:"skdx-alert-dialog__trigger","data-part":"trigger",ref_key:"elRef",ref:g,type:"button","aria-haspopup":"dialog","aria-expanded":i(p).open.value,"aria-controls":i(p).contentId,"data-state":i(p).open.value?"open":"closed",onClick:c},[s(e.$slots,"default")],8,d))}});export{u as default};

package/dist/alert-dialog/context.cjs

@@ -0,0 +1 @@
+const e=require("../utils/id.cjs");var n=Symbol("skdx-alert-dialog-context");function i(){const t=e.nextId("alert-dialog");return{contentId:`${t}-content`,titleId:`${t}-title`,descriptionId:`${t}-description`}}exports.ALERT_DIALOG_CONTEXT=n;exports.nextAlertDialogIds=i;

package/dist/alert-dialog/context.d.cts

@@ -0,0 +1,19 @@
+import type { InjectionKey, Ref } from 'vue';
+/** @internal Injection key an AlertDialog provides so its parts can read/drive shared state. */
+export interface AlertDialogContext {
+    triggerRef: Ref<HTMLElement | null>;
+    contentRef: Ref<HTMLElement | null>;
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+    open: Readonly<Ref<boolean>>;
+    setOpen(open: boolean): void;
+}
+/** @internal Injection key an AlertDialog provides so its trigger/content parts can read/drive open state and shared ids. */
+export declare const ALERT_DIALOG_CONTEXT: InjectionKey<AlertDialogContext>;
+/** @internal Generates a unique id triple for an AlertDialog's content/title/description. */
+export declare function nextAlertDialogIds(): {
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+};

package/dist/alert-dialog/context.d.ts

@@ -0,0 +1,19 @@
+import type { InjectionKey, Ref } from 'vue';
+/** @internal Injection key an AlertDialog provides so its parts can read/drive shared state. */
+export interface AlertDialogContext {
+    triggerRef: Ref<HTMLElement | null>;
+    contentRef: Ref<HTMLElement | null>;
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+    open: Readonly<Ref<boolean>>;
+    setOpen(open: boolean): void;
+}
+/** @internal Injection key an AlertDialog provides so its trigger/content parts can read/drive open state and shared ids. */
+export declare const ALERT_DIALOG_CONTEXT: InjectionKey<AlertDialogContext>;
+/** @internal Generates a unique id triple for an AlertDialog's content/title/description. */
+export declare function nextAlertDialogIds(): {
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+};

package/dist/alert-dialog/context.js

@@ -0,0 +1 @@
+import{nextId as t}from"../utils/id.js";var e=/* @__PURE__ */Symbol("skdx-alert-dialog-context");function o(){const e=t("alert-dialog");return{contentId:`${e}-content`,titleId:`${e}-title`,descriptionId:`${e}-description`}}export{e as ALERT_DIALOG_CONTEXT,o as nextAlertDialogIds};

package/dist/alert-dialog/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./AlertDialog.vue.cjs"),r=require("./AlertDialogTrigger.vue.cjs"),l=require("./AlertDialogPortal.vue.cjs"),t=require("./AlertDialogOverlay.vue.cjs"),i=require("./AlertDialogContent.vue.cjs"),o=require("./AlertDialogTitle.vue.cjs"),a=require("./AlertDialogDescription.vue.cjs"),u=require("./AlertDialogAction.vue.cjs"),g=require("./AlertDialogCancel.vue.cjs");exports.SkdxAlertDialog=e.default;exports.SkdxAlertDialogAction=u.default;exports.SkdxAlertDialogCancel=g.default;exports.SkdxAlertDialogContent=i.default;exports.SkdxAlertDialogDescription=a.default;exports.SkdxAlertDialogOverlay=t.default;exports.SkdxAlertDialogPortal=l.default;exports.SkdxAlertDialogTitle=o.default;exports.SkdxAlertDialogTrigger=r.default;

package/dist/alert-dialog/index.d.cts

@@ -0,0 +1,9 @@
+export { default as SkdxAlertDialog } from './AlertDialog.vue.cjs';
+export { default as SkdxAlertDialogTrigger } from './AlertDialogTrigger.vue.cjs';
+export { default as SkdxAlertDialogPortal } from './AlertDialogPortal.vue.cjs';
+export { default as SkdxAlertDialogOverlay } from './AlertDialogOverlay.vue.cjs';
+export { default as SkdxAlertDialogContent } from './AlertDialogContent.vue.cjs';
+export { default as SkdxAlertDialogTitle } from './AlertDialogTitle.vue.cjs';
+export { default as SkdxAlertDialogDescription } from './AlertDialogDescription.vue.cjs';
+export { default as SkdxAlertDialogAction } from './AlertDialogAction.vue.cjs';
+export { default as SkdxAlertDialogCancel } from './AlertDialogCancel.vue.cjs';

package/dist/alert-dialog/index.d.ts

@@ -0,0 +1,9 @@
+export { default as SkdxAlertDialog } from './AlertDialog.vue.js';
+export { default as SkdxAlertDialogTrigger } from './AlertDialogTrigger.vue.js';
+export { default as SkdxAlertDialogPortal } from './AlertDialogPortal.vue.js';
+export { default as SkdxAlertDialogOverlay } from './AlertDialogOverlay.vue.js';
+export { default as SkdxAlertDialogContent } from './AlertDialogContent.vue.js';
+export { default as SkdxAlertDialogTitle } from './AlertDialogTitle.vue.js';
+export { default as SkdxAlertDialogDescription } from './AlertDialogDescription.vue.js';
+export { default as SkdxAlertDialogAction } from './AlertDialogAction.vue.js';
+export { default as SkdxAlertDialogCancel } from './AlertDialogCancel.vue.js';

package/dist/alert-dialog/index.js

@@ -0,0 +1 @@
+import r from"./AlertDialog.vue.js";import o from"./AlertDialogTrigger.vue.js";import l from"./AlertDialogPortal.vue.js";import e from"./AlertDialogOverlay.vue.js";import t from"./AlertDialogContent.vue.js";import i from"./AlertDialogTitle.vue.js";import a from"./AlertDialogDescription.vue.js";import g from"./AlertDialogAction.vue.js";import s from"./AlertDialogCancel.vue.js";export{r as SkdxAlertDialog,g as SkdxAlertDialogAction,s as SkdxAlertDialogCancel,t as SkdxAlertDialogContent,a as SkdxAlertDialogDescription,e as SkdxAlertDialogOverlay,l as SkdxAlertDialogPortal,i as SkdxAlertDialogTitle,o as SkdxAlertDialogTrigger};

package/dist/angle-slider/AngleSlider.vue.cjs

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

package/dist/angle-slider/AngleSlider.vue.d.cts

@@ -0,0 +1,100 @@
+/**
+ * The Vue implementation of the shared AngleSlider contract (see
+ * `@skdx/shared`'s `angleSliderContract`) — a dial whose value is a
+ * *direction* rather than a position along a line: a gradient angle, a wind
+ * bearing, a knob. Renders a `role="slider"` div reporting `aria-valuemin="0"`
+ * / `aria-valuemax="360"` / `aria-valuenow` plus an `aria-valuetext` in
+ * degrees.
+ *
+ * **0° is at 12 o'clock and the angle increases clockwise** (90° = 3 o'clock),
+ * matching `usePointerAngle`, which does the pointer geometry. The value lives
+ * in `[0, 360)`: 360 is never reported, because it is the same direction as 0.
+ *
+ * The root publishes `--skdx-angle-slider-angle` (e.g. `45deg`) so the thumb's
+ * rotation is pure CSS — `transform: rotate(var(--skdx-angle-slider-angle))` —
+ * with no per-frame JS positioning to reimplement.
+ *
+ * Every value is reachable **without a pointer**: arrows step by `step`,
+ * Shift+arrow by 10°, PageUp/PageDown by 45°, Home/End jump to the first and
+ * last reachable angles. Arrow steps wrap around the circle, because a dial has
+ * no ends. Under `dir="rtl"` the horizontal arrows swap, via `directionalKey`.
+ *
+ * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
+ * unnamed slider announces a bare number of degrees.
+ */
+type __VLS_Props = {
+    /**
+     * Current angle in degrees, for controlled usage. Pair with
+     * `v-model:value` or `@value-change`. Values outside `[0, 360)` are folded
+     * into it on the next change — 450 and 90 are the same direction, and the
+     * widget only ever reports one of them.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: number;
+    /**
+     * Initial angle in degrees, for uncontrolled usage, seeding the first render.
+     * @default 0 — pointing straight up, since 0° is at 12 o'clock.
+     */
+    defaultValue?: number;
+    /**
+     * Increment in degrees that both pointer and keyboard input are rounded to.
+     * Shift+arrow always moves 10° and PageUp/PageDown always move 45°,
+     * regardless of this value. `0` makes pointer input continuous, while the
+     * arrows keep falling back to 1° so every angle stays reachable by keyboard.
+     * @default 1 — every whole degree is reachable.
+     */
+    step?: number;
+    /**
+     * Blocks pointer and keyboard interaction and takes the root out of the tab
+     * order (it stays programmatically focusable, at `tabindex="-1"`).
+     * @default false — the dial is interactive and in the tab order.
+     */
+    disabled?: boolean;
+    /**
+     * Displays the current angle but blocks changes, while staying focusable and
+     * in the tab order — unlike `disabled`, a read-only dial can still be reached
+     * and read by a keyboard user.
+     * @default false — changes are accepted.
+     */
+    readOnly?: boolean;
+    /**
+     * Restrict the value to the angles declared by the rendered `SkdxAngleSliderMark`
+     * parts. Marks are discovered from the DOM at interaction time, so there is
+     * no registration plumbing and a mark added or removed later just works.
+     *
+     * With marks present, dragging snaps to the nearest one (measured the short
+     * way around the circle, so 350° snaps to a 0° mark), arrow keys move one
+     * mark, Shift+arrow and PageUp/PageDown move three, and Home/End jump to the
+     * first/last mark. With `restrictToMarks` set but no marks rendered, the
+     * value falls back to the `step` grid rather than becoming unchangeable.
+     * @default false — every angle on the step grid stays reachable.
+     */
+    restrictToMarks?: boolean;
+};
+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, {
+    "update:value": (value: number) => any;
+    "value-change": (value: number) => any;
+    "value-commit": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: number) => any) | undefined;
+    "onValue-change"?: ((value: number) => any) | undefined;
+    "onValue-commit"?: ((value: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: number;
+    defaultValue: number;
+    readOnly: boolean;
+    step: number;
+    restrictToMarks: boolean;
+}, {}, {}, {}, 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/angle-slider/AngleSlider.vue.d.ts

@@ -0,0 +1,100 @@
+/**
+ * The Vue implementation of the shared AngleSlider contract (see
+ * `@skdx/shared`'s `angleSliderContract`) — a dial whose value is a
+ * *direction* rather than a position along a line: a gradient angle, a wind
+ * bearing, a knob. Renders a `role="slider"` div reporting `aria-valuemin="0"`
+ * / `aria-valuemax="360"` / `aria-valuenow` plus an `aria-valuetext` in
+ * degrees.
+ *
+ * **0° is at 12 o'clock and the angle increases clockwise** (90° = 3 o'clock),
+ * matching `usePointerAngle`, which does the pointer geometry. The value lives
+ * in `[0, 360)`: 360 is never reported, because it is the same direction as 0.
+ *
+ * The root publishes `--skdx-angle-slider-angle` (e.g. `45deg`) so the thumb's
+ * rotation is pure CSS — `transform: rotate(var(--skdx-angle-slider-angle))` —
+ * with no per-frame JS positioning to reimplement.
+ *
+ * Every value is reachable **without a pointer**: arrows step by `step`,
+ * Shift+arrow by 10°, PageUp/PageDown by 45°, Home/End jump to the first and
+ * last reachable angles. Arrow steps wrap around the circle, because a dial has
+ * no ends. Under `dir="rtl"` the horizontal arrows swap, via `directionalKey`.
+ *
+ * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
+ * unnamed slider announces a bare number of degrees.
+ */
+type __VLS_Props = {
+    /**
+     * Current angle in degrees, for controlled usage. Pair with
+     * `v-model:value` or `@value-change`. Values outside `[0, 360)` are folded
+     * into it on the next change — 450 and 90 are the same direction, and the
+     * widget only ever reports one of them.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: number;
+    /**
+     * Initial angle in degrees, for uncontrolled usage, seeding the first render.
+     * @default 0 — pointing straight up, since 0° is at 12 o'clock.
+     */
+    defaultValue?: number;
+    /**
+     * Increment in degrees that both pointer and keyboard input are rounded to.
+     * Shift+arrow always moves 10° and PageUp/PageDown always move 45°,
+     * regardless of this value. `0` makes pointer input continuous, while the
+     * arrows keep falling back to 1° so every angle stays reachable by keyboard.
+     * @default 1 — every whole degree is reachable.
+     */
+    step?: number;
+    /**
+     * Blocks pointer and keyboard interaction and takes the root out of the tab
+     * order (it stays programmatically focusable, at `tabindex="-1"`).
+     * @default false — the dial is interactive and in the tab order.
+     */
+    disabled?: boolean;
+    /**
+     * Displays the current angle but blocks changes, while staying focusable and
+     * in the tab order — unlike `disabled`, a read-only dial can still be reached
+     * and read by a keyboard user.
+     * @default false — changes are accepted.
+     */
+    readOnly?: boolean;
+    /**
+     * Restrict the value to the angles declared by the rendered `SkdxAngleSliderMark`
+     * parts. Marks are discovered from the DOM at interaction time, so there is
+     * no registration plumbing and a mark added or removed later just works.
+     *
+     * With marks present, dragging snaps to the nearest one (measured the short
+     * way around the circle, so 350° snaps to a 0° mark), arrow keys move one
+     * mark, Shift+arrow and PageUp/PageDown move three, and Home/End jump to the
+     * first/last mark. With `restrictToMarks` set but no marks rendered, the
+     * value falls back to the `step` grid rather than becoming unchangeable.
+     * @default false — every angle on the step grid stays reachable.
+     */
+    restrictToMarks?: boolean;
+};
+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, {
+    "update:value": (value: number) => any;
+    "value-change": (value: number) => any;
+    "value-commit": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: number) => any) | undefined;
+    "onValue-change"?: ((value: number) => any) | undefined;
+    "onValue-commit"?: ((value: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: number;
+    defaultValue: number;
+    readOnly: boolean;
+    step: number;
+    restrictToMarks: boolean;
+}, {}, {}, {}, 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/angle-slider/AngleSlider.vue.js

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

package/dist/angle-slider/AngleSlider.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const y=require("../utils/direction.cjs"),M=require("../utils/usePointerAngle.cjs"),d=require("./context.cjs");let a=require("vue");var O=["aria-valuenow","aria-valuetext","aria-disabled","aria-readonly","tabindex","data-value","data-disabled","data-readonly","data-dragging"],P=(0,a.defineComponent)({__name:"AngleSlider",props:{value:{default:void 0},defaultValue:{default:0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},restrictToMarks:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit"],setup(i,{emit:h}){const e=i,s=h,v=(0,a.ref)(e.defaultValue),r=(0,a.computed)(()=>e.value===void 0?v.value:e.value),c=(0,a.ref)(null),g=(0,a.computed)(()=>!e.disabled&&!e.readOnly),f=()=>e.restrictToMarks?d.readMarks(c.value):[];function u(n){const l=f(),t=d.normalizeAngle(n),o=l.length?d.nearestMark(l,t):d.normalizeAngle(d.roundToStep(t,e.step));o!==r.value&&(e.value===void 0&&(v.value=o),s("update:value",o),s("value-change",o))}const{onPointerDown:k,dragging:p}=M.usePointerAngle(c,{step:()=>e.restrictToMarks?0:e.step,onAngleChange:n=>u(n),onAngleChangeEnd:()=>s("value-commit",r.value)});(0,a.provide)(d.ANGLE_SLIDER_CONTEXT,{value:r,step:(0,a.computed)(()=>e.step),disabled:(0,a.computed)(()=>e.disabled),readOnly:(0,a.computed)(()=>e.readOnly),dragging:(0,a.computed)(()=>p.value)});const b=y.useDirection();function x(n){if(!g.value)return;const l=y.directionalKey(n.key,n.currentTarget,b()),t=f();if(l==="Home"||l==="End"){n.preventDefault();const E=e.step>0?Math.floor(359/e.step)*e.step:359;u(l==="Home"?t.length?t[0]:0:t.length?t[t.length-1]:E);return}const o=d.STEP_KEYS[l];if(o===void 0)return;n.preventDefault();const m=l==="PageUp"||l==="PageDown";if(t.length){u(t[((t.indexOf(d.nearestMark(t,r.value))+o*(m||n.shiftKey?3:1))%t.length+t.length)%t.length]);return}const A=e.step>0?e.step:1;u(r.value+o*(m?45:n.shiftKey?10:A))}function _(n){g.value&&k(n)}const w=(0,a.computed)(()=>({"--skdx-angle-slider-angle":`${r.value}deg`}));return(n,l)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-angle-slider","data-part":"root","data-skdx-component":"angle-slider",ref_key:"rootRef",ref:c,role:"slider","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":r.value,"aria-valuetext":`${r.value}°`,"aria-disabled":i.disabled||void 0,"aria-readonly":i.readOnly||void 0,tabindex:i.disabled?-1:0,"data-value":r.value,"data-disabled":i.disabled?"":void 0,"data-readonly":i.readOnly?"":void 0,"data-dragging":(0,a.unref)(p)?"":void 0,style:(0,a.normalizeStyle)([w.value,{"touch-action":"none"}]),onKeydown:x,onPointerdown:_},[(0,a.renderSlot)(n.$slots,"default")],44,O))}});exports.default=P;

package/dist/angle-slider/AngleSlider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{directionalKey as e,useDirection as a}from"../utils/direction.js";import{usePointerAngle as t}from"../utils/usePointerAngle.js";import{ANGLE_SLIDER_CONTEXT as l,STEP_KEYS as n,nearestMark as o,normalizeAngle as d,readMarks as r,roundToStep as s}from"./context.js";import{computed as i,createElementBlock as u,defineComponent as v,normalizeStyle as g,openBlock as p,provide as c,ref as f,renderSlot as m,unref as y}from"vue";var h=["aria-valuenow","aria-valuetext","aria-disabled","aria-readonly","tabindex","data-value","data-disabled","data-readonly","data-dragging"],b=/* @__PURE__ */v({__name:"AngleSlider",props:{value:{default:void 0},defaultValue:{default:0},step:{default:1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},restrictToMarks:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit"],setup(v,{emit:b}){const k=v,x=b,E=f(k.defaultValue),O=i(()=>void 0===k.value?E.value:k.value),T=f(null),A=i(()=>!k.disabled&&!k.readOnly),P=()=>k.restrictToMarks?r(T.value):[];function S(e){const a=P(),t=d(e),l=a.length?o(a,t):d(s(t,k.step));l!==O.value&&(void 0===k.value&&(E.value=l),x("update:value",l),x("value-change",l))}const{onPointerDown:w,dragging:D}=t(T,{step:()=>k.restrictToMarks?0:k.step,onAngleChange:e=>S(e),onAngleChangeEnd:()=>x("value-commit",O.value)});c(l,{value:O,step:i(()=>k.step),disabled:i(()=>k.disabled),readOnly:i(()=>k.readOnly),dragging:i(()=>D.value)});const M=a();function _(a){if(!A.value)return;const t=e(a.key,a.currentTarget,M()),l=P();if("Home"===t||"End"===t){a.preventDefault();const e=k.step>0?Math.floor(359/k.step)*k.step:359;return void S("Home"===t?l.length?l[0]:0:l.length?l[l.length-1]:e)}const d=n[t];if(void 0===d)return;a.preventDefault();const r="PageUp"===t||"PageDown"===t;if(l.length)return void S(l[((l.indexOf(o(l,O.value))+d*(r||a.shiftKey?3:1))%l.length+l.length)%l.length]);const s=k.step>0?k.step:1;S(O.value+d*(r?45:a.shiftKey?10:s))}function B(e){A.value&&w(e)}const K=i(()=>({"--skdx-angle-slider-angle":`${O.value}deg`}));return(e,a)=>(p(),u("div",{class:"skdx-angle-slider","data-part":"root","data-skdx-component":"angle-slider",ref_key:"rootRef",ref:T,role:"slider","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":O.value,"aria-valuetext":`${O.value}°`,"aria-disabled":v.disabled||void 0,"aria-readonly":v.readOnly||void 0,tabindex:v.disabled?-1:0,"data-value":O.value,"data-disabled":v.disabled?"":void 0,"data-readonly":v.readOnly?"":void 0,"data-dragging":y(D)?"":void 0,style:g([K.value,{"touch-action":"none"}]),onKeydown:_,onPointerdown:B},[m(e.$slots,"default")],44,h))}});export{b as default};

package/dist/angle-slider/AngleSliderMark.vue.cjs

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

package/dist/angle-slider/AngleSliderMark.vue.d.cts

@@ -0,0 +1,39 @@
+/**
+ * One tick on an `SkdxAngleSlider`'s dial, sitting at `value` degrees.
+ *
+ * Like the thumb, it ships no positioning: it publishes
+ * `--skdx-angle-slider-mark-angle` (e.g. `90deg`) so a single CSS rule places
+ * every tick around the ring.
+ *
+ * ```css
+ * .my-mark {
+ *   transform: rotate(var(--skdx-angle-slider-mark-angle)) translateY(-70px);
+ * }
+ * ```
+ *
+ * It also carries `data-skdx-angle-slider-mark` and `data-value`, which is how
+ * the root discovers the mark set when `restrictToMarks` is on — found by
+ * attribute at interaction time, so a mark added or removed later needs no
+ * registration. Exposes `data-state="active" | "inactive"` (active when the
+ * slider's value sits on this tick) plus `data-disabled` / `data-readonly`.
+ */
+type __VLS_Props = {
+    /**
+     * The angle in degrees this tick sits at. Published back as
+     * `--skdx-angle-slider-mark-angle` for positioning, and read by the root when
+     * `restrictToMarks` is set.
+     */
+    value: number;
+};
+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/angle-slider/AngleSliderMark.vue.d.ts

@@ -0,0 +1,39 @@
+/**
+ * One tick on an `SkdxAngleSlider`'s dial, sitting at `value` degrees.
+ *
+ * Like the thumb, it ships no positioning: it publishes
+ * `--skdx-angle-slider-mark-angle` (e.g. `90deg`) so a single CSS rule places
+ * every tick around the ring.
+ *
+ * ```css
+ * .my-mark {
+ *   transform: rotate(var(--skdx-angle-slider-mark-angle)) translateY(-70px);
+ * }
+ * ```
+ *
+ * It also carries `data-skdx-angle-slider-mark` and `data-value`, which is how
+ * the root discovers the mark set when `restrictToMarks` is on — found by
+ * attribute at interaction time, so a mark added or removed later needs no
+ * registration. Exposes `data-state="active" | "inactive"` (active when the
+ * slider's value sits on this tick) plus `data-disabled` / `data-readonly`.
+ */
+type __VLS_Props = {
+    /**
+     * The angle in degrees this tick sits at. Published back as
+     * `--skdx-angle-slider-mark-angle` for positioning, and read by the root when
+     * `restrictToMarks` is set.
+     */
+    value: number;
+};
+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/angle-slider/AngleSliderMark.vue.js

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

package/dist/angle-slider/AngleSliderMark.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const t=require("./context.cjs");let e=require("vue");var s=["data-value","data-state","data-disabled","data-readonly"],i=(0,e.defineComponent)({__name:"AngleSliderMark",props:{value:{}},setup(r){const d=r,a=(0,e.inject)(t.ANGLE_SLIDER_CONTEXT);if(!a)throw new Error("<SkdxAngleSliderMark> must be used inside <SkdxAngleSlider>.");const l=(0,e.computed)(()=>t.normalizeAngle(d.value)),n=(0,e.computed)(()=>({"--skdx-angle-slider-mark-angle":`${l.value}deg`}));return(u,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-angle-slider__mark","data-part":"mark","data-skdx-angle-slider-mark":"","data-value":l.value,"data-state":(0,e.unref)(a).value.value===l.value?"active":"inactive","data-disabled":(0,e.unref)(a).disabled.value?"":void 0,"data-readonly":(0,e.unref)(a).readOnly.value?"":void 0,style:(0,e.normalizeStyle)(n.value)},[(0,e.renderSlot)(u.$slots,"default")],12,s))}});exports.default=i;

package/dist/angle-slider/AngleSliderMark.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{ANGLE_SLIDER_CONTEXT as a,normalizeAngle as e}from"./context.js";import{computed as l,createElementBlock as d,defineComponent as t,inject as r,normalizeStyle as s,openBlock as n,renderSlot as o,unref as i}from"vue";var u=["data-value","data-state","data-disabled","data-readonly"],v=/* @__PURE__ */t({__name:"AngleSliderMark",props:{value:{}},setup(t){const v=t,m=r(a);if(!m)throw new Error("<SkdxAngleSliderMark> must be used inside <SkdxAngleSlider>.");const k=l(()=>e(v.value)),c=l(()=>({"--skdx-angle-slider-mark-angle":`${k.value}deg`}));return(a,e)=>(n(),d("div",{class:"skdx-angle-slider__mark","data-part":"mark","data-skdx-angle-slider-mark":"","data-value":k.value,"data-state":i(m).value.value===k.value?"active":"inactive","data-disabled":i(m).disabled.value?"":void 0,"data-readonly":i(m).readOnly.value?"":void 0,style:s(c.value)},[o(a.$slots,"default")],12,u))}});export{v as default};

package/dist/angle-slider/AngleSliderMarks.vue.cjs

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

package/dist/angle-slider/AngleSliderMarks.vue.d.cts

@@ -0,0 +1,26 @@
+/**
+ * Container for an `SkdxAngleSlider`'s tick marks. Structural only — it mirrors
+ * the root's `data-disabled` / `data-readonly` so a brand layer can dim the
+ * whole ring in one rule, and otherwise stays out of the way.
+ *
+ * It is deliberately **not** `aria-hidden`: marks often carry real labels
+ * ("N", "E", "S", "W", "45°"), and hiding them wholesale would throw away text
+ * a screen-reader user may want. Add `aria-hidden` yourself on purely
+ * decorative ticks.
+ *
+ * Marks do not have to live inside it — the root finds them anywhere in its
+ * subtree — but grouping them gives the ring a single positioning context.
+ */
+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/angle-slider/AngleSliderMarks.vue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Container for an `SkdxAngleSlider`'s tick marks. Structural only — it mirrors
+ * the root's `data-disabled` / `data-readonly` so a brand layer can dim the
+ * whole ring in one rule, and otherwise stays out of the way.
+ *
+ * It is deliberately **not** `aria-hidden`: marks often carry real labels
+ * ("N", "E", "S", "W", "45°"), and hiding them wholesale would throw away text
+ * a screen-reader user may want. Add `aria-hidden` yourself on purely
+ * decorative ticks.
+ *
+ * Marks do not have to live inside it — the root finds them anywhere in its
+ * subtree — but grouping them gives the ring a single positioning context.
+ */
+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/angle-slider/AngleSliderMarks.vue.js

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

package/dist/angle-slider/AngleSliderMarks.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const d=require("./context.cjs");let e=require("vue");var t=["data-disabled","data-readonly"],l=(0,e.defineComponent)({__name:"AngleSliderMarks",setup(n){const r=(0,e.inject)(d.ANGLE_SLIDER_CONTEXT);if(!r)throw new Error("<SkdxAngleSliderMarks> must be used inside <SkdxAngleSlider>.");return(a,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-angle-slider__marks","data-part":"marks","data-disabled":(0,e.unref)(r).disabled.value?"":void 0,"data-readonly":(0,e.unref)(r).readOnly.value?"":void 0},[(0,e.renderSlot)(a.$slots,"default")],8,t))}});exports.default=l;

package/dist/angle-slider/AngleSliderMarks.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{ANGLE_SLIDER_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as d,inject as r,openBlock as s,renderSlot as l,unref as t}from"vue";var n=["data-disabled","data-readonly"],o=/* @__PURE__ */d({__name:"AngleSliderMarks",setup(d){const o=r(e);if(!o)throw new Error("<SkdxAngleSliderMarks> must be used inside <SkdxAngleSlider>.");return(e,d)=>(s(),a("div",{class:"skdx-angle-slider__marks","data-part":"marks","data-disabled":t(o).disabled.value?"":void 0,"data-readonly":t(o).readOnly.value?"":void 0},[l(e.$slots,"default")],8,n))}});export{o as default};

package/dist/angle-slider/AngleSliderThumb.vue.cjs

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

package/dist/angle-slider/AngleSliderThumb.vue.d.cts

@@ -0,0 +1,32 @@
+/**
+ * The handle that points at an `SkdxAngleSlider`'s current angle. Purely
+ * visual: `aria-hidden` and out of the tab order, because the root carries the
+ * whole widget's `role="slider"` semantics and takes the single tab stop —
+ * a second focusable element here would announce the same value twice.
+ *
+ * It ships **no positioning**. The root publishes `--skdx-angle-slider-angle`,
+ * so one CSS rule rotates the thumb and nothing recomputes a transform per
+ * frame:
+ *
+ * ```css
+ * .my-thumb {
+ *   transform: rotate(var(--skdx-angle-slider-angle)) translateY(-60px);
+ * }
+ * ```
+ *
+ * Exposes `data-value`, `data-disabled`, `data-readonly` and `data-dragging`
+ * (present while a pointer drag is in flight) for styling.
+ */
+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/angle-slider/AngleSliderThumb.vue.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The handle that points at an `SkdxAngleSlider`'s current angle. Purely
+ * visual: `aria-hidden` and out of the tab order, because the root carries the
+ * whole widget's `role="slider"` semantics and takes the single tab stop —
+ * a second focusable element here would announce the same value twice.
+ *
+ * It ships **no positioning**. The root publishes `--skdx-angle-slider-angle`,
+ * so one CSS rule rotates the thumb and nothing recomputes a transform per
+ * frame:
+ *
+ * ```css
+ * .my-thumb {
+ *   transform: rotate(var(--skdx-angle-slider-angle)) translateY(-60px);
+ * }
+ * ```
+ *
+ * Exposes `data-value`, `data-disabled`, `data-readonly` and `data-dragging`
+ * (present while a pointer drag is in flight) for styling.
+ */
+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/angle-slider/AngleSliderThumb.vue.js

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

package/dist/angle-slider/AngleSliderThumb.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","data-dragging"],l=(0,e.defineComponent)({__name:"AngleSliderThumb",setup(n){const a=(0,e.inject)(r.ANGLE_SLIDER_CONTEXT);if(!a)throw new Error("<SkdxAngleSliderThumb> must be used inside <SkdxAngleSlider>.");return(d,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-angle-slider__thumb","data-part":"thumb","aria-hidden":"true","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,"data-dragging":(0,e.unref)(a).dragging.value?"":void 0},[(0,e.renderSlot)(d.$slots,"default")],8,t))}});exports.default=l;

package/dist/angle-slider/AngleSliderThumb.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{ANGLE_SLIDER_CONTEXT as a}from"./context.js";import{createElementBlock as e,defineComponent as d,inject as t,openBlock as l,renderSlot as r,unref as n}from"vue";var i=["data-value","data-disabled","data-readonly","data-dragging"],s=/* @__PURE__ */d({__name:"AngleSliderThumb",setup(d){const s=t(a);if(!s)throw new Error("<SkdxAngleSliderThumb> must be used inside <SkdxAngleSlider>.");return(a,d)=>(l(),e("div",{class:"skdx-angle-slider__thumb","data-part":"thumb","aria-hidden":"true","data-value":n(s).value.value,"data-disabled":n(s).disabled.value?"":void 0,"data-readonly":n(s).readOnly.value?"":void 0,"data-dragging":n(s).dragging.value?"":void 0},[r(a.$slots,"default")],8,i))}});export{s as default};

package/dist/angle-slider/context.cjs

@@ -0,0 +1 @@
+var u="[data-skdx-angle-slider-mark]",l={ArrowRight:1,ArrowUp:1,ArrowLeft:-1,ArrowDown:-1,PageUp:1,PageDown:-1};function s(r){return(r%360+360)%360}function E(r,t){return t<=0?r:Math.round(Math.round(r/t)*t*1e6)/1e6}function d(r){if(!r)return[];const t=Array.from(r.querySelectorAll(u),e=>Number(e.getAttribute("data-value"))).filter(e=>Number.isFinite(e));return[...new Set(t.map(s))].sort((e,n)=>e-n)}function f(r,t){let e=r[0],n=1/0;for(const a of r){const o=Math.abs(a-t),i=Math.min(o,360-o);i<n&&(n=i,e=a)}return e}var A=Symbol("skdx-angle-slider-context");exports.ANGLE_SLIDER_CONTEXT=A;exports.MARK_SELECTOR=u;exports.STEP_KEYS=l;exports.nearestMark=f;exports.normalizeAngle=s;exports.readMarks=d;exports.roundToStep=E;