@skdx/vue 0.26.0

package/dist/utils/dateSegments.d.ts

@@ -0,0 +1,173 @@
+/**
+ * The segment engine behind `SkdxDateField` and `SkdxTimeField`: turns a
+ * locale plus a granularity into an ordered list of editable segments, and
+ * turns keystrokes into new segment values.
+ *
+ * Built entirely on `Intl.DateTimeFormat.formatToParts` — segment order *and*
+ * the literals between segments come from CLDR, so there is no bundled
+ * separator table, no locale data and no date library.
+ *
+ * Every framework package carries its own copy of this module (the same way
+ * each carries its own `calendar/locale` and `numberFormat`), because
+ * `@skdx/shared` is a dev-only dependency — contracts and test assertions, not
+ * runtime code. See `reports/design-system-competitive-audit/RFC-segmented-field.md`.
+ *
+ * The module is deliberately framework-free and side-effect-free apart from its
+ * `Intl` memo caches.
+ */
+/** One editable piece of a segmented date/time value. */
+export type SegmentType = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod';
+/** How far down a segmented field is editable. Ordered coarse → fine. */
+export type Granularity = 'day' | 'hour' | 'minute' | 'second';
+/** Whether hours read `1`–`12` (with an AM/PM segment) or `0`–`23`. */
+export type HourCycle = 12 | 24;
+/** Current numeric value of each editable segment; `null` means "not typed yet". */
+export type SegmentValues = Partial<Record<SegmentType, number | null>>;
+/** One rendered piece of a segmented field — an editable segment or a locale literal. */
+export interface Segment {
+    /** The segment this piece edits, or `'literal'` for the text between segments. */
+    type: SegmentType | 'literal';
+    /** What to render: the padded value, the placeholder, or the literal itself. */
+    text: string;
+    /** Current numeric value; `null` for literals and for untyped segments. */
+    value: number | null;
+    /** Lowest accepted value (`0` for literals). */
+    min: number;
+    /** Highest accepted value (`0` for literals). Dynamic for `day`. */
+    max: number;
+    /** Whether this segment is still showing its placeholder. */
+    isPlaceholder: boolean;
+    /** `false` only for literals. */
+    isEditable: boolean;
+}
+/** Placeholder text shown before a segment has been typed. */
+export declare const SEGMENT_PLACEHOLDERS: Record<SegmentType, string>;
+/** The `aria-valuetext` an untyped segment announces, so a spinbutton never reads a value the user did not enter. */
+export declare const EMPTY_VALUE_TEXT = "Empty";
+/**
+ * Accessible name of each segment. Spelled for speech, not for code — a screen
+ * reader announcing "dayPeriod" helps nobody.
+ *
+ * Exported so `getSegmentLabel` can fall back to it for the segment types a
+ * consumer does not want to re-word.
+ */
+export declare const SEGMENT_LABELS: Record<SegmentType, string>;
+/** The runtime's own locale, used whenever `locale` is omitted — matches `calendar/locale`'s `resolveLocale`. */
+export declare function resolveLocale(locale?: string): string;
+/**
+ * The hour cycle to render with: the explicit `hourCycle` when given, otherwise
+ * whatever the locale resolves to (`h11`/`h12` → `12`, `h23`/`h24` → `24`).
+ *
+ * @example
+ * ```ts
+ * resolveHourCycle('en-US'); // 12
+ * resolveHourCycle('de-DE'); // 24
+ * ```
+ */
+export declare function resolveHourCycle(locale?: string, hourCycle?: HourCycle): HourCycle;
+/**
+ * The editable segments a field of this kind and granularity owns, in canonical
+ * (not locale) order. `dayPeriod` is appended by {@link buildSegments} only when
+ * the resolved hour cycle is 12.
+ *
+ * @example
+ * ```ts
+ * segmentTypesFor('date', 'minute'); // ['year','month','day','hour','minute']
+ * segmentTypesFor('time', 'second'); // ['hour','minute','second']
+ * ```
+ */
+export declare function segmentTypesFor(kind: 'date' | 'time', granularity: Granularity): SegmentType[];
+/** Days in a Gregorian month; `31` while either input is unknown, so `day` stays fully typeable. */
+export declare function daysInMonth(year: number | null | undefined, month: number | null | undefined): number;
+/** The accepted range of one segment, given the values around it. */
+export declare function segmentRange(type: SegmentType, values: SegmentValues, hourCycle: HourCycle): {
+    min: number;
+    max: number;
+};
+/** The locale's AM and PM names, e.g. `['AM', 'PM']` or `['vorm.', 'nachm.']`. */
+export declare function getDayPeriodNames(locale?: string): [string, string];
+/** How a segment renders: zero-padded digits, the locale's AM/PM name, or the placeholder. */
+export declare function formatSegmentText(type: SegmentType, value: number | null, locale?: string): string;
+/** Options for {@link buildSegments}. */
+export interface BuildSegmentsOptions {
+    /** `'date'` adds year/month/day ahead of the time segments. */
+    kind: 'date' | 'time';
+    /** How far down the field is editable. */
+    granularity: Granularity;
+    /** BCP-47 locale deciding segment order, literals and AM/PM names. */
+    locale?: string;
+    /** Forced hour cycle; omitted means "whatever the locale uses". */
+    hourCycle?: HourCycle;
+    /** Current per-segment values. */
+    values: SegmentValues;
+}
+/**
+ * The full ordered render list for a segmented field — editable segments
+ * interleaved with the locale's literals.
+ *
+ * @example
+ * ```ts
+ * buildSegments({ kind: 'date', granularity: 'day', locale: 'en-US', values: {} })
+ *   .filter((s) => s.isEditable)
+ *   .map((s) => s.type); // ['month', 'day', 'year']
+ * ```
+ */
+export declare function buildSegments(options: BuildSegmentsOptions): Segment[];
+/**
+ * Steps one segment by `delta`, wrapping around its range (Arrow Up on `12:59`
+ * minutes gives `12:00`, not `12:59`). An untyped segment starts at `min`,
+ * except `year`, which starts at the current year rather than year 1.
+ */
+export declare function stepSegment(segment: Segment, delta: number): number;
+/** The result of typing one digit into a segment. */
+export interface DigitEntry {
+    /** The segment's new value. May be below `min` mid-entry (typing `0` then `5` into a month). */
+    value: number;
+    /** Buffer to carry into the next keystroke on this segment; `0` once entry is complete. */
+    buffer: number;
+    /** Whether focus should move to the next editable segment. */
+    advance: boolean;
+}
+/**
+ * Types one digit into a segment, with React Aria's roll-over behaviour: a
+ * keystroke that would overflow the segment restarts entry at that digit
+ * instead of being rejected, and focus advances as soon as no further digit
+ * could fit.
+ *
+ * @param segment the segment being typed into
+ * @param buffer what has been typed into it so far (`0` when entry just started)
+ * @param digit the digit `0`–`9` just pressed
+ *
+ * @example
+ * ```ts
+ * // month, "1" already typed, user presses 5 → 15 overflows, restart at 5
+ * typeDigit(monthSegment, 1, 5); // { value: 5, buffer: 0, advance: true }
+ * ```
+ */
+export declare function typeDigit(segment: Segment, buffer: number, digit: number): DigitEntry;
+/** Whether every editable segment has been typed and sits inside its range. */
+export declare function isComplete(segments: Segment[]): boolean;
+/** Converts a possibly-12-hour `hour` plus `dayPeriod` into the 0-23 hour. */
+export declare function to24Hour(hour: number, dayPeriod: number | null | undefined, hourCycle: HourCycle): number;
+/** Converts a 0-23 hour into the `[hour, dayPeriod]` pair the given cycle renders. */
+export declare function from24Hour(hour: number, hourCycle: HourCycle): [number, number | null];
+/**
+ * The `Date` these segment values describe, in local time, or `null` while any
+ * date segment is still untyped. Time segments the field does not own default
+ * to `0`, exactly like `<input type="date">`.
+ */
+export declare function valuesToDate(values: SegmentValues, hourCycle: HourCycle): Date | null;
+/** Splits a `Date` back into segment values for the given hour cycle. */
+export declare function dateToValues(date: Date, hourCycle: HourCycle): SegmentValues;
+/**
+ * The `HH:mm` / `HH:mm:ss` string these segment values describe — always 24
+ * hour, like `<input type="time">`, regardless of the rendered `hourCycle` —
+ * or `null` while hour or minute is untyped.
+ */
+export declare function valuesToTimeString(values: SegmentValues, granularity: Granularity, hourCycle: HourCycle): string | null;
+/** Parses `HH:mm[:ss]` (24 hour) into segment values for the given hour cycle. Invalid input yields empty values. */
+export declare function timeStringToValues(time: string, hourCycle: HourCycle): SegmentValues;
+/** The `YYYY-MM-DD` / `YYYY-MM-DDTHH:mm[:ss]` string a segmented date field submits. */
+export declare function dateToFormValue(date: Date, granularity: Granularity): string;
+/** @internal Drops every memoized `Intl` result. Only needed by tests that switch locales in one process. */
+export declare function clearDateSegmentCache(): void;

package/dist/utils/dateSegments.js

@@ -0,0 +1 @@
+var e={year:"yyyy",month:"mm",day:"dd",hour:"hh",minute:"mm",second:"ss",dayPeriod:"--"},n="Empty",t={year:"year",month:"month",day:"day",hour:"hour",minute:"minute",second:"second",dayPeriod:"AM/PM"},r={year:4,month:2,day:2,hour:2,minute:2,second:2,dayPeriod:0},a=Date.UTC(2024,0,15,13,45,56),u=/* @__PURE__ */new Map,o=/* @__PURE__ */new Map;function i(e){return e??(new Intl.DateTimeFormat).resolvedOptions().locale}function s(e,n){if(12===n||24===n)return n;const t=new Intl.DateTimeFormat(i(e),{hour:"numeric"}).resolvedOptions(),r=t.hourCycle??(t.hour12?"h12":"h23");return"h11"===r||"h12"===r?12:24}function l(e,n){const t="date"===e?["year","month","day"]:[];return("time"===e||"day"!==n)&&(t.push("hour","minute"),"second"===n&&t.push("second")),t}function d(e,n){return e&&n?new Date(e,n,0).getDate():31}function c(e,n,t){switch(e){case"year":return{min:1,max:9999};case"month":return{min:1,max:12};case"day":return{min:1,max:d(n.year,n.month)};case"hour":return 12===t?{min:1,max:12}:{min:0,max:23};case"minute":case"second":return{min:0,max:59};case"dayPeriod":return{min:0,max:1}}}function m(e){const n=i(e),t=o.get(n);if(t)return t;const r=new Intl.DateTimeFormat(n,{hour:"numeric",hourCycle:"h12",timeZone:"UTC"}),a=e=>r.formatToParts(Date.UTC(2024,0,15,e)).find(e=>"dayPeriod"===e.type)?.value??(e<12?"AM":"PM"),u=[a(1),a(13)];return o.set(n,u),u}function y(n,t,a){return null===t?e[n]:"dayPeriod"===n?m(a)[0===t?0:1]:String(t).padStart(r[n],"0")}function h(e){const n=i(e.locale),t=s(n,e.hourCycle);return function(e,n,t){const r=`${e}|${n.join(",")}|${t}`,o=u.get(r);if(o)return o;const i=new Intl.DateTimeFormat(e,function(e,n){const t={timeZone:"UTC"};return e.includes("year")&&(t.year="numeric"),e.includes("month")&&(t.month="2-digit"),e.includes("day")&&(t.day="2-digit"),e.includes("hour")&&(t.hour="2-digit",t.hourCycle=12===n?"h12":"h23"),e.includes("minute")&&(t.minute="2-digit"),e.includes("second")&&(t.second="2-digit"),t}(n,t)).formatToParts(a),s=[];for(const e of i)"literal"===e.type?s.push({type:"literal",text:e.value.replace(/[\u202F\u2009\u00A0]/g," "),value:null,min:0,max:0,isPlaceholder:!1,isEditable:!1}):("dayPeriod"===e.type||n.includes(e.type))&&s.push({type:e.type,text:"",value:null,min:0,max:0,isPlaceholder:!0,isEditable:!0});return u.set(r,s),s}(n,l(e.kind,e.granularity),t).map(r=>{if(!r.isEditable)return r;const a=r.type,u=e.values[a]??null,{min:o,max:i}=c(a,e.values,t);return{type:a,text:y(a,u,n),value:u,min:o,max:i,isPlaceholder:null===u,isEditable:!0}})}function f(e,n){const{min:t,max:r}=e;if(null===e.value)return"year"===e.type?/* @__PURE__ */(new Date).getFullYear():t;const a=r-t+1;return t+((e.value-t+n)%a+a)%a}function g(e,n,t){let r=10*n+t;r>e.max&&(r=t);const a=10*r>e.max;return{value:r,buffer:a?0:r,advance:a}}function p(e){return e.every(e=>!e.isEditable||null!==e.value&&e.value>=e.min&&e.value<=e.max)}function T(e,n,t){return 24===t?e:e%12+(1===n?12:0)}function v(e,n){return 24===n?[e,null]:[e%12==0?12:e%12,e<12?0:1]}function P(e,n){const{year:t,month:r,day:a}=e;if(!t||!r||!a)return null;const u=null==e.hour?0:T(e.hour,e.dayPeriod,n),o=new Date(t,r-1,a,u,e.minute??0,e.second??0,0);return t<100&&o.setFullYear(t),o}function x(e,n){const[t,r]=v(e.getHours(),n);return{year:e.getFullYear(),month:e.getMonth()+1,day:e.getDate(),hour:t,minute:e.getMinutes(),second:e.getSeconds(),dayPeriod:r}}function $(e,n,t){if(null==e.hour||null==e.minute||12===t&&null==e.dayPeriod)return null;const r=e=>String(e).padStart(2,"0"),a=`${r(T(e.hour,e.dayPeriod,t))}:${r(e.minute)}`;return"second"!==n?a:null==e.second?null:`${a}:${r(e.second)}`}function S(e,n){const t=/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(e.trim());if(!t)return{};const r=Number(t[1]),a=Number(t[2]),u=void 0===t[3]?0:Number(t[3]);if(r>23||a>59||u>59)return{};const[o,i]=v(r,n);return{hour:o,minute:a,second:u,dayPeriod:i}}function D(e,n){const t=(e,n=2)=>String(e).padStart(n,"0"),r=`${t(e.getFullYear(),4)}-${t(e.getMonth()+1)}-${t(e.getDate())}`;if("day"===n)return r;const a=`${t(e.getHours())}:${t(e.getMinutes())}`;return"second"===n?`${r}T${a}:${t(e.getSeconds())}`:`${r}T${a}`}export{n as EMPTY_VALUE_TEXT,t as SEGMENT_LABELS,e as SEGMENT_PLACEHOLDERS,h as buildSegments,D as dateToFormValue,x as dateToValues,d as daysInMonth,y as formatSegmentText,v as from24Hour,m as getDayPeriodNames,p as isComplete,s as resolveHourCycle,i as resolveLocale,c as segmentRange,l as segmentTypesFor,f as stepSegment,S as timeStringToValues,T as to24Hour,g as typeDigit,P as valuesToDate,$ as valuesToTimeString};

package/dist/utils/direction.cjs

@@ -0,0 +1 @@
+let i=require("vue");var o=Symbol("skdx-direction");function u(t){(0,i.provide)(o,()=>(0,i.toValue)(t))}function l(t){const r=(0,i.inject)(o,void 0);return()=>(0,i.toValue)(t)??r?.()}function n(t,r){if(r)return r;const e=t?.closest("[dir]")?.getAttribute("dir")?.toLowerCase();return e==="rtl"||e==="ltr"?e:typeof document>"u"?"ltr":(document.dir||document.documentElement?.getAttribute("dir")||"").toLowerCase()==="rtl"?"rtl":"ltr"}function c(t,r){return t==="start"?r==="rtl"?"right":"left":t==="end"?r==="rtl"?"left":"right":t}var d={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft"};function f(t,r,e){return n(r,e)==="rtl"?d[t]??t:t}exports.directionalKey=f;exports.provideDirection=u;exports.resolveDirection=n;exports.resolvePhysicalSide=c;exports.useDirection=l;

package/dist/utils/direction.d.cts

@@ -0,0 +1,74 @@
+import { type MaybeRefOrGetter } from 'vue';
+/**
+ * Writing direction resolution, shared by every component whose keyboard
+ * behaviour is horizontal (arrow-key navigation, submenu open/close, slider
+ * stepping, resize handles). Mirrors
+ * `packages/react/src/utils/direction.tsx`.
+ *
+ * There is exactly one rule to apply: **under `dir="rtl"`, ArrowLeft and
+ * ArrowRight swap meaning.** Everything else — Home/End, the vertical arrows,
+ * typeahead — is direction-agnostic, so handlers call {@link directionalKey}
+ * once at the top and then keep their existing LTR-authored branches.
+ *
+ * Direction is resolved in this order:
+ *
+ * 1. an explicit `dir` prop on the component, if it accepts one;
+ * 2. the nearest {@link provideDirection};
+ * 3. the nearest `[dir]` ancestor **in the DOM** — which is what a plain
+ *    `dir="rtl"` attribute on any skdx component produces, since `dir` is a
+ *    global HTML attribute and Vue falls it through to the root element;
+ * 4. `document.dir`.
+ *
+ * Step 3 is why most components need no `dir` prop of their own and no
+ * provider: `<SkdxTabsList dir="rtl">` already renders `dir="rtl"` on the
+ * tablist, and the handler reads it back off `event.currentTarget`.
+ */
+/** Writing direction of a subtree. */
+export type Direction = 'ltr' | 'rtl';
+/**
+ * Declares the writing direction for every skdx component in the current
+ * component's subtree. Call it from a wrapper component's `setup` when the
+ * direction is not already expressed as a `dir` attribute in the DOM.
+ *
+ * @example
+ * ```ts
+ * provideDirection('rtl');
+ * provideDirection(() => locale.value.dir); // reactive
+ * ```
+ */
+export declare function provideDirection(dir: MaybeRefOrGetter<Direction>): void;
+/**
+ * The direction declared by an explicit prop or the nearest
+ * {@link provideDirection}, or `undefined` when neither is present — in which
+ * case {@link directionalKey} falls back to the DOM. Must be called from
+ * `setup`; the returned getter may be called at any time.
+ */
+export declare function useDirection(dirProp?: MaybeRefOrGetter<Direction | undefined>): () => Direction | undefined;
+/** @internal Resolves `el`'s direction, with `override` (prop/provider) winning when set. */
+export declare function resolveDirection(el: Element | null | undefined, override?: Direction): Direction;
+/** @internal An edge named logically: `start`/`end` follow the writing direction. */
+export type LogicalSide = 'start' | 'end' | 'top' | 'bottom';
+/** @internal An edge named physically, which is what CSS `left`/`right` and `data-side` mean. */
+export type PhysicalSide = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Resolves a logical edge to the physical one it lands on: `start`/`end` swap
+ * under RTL, `top`/`bottom` and already-physical `left`/`right` pass through.
+ *
+ * Components keep publishing the *logical* value (Drawer's `data-placement`,
+ * an overlay's `side` prop) and only resolve at the last moment — a component
+ * that stored `left` instead of `start` would break RTL for every consumer
+ * downstream.
+ *
+ * @internal
+ */
+export declare function resolvePhysicalSide(side: LogicalSide | PhysicalSide, direction: Direction): PhysicalSide;
+/**
+ * Translates the key the user physically pressed into the key an
+ * LTR-authored handler should act on: in RTL, ArrowLeft and ArrowRight swap.
+ * Every other key is returned unchanged, so this is safe to apply
+ * unconditionally — including in vertical widgets, where neither key means
+ * anything.
+ *
+ * @internal
+ */
+export declare function directionalKey(key: string, el: Element | null | undefined, override?: Direction): string;

package/dist/utils/direction.d.ts

@@ -0,0 +1,74 @@
+import { type MaybeRefOrGetter } from 'vue';
+/**
+ * Writing direction resolution, shared by every component whose keyboard
+ * behaviour is horizontal (arrow-key navigation, submenu open/close, slider
+ * stepping, resize handles). Mirrors
+ * `packages/react/src/utils/direction.tsx`.
+ *
+ * There is exactly one rule to apply: **under `dir="rtl"`, ArrowLeft and
+ * ArrowRight swap meaning.** Everything else — Home/End, the vertical arrows,
+ * typeahead — is direction-agnostic, so handlers call {@link directionalKey}
+ * once at the top and then keep their existing LTR-authored branches.
+ *
+ * Direction is resolved in this order:
+ *
+ * 1. an explicit `dir` prop on the component, if it accepts one;
+ * 2. the nearest {@link provideDirection};
+ * 3. the nearest `[dir]` ancestor **in the DOM** — which is what a plain
+ *    `dir="rtl"` attribute on any skdx component produces, since `dir` is a
+ *    global HTML attribute and Vue falls it through to the root element;
+ * 4. `document.dir`.
+ *
+ * Step 3 is why most components need no `dir` prop of their own and no
+ * provider: `<SkdxTabsList dir="rtl">` already renders `dir="rtl"` on the
+ * tablist, and the handler reads it back off `event.currentTarget`.
+ */
+/** Writing direction of a subtree. */
+export type Direction = 'ltr' | 'rtl';
+/**
+ * Declares the writing direction for every skdx component in the current
+ * component's subtree. Call it from a wrapper component's `setup` when the
+ * direction is not already expressed as a `dir` attribute in the DOM.
+ *
+ * @example
+ * ```ts
+ * provideDirection('rtl');
+ * provideDirection(() => locale.value.dir); // reactive
+ * ```
+ */
+export declare function provideDirection(dir: MaybeRefOrGetter<Direction>): void;
+/**
+ * The direction declared by an explicit prop or the nearest
+ * {@link provideDirection}, or `undefined` when neither is present — in which
+ * case {@link directionalKey} falls back to the DOM. Must be called from
+ * `setup`; the returned getter may be called at any time.
+ */
+export declare function useDirection(dirProp?: MaybeRefOrGetter<Direction | undefined>): () => Direction | undefined;
+/** @internal Resolves `el`'s direction, with `override` (prop/provider) winning when set. */
+export declare function resolveDirection(el: Element | null | undefined, override?: Direction): Direction;
+/** @internal An edge named logically: `start`/`end` follow the writing direction. */
+export type LogicalSide = 'start' | 'end' | 'top' | 'bottom';
+/** @internal An edge named physically, which is what CSS `left`/`right` and `data-side` mean. */
+export type PhysicalSide = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Resolves a logical edge to the physical one it lands on: `start`/`end` swap
+ * under RTL, `top`/`bottom` and already-physical `left`/`right` pass through.
+ *
+ * Components keep publishing the *logical* value (Drawer's `data-placement`,
+ * an overlay's `side` prop) and only resolve at the last moment — a component
+ * that stored `left` instead of `start` would break RTL for every consumer
+ * downstream.
+ *
+ * @internal
+ */
+export declare function resolvePhysicalSide(side: LogicalSide | PhysicalSide, direction: Direction): PhysicalSide;
+/**
+ * Translates the key the user physically pressed into the key an
+ * LTR-authored handler should act on: in RTL, ArrowLeft and ArrowRight swap.
+ * Every other key is returned unchanged, so this is safe to apply
+ * unconditionally — including in vertical widgets, where neither key means
+ * anything.
+ *
+ * @internal
+ */
+export declare function directionalKey(key: string, el: Element | null | undefined, override?: Direction): string;

package/dist/utils/direction.js

@@ -0,0 +1 @@
+import{inject as t,provide as r,toValue as e}from"vue";var o=/* @__PURE__ */Symbol("skdx-direction");function i(t){r(o,()=>e(t))}function n(r){const i=t(o,void 0);return()=>e(r)??i?.()}function s(t,r){if(r)return r;const e=t?.closest("[dir]")?.getAttribute("dir")?.toLowerCase();return"rtl"===e||"ltr"===e?e:typeof document>"u"?"ltr":"rtl"===(document.dir||document.documentElement?.getAttribute("dir")||"").toLowerCase()?"rtl":"ltr"}function u(t,r){return"start"===t?"rtl"===r?"right":"left":"end"===t?"rtl"===r?"left":"right":t}var c={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft"};function l(t,r,e){return"rtl"===s(r,e)?c[t]??t:t}export{l as directionalKey,i as provideDirection,s as resolveDirection,u as resolvePhysicalSide,n as useDirection};

package/dist/utils/id.cjs

@@ -0,0 +1 @@
+const n=require("../_virtual/_rolldown/runtime.cjs");let e=require("vue");e=n.__toESM(e,1);var r=0;function t(){return typeof e.useId=="function"?e.useId():void 0}function i(u){return`skdx-${u}-${t()??++r}`}exports.nextId=i;exports.stableUid=t;

package/dist/utils/id.d.cts

@@ -0,0 +1,24 @@
+/**
+ * @internal `useId()` where the running Vue has it (3.5+), otherwise undefined.
+ *
+ * The namespace import is deliberate: a named `useId` import would fail to
+ * resolve on Vue 3.3/3.4 — inside the declared peer range — instead of
+ * degrading. Only valid during `setup()`.
+ */
+export declare function stableUid(): string | undefined;
+/**
+ * @internal Generates a unique id like `skdx-<prefix>-<n>` for internal DOM
+ * wiring (aria-*, htmlFor, etc.). Must be called during `setup()`.
+ *
+ * The tail comes from Vue 3.5's `useId()`, which yields the same value on the
+ * server and on the client. The module-level counter cannot: it is a process
+ * singleton, so in a long-lived Node server the second request emits
+ * `skdx-tabs-4711` where the freshly-loaded client bundle emits `skdx-tabs-1` on
+ * hydrate — both renders succeed, and every `aria-labelledby`/`for` written on
+ * the server silently points at nothing. The counter stays as the fallback for
+ * the 3.3/3.4 peer floor, where nothing was SSR-stable to begin with.
+ *
+ * ponytail: two Vue apps on one page both default `useId()` to the `v` prefix
+ * and could collide; set `app.config.idPrefix` per app if that ever happens.
+ */
+export declare function nextId(prefix: string): string;

package/dist/utils/id.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @internal `useId()` where the running Vue has it (3.5+), otherwise undefined.
+ *
+ * The namespace import is deliberate: a named `useId` import would fail to
+ * resolve on Vue 3.3/3.4 — inside the declared peer range — instead of
+ * degrading. Only valid during `setup()`.
+ */
+export declare function stableUid(): string | undefined;
+/**
+ * @internal Generates a unique id like `skdx-<prefix>-<n>` for internal DOM
+ * wiring (aria-*, htmlFor, etc.). Must be called during `setup()`.
+ *
+ * The tail comes from Vue 3.5's `useId()`, which yields the same value on the
+ * server and on the client. The module-level counter cannot: it is a process
+ * singleton, so in a long-lived Node server the second request emits
+ * `skdx-tabs-4711` where the freshly-loaded client bundle emits `skdx-tabs-1` on
+ * hydrate — both renders succeed, and every `aria-labelledby`/`for` written on
+ * the server silently points at nothing. The counter stays as the fallback for
+ * the 3.3/3.4 peer floor, where nothing was SSR-stable to begin with.
+ *
+ * ponytail: two Vue apps on one page both default `useId()` to the `v` prefix
+ * and could collide; set `app.config.idPrefix` per app if that ever happens.
+ */
+export declare function nextId(prefix: string): string;

package/dist/utils/id.js

@@ -0,0 +1 @@
+import*as t from"vue";var e=0;function n(){return"function"==typeof t.useId?t.useId():void 0}function o(t){return`skdx-${t}-${n()??++e}`}export{o as nextId,n as stableUid};

package/dist/utils/liveAnnouncer.cjs

@@ -0,0 +1 @@
+var u=150,a="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal;",r=new Map;function d(n){const o=r.get(n);if(o?.node.isConnected)return o;const e=document.createElement("div");e.setAttribute("aria-live",n),e.setAttribute("aria-atomic","true"),e.setAttribute("data-skdx-live-announcer",n),e.style.cssText=a,document.body.appendChild(e);const t={node:e,timer:void 0};return r.set(n,t),t}function i(n,o="polite"){if(typeof document>"u")return;const e=n.trim();if(!e)return;const t=d(o);clearTimeout(t.timer),t.timer=setTimeout(()=>{t.timer=void 0,t.node.textContent!==e&&(t.node.textContent=e)},150)}function c(n){for(const[o,e]of r)n!==void 0&&o!==n||(clearTimeout(e.timer),e.timer=void 0,e.node.textContent="")}var m={announce:i,clear:c};function s(){return m}exports.ANNOUNCE_DEBOUNCE_MS=u;exports.announce=i;exports.clearAnnouncements=c;exports.useLiveAnnouncer=s;

package/dist/utils/liveAnnouncer.d.cts

@@ -0,0 +1,53 @@
+/** Which of the two singleton live regions a message is routed to. */
+export type AnnouncePoliteness = 'polite' | 'assertive';
+/**
+ * How long {@link announce} waits before writing a message, so a burst of
+ * calls (a combobox re-filtering on every keystroke) collapses into the one
+ * announcement the user actually cares about instead of a queue of stale
+ * ones.
+ */
+export declare const ANNOUNCE_DEBOUNCE_MS = 150;
+/**
+ * Announces `message` to screen readers through a process-wide `aria-live`
+ * region, without rendering anything into your own template — for state
+ * changes that have no visible text of their own (a filtered result count, a
+ * re-sorted column).
+ *
+ * Debounced by {@link ANNOUNCE_DEBOUNCE_MS} and deduplicated: only the last
+ * message in a burst is written, and a message identical to what the region
+ * already holds is skipped (writing the same text back is not a DOM change,
+ * so assistive tech would ignore it anyway). Empty/whitespace messages are
+ * ignored. No-ops during SSR.
+ *
+ * @example
+ * ```ts
+ * announce(`${results.length} results available`);
+ * announce('Upload failed', 'assertive');
+ * ```
+ */
+export declare function announce(message: string, politeness?: AnnouncePoliteness): void;
+/**
+ * Empties the live region(s) and drops any debounced message still waiting to
+ * be written — pass a politeness to clear just one. Mostly useful between
+ * tests, and when navigating away from the thing a pending message describes.
+ */
+export declare function clearAnnouncements(politeness?: AnnouncePoliteness): void;
+/** What {@link useLiveAnnouncer} returns. */
+export interface LiveAnnouncerApi {
+    /** See {@link announce}. */
+    announce: (message: string, politeness?: AnnouncePoliteness) => void;
+    /** See {@link clearAnnouncements}. */
+    clear: (politeness?: AnnouncePoliteness) => void;
+}
+/**
+ * Composable form of {@link announce} — returns a stable `{ announce, clear }`
+ * pair. There is no per-component state to set up or tear down (the regions
+ * are process-wide singletons), so it is safe to call outside `setup()` too.
+ *
+ * @example
+ * ```ts
+ * const { announce } = useLiveAnnouncer();
+ * watch(count, (n) => announce(`${n} results available`));
+ * ```
+ */
+export declare function useLiveAnnouncer(): LiveAnnouncerApi;

package/dist/utils/liveAnnouncer.d.ts

@@ -0,0 +1,53 @@
+/** Which of the two singleton live regions a message is routed to. */
+export type AnnouncePoliteness = 'polite' | 'assertive';
+/**
+ * How long {@link announce} waits before writing a message, so a burst of
+ * calls (a combobox re-filtering on every keystroke) collapses into the one
+ * announcement the user actually cares about instead of a queue of stale
+ * ones.
+ */
+export declare const ANNOUNCE_DEBOUNCE_MS = 150;
+/**
+ * Announces `message` to screen readers through a process-wide `aria-live`
+ * region, without rendering anything into your own template — for state
+ * changes that have no visible text of their own (a filtered result count, a
+ * re-sorted column).
+ *
+ * Debounced by {@link ANNOUNCE_DEBOUNCE_MS} and deduplicated: only the last
+ * message in a burst is written, and a message identical to what the region
+ * already holds is skipped (writing the same text back is not a DOM change,
+ * so assistive tech would ignore it anyway). Empty/whitespace messages are
+ * ignored. No-ops during SSR.
+ *
+ * @example
+ * ```ts
+ * announce(`${results.length} results available`);
+ * announce('Upload failed', 'assertive');
+ * ```
+ */
+export declare function announce(message: string, politeness?: AnnouncePoliteness): void;
+/**
+ * Empties the live region(s) and drops any debounced message still waiting to
+ * be written — pass a politeness to clear just one. Mostly useful between
+ * tests, and when navigating away from the thing a pending message describes.
+ */
+export declare function clearAnnouncements(politeness?: AnnouncePoliteness): void;
+/** What {@link useLiveAnnouncer} returns. */
+export interface LiveAnnouncerApi {
+    /** See {@link announce}. */
+    announce: (message: string, politeness?: AnnouncePoliteness) => void;
+    /** See {@link clearAnnouncements}. */
+    clear: (politeness?: AnnouncePoliteness) => void;
+}
+/**
+ * Composable form of {@link announce} — returns a stable `{ announce, clear }`
+ * pair. There is no per-component state to set up or tear down (the regions
+ * are process-wide singletons), so it is safe to call outside `setup()` too.
+ *
+ * @example
+ * ```ts
+ * const { announce } = useLiveAnnouncer();
+ * watch(count, (n) => announce(`${n} results available`));
+ * ```
+ */
+export declare function useLiveAnnouncer(): LiveAnnouncerApi;

package/dist/utils/liveAnnouncer.js

@@ -0,0 +1 @@
+var e=150,t=/* @__PURE__ */new Map;function n(e,n="polite"){if(typeof document>"u")return;const o=e.trim();if(!o)return;const i=function(e){const n=t.get(e);if(n?.node.isConnected)return n;const o=document.createElement("div");o.setAttribute("aria-live",e),o.setAttribute("aria-atomic","true"),o.setAttribute("data-skdx-live-announcer",e),o.style.cssText="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal;",document.body.appendChild(o);const i={node:o,timer:void 0};return t.set(e,i),i}(n);clearTimeout(i.timer),i.timer=setTimeout(()=>{i.timer=void 0,i.node.textContent!==o&&(i.node.textContent=o)},150)}function o(e){for(const[n,o]of t)void 0!==e&&n!==e||(clearTimeout(o.timer),o.timer=void 0,o.node.textContent="")}var i={announce:n,clear:o};function r(){return i}export{e as ANNOUNCE_DEBOUNCE_MS,n as announce,o as clearAnnouncements,r as useLiveAnnouncer};

package/dist/utils/menuSub.cjs

@@ -0,0 +1 @@
+const e=require("./id.cjs");var n='[role^="menuitem"]:not([data-disabled])',t=Symbol("skdx-menu-sub-context");function u(){return e.nextId("menu-sub-content")}exports.ITEM_SELECTOR=n;exports.MENU_SUB_CONTEXT=t;exports.nextMenuSubContentId=u;

package/dist/utils/menuSub.d.cts

@@ -0,0 +1,55 @@
+import type { InjectionKey, Ref } from 'vue';
+/**
+ * Nested-submenu layer shared by DropdownMenu, ContextMenu and Menubar. The
+ * three families differ in how a *root* menu opens, but a submenu's own
+ * behaviour is identical in all of them, so each family's barrel re-exports
+ * `MenuSub` / `MenuSubTrigger` / `MenuSubContent` under its own `Skdx…Sub…`
+ * names, the same way it re-exports the shared `useMenuItem` wiring.
+ *
+ * The submenu reuses the existing popper layer: `MenuSub` opens a nested
+ * `PopperRoot` whose anchor is the SubTrigger, so no new positioning code is
+ * involved. `MenuSubContent` deliberately renders inline inside the parent
+ * menu's DOM rather than in its own portal, which is what makes the parent's
+ * existing outside-pointer-down dismissal treat clicks in a submenu as
+ * "inside", and what keeps submenu items out of the parent's typeahead while
+ * the submenu is closed (they simply are not mounted).
+ * @internal
+ */
+/** @internal CSS selector matching focusable, non-disabled items within a submenu panel. */
+export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]:not([data-disabled])";
+/**
+ * @internal Grace period (ms) between the pointer leaving the
+ * SubTrigger/SubContent pair and the submenu closing, so a diagonal sweep
+ * from the trigger to the panel doesn't shut the submenu mid-travel.
+ */
+export declare const CLOSE_DELAY_MS = 150;
+/** @internal Shared submenu state a `MenuSub` provides to its SubTrigger and SubContent. */
+export interface MenuSubContext {
+    /**
+     * The family whose submenu this is, so the two shared parts can name
+     * themselves.
+     *
+     * These parts are one implementation re-exported under three names, so they
+     * cannot hard-code a family — and with no family they emitted no class at
+     * all, which meant `.skdx-dropdown-menu__sub-trigger` and every
+     * `.skdx-*__sub-content` rule matched nothing. Every submenu in the library
+     * rendered as unstyled `<div>`s: no panel, no border, no padding, no
+     * highlight on the row that opens it. React hit exactly this and fixed it the
+     * same way; see `packages/react/src/utils/menuSub.tsx`.
+     */
+    family: string;
+    open: Readonly<Ref<boolean>>;
+    /** Opens immediately, cancelling any pending close. */
+    openNow(): void;
+    /** Closes immediately, cancelling any pending close. */
+    closeNow(): void;
+    /** Closes after {@link CLOSE_DELAY_MS} unless `openNow` cancels it first. */
+    scheduleClose(): void;
+    triggerRef: Ref<HTMLElement | null>;
+    contentRef: Ref<HTMLElement | null>;
+    contentId: string;
+}
+/** @internal Injection key a `MenuSub` provides so its SubTrigger and SubContent share open state and element refs. */
+export declare const MENU_SUB_CONTEXT: InjectionKey<MenuSubContext>;
+/** @internal Generates a unique id for a submenu's content. */
+export declare function nextMenuSubContentId(): string;

package/dist/utils/menuSub.d.ts

@@ -0,0 +1,55 @@
+import type { InjectionKey, Ref } from 'vue';
+/**
+ * Nested-submenu layer shared by DropdownMenu, ContextMenu and Menubar. The
+ * three families differ in how a *root* menu opens, but a submenu's own
+ * behaviour is identical in all of them, so each family's barrel re-exports
+ * `MenuSub` / `MenuSubTrigger` / `MenuSubContent` under its own `Skdx…Sub…`
+ * names, the same way it re-exports the shared `useMenuItem` wiring.
+ *
+ * The submenu reuses the existing popper layer: `MenuSub` opens a nested
+ * `PopperRoot` whose anchor is the SubTrigger, so no new positioning code is
+ * involved. `MenuSubContent` deliberately renders inline inside the parent
+ * menu's DOM rather than in its own portal, which is what makes the parent's
+ * existing outside-pointer-down dismissal treat clicks in a submenu as
+ * "inside", and what keeps submenu items out of the parent's typeahead while
+ * the submenu is closed (they simply are not mounted).
+ * @internal
+ */
+/** @internal CSS selector matching focusable, non-disabled items within a submenu panel. */
+export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]:not([data-disabled])";
+/**
+ * @internal Grace period (ms) between the pointer leaving the
+ * SubTrigger/SubContent pair and the submenu closing, so a diagonal sweep
+ * from the trigger to the panel doesn't shut the submenu mid-travel.
+ */
+export declare const CLOSE_DELAY_MS = 150;
+/** @internal Shared submenu state a `MenuSub` provides to its SubTrigger and SubContent. */
+export interface MenuSubContext {
+    /**
+     * The family whose submenu this is, so the two shared parts can name
+     * themselves.
+     *
+     * These parts are one implementation re-exported under three names, so they
+     * cannot hard-code a family — and with no family they emitted no class at
+     * all, which meant `.skdx-dropdown-menu__sub-trigger` and every
+     * `.skdx-*__sub-content` rule matched nothing. Every submenu in the library
+     * rendered as unstyled `<div>`s: no panel, no border, no padding, no
+     * highlight on the row that opens it. React hit exactly this and fixed it the
+     * same way; see `packages/react/src/utils/menuSub.tsx`.
+     */
+    family: string;
+    open: Readonly<Ref<boolean>>;
+    /** Opens immediately, cancelling any pending close. */
+    openNow(): void;
+    /** Closes immediately, cancelling any pending close. */
+    closeNow(): void;
+    /** Closes after {@link CLOSE_DELAY_MS} unless `openNow` cancels it first. */
+    scheduleClose(): void;
+    triggerRef: Ref<HTMLElement | null>;
+    contentRef: Ref<HTMLElement | null>;
+    contentId: string;
+}
+/** @internal Injection key a `MenuSub` provides so its SubTrigger and SubContent share open state and element refs. */
+export declare const MENU_SUB_CONTEXT: InjectionKey<MenuSubContext>;
+/** @internal Generates a unique id for a submenu's content. */
+export declare function nextMenuSubContentId(): string;

package/dist/utils/menuSub.js

@@ -0,0 +1 @@
+import{nextId as n}from"./id.js";var t='[role^="menuitem"]:not([data-disabled])',e=/* @__PURE__ */Symbol("skdx-menu-sub-context");function o(){return n("menu-sub-content")}export{t as ITEM_SELECTOR,e as MENU_SUB_CONTEXT,o as nextMenuSubContentId};

package/dist/utils/numberFormat.cjs

@@ -0,0 +1 @@
+function l(n,e,r){return!e&&!r?String(n):new Intl.NumberFormat(e,r).format(n)}function s(n,e,r){const a=n.trim();if(a==="")return NaN;if(!e&&!r)return Number(a);const i=new Intl.NumberFormat(e,r).formatToParts(-12345.6),N=i.find(u=>u.type==="group")?.value,f=i.find(u=>u.type==="decimal")?.value??new Intl.NumberFormat(e).formatToParts(1.5).find(u=>u.type==="decimal")?.value??".";let t=a.replace(/[\s\u00a0\u202f]/g,"").replace(/\u2212/g,"-");if(N&&(t=t.split(N).join("")),t=t.split(f).join(".").replace(/[^0-9.-]/g,""),!/[0-9]/.test(t))return NaN;const m=Number(t);return Number.isNaN(m)?NaN:r?.style==="percent"?m/100:m}exports.formatNumberValue=l;exports.parseNumberValue=s;