@skdx/vue 0.28.0 → 0.29.0

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

@@ -1,84 +1,43 @@
-import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, 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 24-hour `HH:mm` (or `HH:mm:ss`) string, like `<input type="time">`.
-     * Accepts `Date` (reads local wall-clock time); date part is discarded. `null` while
-     * any segment is untyped.
+     * Current time as a 24-hour `HH:mm[:ss]` string or `Date` (local wall-clock time); `null` while any segment is untyped.
      */
-    value?: string | Date | null;
-    /** Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`. */
+    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. Values before it
-     * fail constraint validation with `rangeUnderflow`. Accepts `Date`.
+     * 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;
+    min?: string | Date | undefined;
     /**
-     * Latest accepted time in 24-hour `HH:mm[:ss]` shape. Values after it
-     * fail constraint validation with `rangeOverflow`. Accepts `Date`.
+     * 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;
+    max?: string | Date | undefined;
     /**
-     * Increment the field steps by and accepts, counted in **seconds**, exactly
-     * like `<input type="time" step>`.
-     *
-     * Arrow Up/Down on the *finest* rendered segment move by one step —
-     * `:step="900"` walks the minutes `00`, `15`, `30`, `45` and wraps back to
-     * `00` — while every coarser segment keeps stepping by one. A time that
-     * misses the grid fails constraint validation with `stepMismatch`, measured
-     * from `min` where there is one and from midnight where there is not.
-     *
-     * A step that is not a whole number of the finest segment's own unit, or
-     * that is not smaller than that segment's 60-value range, leaves the arrow
-     * keys on one unit — there is no grid inside the segment for them to walk —
-     * but still constrains validity.
+     * 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;
+    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. */
@@ -88,35 +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;
     /**
-     * Id of the `<form>` this field submits into, for a field rendered outside
-     * it — inside a Dialog's portal, for instance. Forwarded to the hidden
-     * input's `form` attribute, which is also how the reset listener finds the
-     * form.
+     * 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.
      */
-    form?: string;
+    form?: 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`.
+     * Writing direction, deciding whether ArrowLeft moves to the previous or next segment.
+     * @default undefined
      */
-    dir?: 'ltr' | 'rtl';
+    dir?: 'ltr' | 'rtl' | 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.
+     * 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
@@ -125,50 +74,34 @@ type __VLS_Props = {
      */
     emptySegmentText?: string;
     /**
-     * Words the placeholder letters one segment shows before it has been
-     * typed, called per segment type. The separators around them *are*
-     * locale-derived; these letters are not, so a `de-DE` field renders
-     * `dd.mm.yyyy` until this prop turns it into `TT.MM.JJJJ`.
-     * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
+     * 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;
+    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, exactly like
-     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes the field
-     * invalid (customError) and is what `reportValidity()` shows; `''` clears it.
-     * Dropped without a `name`, matching the reads above.
-     */
+    /** 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;
 }>, {
-    form: string;
     disabled: boolean;
-    dir: "ltr" | "rtl";
-    value: string | Date | null;
+    defaultValue: string | Date | null;
     readOnly: boolean;
     required: boolean;
-    name: string;
+    value: string | Date | null | undefined;
     invalid: boolean;
-    defaultValue: string | Date | null;
-    max: string | Date;
-    min: string | Date;
-    step: number;
-    locale: string;
-    hourCycle: HourCycle;
+    locale: string | undefined;
+    hourCycle: HourCycle | undefined;
     granularity: TimeGranularity;
-    getSegmentLabel: (type: SegmentType) => string;
     emptySegmentText: string;
-    getSegmentPlaceholder: SegmentPlaceholderResolver;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,84 +1,43 @@
-import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../utils/dateSegments.js';
-/** 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.js';
 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 24-hour `HH:mm` (or `HH:mm:ss`) string, like `<input type="time">`.
-     * Accepts `Date` (reads local wall-clock time); date part is discarded. `null` while
-     * any segment is untyped.
+     * Current time as a 24-hour `HH:mm[:ss]` string or `Date` (local wall-clock time); `null` while any segment is untyped.
      */
-    value?: string | Date | null;
-    /** Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`. */
+    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. Values before it
-     * fail constraint validation with `rangeUnderflow`. Accepts `Date`.
+     * 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;
+    min?: string | Date | undefined;
     /**
-     * Latest accepted time in 24-hour `HH:mm[:ss]` shape. Values after it
-     * fail constraint validation with `rangeOverflow`. Accepts `Date`.
+     * 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;
+    max?: string | Date | undefined;
     /**
-     * Increment the field steps by and accepts, counted in **seconds**, exactly
-     * like `<input type="time" step>`.
-     *
-     * Arrow Up/Down on the *finest* rendered segment move by one step —
-     * `:step="900"` walks the minutes `00`, `15`, `30`, `45` and wraps back to
-     * `00` — while every coarser segment keeps stepping by one. A time that
-     * misses the grid fails constraint validation with `stepMismatch`, measured
-     * from `min` where there is one and from midnight where there is not.
-     *
-     * A step that is not a whole number of the finest segment's own unit, or
-     * that is not smaller than that segment's 60-value range, leaves the arrow
-     * keys on one unit — there is no grid inside the segment for them to walk —
-     * but still constrains validity.
+     * 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;
+    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. */
@@ -88,35 +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;
     /**
-     * Id of the `<form>` this field submits into, for a field rendered outside
-     * it — inside a Dialog's portal, for instance. Forwarded to the hidden
-     * input's `form` attribute, which is also how the reset listener finds the
-     * form.
+     * 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.
      */
-    form?: string;
+    form?: 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`.
+     * Writing direction, deciding whether ArrowLeft moves to the previous or next segment.
+     * @default undefined
      */
-    dir?: 'ltr' | 'rtl';
+    dir?: 'ltr' | 'rtl' | 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.
+     * 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
@@ -125,50 +74,34 @@ type __VLS_Props = {
      */
     emptySegmentText?: string;
     /**
-     * Words the placeholder letters one segment shows before it has been
-     * typed, called per segment type. The separators around them *are*
-     * locale-derived; these letters are not, so a `de-DE` field renders
-     * `dd.mm.yyyy` until this prop turns it into `TT.MM.JJJJ`.
-     * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
+     * 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;
+    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, exactly like
-     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes the field
-     * invalid (customError) and is what `reportValidity()` shows; `''` clears it.
-     * Dropped without a `name`, matching the reads above.
-     */
+    /** 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;
 }>, {
-    form: string;
     disabled: boolean;
-    dir: "ltr" | "rtl";
-    value: string | Date | null;
+    defaultValue: string | Date | null;
     readOnly: boolean;
     required: boolean;
-    name: string;
+    value: string | Date | null | undefined;
     invalid: boolean;
-    defaultValue: string | Date | null;
-    max: string | Date;
-    min: string | Date;
-    step: number;
-    locale: string;
-    hourCycle: HourCycle;
+    locale: string | undefined;
+    hourCycle: HourCycle | undefined;
     granularity: TimeGranularity;
-    getSegmentLabel: (type: SegmentType) => string;
     emptySegmentText: string;
-    getSegmentPlaceholder: SegmentPlaceholderResolver;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1 +1 @@
-const C=require("../utils/useFormReset.cjs"),u=require("../utils/dateSegments.cjs"),s=require("../utils/dateValue.cjs"),E=require("../utils/SegmentedField.vue.cjs");let e=require("vue");var F=(0,e.defineComponent)({__name:"TimeField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"minute"},hourCycle:{default:void 0},locale:{default:void 0},min:{default:void 0},max:{default:void 0},step:{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},form:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:u.EMPTY_VALUE_TEXT},getSegmentPlaceholder:{type:Function,default:void 0}},emits:["update:value","value-change"],setup(a,{expose:T,emit:h}){const l=a,c=h,n=(0,e.computed)(()=>u.resolveHourCycle(l.locale,l.hourCycle)),S=(0,e.computed)(()=>l.step??(l.granularity==="second"?1:60)),r=(0,e.computed)(()=>l.value===void 0?void 0:s.toTimeValue(l.value,"value")),p=(0,e.computed)(()=>s.toTimeValue(l.defaultValue,"defaultValue")),f=(0,e.computed)(()=>s.toTimeValue(l.min,"min")??void 0),g=(0,e.computed)(()=>s.toTimeValue(l.max,"max")??void 0),y=(0,e.ref)(p.value),o=(0,e.computed)(()=>r.value!==void 0?r.value:y.value),d=(0,e.ref)(o.value?u.timeStringToValues(o.value,n.value):{});(0,e.watch)([o,n,()=>l.granularity],([t,i,k])=>{const V=u.valuesToTimeString(d.value,k,i);if(t===null){V!==null&&(d.value={});return}V!==t&&(d.value=u.timeStringToValues(t,i))});function q(t){d.value=t;const i=u.isComplete(u.buildSegments({kind:"time",granularity:l.granularity,locale:l.locale,hourCycle:n.value,values:t}))?u.valuesToTimeString(t,l.granularity,n.value):null;i!==o.value&&(r.value===void 0&&(y.value=i),c("update:value",i),c("value-change",i))}const x=(0,e.computed)(()=>u.timeRangeViolation(o.value,f.value,g.value)!==null);function b(t){return u.clampValuesToTimeRange(t,l.granularity,n.value,f.value,g.value)}const m=(0,e.ref)(null),v=r.value??p.value;return C.useFormReset(()=>m.value?.inputEl,()=>{d.value=v?u.timeStringToValues(v,n.value):{},r.value===void 0&&(y.value=v),c("update:value",v),c("value-change",v)}),T({checkValidity:()=>m.value?.inputEl?.checkValidity()??!0,reportValidity:()=>m.value?.inputEl?.reportValidity()??!0,setCustomValidity:t=>m.value?.inputEl?.setCustomValidity(t)}),(t,i)=>((0,e.openBlock)(),(0,e.createBlock)(E.default,{family:"time-field",class:"skdx-time-field","data-part":"root","data-skdx-component":"time-field",ref_key:"fieldRef",ref:m,kind:"time",granularity:a.granularity,locale:a.locale,"hour-cycle":n.value,values:d.value,"form-value":o.value,"form-type":"time","form-min":f.value,"form-max":g.value,step:S.value,"clamp-edge-values":b,disabled:a.disabled,"read-only":a.readOnly,invalid:a.invalid||x.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:q},null,8,["granularity","locale","hour-cycle","values","form-value","form-min","form-max","step","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});exports.default=F;
+const C=require("../utils/useFormReset.cjs"),u=require("../utils/date-segments.cjs"),s=require("../utils/date-value.cjs"),E=require("../utils/SegmentedField.vue.cjs");let l=require("vue");var R=(0,l.defineComponent)({__name:"TimeField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"minute"},hourCycle:{default:void 0},locale:{default:void 0},min:{},max:{},step:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},form:{},dir:{},getSegmentLabel:{},emptySegmentText:{default:u.EMPTY_VALUE_TEXT},getSegmentPlaceholder:{}},emits:["update:value","value-change"],setup(a,{expose:T,emit:h}){const e=a,c=h,n=(0,l.computed)(()=>u.resolveHourCycle(e.locale,e.hourCycle)),S=(0,l.computed)(()=>e.step??(e.granularity==="second"?1:60)),d=(0,l.computed)(()=>e.value===void 0?void 0:s.toTimeValue(e.value,"value")),p=(0,l.computed)(()=>s.toTimeValue(e.defaultValue,"defaultValue")),f=(0,l.computed)(()=>s.toTimeValue(e.min,"min")??void 0),g=(0,l.computed)(()=>s.toTimeValue(e.max,"max")??void 0),y=(0,l.ref)(p.value),r=(0,l.computed)(()=>d.value!==void 0?d.value:y.value),o=(0,l.ref)(r.value?u.timeStringToValues(r.value,n.value):{});(0,l.watch)([r,n,()=>e.granularity],([t,i,k])=>{const V=u.valuesToTimeString(o.value,k,i);if(t===null){V!==null&&(o.value={});return}V!==t&&(o.value=u.timeStringToValues(t,i))});function q(t){o.value=t;const i=u.isComplete(u.buildSegments({kind:"time",granularity:e.granularity,locale:e.locale,hourCycle:n.value,values:t}))?u.valuesToTimeString(t,e.granularity,n.value):null;i!==r.value&&(d.value===void 0&&(y.value=i),c("update:value",i),c("value-change",i))}const x=(0,l.computed)(()=>u.timeRangeViolation(r.value,f.value,g.value)!==null);function b(t){return u.clampValuesToTimeRange(t,e.granularity,n.value,f.value,g.value)}const m=(0,l.ref)(null),v=d.value??p.value;return C.useFormReset(()=>m.value?.inputEl,()=>{o.value=v?u.timeStringToValues(v,n.value):{},d.value===void 0&&(y.value=v),c("update:value",v),c("value-change",v)}),T({checkValidity:()=>m.value?.inputEl?.checkValidity()??!0,reportValidity:()=>m.value?.inputEl?.reportValidity()??!0,setCustomValidity:t=>m.value?.inputEl?.setCustomValidity(t)}),(t,i)=>((0,l.openBlock)(),(0,l.createBlock)(E.default,{ref_key:"fieldRef",ref:m,family:"time-field",class:"skdx-time-field","data-part":"root","data-skdx-component":"time-field",kind:"time",granularity:e.granularity,locale:a.locale,"hour-cycle":n.value,values:o.value,"form-value":r.value,"form-type":"time","form-min":f.value,"form-max":g.value,step:S.value,"clamp-edge-values":b,disabled:a.disabled,"read-only":a.readOnly,invalid:a.invalid||x.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:q},null,8,["granularity","locale","hour-cycle","values","form-value","form-min","form-max","step","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});exports.default=R;

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

@@ -1 +1 @@
-import{useFormReset as e}from"../utils/useFormReset.js";import{EMPTY_VALUE_TEXT as a,buildSegments as l,clampValuesToTimeRange as t,isComplete as u,resolveHourCycle as i,timeRangeViolation as o,timeStringToValues as d,valuesToTimeString as n}from"../utils/dateSegments.js";import{toTimeValue as r}from"../utils/dateValue.js";import v from"../utils/SegmentedField.vue.js";import{computed as m,createBlock as s,defineComponent as f,openBlock as c,ref as p,watch as g}from"vue";var y=/* @__PURE__ */f({__name:"TimeField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"minute"},hourCycle:{default:void 0},locale:{default:void 0},min:{default:void 0},max:{default:void 0},step:{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},form:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:a},getSegmentPlaceholder:{type:Function,default:void 0}},emits:["update:value","value-change"],setup(a,{expose:f,emit:y}){const h=a,V=y,x=m(()=>i(h.locale,h.hourCycle)),T=m(()=>h.step??("second"===h.granularity?1:60)),S=m(()=>void 0===h.value?void 0:r(h.value,"value")),b=m(()=>r(h.defaultValue,"defaultValue")),k=m(()=>r(h.min,"min")??void 0),C=m(()=>r(h.max,"max")??void 0),E=p(b.value),B=m(()=>void 0!==S.value?S.value:E.value),F=p(B.value?d(B.value,x.value):{});function R(e){F.value=e;const a=u(l({kind:"time",granularity:h.granularity,locale:h.locale,hourCycle:x.value,values:e}))?n(e,h.granularity,x.value):null;a!==B.value&&(void 0===S.value&&(E.value=a),V("update:value",a),V("value-change",a))}g([B,x,()=>h.granularity],([e,a,l])=>{const t=n(F.value,l,a);null!==e?t!==e&&(F.value=d(e,a)):null!==t&&(F.value={})});const _=m(()=>null!==o(B.value,k.value,C.value));function j(e){return t(e,h.granularity,x.value,k.value,C.value)}const q=p(null),L=S.value??b.value;return e(()=>q.value?.inputEl,()=>{F.value=L?d(L,x.value):{},void 0===S.value&&(E.value=L),V("update:value",L),V("value-change",L)}),f({checkValidity:()=>q.value?.inputEl?.checkValidity()??!0,reportValidity:()=>q.value?.inputEl?.reportValidity()??!0,setCustomValidity:e=>q.value?.inputEl?.setCustomValidity(e)}),(e,l)=>(c(),s(v,{family:"time-field",class:"skdx-time-field","data-part":"root","data-skdx-component":"time-field",ref_key:"fieldRef",ref:q,kind:"time",granularity:a.granularity,locale:a.locale,"hour-cycle":x.value,values:F.value,"form-value":B.value,"form-type":"time","form-min":k.value,"form-max":C.value,step:T.value,"clamp-edge-values":j,disabled:a.disabled,"read-only":a.readOnly,invalid:a.invalid||_.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:R},null,8,["granularity","locale","hour-cycle","values","form-value","form-min","form-max","step","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});export{y as default};
+import{useFormReset as e}from"../utils/useFormReset.js";import{EMPTY_VALUE_TEXT as a,buildSegments as l,clampValuesToTimeRange as t,isComplete as u,resolveHourCycle as i,timeRangeViolation as o,timeStringToValues as n,valuesToTimeString as r}from"../utils/date-segments.js";import{toTimeValue as d}from"../utils/date-value.js";import m from"../utils/SegmentedField.vue.js";import{computed as v,createBlock as s,defineComponent as c,openBlock as f,ref as g,watch as p}from"vue";var y=/* @__PURE__ */c({__name:"TimeField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"minute"},hourCycle:{default:void 0},locale:{default:void 0},min:{},max:{},step:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},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:y}){const h=a,V=y,x=v(()=>i(h.locale,h.hourCycle)),T=v(()=>h.step??("second"===h.granularity?1:60)),S=v(()=>void 0===h.value?void 0:d(h.value,"value")),b=v(()=>d(h.defaultValue,"defaultValue")),k=v(()=>d(h.min,"min")??void 0),C=v(()=>d(h.max,"max")??void 0),E=g(b.value),B=v(()=>void 0!==S.value?S.value:E.value),R=g(B.value?n(B.value,x.value):{});function _(e){R.value=e;const a=u(l({kind:"time",granularity:h.granularity,locale:h.locale,hourCycle:x.value,values:e}))?r(e,h.granularity,x.value):null;a!==B.value&&(void 0===S.value&&(E.value=a),V("update:value",a),V("value-change",a))}p([B,x,()=>h.granularity],([e,a,l])=>{const t=r(R.value,l,a);null!==e?t!==e&&(R.value=n(e,a)):null!==t&&(R.value={})});const j=v(()=>null!==o(B.value,k.value,C.value));function q(e){return t(e,h.granularity,x.value,k.value,C.value)}const F=g(null),L=S.value??b.value;return e(()=>F.value?.inputEl,()=>{R.value=L?n(L,x.value):{},void 0===S.value&&(E.value=L),V("update:value",L),V("value-change",L)}),c({checkValidity:()=>F.value?.inputEl?.checkValidity()??!0,reportValidity:()=>F.value?.inputEl?.reportValidity()??!0,setCustomValidity:e=>F.value?.inputEl?.setCustomValidity(e)}),(e,l)=>(f(),s(m,{ref_key:"fieldRef",ref:F,family:"time-field",class:"skdx-time-field","data-part":"root","data-skdx-component":"time-field",kind:"time",granularity:h.granularity,locale:a.locale,"hour-cycle":x.value,values:R.value,"form-value":B.value,"form-type":"time","form-min":k.value,"form-max":C.value,step:T.value,"clamp-edge-values":q,disabled:a.disabled,"read-only":a.readOnly,invalid:a.invalid||j.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:_},null,8,["granularity","locale","hour-cycle","values","form-value","form-min","form-max","step","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});export{y as default};

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

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

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

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

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

@@ -1,9 +1,6 @@
 import type { TimelineItem } from './types.cjs';
 /**
- * Renders an `<ol role="list">` with no keyboard interaction — layout and
- * lines are CSS-only. Accepts `items` for auto-derived entries or a slot for
- * manual composition. The role is explicit: `list-style: none` and `display: grid`
- * cause Safari/VoiceOver to drop list semantics from that specific combination.
+ * Renders an `<ol role="list">` (explicit, since `list-style:none` + `display:grid` drops it in Safari/VoiceOver) with no keyboard interaction.
  */
 type __VLS_Props = {
     /** Layout axis, exposed as `data-orientation` — purely a styling hook. */
@@ -13,20 +10,25 @@ type __VLS_Props = {
      * default slot supplies its own `SkdxTimelineItem`s.
      * @default undefined — no derived anatomy; compose `SkdxTimelineItem`s yourself.
      */
-    items?: readonly TimelineItem[];
-};
-declare var __VLS_1: {}, __VLS_6: {
-    item: TimelineItem;
-    index: number;
+    items?: readonly TimelineItem[] | undefined;
+    /**
+     * Which side the skin lays the timeline's entries out on, as `data-align`.
+     * @default undefined — falls back to a `data-align` attribute.
+     */
+    align?: 'end' | 'alternate' | (string & {}) | undefined;
 };
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    content?: (props: typeof __VLS_6) => any;
+type __VLS_Slots = {
+    /** Manual composition of `SkdxTimelineItem` subtrees, replacing the derived `items` anatomy. */
+    default?(): unknown;
+    /** Body of a derived entry, for markup an `items` entry's `content` string cannot express. */
+    content?(props: {
+        item: TimelineItem;
+        index: number;
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    items: readonly TimelineItem[];
     orientation: "vertical" | "horizontal";
+    items: readonly TimelineItem[] | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,9 +1,6 @@
 import type { TimelineItem } from './types.js';
 /**
- * Renders an `<ol role="list">` with no keyboard interaction — layout and
- * lines are CSS-only. Accepts `items` for auto-derived entries or a slot for
- * manual composition. The role is explicit: `list-style: none` and `display: grid`
- * cause Safari/VoiceOver to drop list semantics from that specific combination.
+ * Renders an `<ol role="list">` (explicit, since `list-style:none` + `display:grid` drops it in Safari/VoiceOver) with no keyboard interaction.
  */
 type __VLS_Props = {
     /** Layout axis, exposed as `data-orientation` — purely a styling hook. */
@@ -13,20 +10,25 @@ type __VLS_Props = {
      * default slot supplies its own `SkdxTimelineItem`s.
      * @default undefined — no derived anatomy; compose `SkdxTimelineItem`s yourself.
      */
-    items?: readonly TimelineItem[];
-};
-declare var __VLS_1: {}, __VLS_6: {
-    item: TimelineItem;
-    index: number;
+    items?: readonly TimelineItem[] | undefined;
+    /**
+     * Which side the skin lays the timeline's entries out on, as `data-align`.
+     * @default undefined — falls back to a `data-align` attribute.
+     */
+    align?: 'end' | 'alternate' | (string & {}) | undefined;
 };
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    content?: (props: typeof __VLS_6) => any;
+type __VLS_Slots = {
+    /** Manual composition of `SkdxTimelineItem` subtrees, replacing the derived `items` anatomy. */
+    default?(): unknown;
+    /** Body of a derived entry, for markup an `items` entry's `content` string cannot express. */
+    content?(props: {
+        item: TimelineItem;
+        index: number;
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    items: readonly TimelineItem[];
     orientation: "vertical" | "horizontal";
+    items: readonly TimelineItem[] | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/timeline/Timeline.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const i=require("./TimelineAnatomy.vue.cjs");let e=require("vue");var a=["data-orientation"],r=(0,e.defineComponent)({__name:"Timeline",props:{orientation:{default:"vertical"},items:{default:void 0}},setup(t){return(o,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("ol",{class:"skdx-timeline","data-part":"root","data-skdx-component":"timeline",role:"list","data-orientation":t.orientation},[(0,e.renderSlot)(o.$slots,"default",{},()=>[t.items?((0,e.openBlock)(),(0,e.createBlock)(i.default,{key:0,items:t.items},(0,e.createSlots)({_:2},[o.$slots.content?{name:"content",fn:(0,e.withCtx)(n=>[(0,e.renderSlot)(o.$slots,"content",(0,e.normalizeProps)((0,e.guardReactiveProps)(n)))]),key:"0"}:void 0]),1032,["items"])):(0,e.createCommentVNode)("",!0)])],8,a))}});exports.default=r;
+const r=require("../utils/appearance.cjs"),i=require("./TimelineAnatomy.vue.cjs");let e=require("vue");var o=["data-orientation"],l=(0,e.defineComponent)({inheritAttrs:!1,__name:"Timeline",props:{orientation:{default:"vertical"},items:{default:void 0},align:{}},setup(a){return(t,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("ol",(0,e.mergeProps)({class:"skdx-timeline","data-part":"root","data-skdx-component":"timeline",role:"list","data-orientation":a.orientation},{...t.$attrs,...(0,e.unref)(r.appearanceAttrs)({align:a.align},t.$attrs)}),[(0,e.renderSlot)(t.$slots,"default",{},()=>[a.items?((0,e.openBlock)(),(0,e.createBlock)(i.default,{key:0,items:a.items},(0,e.createSlots)({_:2},[t.$slots.content?{name:"content",fn:(0,e.withCtx)(n=>[(0,e.renderSlot)(t.$slots,"content",(0,e.normalizeProps)((0,e.guardReactiveProps)(n)))]),key:"0"}:void 0]),1032,["items"])):(0,e.createCommentVNode)("",!0)])],16,o))}});exports.default=l;

package/dist/timeline/Timeline.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import e from"./TimelineAnatomy.vue.js";import{createBlock as t,createCommentVNode as o,createElementBlock as a,createSlots as s,defineComponent as n,guardReactiveProps as i,normalizeProps as r,openBlock as l,renderSlot as m,withCtx as d}from"vue";var c=["data-orientation"],p=/* @__PURE__ */n({__name:"Timeline",props:{orientation:{default:"vertical"},items:{default:void 0}},setup:n=>(p,f)=>(l(),a("ol",{class:"skdx-timeline","data-part":"root","data-skdx-component":"timeline",role:"list","data-orientation":n.orientation},[m(p.$slots,"default",{},()=>[n.items?(l(),t(e,{key:0,items:n.items},s({_:2},[p.$slots.content?{name:"content",fn:d(e=>[m(p.$slots,"content",r(i(e)))]),key:"0"}:void 0]),1032,["items"])):o("",!0)])],8,c))});export{p as default};
+import{appearanceAttrs as t}from"../utils/appearance.js";import e from"./TimelineAnatomy.vue.js";import{createBlock as a,createCommentVNode as o,createElementBlock as s,createSlots as n,defineComponent as i,guardReactiveProps as r,mergeProps as l,normalizeProps as m,openBlock as p,renderSlot as c,unref as d,withCtx as f}from"vue";var u=["data-orientation"],k=/* @__PURE__ */i({inheritAttrs:!1,__name:"Timeline",props:{orientation:{default:"vertical"},items:{default:void 0},align:{}},setup:i=>(k,v)=>(p(),s("ol",l({class:"skdx-timeline","data-part":"root","data-skdx-component":"timeline",role:"list","data-orientation":i.orientation},{...k.$attrs,...d(t)({align:i.align},k.$attrs)}),[c(k.$slots,"default",{},()=>[i.items?(p(),a(e,{key:0,items:i.items},n({_:2},[k.$slots.content?{name:"content",fn:f(t=>[c(k.$slots,"content",m(r(t)))]),key:"0"}:void 0]),1032,["items"])):o("",!0)])],16,u))});export{k as default};

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

@@ -1,18 +1,16 @@
 import type { TimelineItem } from './types.cjs';
 /**
- * Anatomy when default slot empty: one `<li>` per entry ordered by skin's grid—opposite,
- * marker, line, content. React port's `TimelineAnatomy.tsx` must stay synchronized.
+ * Anatomy when the default slot is empty: one `<li>` per entry, ordered opposite, marker, line, content.
  * @internal
  */
 type __VLS_Props = {
     items: readonly TimelineItem[];
 };
-declare var __VLS_23: {
-    item: TimelineItem;
-    index: number;
-};
-type __VLS_Slots = {} & {
-    content?: (props: typeof __VLS_23) => any;
+type __VLS_Slots = {
+    content?(props: {
+        item: TimelineItem;
+        index: number;
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;