@skdx/vue 0.28.0 → 0.30.0

package/dist/text-field/TextFieldInput.vue.d.ts

@@ -1,20 +1,33 @@
 /**
- * The native `<input>` for `<SkdxTextField>`. Reads value/disabled/required/
- * invalid/name from context, writes back on input. Must be inside `<SkdxTextField>`.
- * Delegates form methods and resets.
+ * The native `<input>` for `<SkdxTextField>`, reading value/disabled/required/invalid/name from context and writing back on input.
  */
 type __VLS_Props = {
     /** Native `<input>` `type` attribute, e.g. `'text'`, `'email'`, `'password'`. */
-    type?: string;
+    type?: string | undefined;
     /**
      * Native `readonly`: blocks editing only (remains selectable, focusable,
      * submitted), unlike `disabled` on root.
      * @defaultValue false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
+    /**
+     * Size rung the skin renders the input at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+    /**
+     * Visual style family the skin gives the input, reflected as `data-variant`.
+     * @default undefined — falls back to a `data-variant` attribute.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    type: string;
-    readOnly: boolean;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    /** Moves keyboard focus onto the underlying native text input. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The underlying native `<input>` element, for focus and measurement. */
+    el: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: string | undefined;
+    readOnly: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1 +1 @@
-const i=require("./context.cjs"),d=require("../utils/composeRefs.cjs"),s=require("../utils/reassertValue.cjs");let e=require("vue");var o=["id","type","name","value","disabled","required","readonly","form","aria-invalid","data-disabled","data-invalid"],v=(0,e.defineComponent)({inheritAttrs:!1,__name:"TextFieldInput",props:{type:{default:"text"},readOnly:{type:Boolean,default:!1}},setup(u){const t=(0,e.inject)(i.TEXT_FIELD_CONTEXT);if(!t)throw new Error("<SkdxTextFieldInput> must be used inside <SkdxTextField>.");const n=d.composeRefs(t.inputEl);function l(a){const r=a.target;t.setValue(r.value),s.reassertValue(r,()=>t.value.value)}return(a,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",(0,e.mergeProps)({class:"skdx-text-field__input","data-part":"input",id:(0,e.unref)(t).inputId,ref:(0,e.unref)(n),type:u.type,name:(0,e.unref)(t).name.value,value:(0,e.unref)(t).value.value,disabled:(0,e.unref)(t).disabled.value,required:(0,e.unref)(t).required.value,readonly:u.readOnly,form:(0,e.unref)(t).form.value,"aria-invalid":(0,e.unref)(t).invalid.value?"true":void 0,"data-disabled":(0,e.unref)(t).disabled.value?"":void 0,"data-invalid":(0,e.unref)(t).invalid.value?"":void 0,onInput:l},a.$attrs),null,16,o))}});exports.default=v;
+const s=require("../utils/appearance.cjs"),o=require("../utils/injectRequired.cjs"),f=require("./context.cjs"),v=require("../utils/composeRefs.cjs"),c=require("../utils/reassertValue.cjs");let e=require("vue");var p=["id","type","name","value","disabled","required","readonly","form","aria-invalid","aria-describedby","aria-labelledby","data-disabled","data-invalid"],b=(0,e.defineComponent)({inheritAttrs:!1,__name:"TextFieldInput",props:{type:{default:"text"},readOnly:{type:Boolean,default:!1},size:{},variant:{}},setup(u,{expose:l}){const a=o.injectRequired(f.TEXT_FIELD_CONTEXT,"<SkdxTextFieldInput> must be used inside <SkdxTextField>."),i=(0,e.ref)(null),n=v.composeRefs(a.inputEl,i);function d(r){const t=r.target;a.setValue(t.value),c.reassertValue(t,()=>a.value.value)}return l({focus:r=>i.value?.focus(r),el:i}),(r,t)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",(0,e.mergeProps)({id:(0,e.unref)(a).forwarded.value.id??(0,e.unref)(a).inputId,ref:(0,e.unref)(n),class:"skdx-text-field__input","data-part":"input",type:u.type,name:(0,e.unref)(a).name.value,value:(0,e.unref)(a).value.value,disabled:(0,e.unref)(a).disabled.value,required:(0,e.unref)(a).required.value,readonly:u.readOnly,form:(0,e.unref)(a).form.value,"aria-invalid":(0,e.unref)(a).invalid.value?"true":(0,e.unref)(a).forwarded.value["aria-invalid"]??void 0,"aria-describedby":(0,e.unref)(a).forwarded.value["aria-describedby"],"aria-labelledby":(0,e.unref)(a).forwarded.value["aria-labelledby"],"data-disabled":(0,e.unref)(a).disabled.value?"":void 0,"data-invalid":(0,e.unref)(a).invalid.value?"":void 0},{...r.$attrs,...(0,e.unref)(s.appearanceAttrs)({size:u.size,variant:u.variant},r.$attrs)},{onInput:d}),null,16,p))}});exports.default=b;

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

@@ -1 +1 @@
-import{TEXT_FIELD_CONTEXT as e}from"./context.js";import{composeRefs as a}from"../utils/composeRefs.js";import{reassertValue as t}from"../utils/reassertValue.js";import{createElementBlock as i,defineComponent as l,inject as d,mergeProps as r,openBlock as s,unref as n}from"vue";var u=["id","type","name","value","disabled","required","readonly","form","aria-invalid","data-disabled","data-invalid"],o=/* @__PURE__ */l({inheritAttrs:!1,__name:"TextFieldInput",props:{type:{default:"text"},readOnly:{type:Boolean,default:!1}},setup(l){const o=d(e);if(!o)throw new Error("<SkdxTextFieldInput> must be used inside <SkdxTextField>.");const p=a(o.inputEl);function v(e){const a=e.target;o.setValue(a.value),t(a,()=>o.value.value)}return(e,a)=>(s(),i("input",r({class:"skdx-text-field__input","data-part":"input",id:n(o).inputId,ref:n(p),type:l.type,name:n(o).name.value,value:n(o).value.value,disabled:n(o).disabled.value,required:n(o).required.value,readonly:l.readOnly,form:n(o).form.value,"aria-invalid":n(o).invalid.value?"true":void 0,"data-disabled":n(o).disabled.value?"":void 0,"data-invalid":n(o).invalid.value?"":void 0,onInput:v},e.$attrs),null,16,u))}});export{o as default};
+import{appearanceAttrs as e}from"../utils/appearance.js";import{injectRequired as a}from"../utils/injectRequired.js";import{TEXT_FIELD_CONTEXT as i}from"./context.js";import{composeRefs as r}from"../utils/composeRefs.js";import{reassertValue as t}from"../utils/reassertValue.js";import{createElementBlock as d,defineComponent as l,mergeProps as s,openBlock as u,ref as n,unref as o}from"vue";var p=["id","type","name","value","disabled","required","readonly","form","aria-invalid","aria-describedby","aria-labelledby","data-disabled","data-invalid"],v=/* @__PURE__ */l({inheritAttrs:!1,__name:"TextFieldInput",props:{type:{default:"text"},readOnly:{type:Boolean,default:!1},size:{},variant:{}},setup(l,{expose:v}){const f=a(i,"<SkdxTextFieldInput> must be used inside <SkdxTextField>."),m=n(null),b=r(f.inputEl,m);function c(e){const a=e.target;f.setValue(a.value),t(a,()=>f.value.value)}return v({focus:e=>m.value?.focus(e),el:m}),(a,i)=>(u(),d("input",s({id:o(f).forwarded.value.id??o(f).inputId,ref:o(b),class:"skdx-text-field__input","data-part":"input",type:l.type,name:o(f).name.value,value:o(f).value.value,disabled:o(f).disabled.value,required:o(f).required.value,readonly:l.readOnly,form:o(f).form.value,"aria-invalid":o(f).invalid.value?"true":o(f).forwarded.value["aria-invalid"]??void 0,"aria-describedby":o(f).forwarded.value["aria-describedby"],"aria-labelledby":o(f).forwarded.value["aria-labelledby"],"data-disabled":o(f).disabled.value?"":void 0,"data-invalid":o(f).invalid.value?"":void 0},{...a.$attrs,...o(e)({size:l.size,variant:l.variant},a.$attrs)},{onInput:c}),null,16,p))}});export{v as default};

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

@@ -1,6 +1,5 @@
 /**
- * A decorative container for an icon or adornment placed at the start or end
- * of a `<SkdxTextField>`. Purely presentational — no context reads.
+ * A decorative container for an icon or adornment placed at the start or end of a `<SkdxTextField>`.
  */
 type __VLS_Props = {
     /** Which end of the field this slot sits at, exposed as `data-side`. */

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

@@ -1,6 +1,5 @@
 /**
- * A decorative container for an icon or adornment placed at the start or end
- * of a `<SkdxTextField>`. Purely presentational — no context reads.
+ * A decorative container for an icon or adornment placed at the start or end of a `<SkdxTextField>`.
  */
 type __VLS_Props = {
     /** Which end of the field this slot sits at, exposed as `data-side`. */

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

@@ -3,6 +3,7 @@ import type { InjectionKey, Ref } from 'vue';
 export interface TextFieldContext {
     inputId: string;
     disabled: Ref<boolean>;
+    readOnly: Ref<boolean>;
     invalid: Ref<boolean>;
     required: Ref<boolean>;
     value: Ref<string>;
@@ -13,6 +14,15 @@ export interface TextFieldContext {
     form: Ref<string | undefined>;
     /** The native input, used by the root's `checkValidity()` and form reset. */
     inputEl: Ref<HTMLInputElement | null>;
+    /** Root `id` and aria attributes that belong on the wrapped input, so form wiring lands there. */
+    forwarded: Ref<ForwardedInputAttrs>;
+}
+export interface ForwardedInputAttrs {
+    id?: string;
+    'aria-describedby'?: string;
+    /** The ARIA enum, not a free string: `'grammar'`/`'spelling'` must survive the trip to the input. */
+    'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling';
+    'aria-labelledby'?: string;
 }
 /** @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>;

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

@@ -3,6 +3,7 @@ import type { InjectionKey, Ref } from 'vue';
 export interface TextFieldContext {
     inputId: string;
     disabled: Ref<boolean>;
+    readOnly: Ref<boolean>;
     invalid: Ref<boolean>;
     required: Ref<boolean>;
     value: Ref<string>;
@@ -13,6 +14,15 @@ export interface TextFieldContext {
     form: Ref<string | undefined>;
     /** The native input, used by the root's `checkValidity()` and form reset. */
     inputEl: Ref<HTMLInputElement | null>;
+    /** Root `id` and aria attributes that belong on the wrapped input, so form wiring lands there. */
+    forwarded: Ref<ForwardedInputAttrs>;
+}
+export interface ForwardedInputAttrs {
+    id?: string;
+    'aria-describedby'?: string;
+    /** The ARIA enum, not a free string: `'grammar'`/`'spelling'` must survive the trip to the input. */
+    'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling';
+    'aria-labelledby'?: string;
 }
 /** @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>;

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

@@ -1,7 +1,5 @@
 /**
- * Primitives for `SkdxTextField` — composable building blocks.
- * Use these when you need a custom layout beyond the derived recipe.
- * The recipe derives its body from slots when given children, rendering these parts explicitly.
+ * Primitives for `SkdxTextField` — composable building blocks for a custom layout beyond the derived recipe.
  *
  * @example
  * ```vue

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

@@ -1,7 +1,5 @@
 /**
- * Primitives for `SkdxTextField` — composable building blocks.
- * Use these when you need a custom layout beyond the derived recipe.
- * The recipe derives its body from slots when given children, rendering these parts explicitly.
+ * Primitives for `SkdxTextField` — composable building blocks for a custom layout beyond the derived recipe.
  *
  * @example
  * ```vue

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

@@ -1,14 +1,12 @@
 /**
- * The Vue implementation of the shared Textarea contract. Renders a native `<textarea>`. With `autoResize`, grows its height to fit content instead of scrolling, optionally capped to `maxRows` computed lines.
- *
- * Supports `v-model:value` (the prop name matches every other framework's `value`/`valueChange` pair), or uncontrolled usage via `defaultValue`. Single-rooted, so `aria-label` falls through onto the `<textarea>`.
+ * 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`.
      * @default undefined — uncontrolled, seeded from `defaultValue`.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial text, used only when the textarea is uncontrolled.
      * @default '' — an empty textarea.
@@ -23,11 +21,9 @@ type __VLS_Props = {
      * Caps auto-resize growth to this many rows, based on computed line-height.
      * @default undefined — grows without limit.
      */
-    maxRows?: number;
+    maxRows?: number | undefined;
     /**
      * The control's opening size, and the floor `autoResize` will not shrink below.
-     * Rendered as the native `rows` attribute when `autoResize` is off, applied as
-     * a minimum on the measured height when on.
      * @default 2 — the platform's own `rows` default.
      */
     minRows?: number;
@@ -41,42 +37,50 @@ type __VLS_Props = {
      * @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;
+    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;
+    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;
+    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, {
     /** Moves keyboard focus onto the underlying native textarea. */
     focus: () => void | undefined;
-    /**
-     * Runs constraint validation on the underlying textarea, firing `invalid`
-     * when it fails. `true` before it mounts — a control that is not in the
-     * document submits nothing, so there is nothing for it to be invalid about.
-     * Published here because a Vue consumer has no other route to it: `el` is
-     * the escape hatch, not the API, and the contract declares the method.
-     */
+    /** 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 — a
-     * server response, a cross-field rule — exactly like
-     * `HTMLTextAreaElement.setCustomValidity()`: a non-empty message makes the
-     * control invalid (`customError`) and is what `reportValidity()` shows,
-     * `''` clears it.
-     */
+    /** 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>;
@@ -84,18 +88,16 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     "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;
 }>, {
-    form: string;
-    value: string;
+    disabled: boolean;
+    name: string | undefined;
+    defaultValue: string;
     readOnly: boolean;
+    required: boolean;
     invalid: boolean;
-    defaultValue: string;
-    maxLength: number;
-    minLength: number;
     autoResize: boolean;
-    maxRows: number;
     minRows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,14 +1,12 @@
 /**
- * The Vue implementation of the shared Textarea contract. Renders a native `<textarea>`. With `autoResize`, grows its height to fit content instead of scrolling, optionally capped to `maxRows` computed lines.
- *
- * Supports `v-model:value` (the prop name matches every other framework's `value`/`valueChange` pair), or uncontrolled usage via `defaultValue`. Single-rooted, so `aria-label` falls through onto the `<textarea>`.
+ * 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`.
      * @default undefined — uncontrolled, seeded from `defaultValue`.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial text, used only when the textarea is uncontrolled.
      * @default '' — an empty textarea.
@@ -23,11 +21,9 @@ type __VLS_Props = {
      * Caps auto-resize growth to this many rows, based on computed line-height.
      * @default undefined — grows without limit.
      */
-    maxRows?: number;
+    maxRows?: number | undefined;
     /**
      * The control's opening size, and the floor `autoResize` will not shrink below.
-     * Rendered as the native `rows` attribute when `autoResize` is off, applied as
-     * a minimum on the measured height when on.
      * @default 2 — the platform's own `rows` default.
      */
     minRows?: number;
@@ -41,42 +37,50 @@ type __VLS_Props = {
      * @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;
+    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;
+    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;
+    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, {
     /** Moves keyboard focus onto the underlying native textarea. */
     focus: () => void | undefined;
-    /**
-     * Runs constraint validation on the underlying textarea, firing `invalid`
-     * when it fails. `true` before it mounts — a control that is not in the
-     * document submits nothing, so there is nothing for it to be invalid about.
-     * Published here because a Vue consumer has no other route to it: `el` is
-     * the escape hatch, not the API, and the contract declares the method.
-     */
+    /** 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 — a
-     * server response, a cross-field rule — exactly like
-     * `HTMLTextAreaElement.setCustomValidity()`: a non-empty message makes the
-     * control invalid (`customError`) and is what `reportValidity()` shows,
-     * `''` clears it.
-     */
+    /** 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>;
@@ -84,18 +88,16 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     "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;
 }>, {
-    form: string;
-    value: string;
+    disabled: boolean;
+    name: string | undefined;
+    defaultValue: string;
     readOnly: boolean;
+    required: boolean;
     invalid: boolean;
-    defaultValue: string;
-    maxLength: number;
-    minLength: number;
     autoResize: boolean;
-    maxRows: number;
     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 V=require("../utils/reassertValue.cjs");let l=require("vue");var p=["value","rows","form","maxlength","minlength","readonly","aria-invalid","aria-readonly","data-invalid","data-readonly"],k=(0,l.defineComponent)({__name:"Textarea",props:{value:{default:void 0},defaultValue:{default:""},autoResize:{type:Boolean,default:!1},maxRows:{default:void 0},minRows:{default:2},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},form:{default:void 0},maxLength:{default:void 0},minLength:{default:void 0}},emits:["update:value","value-change"],setup(e,{expose:g,emit:R}){const o=e,c=R,i=(0,l.ref)(null),f=(0,l.ref)(o.defaultValue),u=(0,l.computed)(()=>o.value!==void 0?o.value:f.value);function r(){const t=i.value;if(!t||!o.autoResize)return;const a=getComputedStyle(t),n=v=>parseFloat(v)||0,m=n(a.borderTopWidth)+n(a.borderBottomWidth),h=n(a.paddingTop)+n(a.paddingBottom),x=a.boxSizing==="border-box",s=n(a.lineHeight),y=v=>v*s+(x?h+m:0);t.style.height="auto";let d=t.scrollHeight+(x?m:-h);o.minRows!=null&&s>0&&(d=Math.max(d,y(o.minRows))),o.maxRows!=null&&s>0&&(d=Math.min(d,y(o.maxRows))),t.style.height=`${d}px`}function w(t){const a=t.target,n=a.value;o.value===void 0&&(f.value=n),c("update:value",n),c("value-change",n),r(),V.reassertValue(a,()=>u.value)}return(0,l.watch)(u,()=>{(0,l.nextTick)(r)}),(0,l.onMounted)(r),g({focus:()=>i.value?.focus(),checkValidity:()=>i.value?.checkValidity()??!0,reportValidity:()=>i.value?.reportValidity()??!0,setCustomValidity:t=>i.value?.setCustomValidity(t),el:i}),(t,a)=>((0,l.openBlock)(),(0,l.createElementBlock)("textarea",{class:"skdx-textarea","data-part":"root","data-skdx-component":"textarea",ref_key:"textareaRef",ref:i,value:u.value,rows:e.autoResize?void 0:e.minRows,form:e.form,maxlength:e.maxLength,minlength:e.minLength,readonly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,style:(0,l.normalizeStyle)(e.autoResize?{overflow:"hidden",resize:"none"}:void 0),onInput:w},null,44,p))}});exports.default=k;
+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 i,onMounted as d,openBlock as n,ref as u,watch as r}from"vue";var s=["value","rows","form","maxlength","minlength","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},minRows:{default:2},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},form:{default:void 0},maxLength:{default:void 0},minLength:{default:void 0}},emits:["update:value","value-change"],setup(l,{expose:v,emit:m}){const f=l,p=m,y=u(null),h=u(f.defaultValue),c=a(()=>void 0!==f.value?f.value:h.value);function x(){const e=y.value;if(!e||!f.autoResize)return;const a=getComputedStyle(e),t=e=>parseFloat(e)||0,l=t(a.borderTopWidth)+t(a.borderBottomWidth),o=t(a.paddingTop)+t(a.paddingBottom),i="border-box"===a.boxSizing,d=t(a.lineHeight),n=e=>e*d+(i?o+l:0);e.style.height="auto";let u=e.scrollHeight+(i?l:-o);null!=f.minRows&&d>0&&(u=Math.max(u,n(f.minRows))),null!=f.maxRows&&d>0&&(u=Math.min(u,n(f.maxRows))),e.style.height=`${u}px`}function g(a){const t=a.target,l=t.value;void 0===f.value&&(h.value=l),p("update:value",l),p("value-change",l),x(),e(t,()=>c.value)}return r(c,()=>{o(x)}),d(x),v({focus:()=>y.value?.focus(),checkValidity:()=>y.value?.checkValidity()??!0,reportValidity:()=>y.value?.reportValidity()??!0,setCustomValidity:e=>y.value?.setCustomValidity(e),el:y}),(e,a)=>(n(),t("textarea",{class:"skdx-textarea","data-part":"root","data-skdx-component":"textarea",ref_key:"textareaRef",ref:y,value:c.value,rows:l.autoResize?void 0:l.minRows,form:l.form,maxlength:l.maxLength,minlength:l.minLength,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:i(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.d.cts

@@ -1,9 +1,6 @@
-import { type DateInput } from '../utils/dateValue.cjs';
+import { type DateInput } from '../utils/date-value.cjs';
 /**
- * Vue Time contract: `<time>` with machine-readable `datetime` and readable
- * text. With `relative`, text is "N hours ago", absolute moves to `title`.
- * No internal timer; drive `now` via one interval. Invalid shape renders
- * nothing (warns once in dev).
+ * Renders `<time>` with machine-readable `datetime` and readable text, switching to a relative label when `relative` is set.
  *
  * @example
  * ```vue
@@ -13,22 +10,16 @@ import { type DateInput } from '../utils/dateValue.cjs';
  */
 type __VLS_Props = {
     /**
-     * The instant to render. Takes a `Date` or an ISO-8601 string. A
-     * date-only string is read as a calendar date in local time, field by
-     * field — never through `new Date(string)`. A string in no recognised
-     * shape is ignored and warns once in development.
+     * 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;
     /**
-     * Render the text as a relative label ("3 hours ago"), measured from
-     * `now`. The `datetime` attribute is unaffected — it is always the
-     * absolute instant.
+     * 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 put the absolute formatted date in
-     * `title`. On by default because a relative label is lossy.
+     * While `relative` is set, also puts the absolute formatted date in `title`.
      * @default true
      */
     absoluteTitle?: boolean;
@@ -38,9 +29,7 @@ type __VLS_Props = {
      */
     locale?: string;
     /**
-     * The instant a relative label is measured from. Supply it and you own
-     * the clock: one interval on your side re-renders every `SkdxTime` on
-     * the page.
+     * 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;

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

@@ -1,9 +1,6 @@
-import { type DateInput } from '../utils/dateValue.js';
+import { type DateInput } from '../utils/date-value.js';
 /**
- * Vue Time contract: `<time>` with machine-readable `datetime` and readable
- * text. With `relative`, text is "N hours ago", absolute moves to `title`.
- * No internal timer; drive `now` via one interval. Invalid shape renders
- * nothing (warns once in dev).
+ * Renders `<time>` with machine-readable `datetime` and readable text, switching to a relative label when `relative` is set.
  *
  * @example
  * ```vue
@@ -13,22 +10,16 @@ import { type DateInput } from '../utils/dateValue.js';
  */
 type __VLS_Props = {
     /**
-     * The instant to render. Takes a `Date` or an ISO-8601 string. A
-     * date-only string is read as a calendar date in local time, field by
-     * field — never through `new Date(string)`. A string in no recognised
-     * shape is ignored and warns once in development.
+     * 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;
     /**
-     * Render the text as a relative label ("3 hours ago"), measured from
-     * `now`. The `datetime` attribute is unaffected — it is always the
-     * absolute instant.
+     * 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 put the absolute formatted date in
-     * `title`. On by default because a relative label is lossy.
+     * While `relative` is set, also puts the absolute formatted date in `title`.
      * @default true
      */
     absoluteTitle?: boolean;
@@ -38,9 +29,7 @@ type __VLS_Props = {
      */
     locale?: string;
     /**
-     * The instant a relative label is measured from. Supply it and you own
-     * the clock: one interval on your side re-renders every `SkdxTime` on
-     * the page.
+     * 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;

package/dist/time/Time.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const s=require("../utils/dateValue.cjs"),o=require("./format.cjs");let e=require("vue");var c=["datetime","title"],d=(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,v)=>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,c)):(0,e.createCommentVNode)("",!0)}});exports.default=d;
+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

@@ -1 +1 @@
-import{toDate as e}from"../utils/dateValue.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};
+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

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

@@ -1 +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){const r=void 0===o?Date.now():o instanceof Date?o.getTime():o,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};
+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};