@skdx/vue 0.26.0 → 0.28.0

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

@@ -1,15 +1,11 @@
 /**
  * Backdrop rendered behind `SkdxAlertDialogContent`, typically styled to dim
  * the page. Exposes `data-state` (`open`/`closed`) for animation and mounts
- * only while open unless `forceMount` is set. Must be used inside
+ * only while open unless `forceMount` is set. Inert styling hook: the
+ * `SkdxAlertDialogContent` panel's own pointer events and focus trapping manage
+ * outside clicks. This part exists for anatomy parity across frameworks and
+ * survives ancestors with `pointer-events: none`. Must be used inside
  * `SkdxAlertDialog`.
- *
- * `pointer-events: auto` matches React's `AlertDialogOverlay`. Here it is inert
- * — `SkdxAlertDialogContent` is a native `<dialog>` shown with `showModal()`, so
- * its `::backdrop` is what actually catches outside clicks — but it keeps the
- * rendered style identical across ports, and it survives an ancestor that sets
- * `pointer-events: none`. Declared on the element, so a consumer's fallthrough
- * `style` merges over it and still wins.
  */
 type __VLS_Props = {
     /** Keep this overlay mounted even while the alert dialog is closed, instead of unmounting it. */

package/dist/alert-dialog/AlertDialogOverlay.vue.d.ts

@@ -1,15 +1,11 @@
 /**
  * Backdrop rendered behind `SkdxAlertDialogContent`, typically styled to dim
  * the page. Exposes `data-state` (`open`/`closed`) for animation and mounts
- * only while open unless `forceMount` is set. Must be used inside
+ * only while open unless `forceMount` is set. Inert styling hook: the
+ * `SkdxAlertDialogContent` panel's own pointer events and focus trapping manage
+ * outside clicks. This part exists for anatomy parity across frameworks and
+ * survives ancestors with `pointer-events: none`. Must be used inside
  * `SkdxAlertDialog`.
- *
- * `pointer-events: auto` matches React's `AlertDialogOverlay`. Here it is inert
- * — `SkdxAlertDialogContent` is a native `<dialog>` shown with `showModal()`, so
- * its `::backdrop` is what actually catches outside clicks — but it keeps the
- * rendered style identical across ports, and it survives an ancestor that sets
- * `pointer-events: none`. Declared on the element, so a consumer's fallthrough
- * `style` merges over it and still wins.
  */
 type __VLS_Props = {
     /** Keep this overlay mounted even while the alert dialog is closed, instead of unmounting it. */

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

@@ -1,9 +1,9 @@
 import type { PortalContainer } from '../utils/portal.cjs';
 /**
  * Teleports `SkdxAlertDialogOverlay` and `SkdxAlertDialogContent` to
- * `document.body` (or a custom `container`), so the alert dialog escapes any clipping/`overflow`
- * ancestors. Mounts only while open unless `forceMount` is set. Must be
- * used inside `SkdxAlertDialog`.
+ * `document.body` (or a custom `container`), so the alert dialog escapes any
+ * clipping/`overflow` ancestors. Mounts only while open unless `forceMount` is
+ * set. Must be used inside `SkdxAlertDialog`.
  */
 type __VLS_Props = {
     /**

package/dist/alert-dialog/AlertDialogPortal.vue.d.ts

@@ -1,9 +1,9 @@
 import type { PortalContainer } from '../utils/portal.js';
 /**
  * Teleports `SkdxAlertDialogOverlay` and `SkdxAlertDialogContent` to
- * `document.body` (or a custom `container`), so the alert dialog escapes any clipping/`overflow`
- * ancestors. Mounts only while open unless `forceMount` is set. Must be
- * used inside `SkdxAlertDialog`.
+ * `document.body` (or a custom `container`), so the alert dialog escapes any
+ * clipping/`overflow` ancestors. Mounts only while open unless `forceMount` is
+ * set. Must be used inside `SkdxAlertDialog`.
  */
 type __VLS_Props = {
     /**

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

@@ -1,7 +1,8 @@
 /**
- * The alert dialog's accessible name: renders an `<h2>` wired to
- * `SkdxAlertDialogContent` via `aria-labelledby`. Every alert dialog should
- * include one. Must be used inside `SkdxAlertDialog`.
+ * Alert dialog's accessible name: renders `<h2>` and registers with the root
+ * so `SkdxAlertDialogContent` can emit `aria-labelledby`. Without a Title, the
+ * attribute is omitted rather than dangling. Must be used inside
+ * `SkdxAlertDialog`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/alert-dialog/AlertDialogTitle.vue.d.ts

@@ -1,7 +1,8 @@
 /**
- * The alert dialog's accessible name: renders an `<h2>` wired to
- * `SkdxAlertDialogContent` via `aria-labelledby`. Every alert dialog should
- * include one. Must be used inside `SkdxAlertDialog`.
+ * Alert dialog's accessible name: renders `<h2>` and registers with the root
+ * so `SkdxAlertDialogContent` can emit `aria-labelledby`. Without a Title, the
+ * attribute is omitted rather than dangling. Must be used inside
+ * `SkdxAlertDialog`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1 +1 @@
-const l=require("./context.cjs");let e=require("vue");var i=["id"],o=(0,e.defineComponent)({__name:"AlertDialogTitle",setup(_){const t=(0,e.inject)(l.ALERT_DIALOG_CONTEXT);if(!t)throw new Error("SkdxAlertDialogTitle must be used within SkdxAlertDialog.");return(r,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("h2",{class:"skdx-alert-dialog__title","data-part":"title",id:(0,e.unref)(t).titleId},[(0,e.renderSlot)(r.$slots,"default")],8,i))}});exports.default=o;
+const r=require("./context.cjs");let e=require("vue");var i=["id"],a=(0,e.defineComponent)({__name:"AlertDialogTitle",setup(o){const t=(0,e.inject)(r.ALERT_DIALOG_CONTEXT);if(!t)throw new Error("SkdxAlertDialogTitle must be used within SkdxAlertDialog.");return t.setHasTitle(!0),(0,e.onUnmounted)(()=>t.setHasTitle(!1)),(l,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("h2",{class:"skdx-alert-dialog__title","data-part":"title",id:(0,e.unref)(t).titleId},[(0,e.renderSlot)(l.$slots,"default")],8,i))}});exports.default=a;

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

@@ -1 +1 @@
-import{ALERT_DIALOG_CONTEXT as t}from"./context.js";import{createElementBlock as e,defineComponent as a,inject as l,openBlock as r,renderSlot as o,unref as i}from"vue";var s=["id"],n=/* @__PURE__ */a({__name:"AlertDialogTitle",setup(a){const n=l(t);if(!n)throw new Error("SkdxAlertDialogTitle must be used within SkdxAlertDialog.");return(t,a)=>(r(),e("h2",{class:"skdx-alert-dialog__title","data-part":"title",id:i(n).titleId},[o(t.$slots,"default")],8,s))}});export{n as default};
+import{ALERT_DIALOG_CONTEXT as t}from"./context.js";import{createElementBlock as e,defineComponent as a,inject as l,onUnmounted as s,openBlock as o,renderSlot as r,unref as i}from"vue";var n=["id"],d=/* @__PURE__ */a({__name:"AlertDialogTitle",setup(a){const d=l(t);if(!d)throw new Error("SkdxAlertDialogTitle must be used within SkdxAlertDialog.");return d.setHasTitle(!0),s(()=>d.setHasTitle(!1)),(t,a)=>(o(),e("h2",{class:"skdx-alert-dialog__title","data-part":"title",id:i(d).titleId},[r(t.$slots,"default")],8,n))}});export{d as default};

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

@@ -1,4 +1,8 @@
-import type { InjectionKey, Ref } from 'vue';
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+/** Close interactions: 'escape' or 'none'. WAI-ARIA alertdialog requires answer. */
+export type AlertDialogDismiss = 'escape' | 'none';
+/** Tone token for data-tone (skin concern, not color). */
+export type AlertDialogTone = 'neutral' | 'danger';
 /** @internal Injection key an AlertDialog provides so its parts can read/drive shared state. */
 export interface AlertDialogContext {
     triggerRef: Ref<HTMLElement | null>;
@@ -6,7 +10,15 @@ export interface AlertDialogContext {
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** Register Title presence for aria-labelledby. */
+    hasTitle: ComputedRef<boolean>;
+    /** Register Description presence for aria-describedby. */
+    hasDescription: ComputedRef<boolean>;
+    setHasTitle(present: boolean): void;
+    setHasDescription(present: boolean): void;
     open: Readonly<Ref<boolean>>;
+    /** Dismissal policy; gates Escape and data-dismiss. */
+    dismiss: Readonly<Ref<AlertDialogDismiss>>;
     setOpen(open: boolean): void;
 }
 /** @internal Injection key an AlertDialog provides so its trigger/content parts can read/drive open state and shared ids. */

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

@@ -1,4 +1,8 @@
-import type { InjectionKey, Ref } from 'vue';
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+/** Close interactions: 'escape' or 'none'. WAI-ARIA alertdialog requires answer. */
+export type AlertDialogDismiss = 'escape' | 'none';
+/** Tone token for data-tone (skin concern, not color). */
+export type AlertDialogTone = 'neutral' | 'danger';
 /** @internal Injection key an AlertDialog provides so its parts can read/drive shared state. */
 export interface AlertDialogContext {
     triggerRef: Ref<HTMLElement | null>;
@@ -6,7 +10,15 @@ export interface AlertDialogContext {
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** Register Title presence for aria-labelledby. */
+    hasTitle: ComputedRef<boolean>;
+    /** Register Description presence for aria-describedby. */
+    hasDescription: ComputedRef<boolean>;
+    setHasTitle(present: boolean): void;
+    setHasDescription(present: boolean): void;
     open: Readonly<Ref<boolean>>;
+    /** Dismissal policy; gates Escape and data-dismiss. */
+    dismiss: Readonly<Ref<AlertDialogDismiss>>;
     setOpen(open: boolean): void;
 }
 /** @internal Injection key an AlertDialog provides so its trigger/content parts can read/drive open state and shared ids. */

package/dist/alert-dialog/focusTargets.cjs

@@ -0,0 +1 @@
+const a=require("../utils/is-dev-mode.cjs");function i(t,e,l){if(!e)return null;let n;try{n=t.querySelector(e)}catch{return a.isDevMode()&&console.warn(`[skdx] AlertDialog: ${l}="${e}" is not a valid CSS selector. Falling back to the default focus target.`),null}return!n&&a.isDevMode()&&console.warn(o(l,e)),n}function o(t,e){return t==="initialFocus"?`[skdx] AlertDialog: initialFocus="${e}" matched no element inside the alert dialog panel. Falling back to the Cancel button, then the first tabbable element, then the panel itself.`:`[skdx] AlertDialog: finalFocus="${e}" matched no element in the document. Falling back to the element that was focused before the alert dialog opened.`}exports.resolveFocusSelector=i;

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

@@ -0,0 +1,7 @@
+/**
+ * CSS selector strings for initial/final focus (not element handles, survives
+ * HTML boundaries). Miss degrades to automatic target with warning. Warning not
+ * gated by dev flag.
+ * @internal
+ */
+export declare function resolveFocusSelector(root: ParentNode, selector: string | undefined, prop: 'initialFocus' | 'finalFocus'): HTMLElement | null;

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

@@ -0,0 +1,7 @@
+/**
+ * CSS selector strings for initial/final focus (not element handles, survives
+ * HTML boundaries). Miss degrades to automatic target with warning. Warning not
+ * gated by dev flag.
+ * @internal
+ */
+export declare function resolveFocusSelector(root: ParentNode, selector: string | undefined, prop: 'initialFocus' | 'finalFocus'): HTMLElement | null;

package/dist/alert-dialog/focusTargets.js

@@ -0,0 +1 @@
+import{isDevMode as e}from"../utils/is-dev-mode.js";function t(t,l,n){if(!l)return null;let o;try{o=t.querySelector(l)}catch{return e()&&console.warn(`[skdx] AlertDialog: ${n}="${l}" is not a valid CSS selector. Falling back to the default focus target.`),null}return!o&&e()&&console.warn(function(e,t){return"initialFocus"===e?`[skdx] AlertDialog: initialFocus="${t}" matched no element inside the alert dialog panel. Falling back to the Cancel button, then the first tabbable element, then the panel itself.`:`[skdx] AlertDialog: finalFocus="${t}" matched no element in the document. Falling back to the element that was focused before the alert dialog opened.`}(n,l)),o}export{t as resolveFocusSelector};

package/dist/alert-dialog/index.cjs

@@ -1 +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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./AlertDialog.vue.cjs");exports.SkdxAlertDialog=e.default;

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

@@ -1,9 +1,2 @@
 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';
+export type { AlertDialogDismiss, AlertDialogTone } from './context.cjs';

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

@@ -1,9 +1,2 @@
 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';
+export type { AlertDialogDismiss, AlertDialogTone } from './context.js';

package/dist/alert-dialog/index.js

@@ -1 +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};
+import o from"./AlertDialog.vue.js";export{o as SkdxAlertDialog};

package/dist/alert-dialog/primitives.cjs

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

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

@@ -0,0 +1,33 @@
+/**
+ * Primitives for `SkdxAlertDialog` — composable building blocks.
+ * Use these when you need a custom layout beyond the derived recipe.
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxAlertDialog, SkdxAlertDialogAction, SkdxAlertDialogCancel, SkdxAlertDialogContent, SkdxAlertDialogOverlay, SkdxAlertDialogPortal, SkdxAlertDialogTitle, SkdxAlertDialogTrigger } from '@skdx/vue/primitives/alert-dialog';
+ * </script>
+ *
+ * <template>
+ *   <SkdxAlertDialog v-model:open="open">
+ *     <SkdxAlertDialogTrigger>Delete</SkdxAlertDialogTrigger>
+ *     <SkdxAlertDialogPortal>
+ *       <SkdxAlertDialogOverlay />
+ *       <SkdxAlertDialogContent>
+ *         <SkdxAlertDialogTitle>Delete item?</SkdxAlertDialogTitle>
+ *         <SkdxAlertDialogCancel>Cancel</SkdxAlertDialogCancel>
+ *         <SkdxAlertDialogAction @click="onDelete">Delete</SkdxAlertDialogAction>
+ *       </SkdxAlertDialogContent>
+ *     </SkdxAlertDialogPortal>
+ *   </SkdxAlertDialog>
+ * </template>
+ * ```
+ */
+export { default as SkdxAlertDialog } from './AlertDialog.vue.cjs';
+export { default as SkdxAlertDialogAction } from './AlertDialogAction.vue.cjs';
+export { default as SkdxAlertDialogCancel } from './AlertDialogCancel.vue.cjs';
+export { default as SkdxAlertDialogContent } from './AlertDialogContent.vue.cjs';
+export { default as SkdxAlertDialogDescription } from './AlertDialogDescription.vue.cjs';
+export { default as SkdxAlertDialogOverlay } from './AlertDialogOverlay.vue.cjs';
+export { default as SkdxAlertDialogPortal } from './AlertDialogPortal.vue.cjs';
+export { default as SkdxAlertDialogTitle } from './AlertDialogTitle.vue.cjs';
+export { default as SkdxAlertDialogTrigger } from './AlertDialogTrigger.vue.cjs';

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

@@ -0,0 +1,33 @@
+/**
+ * Primitives for `SkdxAlertDialog` — composable building blocks.
+ * Use these when you need a custom layout beyond the derived recipe.
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxAlertDialog, SkdxAlertDialogAction, SkdxAlertDialogCancel, SkdxAlertDialogContent, SkdxAlertDialogOverlay, SkdxAlertDialogPortal, SkdxAlertDialogTitle, SkdxAlertDialogTrigger } from '@skdx/vue/primitives/alert-dialog';
+ * </script>
+ *
+ * <template>
+ *   <SkdxAlertDialog v-model:open="open">
+ *     <SkdxAlertDialogTrigger>Delete</SkdxAlertDialogTrigger>
+ *     <SkdxAlertDialogPortal>
+ *       <SkdxAlertDialogOverlay />
+ *       <SkdxAlertDialogContent>
+ *         <SkdxAlertDialogTitle>Delete item?</SkdxAlertDialogTitle>
+ *         <SkdxAlertDialogCancel>Cancel</SkdxAlertDialogCancel>
+ *         <SkdxAlertDialogAction @click="onDelete">Delete</SkdxAlertDialogAction>
+ *       </SkdxAlertDialogContent>
+ *     </SkdxAlertDialogPortal>
+ *   </SkdxAlertDialog>
+ * </template>
+ * ```
+ */
+export { default as SkdxAlertDialog } from './AlertDialog.vue.js';
+export { default as SkdxAlertDialogAction } from './AlertDialogAction.vue.js';
+export { default as SkdxAlertDialogCancel } from './AlertDialogCancel.vue.js';
+export { default as SkdxAlertDialogContent } from './AlertDialogContent.vue.js';
+export { default as SkdxAlertDialogDescription } from './AlertDialogDescription.vue.js';
+export { default as SkdxAlertDialogOverlay } from './AlertDialogOverlay.vue.js';
+export { default as SkdxAlertDialogPortal } from './AlertDialogPortal.vue.js';
+export { default as SkdxAlertDialogTitle } from './AlertDialogTitle.vue.js';
+export { default as SkdxAlertDialogTrigger } from './AlertDialogTrigger.vue.js';

package/dist/alert-dialog/primitives.js

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

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

@@ -1,3 +1,5 @@
+import { type SkdxAngleSliderValueChangeDetail } from './context.cjs';
+import type { AngleSliderMarkData } from './types.cjs';
 /**
  * The Vue implementation of the shared AngleSlider contract (see
  * `@skdx/shared`'s `angleSliderContract`) — a dial whose value is a
@@ -21,6 +23,16 @@
  *
  * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
  * unnamed slider announces a bare number of degrees.
+ *
+ * Given no default slot content it derives the Thumb, plus a Marks container
+ * holding one Mark per entry in `marks`. Given one, that content is the body
+ * and nothing is derived. Only presence is inspected, never what the slot
+ * holds. The parts are advanced primitives —
+ * `@skdx/vue/primitives/angle-slider`.
+ *
+ * ```vue
+ * <SkdxAngleSlider :default-value="45" aria-label="Gradient angle" />
+ * ```
  */
 type __VLS_Props = {
     /**
@@ -70,6 +82,33 @@ type __VLS_Props = {
      * @default false — every angle on the step grid stays reachable.
      */
     restrictToMarks?: boolean;
+    /**
+     * Formats the angle for `aria-valuetext`, which is what a screen reader
+     * announces in place of the bare `aria-valuenow`. Supply it to localise the
+     * announcement, or to announce something that is not degrees at all — a
+     * compass bearing, a clock position. Returning an empty string is treated
+     * as no override.
+     * @default (angle) => `${angle}°`
+     */
+    formatValue?: (angle: number) => string;
+    /**
+     * Form field name. With it the current angle is submitted under that name
+     * through a visually-hidden input; without it the dial submits nothing.
+     * @default undefined — the dial submits nothing.
+     */
+    name?: string;
+    /**
+     * Id of the `<form>` the dial submits into, forwarded to the hidden input,
+     * so a dial can live outside the form it belongs to.
+     * @default undefined
+     */
+    form?: string;
+    /**
+     * Ticks rendered around the dial, each a derived Mark. Also what
+     * `restrictToMarks` reads when supplied — see that prop.
+     * @default undefined — no marks rendered.
+     */
+    marks?: readonly AngleSliderMarkData[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -77,19 +116,23 @@ type __VLS_Slots = {} & {
 };
 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-change": (detail: SkdxAngleSliderValueChangeDetail) => 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-change"?: ((detail: SkdxAngleSliderValueChangeDetail) => any) | undefined;
     "onValue-commit"?: ((value: number) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
     value: number;
-    defaultValue: number;
     readOnly: boolean;
+    name: string;
+    defaultValue: number;
     step: number;
+    marks: readonly AngleSliderMarkData[];
     restrictToMarks: boolean;
+    formatValue: (angle: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,3 +1,5 @@
+import { type SkdxAngleSliderValueChangeDetail } from './context.js';
+import type { AngleSliderMarkData } from './types.js';
 /**
  * The Vue implementation of the shared AngleSlider contract (see
  * `@skdx/shared`'s `angleSliderContract`) — a dial whose value is a
@@ -21,6 +23,16 @@
  *
  * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
  * unnamed slider announces a bare number of degrees.
+ *
+ * Given no default slot content it derives the Thumb, plus a Marks container
+ * holding one Mark per entry in `marks`. Given one, that content is the body
+ * and nothing is derived. Only presence is inspected, never what the slot
+ * holds. The parts are advanced primitives —
+ * `@skdx/vue/primitives/angle-slider`.
+ *
+ * ```vue
+ * <SkdxAngleSlider :default-value="45" aria-label="Gradient angle" />
+ * ```
  */
 type __VLS_Props = {
     /**
@@ -70,6 +82,33 @@ type __VLS_Props = {
      * @default false — every angle on the step grid stays reachable.
      */
     restrictToMarks?: boolean;
+    /**
+     * Formats the angle for `aria-valuetext`, which is what a screen reader
+     * announces in place of the bare `aria-valuenow`. Supply it to localise the
+     * announcement, or to announce something that is not degrees at all — a
+     * compass bearing, a clock position. Returning an empty string is treated
+     * as no override.
+     * @default (angle) => `${angle}°`
+     */
+    formatValue?: (angle: number) => string;
+    /**
+     * Form field name. With it the current angle is submitted under that name
+     * through a visually-hidden input; without it the dial submits nothing.
+     * @default undefined — the dial submits nothing.
+     */
+    name?: string;
+    /**
+     * Id of the `<form>` the dial submits into, forwarded to the hidden input,
+     * so a dial can live outside the form it belongs to.
+     * @default undefined
+     */
+    form?: string;
+    /**
+     * Ticks rendered around the dial, each a derived Mark. Also what
+     * `restrictToMarks` reads when supplied — see that prop.
+     * @default undefined — no marks rendered.
+     */
+    marks?: readonly AngleSliderMarkData[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -77,19 +116,23 @@ type __VLS_Slots = {} & {
 };
 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-change": (detail: SkdxAngleSliderValueChangeDetail) => 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-change"?: ((detail: SkdxAngleSliderValueChangeDetail) => any) | undefined;
     "onValue-commit"?: ((value: number) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
     value: number;
-    defaultValue: number;
     readOnly: boolean;
+    name: string;
+    defaultValue: number;
     step: number;
+    marks: readonly AngleSliderMarkData[];
     restrictToMarks: boolean;
+    formatValue: (angle: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1 +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;
+const q=require("../utils/useFormReset.cjs"),E=require("../utils/usePointerAngle.cjs"),d=require("./context.cjs"),M=require("./AngleSliderAnatomy.vue.cjs");let a=require("vue");var O=["aria-valuemax","aria-valuenow","aria-valuetext","aria-disabled","aria-readonly","tabindex","data-value","data-disabled","data-readonly","data-dragging"],P=["name","value","disabled","form"],T=(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},formatValue:{type:Function,default:void 0},name:{default:void 0},form:{default:void 0},marks:{default:void 0}},emits:["update:value","value-change","value-commit"],setup(r,{emit:k}){const e=r,c=k,f=(0,a.ref)(e.defaultValue),n=(0,a.computed)(()=>e.value===void 0?f.value:e.value),v=(0,a.ref)(null),g=(0,a.computed)(()=>!e.disabled&&!e.readOnly),p=()=>e.restrictToMarks?e.marks?[...new Set(e.marks.map(t=>d.normalizeAngle(t.value)))].sort((t,o)=>t-o):d.readMarks(v.value):[];function i(t,o){const l=p(),s=d.normalizeAngle(t),u=l.length?d.nearestMark(l,s):d.normalizeAngle(d.roundToStep(s,e.step));if(u===n.value)return;const m=n.value;e.value===void 0&&(f.value=u),c("update:value",u),c("value-change",{value:u,previousValue:m,reason:o})}const{onPointerDown:h,dragging:y}=E.usePointerAngle(v,{step:()=>e.restrictToMarks?0:e.step,onAngleChange:t=>i(t,"pointer"),onAngleChangeEnd:()=>c("value-commit",n.value)});(0,a.provide)(d.ANGLE_SLIDER_CONTEXT,{value:n,step:(0,a.computed)(()=>e.step),disabled:(0,a.computed)(()=>e.disabled),readOnly:(0,a.computed)(()=>e.readOnly),dragging:(0,a.computed)(()=>y.value)});function b(t){if(!g.value)return;const o=t.key,l=p();if(o==="Home"||o==="End"){t.preventDefault();const V=e.step>0?Math.floor(359/e.step)*e.step:359;i(o==="Home"?l.length?l[0]:0:l.length?l[l.length-1]:V,"keyboard");return}const s=d.STEP_KEYS[o];if(s===void 0)return;t.preventDefault();const u=o==="PageUp"||o==="PageDown";if(l.length){i(l[((l.indexOf(d.nearestMark(l,n.value))+s*(u||t.shiftKey?3:1))%l.length+l.length)%l.length],"keyboard");return}const m=e.step>0?e.step:1;i(n.value+s*(u?45:t.shiftKey?10:m),"keyboard")}function x(t){g.value&&h(t)}const A=(0,a.computed)(()=>({"--skdx-angle-slider-angle":`${n.value}deg`})),w=(0,a.computed)(()=>e.step>0?Math.floor(359/e.step)*e.step:359),S=(0,a.computed)(()=>e.formatValue?.(n.value)||`${n.value}°`);return q.useFormReset(()=>v.value,()=>{n.value!==d.normalizeAngle(e.defaultValue)&&i(e.defaultValue,"programmatic")}),(t,o)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-angle-slider","data-part":"root","data-skdx-component":"angle-slider",ref_key:"rootRef",ref:v,role:"slider","aria-valuemin":0,"aria-valuemax":w.value,"aria-valuenow":n.value,"aria-valuetext":S.value,"aria-disabled":r.disabled||void 0,"aria-readonly":r.readOnly||void 0,tabindex:r.disabled?-1:0,"data-value":n.value,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,"data-dragging":(0,a.unref)(y)?"":void 0,style:(0,a.normalizeStyle)([A.value,{"touch-action":"none"}]),onKeydown:b,onPointerdown:x},[(0,a.renderSlot)(t.$slots,"default",{},()=>[(0,a.createVNode)(M.default,{marks:r.marks},null,8,["marks"])]),r.name?((0,a.openBlock)(),(0,a.createElementBlock)("input",{key:0,type:"hidden",name:r.name,value:n.value,disabled:r.disabled||void 0,form:r.form,"aria-hidden":"true",tabindex:"-1"},null,8,P)):(0,a.createCommentVNode)("",!0)],44,O))}});exports.default=T;

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

@@ -1 +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};
+import{useFormReset as e}from"../utils/useFormReset.js";import{usePointerAngle as a}from"../utils/usePointerAngle.js";import{ANGLE_SLIDER_CONTEXT as t,STEP_KEYS as l,nearestMark as n,normalizeAngle as o,readMarks as d,roundToStep as r}from"./context.js";import s from"./AngleSliderAnatomy.vue.js";import{computed as u,createCommentVNode as i,createElementBlock as v,createVNode as m,defineComponent as f,normalizeStyle as p,openBlock as g,provide as c,ref as y,renderSlot as k,unref as b}from"vue";var h=["aria-valuemax","aria-valuenow","aria-valuetext","aria-disabled","aria-readonly","tabindex","data-value","data-disabled","data-readonly","data-dragging"],x=["name","value","disabled","form"],A=/* @__PURE__ */f({__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},formatValue:{type:Function,default:void 0},name:{default:void 0},form:{default:void 0},marks:{default:void 0}},emits:["update:value","value-change","value-commit"],setup(f,{emit:A}){const S=f,V=A,E=y(S.defaultValue),O=u(()=>void 0===S.value?E.value:S.value),w=y(null),M=u(()=>!S.disabled&&!S.readOnly),P=()=>S.restrictToMarks?S.marks?[...new Set(S.marks.map(e=>o(e.value)))].sort((e,a)=>e-a):d(w.value):[];function T(e,a){const t=P(),l=o(e),d=t.length?n(t,l):o(r(l,S.step));if(d===O.value)return;const s=O.value;void 0===S.value&&(E.value=d),V("update:value",d),V("value-change",{value:d,previousValue:s,reason:a})}const{onPointerDown:_,dragging:B}=a(w,{step:()=>S.restrictToMarks?0:S.step,onAngleChange:e=>T(e,"pointer"),onAngleChangeEnd:()=>V("value-commit",O.value)});function C(e){if(!M.value)return;const a=e.key,t=P();if("Home"===a||"End"===a){e.preventDefault();const l=S.step>0?Math.floor(359/S.step)*S.step:359;return void T("Home"===a?t.length?t[0]:0:t.length?t[t.length-1]:l,"keyboard")}const o=l[a];if(void 0===o)return;e.preventDefault();const d="PageUp"===a||"PageDown"===a;if(t.length)return void T(t[((t.indexOf(n(t,O.value))+o*(d||e.shiftKey?3:1))%t.length+t.length)%t.length],"keyboard");const r=S.step>0?S.step:1;T(O.value+o*(d?45:e.shiftKey?10:r),"keyboard")}function D(e){M.value&&_(e)}c(t,{value:O,step:u(()=>S.step),disabled:u(()=>S.disabled),readOnly:u(()=>S.readOnly),dragging:u(()=>B.value)});const j=u(()=>({"--skdx-angle-slider-angle":`${O.value}deg`})),K=u(()=>S.step>0?Math.floor(359/S.step)*S.step:359),N=u(()=>S.formatValue?.(O.value)||`${O.value}°`);return e(()=>w.value,()=>{O.value!==o(S.defaultValue)&&T(S.defaultValue,"programmatic")}),(e,a)=>(g(),v("div",{class:"skdx-angle-slider","data-part":"root","data-skdx-component":"angle-slider",ref_key:"rootRef",ref:w,role:"slider","aria-valuemin":0,"aria-valuemax":K.value,"aria-valuenow":O.value,"aria-valuetext":N.value,"aria-disabled":f.disabled||void 0,"aria-readonly":f.readOnly||void 0,tabindex:f.disabled?-1:0,"data-value":O.value,"data-disabled":f.disabled?"":void 0,"data-readonly":f.readOnly?"":void 0,"data-dragging":b(B)?"":void 0,style:p([j.value,{"touch-action":"none"}]),onKeydown:C,onPointerdown:D},[k(e.$slots,"default",{},()=>[m(s,{marks:f.marks},null,8,["marks"])]),f.name?(g(),v("input",{key:0,type:"hidden",name:f.name,value:O.value,disabled:f.disabled||void 0,form:f.form,"aria-hidden":"true",tabindex:"-1"},null,8,x)):i("",!0)],44,h))}});export{A as default};

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

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

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

@@ -0,0 +1,13 @@
+import type { AngleSliderMarkData } from './types.cjs';
+/**
+ * Anatomy: Thumb + Marks container with one Mark per entry. Keep in sync with
+ * React's `AngleSliderAnatomy.tsx`.
+ * @internal
+ */
+type __VLS_Props = {
+    marks?: readonly AngleSliderMarkData[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    marks: readonly AngleSliderMarkData[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/angle-slider/AngleSliderAnatomy.vue.d.ts

@@ -0,0 +1,13 @@
+import type { AngleSliderMarkData } from './types.js';
+/**
+ * Anatomy: Thumb + Marks container with one Mark per entry. Keep in sync with
+ * React's `AngleSliderAnatomy.tsx`.
+ * @internal
+ */
+type __VLS_Props = {
+    marks?: readonly AngleSliderMarkData[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    marks: readonly AngleSliderMarkData[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/angle-slider/AngleSliderAnatomy.vue.js

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

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

@@ -0,0 +1 @@
+const l=require("./AngleSliderMark.vue.cjs"),a=require("./AngleSliderMarks.vue.cjs"),u=require("./AngleSliderThumb.vue.cjs");let e=require("vue");var n=(0,e.defineComponent)({__name:"AngleSliderAnatomy",props:{marks:{default:void 0}},setup(t){return(o,c)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(u.default),t.marks&&t.marks.length?((0,e.openBlock)(),(0,e.createBlock)(a.default,{key:0},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.marks,r=>((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:r.value,value:r.value},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.label),1)]),_:2},1032,["value"]))),128))]),_:1})):(0,e.createCommentVNode)("",!0)],64))}});exports.default=n;

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

@@ -0,0 +1 @@
+import e from"./AngleSliderMark.vue.js";import a from"./AngleSliderMarks.vue.js";import r from"./AngleSliderThumb.vue.js";import{Fragment as l,createBlock as t,createCommentVNode as s,createElementBlock as o,createTextVNode as m,createVNode as n,defineComponent as u,openBlock as d,renderList as i,toDisplayString as k,withCtx as p}from"vue";var v=/* @__PURE__ */u({__name:"AngleSliderAnatomy",props:{marks:{default:void 0}},setup:u=>(v,f)=>(d(),o(l,null,[n(r),u.marks&&u.marks.length?(d(),t(a,{key:0},{default:p(()=>[(d(!0),o(l,null,i(u.marks,a=>(d(),t(e,{key:a.value,value:a.value},{default:p(()=>[m(k(a.label),1)]),_:2},1032,["value"]))),128))]),_:1})):s("",!0)],64))});export{v as default};

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

@@ -1,21 +1,8 @@
 /**
- * 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`.
+ * One tick at `value` degrees on an `SkdxAngleSlider`'s dial. No positioning
+ * (use CSS with `--skdx-angle-slider-mark-angle`). Root discovers marks by
+ * `data-value` when `restrictToMarks` is on. Exposes `data-state`
+ * (active/inactive), `data-disabled`, `data-readonly`.
  */
 type __VLS_Props = {
     /**

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

@@ -1,21 +1,8 @@
 /**
- * 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`.
+ * One tick at `value` degrees on an `SkdxAngleSlider`'s dial. No positioning
+ * (use CSS with `--skdx-angle-slider-mark-angle`). Root discovers marks by
+ * `data-value` when `restrictToMarks` is on. Exposes `data-state`
+ * (active/inactive), `data-disabled`, `data-readonly`.
  */
 type __VLS_Props = {
     /**