@ecoma-io/loom 0.2.0 → 0.3.0

package/dist/packages/primitives/popover/src/Popover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,60 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import "../../../core/src/index.js";
+import { createBlock, createCommentVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui";
+//#region packages/primitives/popover/src/Popover.vue?vue&type=script&setup=true&lang.ts
+var Popover_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Popover",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		side: { default: "bottom" },
+		align: { default: "center" },
+		sideOffset: { default: 6 },
+		arrow: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["update:open"],
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopoverRoot), mergeProps(unref(optional)({ open: __props.open }), { "onUpdate:open": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:open", $event)) }), {
+				default: withCtx(() => [createVNode(unref(PopoverTrigger), { "as-child": "" }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger")]),
+					_: 3
+				}), createVNode(unref(PopoverPortal), null, {
+					default: withCtx(() => [createVNode(unref(PopoverContent), {
+						side: __props.side,
+						align: __props.align,
+						"side-offset": __props.sideOffset,
+						class: normalizeClass(unref(cn)("z-50 min-w-[12rem] max-w-[min(90vw,22rem)] rounded-md border border-border bg-popover p-3 text-sm text-popover-foreground shadow-md outline-none", "data-[state=open]:animate-scale-in")),
+						style: { "transform-origin": "var(--reka-popper-transform-origin)" }
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default"), __props.arrow ? (openBlock(), createBlock(unref(PopoverArrow), {
+							key: 0,
+							class: "fill-popover",
+							width: 12,
+							height: 6
+						})) : createCommentVNode("", true)]),
+						_: 3
+					}, 8, [
+						"side",
+						"align",
+						"side-offset",
+						"class"
+					])]),
+					_: 3
+				})]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { Popover_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Popover.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/popover/src/Popover.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/popover/src/Popover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the panel prefers. It is a preference and not a\n * guarantee: Reka flips the panel to the opposite edge when it would collide\n * with the viewport, which is why a caller sets the side it *wants* rather\n * than the side it will get.\n *\n * The members mirror Reka's own `Side`. Nothing enforces that in this\n * declaration — the template binding does: give this union a member Reka does\n * not accept and `:side=\"side\"` stops type-checking. Declaring it here rather\n * than aliasing `PopoverContentProps[\"side\"]` is what puts the four values in\n * the generated props table, because the documentation reads syntax and an\n * indexed access type has none to read.\n */\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/** Where the panel sits along that edge. */\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n</script>\n\n<script setup lang=\"ts\">\nimport { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent, PopoverArrow } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Popover — a floating panel anchored to a trigger, carrying secondary content\n * the user opts into: a filter set, a colour picker, a details card.\n *\n * The escape contract, which is the whole reason to reach for an overlay\n * primitive rather than an absolutely positioned div: opening moves focus into\n * the panel, Esc and an outside click both close it, closing returns focus to\n * the trigger, and the page behind keeps scrolling because a popover is not\n * modal. Focus is *not* trapped — Tab leaves the panel, which is correct for\n * content the user can walk past. `Dialog` is the one that traps.\n *\n * Reach for `DropdownMenu` when the panel is a list of commands, `Tooltip` for\n * a hint that must not take focus at all, and `Dialog` when the task has to\n * block the rest of the UI.\n */\nwithDefaults(\n  defineProps<{\n    /** Drive the panel from the host with `v-model:open`; omit it and the popover owns its own state. */\n    open?: boolean | undefined;\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: PopoverSide;\n    /** Where the panel sits along that edge — `start` keeps its leading edge flush with the trigger's. */\n    align?: PopoverAlign;\n    /** Gap in pixels between the trigger and the panel. */\n    sideOffset?: number;\n    /** Draw the pointer notch. Turn it off where the panel reads better flush against its trigger. */\n    arrow?: boolean;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  { open: undefined, side: \"bottom\", align: \"center\", sideOffset: 6, arrow: true },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the panel. Rendered `as-child`, so the\n         caller's own element *is* the trigger and no wrapper swallows its\n         accessible name. -->\n    <PopoverTrigger as-child>\n      <slot name=\"trigger\" />\n    </PopoverTrigger>\n\n    <PopoverPortal>\n      <PopoverContent\n        :side=\"side\"\n        :align=\"align\"\n        :side-offset=\"sideOffset\"\n        :class=\"\n          cn(\n            'z-50 min-w-[12rem] max-w-[min(90vw,22rem)] rounded-md border border-border bg-popover p-3 text-sm text-popover-foreground shadow-md outline-none',\n            // Scoped to the open state, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — so an\n            // unconditional animation class strands an invisible panel over the\n            // page, swallowing clicks. Scoped, the closed element computes\n            // `animation-name: none` and Presence takes its immediate-unmount\n            // branch instead. The origin below is what makes that scale grow\n            // out of the trigger rather than out of the panel's own centre.\n            'data-[state=open]:animate-scale-in',\n          )\n        \"\n        style=\"transform-origin: var(--reka-popper-transform-origin)\"\n      >\n        <!-- @slot The panel body. -->\n        <slot />\n        <PopoverArrow v-if=\"arrow\" class=\"fill-popover\" :width=\"12\" :height=\"6\" />\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;GAgEE,OAAA,UAAA,GAAA,YAkCc,MAAA,WAAA,GAlCd,WAAqB,MAkCP,QAAA,CAlCe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;IAIhF,SAAA,cAEiB,CAFjB,YAEiB,MAAA,cAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;KACtB,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGzB,CAAA,GAAA,YAyBgB,MAAA,aAAA,GAAA,MAAA;KAxBd,SAAA,cAuBiB,CAvBjB,YAuBiB,MAAA,cAAA,GAAA;MAtBd,MAAM,QAAA;MACN,OAAO,QAAA;MACP,eAAa,QAAA;MACb,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,oJAAA,oCAAA,CAAA;MAcrB,OAAA,EAAA,oBAAA,sCAAA;;MAGA,SAAA,cAAQ,CAAR,WAAQ,KAAA,QAAA,SAAA,GACY,QAAA,SAApB,UAAA,GAAA,YAA0E,MAAA,YAAA,GAAA;;OAA/C,OAAM;OAAgB,OAAO;OAAK,QAAQ"}

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

@@ -0,0 +1,3 @@
+export { default } from "./Popover.vue";
+export type { PopoverSide, PopoverAlign } from "./Popover.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/popover/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/popover/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,2 @@
+import Popover_default from "./Popover.js";
+export { Popover_default as default };

package/dist/packages/primitives/progress/src/Progress.js

@@ -0,0 +1,7 @@
+import Progress_vue_vue_type_script_setup_true_lang_default, { PROGRESS_LABELS, progressVariants } from "./Progress.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/progress/src/Progress.vue
+var Progress_default = Progress_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { PROGRESS_LABELS, Progress_default as default, progressVariants };
+
+//# sourceMappingURL=Progress.js.map

package/dist/packages/primitives/progress/src/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":[],"sources":["../../../../../packages/primitives/progress/src/Progress.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ProgressLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\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 PROGRESS_LABELS: ProgressLabels = {\n  value: ({ value, max }) => `${String(Math.round((value / max) * 100))}%`,\n  indeterminate: \"—\",\n};\n\n/**\n * The track's thickness. Deliberately *not* the shared control-height scale a\n * Select or a TextField uses: a bar is a stroke laid under a heading or inside\n * a table row, never a control a person clicks into, so lining it up with a\n * 36px input would only make it a slab. `md` is the thickness every caller got\n * before this prop existed and stays the default for exactly that reason.\n */\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport const progressVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    } satisfies Record<ProgressSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot, ProgressIndicator } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Progress — determinate progress bar for a task whose extent as a percentage\n * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the\n * *indeterminate* state — an empty track, since there is no percentage yet to\n * paint. For a wait of unknown duration with no percentage at all, use\n * Spinner instead of guessing a Progress value. For the same number drawn as\n * a ring — a dashboard tile, a quota, a score where the circle is the visual\n * — use RadialProgress, which mirrors this contract exactly.\n *\n * Built on Reka UI's Progress: role=\"progressbar\" + aria-valuenow/min/max set\n * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto\n * ProgressRoot (fallthrough overrides Reka's own generated \"`NN%`\" label) so\n * the accessible name describes *what* is loading, not just how much.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** Track thickness. Its own scale, not the control-height scale — a bar is a stroke, not a form control. */\n    size?: ProgressSize;\n    /** Print the rounded percentage as text beside the track. While indeterminate it prints an em dash, never a number. */\n    showValue?: boolean;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n    /**\n     * How the readout is written, as any subset of `ProgressLabels` — the rest\n     * stay as the host's `provideLoomLabels` vocabulary left them, and then as\n     * Loom's English.\n     *\n     * The per-instance case is a bar counting something a percentage is the\n     * wrong reading of: `value: ({ value, max }) => \\`Step ${value} of ${max}\\``.\n     */\n    labels?: LabelOverrides<ProgressLabels>;\n  }>(),\n  {\n    max: 100,\n    size: \"md\",\n    showValue: false,\n  },\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(\"progress\", PROGRESS_LABELS, () => props.labels);\n\n/** The readout tracks the track: a 1px bar with 14px digits beside it is not one object. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} satisfies Record<ProgressSize, string>;\n\n// `showValue` changes which node is outermost, so fallthrough can no longer be\n// left to Vue: `class` goes to whatever the caller sees as the component's box\n// — the flex row when there is a readout, the track itself when the track is\n// all there is — and everything else (aria-describedby, data-testid) goes to\n// ProgressRoot, which is the element carrying role=\"progressbar\" and therefore\n// the one those attributes are describing.\n//\n// The two branches are written out rather than always wrapping the track in a\n// row, because a bare Progress has to keep the exact box it had before\n// `showValue` existed — a wrapper, even an empty one, changes how it sits in\n// a flex or grid parent.\n//\n// Nothing may sit beside those two branches at the top level of the template,\n// comments included: a second root node turns the component into a fragment,\n// and the attributes routed by hand above then have nowhere single to land.\n//\n// Routing `class` through `cn()` also settles a fight that used to be decided\n// by stylesheet order: Vue's own fallthrough merge concatenates, so a caller's\n// `bg-primary` sat alongside the track's `bg-muted` rather than replacing it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * The value the bar itself is given, clamped into [0, max]; null while\n * indeterminate. The clamp has to happen here rather than only on the way to\n * the transform below: `aria-valuenow` is generated from whatever ProgressRoot\n * receives, so handing it the raw prop announces a number outside the range\n * `aria-valuemin`/`aria-valuemax` declare — \"150 percent\" read out over a bar\n * painted at 100.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\n/**\n * Everything ProgressRoot is given in both branches of the template. `rest`\n * lands last so a caller passing a bare `aria-label` attribute still wins over\n * the prop, which is the precedence Vue's own fallthrough gave before this\n * component took the attributes over by hand.\n */\nconst rootAttrs = computed(() => ({\n  modelValue: value.value,\n  max: props.max,\n  \"aria-label\": props.ariaLabel,\n  \"aria-labelledby\": props.ariaLabelledby,\n  ...rest.value,\n}));\n\n// Determinate: a full-width bar slid left by the remaining percentage\n// (transform eased over --duration-slow). Indeterminate: a short segment\n// sweeping the track on a loop, since there is no percentage to paint.\n// Completion beat: at 100% the fill turns success (Loom law — a\n// finished piece of work reads as done at a glance), eased in over the same\n// --duration-slow lane via the background transition.\nconst indicatorClass = computed(() =>\n  cn(\n    \"h-full\",\n    pct.value === 100 ? \"bg-success\" : \"bg-primary\",\n    pct.value === null && \"w-1/3 animate-progress-indeterminate rounded-full\",\n  ),\n);\n\nconst indicatorStyle = computed(() =>\n  pct.value === null\n    ? undefined\n    : {\n        transition:\n          \"transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)\",\n        transform: `translateX(-${100 - pct.value}%)`,\n      },\n);\n\n/**\n * An indeterminate bar has no percentage, so the readout prints the placeholder\n * rather than the `0%` a naive `pct ?? 0` would produce — \"we do not know yet\"\n * and \"none of it is done\" are different facts, and only one of them is true.\n *\n * The determinate branch hands over `value` and `max` rather than the\n * percentage it already computed for the transform: rounding, the position of\n * the per-cent sign and the shape of the digits are all the host's, and `pct`\n * is a division this component happens to need for the paint.\n */\nconst readout = computed(() =>\n  value.value === null\n    ? text.value.indeterminate\n    : text.value.value({ value: value.value, max: props.max }),\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    v-if=\"!showValue\"\n    v-bind=\"rootAttrs\"\n    :class=\"cn(progressVariants({ size }), attrs.class as string)\"\n  >\n    <ProgressIndicator :class=\"indicatorClass\" :style=\"indicatorStyle\" />\n  </ProgressRoot>\n\n  <div v-else :class=\"cn('flex w-full items-center gap-3', attrs.class as string)\">\n    <ProgressRoot\n      v-bind=\"rootAttrs\"\n      :class=\"cn(progressVariants({ size }), 'w-auto min-w-0 flex-1')\"\n    >\n      <ProgressIndicator :class=\"indicatorClass\" :style=\"indicatorStyle\" />\n    </ProgressRoot>\n    <!-- Hidden from assistive tech: the progressbar already announces this\n         number through `aria-valuenow`, and a visible copy beside it is read\n         out a second time as loose text. Fixed width so the track does not\n         resize itself every time the digit count changes. -->\n    <span\n      aria-hidden=\"true\"\n      :class=\"cn('tabular w-10 shrink-0 text-right text-muted-foreground', VALUE_TEXT[size])\"\n      >{{ readout }}</span\n    >\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/progress/src/Progress.vue.d.ts

@@ -0,0 +1,74 @@
+import { type LabelOverrides } from "@ecoma-io/loom-labels";
+import type { ProgressLabels } from "@ecoma-io/loom-labels";
+/**
+
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it, and
+ * exported so a host can build a partial vocabulary against the real thing.
+ */
+export declare const PROGRESS_LABELS: ProgressLabels;
+/**
+ * The track's thickness. Deliberately *not* the shared control-height scale a
+ * Select or a TextField uses: a bar is a stroke laid under a heading or inside
+ * a table row, never a control a person clicks into, so lining it up with a
+ * 36px input would only make it a slab. `md` is the thickness every caller got
+ * before this prop existed and stays the default for exactly that reason.
+ */
+export type ProgressSize = "sm" | "md" | "lg";
+export declare const progressVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */
+    modelValue?: number | null;
+    /** The value that reads as 100% complete. */
+    max?: number;
+    /** Track thickness. Its own scale, not the control-height scale — a bar is a stroke, not a form control. */
+    size?: ProgressSize;
+    /** Print the rounded percentage as text beside the track. While indeterminate it prints an em dash, never a number. */
+    showValue?: boolean;
+    /** Accessible name describing the task, overriding Reka's default `NN%` label. */
+    ariaLabel?: string;
+    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */
+    ariaLabelledby?: string;
+    /**
+     * How the readout is written, as any subset of `ProgressLabels` — the rest
+     * stay as the host's `provideLoomLabels` vocabulary left them, and then as
+     * Loom's English.
+     *
+     * The per-instance case is a bar counting something a percentage is the
+     * wrong reading of: `value: ({ value, max }) => \`Step ${value} of ${max}\``.
+     */
+    labels?: LabelOverrides<ProgressLabels>;
+}, {
+    pct: import("vue").ComputedRef<number | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */
+    modelValue?: number | null;
+    /** The value that reads as 100% complete. */
+    max?: number;
+    /** Track thickness. Its own scale, not the control-height scale — a bar is a stroke, not a form control. */
+    size?: ProgressSize;
+    /** Print the rounded percentage as text beside the track. While indeterminate it prints an em dash, never a number. */
+    showValue?: boolean;
+    /** Accessible name describing the task, overriding Reka's default `NN%` label. */
+    ariaLabel?: string;
+    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */
+    ariaLabelledby?: string;
+    /**
+     * How the readout is written, as any subset of `ProgressLabels` — the rest
+     * stay as the host's `provideLoomLabels` vocabulary left them, and then as
+     * Loom's English.
+     *
+     * The per-instance case is a bar counting something a percentage is the
+     * wrong reading of: `value: ({ value, max }) => \`Step ${value} of ${max}\``.
+     */
+    labels?: LabelOverrides<ProgressLabels>;
+}> & Readonly<{}>, {
+    size: ProgressSize;
+    max: number;
+    showValue: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Progress.vue.d.ts.map

package/dist/packages/primitives/progress/src/Progress.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/progress/src/Progress.vue"],"names":[],"mappings":"AAwOA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,cAG7B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,eAAO,MAAM,gBAAgB;;8EAS3B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAgBd,2EAA2E;iBAC9D,MAAM,GAAG,IAAI;IAC1B,6CAA6C;UACvC,MAAM;IACZ,4GAA4G;WACrG,YAAY;IACnB,uHAAuH;gBAC3G,OAAO;IACnB,kFAAkF;gBACtE,MAAM;IAClB,kFAAkF;qBACjE,MAAM;IACvB;;;;;;;OAOG;aACM,cAAc,CAAC,cAAc,CAAC;;;;IApBvC,2EAA2E;iBAC9D,MAAM,GAAG,IAAI;IAC1B,6CAA6C;UACvC,MAAM;IACZ,4GAA4G;WACrG,YAAY;IACnB,uHAAuH;gBAC3G,OAAO;IACnB,kFAAkF;gBACtE,MAAM;IAClB,kFAAkF;qBACjE,MAAM;IACvB;;;;;;;OAOG;aACM,cAAc,CAAC,cAAc,CAAC;;UAfhC,YAAY;SAFb,MAAM;eAIA,OAAO;6EAoPnB,CAAC"}

package/dist/packages/primitives/progress/src/Progress.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,123 @@
+import { cn } from "../../../core/src/cn.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ProgressIndicator, ProgressRoot } from "reka-ui";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/progress/src/Progress.vue?vue&type=script&setup=true&lang.ts
+/**
+
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*/
+var PROGRESS_LABELS = {
+	value: ({ value, max }) => `${String(Math.round(value / max * 100))}%`,
+	indeterminate: "—"
+};
+var progressVariants = cva("relative w-full overflow-hidden rounded-full bg-muted", {
+	variants: { size: {
+		sm: "h-1",
+		md: "h-2",
+		lg: "h-3"
+	} },
+	defaultVariants: { size: "md" }
+});
+var Progress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Progress",
+	props: {
+		modelValue: {},
+		max: { default: 100 },
+		size: { default: "md" },
+		showValue: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		labels: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const text = useLabels("progress", PROGRESS_LABELS, () => props.labels);
+		/** The readout tracks the track: a 1px bar with 14px digits beside it is not one object. */
+		const VALUE_TEXT = {
+			sm: "text-micro",
+			md: "text-xs",
+			lg: "text-sm"
+		};
+		const { attrs, rest } = useSplitAttrs();
+		/**
+		* The value the bar itself is given, clamped into [0, max]; null while
+		* indeterminate. The clamp has to happen here rather than only on the way to
+		* the transform below: `aria-valuenow` is generated from whatever ProgressRoot
+		* receives, so handing it the raw prop announces a number outside the range
+		* `aria-valuemin`/`aria-valuemax` declare — "150 percent" read out over a bar
+		* painted at 100.
+		*/
+		const value = computed(() => props.modelValue === null || props.modelValue === void 0 ? null : Math.min(Math.max(props.modelValue, 0), props.max));
+		/** Percentage 0–100, derived from the clamped value; null while indeterminate. */
+		const pct = computed(() => value.value === null ? null : value.value / props.max * 100);
+		/**
+		* Everything ProgressRoot is given in both branches of the template. `rest`
+		* lands last so a caller passing a bare `aria-label` attribute still wins over
+		* the prop, which is the precedence Vue's own fallthrough gave before this
+		* component took the attributes over by hand.
+		*/
+		const rootAttrs = computed(() => ({
+			modelValue: value.value,
+			max: props.max,
+			"aria-label": props.ariaLabel,
+			"aria-labelledby": props.ariaLabelledby,
+			...rest.value
+		}));
+		const indicatorClass = computed(() => cn("h-full", pct.value === 100 ? "bg-success" : "bg-primary", pct.value === null && "w-1/3 animate-progress-indeterminate rounded-full"));
+		const indicatorStyle = computed(() => pct.value === null ? void 0 : {
+			transition: "transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)",
+			transform: `translateX(-${100 - pct.value}%)`
+		});
+		/**
+		* An indeterminate bar has no percentage, so the readout prints the placeholder
+		* rather than the `0%` a naive `pct ?? 0` would produce — "we do not know yet"
+		* and "none of it is done" are different facts, and only one of them is true.
+		*
+		* The determinate branch hands over `value` and `max` rather than the
+		* percentage it already computed for the transform: rounding, the position of
+		* the per-cent sign and the shape of the digits are all the host's, and `pct`
+		* is a division this component happens to need for the paint.
+		*/
+		const readout = computed(() => value.value === null ? text.value.indeterminate : text.value.value({
+			value: value.value,
+			max: props.max
+		}));
+		__expose({ pct });
+		return (_ctx, _cache) => {
+			return !__props.showValue ? (openBlock(), createBlock(unref(ProgressRoot), mergeProps({ key: 0 }, rootAttrs.value, { class: unref(cn)(unref(progressVariants)({ size: __props.size }), unref(attrs).class) }), {
+				default: withCtx(() => [createVNode(unref(ProgressIndicator), {
+					class: normalizeClass(indicatorClass.value),
+					style: normalizeStyle(indicatorStyle.value)
+				}, null, 8, ["class", "style"])]),
+				_: 1
+			}, 16, ["class"])) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(unref(cn)("flex w-full items-center gap-3", unref(attrs).class))
+			}, [createVNode(unref(ProgressRoot), mergeProps(rootAttrs.value, { class: unref(cn)(unref(progressVariants)({ size: __props.size }), "w-auto min-w-0 flex-1") }), {
+				default: withCtx(() => [createVNode(unref(ProgressIndicator), {
+					class: normalizeClass(indicatorClass.value),
+					style: normalizeStyle(indicatorStyle.value)
+				}, null, 8, ["class", "style"])]),
+				_: 1
+			}, 16, ["class"]), createElementVNode("span", {
+				"aria-hidden": "true",
+				class: normalizeClass(unref(cn)("tabular w-10 shrink-0 text-right text-muted-foreground", VALUE_TEXT[__props.size]))
+			}, toDisplayString(readout.value), 3)], 2));
+		};
+	}
+});
+//#endregion
+export { PROGRESS_LABELS, Progress_vue_vue_type_script_setup_true_lang_default as default, progressVariants };
+
+//# sourceMappingURL=Progress.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/progress/src/Progress.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/progress/src/Progress.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ProgressLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\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 PROGRESS_LABELS: ProgressLabels = {\n  value: ({ value, max }) => `${String(Math.round((value / max) * 100))}%`,\n  indeterminate: \"—\",\n};\n\n/**\n * The track's thickness. Deliberately *not* the shared control-height scale a\n * Select or a TextField uses: a bar is a stroke laid under a heading or inside\n * a table row, never a control a person clicks into, so lining it up with a\n * 36px input would only make it a slab. `md` is the thickness every caller got\n * before this prop existed and stays the default for exactly that reason.\n */\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport const progressVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    } satisfies Record<ProgressSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot, ProgressIndicator } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Progress — determinate progress bar for a task whose extent as a percentage\n * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the\n * *indeterminate* state — an empty track, since there is no percentage yet to\n * paint. For a wait of unknown duration with no percentage at all, use\n * Spinner instead of guessing a Progress value. For the same number drawn as\n * a ring — a dashboard tile, a quota, a score where the circle is the visual\n * — use RadialProgress, which mirrors this contract exactly.\n *\n * Built on Reka UI's Progress: role=\"progressbar\" + aria-valuenow/min/max set\n * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto\n * ProgressRoot (fallthrough overrides Reka's own generated \"`NN%`\" label) so\n * the accessible name describes *what* is loading, not just how much.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** Track thickness. Its own scale, not the control-height scale — a bar is a stroke, not a form control. */\n    size?: ProgressSize;\n    /** Print the rounded percentage as text beside the track. While indeterminate it prints an em dash, never a number. */\n    showValue?: boolean;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n    /**\n     * How the readout is written, as any subset of `ProgressLabels` — the rest\n     * stay as the host's `provideLoomLabels` vocabulary left them, and then as\n     * Loom's English.\n     *\n     * The per-instance case is a bar counting something a percentage is the\n     * wrong reading of: `value: ({ value, max }) => \\`Step ${value} of ${max}\\``.\n     */\n    labels?: LabelOverrides<ProgressLabels>;\n  }>(),\n  {\n    max: 100,\n    size: \"md\",\n    showValue: false,\n  },\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(\"progress\", PROGRESS_LABELS, () => props.labels);\n\n/** The readout tracks the track: a 1px bar with 14px digits beside it is not one object. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} satisfies Record<ProgressSize, string>;\n\n// `showValue` changes which node is outermost, so fallthrough can no longer be\n// left to Vue: `class` goes to whatever the caller sees as the component's box\n// — the flex row when there is a readout, the track itself when the track is\n// all there is — and everything else (aria-describedby, data-testid) goes to\n// ProgressRoot, which is the element carrying role=\"progressbar\" and therefore\n// the one those attributes are describing.\n//\n// The two branches are written out rather than always wrapping the track in a\n// row, because a bare Progress has to keep the exact box it had before\n// `showValue` existed — a wrapper, even an empty one, changes how it sits in\n// a flex or grid parent.\n//\n// Nothing may sit beside those two branches at the top level of the template,\n// comments included: a second root node turns the component into a fragment,\n// and the attributes routed by hand above then have nowhere single to land.\n//\n// Routing `class` through `cn()` also settles a fight that used to be decided\n// by stylesheet order: Vue's own fallthrough merge concatenates, so a caller's\n// `bg-primary` sat alongside the track's `bg-muted` rather than replacing it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * The value the bar itself is given, clamped into [0, max]; null while\n * indeterminate. The clamp has to happen here rather than only on the way to\n * the transform below: `aria-valuenow` is generated from whatever ProgressRoot\n * receives, so handing it the raw prop announces a number outside the range\n * `aria-valuemin`/`aria-valuemax` declare — \"150 percent\" read out over a bar\n * painted at 100.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\n/**\n * Everything ProgressRoot is given in both branches of the template. `rest`\n * lands last so a caller passing a bare `aria-label` attribute still wins over\n * the prop, which is the precedence Vue's own fallthrough gave before this\n * component took the attributes over by hand.\n */\nconst rootAttrs = computed(() => ({\n  modelValue: value.value,\n  max: props.max,\n  \"aria-label\": props.ariaLabel,\n  \"aria-labelledby\": props.ariaLabelledby,\n  ...rest.value,\n}));\n\n// Determinate: a full-width bar slid left by the remaining percentage\n// (transform eased over --duration-slow). Indeterminate: a short segment\n// sweeping the track on a loop, since there is no percentage to paint.\n// Completion beat: at 100% the fill turns success (Loom law — a\n// finished piece of work reads as done at a glance), eased in over the same\n// --duration-slow lane via the background transition.\nconst indicatorClass = computed(() =>\n  cn(\n    \"h-full\",\n    pct.value === 100 ? \"bg-success\" : \"bg-primary\",\n    pct.value === null && \"w-1/3 animate-progress-indeterminate rounded-full\",\n  ),\n);\n\nconst indicatorStyle = computed(() =>\n  pct.value === null\n    ? undefined\n    : {\n        transition:\n          \"transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)\",\n        transform: `translateX(-${100 - pct.value}%)`,\n      },\n);\n\n/**\n * An indeterminate bar has no percentage, so the readout prints the placeholder\n * rather than the `0%` a naive `pct ?? 0` would produce — \"we do not know yet\"\n * and \"none of it is done\" are different facts, and only one of them is true.\n *\n * The determinate branch hands over `value` and `max` rather than the\n * percentage it already computed for the transform: rounding, the position of\n * the per-cent sign and the shape of the digits are all the host's, and `pct`\n * is a division this component happens to need for the paint.\n */\nconst readout = computed(() =>\n  value.value === null\n    ? text.value.indeterminate\n    : text.value.value({ value: value.value, max: props.max }),\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    v-if=\"!showValue\"\n    v-bind=\"rootAttrs\"\n    :class=\"cn(progressVariants({ size }), attrs.class as string)\"\n  >\n    <ProgressIndicator :class=\"indicatorClass\" :style=\"indicatorStyle\" />\n  </ProgressRoot>\n\n  <div v-else :class=\"cn('flex w-full items-center gap-3', attrs.class as string)\">\n    <ProgressRoot\n      v-bind=\"rootAttrs\"\n      :class=\"cn(progressVariants({ size }), 'w-auto min-w-0 flex-1')\"\n    >\n      <ProgressIndicator :class=\"indicatorClass\" :style=\"indicatorStyle\" />\n    </ProgressRoot>\n    <!-- Hidden from assistive tech: the progressbar already announces this\n         number through `aria-valuenow`, and a visible copy beside it is read\n         out a second time as loose text. Fixed width so the track does not\n         resize itself every time the digit count changes. -->\n    <span\n      aria-hidden=\"true\"\n      :class=\"cn('tabular w-10 shrink-0 text-right text-muted-foreground', VALUE_TEXT[size])\"\n      >{{ readout }}</span\n    >\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;AAUA,IAAa,kBAAkC;CAC7C,QAAQ,EAAE,OAAO,UAAU,GAAG,OAAO,KAAK,MAAO,QAAQ,MAAO,GAAG,CAAC,EAAE;CACtE,eAAe;AACjB;AAWA,IAAa,mBAAmB,IAAI,yDAAyD;CAC3F,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;;;;;;;;;;;;;;;;;EAwBD,MAAM,QAAQ;EAkCd,MAAM,OAAO,UAAU,YAAY,uBAAuB,MAAM,MAAM;;EAGtE,MAAM,aAAa;GACjB,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAsBA,MAAM,EAAE,OAAO,SAAS,cAAc;;;;;;;;;EAUtC,MAAM,QAAQ,eACZ,MAAM,eAAe,QAAQ,MAAM,eAAe,KAAA,IAC9C,OACA,KAAK,IAAI,KAAK,IAAI,MAAM,YAAY,CAAC,GAAG,MAAM,GAAG,CACvD;;EAGA,MAAM,MAAM,eACV,MAAM,UAAU,OAAO,OAAQ,MAAM,QAAQ,MAAM,MAAO,GAC5D;;;;;;;EAQA,MAAM,YAAY,gBAAgB;GAChC,YAAY,MAAM;GAClB,KAAK,MAAM;GACX,cAAc,MAAM;GACpB,mBAAmB,MAAM;GACzB,GAAG,KAAK;EACV,EAAE;EAQF,MAAM,iBAAiB,eACrB,GACE,UACA,IAAI,UAAU,MAAM,eAAe,cACnC,IAAI,UAAU,QAAQ,mDACxB,CACF;EAEA,MAAM,iBAAiB,eACrB,IAAI,UAAU,OACV,KAAA,IACA;GACE,YACE;GACF,WAAW,eAAe,MAAM,IAAI,MAAM;EAC5C,CACN;;;;;;;;;;;EAYA,MAAM,UAAU,eACd,MAAM,UAAU,OACZ,KAAK,MAAM,gBACX,KAAK,MAAM,MAAM;GAAE,OAAO,MAAM;GAAO,KAAK,MAAM;EAAI,CAAC,CAC7D;EAEA,SAAa,EAAE,IAAI,CAAC;;GAKT,OAAA,CAAA,QAAA,aADT,UAAA,GAAA,YAMe,MAAA,YAAA,GANf,WAMe,EAAA,KAAA,EAAA,GAJL,UAAA,OAAS,EAChB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,gBAAA,CAAgB,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAK,MAAA,KAAA,CAAK,CAAC,KAAK,EAAA,CAAA,GAAA;IAElD,SAAA,cAAqE,CAArE,YAAqE,MAAA,iBAAA,GAAA;KAAjD,OAAK,eAAE,eAAA,KAAc;KAAG,OAAK,eAAE,eAAA,KAAc;;;GAGnE,GAAA,IAAA,CAAA,OAAA,CAAA,MAAA,UAAA,GAAA,mBAgBM,OAAA;;IAhBO,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,kCAAmC,MAAA,KAAA,CAAK,CAAC,KAAK,CAAA;GAClE,GAAA,CAAA,YAKe,MAAA,YAAA,GALf,WACU,UAIK,OAJI,EAChB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,gBAAA,CAAgB,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,uBAAA,EAAA,CAAA,GAAA;IAElC,SAAA,cAAqE,CAArE,YAAqE,MAAA,iBAAA,GAAA;KAAjD,OAAK,eAAE,eAAA,KAAc;KAAG,OAAK,eAAE,eAAA,KAAc;;;GAMnE,GAAA,IAAA,CAAA,OAAA,CAAA,GAAA,mBAIC,QAAA;IAHC,eAAY;IACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,0DAA2D,WAAW,QAAA,KAAI,CAAA;GAChF,GAAA,gBAAA,QAAA,KAAO,GAAA,CAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,4 @@
+export { default, progressVariants, PROGRESS_LABELS } from "./Progress.vue";
+export type { ProgressSize } from "./Progress.vue";
+export type { ProgressLabels } from "@ecoma-io/loom-labels";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/progress/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/progress/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC5E,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,3 @@
+import { PROGRESS_LABELS, progressVariants } from "./Progress.vue_vue_type_script_setup_true_lang.js";
+import Progress_default from "./Progress.js";
+export { PROGRESS_LABELS, Progress_default as default, progressVariants };

package/dist/packages/primitives/radial-progress/src/RadialProgress.js

@@ -0,0 +1,7 @@
+import RadialProgress_vue_vue_type_script_setup_true_lang_default, { RADIAL_PROGRESS_LABELS, radialProgressVariants } from "./RadialProgress.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/radial-progress/src/RadialProgress.vue
+var RadialProgress_default = RadialProgress_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RADIAL_PROGRESS_LABELS, RadialProgress_default as default, radialProgressVariants };
+
+//# sourceMappingURL=RadialProgress.js.map

package/dist/packages/primitives/radial-progress/src/RadialProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialProgress.js","names":[],"sources":["../../../../../packages/primitives/radial-progress/src/RadialProgress.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { RadialProgressLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\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 RADIAL_PROGRESS_LABELS: RadialProgressLabels = {\n  value: ({ value, max }) => `${String(Math.round((value / max) * 100))}%`,\n  indeterminate: \"—\",\n};\n\n/**\n * The ring's outer diameter. `sm` is a table-row or list-item marker, `md` a\n * card corner, `lg` the one on a dashboard tile where the ring is the whole\n * visual. Its own scale rather than the control-height scale a Select uses: a\n * ring is not a form control and never has to line up beside a text input.\n */\nexport type RadialProgressSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * How heavy the ring's stroke is. Measured in the SVG's own units, so the\n * proportion of stroke to diameter holds at every `size` — a `thick` ring\n * reads as thick whether it is 40px or 96px across.\n */\nexport type RadialProgressThickness = \"thin\" | \"regular\" | \"thick\";\n\nexport const radialProgressVariants = cva(\n  \"relative inline-flex shrink-0 items-center justify-center\",\n  {\n    variants: {\n      size: {\n        sm: \"h-10 w-10\",\n        md: \"h-16 w-16\",\n        lg: \"h-24 w-24\",\n      } satisfies Record<RadialProgressSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * RadialProgress — the same information Progress carries, drawn as a ring: a\n * dashboard tile, a quota, a score out of 100 where the circle *is* the\n * visual. Reach for Progress instead wherever the bar sits in a row of text\n * and its length is doing the comparing, and for Spinner when there is no\n * percentage at all — a ring with nothing to fill is a spinner wearing a\n * gauge's clothes.\n *\n * Its contract is Progress's, deliberately and to the letter: `null`/omitted\n * `modelValue` is indeterminate, the value is clamped into [0, max] for the\n * same reason, the arc turns `success` at 100%, and the accessible name comes\n * from `ariaLabel`/`ariaLabelledby`. Two components answering the same\n * question differently is worse than either answer.\n *\n * Reka's ProgressRoot is kept as the wrapper even though the fill below is an\n * SVG arc rather than a ProgressIndicator: the root is what emits\n * `role=\"progressbar\"` and `aria-valuenow`/`aria-valuemin`/`aria-valuemax`,\n * and it is the only way this component and Progress cannot drift into\n * announcing the same number two different ways. ProgressIndicator is left out\n * because it exists to be translated inside an overflow-hidden track, which is\n * not how an arc is painted.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** The ring's outer diameter. */\n    size?: RadialProgressSize;\n    /** The weight of the ring's stroke, in proportion to its diameter. */\n    thickness?: RadialProgressThickness;\n    /** Print the rounded percentage in the ring's centre. On by default — an empty ring is a spinner. While indeterminate it prints an em dash, never a number. */\n    showValue?: boolean;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n    /**\n     * How the centre readout is written, as any subset of\n     * `RadialProgressLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     */\n    labels?: LabelOverrides<RadialProgressLabels>;\n  }>(),\n  {\n    max: 100,\n    size: \"md\",\n    thickness: \"regular\",\n    // On, unlike Progress's opt-in: a bar has a length a reader can compare\n    // against its own track, and a ring does not — 70% and 80% are the same\n    // arc to the eye. The number is what makes the ring readable.\n    showValue: true,\n  },\n);\n\n/**\n * The drawing is done in a fixed 100×100 user-unit box and scaled to whatever\n * `size` renders, so every number below is a proportion rather than a pixel\n * count and none of them has to be recomputed per size.\n */\nconst VIEW = 100;\nconst CENTRE = VIEW / 2;\n\nconst STROKE = {\n  thin: 6,\n  regular: 10,\n  thick: 14,\n} satisfies Record<RadialProgressThickness, number>;\n\n/** The centre readout scales with the ring, or it overflows it at `sm`. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-sm\",\n  lg: \"text-lg\",\n} satisfies Record<RadialProgressSize, string>;\n\n// One rendered node, but `class` is still routed by hand: Vue's fallthrough\n// merge concatenates, so a caller's `h-20 w-20` only beat the size variant's\n// `h-16 w-16` if Tailwind happened to emit it later. `cn()` decides it. The\n// rest of the fallthrough (aria-describedby, data-testid) lands on the same\n// node, which is the one carrying role=\"progressbar\".\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * Clamped into [0, max] for the reason Progress's own comment gives:\n * `aria-valuenow` is generated from whatever ProgressRoot receives, so an\n * unclamped 150 is announced against an `aria-valuemax` of 100 while the arc\n * is painted full.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\nconst strokeWidth = computed(() => STROKE[props.thickness]);\n\n/**\n * An SVG stroke is centred on its path, so half of it falls outside the\n * circle's own radius. A radius of `CENTRE` therefore paints the outer half of\n * the stroke past the viewBox edge and the browser clips it — the flat top\n * that makes a radial progress look broken. Half the stroke width comes off\n * the radius so the ring's outer edge lands exactly on the box.\n */\nconst radius = computed(() => CENTRE - strokeWidth.value / 2);\n\n/**\n * The dash pattern is measured along the path, so it depends on the radius —\n * which depends on `thickness`. Hard-coding a circumference works for exactly\n * one thickness and silently mis-fills every other one.\n */\nconst circumference = computed(() => 2 * Math.PI * radius.value);\n\n/**\n * Determinate: one dash as long as the whole path, pushed back by the fraction\n * still to do. Indeterminate: a fixed quarter-turn segment, with the gap set\n * to the full circumference so nothing wraps round behind it while it spins.\n */\nconst dashArray = computed(() =>\n  pct.value === null\n    ? `${circumference.value * 0.25} ${circumference.value}`\n    : `${circumference.value}`,\n);\n\nconst dashOffset = computed(() =>\n  pct.value === null ? 0 : circumference.value * (1 - pct.value / 100),\n);\n\n/**\n * A round cap at exactly 0% still paints a dot at twelve o'clock — a ring\n * showing nothing that reads as a couple of percent. Nothing done draws\n * nothing, so the cap squares off for that one value.\n */\nconst lineCap = computed(() => (pct.value === 0 ? \"butt\" : \"round\"));\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(\"radialProgress\", RADIAL_PROGRESS_LABELS, () => props.labels);\n\n/**\n * Matches Progress: a placeholder for \"no percentage yet\", never a false `0%`,\n * and both raw numbers handed over rather than a percentage already written in\n * English.\n */\nconst readout = computed(() =>\n  value.value === null\n    ? text.value.indeterminate\n    : text.value.value({ value: value.value, max: props.max }),\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    :model-value=\"value\"\n    :max=\"max\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    v-bind=\"rest\"\n    :class=\"cn(radialProgressVariants({ size }), attrs.class as string)\"\n  >\n    <!-- Hidden from assistive tech in one piece: everything it draws is\n         already announced by the progressbar above it, and the centre readout\n         would otherwise be read a second time as loose text.\n\n         Indeterminate spins the whole SVG rather than the arc inside it. The\n         rotation is then an ordinary CSS transform on an HTML-positioned box,\n         whose transform-origin is its own centre at every size — where a\n         transform on an SVG child resolves against the viewBox and needs\n         `transform-box` reasoning to stay centred. It is a CSS animation and\n         not a JS ticker so the global prefers-reduced-motion rule in\n         global.css collapses it, which a requestAnimationFrame loop would\n         escape. The readout sits outside the SVG for the same reason: it must\n         not spin with it. -->\n    <svg\n      :viewBox=\"`0 0 ${VIEW} ${VIEW}`\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      :class=\"cn('absolute inset-0 h-full w-full', pct === null && 'animate-spin')\"\n    >\n      <circle\n        :cx=\"CENTRE\"\n        :cy=\"CENTRE\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        class=\"stroke-muted\"\n      />\n      <!-- Rotated by the SVG `transform` attribute about the box's centre\n           rather than a CSS `-rotate-90`: the attribute is expressed in\n           viewBox units, so twelve o'clock stays twelve o'clock at any\n           rendered size, with no dependency on how the engine resolves\n           transform-origin for an SVG child. An unrotated circle starts at\n           three. -->\n      <circle\n        :cx=\"CENTRE\"\n        :cy=\"CENTRE\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        :stroke-dasharray=\"dashArray\"\n        :stroke-dashoffset=\"dashOffset\"\n        :stroke-linecap=\"lineCap\"\n        :transform=\"`rotate(-90 ${CENTRE} ${CENTRE})`\"\n        :class=\"pct === 100 ? 'stroke-success' : 'stroke-primary'\"\n        :style=\"\n          pct === null\n            ? undefined\n            : {\n                transition:\n                  'stroke-dashoffset var(--duration-slow) var(--ease-out), stroke var(--duration-slow) var(--ease-out)',\n              }\n        \"\n      />\n    </svg>\n    <span\n      v-if=\"showValue\"\n      aria-hidden=\"true\"\n      :class=\"cn('tabular text-foreground', VALUE_TEXT[size])\"\n      >{{ readout }}</span\n    >\n  </ProgressRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/radial-progress/src/RadialProgress.vue.d.ts

@@ -0,0 +1,78 @@
+import { type LabelOverrides } from "@ecoma-io/loom-labels";
+import type { RadialProgressLabels } from "@ecoma-io/loom-labels";
+/**
+
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it, and
+ * exported so a host can build a partial vocabulary against the real thing.
+ */
+export declare const RADIAL_PROGRESS_LABELS: RadialProgressLabels;
+/**
+ * The ring's outer diameter. `sm` is a table-row or list-item marker, `md` a
+ * card corner, `lg` the one on a dashboard tile where the ring is the whole
+ * visual. Its own scale rather than the control-height scale a Select uses: a
+ * ring is not a form control and never has to line up beside a text input.
+ */
+export type RadialProgressSize = "sm" | "md" | "lg";
+/**
+ * How heavy the ring's stroke is. Measured in the SVG's own units, so the
+ * proportion of stroke to diameter holds at every `size` — a `thick` ring
+ * reads as thick whether it is 40px or 96px across.
+ */
+export type RadialProgressThickness = "thin" | "regular" | "thick";
+export declare const radialProgressVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */
+    modelValue?: number | null;
+    /** The value that reads as 100% complete. */
+    max?: number;
+    /** The ring's outer diameter. */
+    size?: RadialProgressSize;
+    /** The weight of the ring's stroke, in proportion to its diameter. */
+    thickness?: RadialProgressThickness;
+    /** Print the rounded percentage in the ring's centre. On by default — an empty ring is a spinner. While indeterminate it prints an em dash, never a number. */
+    showValue?: boolean;
+    /** Accessible name describing the task, overriding Reka's default `NN%` label. */
+    ariaLabel?: string;
+    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */
+    ariaLabelledby?: string;
+    /**
+     * How the centre readout is written, as any subset of
+     * `RadialProgressLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     */
+    labels?: LabelOverrides<RadialProgressLabels>;
+}, {
+    pct: import("vue").ComputedRef<number | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */
+    modelValue?: number | null;
+    /** The value that reads as 100% complete. */
+    max?: number;
+    /** The ring's outer diameter. */
+    size?: RadialProgressSize;
+    /** The weight of the ring's stroke, in proportion to its diameter. */
+    thickness?: RadialProgressThickness;
+    /** Print the rounded percentage in the ring's centre. On by default — an empty ring is a spinner. While indeterminate it prints an em dash, never a number. */
+    showValue?: boolean;
+    /** Accessible name describing the task, overriding Reka's default `NN%` label. */
+    ariaLabel?: string;
+    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */
+    ariaLabelledby?: string;
+    /**
+     * How the centre readout is written, as any subset of
+     * `RadialProgressLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     */
+    labels?: LabelOverrides<RadialProgressLabels>;
+}> & Readonly<{}>, {
+    size: RadialProgressSize;
+    max: number;
+    showValue: boolean;
+    thickness: RadialProgressThickness;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=RadialProgress.vue.d.ts.map

package/dist/packages/primitives/radial-progress/src/RadialProgress.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialProgress.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/radial-progress/src/RadialProgress.vue"],"names":[],"mappings":"AAiSA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGlE;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,EAAE,oBAGpC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,eAAO,MAAM,sBAAsB;;8EAYlC,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAwBd,2EAA2E;iBAC9D,MAAM,GAAG,IAAI;IAC1B,6CAA6C;UACvC,MAAM;IACZ,iCAAiC;WAC1B,kBAAkB;IACzB,sEAAsE;gBAC1D,uBAAuB;IACnC,+JAA+J;gBACnJ,OAAO;IACnB,kFAAkF;gBACtE,MAAM;IAClB,kFAAkF;qBACjE,MAAM;IACvB;;;;OAIG;aACM,cAAc,CAAC,oBAAoB,CAAC;;;;IAnB7C,2EAA2E;iBAC9D,MAAM,GAAG,IAAI;IAC1B,6CAA6C;UACvC,MAAM;IACZ,iCAAiC;WAC1B,kBAAkB;IACzB,sEAAsE;gBAC1D,uBAAuB;IACnC,+JAA+J;gBACnJ,OAAO;IACnB,kFAAkF;gBACtE,MAAM;IAClB,kFAAkF;qBACjE,MAAM;IACvB;;;;OAIG;aACM,cAAc,CAAC,oBAAoB,CAAC;;UAdtC,kBAAkB;SAFnB,MAAM;eAMA,OAAO;eAFP,uBAAuB;6EAuPnC,CAAC"}