@ecoma-io/loom 0.3.0 → 0.5.0

package/dist/packages/primitives/time-picker/src/TimePicker.vue_vue_type_script_setup_true_lang.js

@@ -3,8 +3,8 @@ import { optional } from "../../../core/src/props.js";
 import { useSplitAttrs } from "../../../core/src/attrs.js";
 import "../../../core/src/index.js";
 import { useLabels } from "../../../labels/src/labels.js";
-import { parseTime as $58246871e4652552$export$c9698ec7f05a07e1 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/string.js";
-import { TIME_SEGMENT_LABELS, emptySegmentValueText, isTimeSegmentPart } from "../../../labels/src/date-labels.js";
+import { parseTime as $58246871e4652552$export$c9698ec7f05a07e1 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.4/node_modules/@internationalized/date/dist/private/string.js";
+import { TIME_SEGMENT_LABELS, segmentAriaLabel, segmentAriaValueText } from "../../../labels/src/date-labels.js";
 import { useFieldControl } from "../../../labels/src/field-context.js";
 import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
 import "../../../labels/src/index.js";
@@ -45,13 +45,15 @@ var TimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const emit = __emit;
 		const text = useLabels("timeSegments", TIME_SEGMENT_LABELS, () => props.labels);
 		function segmentLabel(part) {
-			return isTimeSegmentPart(part) ? text.value[part] : void 0;
+			return segmentAriaLabel({ time: text.value }, part);
 		}
 		function segmentValueText(part, value) {
-			const empty = emptySegmentValueText(part, value, text.value.empty);
-			if (empty["aria-valuetext"]) return empty;
-			if (part === "dayPeriod") return { "aria-valuetext": text.value.filledDayPeriod({ dayPeriod: value }) };
-			return {};
+			return segmentAriaValueText({
+				time: text.value,
+				part,
+				value,
+				locale: props.locale
+			});
 		}
 		const { attrs, rest: fieldAttrs } = useSplitAttrs();
 		/**
@@ -76,7 +78,7 @@ var TimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			invalid: props.invalid,
 			required: props.required
 		}));
-		const groupLabelledBy = computed(() => attrs["aria-label"] || attrs["aria-labelledby"] ? void 0 : field.labelledBy);
+		const groupLabelledBy = computed(() => attrs["aria-label"] ? void 0 : field.labelledBy);
 		function fromClock(value) {
 			if (!value) return void 0;
 			try {

package/dist/packages/primitives/time-picker/src/TimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/time-picker/src/TimePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TimeSegmentLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Everything this control publishes to assistive technology: the four names\n * Reka UI would otherwise give the segments in English of its own accord.\n * There is nothing else — the icon is decoration and hidden, and the field\n * group takes its name from the caller or from a wrapping Field.\n *\n * An alias for the shared slice rather than a fifth interface. The same four\n * names are said by `DateTimePicker` and `DateTimeRangePicker`, they come from\n * one Reka implementation, and `src/lib/date-labels.ts` carries why they are\n * declared once. The alias exists so this control's `labels` prop reads like\n * every other one's; annotate with `LabelOverrides<TimePickerLabels>` rather\n * than with this, which is total.\n */\nexport type TimePickerLabels = TimeSegmentLabels;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { TimeFieldInput, TimeFieldRoot, type TimeValue } from \"reka-ui\";\nimport { Clock } from \"@lucide/vue\";\nimport { parseTime } from \"@internationalized/date\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport {\n  TIME_SEGMENT_LABELS,\n  emptySegmentValueText,\n  isTimeSegmentPart,\n} from \"@ecoma-io/loom-labels\";\n\n/**\n * TimePicker — a time of day, typed into a segmented field. Reach for it\n * wherever a clock time is a value: a meeting start, a reminder, opening hours.\n *\n * **There is no clock face and no dropdown, deliberately.** A clock dial is\n * slower than typing for every reader who can type, and unusable for several\n * who cannot; a 96-row list of quarter hours is worse again. The segmented\n * field already is the control — arrow keys change the segment under the\n * cursor, digits fill it and advance — so a panel would only be a second, worse\n * path to the same value. That is the one place this diverges from DatePicker,\n * where the calendar earns its panel by answering \"which Tuesday?\", a question\n * a time never has.\n *\n * **The model value is a plain `\"HH:mm\"` string in 24-hour time**, or\n * `\"HH:mm:ss\"` when `granularity` asks for seconds — the same boundary\n * DatePicker draws for `\"YYYY-MM-DD\"`, and drawn here for the same reason: a\n * host has a string from its API and should not have to learn a date library to\n * bind a time. `hourCycle` moves the *display* to 12-hour and never the value,\n * because conflating the two is how a 12-hour locale ends up storing `\"01:30\"`\n * for half past one in the afternoon.\n *\n * **A time is not a date.** There is no timezone here, no offset, and no `Date`\n * anywhere near the public surface: `\"09:00\"` is nine in the morning wherever\n * it is read, and the moment that turns into is the host's question, not this\n * component's. Pair it with a DatePicker when an instant is what is wanted.\n *\n * Unlike DatePicker there are no `min`/`max` bounds. A time of day has no\n * ordering that survives midnight — a night shift is \"not before 22:00\" *and*\n * \"not after 02:00\", two bounds that cross rather than fence — so a min/max\n * pair would quietly call 01:00 out of range for the exact case it was reached\n * for. A window like that belongs to the host, which knows which day each end\n * is on.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()` — the row's id, the id of its hint or error line, and\n * `required` / `invalid` / `disabled` / `readonly` / `name` — so `<Field\n * label=\"Starts at\" error=\"…\"><TimePicker /></Field>` needs no attributes at the\n * call site. Every prop below still wins over the row when it is set, in both\n * directions, which is why the four booleans default to `undefined` rather than\n * `false`. `readonly` and `disabled` are different states, so the field rests in\n * three appearances rather than two: read-only is a time on show — still a Tab\n * stop, still submitted, a lifted fill with the segments at full strength —\n * where disabled is unavailable and drained a step further, in fill, text\n * colour and border weight together.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen time as `\"HH:mm\"`, or `\"HH:mm:ss\"` at second granularity, in\n     * 24-hour time whatever the field displays. Unset, empty or unparseable\n     * means no time is chosen. The explicit `| undefined` is what lets\n     * `v-model` bind a ref that clears — the emitted value drops to `undefined`\n     * when the field is emptied, and a plain optional prop refuses to take it\n     * back.\n     */\n    modelValue?: string | undefined;\n    /**\n     * Whether the field reads as 12-hour with an AM/PM segment or as 24-hour.\n     * Display only: the value stays 24-hour either way. Unset follows `locale`,\n     * which is what a reader of that locale expects to see.\n     */\n    hourCycle?: 12 | 24;\n    /** How far down the field goes. `\"hour\"` and `\"minute\"` report `\"HH:mm\"`; `\"second\"` adds a seconds segment and reports `\"HH:mm:ss\"`. */\n    granularity?: \"hour\" | \"minute\" | \"second\";\n    /** BCP 47 tag driving the order of the segments, the separator between them, and the 12-or-24-hour default. */\n    locale?: string;\n    /** Unavailable: dims the control and takes the field out of the tab order. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the time without allowing an edit: the field stays a Tab stop, stays submitted, and is filled rather than dimmed. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Marks the field mandatory to assistive tech (`aria-required` on the segment group). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`, carried on the hidden input Reka submits the time through. Unset defers to a wrapping Field. */\n    name?: string;\n    /**\n     * Names for the four segments, as any subset of `TimePickerLabels` — the\n     * rest stay as the host's `provideLoomLabels` vocabulary left them, and then\n     * as Loom's English.\n     *\n     * Every one of them replaces a literal Reka writes itself, so this is not\n     * decoration: leave the vocabulary unset and the segments are named in\n     * English rather than named not at all.\n     */\n    labels?: LabelOverrides<TimePickerLabels>;\n  }>(),\n  {\n    granularity: \"minute\",\n    locale: \"en\",\n    // Not `false`, for any of the four — TextField.vue carries the full\n    // reasoning: `false` is a caller's decision that must beat the row, absent\n    // is a caller saying nothing, and only `undefined` survives to mean that\n    // past Vue's absent-Boolean-casts-to-false rule.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen time as `\"HH:mm\"` (or `\"HH:mm:ss\"`), or `undefined` once the field has been cleared. */\n  \"update:modelValue\": [value: string | undefined];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"timeSegments\", TIME_SEGMENT_LABELS, () => props.labels);\n\n// Read through the ref on every call rather than resolved into a lookup table\n// once: a table built in `setup` freezes the first language and every later\n// switch silently does nothing. `undefined` for the `literal` separators, which\n// Reka renders `aria-hidden` and which must stay unnamed.\nfunction segmentLabel(part: string): string | undefined {\n  return isTimeSegmentPart(part) ? text.value[part] : undefined;\n}\n\n// The companion to `segmentLabel`, and the reason it returns an object rather\n// than a string is in `emptySegmentValueText`: Reka's `aria-valuetext` is a\n// hard-coded \"Empty\" only while the segment holds nothing, so this replaces\n// that case and leaves the filled one — a number — exactly as Reka wrote it.\n//\n// The dayPeriod is the exception. Reka writes `\"AM\"` or `\"PM\"` from its own\n// hour-cycle logic, not from `Intl.DateTimeFormat`, so a localised field\n// still announces the period in English. `filledDayPeriod` lets a host replace\n// those with the locale's own period names (Arabic `\"ص\"`/`\"م\"`, Japanese\n// `\"午前\"`/`\"午後\"`).\nfunction segmentValueText(part: string, value: string): { \"aria-valuetext\"?: string } {\n  const empty = emptySegmentValueText(part, value, text.value.empty);\n  if (empty[\"aria-valuetext\"]) return empty;\n  if (part === \"dayPeriod\") {\n    return { \"aria-valuetext\": text.value.filledDayPeriod({ dayPeriod: value }) };\n  }\n  return {};\n}\n\n// One rendered node, so both halves of the fallthrough land on it — the split\n// exists only because `class` needs the Tailwind-aware merge and Vue's own\n// fallthrough would concatenate a caller's `h-11` after our `h-9` instead of\n// replacing it. That node is Reka's `role=\"group\"`, which is also where\n// `aria-label` belongs: a screen reader announces a group's name once on\n// entering it, rather than once per segment.\n//\n// It is also why `invalid` is announced with `aria-invalid` and nothing else.\n// DatePicker moves its `data-invalid` marker onto the anchor because the field\n// group already spells that attribute with Reka's own meaning; here there is no\n// second element to move it to, and an attribute Reka binds itself wins outright\n// — its template merges `$attrs` first and its own bindings after, so a\n// `data-invalid` passed in from out here is overwritten by Reka's own\n// `undefined` before it reaches the DOM. Setting it would look like it worked\n// and silently do nothing.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: fieldAttrs } = useSplitAttrs();\n\n/**\n * The time segments are `<div role=\"spinbutton\" tabindex=\"0\">`, and\n * `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and\n * `<textarea>` — so Reka's hidden input went inert inside a disabled group\n * while the segments a reader actually uses still typed. Measured in jsdom: an\n * empty hour segment became `12` on an arrow key.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are handed in as this caller's own values: a caller who\n// sets either still beats the row, and the row's description is merged into\n// theirs rather than replacing it. `field.attrs` then spreads onto\n// `TimeFieldRoot` **after** `fieldAttrs`, which is the node both were already\n// landing on.\n//\n// **Where each key ends up was checked rather than assumed**, given what the\n// note above says about attributes this node overwrites. The set Reka spells\n// itself is `role`, `aria-disabled`, `data-disabled`, `data-readonly`,\n// `data-invalid` and `dir`, and `field.attrs` spells none of them:\n// `aria-describedby`, `aria-required` and `aria-invalid` are undeclared and land\n// on the `role=\"group\"` as intended, while `id` and `name` are declared props\n// and land on the visually-hidden `<input>` the field submits through — which is\n// the element a `<label for>` can actually name, a `role=\"group\"` div not being\n// labelable.\n//\n// The `:aria-invalid` binding that used to sit on the root is gone with it: an\n// individual attribute written after a `v-bind` wins, so keeping one would\n// overwrite the resolved value with the raw prop.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: attrs[\"aria-labelledby\"] as string | undefined,\n  name: props.name,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // native input Reka renders inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// `aria-labelledby` for the group, resolved against the row — DatePicker's\n// reasoning, and the same three-way guard.\nconst groupLabelledBy = computed(() =>\n  attrs[\"aria-label\"] || attrs[\"aria-labelledby\"] ? undefined : field.labelledBy,\n);\n\nfunction fromClock(value: string | undefined): TimeValue | undefined {\n  if (!value) return undefined;\n  try {\n    return parseTime(value);\n  } catch {\n    // Same contract as DatePicker: a half-typed or wrongly-shaped value is read\n    // as no time chosen. A component library cannot decide that a host's bad\n    // data is fatal.\n    return undefined;\n  }\n}\n\nfunction pad(value: number): string {\n  return String(value).padStart(2, \"0\");\n}\n\n// Written out rather than taken from `Time.toString()`, which always prints\n// seconds and appends a fractional part when the value carries one — so a\n// minute-granularity field would report `\"09:30:00\"`, and a value the host\n// parsed from `\"09:30:00.5\"` would round-trip a half second the field never\n// showed. The string that comes back is the string the segments are showing.\nfunction toClock(time: TimeValue): string {\n  const hhmm = `${pad(time.hour)}:${pad(time.minute)}`;\n  return props.granularity === \"second\" ? `${hhmm}:${pad(time.second)}` : hhmm;\n}\n\n// `optional()` rather than plain bindings: Reka reads an explicit `undefined`\n// `modelValue` as a value the host owns and is holding empty, which turns an\n// uncontrolled field into a permanently empty one, and an `hourCycle` of\n// `undefined` is how it is told to follow the locale. Dropping the keys says\n// what is true.\nconst rootValue = computed(() =>\n  optional({ modelValue: fromClock(props.modelValue), hourCycle: props.hourCycle }),\n);\n\nfunction onTimeChange(time: TimeValue | undefined) {\n  emit(\"update:modelValue\", time ? toClock(time) : undefined);\n}\n\n// The field is one Tab stop, not four. The reasoning, and the reason Reka's own\n// ArrowLeft/ArrowRight handling survives it untouched, is written out in\n// DatePicker — it moves focus with `focus()` directly, which ignores tabindex.\n// It matters more here: a 12-hour field with seconds is four segments, so\n// leaving Reka's default in place costs a keyboard reader four Tab presses to\n// cross one control.\nconst focusedPart = ref<string>();\n\nfunction segmentTabIndex(part: string, segments: readonly { part: string }[]): number | undefined {\n  // Read-only keeps every stop it had, unlike disabled: the time is on show and\n  // a reader still arrows across the segments to read it.\n  if (field.disabled || part === \"literal\") return undefined;\n  const editable = segments.filter((segment) => segment.part !== \"literal\");\n  // The remembered segment is dropped when a granularity or locale change takes\n  // it away — a field whose only tab stop is a seconds segment that no longer\n  // exists is a field nothing can reach.\n  const active =\n    focusedPart.value !== undefined &&\n    editable.some((segment) => segment.part === focusedPart.value)\n      ? focusedPart.value\n      : editable[0]?.part;\n  return part === active ? 0 : -1;\n}\n\n// Reka reads `hourCycle` once, when it builds its formatter, and seeds its\n// segment values from the granularity in the same breath — neither is watched.\n// Observed: a field showing 13:30 that is moved to a 12-hour cycle relabels\n// itself \"1:30 AM\", half a day wrong, because the AM/PM segment appears with\n// its initial value and nothing recomputes it from the hour. Widening the\n// granularity on an empty field is the same fault with a different symptom: the\n// new seconds segment arrives with no entry to read, so it renders without a\n// role at all.\n//\n// Both are structural changes — they add and remove segments — so keying the\n// field on them rebuilds it rather than patching a half-migrated one. `locale`\n// is deliberately not in the key: Reka does watch that, and rebuilding on it\n// would throw away focus mid-edit for a change it handles correctly.\nconst shape = computed(() => `${props.granularity}-${props.hourCycle}`);\n\n/**\n * Reka's hour segment publishes `aria-valuenow` and `aria-valuetext` straight\n * off the internal 24-hour value while publishing `aria-valuemin`/`max` as\n * 1–12, so half past one in the afternoon announces itself as \"13 PM\", out of\n * its own declared range. The displayed hour is the one the reader is being\n * asked about, so the announcement is rebuilt from what the segment actually\n * shows. Only under an explicit 12-hour cycle: left to the locale, Reka defers\n * to the formatter and the pair is already consistent.\n */\nfunction hourAnnouncement(\n  segments: readonly { part: string; value: string }[],\n): Record<string, string | number> | undefined {\n  if (props.hourCycle !== 12) return undefined;\n  const shown = Number(segments.find((segment) => segment.part === \"hour\")?.value);\n  const period = segments.find((segment) => segment.part === \"dayPeriod\")?.value;\n  // An unfilled hour reads as its placeholder rather than a number, and there is\n  // no number to announce for it. The empty case is not left to Reka's English\n  // \"Empty\" either — `segmentValueText` binds the vocabulary's word for it on\n  // the same element, and the two never collide: this returns a value only for\n  // a filled hour and that one only for an empty segment.\n  if (!Number.isInteger(shown) || period === undefined) return undefined;\n  return { \"aria-valuenow\": shown, \"aria-valuetext\": `${shown} ${period}` };\n}\n</script>\n\n<template>\n  <TimeFieldRoot\n    ref=\"root\"\n    :key=\"shape\"\n    v-slot=\"{ segments }\"\n    v-bind=\"{ ...rootValue, ...fieldAttrs, ...field.attrs }\"\n    :aria-labelledby=\"groupLabelledBy\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :class=\"\n      cn(\n        // The text input's own height scale, so a time sitting in a form row\n        // beside a text field lines up rather than nearly lining up. No gap:\n        // the colon between two segments is itself a segment, so spacing them\n        // apart writes the time as `09 : 30`.\n        'flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground',\n        'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n        // The box carries the ring and the focused segment below carries a fill\n        // instead of a second outline, exactly as DatePicker's field does — a\n        // ring drawn inside a ring reads as a rendering fault.\n        'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n        !field.invalid && 'focus-within:shadow-halo',\n        // Three resting appearances, and each is painted on this group rather\n        // than on the segments inside it: a per-segment fill leaves the colon\n        // between them on `background`, and the time comes out striped.\n        //\n        // Read-only lifts to `subtle` and keeps its focus ring and its\n        // full-strength segments — 13.46:1 over that fill — because a read-only\n        // time is a value on show, not an unavailable control. The rim stays\n        // `input`: the field is still a Tab stop and still submitted. Reka's own\n        // `data-readonly` on this node carries the same state to assistive tech,\n        // so nothing here rests on colour.\n        field.readonly && 'bg-subtle',\n        // Drained rather than faded, for the reason DatePicker and\n        // DateTimePicker both write out — this control was the one member of\n        // the family the sweep still caught. `opacity-50` took the segments\n        // down with the box: measured on the built site, the hour and the\n        // period read 3.08:1 and the colon between them 2.07:1, and those\n        // segments *are* the value. The fill drains one step past read-only,\n        // the muted text over it is 4.68:1, and the rim slackens from `input`\n        // to `border` — three channels, so the two states do not part on hue\n        // alone. Set on the group because no segment declares a resting colour\n        // of its own, so each inherits this one.\n        field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n        // Last of the rules that name a border colour: `cn()` resolves one by\n        // whichever class it saw last, so a field both in error and unavailable\n        // would otherwise lose its destructive rim to the disabled one.\n        field.invalid && 'border-destructive focus-within:outline-destructive',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onTimeChange\"\n  >\n    <!-- Leading, where DatePicker's calendar button is trailing: that trailing\n         slot is a button in every other member of this family, and a glyph\n         sitting in it that opens nothing would promise a panel this control\n         does not have. Decoration, so it is hidden from the accessibility\n         tree — the group's own name says what the field is. -->\n    <Clock aria-hidden=\"true\" class=\"mr-2 h-4 w-4 shrink-0 text-muted-foreground\" />\n\n    <!-- The `:aria-label` replaces the one Reka writes in English inside its\n         own render function. It reaches the DOM node as a fallthrough\n         attribute, which Vue merges last, so it is a replacement rather than a\n         second name. Removing it does not fall back to nothing; it falls back\n         to Reka's English. -->\n    <TimeFieldInput\n      v-for=\"(item, index) in segments\"\n      :key=\"index\"\n      :part=\"item.part\"\n      :tabindex=\"segmentTabIndex(item.part, segments)\"\n      :aria-label=\"segmentLabel(item.part)\"\n      v-bind=\"{\n        ...segmentValueText(item.part, item.value),\n        ...(item.part === 'hour' ? hourAnnouncement(segments) : undefined),\n      }\"\n      :class=\"\n        cn(\n          'tabular rounded-sm px-0.5 outline-none',\n          'transition-colors duration-instant ease-out',\n          'focus:bg-primary-muted focus:text-primary-text',\n          'data-[placeholder]:text-muted-foreground',\n          item.part === 'literal' && 'text-muted-foreground',\n        )\n      \"\n      @focusin=\"focusedPart = item.part\"\n    >\n      {{ item.value }}\n    </TimeFieldInput>\n  </TimeFieldRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/time-picker/src/TimePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TimeSegmentLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Everything this control publishes to assistive technology: the four names\n * Reka UI would otherwise give the segments in English of its own accord.\n * There is nothing else — the icon is decoration and hidden, and the field\n * group takes its name from the caller or from a wrapping Field.\n *\n * An alias for the shared slice rather than a fifth interface. The same four\n * names are said by `DateTimePicker` and `DateTimeRangePicker`, they come from\n * one Reka implementation, and `src/lib/date-labels.ts` carries why they are\n * declared once. The alias exists so this control's `labels` prop reads like\n * every other one's; annotate with `LabelOverrides<TimePickerLabels>` rather\n * than with this, which is total.\n */\nexport type TimePickerLabels = TimeSegmentLabels;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { TimeFieldInput, TimeFieldRoot, type TimeValue } from \"reka-ui\";\nimport { Clock } from \"@lucide/vue\";\nimport { parseTime } from \"@internationalized/date\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { TIME_SEGMENT_LABELS, segmentAriaLabel, segmentAriaValueText } from \"@ecoma-io/loom-labels\";\n\n/**\n * TimePicker — a time of day, typed into a segmented field. Reach for it\n * wherever a clock time is a value: a meeting start, a reminder, opening hours.\n *\n * **There is no clock face and no dropdown, deliberately.** A clock dial is\n * slower than typing for every reader who can type, and unusable for several\n * who cannot; a 96-row list of quarter hours is worse again. The segmented\n * field already is the control — arrow keys change the segment under the\n * cursor, digits fill it and advance — so a panel would only be a second, worse\n * path to the same value. That is the one place this diverges from DatePicker,\n * where the calendar earns its panel by answering \"which Tuesday?\", a question\n * a time never has.\n *\n * **The model value is a plain `\"HH:mm\"` string in 24-hour time**, or\n * `\"HH:mm:ss\"` when `granularity` asks for seconds — the same boundary\n * DatePicker draws for `\"YYYY-MM-DD\"`, and drawn here for the same reason: a\n * host has a string from its API and should not have to learn a date library to\n * bind a time. `hourCycle` moves the *display* to 12-hour and never the value,\n * because conflating the two is how a 12-hour locale ends up storing `\"01:30\"`\n * for half past one in the afternoon.\n *\n * **A time is not a date.** There is no timezone here, no offset, and no `Date`\n * anywhere near the public surface: `\"09:00\"` is nine in the morning wherever\n * it is read, and the moment that turns into is the host's question, not this\n * component's. Pair it with a DatePicker when an instant is what is wanted.\n *\n * Unlike DatePicker there are no `min`/`max` bounds. A time of day has no\n * ordering that survives midnight — a night shift is \"not before 22:00\" *and*\n * \"not after 02:00\", two bounds that cross rather than fence — so a min/max\n * pair would quietly call 01:00 out of range for the exact case it was reached\n * for. A window like that belongs to the host, which knows which day each end\n * is on.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()` — the row's id, the id of its hint or error line, and\n * `required` / `invalid` / `disabled` / `readonly` / `name` — so `<Field\n * label=\"Starts at\" error=\"…\"><TimePicker /></Field>` needs no attributes at the\n * call site. Every prop below still wins over the row when it is set, in both\n * directions, which is why the four booleans default to `undefined` rather than\n * `false`. `readonly` and `disabled` are different states, so the field rests in\n * three appearances rather than two: read-only is a time on show — still a Tab\n * stop, still submitted, a lifted fill with the segments at full strength —\n * where disabled is unavailable and drained a step further, in fill, text\n * colour and border weight together.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen time as `\"HH:mm\"`, or `\"HH:mm:ss\"` at second granularity, in\n     * 24-hour time whatever the field displays. Unset, empty or unparseable\n     * means no time is chosen. The explicit `| undefined` is what lets\n     * `v-model` bind a ref that clears — the emitted value drops to `undefined`\n     * when the field is emptied, and a plain optional prop refuses to take it\n     * back.\n     */\n    modelValue?: string | undefined;\n    /**\n     * Whether the field reads as 12-hour with an AM/PM segment or as 24-hour.\n     * Display only: the value stays 24-hour either way. Unset follows `locale`,\n     * which is what a reader of that locale expects to see.\n     */\n    hourCycle?: 12 | 24;\n    /** How far down the field goes. `\"hour\"` and `\"minute\"` report `\"HH:mm\"`; `\"second\"` adds a seconds segment and reports `\"HH:mm:ss\"`. */\n    granularity?: \"hour\" | \"minute\" | \"second\";\n    /** BCP 47 tag driving the order of the segments, the separator between them, and the 12-or-24-hour default. */\n    locale?: string;\n    /** Unavailable: dims the control and takes the field out of the tab order. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the time without allowing an edit: the field stays a Tab stop, stays submitted, and is filled rather than dimmed. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Marks the field mandatory to assistive tech (`aria-required` on the segment group). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`, carried on the hidden input Reka submits the time through. Unset defers to a wrapping Field. */\n    name?: string;\n    /**\n     * Names for the four segments, as any subset of `TimePickerLabels` — the\n     * rest stay as the host's `provideLoomLabels` vocabulary left them, and then\n     * as Loom's English.\n     *\n     * Every one of them replaces a literal Reka writes itself, so this is not\n     * decoration: leave the vocabulary unset and the segments are named in\n     * English rather than named not at all.\n     */\n    labels?: LabelOverrides<TimePickerLabels>;\n  }>(),\n  {\n    granularity: \"minute\",\n    locale: \"en\",\n    // Not `false`, for any of the four — TextField.vue carries the full\n    // reasoning: `false` is a caller's decision that must beat the row, absent\n    // is a caller saying nothing, and only `undefined` survives to mean that\n    // past Vue's absent-Boolean-casts-to-false rule.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen time as `\"HH:mm\"` (or `\"HH:mm:ss\"`), or `undefined` once the field has been cleared. */\n  \"update:modelValue\": [value: string | undefined];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"timeSegments\", TIME_SEGMENT_LABELS, () => props.labels);\n\n// Read through the ref on every call rather than resolved into a lookup table\n// once: a table built in `setup` freezes the first language and every later\n// switch silently does nothing. The resolution rules themselves are the shared\n// helpers' — five hand-copied pairs of these two functions drifted once\n// already, so the branches live in `@ecoma-io/loom-labels` now and only the\n// refs stay here. `undefined` for the `literal` separators, which Reka renders\n// `aria-hidden` and which must stay unnamed.\nfunction segmentLabel(part: string): string | undefined {\n  return segmentAriaLabel({ time: text.value }, part);\n}\n\nfunction segmentValueText(part: string, value: string): { \"aria-valuetext\"?: string } {\n  return segmentAriaValueText({ time: text.value, part, value, locale: props.locale });\n}\n\n// One rendered node, so both halves of the fallthrough land on it — the split\n// exists only because `class` needs the Tailwind-aware merge and Vue's own\n// fallthrough would concatenate a caller's `h-11` after our `h-9` instead of\n// replacing it. That node is Reka's `role=\"group\"`, which is also where\n// `aria-label` belongs: a screen reader announces a group's name once on\n// entering it, rather than once per segment.\n//\n// It is also why `invalid` is announced with `aria-invalid` and nothing else.\n// DatePicker moves its `data-invalid` marker onto the anchor because the field\n// group already spells that attribute with Reka's own meaning; here there is no\n// second element to move it to, and an attribute Reka binds itself wins outright\n// — its template merges `$attrs` first and its own bindings after, so a\n// `data-invalid` passed in from out here is overwritten by Reka's own\n// `undefined` before it reaches the DOM. Setting it would look like it worked\n// and silently do nothing.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: fieldAttrs } = useSplitAttrs();\n\n/**\n * The time segments are `<div role=\"spinbutton\" tabindex=\"0\">`, and\n * `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and\n * `<textarea>` — so Reka's hidden input went inert inside a disabled group\n * while the segments a reader actually uses still typed. Measured in jsdom: an\n * empty hour segment became `12` on an arrow key.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are handed in as this caller's own values: a caller who\n// sets either still beats the row, and the row's description is merged into\n// theirs rather than replacing it. `field.attrs` then spreads onto\n// `TimeFieldRoot` **after** `fieldAttrs`, which is the node both were already\n// landing on.\n//\n// **Where each key ends up was checked rather than assumed**, given what the\n// note above says about attributes this node overwrites. The set Reka spells\n// itself is `role`, `aria-disabled`, `data-disabled`, `data-readonly`,\n// `data-invalid` and `dir`, and `field.attrs` spells none of them:\n// `aria-describedby`, `aria-required` and `aria-invalid` are undeclared and land\n// on the `role=\"group\"` as intended, while `id` and `name` are declared props\n// and land on the visually-hidden `<input>` the field submits through — which is\n// the element a `<label for>` can actually name, a `role=\"group\"` div not being\n// labelable.\n//\n// The `:aria-invalid` binding that used to sit on the root is gone with it: an\n// individual attribute written after a `v-bind` wins, so keeping one would\n// overwrite the resolved value with the raw prop.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: attrs[\"aria-labelledby\"] as string | undefined,\n  name: props.name,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // native input Reka renders inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// `aria-labelledby` for the group, resolved against the row — DatePicker's\n// reasoning, minus the old third arm of the guard: a caller's own labelledby\n// has to survive here, because the binding below beats the spread and an\n// `undefined` would strip it instead of deferring to it.\nconst groupLabelledBy = computed(() => (attrs[\"aria-label\"] ? undefined : field.labelledBy));\n\nfunction fromClock(value: string | undefined): TimeValue | undefined {\n  if (!value) return undefined;\n  try {\n    return parseTime(value);\n  } catch {\n    // Same contract as DatePicker: a half-typed or wrongly-shaped value is read\n    // as no time chosen. A component library cannot decide that a host's bad\n    // data is fatal.\n    return undefined;\n  }\n}\n\nfunction pad(value: number): string {\n  return String(value).padStart(2, \"0\");\n}\n\n// Written out rather than taken from `Time.toString()`, which always prints\n// seconds and appends a fractional part when the value carries one — so a\n// minute-granularity field would report `\"09:30:00\"`, and a value the host\n// parsed from `\"09:30:00.5\"` would round-trip a half second the field never\n// showed. The string that comes back is the string the segments are showing.\nfunction toClock(time: TimeValue): string {\n  const hhmm = `${pad(time.hour)}:${pad(time.minute)}`;\n  return props.granularity === \"second\" ? `${hhmm}:${pad(time.second)}` : hhmm;\n}\n\n// `optional()` rather than plain bindings: Reka reads an explicit `undefined`\n// `modelValue` as a value the host owns and is holding empty, which turns an\n// uncontrolled field into a permanently empty one, and an `hourCycle` of\n// `undefined` is how it is told to follow the locale. Dropping the keys says\n// what is true.\nconst rootValue = computed(() =>\n  optional({ modelValue: fromClock(props.modelValue), hourCycle: props.hourCycle }),\n);\n\nfunction onTimeChange(time: TimeValue | undefined) {\n  emit(\"update:modelValue\", time ? toClock(time) : undefined);\n}\n\n// The field is one Tab stop, not four. The reasoning, and the reason Reka's own\n// ArrowLeft/ArrowRight handling survives it untouched, is written out in\n// DatePicker — it moves focus with `focus()` directly, which ignores tabindex.\n// It matters more here: a 12-hour field with seconds is four segments, so\n// leaving Reka's default in place costs a keyboard reader four Tab presses to\n// cross one control.\nconst focusedPart = ref<string>();\n\nfunction segmentTabIndex(part: string, segments: readonly { part: string }[]): number | undefined {\n  // Read-only keeps every stop it had, unlike disabled: the time is on show and\n  // a reader still arrows across the segments to read it.\n  if (field.disabled || part === \"literal\") return undefined;\n  const editable = segments.filter((segment) => segment.part !== \"literal\");\n  // The remembered segment is dropped when a granularity or locale change takes\n  // it away — a field whose only tab stop is a seconds segment that no longer\n  // exists is a field nothing can reach.\n  const active =\n    focusedPart.value !== undefined &&\n    editable.some((segment) => segment.part === focusedPart.value)\n      ? focusedPart.value\n      : editable[0]?.part;\n  return part === active ? 0 : -1;\n}\n\n// Reka reads `hourCycle` once, when it builds its formatter, and seeds its\n// segment values from the granularity in the same breath — neither is watched.\n// Observed: a field showing 13:30 that is moved to a 12-hour cycle relabels\n// itself \"1:30 AM\", half a day wrong, because the AM/PM segment appears with\n// its initial value and nothing recomputes it from the hour. Widening the\n// granularity on an empty field is the same fault with a different symptom: the\n// new seconds segment arrives with no entry to read, so it renders without a\n// role at all.\n//\n// Both are structural changes — they add and remove segments — so keying the\n// field on them rebuilds it rather than patching a half-migrated one. `locale`\n// is deliberately not in the key: Reka does watch that, and rebuilding on it\n// would throw away focus mid-edit for a change it handles correctly.\nconst shape = computed(() => `${props.granularity}-${props.hourCycle}`);\n\n/**\n * Reka's hour segment publishes `aria-valuenow` and `aria-valuetext` straight\n * off the internal 24-hour value while publishing `aria-valuemin`/`max` as\n * 1–12, so half past one in the afternoon announces itself as \"13 PM\", out of\n * its own declared range. The displayed hour is the one the reader is being\n * asked about, so the announcement is rebuilt from what the segment actually\n * shows. Only under an explicit 12-hour cycle: left to the locale, Reka defers\n * to the formatter and the pair is already consistent.\n */\nfunction hourAnnouncement(\n  segments: readonly { part: string; value: string }[],\n): Record<string, string | number> | undefined {\n  if (props.hourCycle !== 12) return undefined;\n  const shown = Number(segments.find((segment) => segment.part === \"hour\")?.value);\n  const period = segments.find((segment) => segment.part === \"dayPeriod\")?.value;\n  // An unfilled hour reads as its placeholder rather than a number, and there is\n  // no number to announce for it. The empty case is not left to Reka's English\n  // \"Empty\" either — `segmentValueText` binds the vocabulary's word for it on\n  // the same element, and the two never collide: this returns a value only for\n  // a filled hour and that one only for an empty segment.\n  if (!Number.isInteger(shown) || period === undefined) return undefined;\n  return { \"aria-valuenow\": shown, \"aria-valuetext\": `${shown} ${period}` };\n}\n</script>\n\n<template>\n  <TimeFieldRoot\n    ref=\"root\"\n    :key=\"shape\"\n    v-slot=\"{ segments }\"\n    v-bind=\"{ ...rootValue, ...fieldAttrs, ...field.attrs }\"\n    :aria-labelledby=\"groupLabelledBy\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :class=\"\n      cn(\n        // The text input's own height scale, so a time sitting in a form row\n        // beside a text field lines up rather than nearly lining up. No gap:\n        // the colon between two segments is itself a segment, so spacing them\n        // apart writes the time as `09 : 30`.\n        'flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground',\n        'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n        // The box carries the ring and the focused segment below carries a fill\n        // instead of a second outline, exactly as DatePicker's field does — a\n        // ring drawn inside a ring reads as a rendering fault.\n        'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n        !field.invalid && 'focus-within:shadow-halo',\n        // Three resting appearances, and each is painted on this group rather\n        // than on the segments inside it: a per-segment fill leaves the colon\n        // between them on `background`, and the time comes out striped.\n        //\n        // Read-only lifts to `subtle` and keeps its focus ring and its\n        // full-strength segments — 13.46:1 over that fill — because a read-only\n        // time is a value on show, not an unavailable control. The rim stays\n        // `input`: the field is still a Tab stop and still submitted. Reka's own\n        // `data-readonly` on this node carries the same state to assistive tech,\n        // so nothing here rests on colour.\n        field.readonly && 'bg-subtle',\n        // Drained rather than faded, for the reason DatePicker and\n        // DateTimePicker both write out — this control was the one member of\n        // the family the sweep still caught. `opacity-50` took the segments\n        // down with the box: measured on the built site, the hour and the\n        // period read 3.08:1 and the colon between them 2.07:1, and those\n        // segments *are* the value. The fill drains one step past read-only,\n        // the muted text over it is 4.68:1, and the rim slackens from `input`\n        // to `border` — three channels, so the two states do not part on hue\n        // alone. Set on the group because no segment declares a resting colour\n        // of its own, so each inherits this one.\n        field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n        // Last of the rules that name a border colour: `cn()` resolves one by\n        // whichever class it saw last, so a field both in error and unavailable\n        // would otherwise lose its destructive rim to the disabled one.\n        field.invalid && 'border-destructive focus-within:outline-destructive',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onTimeChange\"\n  >\n    <!-- Leading, where DatePicker's calendar button is trailing: that trailing\n         slot is a button in every other member of this family, and a glyph\n         sitting in it that opens nothing would promise a panel this control\n         does not have. Decoration, so it is hidden from the accessibility\n         tree — the group's own name says what the field is. -->\n    <Clock aria-hidden=\"true\" class=\"mr-2 h-4 w-4 shrink-0 text-muted-foreground\" />\n\n    <!-- The `:aria-label` replaces the one Reka writes in English inside its\n         own render function. It reaches the DOM node as a fallthrough\n         attribute, which Vue merges last, so it is a replacement rather than a\n         second name. Removing it does not fall back to nothing; it falls back\n         to Reka's English. -->\n    <TimeFieldInput\n      v-for=\"(item, index) in segments\"\n      :key=\"index\"\n      :part=\"item.part\"\n      :tabindex=\"segmentTabIndex(item.part, segments)\"\n      :aria-label=\"segmentLabel(item.part)\"\n      v-bind=\"{\n        ...segmentValueText(item.part, item.value),\n        ...(item.part === 'hour' ? hourAnnouncement(segments) : undefined),\n      }\"\n      :class=\"\n        cn(\n          'tabular rounded-sm px-0.5 outline-none',\n          'transition-colors duration-instant ease-out',\n          'focus:bg-primary-muted focus:text-primary-text',\n          'data-[placeholder]:text-muted-foreground',\n          item.part === 'literal' && 'text-muted-foreground',\n        )\n      \"\n      @focusin=\"focusedPart = item.part\"\n    >\n      {{ item.value }}\n    </TimeFieldInput>\n  </TimeFieldRoot>\n</template>\n"],"mappings":"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"}

package/dist/packages/primitives/timeline/src/Timeline.js

@@ -0,0 +1,7 @@
+import Timeline_vue_vue_type_script_setup_true_lang_default, { TIMELINE_LABELS } from "./Timeline.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/timeline/src/Timeline.vue
+var Timeline_default = Timeline_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TIMELINE_LABELS, Timeline_default as default };
+
+//# sourceMappingURL=Timeline.js.map

package/dist/packages/primitives/timeline/src/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","names":[],"sources":["../../../../../packages/primitives/timeline/src/Timeline.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TimelineLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Timeline — a chronological spine: markers down a line, each carrying a\n * moment (title, description, timestamp) and where it sits relative to now.\n *\n * **Vertical is the only axis.** A horizontal timeline is a Stepper wearing\n * different clothes: ordered stages a reader moves through, which Stepper\n * already models with a state machine, reachability rules and keyboard\n * traversal. A timeline's moments are *records* the reader scans, and the\n * scan runs top-to-bottom at every viewport this library targets. If a\n * design reaches for horizontal, it is asking for Stepper.\n *\n * Statuses are explicit — the host owns the truth about what has happened —\n * and every item states its status in words beside the marker, because a\n * dot's colour alone is not a state.\n */\nexport const TIMELINE_LABELS: TimelineLabels = {\n  region: \"Timeline\",\n  complete: \"Completed\",\n  current: \"Current\",\n  upcoming: \"Upcoming\",\n};\n\n/** Where a moment sits relative to now. The host owns the truth. */\nexport type TimelineStatus = \"complete\" | \"current\" | \"upcoming\";\n</script>\n\n<script setup lang=\"ts\">\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\ndefineProps<{\n  /** Names the timeline when surrounding prose does not already say it. */\n  labels?: LabelOverrides<TimelineLabels>;\n}>();\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"timeline\", TIMELINE_LABELS);\n</script>\n\n<template>\n  <!-- An ordered list, because a timeline IS ordered. Items draw their own\n       connector stub; the last one's is retired here so the line stops where\n       the story does. -->\n  <!-- A div carrying explicit list roles rather than a styled ol: the docs\n       site's own unlayered `ol` rules beat every utility here (the failure\n       AvatarGroup recorded first), and explicit roles also survive engines\n       that drop list semantics once `list-style: none` lands. -->\n  <div\n    role=\"list\"\n    :aria-label=\"text.region\"\n    class=\"m-0 p-0 [&>*:last-child_.loom-timeline-line]:hidden\"\n  >\n    <!-- @slot The entries: one `TimelineItem` per moment, in order. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/timeline/src/Timeline.vue.d.ts

@@ -0,0 +1,37 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { TimelineLabels } from "../../../labels/src/index";
+/**
+ * Timeline — a chronological spine: markers down a line, each carrying a
+ * moment (title, description, timestamp) and where it sits relative to now.
+ *
+ * **Vertical is the only axis.** A horizontal timeline is a Stepper wearing
+ * different clothes: ordered stages a reader moves through, which Stepper
+ * already models with a state machine, reachability rules and keyboard
+ * traversal. A timeline's moments are *records* the reader scans, and the
+ * scan runs top-to-bottom at every viewport this library targets. If a
+ * design reaches for horizontal, it is asking for Stepper.
+ *
+ * Statuses are explicit — the host owns the truth about what has happened —
+ * and every item states its status in words beside the marker, because a
+ * dot's colour alone is not a state.
+ */
+export declare const TIMELINE_LABELS: TimelineLabels;
+/** Where a moment sits relative to now. The host owns the truth. */
+export type TimelineStatus = "complete" | "current" | "upcoming";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Names the timeline when surrounding prose does not already say it. */
+    labels?: LabelOverrides<TimelineLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Names the timeline when surrounding prose does not already say it. */
+    labels?: LabelOverrides<TimelineLabels>;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Timeline.vue.d.ts.map

package/dist/packages/primitives/timeline/src/Timeline.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,44 @@
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { createElementBlock, defineComponent, openBlock, renderSlot, unref } from "vue";
+//#region packages/primitives/timeline/src/Timeline.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+/**
+* Timeline — a chronological spine: markers down a line, each carrying a
+* moment (title, description, timestamp) and where it sits relative to now.
+*
+* **Vertical is the only axis.** A horizontal timeline is a Stepper wearing
+* different clothes: ordered stages a reader moves through, which Stepper
+* already models with a state machine, reachability rules and keyboard
+* traversal. A timeline's moments are *records* the reader scans, and the
+* scan runs top-to-bottom at every viewport this library targets. If a
+* design reaches for horizontal, it is asking for Stepper.
+*
+* Statuses are explicit — the host owns the truth about what has happened —
+* and every item states its status in words beside the marker, because a
+* dot's colour alone is not a state.
+*/
+var TIMELINE_LABELS = {
+	region: "Timeline",
+	complete: "Completed",
+	current: "Current",
+	upcoming: "Upcoming"
+};
+var Timeline_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Timeline",
+	props: { labels: {} },
+	setup(__props) {
+		const text = useLabels("timeline", TIMELINE_LABELS);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "list",
+				"aria-label": unref(text).region,
+				class: "m-0 p-0 [&>*:last-child_.loom-timeline-line]:hidden"
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TIMELINE_LABELS, Timeline_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Timeline.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/timeline/src/Timeline.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/timeline/src/Timeline.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TimelineLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Timeline — a chronological spine: markers down a line, each carrying a\n * moment (title, description, timestamp) and where it sits relative to now.\n *\n * **Vertical is the only axis.** A horizontal timeline is a Stepper wearing\n * different clothes: ordered stages a reader moves through, which Stepper\n * already models with a state machine, reachability rules and keyboard\n * traversal. A timeline's moments are *records* the reader scans, and the\n * scan runs top-to-bottom at every viewport this library targets. If a\n * design reaches for horizontal, it is asking for Stepper.\n *\n * Statuses are explicit — the host owns the truth about what has happened —\n * and every item states its status in words beside the marker, because a\n * dot's colour alone is not a state.\n */\nexport const TIMELINE_LABELS: TimelineLabels = {\n  region: \"Timeline\",\n  complete: \"Completed\",\n  current: \"Current\",\n  upcoming: \"Upcoming\",\n};\n\n/** Where a moment sits relative to now. The host owns the truth. */\nexport type TimelineStatus = \"complete\" | \"current\" | \"upcoming\";\n</script>\n\n<script setup lang=\"ts\">\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\ndefineProps<{\n  /** Names the timeline when surrounding prose does not already say it. */\n  labels?: LabelOverrides<TimelineLabels>;\n}>();\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"timeline\", TIMELINE_LABELS);\n</script>\n\n<template>\n  <!-- An ordered list, because a timeline IS ordered. Items draw their own\n       connector stub; the last one's is retired here so the line stops where\n       the story does. -->\n  <!-- A div carrying explicit list roles rather than a styled ol: the docs\n       site's own unlayered `ol` rules beat every utility here (the failure\n       AvatarGroup recorded first), and explicit roles also survive engines\n       that drop list semantics once `list-style: none` lands. -->\n  <div\n    role=\"list\"\n    :aria-label=\"text.region\"\n    class=\"m-0 p-0 [&>*:last-child_.loom-timeline-line]:hidden\"\n  >\n    <!-- @slot The entries: one `TimelineItem` per moment, in order. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,IAAa,kBAAkC;CAC7C,QAAQ;CACR,UAAU;CACV,SAAS;CACT,UAAU;AACZ;;;;;EAeA,MAAM,OAAO,UAAU,YAAY,eAAe;;GAWhD,OAAA,UAAA,GAAA,mBAOM,OAAA;IANJ,MAAK;IACJ,cAAY,MAAA,IAAA,CAAI,CAAC;IAClB,OAAM;GAGN,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA"}

package/dist/packages/primitives/timeline/src/TimelineItem.js

@@ -0,0 +1,7 @@
+import TimelineItem_vue_vue_type_script_setup_true_lang_default, { timelineMarkerVariants } from "./TimelineItem.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/timeline/src/TimelineItem.vue
+var TimelineItem_default = TimelineItem_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TimelineItem_default as default, timelineMarkerVariants };
+
+//# sourceMappingURL=TimelineItem.js.map

package/dist/packages/primitives/timeline/src/TimelineItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineItem.js","names":[],"sources":["../../../../../packages/primitives/timeline/src/TimelineItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The marker, per status. Complete fills with success and takes the check;\n * current fills with primary and wears a halo — emphasis without motion, so\n * reduced-motion readers lose nothing; upcoming is a hollow dot, present but\n * not yet lived.\n */\nexport const timelineMarkerVariants = cva(\n  \"relative z-raised flex h-6 w-6 shrink-0 items-center justify-center rounded-full border\",\n  {\n    variants: {\n      status: {\n        complete: \"border-success bg-success text-success-foreground\",\n        current: \"border-primary bg-primary-muted text-primary-text ring-4 ring-primary-muted\",\n        upcoming: \"border-border bg-background text-muted-foreground\",\n      },\n    },\n    defaultVariants: { status: \"upcoming\" as TimelineStatus },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check } from \"@lucide/vue\";\nimport { useLabels, type LabelOverrides, type TimelineLabels } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { TIMELINE_LABELS, type TimelineStatus } from \"./Timeline.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The moment's heading. */\n    title: string;\n    /** A line under the title. */\n    description?: string;\n    /** When it happened (or will). Rendered inside a real `<time>`. */\n    timestamp?: string;\n    /** Machine-readable timestamp for `<time datetime>`. */\n    datetime?: string;\n    /** Where the moment sits relative to now. The host owns the truth. */\n    status?: TimelineStatus;\n    /** Names what the item says on its own account, as any subset of `TimelineLabels`. */\n    labels?: LabelOverrides<TimelineLabels>;\n  }>(),\n  { status: \"upcoming\" },\n);\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"timeline\", TIMELINE_LABELS, () => props.labels);\n\nconst STATUS_WORD = {\n  complete: \"complete\",\n  current: \"current\",\n  upcoming: \"upcoming\",\n} as const;\nconst statusWord = computed(() => {\n  const bag = text.value;\n  return bag[STATUS_WORD[props.status]];\n});\n</script>\n\n<template>\n  <!-- pl-8 clears the marker column; the connector stub is drawn by this\n       item along the left edge of that gutter and retired by the wrapper for\n       the last entry, so the line stops where the story does. -->\n  <div\n    role=\"listitem\"\n    class=\"relative pb-8 pl-8 last:pb-0\"\n    :aria-current=\"status === 'current' ? 'step' : undefined\"\n  >\n    <!-- The spine sits under the marker column: left-3 is exactly the\n         h-6 marker's centre, so the line runs through every dot and retires\n         with the final entry. -->\n    <span\n      aria-hidden=\"true\"\n      class=\"loom-timeline-line absolute top-6 bottom-0 left-3 w-px -translate-x-1/2 bg-border\"\n    />\n\n    <span\n      aria-hidden=\"true\"\n      :class=\"cn(timelineMarkerVariants({ status }), 'absolute left-0 top-0')\"\n    >\n      <Check v-if=\"status === 'complete'\" class=\"h-3.5 w-3.5\" />\n    </span>\n\n    <div>\n      <div class=\"flex flex-wrap items-baseline gap-x-2\">\n        <p class=\"text-sm font-medium\">{{ title }}</p>\n        <time\n          v-if=\"timestamp || datetime\"\n          :datetime=\"datetime\"\n          class=\"text-small tabular text-muted-foreground\"\n          >{{ timestamp ?? datetime }}</time\n        >\n        <span class=\"sr-only\">{{ statusWord }}</span>\n      </div>\n      <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">{{ description }}</p>\n      <!-- @slot Anything beyond title/description/timestamp — a Badge, a link out. -->\n      <div v-if=\"$slots.default\" class=\"mt-2\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/timeline/src/TimelineItem.vue.d.ts

@@ -0,0 +1,50 @@
+import { type LabelOverrides, type TimelineLabels } from "../../../labels/src/index";
+import { type TimelineStatus } from "./Timeline.vue";
+/**
+ * The marker, per status. Complete fills with success and takes the check;
+ * current fills with primary and wears a halo — emphasis without motion, so
+ * reduced-motion readers lose nothing; upcoming is a hollow dot, present but
+ * not yet lived.
+ */
+export declare const timelineMarkerVariants: (props?: ({
+    status?: "complete" | "current" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The moment's heading. */
+    title: string;
+    /** A line under the title. */
+    description?: string;
+    /** When it happened (or will). Rendered inside a real `<time>`. */
+    timestamp?: string;
+    /** Machine-readable timestamp for `<time datetime>`. */
+    datetime?: string;
+    /** Where the moment sits relative to now. The host owns the truth. */
+    status?: TimelineStatus;
+    /** Names what the item says on its own account, as any subset of `TimelineLabels`. */
+    labels?: LabelOverrides<TimelineLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The moment's heading. */
+    title: string;
+    /** A line under the title. */
+    description?: string;
+    /** When it happened (or will). Rendered inside a real `<time>`. */
+    timestamp?: string;
+    /** Machine-readable timestamp for `<time datetime>`. */
+    datetime?: string;
+    /** Where the moment sits relative to now. The host owns the truth. */
+    status?: TimelineStatus;
+    /** Names what the item says on its own account, as any subset of `TimelineLabels`. */
+    labels?: LabelOverrides<TimelineLabels>;
+}> & Readonly<{}>, {
+    status: TimelineStatus;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TimelineItem.vue.d.ts.map

package/dist/packages/primitives/timeline/src/TimelineItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { TIMELINE_LABELS } from "./Timeline.vue_vue_type_script_setup_true_lang.js";
+import "./Timeline.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { Check } from "@lucide/vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/timeline/src/TimelineItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-current"];
+var _hoisted_2 = { class: "flex flex-wrap items-baseline gap-x-2" };
+var _hoisted_3 = { class: "text-sm font-medium" };
+var _hoisted_4 = ["datetime"];
+var _hoisted_5 = { class: "sr-only" };
+var _hoisted_6 = {
+	key: 0,
+	class: "mt-1 text-small text-muted-foreground"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "mt-2"
+};
+/**
+* The marker, per status. Complete fills with success and takes the check;
+* current fills with primary and wears a halo — emphasis without motion, so
+* reduced-motion readers lose nothing; upcoming is a hollow dot, present but
+* not yet lived.
+*/
+var timelineMarkerVariants = cva("relative z-raised flex h-6 w-6 shrink-0 items-center justify-center rounded-full border", {
+	variants: { status: {
+		complete: "border-success bg-success text-success-foreground",
+		current: "border-primary bg-primary-muted text-primary-text ring-4 ring-primary-muted",
+		upcoming: "border-border bg-background text-muted-foreground"
+	} },
+	defaultVariants: { status: "upcoming" }
+});
+var TimelineItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TimelineItem",
+	props: {
+		title: {},
+		description: {},
+		timestamp: {},
+		datetime: {},
+		status: { default: "upcoming" },
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("timeline", TIMELINE_LABELS, () => props.labels);
+		const STATUS_WORD = {
+			complete: "complete",
+			current: "current",
+			upcoming: "upcoming"
+		};
+		const statusWord = computed(() => {
+			return text.value[STATUS_WORD[props.status]];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "listitem",
+				class: "relative pb-8 pl-8 last:pb-0",
+				"aria-current": __props.status === "current" ? "step" : void 0
+			}, [
+				_cache[0] || (_cache[0] = createElementVNode("span", {
+					"aria-hidden": "true",
+					class: "loom-timeline-line absolute top-6 bottom-0 left-3 w-px -translate-x-1/2 bg-border"
+				}, null, -1)),
+				createElementVNode("span", {
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)(unref(timelineMarkerVariants)({ status: __props.status }), "absolute left-0 top-0"))
+				}, [__props.status === "complete" ? (openBlock(), createBlock(unref(Check), {
+					key: 0,
+					class: "h-3.5 w-3.5"
+				})) : createCommentVNode("", true)], 2),
+				createElementVNode("div", null, [
+					createElementVNode("div", _hoisted_2, [
+						createElementVNode("p", _hoisted_3, toDisplayString(__props.title), 1),
+						__props.timestamp || __props.datetime ? (openBlock(), createElementBlock("time", {
+							key: 0,
+							datetime: __props.datetime,
+							class: "text-small tabular text-muted-foreground"
+						}, toDisplayString(__props.timestamp ?? __props.datetime), 9, _hoisted_4)) : createCommentVNode("", true),
+						createElementVNode("span", _hoisted_5, toDisplayString(statusWord.value), 1)
+					]),
+					__props.description ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+					_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)
+				])
+			], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TimelineItem_vue_vue_type_script_setup_true_lang_default as default, timelineMarkerVariants };
+
+//# sourceMappingURL=TimelineItem.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/timeline/src/TimelineItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/primitives/timeline/src/TimelineItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The marker, per status. Complete fills with success and takes the check;\n * current fills with primary and wears a halo — emphasis without motion, so\n * reduced-motion readers lose nothing; upcoming is a hollow dot, present but\n * not yet lived.\n */\nexport const timelineMarkerVariants = cva(\n  \"relative z-raised flex h-6 w-6 shrink-0 items-center justify-center rounded-full border\",\n  {\n    variants: {\n      status: {\n        complete: \"border-success bg-success text-success-foreground\",\n        current: \"border-primary bg-primary-muted text-primary-text ring-4 ring-primary-muted\",\n        upcoming: \"border-border bg-background text-muted-foreground\",\n      },\n    },\n    defaultVariants: { status: \"upcoming\" as TimelineStatus },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check } from \"@lucide/vue\";\nimport { useLabels, type LabelOverrides, type TimelineLabels } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { TIMELINE_LABELS, type TimelineStatus } from \"./Timeline.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The moment's heading. */\n    title: string;\n    /** A line under the title. */\n    description?: string;\n    /** When it happened (or will). Rendered inside a real `<time>`. */\n    timestamp?: string;\n    /** Machine-readable timestamp for `<time datetime>`. */\n    datetime?: string;\n    /** Where the moment sits relative to now. The host owns the truth. */\n    status?: TimelineStatus;\n    /** Names what the item says on its own account, as any subset of `TimelineLabels`. */\n    labels?: LabelOverrides<TimelineLabels>;\n  }>(),\n  { status: \"upcoming\" },\n);\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"timeline\", TIMELINE_LABELS, () => props.labels);\n\nconst STATUS_WORD = {\n  complete: \"complete\",\n  current: \"current\",\n  upcoming: \"upcoming\",\n} as const;\nconst statusWord = computed(() => {\n  const bag = text.value;\n  return bag[STATUS_WORD[props.status]];\n});\n</script>\n\n<template>\n  <!-- pl-8 clears the marker column; the connector stub is drawn by this\n       item along the left edge of that gutter and retired by the wrapper for\n       the last entry, so the line stops where the story does. -->\n  <div\n    role=\"listitem\"\n    class=\"relative pb-8 pl-8 last:pb-0\"\n    :aria-current=\"status === 'current' ? 'step' : undefined\"\n  >\n    <!-- The spine sits under the marker column: left-3 is exactly the\n         h-6 marker's centre, so the line runs through every dot and retires\n         with the final entry. -->\n    <span\n      aria-hidden=\"true\"\n      class=\"loom-timeline-line absolute top-6 bottom-0 left-3 w-px -translate-x-1/2 bg-border\"\n    />\n\n    <span\n      aria-hidden=\"true\"\n      :class=\"cn(timelineMarkerVariants({ status }), 'absolute left-0 top-0')\"\n    >\n      <Check v-if=\"status === 'complete'\" class=\"h-3.5 w-3.5\" />\n    </span>\n\n    <div>\n      <div class=\"flex flex-wrap items-baseline gap-x-2\">\n        <p class=\"text-sm font-medium\">{{ title }}</p>\n        <time\n          v-if=\"timestamp || datetime\"\n          :datetime=\"datetime\"\n          class=\"text-small tabular text-muted-foreground\"\n          >{{ timestamp ?? datetime }}</time\n        >\n        <span class=\"sr-only\">{{ statusWord }}</span>\n      </div>\n      <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">{{ description }}</p>\n      <!-- @slot Anything beyond title/description/timestamp — a Badge, a link out. -->\n      <div v-if=\"$slots.default\" class=\"mt-2\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAa,yBAAyB,IACpC,2FACA;CACE,UAAU,EACR,QAAQ;EACN,UAAU;EACV,SAAS;EACT,UAAU;CACZ,EACF;CACA,iBAAiB,EAAE,QAAQ,WAA6B;AAC1D,CACF;;;;;;;;;;;;EAUA,MAAM,QAAQ;EAmBd,MAAM,OAAO,UAAU,YAAY,uBAAuB,MAAM,MAAM;EAEtE,MAAM,cAAc;GAClB,UAAU;GACV,SAAS;GACT,UAAU;EACZ;EACA,MAAM,aAAa,eAAe;GAEhC,OADY,KAAK,MACN,YAAY,MAAM;EAC/B,CAAC;;GAOC,OAAA,UAAA,GAAA,mBAqCM,OAAA;IApCJ,MAAK;IACL,OAAM;IACL,gBAAc,QAAA,WAAM,YAAA,SAA0B,KAAA;;IAK/C,OAAA,OAAA,OAAA,KAAA,mBAGE,QAAA;KAFA,eAAY;KACZ,OAAM;;IAGR,mBAKO,QAAA;KAJL,eAAY;KACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,sBAAA,CAAsB,CAAA,EAAA,QAAG,QAAA,OAAM,CAAA,GAAA,uBAAA,CAAA;IAE7B,GAAA,CAAA,QAAA,WAAM,cAAnB,UAAA,GAAA,YAA0D,MAAA,KAAA,GAAA;;KAAtB,OAAM;;IAG5C,mBAgBM,OAAA,MAAA;KAfJ,mBASM,OATN,YASM;MARJ,mBAA8C,KAA9C,YAA8C,gBAAZ,QAAA,KAAK,GAAA,CAAA;MAE/B,QAAA,aAAa,QAAA,YADrB,UAAA,GAAA,mBAKC,QAAA;;OAHE,UAAU,QAAA;OACX,OAAM;MACF,GAAA,gBAAA,QAAA,aAAa,QAAA,QAAQ,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;MAE3B,mBAA6C,QAA7C,YAA6C,gBAApB,WAAA,KAAU,GAAA,CAAA;;KAE5B,QAAA,eAAT,UAAA,GAAA,mBAAyF,KAAzF,YAAyF,gBAAlB,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEvEA,KAAAA,OAAO,WAAlB,UAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/packages/primitives/timeline/src/index.d.ts

@@ -0,0 +1,5 @@
+export { default, TIMELINE_LABELS } from "./Timeline.vue";
+export { default as TimelineItem, timelineMarkerVariants } from "./TimelineItem.vue";
+export type { TimelineLabels } from "../../../labels/src/index";
+export type { TimelineStatus } from "./Timeline.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/timeline/src/index.js

@@ -0,0 +1,5 @@
+import { TIMELINE_LABELS } from "./Timeline.vue_vue_type_script_setup_true_lang.js";
+import Timeline_default from "./Timeline.js";
+import "./TimelineItem.vue_vue_type_script_setup_true_lang.js";
+import TimelineItem_default from "./TimelineItem.js";
+export { TIMELINE_LABELS, TimelineItem_default as TimelineItem, Timeline_default as default };

package/dist/packages/primitives/toast/src/Toast.vue.d.ts

@@ -1,6 +1,6 @@
-import { type LabelOverrides, type ToastLabels } from "@ecoma-io/loom-labels";
+import { type LabelOverrides, type ToastLabels } from "../../../labels/src/index";
 export type ToastVariant = "info" | "success" | "warning" | "destructive" | "accent";
-export type { ToastLabels } from "@ecoma-io/loom-labels";
+export type { ToastLabels } from "../../../labels/src/index";
 export { TOAST_LABELS } from "./ToastItem.vue";
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/packages/primitives/toast/src/ToastItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastItem.js","names":[],"sources":["../../../../../packages/primitives/toast/src/ToastItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToastLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const TOAST_LABELS: ToastLabels = {\n  close: \"Close\",\n  announce: \"Notification\",\n  region: ({ hotkey }) => `Notifications (${hotkey})`,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose } from \"reka-ui\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { Info, CircleCheck, TriangleAlert, CircleX, Sparkles, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport type { ToastVariant } from \"./Toast.vue\";\n\n/**\n * ToastItem — one toast card (ToastRoot + Loom treatment), INTERNAL to\n * the design system. It must live inside a `ToastProvider` whose\n * `ToastViewport` it teleports into: `Toast` bundles that pair for the\n * standalone case. Not exported from the barrel — hosts use `Toast`.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Controls visibility; pair with `v-model:open`. Omit to let the toast own its own open state. */\n    open?: boolean | undefined;\n    /** The toast's headline — always shown. */\n    title: string;\n    /** An optional second line of detail below the title. */\n    description?: string;\n    /** Selects the accent icon and colour. */\n    variant?: ToastVariant;\n    /** ms before auto-dismiss; the Reka default pauses on hover/focus. */\n    duration?: number;\n    /** Shows the ✕ close button. */\n    closable?: boolean;\n    /** Renders a single inline action button; emits `action` when pressed. */\n    actionLabel?: string;\n    /** Names for what the card says on its own account, as any subset of `ToastLabels`. */\n    labels?: LabelOverrides<ToastLabels>;\n  }>(),\n  {\n    // See Toast.vue: `undefined` is the uncontrolled state, and only an\n    // explicit default keeps it reachable past Vue's Boolean casting.\n    open: undefined,\n    variant: \"info\",\n    duration: 5000,\n    closable: true,\n  },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean]; action: [] }>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"toast\", TOAST_LABELS, () => props.labels);\n\n// `satisfies` binds this map to ToastVariant so a variant added to the type\n// without a matching entry here fails at compile time (Button's own idiom).\nconst toastAccents = {\n  info: { icon: Info, color: \"text-info-text\" },\n  success: { icon: CircleCheck, color: \"text-success-text\" },\n  warning: { icon: TriangleAlert, color: \"text-warning\" },\n  destructive: { icon: CircleX, color: \"text-destructive-text\" },\n  accent: { icon: Sparkles, color: \"text-primary-text\" },\n} satisfies Record<ToastVariant, { icon: typeof Info; color: string }>;\n\nconst accent = computed(() => toastAccents[props.variant]);\n</script>\n\n<template>\n  <!-- The slide-in animation rides this inner card, never ToastRoot: Reka\n       drives ToastRoot's own transform for the swipe-to-dismiss gesture, so a\n       filled entrance transform there would freeze the swipe. ToastRoot itself\n       carries no animation, so Reka Presence unmounts it immediately on close. -->\n  <ToastRoot\n    v-bind=\"optional({ open })\"\n    :duration=\"duration\"\n    class=\"outline-none\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <div\n      :class=\"\n        cn(\n          'relative flex animate-toast-in items-start gap-3 rounded-md border border-border bg-popover p-3 pr-8 text-popover-foreground shadow-lg',\n          // Accent variant: a highlighted border to draw attention to the\n          // toast's distinctiveness from the standard variants.\n          variant === 'accent' && 'border-primary/40',\n        )\n      \"\n    >\n      <component\n        :is=\"accent.icon\"\n        :class=\"cn('mt-0.5 h-4 w-4 shrink-0', accent.color)\"\n        aria-hidden=\"true\"\n      />\n      <div class=\"min-w-0 flex-1\">\n        <ToastTitle class=\"text-sm font-medium\">{{ title }}</ToastTitle>\n        <ToastDescription v-if=\"description\" class=\"mt-0.5 text-xs text-muted-foreground\">\n          {{ description }}\n        </ToastDescription>\n      </div>\n\n      <ToastAction v-if=\"actionLabel\" :alt-text=\"actionLabel\" as-child @click=\"$emit('action')\">\n        <button\n          type=\"button\"\n          class=\"shrink-0 rounded-sm px-2 py-1 text-xs font-medium text-primary-text transition-colors duration-fast ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          {{ actionLabel }}\n        </button>\n      </ToastAction>\n\n      <ToastClose\n        v-if=\"closable\"\n        :aria-label=\"text.close\"\n        class=\"absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n      >\n        <X class=\"h-3.5 w-3.5\" />\n      </ToastClose>\n    </div>\n  </ToastRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ToastItem.js","names":[],"sources":["../../../../../packages/primitives/toast/src/ToastItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToastLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const TOAST_LABELS: ToastLabels = {\n  close: \"Close\",\n  announce: \"Notification\",\n  region: ({ hotkey }) => `Notifications (${hotkey})`,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose } from \"reka-ui\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { Info, CircleCheck, TriangleAlert, CircleX, Sparkles, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport type { ToastVariant } from \"./Toast.vue\";\n\n/**\n * ToastItem — one toast card (ToastRoot + Loom treatment), INTERNAL to\n * the design system. It must live inside a `ToastProvider` whose\n * `ToastViewport` it teleports into: `Toast` bundles that pair for the\n * standalone case. Not exported from the barrel — hosts use `Toast`.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Controls visibility; pair with `v-model:open`. Omit to let the toast own its own open state. */\n    open?: boolean | undefined;\n    /** The toast's headline — always shown. */\n    title: string;\n    /** An optional second line of detail below the title. */\n    description?: string;\n    /** Selects the accent icon and colour. */\n    variant?: ToastVariant;\n    /** ms before auto-dismiss; the Reka default pauses on hover/focus. */\n    duration?: number;\n    /** Shows the ✕ close button. */\n    closable?: boolean;\n    /** Renders a single inline action button; emits `action` when pressed. */\n    actionLabel?: string;\n    /** Names for what the card says on its own account, as any subset of `ToastLabels`. */\n    labels?: LabelOverrides<ToastLabels>;\n  }>(),\n  {\n    // See Toast.vue: `undefined` is the uncontrolled state, and only an\n    // explicit default keeps it reachable past Vue's Boolean casting.\n    open: undefined,\n    variant: \"info\",\n    duration: 5000,\n    closable: true,\n  },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean]; action: [] }>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"toast\", TOAST_LABELS, () => props.labels);\n\n// `satisfies` binds this map to ToastVariant so a variant added to the type\n// without a matching entry here fails at compile time (Button's own idiom).\nconst toastAccents = {\n  info: { icon: Info, color: \"text-info-text\" },\n  success: { icon: CircleCheck, color: \"text-success-text\" },\n  // `-text` like its four siblings. The bare `warning` hue is a fill colour —\n  // as text it fails on the dark theme, and the functional `-text` tokens are\n  // the ones measured legible on every surface (theme.css carries the ratios).\n  warning: { icon: TriangleAlert, color: \"text-warning-text\" },\n  destructive: { icon: CircleX, color: \"text-destructive-text\" },\n  accent: { icon: Sparkles, color: \"text-primary-text\" },\n} satisfies Record<ToastVariant, { icon: typeof Info; color: string }>;\n\nconst accent = computed(() => toastAccents[props.variant]);\n\n// Severity alone decides how the toast interrupts (issue #91): a destructive\n// report announced politely can be swallowed by whatever the screen reader is\n// already saying — exactly the messages that must not be missed. The knob is\n// Reka's own `type`: it hard-wires the hidden announce region's `role` to\n// `alert` and picks that region's politeness from this prop — `foreground`\n// announces `aria-live=\"assertive\"`, `background` politely. Destructive\n// routes foreground; every other severity stays polite, so an ordinary\n// notification never interrupts. Deliberately no prop of Loom's own: the\n// variant the card already carries *is* the severity, and a second way to set\n// it would only let the two disagree.\nconst announceType = computed<\"foreground\" | \"background\">(() =>\n  props.variant === \"destructive\" ? \"foreground\" : \"background\",\n);\n</script>\n\n<template>\n  <!-- Entrance and exit deliberately do not share an element, and the split is\n       forced by Reka rather than taste. The swipe gesture marks ToastRoot\n       itself (data-swipe plus --reka-toast-swipe-* custom properties), so the\n       root's transform stays reserved and the entrance rides the inner card.\n       The exit cannot ride along: Presence decides an element's fate by\n       reading the computed animation-name of the node it mounted — never a\n       descendant's — and by waiting for an animationend whose target is that\n       same node (usePresence.js). A toast-out confined to the inner card would\n       leave the root's own name `none` and be unmounted before its first\n       frame; on ToastRoot it genuinely plays. -->\n  <ToastRoot\n    v-bind=\"optional({ open })\"\n    :type=\"announceType\"\n    :duration=\"duration\"\n    class=\"outline-none data-[state=closed]:animate-toast-out\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <div\n      :class=\"\n        cn(\n          'relative flex animate-toast-in items-start gap-3 rounded-md border border-border bg-popover p-3 pr-8 text-popover-foreground shadow-lg',\n          // Accent variant: a highlighted border to draw attention to the\n          // toast's distinctiveness from the standard variants.\n          variant === 'accent' && 'border-primary/40',\n        )\n      \"\n    >\n      <component\n        :is=\"accent.icon\"\n        :class=\"cn('mt-0.5 h-4 w-4 shrink-0', accent.color)\"\n        aria-hidden=\"true\"\n      />\n      <div class=\"min-w-0 flex-1\">\n        <ToastTitle class=\"text-sm font-medium\">{{ title }}</ToastTitle>\n        <ToastDescription v-if=\"description\" class=\"mt-0.5 text-xs text-muted-foreground\">\n          {{ description }}\n        </ToastDescription>\n      </div>\n\n      <ToastAction v-if=\"actionLabel\" :alt-text=\"actionLabel\" as-child @click=\"$emit('action')\">\n        <button\n          type=\"button\"\n          class=\"shrink-0 rounded-sm px-2 py-1 text-xs font-medium text-primary-text transition-colors duration-fast ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          {{ actionLabel }}\n        </button>\n      </ToastAction>\n\n      <ToastClose\n        v-if=\"closable\"\n        :aria-label=\"text.close\"\n        class=\"absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n      >\n        <X class=\"h-3.5 w-3.5\" />\n      </ToastClose>\n    </div>\n  </ToastRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/toast/src/ToastItem.vue.d.ts

@@ -1,6 +1,6 @@
-import { type LabelOverrides } from "@ecoma-io/loom-labels";
+import { type LabelOverrides } from "../../../labels/src/index";
 import type { ToastVariant } from "./Toast.vue";
-import type { ToastLabels } from "@ecoma-io/loom-labels";
+import type { ToastLabels } from "../../../labels/src/index";
 /**
 
 /**

package/dist/packages/primitives/toast/src/ToastItem.vue_vue_type_script_setup_true_lang.js

@@ -56,7 +56,7 @@ var ToastItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			},
 			warning: {
 				icon: TriangleAlert,
-				color: "text-warning"
+				color: "text-warning-text"
 			},
 			destructive: {
 				icon: CircleX,
@@ -68,10 +68,12 @@ var ToastItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}
 		};
 		const accent = computed(() => toastAccents[props.variant]);
+		const announceType = computed(() => props.variant === "destructive" ? "foreground" : "background");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ToastRoot), mergeProps(unref(optional)({ open: __props.open }), {
+				type: announceType.value,
 				duration: __props.duration,
-				class: "outline-none",
+				class: "outline-none data-[state=closed]:animate-toast-out",
 				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:open", $event))
 			}), {
 				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cn)("relative flex animate-toast-in items-start gap-3 rounded-md border border-border bg-popover p-3 pr-8 text-popover-foreground shadow-lg", __props.variant === "accent" && "border-primary/40")) }, [
@@ -108,7 +110,7 @@ var ToastItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					}, 8, ["aria-label"])) : createCommentVNode("", true)
 				], 2)]),
 				_: 1
-			}, 16, ["duration"]);
+			}, 16, ["type", "duration"]);
 		};
 	}
 });