@skdx/vue 0.27.0 → 0.29.0

package/dist/date-field/DateField.vue.d.cts

@@ -1,115 +1,126 @@
-import { type Granularity, type HourCycle, type SegmentType } from '../utils/dateSegments.cjs';
-/**
- * The Vue implementation of the shared DateField contract (see `@skdx/shared`'s
- * `dateFieldContract`). Segmented keyboard entry of a date — the typed
- * counterpart of `SkdxCalendar`, and the typed-input part of `SkdxDatePicker`.
- * Renders a `role="group"` holding one `role="spinbutton"` per segment,
- * interleaved with the locale's own separators: both the segment order and
- * those separators come from `Intl.DateTimeFormat.formatToParts`, so `en-US`
- * reads `mm/dd/yyyy` and `de-DE` reads `dd.mm.yyyy` with no bundled locale
- * table.
- *
- * Arrow Up/Down step the focused segment (wrapping at its bounds), Arrow
- * Left/Right move between segments (mirrored under `dir="rtl"`), digits type
- * with roll-over — typing `1` then `5` into a month gives `05`, not a rejected
- * keystroke — and Backspace/Delete clear a segment back to its placeholder.
- * `value-change` only ever fires with a complete date or `null`, never a
- * half-typed one.
- *
- * Works controlled (`v-model:value` / `@value-change`) or uncontrolled
- * (`defaultValue`).
- *
- * With a `name`, a visually-hidden input submits the date with the surrounding
- * `<form>`, and `checkValidity()`/`reportValidity()` — exposed on this root —
- * delegate to it. Resetting the form restores the date the field was declared
- * with, emitting `value-change` so a controlled parent follows it.
- */
+import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../utils/date-segments.cjs';
+import { type DateInput } from '../utils/date-value.cjs';
+/** Segmented keyboard entry of a date, rendered as a `role="group"` of per-segment `role="spinbutton"` cells. */
 type __VLS_Props = {
-    /** Current date, for controlled usage. Pair with `v-model:value` or `@value-change`. `null` while any segment is still untyped. */
-    value?: Date | null;
-    /** Initial date, for uncontrolled usage. Omitted: every segment starts on its placeholder. */
-    defaultValue?: Date | null;
     /**
-     * How far down the field is editable. `'day'` is date-only; anything past it
-     * appends hour/minute (and, at `'second'`, seconds) — the `datetime-local`
-     * equivalent.
+     * Current date, for controlled usage via `v-model:value` or `@value-change`.
+     * @default undefined
+     */
+    value?: DateInput | null | undefined;
+    /**
+     * Initial date, used only when the field is uncontrolled.
+     * @default null
+     */
+    defaultValue?: DateInput | null;
+    /**
+     * How far down the field is editable — `'day'` is date-only, deeper values add hour/minute/second.
+     * @default 'day'
      */
     granularity?: Granularity;
     /**
-     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments. Display
-     * only — the submitted value is always 24 hour. Omitted: whatever the locale
-     * resolves to.
+     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments; display only.
+     * @default undefined
      */
-    hourCycle?: HourCycle;
+    hourCycle?: HourCycle | undefined;
     /**
-     * BCP-47 locale deciding segment order, the literals between segments and the
-     * AM/PM names — `en-US` orders month/day/year, `de-DE` orders day.month.year.
-     * Omitted: the runtime's default locale.
+     * BCP-47 locale deciding segment order, the literals between segments and the AM/PM names.
+     * @default undefined
+     */
+    locale?: string | undefined;
+    /**
+     * Earliest accepted date; a value before it marks the field `aria-invalid`/`data-invalid` and fails with `rangeUnderflow`.
+     * @default undefined
+     */
+    minDate?: DateInput | undefined;
+    /**
+     * Latest accepted date; a value after it fails constraint validation with `rangeOverflow`.
+     * @default undefined
+     */
+    maxDate?: DateInput | undefined;
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
      */
-    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. */
+    /**
+     * Segments stay focusable and readable but refuse every edit.
+     * @default false
+     */
     readOnly?: boolean;
-    /** Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. */
+    /**
+     * Predicate marking dates as unavailable; an unavailable date marks the field `aria-invalid`/`data-invalid`.
+     * @default undefined
+     */
+    isDateUnavailable?: ((date: Date) => boolean) | undefined;
+    /**
+     * Whether a one-digit month, day or hour renders zero-padded — `05/09/2026`
+     * rather than `5/9/2026`.
+     * @default true
+     */
+    shouldForceLeadingZeros?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`; additive with an out-of-range or unavailable date.
+     * @default false
+     */
     invalid?: boolean;
-    /** Marks the field required — an incomplete field is `valueMissing`. */
+    /**
+     * Marks the field required — an incomplete field is `valueMissing`.
+     * @default false
+     */
     required?: boolean;
     /**
-     * Form field name. With it the date submits as `YYYY-MM-DD`, or
-     * `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity. Without it the field
-     * submits nothing.
+     * Form field name; with it the date submits as `YYYY-MM-DD` or `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity.
+     * @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 (e.g. inside a portal).
+     * @default undefined
      */
-    dir?: 'ltr' | 'rtl';
+    form?: string | undefined;
     /**
-     * Words the accessible name of one segment. Called per segment type
-     * (`'year'`, `'month'`, `'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 ('year', 'month', 'AM/PM', …).
+     * Writing direction, deciding whether ArrowLeft moves to the previous or next segment.
+     * @default undefined
      */
-    getSegmentLabel?: (type: SegmentType) => string;
+    dir?: 'ltr' | 'rtl' | 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
-     * this is the text that is actually read.
+     * Words the accessible name of one segment, called per segment type (`'year'`, `'month'`, `'dayPeriod'`, …).
+     * @default undefined
+     */
+    getSegmentLabel?: ((type: SegmentType) => string) | undefined;
+    /**
+     * The `aria-valuetext` an untyped segment announces instead of a number it does not have.
      * @default 'Empty'
      */
     emptySegmentText?: string;
+    /**
+     * Words the placeholder letters one segment shows before it has been typed, called per segment type.
+     * @default undefined
+     */
+    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()`; `''` clears it. */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: Date | null) => any;
     "value-change": (value: Date | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: Date | null) => any) | undefined;
-    "onValue-change"?: ((value: Date | null) => any) | undefined;
+    "onUpdate:value"?: (value: Date | null) => any;
+    "onValue-change"?: (value: Date | null) => any;
 }>, {
     disabled: boolean;
+    defaultValue: DateInput | null;
+    readOnly: boolean;
     required: boolean;
-    name: string;
-    value: Date | null;
     invalid: boolean;
-    defaultValue: Date | null;
-    dir: "ltr" | "rtl";
-    readOnly: boolean;
-    locale: string;
-    hourCycle: HourCycle;
+    isDateUnavailable: ((date: Date) => boolean) | undefined;
     granularity: Granularity;
-    getSegmentLabel: (type: SegmentType) => string;
+    shouldForceLeadingZeros: boolean;
     emptySegmentText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/date-field/DateField.vue.d.ts

@@ -1,115 +1,126 @@
-import { type Granularity, type HourCycle, type SegmentType } from '../utils/dateSegments.js';
-/**
- * The Vue implementation of the shared DateField contract (see `@skdx/shared`'s
- * `dateFieldContract`). Segmented keyboard entry of a date — the typed
- * counterpart of `SkdxCalendar`, and the typed-input part of `SkdxDatePicker`.
- * Renders a `role="group"` holding one `role="spinbutton"` per segment,
- * interleaved with the locale's own separators: both the segment order and
- * those separators come from `Intl.DateTimeFormat.formatToParts`, so `en-US`
- * reads `mm/dd/yyyy` and `de-DE` reads `dd.mm.yyyy` with no bundled locale
- * table.
- *
- * Arrow Up/Down step the focused segment (wrapping at its bounds), Arrow
- * Left/Right move between segments (mirrored under `dir="rtl"`), digits type
- * with roll-over — typing `1` then `5` into a month gives `05`, not a rejected
- * keystroke — and Backspace/Delete clear a segment back to its placeholder.
- * `value-change` only ever fires with a complete date or `null`, never a
- * half-typed one.
- *
- * Works controlled (`v-model:value` / `@value-change`) or uncontrolled
- * (`defaultValue`).
- *
- * With a `name`, a visually-hidden input submits the date with the surrounding
- * `<form>`, and `checkValidity()`/`reportValidity()` — exposed on this root —
- * delegate to it. Resetting the form restores the date the field was declared
- * with, emitting `value-change` so a controlled parent follows it.
- */
+import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../utils/date-segments.js';
+import { type DateInput } from '../utils/date-value.js';
+/** Segmented keyboard entry of a date, rendered as a `role="group"` of per-segment `role="spinbutton"` cells. */
 type __VLS_Props = {
-    /** Current date, for controlled usage. Pair with `v-model:value` or `@value-change`. `null` while any segment is still untyped. */
-    value?: Date | null;
-    /** Initial date, for uncontrolled usage. Omitted: every segment starts on its placeholder. */
-    defaultValue?: Date | null;
     /**
-     * How far down the field is editable. `'day'` is date-only; anything past it
-     * appends hour/minute (and, at `'second'`, seconds) — the `datetime-local`
-     * equivalent.
+     * Current date, for controlled usage via `v-model:value` or `@value-change`.
+     * @default undefined
+     */
+    value?: DateInput | null | undefined;
+    /**
+     * Initial date, used only when the field is uncontrolled.
+     * @default null
+     */
+    defaultValue?: DateInput | null;
+    /**
+     * How far down the field is editable — `'day'` is date-only, deeper values add hour/minute/second.
+     * @default 'day'
      */
     granularity?: Granularity;
     /**
-     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments. Display
-     * only — the submitted value is always 24 hour. Omitted: whatever the locale
-     * resolves to.
+     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments; display only.
+     * @default undefined
      */
-    hourCycle?: HourCycle;
+    hourCycle?: HourCycle | undefined;
     /**
-     * BCP-47 locale deciding segment order, the literals between segments and the
-     * AM/PM names — `en-US` orders month/day/year, `de-DE` orders day.month.year.
-     * Omitted: the runtime's default locale.
+     * BCP-47 locale deciding segment order, the literals between segments and the AM/PM names.
+     * @default undefined
+     */
+    locale?: string | undefined;
+    /**
+     * Earliest accepted date; a value before it marks the field `aria-invalid`/`data-invalid` and fails with `rangeUnderflow`.
+     * @default undefined
+     */
+    minDate?: DateInput | undefined;
+    /**
+     * Latest accepted date; a value after it fails constraint validation with `rangeOverflow`.
+     * @default undefined
+     */
+    maxDate?: DateInput | undefined;
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
      */
-    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. */
+    /**
+     * Segments stay focusable and readable but refuse every edit.
+     * @default false
+     */
     readOnly?: boolean;
-    /** Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. */
+    /**
+     * Predicate marking dates as unavailable; an unavailable date marks the field `aria-invalid`/`data-invalid`.
+     * @default undefined
+     */
+    isDateUnavailable?: ((date: Date) => boolean) | undefined;
+    /**
+     * Whether a one-digit month, day or hour renders zero-padded — `05/09/2026`
+     * rather than `5/9/2026`.
+     * @default true
+     */
+    shouldForceLeadingZeros?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`; additive with an out-of-range or unavailable date.
+     * @default false
+     */
     invalid?: boolean;
-    /** Marks the field required — an incomplete field is `valueMissing`. */
+    /**
+     * Marks the field required — an incomplete field is `valueMissing`.
+     * @default false
+     */
     required?: boolean;
     /**
-     * Form field name. With it the date submits as `YYYY-MM-DD`, or
-     * `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity. Without it the field
-     * submits nothing.
+     * Form field name; with it the date submits as `YYYY-MM-DD` or `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity.
+     * @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 (e.g. inside a portal).
+     * @default undefined
      */
-    dir?: 'ltr' | 'rtl';
+    form?: string | undefined;
     /**
-     * Words the accessible name of one segment. Called per segment type
-     * (`'year'`, `'month'`, `'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 ('year', 'month', 'AM/PM', …).
+     * Writing direction, deciding whether ArrowLeft moves to the previous or next segment.
+     * @default undefined
      */
-    getSegmentLabel?: (type: SegmentType) => string;
+    dir?: 'ltr' | 'rtl' | 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
-     * this is the text that is actually read.
+     * Words the accessible name of one segment, called per segment type (`'year'`, `'month'`, `'dayPeriod'`, …).
+     * @default undefined
+     */
+    getSegmentLabel?: ((type: SegmentType) => string) | undefined;
+    /**
+     * The `aria-valuetext` an untyped segment announces instead of a number it does not have.
      * @default 'Empty'
      */
     emptySegmentText?: string;
+    /**
+     * Words the placeholder letters one segment shows before it has been typed, called per segment type.
+     * @default undefined
+     */
+    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()`; `''` clears it. */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: Date | null) => any;
     "value-change": (value: Date | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: Date | null) => any) | undefined;
-    "onValue-change"?: ((value: Date | null) => any) | undefined;
+    "onUpdate:value"?: (value: Date | null) => any;
+    "onValue-change"?: (value: Date | null) => any;
 }>, {
     disabled: boolean;
+    defaultValue: DateInput | null;
+    readOnly: boolean;
     required: boolean;
-    name: string;
-    value: Date | null;
     invalid: boolean;
-    defaultValue: Date | null;
-    dir: "ltr" | "rtl";
-    readOnly: boolean;
-    locale: string;
-    hourCycle: HourCycle;
+    isDateUnavailable: ((date: Date) => boolean) | undefined;
     granularity: Granularity;
-    getSegmentLabel: (type: SegmentType) => string;
+    shouldForceLeadingZeros: boolean;
     emptySegmentText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/date-field/DateField.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const q=require("../utils/useFormReset.cjs"),d=require("../utils/dateSegments.cjs"),T=require("../utils/SegmentedField.vue.cjs");let t=require("vue");var b=(0,t.defineComponent)({__name:"DateField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"day"},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:d.EMPTY_VALUE_TEXT}},emits:["update:value","value-change"],setup(a,{expose:g,emit:p}){const e=a,v=p,r=(0,t.computed)(()=>d.resolveHourCycle(e.locale,e.hourCycle)),f=(0,t.ref)(e.defaultValue??null),n=(0,t.computed)(()=>e.value!==void 0?e.value:f.value),i=(0,t.ref)(n.value?d.dateToValues(n.value,r.value):{}),m=(0,t.computed)(()=>n.value?n.value.getTime():null);function y(u,l){return d.isComplete(d.buildSegments({kind:"date",granularity:e.granularity,locale:e.locale,hourCycle:l,values:u}))?d.valuesToDate(u,l):null}(0,t.watch)([m,r],([u,l])=>{const s=y(i.value,l);if(u===null){s!==null&&(i.value={});return}s!==null&&s.getTime()===u||(i.value=d.dateToValues(new Date(u),l))});const V=(0,t.computed)(()=>n.value?d.dateToFormValue(n.value,e.granularity):null);function h(u){i.value=u;const l=y(u,r.value);(l?l.getTime():null)!==m.value&&(e.value===void 0&&(f.value=l),v("update:value",l),v("value-change",l))}const c=(0,t.ref)(null),o=e.value??e.defaultValue??null;return q.useFormReset(()=>c.value?.inputEl,()=>{i.value=o?d.dateToValues(o,r.value):{},e.value===void 0&&(f.value=o),v("update:value",o),v("value-change",o)}),g({checkValidity:()=>c.value?.inputEl?.checkValidity()??!0,reportValidity:()=>c.value?.inputEl?.reportValidity()??!0}),(u,l)=>((0,t.openBlock)(),(0,t.createBlock)(T.default,{family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",ref_key:"fieldRef",ref:c,kind:"date",granularity:a.granularity,locale:a.locale,"hour-cycle":r.value,values:i.value,"form-value":V.value,disabled:a.disabled,"read-only":a.readOnly,invalid:a.invalid,required:a.required,name:a.name,dir:a.dir,"get-segment-label":a.getSegmentLabel,"empty-segment-text":a.emptySegmentText,onValuesChange:h},null,8,["granularity","locale","hour-cycle","values","form-value","disabled","read-only","invalid","required","name","dir","get-segment-label","empty-segment-text"]))}});exports.default=b;
+const C=require("../utils/useFormReset.cjs"),o=require("../utils/date-segments.cjs"),m=require("../utils/date-value.cjs"),R=require("../utils/SegmentedField.vue.cjs");let e=require("vue");var L=(0,e.defineComponent)({__name:"DateField",props:{value:{},defaultValue:{default:null},granularity:{default:"day"},hourCycle:{},locale:{},minDate:{},maxDate:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},isDateUnavailable:{type:Function,default:void 0},shouldForceLeadingZeros:{type:Boolean,default:!0},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},form:{},dir:{},getSegmentLabel:{},emptySegmentText:{default:o.EMPTY_VALUE_TEXT},getSegmentPlaceholder:{}},emits:["update:value","value-change"],setup(t,{expose:h,emit:T}){const l=t,c=T,r=(0,e.computed)(()=>o.resolveHourCycle(l.locale,l.hourCycle)),i=(0,e.computed)(()=>l.value===void 0?void 0:m.toDate(l.value,"value")),s=(0,e.computed)(()=>m.toDate(l.defaultValue,"defaultValue")),f=(0,e.computed)(()=>m.toDate(l.minDate,"minDate")??void 0),g=(0,e.computed)(()=>m.toDate(l.maxDate,"maxDate")??void 0),y=(0,e.ref)(s.value),n=(0,e.computed)(()=>i.value!==void 0?i.value:y.value),d=(0,e.ref)(n.value?o.dateToValues(n.value,r.value):{}),V=(0,e.computed)(()=>n.value?n.value.getTime():null);function D(a,u){return o.isComplete(o.buildSegments({kind:"date",granularity:l.granularity,locale:l.locale,hourCycle:u,values:a}))?o.valuesToDate(a,u):null}(0,e.watch)([V,r],([a,u])=>{const p=D(d.value,u);if(a===null){p!==null&&(d.value={});return}p!==null&&p.getTime()===a||(d.value=o.dateToValues(new Date(a),u))});const q=(0,e.computed)(()=>n.value?o.dateToFormValue(n.value,l.granularity):null),b=(0,e.computed)(()=>l.granularity==="day"?"date":"datetime-local"),x=(0,e.computed)(()=>f.value?o.dateToFormValue(f.value,l.granularity):void 0),F=(0,e.computed)(()=>g.value?o.dateToFormValue(g.value,l.granularity):void 0),k=(0,e.computed)(()=>n.value!==null&&(l.isDateUnavailable?.(n.value)??!1)),S=(0,e.computed)(()=>o.dateRangeViolation(n.value,l.granularity,f.value,g.value)!==null);function B(a){d.value=a;const u=D(a,r.value);(u?u.getTime():null)!==V.value&&(i.value===void 0&&(y.value=u),c("update:value",u),c("value-change",u))}const v=(0,e.ref)(null),E=i.value??s.value;return C.useFormReset(()=>v.value?.inputEl,()=>{const a=s.value??E;d.value=a?o.dateToValues(a,r.value):{},i.value===void 0&&(y.value=a),c("update:value",a),c("value-change",a)}),h({checkValidity:()=>v.value?.inputEl?.checkValidity()??!0,reportValidity:()=>v.value?.inputEl?.reportValidity()??!0,setCustomValidity:a=>v.value?.inputEl?.setCustomValidity(a)}),(a,u)=>((0,e.openBlock)(),(0,e.createBlock)(R.default,{ref_key:"fieldRef",ref:v,family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",kind:"date",granularity:l.granularity,locale:t.locale,"hour-cycle":r.value,values:d.value,"form-value":q.value,"form-type":b.value,"form-min":x.value,"form-max":F.value,"should-force-leading-zeros":t.shouldForceLeadingZeros,disabled:t.disabled,"read-only":t.readOnly,invalid:t.invalid||S.value||k.value,required:t.required,name:t.name,form:t.form,dir:t.dir,"get-segment-label":t.getSegmentLabel,"empty-segment-text":t.emptySegmentText,"get-segment-placeholder":t.getSegmentPlaceholder,onValuesChange:B},null,8,["granularity","locale","hour-cycle","values","form-value","form-type","form-min","form-max","should-force-leading-zeros","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});exports.default=L;

package/dist/date-field/DateField.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useFormReset as e}from"../utils/useFormReset.js";import{EMPTY_VALUE_TEXT as l,buildSegments as a,dateToFormValue as u,dateToValues as t,isComplete as d,resolveHourCycle as n,valuesToDate as i}from"../utils/dateSegments.js";import o from"../utils/SegmentedField.vue.js";import{computed as r,createBlock as v,defineComponent as s,openBlock as m,ref as c,watch as f}from"vue";var y=/* @__PURE__ */s({__name:"DateField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"day"},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:s,emit:y}){const p=l,g=y,h=r(()=>n(p.locale,p.hourCycle)),T=c(p.defaultValue??null),V=r(()=>void 0!==p.value?p.value:T.value),b=c(V.value?t(V.value,h.value):{}),k=r(()=>V.value?V.value.getTime():null);function x(e,l){return d(a({kind:"date",granularity:p.granularity,locale:p.locale,hourCycle:l,values:e}))?i(e,l):null}f([k,h],([e,l])=>{const a=x(b.value,l);null!==e?null!==a&&a.getTime()===e||(b.value=t(new Date(e),l)):null!==a&&(b.value={})});const C=r(()=>V.value?u(V.value,p.granularity):null);function S(e){b.value=e;const l=x(e,h.value);(l?l.getTime():null)!==k.value&&(void 0===p.value&&(T.value=l),g("update:value",l),g("value-change",l))}const B=c(null),E=p.value??p.defaultValue??null;return e(()=>B.value?.inputEl,()=>{b.value=E?t(E,h.value):{},void 0===p.value&&(T.value=E),g("update:value",E),g("value-change",E)}),s({checkValidity:()=>B.value?.inputEl?.checkValidity()??!0,reportValidity:()=>B.value?.inputEl?.reportValidity()??!0}),(e,a)=>(m(),v(o,{family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",ref_key:"fieldRef",ref:B,kind:"date",granularity:l.granularity,locale:l.locale,"hour-cycle":h.value,values:b.value,"form-value":C.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:S},null,8,["granularity","locale","hour-cycle","values","form-value","disabled","read-only","invalid","required","name","dir","get-segment-label","empty-segment-text"]))}});export{y as default};
+import{useFormReset as e}from"../utils/useFormReset.js";import{EMPTY_VALUE_TEXT as a,buildSegments as l,dateRangeViolation as t,dateToFormValue as u,dateToValues as o,isComplete as i,resolveHourCycle as n,valuesToDate as r}from"../utils/date-segments.js";import{toDate as d}from"../utils/date-value.js";import v from"../utils/SegmentedField.vue.js";import{computed as s,createBlock as m,defineComponent as c,openBlock as g,ref as f,watch as y}from"vue";var p=/* @__PURE__ */c({__name:"DateField",props:{value:{},defaultValue:{default:null},granularity:{default:"day"},hourCycle:{},locale:{},minDate:{},maxDate:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},isDateUnavailable:{type:Function,default:void 0},shouldForceLeadingZeros:{type:Boolean,default:!0},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},form:{},dir:{},getSegmentLabel:{},emptySegmentText:{default:a},getSegmentPlaceholder:{}},emits:["update:value","value-change"],setup(a,{expose:c,emit:p}){const h=a,V=p,x=s(()=>n(h.locale,h.hourCycle)),D=s(()=>void 0===h.value?void 0:d(h.value,"value")),b=s(()=>d(h.defaultValue,"defaultValue")),T=s(()=>d(h.minDate,"minDate")??void 0),k=s(()=>d(h.maxDate,"maxDate")??void 0),C=f(b.value),F=s(()=>void 0!==D.value?D.value:C.value),S=f(F.value?o(F.value,x.value):{}),B=s(()=>F.value?F.value.getTime():null);function E(e,a){return i(l({kind:"date",granularity:h.granularity,locale:h.locale,hourCycle:a,values:e}))?r(e,a):null}y([B,x],([e,a])=>{const l=E(S.value,a);null!==e?null!==l&&l.getTime()===e||(S.value=o(new Date(e),a)):null!==l&&(S.value={})});const L=s(()=>F.value?u(F.value,h.granularity):null),_=s(()=>"day"===h.granularity?"date":"datetime-local"),j=s(()=>T.value?u(T.value,h.granularity):void 0),q=s(()=>k.value?u(k.value,h.granularity):void 0),R=s(()=>null!==F.value&&(h.isDateUnavailable?.(F.value)??!1)),P=s(()=>null!==t(F.value,h.granularity,T.value,k.value));function U(e){S.value=e;const a=E(e,x.value);(a?a.getTime():null)!==B.value&&(void 0===D.value&&(C.value=a),V("update:value",a),V("value-change",a))}const w=f(null),z=D.value??b.value;return e(()=>w.value?.inputEl,()=>{const e=b.value??z;S.value=e?o(e,x.value):{},void 0===D.value&&(C.value=e),V("update:value",e),V("value-change",e)}),c({checkValidity:()=>w.value?.inputEl?.checkValidity()??!0,reportValidity:()=>w.value?.inputEl?.reportValidity()??!0,setCustomValidity:e=>w.value?.inputEl?.setCustomValidity(e)}),(e,l)=>(g(),m(v,{ref_key:"fieldRef",ref:w,family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",kind:"date",granularity:h.granularity,locale:a.locale,"hour-cycle":x.value,values:S.value,"form-value":L.value,"form-type":_.value,"form-min":j.value,"form-max":q.value,"should-force-leading-zeros":a.shouldForceLeadingZeros,disabled:a.disabled,"read-only":a.readOnly,invalid:a.invalid||P.value||R.value,required:a.required,name:a.name,form:a.form,dir:a.dir,"get-segment-label":a.getSegmentLabel,"empty-segment-text":a.emptySegmentText,"get-segment-placeholder":a.getSegmentPlaceholder,onValuesChange:U},null,8,["granularity","locale","hour-cycle","values","form-value","form-type","form-min","form-max","should-force-leading-zeros","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});export{p as default};

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

@@ -1,2 +1,2 @@
 export { default as SkdxDateField } from './DateField.vue.cjs';
-export type { Granularity, HourCycle, SegmentType, SegmentValues } from '../utils/dateSegments.cjs';
+export type { Granularity, HourCycle, SegmentType, SegmentValues } from '../utils/date-segments.cjs';

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

@@ -1,2 +1,2 @@
 export { default as SkdxDateField } from './DateField.vue.js';
-export type { Granularity, HourCycle, SegmentType, SegmentValues } from '../utils/dateSegments.js';
+export type { Granularity, HourCycle, SegmentType, SegmentValues } from '../utils/date-segments.js';

package/dist/date-picker/DatePicker.vue.d.cts

@@ -1,72 +1,74 @@
-import { type CalendarSelectionMode, type CalendarValue } from '../calendar/dateMath.cjs';
-import type { Granularity } from '../utils/dateSegments.cjs';
-/**
- * Root of a date picker: composes Popover's open/positioning machinery with
- * `SkdxCalendar`'s date-grid logic — a date picker is just "a Calendar shown
- * in a Popper popup that closes on selection". Owns the selected `value`
- * and the popup's `open` state, handing both down to every other
- * `SkdxDatePicker*` part via context. Renders no DOM of its own.
- *
- * Emits `open-change` the instant the state flips and `open-change-complete`
- * once the change has finished on screen — after `SkdxDatePickerContent`'s enter
- * or exit animation ends, or in the same task when it declares none.
- *
- * Works controlled (`v-model:value`, `v-model:open`) or uncontrolled
- * (`default-value`, `default-open`).
- *
- * With a `name`, the selection is submitted by the surrounding `<form>` as
- * local-time `YYYY-MM-DD` strings, exactly like `<input type="date">` — one
- * entry in `single` mode, one entry per date in `multiple`, and start then end
- * in `range`. `required` reports `valueMissing` while nothing is selected, and
- * `checkValidity()`/`reportValidity()` — exposed on this root — delegate to
- * those inputs. Resetting the owning `<form>` restores the selection the picker
- * was declared with, emitting `value-change` so a controlled parent follows it.
- */
+import { type CalendarSelectionMode, type CalendarValue, type CalendarValueInput } from '../calendar/dateMath.cjs';
+import type { Granularity } from '../utils/date-segments.cjs';
+/** Calendar in a Popper popup, owning `value` and `open` distributed via context. */
 type __VLS_Props = {
-    /**
-     * Disables `SkdxDatePickerTrigger` and prevents the popup opening.
-     *
-     * Part of the shared DatePicker contract, and it was missing here: without
-     * it a disabled date picker could not be expressed at all in Vue, and
-     * `_trigger.css` — which keys the whole disabled treatment on
-     * `[data-disabled]` — painted it as an enabled control, hover included, in
-     * every theme.
+    /** Disables trigger and prevents popup opening.
+     * @default false
      */
     disabled?: boolean;
-    /**
-     * How many dates the composed calendar selects at once, which decides the
-     * shape of `value` — see `CalendarSelectionMode`. Also decides when the
-     * popup auto-closes: immediately in `single`, once the range is closed in
-     * `range`, never in `multiple`.
+    /** Selection mode (single/multiple/range); determines `value` shape.
+     * @default 'single'
      */
     selectionMode?: CalendarSelectionMode;
-    /** Current selection, for controlled usage. Pair with `v-model:value`. Its shape follows `selectionMode`. */
-    value?: CalendarValue;
-    /** Initial selection, for uncontrolled usage. Its shape follows `selectionMode`. */
-    defaultValue?: CalendarValue;
-    /** Whether the popup is open, for controlled usage. Pair with `v-model:open`. */
-    open?: boolean;
-    /** Initial open state, for uncontrolled usage. */
-    defaultOpen?: boolean;
     /**
-     * How far down `SkdxDatePickerInput` and `SkdxDatePickerTimeField` are
-     * editable. `'day'` is date-only; anything past it is date-time mode, which
-     * also stops the popup auto-closing on a calendar selection — the user
-     * still has a time to set.
+     * Current selection for controlled usage; shape follows mode.
+     * @default undefined
+     */
+    value?: CalendarValueInput | undefined;
+    /**
+     * Initial selection, used only when the picker is uncontrolled.
+     * @default undefined
+     */
+    defaultValue?: CalendarValueInput | undefined;
+    /** Whether popup is open for controlled usage. */
+    open?: boolean | undefined;
+    /** Initial open state for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Granularity down to which entry is editable (day/hour/minute/second).
+     * @default 'day'
      */
     granularity?: Granularity;
+    /** Text shown when no selection exists; ignored with custom `children`.
+     * @default 'Select date'
+     */
+    placeholder?: string;
+    /**
+     * BCP 47 locale tag for trigger formatting (ignored when `children` replaces).
+     * @default undefined
+     */
+    locale?: string | undefined;
+    /** Derive popup with typed-entry field (single mode only).
+     * @default false
+     */
+    showInput?: boolean;
     /**
-     * Form field name. The selection is submitted under it as local-time
-     * `YYYY-MM-DD` strings — one entry in `single` mode, one entry per date in
-     * `multiple`, and start then end in `range`.
+     * Form field name; submits as YYYY-MM-DD strings.
+     * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Marks the picker required: with nothing selected it reports
-     * `valueMissing`. A range still anchored on its start counts as nothing
-     * selected. Only meaningful alongside `name`.
+     * Form id this picker submits into.
+     * @default undefined
+     */
+    form?: string | undefined;
+    /** Marks picker required; valueMissing while unselected.
+     * @default false
      */
     required?: boolean;
+    /** Close popup after selection (not in multiple mode).
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /** Makes picker non-editable; trigger still opens, everything focusable, no selection changes.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Marks picker invalid via data-invalid / aria-invalid.
+     * @default false
+     */
+    invalid?: boolean;
 };
 declare var __VLS_4: {};
 type __VLS_Slots = {} & {
@@ -77,6 +79,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     checkValidity: () => boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: () => boolean;
+    /** Pushes an externally-computed error onto the first hidden input, like `HTMLInputElement.setCustomValidity()`; `''` clears it. */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
@@ -84,21 +88,23 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     "value-change": (value: CalendarValue) => any;
     "open-change-complete": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    "onOpen-change"?: ((open: boolean) => any) | undefined;
-    "onUpdate:value"?: ((value: CalendarValue) => any) | undefined;
-    "onValue-change"?: ((value: CalendarValue) => any) | undefined;
-    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onUpdate:value"?: (value: CalendarValue) => any;
+    "onValue-change"?: (value: CalendarValue) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
 }>, {
     disabled: boolean;
-    open: boolean;
+    placeholder: string;
+    open: boolean | undefined;
     defaultOpen: boolean;
+    readOnly: boolean;
     required: boolean;
-    name: string;
-    value: CalendarValue;
-    defaultValue: CalendarValue;
+    invalid: boolean;
+    closeOnSelect: boolean;
     selectionMode: CalendarSelectionMode;
     granularity: Granularity;
+    showInput: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;