@skdx/vue 0.26.0 → 0.28.0

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

@@ -1,4 +1,4 @@
-import { type Granularity, type HourCycle, type SegmentType } from '../utils/dateSegments.js';
+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'`. */
 type TimeGranularity = Exclude<Granularity, 'day'>;
 /**
@@ -27,14 +27,13 @@ type TimeGranularity = Exclude<Granularity, 'day'>;
  */
 type __VLS_Props = {
     /**
-     * Current time as a 24-hour `HH:mm` (or `HH:mm:ss`) string, exactly like
-     * `<input type="time">`, for controlled usage. Pair with `v-model:value` or
-     * `@value-change`. `null` while any segment is untyped. Independent of
-     * `hourCycle`, which is display only.
+     * Current time as 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.
      */
-    value?: string | null;
+    value?: string | Date | null;
     /** Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`. */
-    defaultValue?: string | null;
+    defaultValue?: string | Date | null;
     /**
      * How far down the field is editable. `'second'` adds a seconds segment;
      * `'hour'` and `'minute'` both render hour and minute.
@@ -51,6 +50,35 @@ type __VLS_Props = {
      * AM/PM names. Omitted: the runtime's default locale.
      */
     locale?: string;
+    /**
+     * Earliest accepted time in 24-hour `HH:mm[:ss]` shape. Values before it
+     * fail constraint validation with `rangeUnderflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    min?: string | Date;
+    /**
+     * Latest accepted time in 24-hour `HH:mm[:ss]` shape. Values after it
+     * fail constraint validation with `rangeOverflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    max?: string | Date;
+    /**
+     * 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.
+     * @default undefined — one unit of the finest segment: 60 on a `minute` field, 1 on a `second` one.
+     */
+    step?: number;
     /** Disables the field and drops every segment out of the tab order. */
     disabled?: boolean;
     /** Segments stay focusable and readable but refuse every edit. */
@@ -64,6 +92,14 @@ type __VLS_Props = {
      * string. Without it the field submits nothing.
      */
     name?: string;
+    /**
+     * 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.
+     * @default undefined — the field belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
     /**
      * Writing direction, which decides whether ArrowLeft moves to the previous or
      * the next segment. Omitted: read off the nearest `[dir]` ancestor or
@@ -88,12 +124,27 @@ type __VLS_Props = {
      * @default 'Empty'
      */
     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', …).
+     */
+    getSegmentPlaceholder?: SegmentPlaceholderResolver;
 };
 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.
+     */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: string | null) => any;
     "value-change": (value: string | null) => any;
@@ -101,18 +152,23 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     "onUpdate:value"?: ((value: string | null) => any) | undefined;
     "onValue-change"?: ((value: string | null) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    dir: "ltr" | "rtl";
+    value: string | Date | null;
+    readOnly: boolean;
     required: boolean;
     name: string;
-    value: string | null;
     invalid: boolean;
-    defaultValue: string | null;
-    dir: "ltr" | "rtl";
-    readOnly: boolean;
+    defaultValue: string | Date | null;
+    max: string | Date;
+    min: string | Date;
+    step: number;
     locale: string;
     hourCycle: HourCycle;
     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 h=require("../utils/useFormReset.cjs"),a=require("../utils/dateSegments.cjs"),p=require("../utils/SegmentedField.vue.cjs");let u=require("vue");var S=(0,u.defineComponent)({__name:"TimeField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"minute"},hourCycle:{default:void 0},locale:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:a.EMPTY_VALUE_TEXT}},emits:["update:value","value-change"],setup(l,{expose:s,emit:y}){const e=l,v=y,n=(0,u.computed)(()=>a.resolveHourCycle(e.locale,e.hourCycle)),m=(0,u.ref)(e.defaultValue??null),d=(0,u.computed)(()=>e.value!==void 0?e.value:m.value),r=(0,u.ref)(d.value?a.timeStringToValues(d.value,n.value):{});(0,u.watch)([d,n,()=>e.granularity],([t,i,T])=>{const f=a.valuesToTimeString(r.value,T,i);if(t===null){f!==null&&(r.value={});return}f!==t&&(r.value=a.timeStringToValues(t,i))});function g(t){r.value=t;const i=a.isComplete(a.buildSegments({kind:"time",granularity:e.granularity,locale:e.locale,hourCycle:n.value,values:t}))?a.valuesToTimeString(t,e.granularity,n.value):null;i!==d.value&&(e.value===void 0&&(m.value=i),v("update:value",i),v("value-change",i))}const c=(0,u.ref)(null),o=e.value??e.defaultValue??null;return h.useFormReset(()=>c.value?.inputEl,()=>{r.value=o?a.timeStringToValues(o,n.value):{},e.value===void 0&&(m.value=o),v("update:value",o),v("value-change",o)}),s({checkValidity:()=>c.value?.inputEl?.checkValidity()??!0,reportValidity:()=>c.value?.inputEl?.reportValidity()??!0}),(t,i)=>((0,u.openBlock)(),(0,u.createBlock)(p.default,{family:"time-field",class:"skdx-time-field","data-part":"root","data-skdx-component":"time-field",ref_key:"fieldRef",ref:c,kind:"time",granularity:l.granularity,locale:l.locale,"hour-cycle":n.value,values:r.value,"form-value":d.value,disabled:l.disabled,"read-only":l.readOnly,invalid:l.invalid,required:l.required,name:l.name,dir:l.dir,"get-segment-label":l.getSegmentLabel,"empty-segment-text":l.emptySegmentText,onValuesChange:g},null,8,["granularity","locale","hour-cycle","values","form-value","disabled","read-only","invalid","required","name","dir","get-segment-label","empty-segment-text"]))}});exports.default=S;
+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;

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

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

@@ -1,18 +1,31 @@
+import type { TimelineItem } from './types.cjs';
 /**
- * The Vue implementation of the shared Timeline contract (see
- * `@skdx/shared`'s `timelineContract`). Renders an `<ol>`: no ARIA role or
- * keyboard behavior beyond the semantic list — layout and connecting lines
- * are entirely up to consumer CSS.
+ * 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.
  */
 type __VLS_Props = {
     /** Layout axis, exposed as `data-orientation` — purely a styling hook. */
     orientation?: 'vertical' | 'horizontal';
+    /**
+     * The events, rendered as one derived `<li>` each. Ignored once the
+     * 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;
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_6) => any;
 };
 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";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1,18 +1,31 @@
+import type { TimelineItem } from './types.js';
 /**
- * The Vue implementation of the shared Timeline contract (see
- * `@skdx/shared`'s `timelineContract`). Renders an `<ol>`: no ARIA role or
- * keyboard behavior beyond the semantic list — layout and connecting lines
- * are entirely up to consumer CSS.
+ * 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.
  */
 type __VLS_Props = {
     /** Layout axis, exposed as `data-orientation` — purely a styling hook. */
     orientation?: 'vertical' | 'horizontal';
+    /**
+     * The events, rendered as one derived `<li>` each. Ignored once the
+     * 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;
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_6) => any;
 };
 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";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/timeline/Timeline.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/timeline/Timeline.vue_vue_type_script_setup_true_lang.js

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

package/dist/timeline/TimelineAnatomy.vue.cjs

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

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

@@ -0,0 +1,24 @@
+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.
+ * @internal
+ */
+type __VLS_Props = {
+    items: readonly TimelineItem[];
+};
+declare var __VLS_23: {
+    item: TimelineItem;
+    index: number;
+};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,24 @@
+import type { TimelineItem } from './types.js';
+/**
+ * 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.
+ * @internal
+ */
+type __VLS_Props = {
+    items: readonly TimelineItem[];
+};
+declare var __VLS_23: {
+    item: TimelineItem;
+    index: number;
+};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/timeline/TimelineAnatomy.vue.js

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

package/dist/timeline/TimelineAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const l=require("../utils/renderProp.cjs"),i=require("./TimelineContent.vue.cjs"),n=require("./TimelineIndicator.vue.cjs"),u=require("./TimelineItem.vue.cjs"),c=require("./TimelineOpposite.vue.cjs"),d=require("./TimelineSeparator.vue.cjs");let e=require("vue");var s=(0,e.defineComponent)({__name:"TimelineAnatomy",props:{items:{}},setup(o){return(a,p)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(o.items,(t,r)=>((0,e.openBlock)(),(0,e.createBlock)(u.default,{key:r,"data-state":t.state},{default:(0,e.withCtx)(()=>[t.opposite?((0,e.openBlock)(),(0,e.createBlock)(c.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.opposite),1)]),_:2},1024)):(0,e.createCommentVNode)("",!0),t.indicator?((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:1,"aria-label":t.indicatorLabel},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(l.RenderProp),{render:()=>t.indicator},null,8,["render"])]),_:2},1032,["aria-label"])):((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:2})),r<o.items.length-1?((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:3})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(i.default,null,{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"content",{item:t,index:r},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.content),1)])]),_:2},1024)]),_:2},1032,["data-state"]))),128))}});exports.default=s;

package/dist/timeline/TimelineAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{RenderProp as e}from"../utils/renderProp.js";import t from"./TimelineContent.vue.js";import a from"./TimelineIndicator.vue.js";import r from"./TimelineItem.vue.js";import o from"./TimelineOpposite.vue.js";import i from"./TimelineSeparator.vue.js";import{Fragment as n,createBlock as s,createCommentVNode as m,createElementBlock as l,createTextVNode as p,createVNode as d,defineComponent as u,openBlock as c,renderList as f,renderSlot as k,toDisplayString as v,unref as y,withCtx as T}from"vue";var j=/* @__PURE__ */u({__name:"TimelineAnatomy",props:{items:{}},setup:u=>(j,_)=>(c(!0),l(n,null,f(u.items,(n,l)=>(c(),s(r,{key:l,"data-state":n.state},{default:T(()=>[n.opposite?(c(),s(o,{key:0},{default:T(()=>[p(v(n.opposite),1)]),_:2},1024)):m("",!0),n.indicator?(c(),s(a,{key:1,"aria-label":n.indicatorLabel},{default:T(()=>[d(y(e),{render:()=>n.indicator},null,8,["render"])]),_:2},1032,["aria-label"])):(c(),s(a,{key:2})),l<u.items.length-1?(c(),s(i,{key:3})):m("",!0),d(t,null,{default:T(()=>[k(j.$slots,"content",{item:n,index:l},()=>[p(v(n.content),1)])]),_:2},1024)]),_:2},1032,["data-state"]))),128))});export{j as default};

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

@@ -1,4 +1,3 @@
-/** The dot/icon marker for a `SkdxTimelineItem`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -1,4 +1,3 @@
-/** The dot/icon marker for a `SkdxTimelineItem`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/timeline/TimelineIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let e=require("vue");var r={class:"skdx-timeline__indicator","data-part":"indicator"},a=(0,e.defineComponent)({__name:"TimelineIndicator",setup(i){return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",r,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=a;
+let e=require("vue");var n=["aria-hidden","role"],o=(0,e.defineComponent)({__name:"TimelineIndicator",setup(a){const r=(0,e.useSlots)();function i(){const t=r.default?.();return t===void 0||t.length===0}return(t,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-timeline__indicator","data-part":"indicator","aria-hidden":i()?"true":void 0,role:i()?void 0:"img"},[(0,e.renderSlot)(t.$slots,"default")],8,n))}});exports.default=o;

package/dist/timeline/TimelineIndicator.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{createElementBlock as e,defineComponent as a,openBlock as t,renderSlot as o}from"vue";var i={class:"skdx-timeline__indicator","data-part":"indicator"},n=/* @__PURE__ */a({__name:"TimelineIndicator",setup:a=>(a,n)=>(t(),e("div",i,[o(a.$slots,"default")]))});export{n as default};
+import{createElementBlock as e,defineComponent as t,openBlock as a,renderSlot as o,useSlots as i}from"vue";var n=["aria-hidden","role"],r=/* @__PURE__ */t({__name:"TimelineIndicator",setup(t){const r=i();function d(){const e=r.default?.();return void 0===e||0===e.length}return(t,i)=>(a(),e("div",{class:"skdx-timeline__indicator","data-part":"indicator","aria-hidden":d()?"true":void 0,role:d()?void 0:"img"},[o(t.$slots,"default")],8,n))}});export{r as default};

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

@@ -1,4 +1,9 @@
-/** A single `<li>` entry in a `SkdxTimeline`. */
+/**
+ * A single `<li role="listitem">` entry composed of indicator, optional
+ * separator, content, and optional opposite in that order. DOM order is the
+ * reading order only with this arrangement. The role is explicit: `display: grid`
+ * causes Safari/VoiceOver to drop the implicit role.
+ */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -1,4 +1,9 @@
-/** A single `<li>` entry in a `SkdxTimeline`. */
+/**
+ * A single `<li role="listitem">` entry composed of indicator, optional
+ * separator, content, and optional opposite in that order. DOM order is the
+ * reading order only with this arrangement. The role is explicit: `display: grid`
+ * causes Safari/VoiceOver to drop the implicit role.
+ */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/timeline/TimelineItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let e=require("vue");var _={class:"skdx-timeline__item","data-part":"item"},l=(0,e.defineComponent)({__name:"TimelineItem",setup(r){return(t,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("li",_,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=l;
+let e=require("vue");var l={class:"skdx-timeline__item","data-part":"item",role:"listitem"},_=(0,e.defineComponent)({__name:"TimelineItem",setup(r){return(t,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("li",l,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=_;

package/dist/timeline/TimelineItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{createElementBlock as e,defineComponent as t,openBlock as a,renderSlot as l}from"vue";var s={class:"skdx-timeline__item","data-part":"item"},m=/* @__PURE__ */t({__name:"TimelineItem",setup:t=>(t,m)=>(a(),e("li",s,[l(t.$slots,"default")]))});export{m as default};
+import{createElementBlock as e,defineComponent as t,openBlock as a,renderSlot as l}from"vue";var s={class:"skdx-timeline__item","data-part":"item",role:"listitem"},i=/* @__PURE__ */t({__name:"TimelineItem",setup:t=>(t,i)=>(a(),e("li",s,[l(t.$slots,"default")]))});export{i as default};

package/dist/timeline/TimelineOpposite.vue.cjs

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

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

@@ -0,0 +1,18 @@
+/**
+ * The metadata region opposite a timeline item (timestamp, actor, elapsed time)
+ * in its own grid column. Render it before `TimelineIndicator` so reading order
+ * matches visual order — the skin places by column, not DOM order.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,18 @@
+/**
+ * The metadata region opposite a timeline item (timestamp, actor, elapsed time)
+ * in its own grid column. Render it before `TimelineIndicator` so reading order
+ * matches visual order — the skin places by column, not DOM order.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/timeline/TimelineOpposite.vue.js

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

package/dist/timeline/TimelineOpposite.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var p={class:"skdx-timeline__opposite","data-part":"opposite"},_=(0,e.defineComponent)({__name:"TimelineOpposite",setup(i){return(t,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",p,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=_;

package/dist/timeline/TimelineOpposite.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as e,defineComponent as t,openBlock as o,renderSlot as a}from"vue";var s={class:"skdx-timeline__opposite","data-part":"opposite"},p=/* @__PURE__ */t({__name:"TimelineOpposite",setup:t=>(t,p)=>(o(),e("div",s,[a(t.$slots,"default")]))});export{p as default};

package/dist/timeline/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Timeline.vue.cjs"),i=require("./TimelineItem.vue.cjs"),r=require("./TimelineIndicator.vue.cjs"),t=require("./TimelineSeparator.vue.cjs"),n=require("./TimelineContent.vue.cjs");exports.SkdxTimeline=e.default;exports.SkdxTimelineContent=n.default;exports.SkdxTimelineIndicator=r.default;exports.SkdxTimelineItem=i.default;exports.SkdxTimelineSeparator=t.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Timeline.vue.cjs");exports.SkdxTimeline=e.default;

package/dist/timeline/index.d.cts

@@ -1,5 +1,2 @@
 export { default as SkdxTimeline } from './Timeline.vue.cjs';
-export { default as SkdxTimelineItem } from './TimelineItem.vue.cjs';
-export { default as SkdxTimelineIndicator } from './TimelineIndicator.vue.cjs';
-export { default as SkdxTimelineSeparator } from './TimelineSeparator.vue.cjs';
-export { default as SkdxTimelineContent } from './TimelineContent.vue.cjs';
+export type { TimelineItem } from './types.cjs';

package/dist/timeline/index.d.ts

@@ -1,5 +1,2 @@
 export { default as SkdxTimeline } from './Timeline.vue.js';
-export { default as SkdxTimelineItem } from './TimelineItem.vue.js';
-export { default as SkdxTimelineIndicator } from './TimelineIndicator.vue.js';
-export { default as SkdxTimelineSeparator } from './TimelineSeparator.vue.js';
-export { default as SkdxTimelineContent } from './TimelineContent.vue.js';
+export type { TimelineItem } from './types.js';

package/dist/timeline/index.js

@@ -1 +1 @@
-import e from"./Timeline.vue.js";import i from"./TimelineItem.vue.js";import m from"./TimelineIndicator.vue.js";import o from"./TimelineSeparator.vue.js";import r from"./TimelineContent.vue.js";export{e as SkdxTimeline,r as SkdxTimelineContent,m as SkdxTimelineIndicator,i as SkdxTimelineItem,o as SkdxTimelineSeparator};
+import e from"./Timeline.vue.js";export{e as SkdxTimeline};

package/dist/timeline/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TimelineContent.vue.cjs"),i=require("./TimelineIndicator.vue.cjs"),r=require("./TimelineItem.vue.cjs"),t=require("./TimelineOpposite.vue.cjs"),n=require("./TimelineSeparator.vue.cjs"),l=require("./Timeline.vue.cjs");exports.SkdxTimeline=l.default;exports.SkdxTimelineContent=e.default;exports.SkdxTimelineIndicator=i.default;exports.SkdxTimelineItem=r.default;exports.SkdxTimelineOpposite=t.default;exports.SkdxTimelineSeparator=n.default;

package/dist/timeline/primitives.d.cts

@@ -0,0 +1,29 @@
+/**
+ * Advanced primitives for custom `SkdxTimeline` layouts. Recipe built from
+ * these. Part order: opposite, indicator, separator, content (for reading order).
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxTimeline, SkdxTimelineContent, SkdxTimelineIndicator, SkdxTimelineItem, SkdxTimelineOpposite, SkdxTimelineSeparator } from '@skdx/vue/primitives/timeline';
+ * </script>
+ *
+ * <template>
+ *   <SkdxTimeline>
+ *     <SkdxTimelineItem>
+ *       <SkdxTimelineOpposite>09:24</SkdxTimelineOpposite>
+ *       <SkdxTimelineIndicator />
+ *       <SkdxTimelineSeparator />
+ *       <SkdxTimelineContent>Order placed</SkdxTimelineContent>
+ *     </SkdxTimelineItem>
+ *   </SkdxTimeline>
+ * </template>
+ * ```
+ */
+export { default as SkdxTimeline } from './Timeline.vue.cjs';
+export { default as SkdxTimelineItem } from './TimelineItem.vue.cjs';
+export { default as SkdxTimelineIndicator } from './TimelineIndicator.vue.cjs';
+export { default as SkdxTimelineSeparator } from './TimelineSeparator.vue.cjs';
+export { default as SkdxTimelineContent } from './TimelineContent.vue.cjs';
+export { default as SkdxTimelineOpposite } from './TimelineOpposite.vue.cjs';
+export type { TimelineItem } from './types.cjs';

package/dist/timeline/primitives.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Advanced primitives for custom `SkdxTimeline` layouts. Recipe built from
+ * these. Part order: opposite, indicator, separator, content (for reading order).
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxTimeline, SkdxTimelineContent, SkdxTimelineIndicator, SkdxTimelineItem, SkdxTimelineOpposite, SkdxTimelineSeparator } from '@skdx/vue/primitives/timeline';
+ * </script>
+ *
+ * <template>
+ *   <SkdxTimeline>
+ *     <SkdxTimelineItem>
+ *       <SkdxTimelineOpposite>09:24</SkdxTimelineOpposite>
+ *       <SkdxTimelineIndicator />
+ *       <SkdxTimelineSeparator />
+ *       <SkdxTimelineContent>Order placed</SkdxTimelineContent>
+ *     </SkdxTimelineItem>
+ *   </SkdxTimeline>
+ * </template>
+ * ```
+ */
+export { default as SkdxTimeline } from './Timeline.vue.js';
+export { default as SkdxTimelineItem } from './TimelineItem.vue.js';
+export { default as SkdxTimelineIndicator } from './TimelineIndicator.vue.js';
+export { default as SkdxTimelineSeparator } from './TimelineSeparator.vue.js';
+export { default as SkdxTimelineContent } from './TimelineContent.vue.js';
+export { default as SkdxTimelineOpposite } from './TimelineOpposite.vue.js';
+export type { TimelineItem } from './types.js';

package/dist/timeline/primitives.js

@@ -0,0 +1 @@
+import e from"./TimelineContent.vue.js";import i from"./TimelineIndicator.vue.js";import m from"./TimelineItem.vue.js";import o from"./TimelineOpposite.vue.js";import r from"./TimelineSeparator.vue.js";import t from"./Timeline.vue.js";export{t as SkdxTimeline,e as SkdxTimelineContent,i as SkdxTimelineIndicator,m as SkdxTimelineItem,o as SkdxTimelineOpposite,r as SkdxTimelineSeparator};

package/dist/timeline/types.d.cts

@@ -0,0 +1,29 @@
+import type { VNode } from 'vue';
+/** One event in a timeline's items. */
+export interface TimelineItem {
+    /** The event, rendered in TimelineContent; override with content slot. */
+    content: string;
+    /**
+     * Metadata on the far side of the marker (timestamp, actor, elapsed time).
+     * @default undefined — no opposite region.
+     */
+    opposite?: string;
+    /**
+     * Indicator content (icon, number, check, or a VNode). Filling it makes the
+     * marker visible and requires an accessible name.
+     * @default undefined — decorative, `aria-hidden` marker.
+     */
+    indicator?: string | VNode;
+    /**
+     * Accessible name for the indicator when not decorative. A glyph like `✓`
+     * needs this to be announced.
+     * @default undefined — the indicator's text names it.
+     */
+    indicatorLabel?: string;
+    /**
+     * Event state relative to the user (`complete`, `current`, `pending`),
+     * published as `data-state`.
+     * @default undefined — no `data-state`.
+     */
+    state?: 'complete' | 'current' | 'pending';
+}

package/dist/timeline/types.d.ts

@@ -0,0 +1,29 @@
+import type { VNode } from 'vue';
+/** One event in a timeline's items. */
+export interface TimelineItem {
+    /** The event, rendered in TimelineContent; override with content slot. */
+    content: string;
+    /**
+     * Metadata on the far side of the marker (timestamp, actor, elapsed time).
+     * @default undefined — no opposite region.
+     */
+    opposite?: string;
+    /**
+     * Indicator content (icon, number, check, or a VNode). Filling it makes the
+     * marker visible and requires an accessible name.
+     * @default undefined — decorative, `aria-hidden` marker.
+     */
+    indicator?: string | VNode;
+    /**
+     * Accessible name for the indicator when not decorative. A glyph like `✓`
+     * needs this to be announced.
+     * @default undefined — the indicator's text names it.
+     */
+    indicatorLabel?: string;
+    /**
+     * Event state relative to the user (`complete`, `current`, `pending`),
+     * published as `data-state`.
+     * @default undefined — no `data-state`.
+     */
+    state?: 'complete' | 'current' | 'pending';
+}