@skdx/vue 0.26.0

package/dist/text-field/TextFieldSlot.vue.d.cts

@@ -0,0 +1,22 @@
+/**
+ * A decorative container for an icon or adornment placed at the start or end
+ * of a `<SkdxTextField>`. Purely presentational — no context reads.
+ */
+type __VLS_Props = {
+    /** Which end of the field this slot sits at, exposed as `data-side`. */
+    side?: 'start' | 'end';
+};
+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<{}>, {
+    side: "start" | "end";
+}, {}, {}, {}, 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/text-field/TextFieldSlot.vue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A decorative container for an icon or adornment placed at the start or end
+ * of a `<SkdxTextField>`. Purely presentational — no context reads.
+ */
+type __VLS_Props = {
+    /** Which end of the field this slot sits at, exposed as `data-side`. */
+    side?: 'start' | 'end';
+};
+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<{}>, {
+    side: "start" | "end";
+}, {}, {}, {}, 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/text-field/TextFieldSlot.vue.js

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

package/dist/text-field/TextFieldSlot.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var l=["data-side"],d=(0,e.defineComponent)({__name:"TextFieldSlot",props:{side:{default:"start"}},setup(t){return(a,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-text-field__slot","data-part":"slot","data-side":t.side},[(0,e.renderSlot)(a.$slots,"default")],8,l))}});exports.default=d;

package/dist/text-field/TextFieldSlot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as e,defineComponent as t,openBlock as a,renderSlot as s}from"vue";var d=["data-side"],l=/* @__PURE__ */t({__name:"TextFieldSlot",props:{side:{default:"start"}},setup:t=>(l,o)=>(a(),e("span",{class:"skdx-text-field__slot","data-part":"slot","data-side":t.side},[s(l.$slots,"default")],8,d))});export{l as default};

package/dist/text-field/context.cjs

@@ -0,0 +1 @@
+const e=require("../utils/id.cjs");var t=Symbol("skdx-text-field-context");function T(){return e.nextId("text-field")}exports.TEXT_FIELD_CONTEXT=t;exports.nextTextFieldId=T;

package/dist/text-field/context.d.cts

@@ -0,0 +1,22 @@
+import type { InjectionKey, Ref } from 'vue';
+/** @internal Injection key a TextField root provides so its parts can read/write reactive state. */
+export interface TextFieldContext {
+    inputId: string;
+    disabled: Ref<boolean>;
+    invalid: Ref<boolean>;
+    required: Ref<boolean>;
+    value: Ref<string>;
+    setValue: (value: string) => void;
+    /** The root's `name`, put on the wrapped native input so it submits with the form. */
+    name: Ref<string | undefined>;
+    /**
+     * The wrapped native input, published back to the root: it is the element
+     * that carries the value into the form, so the root's `checkValidity()` /
+     * `reportValidity()` delegate to it and form reset is observed through it.
+     */
+    inputEl: Ref<HTMLInputElement | null>;
+}
+/** @internal Injection key a TextField root provides so its Input/Label parts share value and validation state. */
+export declare const TEXT_FIELD_CONTEXT: InjectionKey<TextFieldContext>;
+/** @internal Generates a unique id for a TextField's input. */
+export declare function nextTextFieldId(): string;

package/dist/text-field/context.d.ts

@@ -0,0 +1,22 @@
+import type { InjectionKey, Ref } from 'vue';
+/** @internal Injection key a TextField root provides so its parts can read/write reactive state. */
+export interface TextFieldContext {
+    inputId: string;
+    disabled: Ref<boolean>;
+    invalid: Ref<boolean>;
+    required: Ref<boolean>;
+    value: Ref<string>;
+    setValue: (value: string) => void;
+    /** The root's `name`, put on the wrapped native input so it submits with the form. */
+    name: Ref<string | undefined>;
+    /**
+     * The wrapped native input, published back to the root: it is the element
+     * that carries the value into the form, so the root's `checkValidity()` /
+     * `reportValidity()` delegate to it and form reset is observed through it.
+     */
+    inputEl: Ref<HTMLInputElement | null>;
+}
+/** @internal Injection key a TextField root provides so its Input/Label parts share value and validation state. */
+export declare const TEXT_FIELD_CONTEXT: InjectionKey<TextFieldContext>;
+/** @internal Generates a unique id for a TextField's input. */
+export declare function nextTextFieldId(): string;

package/dist/text-field/context.js

@@ -0,0 +1 @@
+import{nextId as t}from"../utils/id.js";var e=/* @__PURE__ */Symbol("skdx-text-field-context");function x(){return t("text-field")}export{e as TEXT_FIELD_CONTEXT,x as nextTextFieldId};

package/dist/text-field/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TextField.vue.cjs"),t=require("./TextFieldInput.vue.cjs"),r=require("./TextFieldSlot.vue.cjs"),l=require("./TextFieldClearButton.vue.cjs");exports.SkdxTextField=e.default;exports.SkdxTextFieldClearButton=l.default;exports.SkdxTextFieldInput=t.default;exports.SkdxTextFieldSlot=r.default;

package/dist/text-field/index.d.cts

@@ -0,0 +1,4 @@
+export { default as SkdxTextField } from './TextField.vue.cjs';
+export { default as SkdxTextFieldInput } from './TextFieldInput.vue.cjs';
+export { default as SkdxTextFieldSlot } from './TextFieldSlot.vue.cjs';
+export { default as SkdxTextFieldClearButton } from './TextFieldClearButton.vue.cjs';

package/dist/text-field/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SkdxTextField } from './TextField.vue.js';
+export { default as SkdxTextFieldInput } from './TextFieldInput.vue.js';
+export { default as SkdxTextFieldSlot } from './TextFieldSlot.vue.js';
+export { default as SkdxTextFieldClearButton } from './TextFieldClearButton.vue.js';

package/dist/text-field/index.js

@@ -0,0 +1 @@
+import e from"./TextField.vue.js";import t from"./TextFieldInput.vue.js";import o from"./TextFieldSlot.vue.js";import x from"./TextFieldClearButton.vue.js";export{e as SkdxTextField,x as SkdxTextFieldClearButton,t as SkdxTextFieldInput,o as SkdxTextFieldSlot};

package/dist/textarea/Textarea.vue.cjs

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

package/dist/textarea/Textarea.vue.d.cts

@@ -0,0 +1,45 @@
+/**
+ * The Vue implementation of the shared Textarea contract (see
+ * `@skdx/shared`'s `textareaContract`). Renders a native `<textarea>`.
+ * With `autoResize`, grows its height to fit content (via a `watch` on the
+ * bound value plus an `@input` listener, disabling manual `resize`) instead
+ * of scrolling, optionally capped to `maxRows` computed lines.
+ *
+ * Supports `v-model:value` (the default `v-model`/`modelValue` convention is
+ * intentionally not used so the prop name matches every other framework's
+ * `value`/`valueChange` pair), or uncontrolled usage via `defaultValue`.
+ */
+type __VLS_Props = {
+    /** Current text, for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    value?: string;
+    /** Initial text, used only when the textarea is uncontrolled. @default undefined — starts empty. */
+    defaultValue?: string;
+    /** Grow the textarea to fit its content instead of showing a scrollbar. */
+    autoResize?: boolean;
+    /** Caps auto-resize growth to this many rows, based on computed line-height. */
+    maxRows?: number;
+    /** Marks the textarea as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid?: boolean;
+    /** Native `readOnly` attribute, plus `aria-readonly`/`data-readonly` styling hooks. */
+    readOnly?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    /** Focuses the underlying native textarea. */
+    focus: () => void | undefined;
+    /** The underlying native textarea element. */
+    el: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string) => any;
+    "value-change": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+}>, {
+    value: string;
+    invalid: boolean;
+    defaultValue: string;
+    autoResize: boolean;
+    maxRows: number;
+    readOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/textarea/Textarea.vue.d.ts

@@ -0,0 +1,45 @@
+/**
+ * The Vue implementation of the shared Textarea contract (see
+ * `@skdx/shared`'s `textareaContract`). Renders a native `<textarea>`.
+ * With `autoResize`, grows its height to fit content (via a `watch` on the
+ * bound value plus an `@input` listener, disabling manual `resize`) instead
+ * of scrolling, optionally capped to `maxRows` computed lines.
+ *
+ * Supports `v-model:value` (the default `v-model`/`modelValue` convention is
+ * intentionally not used so the prop name matches every other framework's
+ * `value`/`valueChange` pair), or uncontrolled usage via `defaultValue`.
+ */
+type __VLS_Props = {
+    /** Current text, for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    value?: string;
+    /** Initial text, used only when the textarea is uncontrolled. @default undefined — starts empty. */
+    defaultValue?: string;
+    /** Grow the textarea to fit its content instead of showing a scrollbar. */
+    autoResize?: boolean;
+    /** Caps auto-resize growth to this many rows, based on computed line-height. */
+    maxRows?: number;
+    /** Marks the textarea as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid?: boolean;
+    /** Native `readOnly` attribute, plus `aria-readonly`/`data-readonly` styling hooks. */
+    readOnly?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    /** Focuses the underlying native textarea. */
+    focus: () => void | undefined;
+    /** The underlying native textarea element. */
+    el: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string) => any;
+    "value-change": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+}>, {
+    value: string;
+    invalid: boolean;
+    defaultValue: string;
+    autoResize: boolean;
+    maxRows: number;
+    readOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/textarea/Textarea.vue.js

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

package/dist/textarea/Textarea.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const y=require("../utils/reassertValue.cjs");let e=require("vue");var x=["value","readonly","aria-invalid","aria-readonly","data-invalid","data-readonly"],h=(0,e.defineComponent)({__name:"Textarea",props:{value:{default:void 0},defaultValue:{default:""},autoResize:{type:Boolean,default:!1},maxRows:{default:void 0},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(t,{expose:s,emit:c}){const l=t,r=c,o=(0,e.ref)(null),v=(0,e.ref)(l.defaultValue),i=(0,e.computed)(()=>l.value!==void 0?l.value:v.value);function d(){const a=o.value;if(!a||!l.autoResize)return;a.style.height="auto";let n=a.scrollHeight;if(l.maxRows!=null){const u=parseFloat(getComputedStyle(a).lineHeight||"0")||0;u>0&&(n=Math.min(n,u*l.maxRows))}a.style.height=`${n}px`}function f(a){const n=a.target,u=n.value;l.value===void 0&&(v.value=u),r("update:value",u),r("value-change",u),d(),y.reassertValue(n,()=>i.value)}return(0,e.watch)(i,()=>{(0,e.nextTick)(d)}),(0,e.onMounted)(d),s({focus:()=>o.value?.focus(),el:o}),(a,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("textarea",{class:"skdx-textarea","data-part":"root","data-skdx-component":"textarea",ref_key:"textareaRef",ref:o,value:i.value,readonly:t.readOnly,"aria-invalid":t.invalid?!0:void 0,"aria-readonly":t.readOnly?!0:void 0,"data-invalid":t.invalid?"":void 0,"data-readonly":t.readOnly?"":void 0,style:(0,e.normalizeStyle)(t.autoResize?{overflow:"hidden",resize:"none"}:void 0),onInput:f},null,44,x))}});exports.default=h;

package/dist/textarea/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{reassertValue as e}from"../utils/reassertValue.js";import{computed as a,createElementBlock as t,defineComponent as l,nextTick as o,normalizeStyle as n,onMounted as u,openBlock as d,ref as i,watch as r}from"vue";var s=["value","readonly","aria-invalid","aria-readonly","data-invalid","data-readonly"],v=/* @__PURE__ */l({__name:"Textarea",props:{value:{default:void 0},defaultValue:{default:""},autoResize:{type:Boolean,default:!1},maxRows:{default:void 0},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(l,{expose:v,emit:f}){const p=l,c=f,y=i(null),m=i(p.defaultValue),x=a(()=>void 0!==p.value?p.value:m.value);function h(){const e=y.value;if(!e||!p.autoResize)return;e.style.height="auto";let a=e.scrollHeight;if(null!=p.maxRows){const t=parseFloat(getComputedStyle(e).lineHeight||"0")||0;t>0&&(a=Math.min(a,t*p.maxRows))}e.style.height=`${a}px`}function g(a){const t=a.target,l=t.value;void 0===p.value&&(m.value=l),c("update:value",l),c("value-change",l),h(),e(t,()=>x.value)}return r(x,()=>{o(h)}),u(h),v({focus:()=>y.value?.focus(),el:y}),(e,a)=>(d(),t("textarea",{class:"skdx-textarea","data-part":"root","data-skdx-component":"textarea",ref_key:"textareaRef",ref:y,value:x.value,readonly:l.readOnly,"aria-invalid":!!l.invalid||void 0,"aria-readonly":!!l.readOnly||void 0,"data-invalid":l.invalid?"":void 0,"data-readonly":l.readOnly?"":void 0,style:n(l.autoResize?{overflow:"hidden",resize:"none"}:void 0),onInput:g},null,44,s))}});export{v as default};

package/dist/textarea/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Textarea.vue.cjs");exports.SkdxTextarea=e.default;

package/dist/textarea/index.d.cts

@@ -0,0 +1 @@
+export { default as SkdxTextarea } from './Textarea.vue.cjs';

package/dist/textarea/index.d.ts

@@ -0,0 +1 @@
+export { default as SkdxTextarea } from './Textarea.vue.js';

package/dist/textarea/index.js

@@ -0,0 +1 @@
+import e from"./Textarea.vue.js";export{e as SkdxTextarea};

package/dist/time-field/TimeField.vue.cjs

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

package/dist/time-field/TimeField.vue.d.cts

@@ -0,0 +1,118 @@
+import { type Granularity, type HourCycle, type SegmentType } from '../utils/dateSegments.cjs';
+/** How far down a `SkdxTimeField` is editable — `Granularity` minus the date-only `'day'`. */
+type TimeGranularity = Exclude<Granularity, 'day'>;
+/**
+ * The Vue implementation of the shared TimeField contract (see `@skdx/shared`'s
+ * `timeFieldContract`). Same segment machinery as `SkdxDateField`, restricted to
+ * the time segments: a `role="group"` holding one `role="spinbutton"` per
+ * segment, ordered by `Intl.DateTimeFormat.formatToParts` for the active
+ * locale, with an AM/PM segment whenever the resolved hour cycle is 12.
+ *
+ * `value` is a 24-hour `HH:mm` string, exactly like `<input type="time">` — a
+ * time is not a date, and a `Date` carrying a meaningless epoch day is a trap.
+ * `hourCycle` only changes what is rendered, so a value round-trips unchanged
+ * through a cycle switch.
+ *
+ * Arrow Up/Down step the focused segment (wrapping), Arrow Left/Right move
+ * between segments, digits type with roll-over, `A`/`P` set the AM/PM segment,
+ * and Backspace/Delete clear back to the placeholder.
+ *
+ * Works controlled (`v-model:value` / `@value-change`) or uncontrolled
+ * (`defaultValue`).
+ *
+ * With a `name`, a visually-hidden input submits the time with the surrounding
+ * `<form>`, and `checkValidity()`/`reportValidity()` — exposed on this root —
+ * delegate to it. Resetting the form restores the time the field was declared
+ * with, emitting `value-change` so a controlled parent follows it.
+ */
+type __VLS_Props = {
+    /**
+     * Current time as a 24-hour `HH:mm` (or `HH:mm:ss`) string, exactly like
+     * `<input type="time">`, for controlled usage. Pair with `v-model:value` or
+     * `@value-change`. `null` while any segment is untyped. Independent of
+     * `hourCycle`, which is display only.
+     */
+    value?: string | null;
+    /** Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`. */
+    defaultValue?: string | null;
+    /**
+     * How far down the field is editable. `'second'` adds a seconds segment;
+     * `'hour'` and `'minute'` both render hour and minute.
+     */
+    granularity?: TimeGranularity;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour display. Display only —
+     * `value` is always 24 hour, so switching cycles is lossless. Omitted:
+     * whatever the locale resolves to.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * BCP-47 locale deciding segment order, the literals between segments and the
+     * AM/PM names. Omitted: the runtime's default locale.
+     */
+    locale?: string;
+    /** Disables the field and drops every segment out of the tab order. */
+    disabled?: boolean;
+    /** Segments stay focusable and readable but refuse every edit. */
+    readOnly?: boolean;
+    /** Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid?: boolean;
+    /** Marks the field required — an incomplete field is `valueMissing`. */
+    required?: boolean;
+    /**
+     * Form field name. With it the time submits as the 24-hour `HH:mm[:ss]`
+     * string. Without it the field submits nothing.
+     */
+    name?: string;
+    /**
+     * Writing direction, which decides whether ArrowLeft moves to the previous or
+     * the next segment. Omitted: read off the nearest `[dir]` ancestor or
+     * `document.dir`.
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Words the accessible name of one segment. Called per segment type
+     * (`'hour'`, `'minute'`, `'dayPeriod'`, …).
+     *
+     * One of the only two strings here that `locale` cannot translate: segment
+     * order, the literals between segments and the AM/PM names all come from
+     * `Intl.DateTimeFormat` already, but these describe the widget rather than
+     * the value, so no locale data carries them.
+     * @default undefined — the built-in English names ('hour', 'minute', 'AM/PM', …).
+     */
+    getSegmentLabel?: (type: SegmentType) => string;
+    /**
+     * The `aria-valuetext` an untyped segment announces instead of a number it
+     * does not have — `aria-valuenow` has to stay present for a spinbutton, so
+     * this is the text that is actually read.
+     * @default 'Empty'
+     */
+    emptySegmentText?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the hidden form input satisfies its constraints. `true` without a `name`. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string | null) => any;
+    "value-change": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string | null) => any) | undefined;
+    "onValue-change"?: ((value: string | null) => any) | undefined;
+}>, {
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string | null;
+    invalid: boolean;
+    defaultValue: string | null;
+    dir: "ltr" | "rtl";
+    readOnly: boolean;
+    locale: string;
+    hourCycle: HourCycle;
+    granularity: TimeGranularity;
+    getSegmentLabel: (type: SegmentType) => string;
+    emptySegmentText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/time-field/TimeField.vue.d.ts

@@ -0,0 +1,118 @@
+import { type Granularity, type HourCycle, type SegmentType } from '../utils/dateSegments.js';
+/** How far down a `SkdxTimeField` is editable — `Granularity` minus the date-only `'day'`. */
+type TimeGranularity = Exclude<Granularity, 'day'>;
+/**
+ * The Vue implementation of the shared TimeField contract (see `@skdx/shared`'s
+ * `timeFieldContract`). Same segment machinery as `SkdxDateField`, restricted to
+ * the time segments: a `role="group"` holding one `role="spinbutton"` per
+ * segment, ordered by `Intl.DateTimeFormat.formatToParts` for the active
+ * locale, with an AM/PM segment whenever the resolved hour cycle is 12.
+ *
+ * `value` is a 24-hour `HH:mm` string, exactly like `<input type="time">` — a
+ * time is not a date, and a `Date` carrying a meaningless epoch day is a trap.
+ * `hourCycle` only changes what is rendered, so a value round-trips unchanged
+ * through a cycle switch.
+ *
+ * Arrow Up/Down step the focused segment (wrapping), Arrow Left/Right move
+ * between segments, digits type with roll-over, `A`/`P` set the AM/PM segment,
+ * and Backspace/Delete clear back to the placeholder.
+ *
+ * Works controlled (`v-model:value` / `@value-change`) or uncontrolled
+ * (`defaultValue`).
+ *
+ * With a `name`, a visually-hidden input submits the time with the surrounding
+ * `<form>`, and `checkValidity()`/`reportValidity()` — exposed on this root —
+ * delegate to it. Resetting the form restores the time the field was declared
+ * with, emitting `value-change` so a controlled parent follows it.
+ */
+type __VLS_Props = {
+    /**
+     * Current time as a 24-hour `HH:mm` (or `HH:mm:ss`) string, exactly like
+     * `<input type="time">`, for controlled usage. Pair with `v-model:value` or
+     * `@value-change`. `null` while any segment is untyped. Independent of
+     * `hourCycle`, which is display only.
+     */
+    value?: string | null;
+    /** Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`. */
+    defaultValue?: string | null;
+    /**
+     * How far down the field is editable. `'second'` adds a seconds segment;
+     * `'hour'` and `'minute'` both render hour and minute.
+     */
+    granularity?: TimeGranularity;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour display. Display only —
+     * `value` is always 24 hour, so switching cycles is lossless. Omitted:
+     * whatever the locale resolves to.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * BCP-47 locale deciding segment order, the literals between segments and the
+     * AM/PM names. Omitted: the runtime's default locale.
+     */
+    locale?: string;
+    /** Disables the field and drops every segment out of the tab order. */
+    disabled?: boolean;
+    /** Segments stay focusable and readable but refuse every edit. */
+    readOnly?: boolean;
+    /** Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid?: boolean;
+    /** Marks the field required — an incomplete field is `valueMissing`. */
+    required?: boolean;
+    /**
+     * Form field name. With it the time submits as the 24-hour `HH:mm[:ss]`
+     * string. Without it the field submits nothing.
+     */
+    name?: string;
+    /**
+     * Writing direction, which decides whether ArrowLeft moves to the previous or
+     * the next segment. Omitted: read off the nearest `[dir]` ancestor or
+     * `document.dir`.
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Words the accessible name of one segment. Called per segment type
+     * (`'hour'`, `'minute'`, `'dayPeriod'`, …).
+     *
+     * One of the only two strings here that `locale` cannot translate: segment
+     * order, the literals between segments and the AM/PM names all come from
+     * `Intl.DateTimeFormat` already, but these describe the widget rather than
+     * the value, so no locale data carries them.
+     * @default undefined — the built-in English names ('hour', 'minute', 'AM/PM', …).
+     */
+    getSegmentLabel?: (type: SegmentType) => string;
+    /**
+     * The `aria-valuetext` an untyped segment announces instead of a number it
+     * does not have — `aria-valuenow` has to stay present for a spinbutton, so
+     * this is the text that is actually read.
+     * @default 'Empty'
+     */
+    emptySegmentText?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the hidden form input satisfies its constraints. `true` without a `name`. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string | null) => any;
+    "value-change": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string | null) => any) | undefined;
+    "onValue-change"?: ((value: string | null) => any) | undefined;
+}>, {
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string | null;
+    invalid: boolean;
+    defaultValue: string | null;
+    dir: "ltr" | "rtl";
+    readOnly: boolean;
+    locale: string;
+    hourCycle: HourCycle;
+    granularity: TimeGranularity;
+    getSegmentLabel: (type: SegmentType) => string;
+    emptySegmentText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/time-field/TimeField.vue.js

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

package/dist/time-field/TimeField.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const h=require("../utils/useFormReset.cjs"),a=require("../utils/dateSegments.cjs"),p=require("../utils/SegmentedField.vue.cjs");let u=require("vue");var S=(0,u.defineComponent)({__name:"TimeField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"minute"},hourCycle:{default:void 0},locale:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:a.EMPTY_VALUE_TEXT}},emits:["update:value","value-change"],setup(l,{expose:s,emit:y}){const e=l,v=y,n=(0,u.computed)(()=>a.resolveHourCycle(e.locale,e.hourCycle)),m=(0,u.ref)(e.defaultValue??null),d=(0,u.computed)(()=>e.value!==void 0?e.value:m.value),r=(0,u.ref)(d.value?a.timeStringToValues(d.value,n.value):{});(0,u.watch)([d,n,()=>e.granularity],([t,i,T])=>{const f=a.valuesToTimeString(r.value,T,i);if(t===null){f!==null&&(r.value={});return}f!==t&&(r.value=a.timeStringToValues(t,i))});function g(t){r.value=t;const i=a.isComplete(a.buildSegments({kind:"time",granularity:e.granularity,locale:e.locale,hourCycle:n.value,values:t}))?a.valuesToTimeString(t,e.granularity,n.value):null;i!==d.value&&(e.value===void 0&&(m.value=i),v("update:value",i),v("value-change",i))}const c=(0,u.ref)(null),o=e.value??e.defaultValue??null;return h.useFormReset(()=>c.value?.inputEl,()=>{r.value=o?a.timeStringToValues(o,n.value):{},e.value===void 0&&(m.value=o),v("update:value",o),v("value-change",o)}),s({checkValidity:()=>c.value?.inputEl?.checkValidity()??!0,reportValidity:()=>c.value?.inputEl?.reportValidity()??!0}),(t,i)=>((0,u.openBlock)(),(0,u.createBlock)(p.default,{family:"time-field",class:"skdx-time-field","data-part":"root","data-skdx-component":"time-field",ref_key:"fieldRef",ref:c,kind:"time",granularity:l.granularity,locale:l.locale,"hour-cycle":n.value,values:r.value,"form-value":d.value,disabled:l.disabled,"read-only":l.readOnly,invalid:l.invalid,required:l.required,name:l.name,dir:l.dir,"get-segment-label":l.getSegmentLabel,"empty-segment-text":l.emptySegmentText,onValuesChange:g},null,8,["granularity","locale","hour-cycle","values","form-value","disabled","read-only","invalid","required","name","dir","get-segment-label","empty-segment-text"]))}});exports.default=S;

package/dist/time-field/TimeField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useFormReset as e}from"../utils/useFormReset.js";import{EMPTY_VALUE_TEXT as l,buildSegments as a,isComplete as t,resolveHourCycle as u,timeStringToValues as i,valuesToTimeString as d}from"../utils/dateSegments.js";import n from"../utils/SegmentedField.vue.js";import{computed as o,createBlock as r,defineComponent as v,openBlock as s,ref as m,watch as c}from"vue";var f=/* @__PURE__ */v({__name:"TimeField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"minute"},hourCycle:{default:void 0},locale:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:l}},emits:["update:value","value-change"],setup(l,{expose:v,emit:f}){const y=l,p=f,g=o(()=>u(y.locale,y.hourCycle)),h=m(y.defaultValue??null),V=o(()=>void 0!==y.value?y.value:h.value),b=m(V.value?i(V.value,g.value):{});function k(e){b.value=e;const l=t(a({kind:"time",granularity:y.granularity,locale:y.locale,hourCycle:g.value,values:e}))?d(e,y.granularity,g.value):null;l!==V.value&&(void 0===y.value&&(h.value=l),p("update:value",l),p("value-change",l))}c([V,g,()=>y.granularity],([e,l,a])=>{const t=d(b.value,a,l);null!==e?t!==e&&(b.value=i(e,l)):null!==t&&(b.value={})});const S=m(null),T=y.value??y.defaultValue??null;return e(()=>S.value?.inputEl,()=>{b.value=T?i(T,g.value):{},void 0===y.value&&(h.value=T),p("update:value",T),p("value-change",T)}),v({checkValidity:()=>S.value?.inputEl?.checkValidity()??!0,reportValidity:()=>S.value?.inputEl?.reportValidity()??!0}),(e,a)=>(s(),r(n,{family:"time-field",class:"skdx-time-field","data-part":"root","data-skdx-component":"time-field",ref_key:"fieldRef",ref:S,kind:"time",granularity:l.granularity,locale:l.locale,"hour-cycle":g.value,values:b.value,"form-value":V.value,disabled:l.disabled,"read-only":l.readOnly,invalid:l.invalid,required:l.required,name:l.name,dir:l.dir,"get-segment-label":l.getSegmentLabel,"empty-segment-text":l.emptySegmentText,onValuesChange:k},null,8,["granularity","locale","hour-cycle","values","form-value","disabled","read-only","invalid","required","name","dir","get-segment-label","empty-segment-text"]))}});export{f as default};

package/dist/time-field/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TimeField.vue.cjs");exports.SkdxTimeField=e.default;

package/dist/time-field/index.d.cts

@@ -0,0 +1,4 @@
+import type { Granularity } from '../utils/dateSegments.cjs';
+export { default as SkdxTimeField } from './TimeField.vue.cjs';
+/** How far down a `SkdxTimeField` is editable — `Granularity` minus the date-only `'day'`. */
+export type TimeGranularity = Exclude<Granularity, 'day'>;

package/dist/time-field/index.d.ts

@@ -0,0 +1,4 @@
+import type { Granularity } from '../utils/dateSegments.js';
+export { default as SkdxTimeField } from './TimeField.vue.js';
+/** How far down a `SkdxTimeField` is editable — `Granularity` minus the date-only `'day'`. */
+export type TimeGranularity = Exclude<Granularity, 'day'>;

package/dist/time-field/index.js

@@ -0,0 +1 @@
+import e from"./TimeField.vue.js";export{e as SkdxTimeField};

package/dist/timeline/Timeline.vue.cjs

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

package/dist/timeline/Timeline.vue.d.cts

@@ -0,0 +1,24 @@
+/**
+ * The Vue implementation of the shared Timeline contract (see
+ * `@skdx/shared`'s `timelineContract`). Renders an `<ol>`: no ARIA role or
+ * keyboard behavior beyond the semantic list — layout and connecting lines
+ * are entirely up to consumer CSS.
+ */
+type __VLS_Props = {
+    /** Layout axis, exposed as `data-orientation` — purely a styling hook. */
+    orientation?: 'vertical' | 'horizontal';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, 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/timeline/Timeline.vue.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The Vue implementation of the shared Timeline contract (see
+ * `@skdx/shared`'s `timelineContract`). Renders an `<ol>`: no ARIA role or
+ * keyboard behavior beyond the semantic list — layout and connecting lines
+ * are entirely up to consumer CSS.
+ */
+type __VLS_Props = {
+    /** Layout axis, exposed as `data-orientation` — purely a styling hook. */
+    orientation?: 'vertical' | 'horizontal';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, 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/timeline/Timeline.vue.js

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

package/dist/timeline/Timeline.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var n=["data-orientation"],o=(0,e.defineComponent)({__name:"Timeline",props:{orientation:{default:"vertical"}},setup(t){return(a,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("ol",{class:"skdx-timeline","data-part":"root","data-skdx-component":"timeline","data-orientation":t.orientation},[(0,e.renderSlot)(a.$slots,"default")],8,n))}});exports.default=o;

package/dist/timeline/Timeline.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as e,defineComponent as t,openBlock as a,renderSlot as o}from"vue";var n=["data-orientation"],i=/* @__PURE__ */t({__name:"Timeline",props:{orientation:{default:"vertical"}},setup:t=>(i,r)=>(a(),e("ol",{class:"skdx-timeline","data-part":"root","data-skdx-component":"timeline","data-orientation":t.orientation},[o(i.$slots,"default")],8,n))});export{i as default};

package/dist/timeline/TimelineContent.vue.cjs

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

package/dist/timeline/TimelineContent.vue.d.cts

@@ -0,0 +1,14 @@
+/** The body content of a `SkdxTimelineItem` (title, description, timestamp, etc). */
+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;
+    };
+};