@skdx/vue 0.27.0 → 0.29.0

package/dist/text-field/primitives.js

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

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

@@ -1,45 +1,103 @@
 /**
- * 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`.
+ * Renders a native `<textarea>` that, with `autoResize`, grows to fit content instead of scrolling, optionally capped to `maxRows`.
  */
 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. */
+    /**
+     * Current text, for controlled usage. Pair with `v-model:value` or `@value-change`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string | undefined;
+    /**
+     * Initial text, used only when the textarea is uncontrolled.
+     * @default '' — an empty textarea.
+     */
     defaultValue?: string;
-    /** Grow the textarea to fit its content instead of showing a scrollbar. */
+    /**
+     * Grow the textarea to fit its content instead of showing a scrollbar.
+     * @default false
+     */
     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`. */
+    /**
+     * Caps auto-resize growth to this many rows, based on computed line-height.
+     * @default undefined — grows without limit.
+     */
+    maxRows?: number | undefined;
+    /**
+     * The control's opening size, and the floor `autoResize` will not shrink below.
+     * @default 2 — the platform's own `rows` default.
+     */
+    minRows?: number;
+    /**
+     * Marks the textarea as invalid, exposed as `aria-invalid`/`data-invalid`.
+     * @default false
+     */
     invalid?: boolean;
-    /** Native `readOnly` attribute, plus `aria-readonly`/`data-readonly` styling hooks. */
+    /**
+     * Native `readOnly` attribute, plus `aria-readonly`/`data-readonly` styling hooks.
+     * @default false
+     */
     readOnly?: boolean;
+    /**
+     * Disables the textarea: it leaves the tab order, submits nothing, and is announced as unavailable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Id of the `<form>` this textarea submits with. Mirrors the native `<textarea form="…">`.
+     * @default undefined — the nearest ancestor `<form>`.
+     */
+    form?: string | undefined;
+    /**
+     * Native `maxlength` — the longest value the control accepts, reported as `tooLong`.
+     * @default undefined — no upper bound on the value's length.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Native `minlength` — the shortest value constraint validation accepts, reported as `tooShort`.
+     * @default undefined — no lower bound on the value's length.
+     */
+    minLength?: number | undefined;
+    /**
+     * Which resize handles the skin leaves on the textarea, as `data-resize`.
+     * @default undefined — falls back to a `data-resize` attribute.
+     */
+    resize?: 'none' | 'block' | 'auto' | (string & {}) | undefined;
+    /**
+     * Form field name. Without it the textarea submits nothing, exactly like a nameless native `<textarea>`.
+     * @default undefined — the textarea submits nothing.
+     */
+    name?: string | undefined;
+    /**
+     * Marks the textarea required for native constraint validation (`valueMissing` when empty).
+     * @default false
+     */
+    required?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    /** Focuses the underlying native textarea. */
+    /** Moves keyboard focus onto the underlying native textarea. */
     focus: () => void | undefined;
-    /** The underlying native textarea element. */
+    /** Runs constraint validation on the underlying textarea, firing `invalid` when it fails; `true` before it mounts. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+    /** Pushes an externally-computed error onto the underlying textarea, like `HTMLTextAreaElement.setCustomValidity()`. */
+    setCustomValidity: (message: string) => void | undefined;
+    /** The underlying native `<textarea>` element, for focus and measurement. */
     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;
+    "onUpdate:value"?: (value: string) => any;
+    "onValue-change"?: (value: string) => any;
 }>, {
-    value: string;
-    invalid: boolean;
+    disabled: boolean;
+    name: string | undefined;
     defaultValue: string;
-    autoResize: boolean;
-    maxRows: number;
     readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+    autoResize: boolean;
+    minRows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,45 +1,103 @@
 /**
- * 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`.
+ * Renders a native `<textarea>` that, with `autoResize`, grows to fit content instead of scrolling, optionally capped to `maxRows`.
  */
 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. */
+    /**
+     * Current text, for controlled usage. Pair with `v-model:value` or `@value-change`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string | undefined;
+    /**
+     * Initial text, used only when the textarea is uncontrolled.
+     * @default '' — an empty textarea.
+     */
     defaultValue?: string;
-    /** Grow the textarea to fit its content instead of showing a scrollbar. */
+    /**
+     * Grow the textarea to fit its content instead of showing a scrollbar.
+     * @default false
+     */
     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`. */
+    /**
+     * Caps auto-resize growth to this many rows, based on computed line-height.
+     * @default undefined — grows without limit.
+     */
+    maxRows?: number | undefined;
+    /**
+     * The control's opening size, and the floor `autoResize` will not shrink below.
+     * @default 2 — the platform's own `rows` default.
+     */
+    minRows?: number;
+    /**
+     * Marks the textarea as invalid, exposed as `aria-invalid`/`data-invalid`.
+     * @default false
+     */
     invalid?: boolean;
-    /** Native `readOnly` attribute, plus `aria-readonly`/`data-readonly` styling hooks. */
+    /**
+     * Native `readOnly` attribute, plus `aria-readonly`/`data-readonly` styling hooks.
+     * @default false
+     */
     readOnly?: boolean;
+    /**
+     * Disables the textarea: it leaves the tab order, submits nothing, and is announced as unavailable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Id of the `<form>` this textarea submits with. Mirrors the native `<textarea form="…">`.
+     * @default undefined — the nearest ancestor `<form>`.
+     */
+    form?: string | undefined;
+    /**
+     * Native `maxlength` — the longest value the control accepts, reported as `tooLong`.
+     * @default undefined — no upper bound on the value's length.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Native `minlength` — the shortest value constraint validation accepts, reported as `tooShort`.
+     * @default undefined — no lower bound on the value's length.
+     */
+    minLength?: number | undefined;
+    /**
+     * Which resize handles the skin leaves on the textarea, as `data-resize`.
+     * @default undefined — falls back to a `data-resize` attribute.
+     */
+    resize?: 'none' | 'block' | 'auto' | (string & {}) | undefined;
+    /**
+     * Form field name. Without it the textarea submits nothing, exactly like a nameless native `<textarea>`.
+     * @default undefined — the textarea submits nothing.
+     */
+    name?: string | undefined;
+    /**
+     * Marks the textarea required for native constraint validation (`valueMissing` when empty).
+     * @default false
+     */
+    required?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    /** Focuses the underlying native textarea. */
+    /** Moves keyboard focus onto the underlying native textarea. */
     focus: () => void | undefined;
-    /** The underlying native textarea element. */
+    /** Runs constraint validation on the underlying textarea, firing `invalid` when it fails; `true` before it mounts. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+    /** Pushes an externally-computed error onto the underlying textarea, like `HTMLTextAreaElement.setCustomValidity()`. */
+    setCustomValidity: (message: string) => void | undefined;
+    /** The underlying native `<textarea>` element, for focus and measurement. */
     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;
+    "onUpdate:value"?: (value: string) => any;
+    "onValue-change"?: (value: string) => any;
 }>, {
-    value: string;
-    invalid: boolean;
+    disabled: boolean;
+    name: string | undefined;
     defaultValue: string;
-    autoResize: boolean;
-    maxRows: number;
     readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+    autoResize: boolean;
+    minRows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/textarea/Textarea.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +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;
+const y=require("../utils/appearance.cjs"),h=require("../utils/useFormReset.cjs"),x=require("../utils/reassertValue.cjs"),g=require("../utils/measure-auto-resize.cjs");let t=require("vue");var R=["value","rows","form","maxlength","minlength","readonly","disabled","aria-invalid","aria-readonly","data-invalid","name","required","data-readonly","data-disabled"],V=(0,t.defineComponent)({inheritAttrs:!1,__name:"Textarea",props:{value:{},defaultValue:{default:""},autoResize:{type:Boolean,default:!1},maxRows:{},minRows:{default:2},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},form:{},maxLength:{},minLength:{},resize:{},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(e,{expose:f,emit:c}){const a=e,i=c,u=(0,t.ref)(null),r=(0,t.ref)(a.defaultValue),n=(0,t.computed)(()=>a.value!==void 0?a.value:r.value);function d(){const l=u.value;!l||!a.autoResize||(l.style.height=`${g.measureAutoResizeHeight(l,a.maxRows,a.minRows)}px`)}function m(l){const o=l.target,s=o.value;a.value===void 0&&(r.value=s),i("update:value",s),i("value-change",s),d(),x.reassertValue(o,()=>n.value)}(0,t.watch)(n,()=>{(0,t.nextTick)(d)}),(0,t.onMounted)(d);const v=(0,t.computed)(()=>a.disabled);return h.useFormReset(()=>u.value,()=>{a.value===void 0&&(r.value=a.defaultValue),i("update:value",a.defaultValue),i("value-change",a.defaultValue)}),f({focus:()=>u.value?.focus(),checkValidity:()=>u.value?.checkValidity()??!0,reportValidity:()=>u.value?.reportValidity()??!0,setCustomValidity:l=>u.value?.setCustomValidity(l),el:u}),(l,o)=>((0,t.openBlock)(),(0,t.createElementBlock)("textarea",(0,t.mergeProps)({ref_key:"textareaRef",ref:u,class:"skdx-textarea","data-part":"root","data-skdx-component":"textarea",value:n.value,rows:e.autoResize?void 0:e.minRows,form:e.form,maxlength:e.maxLength,minlength:e.minLength,readonly:e.readOnly,disabled:v.value,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,name:e.name,required:e.required,"data-readonly":e.readOnly?"":void 0,"data-disabled":v.value?"":void 0,style:e.autoResize?{overflow:"hidden",resize:"none"}:void 0},{...l.$attrs,...(0,t.unref)(y.appearanceAttrs)({resize:e.resize},l.$attrs)},{onInput:m}),null,16,R))}});exports.default=V;

package/dist/textarea/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -1 +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};
+import{appearanceAttrs as e}from"../utils/appearance.js";import{useFormReset as a}from"../utils/useFormReset.js";import{reassertValue as t}from"../utils/reassertValue.js";import{measureAutoResizeHeight as l}from"../utils/measure-auto-resize.js";import{computed as i,createElementBlock as o,defineComponent as u,mergeProps as r,nextTick as d,onMounted as s,openBlock as n,ref as v,unref as m,watch as f}from"vue";var p=["value","rows","form","maxlength","minlength","readonly","disabled","aria-invalid","aria-readonly","data-invalid","name","required","data-readonly","data-disabled"],c=/* @__PURE__ */u({inheritAttrs:!1,__name:"Textarea",props:{value:{},defaultValue:{default:""},autoResize:{type:Boolean,default:!1},maxRows:{},minRows:{default:2},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},form:{},maxLength:{},minLength:{},resize:{},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(u,{expose:c,emit:y}){const h=u,x=y,g=v(null),R=v(h.defaultValue),V=i(()=>void 0!==h.value?h.value:R.value);function z(){const e=g.value;!e||!h.autoResize||(e.style.height=`${l(e,h.maxRows,h.minRows)}px`)}function w(e){const a=e.target,l=a.value;void 0===h.value&&(R.value=l),x("update:value",l),x("value-change",l),z(),t(a,()=>V.value)}f(V,()=>{d(z)}),s(z);const k=i(()=>h.disabled);return a(()=>g.value,()=>{void 0===h.value&&(R.value=h.defaultValue),x("update:value",h.defaultValue),x("value-change",h.defaultValue)}),c({focus:()=>g.value?.focus(),checkValidity:()=>g.value?.checkValidity()??!0,reportValidity:()=>g.value?.reportValidity()??!0,setCustomValidity:e=>g.value?.setCustomValidity(e),el:g}),(a,t)=>(n(),o("textarea",r({ref_key:"textareaRef",ref:g,class:"skdx-textarea","data-part":"root","data-skdx-component":"textarea",value:V.value,rows:u.autoResize?void 0:u.minRows,form:u.form,maxlength:u.maxLength,minlength:u.minLength,readonly:u.readOnly,disabled:k.value,"aria-invalid":!!u.invalid||void 0,"aria-readonly":!!u.readOnly||void 0,"data-invalid":u.invalid?"":void 0,name:u.name,required:u.required,"data-readonly":u.readOnly?"":void 0,"data-disabled":k.value?"":void 0,style:u.autoResize?{overflow:"hidden",resize:"none"}:void 0},{...a.$attrs,...m(e)({resize:u.resize},a.$attrs)},{onInput:w}),null,16,p))}});export{c as default};

package/dist/time/Time.vue.cjs

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

package/dist/time/Time.vue.d.cts

@@ -0,0 +1,51 @@
+import { type DateInput } from '../utils/date-value.cjs';
+/**
+ * Renders `<time>` with machine-readable `datetime` and readable text, switching to a relative label when `relative` is set.
+ *
+ * @example
+ * ```vue
+ * <SkdxTime value="2026-08-10" />
+ * <SkdxTime :value="updatedAt" relative :now="tick" />
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * The instant to render, as a `Date` or ISO-8601 string; a date-only string is read as a local calendar date, never through `new Date(string)`.
+     */
+    value: DateInput;
+    /**
+     * Renders the text as a relative label measured from `now`; the `datetime` attribute stays the absolute instant.
+     * @default false
+     */
+    relative?: boolean;
+    /**
+     * While `relative` is set, also puts the absolute formatted date in `title`.
+     * @default true
+     */
+    absoluteTitle?: boolean;
+    /**
+     * BCP-47 locale for the formatted text.
+     * @default undefined — the runtime's own locale, the one `toLocaleDateString()` would pick.
+     */
+    locale?: string;
+    /**
+     * The instant a relative label is measured from; supply it yourself to drive re-renders with your own interval.
+     * @default undefined — read once at render; this component starts no timer.
+     */
+    now?: Date | number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    relative: boolean;
+    absoluteTitle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/time/Time.vue.d.ts

@@ -0,0 +1,51 @@
+import { type DateInput } from '../utils/date-value.js';
+/**
+ * Renders `<time>` with machine-readable `datetime` and readable text, switching to a relative label when `relative` is set.
+ *
+ * @example
+ * ```vue
+ * <SkdxTime value="2026-08-10" />
+ * <SkdxTime :value="updatedAt" relative :now="tick" />
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * The instant to render, as a `Date` or ISO-8601 string; a date-only string is read as a local calendar date, never through `new Date(string)`.
+     */
+    value: DateInput;
+    /**
+     * Renders the text as a relative label measured from `now`; the `datetime` attribute stays the absolute instant.
+     * @default false
+     */
+    relative?: boolean;
+    /**
+     * While `relative` is set, also puts the absolute formatted date in `title`.
+     * @default true
+     */
+    absoluteTitle?: boolean;
+    /**
+     * BCP-47 locale for the formatted text.
+     * @default undefined — the runtime's own locale, the one `toLocaleDateString()` would pick.
+     */
+    locale?: string;
+    /**
+     * The instant a relative label is measured from; supply it yourself to drive re-renders with your own interval.
+     * @default undefined — read once at render; this component starts no timer.
+     */
+    now?: Date | number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    relative: boolean;
+    absoluteTitle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/time/Time.vue.js

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

package/dist/time/Time.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const s=require("../utils/date-value.cjs"),o=require("./format.cjs");let e=require("vue");var v=["datetime","title"],c=(0,e.defineComponent)({__name:"Time",props:{value:{},relative:{type:Boolean,default:!1},absoluteTitle:{type:Boolean,default:!0},locale:{},now:{}},setup(u){const t=u,a=(0,e.computed)(()=>s.toDate(t.value,"SkdxTime.value")),l=(0,e.computed)(()=>a.value?o.formatAbsolute(a.value,t.locale):""),r=(0,e.computed)(()=>a.value&&t.relative&&t.absoluteTitle?l.value:void 0),i=(0,e.computed)(()=>a.value?t.relative?o.formatRelative(a.value,t.now,t.locale):l.value:"");return(n,d)=>a.value?((0,e.openBlock)(),(0,e.createElementBlock)("time",{key:0,class:"skdx-time","data-part":"root","data-skdx-component":"time",datetime:a.value.toISOString(),title:r.value},[(0,e.renderSlot)(n.$slots,"default",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(i.value),1)])],8,v)):(0,e.createCommentVNode)("",!0)}});exports.default=c;

package/dist/time/Time.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{toDate as e}from"../utils/date-value.js";import{formatAbsolute as a,formatRelative as t}from"./format.js";import{computed as l,createCommentVNode as o,createElementBlock as s,createTextVNode as u,defineComponent as r,openBlock as i,renderSlot as m,toDisplayString as v}from"vue";var d=["datetime","title"],n=/* @__PURE__ */r({__name:"Time",props:{value:{},relative:{type:Boolean,default:!1},absoluteTitle:{type:Boolean,default:!0},locale:{},now:{}},setup(r){const n=r,p=l(()=>e(n.value,"SkdxTime.value")),c=l(()=>p.value?a(p.value,n.locale):""),f=l(()=>p.value&&n.relative&&n.absoluteTitle?c.value:void 0),k=l(()=>p.value?n.relative?t(p.value,n.now,n.locale):c.value:"");return(e,a)=>p.value?(i(),s("time",{key:0,class:"skdx-time","data-part":"root","data-skdx-component":"time",datetime:p.value.toISOString(),title:f.value},[m(e.$slots,"default",{},()=>[u(v(k.value),1)])],8,d)):o("",!0)}});export{n as default};

package/dist/time/format.cjs

@@ -0,0 +1 @@
+function i(t){return t??new Intl.DateTimeFormat().resolvedOptions().locale}function l(t,e){return t.toLocaleDateString(i(e),{year:"numeric",month:"long",day:"numeric"})}var u=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function f(t,e,m){let o;e===void 0?o=Date.now():o=e instanceof Date?e.getTime():e;const n=t.getTime()-o,r=new Intl.RelativeTimeFormat(i(m),{numeric:"auto"});for(const[c,a]of u)if(Math.abs(n)>=a)return r.format(Math.trunc(n/a),c);return r.format(0,"second")}exports.formatAbsolute=l;exports.formatRelative=f;

package/dist/time/format.d.cts

@@ -0,0 +1,4 @@
+/** A full date label, e.g. `'January 5, 2026'`. */
+export declare function formatAbsolute(date: Date, locale?: string): string;
+/** A relative label, e.g. `'3 hours ago'` or `'in 2 days'`. */
+export declare function formatRelative(date: Date, now: Date | number | undefined, locale?: string): string;

package/dist/time/format.d.ts

@@ -0,0 +1,4 @@
+/** A full date label, e.g. `'January 5, 2026'`. */
+export declare function formatAbsolute(date: Date, locale?: string): string;
+/** A relative label, e.g. `'3 hours ago'` or `'in 2 days'`. */
+export declare function formatRelative(date: Date, now: Date | number | undefined, locale?: string): string;

package/dist/time/format.js

@@ -0,0 +1 @@
+function e(e){return e??(new Intl.DateTimeFormat).resolvedOptions().locale}function t(t,n){return t.toLocaleDateString(e(n),{year:"numeric",month:"long",day:"numeric"})}var n=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function o(t,o,a){let r;r=void 0===o?Date.now():o instanceof Date?o.getTime():o;const i=t.getTime()-r,m=new Intl.RelativeTimeFormat(e(a),{numeric:"auto"});for(const[e,t]of n)if(Math.abs(i)>=t)return m.format(Math.trunc(i/t),e);return m.format(0,"second")}export{t as formatAbsolute,o as formatRelative};

package/dist/time/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./format.cjs"),r=require("./Time.vue.cjs");exports.SkdxTime=r.default;exports.formatAbsolute=e.formatAbsolute;exports.formatRelative=e.formatRelative;

package/dist/time/index.d.cts

@@ -0,0 +1,2 @@
+export { default as SkdxTime } from './Time.vue.cjs';
+export { formatAbsolute, formatRelative } from './format.cjs';

package/dist/time/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkdxTime } from './Time.vue.js';
+export { formatAbsolute, formatRelative } from './format.js';

package/dist/time/index.js

@@ -0,0 +1 @@
+import{formatAbsolute as a,formatRelative as o}from"./format.js";import t from"./Time.vue.js";export{t as SkdxTime,a as formatAbsolute,o as formatRelative};

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

@@ -1,56 +1,43 @@
-import { type Granularity, type HourCycle, type SegmentType } from '../utils/dateSegments.cjs';
-/** How far down a `SkdxTimeField` is editable — `Granularity` minus the date-only `'day'`. */
+import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../utils/date-segments.cjs';
 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.
+ * Vue implementation of the shared TimeField contract: a `role="group"` of `role="spinbutton"` segments for a 24-hour time, working controlled or uncontrolled with optional form submission.
  */
 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.
+     * Current time as a 24-hour `HH:mm[:ss]` string or `Date` (local wall-clock time); `null` while any segment is untyped.
      */
-    value?: string | null;
-    /** Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`. */
-    defaultValue?: string | null;
+    value?: string | Date | null | undefined;
+    /** Initial time for uncontrolled usage, in the same `HH:mm[:ss]` shape as `value`. */
+    defaultValue?: string | Date | null;
     /**
-     * How far down the field is editable. `'second'` adds a seconds segment;
-     * `'hour'` and `'minute'` both render hour and minute.
+     * How far down the field is editable: `'second'` adds a seconds segment; `'hour'`/`'minute'` 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.
+     * Forces 12-hour (with AM/PM) or 24-hour display; display only, `value` stays 24-hour.
      */
-    hourCycle?: HourCycle;
+    hourCycle?: HourCycle | undefined;
     /**
      * BCP-47 locale deciding segment order, the literals between segments and the
      * AM/PM names. Omitted: the runtime's default locale.
      */
-    locale?: string;
+    locale?: string | undefined;
+    /**
+     * Earliest accepted time in 24-hour `HH:mm[:ss]` shape (or `Date`); values before it fail `rangeUnderflow`.
+     * @default undefined — any time of day.
+     */
+    min?: string | Date | undefined;
+    /**
+     * Latest accepted time in 24-hour `HH:mm[:ss]` shape (or `Date`); values after it fail `rangeOverflow`.
+     * @default undefined — any time of day.
+     */
+    max?: string | Date | undefined;
+    /**
+     * Increment the field steps by and accepts, in seconds, exactly like `<input type="time" step>`.
+     * @default undefined — one unit of the finest segment: 60 on a `minute` field, 1 on a `second` one.
+     */
+    step?: number | undefined;
     /** Disables the field and drops every segment out of the tab order. */
     disabled?: boolean;
     /** Segments stay focusable and readable but refuse every edit. */
@@ -60,27 +47,25 @@ type __VLS_Props = {
     /** 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.
+     * Form field name; with it the time submits as the 24-hour `HH:mm[:ss]` string.
+     * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Writing direction, which decides whether ArrowLeft moves to the previous or
-     * the next segment. Omitted: read off the nearest `[dir]` ancestor or
-     * `document.dir`.
+     * Id of the `<form>` this field submits into, for a field rendered outside it.
+     * @default undefined — the field belongs to its nearest ancestor `<form>`, if any.
      */
-    dir?: 'ltr' | 'rtl';
+    form?: string | undefined;
     /**
-     * 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.
+     * Writing direction, deciding whether ArrowLeft moves to the previous or next segment.
+     * @default undefined
+     */
+    dir?: 'ltr' | 'rtl' | undefined;
+    /**
+     * Words the accessible name of one segment, called per segment type (`'hour'`, `'minute'`, `'dayPeriod'`, …).
      * @default undefined — the built-in English names ('hour', 'minute', 'AM/PM', …).
      */
-    getSegmentLabel?: (type: SegmentType) => string;
+    getSegmentLabel?: ((type: SegmentType) => string) | undefined;
     /**
      * 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
@@ -88,31 +73,35 @@ type __VLS_Props = {
      * @default 'Empty'
      */
     emptySegmentText?: string;
+    /**
+     * Words the placeholder letters one segment shows before it has been typed, called per segment type.
+     * @default undefined — the built-in English letters ('hh', 'mm', 'ss', '--').
+     */
+    getSegmentPlaceholder?: SegmentPlaceholderResolver | undefined;
 };
 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;
+    /** Pushes an externally-computed error onto the hidden input, like `HTMLInputElement.setCustomValidity()`. */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, 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;
+    "onUpdate:value"?: (value: string | null) => any;
+    "onValue-change"?: (value: string | null) => any;
 }>, {
     disabled: boolean;
+    defaultValue: string | Date | null;
+    readOnly: boolean;
     required: boolean;
-    name: string;
-    value: string | null;
+    value: string | Date | null | undefined;
     invalid: boolean;
-    defaultValue: string | null;
-    dir: "ltr" | "rtl";
-    readOnly: boolean;
-    locale: string;
-    hourCycle: HourCycle;
+    locale: string | undefined;
+    hourCycle: HourCycle | undefined;
     granularity: TimeGranularity;
-    getSegmentLabel: (type: SegmentType) => string;
     emptySegmentText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;