@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/packages/primitives/spinner/src/Spinner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/spinner/src/Spinner.vue?vue&type=script&setup=true&lang.ts
+/**
+* Spinner — indeterminate loading indicator: the wait has no known length or
+* layout shape yet (e.g. waiting on a network request). Once the layout IS
+* known (a card, a list row), use Skeleton instead so the placeholder already
+* reads as the coming content.
+*
+* The root carries `role="status"` + `aria-label` (from `label`) so screen
+* readers announce the wait; the decorative SVG arc is `aria-hidden` since
+* the label already carries the meaning. Color inherits from the caller via
+* `text-current`/`stroke-current`/`fill-current` — set text color on an
+* ancestor, never hardcode it here.
+*
+* Button deliberately does not reuse this component for its own loading
+* state: it inlines the same arc instead, because `role="status"` inside a
+* button that is already `aria-busy` would announce the wait twice.
+*/
+var _hoisted_1 = ["aria-label"];
+var spinnerVariants = cva("animate-spin text-current", {
+	variants: { size: {
+		sm: "h-4 w-4",
+		md: "h-5 w-5",
+		lg: "h-8 w-8"
+	} },
+	defaultVariants: { size: "md" }
+});
+var Spinner_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Spinner",
+	props: {
+		size: { default: "md" },
+		label: { default: "Loading" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				role: "status",
+				"aria-label": __props.label,
+				class: "inline-flex"
+			}, [(openBlock(), createElementBlock("svg", {
+				class: normalizeClass(unref(cn)(unref(spinnerVariants)({ size: __props.size }))),
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true"
+			}, [..._cache[0] || (_cache[0] = [createElementVNode("circle", {
+				class: "stroke-current opacity-25",
+				cx: "12",
+				cy: "12",
+				r: "10",
+				"stroke-width": "4"
+			}, null, -1), createElementVNode("path", {
+				class: "fill-current opacity-75",
+				d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z"
+			}, null, -1)])], 2))], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { Spinner_vue_vue_type_script_setup_true_lang_default as default, spinnerVariants };
+
+//# sourceMappingURL=Spinner.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/spinner/src/Spinner.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/spinner/src/Spinner.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\nexport type SpinnerSize = \"sm\" | \"md\" | \"lg\";\n\nexport const spinnerVariants = cva(\"animate-spin text-current\", {\n  variants: {\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-8 w-8\",\n    } satisfies Record<SpinnerSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * Spinner — indeterminate loading indicator: the wait has no known length or\n * layout shape yet (e.g. waiting on a network request). Once the layout IS\n * known (a card, a list row), use Skeleton instead so the placeholder already\n * reads as the coming content.\n *\n * The root carries `role=\"status\"` + `aria-label` (from `label`) so screen\n * readers announce the wait; the decorative SVG arc is `aria-hidden` since\n * the label already carries the meaning. Color inherits from the caller via\n * `text-current`/`stroke-current`/`fill-current` — set text color on an\n * ancestor, never hardcode it here.\n *\n * Button deliberately does not reuse this component for its own loading\n * state: it inlines the same arc instead, because `role=\"status\"` inside a\n * button that is already `aria-busy` would announce the wait twice.\n */\nwithDefaults(\n  defineProps<{\n    /** Control diameter. */\n    size?: SpinnerSize;\n    /** What a screen reader announces for the wait — always describe the specific work in progress (e.g. \"Saving changes\") rather than leaving the generic default. */\n    label?: string;\n  }>(),\n  { size: \"md\", label: \"Loading\" },\n);\n</script>\n\n<template>\n  <span role=\"status\" :aria-label=\"label\" class=\"inline-flex\">\n    <svg :class=\"cn(spinnerVariants({ size }))\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle class=\"stroke-current opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"4\" />\n      <path class=\"fill-current opacity-75\" d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z\" />\n    </svg>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,IAAa,kBAAkB,IAAI,6BAA6B;CAC9D,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;;;;;;;;;GAkCC,OAAA,UAAA,GAAA,mBAKO,QAAA;IALD,MAAK;IAAU,cAAY,QAAA;IAAO,OAAM;GAC5C,GAAA,EAAA,UAAA,GAAA,mBAGM,OAAA;IAHA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,eAAA,CAAe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,CAAA,CAAA;IAAM,SAAQ;IAAY,MAAK;IAAO,eAAY;GACtF,GAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,mBAAoF,UAAA;IAA5E,OAAM;IAA4B,IAAG;IAAK,IAAG;IAAK,GAAE;IAAK,gBAAa;GAC9E,GAAA,MAAA,EAAA,GAAA,mBAA0F,QAAA;IAApF,OAAM;IAA0B,GAAE"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { spinnerVariants } from "./Spinner.vue_vue_type_script_setup_true_lang.js";
+import Spinner_default from "./Spinner.js";
+export { Spinner_default as default, spinnerVariants };

package/dist/packages/primitives/stepper/src/Stepper.js

@@ -0,0 +1,7 @@
+import Stepper_vue_vue_type_script_setup_true_lang_default, { STEPPER_LABELS } from "./Stepper.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/stepper/src/Stepper.vue
+var Stepper_default = Stepper_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { STEPPER_LABELS, Stepper_default as default };
+
+//# sourceMappingURL=Stepper.js.map

package/dist/packages/primitives/stepper/src/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","names":[],"sources":["../../../../../packages/primitives/stepper/src/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { StepperLabels } 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 *\n * `group` is capitalised where Reka's is not, which is what lets\n * `Stepper.test.ts` assert whose string reached the DOM rather than merely\n * what it said.\n */\nexport const STEPPER_LABELS: StepperLabels = {\n  group: \"Progress\",\n  position: ({ step, stepCount }) => `Step ${String(step)} of ${String(stepCount)}`,\n  completed: ({ title }) => `${title} (completed)`,\n};\n\n/** One step in the spine. Its `title` is also the accessible name of that step's trigger. */\nexport interface StepperStep {\n  /** The step's label, shown next to its indicator and read out as the trigger's name. */\n  title: string;\n  /** A line under the title saying what the step asks for. Omit it for a bare spine. */\n  description?: string;\n  /** Present but unreachable: the indicator greys and the title mutes, and neither pointer nor keyboard can select it. */\n  disabled?: boolean;\n}\n\n/** The axis the spine runs along, which also decides which arrow keys move between steps. */\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport {\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperRoot,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"reka-ui\";\nimport { Check } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Stepper — the progress spine of a multi-step flow: a checkout, an\n * onboarding sequence, a wizard. It says how many steps there are, which one\n * a reader is on, and which are behind them; the step's own content is the\n * host's, rendered next to or under the spine.\n *\n * It is **not** a number stepper. A numeric value with increment and\n * decrement buttons is NumberField. The word is genuinely ambiguous and both\n * controls answer to it, so the two are worth naming together: this one is\n * about position in a flow, that one is about a quantity.\n *\n * Progress shows one bar for one task whose extent is a percentage — reach\n * for it when the stages have no names worth showing. Tabs switches between\n * panels that have no order at all; a stepper's steps are ordered by\n * definition, which is why it carries a connector and Tabs carries none.\n *\n * Built on Reka UI's Stepper, which supplies the item state machine\n * (completed / active / inactive), the `linear` reachability rule and\n * arrow-key navigation along the orientation's axis.\n *\n * Three things are added on top of it.\n *\n * The first is the roving tab stop. Reka gives *every* focusable trigger\n * `tabindex=\"0\"`, so a five-step spine would be five Tab stops — the defect\n * the accessibility bar names outright. The `tabindex` bound below overrides\n * Reka's, leaving exactly one trigger tabbable at a time (the one last\n * focused, else the current step); Reka's own arrow-key handler still moves\n * real focus between them, which `tabindex=\"-1\"` does not prevent.\n *\n * The second is where `aria-current` sits. Reka puts `aria-current=\"true\"` on\n * the item wrapper, a `div` with no role that a reader never lands on, so the\n * marking is not conveyed at the moment it matters. It is moved here onto the\n * trigger — the element that takes focus — and given the value the WAI-ARIA\n * pattern asks for on a step in a process.\n *\n * The third is the live region. Reka renders one of its own on the root and\n * writes \"Step N of M\" into it as a **text node inside its render function** —\n * not a prop, not a slot, not an attribute — which makes it the one string in\n * this library that no binding on Loom's side can replace. So Loom renders its\n * own alongside it and takes Reka's out of the accessibility tree from\n * `src/styles/global.css`, which carries that reasoning and the coupling it\n * creates. `e2e/stepper.e2e.ts` is what keeps the coupling honest: it asserts\n * that a Loom stepper has exactly one live region and that its words are\n * Loom's.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current step, 1-based. Omit it and Stepper owns its own position. */\n    modelValue?: number;\n    /** The ordered steps. Their index decides their number; there is no id to keep. */\n    steps: StepperStep[];\n    /** The axis the spine runs along; vertical moves the titles beside the indicators. */\n    orientation?: StepperOrientation;\n    /** Locks the flow to its furthest point: a reader may go back, or one step on, never jump ahead. */\n    linear?: boolean;\n    /**\n     * Names for everything the spine says out loud, as any subset of\n     * `StepperLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * A whole application's language belongs in that vocabulary rather than\n     * here. This is the per-instance correction, and the key it exists for is\n     * `group`: a page with two flows on it needs each named for what it steps\n     * through.\n     */\n    labels?: LabelOverrides<StepperLabels>;\n  }>(),\n  { orientation: \"horizontal\", linear: false },\n);\n\nconst emit = defineEmits<{\n  /** The step chosen, 1-based. Fires for a trigger click and for Enter/Space on one. */\n  \"update:modelValue\": [value: number];\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(\"stepper\", STEPPER_LABELS, () => props.labels);\n\n// The root renders a real element and it is the one every fallthrough\n// attribute belongs on: it is the `role=\"group\"` the whole spine lives in, so\n// an `aria-label` naming the flow lands there. It is spread *after*\n// `text.group` in the template for that reason — the vocabulary supplies the\n// name a spine has when nobody names it, and a caller who does name one still\n// wins. `class` is pulled out of the spread and merged through `cn()` instead,\n// so a caller's layout utility resolves against the root's own rather than\n// merely being concatenated after it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: rootAttrs } = useSplitAttrs();\n\n/**\n * The two layouts, side by side rather than as template branches that drift\n * apart. `satisfies` is what stops an orientation being added to the type and\n * forgotten here.\n *\n * Horizontal hangs the connector off the item box (`relative`) rather than\n * off the rail: `left-1/2 w-full` then spans exactly the distance between two\n * indicator centres, since the items are equal-width flex children. It is\n * drawn behind them — the trigger is `relative`, so it and every later item's\n * trigger paint over a line that runs under the circles.\n */\nconst LAYOUTS = {\n  horizontal: {\n    root: \"flex w-full items-start\",\n    item: \"relative flex flex-1 flex-col items-center gap-2 text-center\",\n    rail: \"\",\n    separator: \"absolute left-1/2 top-4 h-0.5 w-full -translate-y-1/2\",\n    fill: \"origin-left scale-x-0\",\n    filled: \"scale-x-100\",\n    text: \"flex flex-col gap-0.5\",\n  },\n  vertical: {\n    root: \"flex flex-col\",\n    item: \"flex gap-3\",\n    rail: \"flex flex-col items-center self-stretch\",\n    // `order-1` rather than a second template branch: the connector has to be\n    // declared before the trigger so the trigger paints over it, and has to sit\n    // below the trigger once the rail is a column.\n    separator: \"order-1 my-1 w-0.5 flex-1\",\n    fill: \"origin-top scale-y-0\",\n    filled: \"scale-y-100\",\n    text: \"flex flex-col gap-0.5\",\n  },\n} satisfies Record<StepperOrientation, Record<string, string>>;\n\nconst layout = computed(() => LAYOUTS[props.orientation]);\n\n/** The step that last held focus, and so owns the spine's single tab stop. */\nconst focused = ref<number | null>(null);\n\n/**\n * Reka's own focusability rule, mirrored: a linear stepper refuses focus to\n * anything past one step ahead of where the reader is. It has to be repeated\n * rather than read off the DOM, because the tab stop is decided while the\n * `tabindex` attributes are still being rendered — and a tab stop parked on a\n * step Reka will not focus leaves the whole spine unreachable by Tab.\n */\nfunction focusable(step: number, current: number): boolean {\n  if (props.steps[step - 1]?.disabled) return false;\n  return props.linear ? step <= current + 1 : true;\n}\n\n/**\n * The one step whose trigger is tabbable. Everything else is `tabindex=\"-1\"`.\n *\n * Reka types the value it hands its own slot as possibly absent even though\n * `StepperRoot` defaults it to 1, so the fallback here is that declaration\n * being honoured rather than a state this can reach.\n */\nfunction tabStop(current: number | undefined): number {\n  const at = current ?? 1;\n  if (focused.value !== null && focusable(focused.value, at)) return focused.value;\n  if (focusable(at, at)) return at;\n  return props.steps.findIndex((_, index) => focusable(index + 1, at)) + 1;\n}\n\n/**\n * Reka points every trigger's `aria-describedby` at a description id whether\n * or not that description was rendered, and a reference resolving to nothing\n * is worse than no reference: it claims a description exists. Binding the key\n * as `undefined` is what takes it back off, since an attribute set to\n * `undefined` is removed rather than merged.\n */\nfunction describedBy(step: StepperStep): Record<string, undefined> {\n  return step.description === undefined ? { \"aria-describedby\": undefined } : {};\n}\n\n/** Reka reports its position as possibly absent; this component's model is a step number or nothing at all. */\nfunction onUpdate(value: number | undefined): void {\n  if (value !== undefined) emit(\"update:modelValue\", value);\n}\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"{ modelValue: current }\"\n    v-bind=\"{ 'aria-label': text.group, ...rootAttrs, ...optional({ modelValue }) }\"\n    data-loom-stepper\n    :orientation=\"orientation\"\n    :linear=\"linear\"\n    :class=\"cn(layout.root, attrs.class as string)\"\n    @update:model-value=\"onUpdate\"\n  >\n    <StepperItem\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      v-slot=\"{ state }\"\n      :step=\"index + 1\"\n      :disabled=\"step.disabled ?? false\"\n      :aria-current=\"undefined\"\n      :class=\"layout.item\"\n    >\n      <div :class=\"layout.rail\">\n        <!-- Declared before the trigger so the trigger paints over it: the\n             connector runs from this indicator's centre to the next one's. -->\n        <StepperSeparator\n          v-if=\"index < steps.length - 1\"\n          :class=\"cn('overflow-hidden rounded-full bg-border', layout.separator)\"\n        >\n          <span\n            :class=\"\n              cn(\n                'block h-full w-full bg-primary transition-transform ease-out',\n                layout.fill,\n                state === 'completed' && layout.filled,\n              )\n            \"\n          />\n        </StepperSeparator>\n\n        <StepperTrigger\n          v-bind=\"describedBy(step)\"\n          :tabindex=\"tabStop(current) === index + 1 ? 0 : -1\"\n          :aria-current=\"state === 'active' ? 'step' : undefined\"\n          :class=\"\n            cn(\n              'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-medium',\n              'transition-colors ease-out',\n              'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n              // Unavailable is a *colour*, and the whole distinction lives on\n              // the indicator. It used to be `opacity-50` on the item, which\n              // took the title and the description down with it:\n              // `--color-muted-foreground` is 5.76:1 on white and 2.11:1 once\n              // composited at half alpha, so the one thing that had to stay\n              // readable was the one thing the fade broke. A grey-filled disc\n              // against the inactive step's white one says the same thing and\n              // costs nothing, and every string below is a measured pair.\n              //\n              // Keyed off the prop and NOT off `data-[disabled]:`, because in\n              // a linear flow Reka marks every step past the next one disabled\n              // — painting all of them unavailable reads as broken rather than\n              // as later, and a step that is merely ahead already says so by\n              // being inactive. The branch also keeps the two apart in the\n              // cascade: the inactive rules carry an attribute selector, so a\n              // plain `bg-muted` alongside them would lose.\n              step.disabled\n                ? 'border-border-strong bg-muted text-muted-foreground'\n                : [\n                    'data-[state=inactive]:border-input data-[state=inactive]:bg-background data-[state=inactive]:text-muted-foreground',\n                    'data-[state=inactive]:enabled:hover:bg-subtle',\n                  ],\n              'data-[state=active]:border-primary data-[state=active]:bg-primary-muted data-[state=active]:text-primary-text',\n              'data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground',\n              'disabled:cursor-not-allowed',\n            )\n          \"\n          @focus=\"focused = index + 1\"\n        >\n          <StepperIndicator class=\"flex items-center justify-center\">\n            <!-- Three states, none of them colour alone: the check is a shape\n                 change, the number is text, and the current step carries\n                 `aria-current` above. -->\n            <Check v-if=\"state === 'completed'\" class=\"h-4 w-4 animate-scale-in\" />\n            <template v-else>{{ index + 1 }}</template>\n          </StepperIndicator>\n        </StepperTrigger>\n      </div>\n\n      <div\n        :class=\"cn(layout.text, orientation === 'vertical' && index < steps.length - 1 && 'pb-6')\"\n      >\n        <!-- `as=\"span\"`, not Reka's default `h4`: a step label is not a\n             section heading, and a component cannot know what heading level\n             the page it lands in has room for. -->\n        <!-- The title mutes rather than fades: `--color-muted-foreground` is a\n             measured 5.76:1 on the card it sits on, two steps back from\n             `--color-foreground` and still comfortably readable. The\n             description below is already that colour and stays there — an\n             unreachable step's description is the one line a reader most needs\n             in order to find out why it is unreachable. -->\n        <StepperTitle\n          as=\"span\"\n          :class=\"\n            cn('text-sm font-medium', step.disabled ? 'text-muted-foreground' : 'text-foreground')\n          \"\n        >\n          <!-- ARIA has a value for \"you are here\" and none for \"done\", and the\n               check glyph is invisible to a screen reader. This element is what\n               `aria-labelledby` names the trigger with, so the word has to join\n               the name from inside it.\n               Two nodes rather than the title plus a trailing \"(completed)\"\n               span, because a suffix is Loom deciding where a qualifier sits\n               relative to the thing it qualifies, and that is a property of the\n               language. The visible half is `aria-hidden` and excluded from the\n               name computation; the hidden half carries the whole finished\n               sentence the vocabulary returned. -->\n          <template v-if=\"state === 'completed'\">\n            <span aria-hidden=\"true\">{{ step.title }}</span>\n            <span class=\"sr-only\">{{ text.completed({ title: step.title }) }}</span>\n          </template>\n          <template v-else>{{ step.title }}</template>\n        </StepperTitle>\n        <StepperDescription v-if=\"step.description\" class=\"text-xs text-muted-foreground\">\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n\n    <!-- Loom's own position announcement, standing in for the one `StepperRoot`\n         renders as a text node its render function hard-codes in English.\n         `data-loom-live` is what the rule in `global.css` selects *around* when\n         it removes Reka's from the accessibility tree, so the two are told\n         apart by what Loom marked rather than by DOM order.\n         The count comes from `steps` rather than from Reka's registry, which\n         fills in over a tick as each trigger mounts — the same number, one\n         render sooner, which matters for a region a screen reader reads on\n         arrival. -->\n    <span data-loom-live role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{\n      text.position({ step: current ?? 1, stepCount: steps.length })\n    }}</span>\n  </StepperRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/stepper/src/Stepper.vue.d.ts

@@ -0,0 +1,75 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { StepperLabels } from "../../../labels/src/index";
+/**
+
+/**
+ * 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.
+ *
+ * `group` is capitalised where Reka's is not, which is what lets
+ * `Stepper.test.ts` assert whose string reached the DOM rather than merely
+ * what it said.
+ */
+export declare const STEPPER_LABELS: StepperLabels;
+/** One step in the spine. Its `title` is also the accessible name of that step's trigger. */
+export interface StepperStep {
+    /** The step's label, shown next to its indicator and read out as the trigger's name. */
+    title: string;
+    /** A line under the title saying what the step asks for. Omit it for a bare spine. */
+    description?: string;
+    /** Present but unreachable: the indicator greys and the title mutes, and neither pointer nor keyboard can select it. */
+    disabled?: boolean;
+}
+/** The axis the spine runs along, which also decides which arrow keys move between steps. */
+export type StepperOrientation = "horizontal" | "vertical";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The current step, 1-based. Omit it and Stepper owns its own position. */
+    modelValue?: number;
+    /** The ordered steps. Their index decides their number; there is no id to keep. */
+    steps: StepperStep[];
+    /** The axis the spine runs along; vertical moves the titles beside the indicators. */
+    orientation?: StepperOrientation;
+    /** Locks the flow to its furthest point: a reader may go back, or one step on, never jump ahead. */
+    linear?: boolean;
+    /**
+     * Names for everything the spine says out loud, as any subset of
+     * `StepperLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * A whole application's language belongs in that vocabulary rather than
+     * here. This is the per-instance correction, and the key it exists for is
+     * `group`: a page with two flows on it needs each named for what it steps
+     * through.
+     */
+    labels?: LabelOverrides<StepperLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The current step, 1-based. Omit it and Stepper owns its own position. */
+    modelValue?: number;
+    /** The ordered steps. Their index decides their number; there is no id to keep. */
+    steps: StepperStep[];
+    /** The axis the spine runs along; vertical moves the titles beside the indicators. */
+    orientation?: StepperOrientation;
+    /** Locks the flow to its furthest point: a reader may go back, or one step on, never jump ahead. */
+    linear?: boolean;
+    /**
+     * Names for everything the spine says out loud, as any subset of
+     * `StepperLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * A whole application's language belongs in that vocabulary rather than
+     * here. This is the per-instance correction, and the key it exists for is
+     * `group`: a page with two flows on it needs each named for what it steps
+     * through.
+     */
+    labels?: LabelOverrides<StepperLabels>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+}>, {
+    linear: boolean;
+    orientation: StepperOrientation;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Stepper.vue.d.ts.map

package/dist/packages/primitives/stepper/src/Stepper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,206 @@
+import { cn } from "../../../core/src/cn.js";
+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 "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
+import { Check } from "@lucide/vue";
+import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from "reka-ui";
+//#region packages/primitives/stepper/src/Stepper.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "aria-hidden": "true" };
+var _hoisted_2 = { class: "sr-only" };
+var _hoisted_3 = {
+	"data-loom-live": "",
+	role: "status",
+	"aria-live": "polite",
+	"aria-atomic": "true",
+	class: "sr-only"
+};
+/**
+
+/**
+* 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.
+*
+* `group` is capitalised where Reka's is not, which is what lets
+* `Stepper.test.ts` assert whose string reached the DOM rather than merely
+* what it said.
+*/
+var STEPPER_LABELS = {
+	group: "Progress",
+	position: ({ step, stepCount }) => `Step ${String(step)} of ${String(stepCount)}`,
+	completed: ({ title }) => `${title} (completed)`
+};
+var Stepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Stepper",
+	props: {
+		modelValue: {},
+		steps: {},
+		orientation: { default: "horizontal" },
+		linear: {
+			type: Boolean,
+			default: false
+		},
+		labels: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("stepper", STEPPER_LABELS, () => props.labels);
+		const { attrs, rest: rootAttrs } = useSplitAttrs();
+		/**
+		* The two layouts, side by side rather than as template branches that drift
+		* apart. `satisfies` is what stops an orientation being added to the type and
+		* forgotten here.
+		*
+		* Horizontal hangs the connector off the item box (`relative`) rather than
+		* off the rail: `left-1/2 w-full` then spans exactly the distance between two
+		* indicator centres, since the items are equal-width flex children. It is
+		* drawn behind them — the trigger is `relative`, so it and every later item's
+		* trigger paint over a line that runs under the circles.
+		*/
+		const LAYOUTS = {
+			horizontal: {
+				root: "flex w-full items-start",
+				item: "relative flex flex-1 flex-col items-center gap-2 text-center",
+				rail: "",
+				separator: "absolute left-1/2 top-4 h-0.5 w-full -translate-y-1/2",
+				fill: "origin-left scale-x-0",
+				filled: "scale-x-100",
+				text: "flex flex-col gap-0.5"
+			},
+			vertical: {
+				root: "flex flex-col",
+				item: "flex gap-3",
+				rail: "flex flex-col items-center self-stretch",
+				separator: "order-1 my-1 w-0.5 flex-1",
+				fill: "origin-top scale-y-0",
+				filled: "scale-y-100",
+				text: "flex flex-col gap-0.5"
+			}
+		};
+		const layout = computed(() => LAYOUTS[props.orientation]);
+		/** The step that last held focus, and so owns the spine's single tab stop. */
+		const focused = ref(null);
+		/**
+		* Reka's own focusability rule, mirrored: a linear stepper refuses focus to
+		* anything past one step ahead of where the reader is. It has to be repeated
+		* rather than read off the DOM, because the tab stop is decided while the
+		* `tabindex` attributes are still being rendered — and a tab stop parked on a
+		* step Reka will not focus leaves the whole spine unreachable by Tab.
+		*/
+		function focusable(step, current) {
+			if (props.steps[step - 1]?.disabled) return false;
+			return props.linear ? step <= current + 1 : true;
+		}
+		/**
+		* The one step whose trigger is tabbable. Everything else is `tabindex="-1"`.
+		*
+		* Reka types the value it hands its own slot as possibly absent even though
+		* `StepperRoot` defaults it to 1, so the fallback here is that declaration
+		* being honoured rather than a state this can reach.
+		*/
+		function tabStop(current) {
+			const at = current ?? 1;
+			if (focused.value !== null && focusable(focused.value, at)) return focused.value;
+			if (focusable(at, at)) return at;
+			return props.steps.findIndex((_, index) => focusable(index + 1, at)) + 1;
+		}
+		/**
+		* Reka points every trigger's `aria-describedby` at a description id whether
+		* or not that description was rendered, and a reference resolving to nothing
+		* is worse than no reference: it claims a description exists. Binding the key
+		* as `undefined` is what takes it back off, since an attribute set to
+		* `undefined` is removed rather than merged.
+		*/
+		function describedBy(step) {
+			return step.description === void 0 ? { "aria-describedby": void 0 } : {};
+		}
+		/** Reka reports its position as possibly absent; this component's model is a step number or nothing at all. */
+		function onUpdate(value) {
+			if (value !== void 0) emit("update:modelValue", value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(StepperRoot), mergeProps({
+				"aria-label": unref(text).group,
+				...unref(rootAttrs),
+				...unref(optional)({ modelValue: __props.modelValue })
+			}, {
+				"data-loom-stepper": "",
+				orientation: __props.orientation,
+				linear: __props.linear,
+				class: unref(cn)(layout.value.root, unref(attrs).class),
+				"onUpdate:modelValue": onUpdate
+			}), {
+				default: withCtx(({ modelValue: current }) => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step, index) => {
+					return openBlock(), createBlock(unref(StepperItem), {
+						key: index,
+						step: index + 1,
+						disabled: step.disabled ?? false,
+						"aria-current": void 0,
+						class: normalizeClass(layout.value.item)
+					}, {
+						default: withCtx(({ state }) => [createElementVNode("div", { class: normalizeClass(layout.value.rail) }, [index < __props.steps.length - 1 ? (openBlock(), createBlock(unref(StepperSeparator), {
+							key: 0,
+							class: normalizeClass(unref(cn)("overflow-hidden rounded-full bg-border", layout.value.separator))
+						}, {
+							default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(cn)("block h-full w-full bg-primary transition-transform ease-out", layout.value.fill, state === "completed" && layout.value.filled)) }, null, 2)]),
+							_: 2
+						}, 1032, ["class"])) : createCommentVNode("", true), createVNode(unref(StepperTrigger), mergeProps({ ref_for: true }, describedBy(step), {
+							tabindex: tabStop(current) === index + 1 ? 0 : -1,
+							"aria-current": state === "active" ? "step" : void 0,
+							class: unref(cn)("relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-medium", "transition-colors ease-out", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", step.disabled ? "border-border-strong bg-muted text-muted-foreground" : ["data-[state=inactive]:border-input data-[state=inactive]:bg-background data-[state=inactive]:text-muted-foreground", "data-[state=inactive]:enabled:hover:bg-subtle"], "data-[state=active]:border-primary data-[state=active]:bg-primary-muted data-[state=active]:text-primary-text", "data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground", "disabled:cursor-not-allowed"),
+							onFocus: ($event) => focused.value = index + 1
+						}), {
+							default: withCtx(() => [createVNode(unref(StepperIndicator), { class: "flex items-center justify-center" }, {
+								default: withCtx(() => [state === "completed" ? (openBlock(), createBlock(unref(Check), {
+									key: 0,
+									class: "h-4 w-4 animate-scale-in"
+								})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(index + 1), 1)], 64))]),
+								_: 2
+							}, 1024)]),
+							_: 2
+						}, 1040, [
+							"tabindex",
+							"aria-current",
+							"class",
+							"onFocus"
+						])], 2), createElementVNode("div", { class: normalizeClass(unref(cn)(layout.value.text, __props.orientation === "vertical" && index < __props.steps.length - 1 && "pb-6")) }, [createVNode(unref(StepperTitle), {
+							as: "span",
+							class: normalizeClass(unref(cn)("text-sm font-medium", step.disabled ? "text-muted-foreground" : "text-foreground"))
+						}, {
+							default: withCtx(() => [state === "completed" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_1, toDisplayString(step.title), 1), createElementVNode("span", _hoisted_2, toDisplayString(unref(text).completed({ title: step.title })), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(step.title), 1)], 64))]),
+							_: 2
+						}, 1032, ["class"]), step.description ? (openBlock(), createBlock(unref(StepperDescription), {
+							key: 0,
+							class: "text-xs text-muted-foreground"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(step.description), 1)]),
+							_: 2
+						}, 1024)) : createCommentVNode("", true)], 2)]),
+						_: 2
+					}, 1032, [
+						"step",
+						"disabled",
+						"class"
+					]);
+				}), 128)), createElementVNode("span", _hoisted_3, toDisplayString(unref(text).position({
+					step: current ?? 1,
+					stepCount: __props.steps.length
+				})), 1)]),
+				_: 1
+			}, 16, [
+				"orientation",
+				"linear",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { STEPPER_LABELS, Stepper_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Stepper.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/stepper/src/Stepper.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/stepper/src/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { StepperLabels } 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 *\n * `group` is capitalised where Reka's is not, which is what lets\n * `Stepper.test.ts` assert whose string reached the DOM rather than merely\n * what it said.\n */\nexport const STEPPER_LABELS: StepperLabels = {\n  group: \"Progress\",\n  position: ({ step, stepCount }) => `Step ${String(step)} of ${String(stepCount)}`,\n  completed: ({ title }) => `${title} (completed)`,\n};\n\n/** One step in the spine. Its `title` is also the accessible name of that step's trigger. */\nexport interface StepperStep {\n  /** The step's label, shown next to its indicator and read out as the trigger's name. */\n  title: string;\n  /** A line under the title saying what the step asks for. Omit it for a bare spine. */\n  description?: string;\n  /** Present but unreachable: the indicator greys and the title mutes, and neither pointer nor keyboard can select it. */\n  disabled?: boolean;\n}\n\n/** The axis the spine runs along, which also decides which arrow keys move between steps. */\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport {\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperRoot,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"reka-ui\";\nimport { Check } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Stepper — the progress spine of a multi-step flow: a checkout, an\n * onboarding sequence, a wizard. It says how many steps there are, which one\n * a reader is on, and which are behind them; the step's own content is the\n * host's, rendered next to or under the spine.\n *\n * It is **not** a number stepper. A numeric value with increment and\n * decrement buttons is NumberField. The word is genuinely ambiguous and both\n * controls answer to it, so the two are worth naming together: this one is\n * about position in a flow, that one is about a quantity.\n *\n * Progress shows one bar for one task whose extent is a percentage — reach\n * for it when the stages have no names worth showing. Tabs switches between\n * panels that have no order at all; a stepper's steps are ordered by\n * definition, which is why it carries a connector and Tabs carries none.\n *\n * Built on Reka UI's Stepper, which supplies the item state machine\n * (completed / active / inactive), the `linear` reachability rule and\n * arrow-key navigation along the orientation's axis.\n *\n * Three things are added on top of it.\n *\n * The first is the roving tab stop. Reka gives *every* focusable trigger\n * `tabindex=\"0\"`, so a five-step spine would be five Tab stops — the defect\n * the accessibility bar names outright. The `tabindex` bound below overrides\n * Reka's, leaving exactly one trigger tabbable at a time (the one last\n * focused, else the current step); Reka's own arrow-key handler still moves\n * real focus between them, which `tabindex=\"-1\"` does not prevent.\n *\n * The second is where `aria-current` sits. Reka puts `aria-current=\"true\"` on\n * the item wrapper, a `div` with no role that a reader never lands on, so the\n * marking is not conveyed at the moment it matters. It is moved here onto the\n * trigger — the element that takes focus — and given the value the WAI-ARIA\n * pattern asks for on a step in a process.\n *\n * The third is the live region. Reka renders one of its own on the root and\n * writes \"Step N of M\" into it as a **text node inside its render function** —\n * not a prop, not a slot, not an attribute — which makes it the one string in\n * this library that no binding on Loom's side can replace. So Loom renders its\n * own alongside it and takes Reka's out of the accessibility tree from\n * `src/styles/global.css`, which carries that reasoning and the coupling it\n * creates. `e2e/stepper.e2e.ts` is what keeps the coupling honest: it asserts\n * that a Loom stepper has exactly one live region and that its words are\n * Loom's.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current step, 1-based. Omit it and Stepper owns its own position. */\n    modelValue?: number;\n    /** The ordered steps. Their index decides their number; there is no id to keep. */\n    steps: StepperStep[];\n    /** The axis the spine runs along; vertical moves the titles beside the indicators. */\n    orientation?: StepperOrientation;\n    /** Locks the flow to its furthest point: a reader may go back, or one step on, never jump ahead. */\n    linear?: boolean;\n    /**\n     * Names for everything the spine says out loud, as any subset of\n     * `StepperLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * A whole application's language belongs in that vocabulary rather than\n     * here. This is the per-instance correction, and the key it exists for is\n     * `group`: a page with two flows on it needs each named for what it steps\n     * through.\n     */\n    labels?: LabelOverrides<StepperLabels>;\n  }>(),\n  { orientation: \"horizontal\", linear: false },\n);\n\nconst emit = defineEmits<{\n  /** The step chosen, 1-based. Fires for a trigger click and for Enter/Space on one. */\n  \"update:modelValue\": [value: number];\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(\"stepper\", STEPPER_LABELS, () => props.labels);\n\n// The root renders a real element and it is the one every fallthrough\n// attribute belongs on: it is the `role=\"group\"` the whole spine lives in, so\n// an `aria-label` naming the flow lands there. It is spread *after*\n// `text.group` in the template for that reason — the vocabulary supplies the\n// name a spine has when nobody names it, and a caller who does name one still\n// wins. `class` is pulled out of the spread and merged through `cn()` instead,\n// so a caller's layout utility resolves against the root's own rather than\n// merely being concatenated after it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: rootAttrs } = useSplitAttrs();\n\n/**\n * The two layouts, side by side rather than as template branches that drift\n * apart. `satisfies` is what stops an orientation being added to the type and\n * forgotten here.\n *\n * Horizontal hangs the connector off the item box (`relative`) rather than\n * off the rail: `left-1/2 w-full` then spans exactly the distance between two\n * indicator centres, since the items are equal-width flex children. It is\n * drawn behind them — the trigger is `relative`, so it and every later item's\n * trigger paint over a line that runs under the circles.\n */\nconst LAYOUTS = {\n  horizontal: {\n    root: \"flex w-full items-start\",\n    item: \"relative flex flex-1 flex-col items-center gap-2 text-center\",\n    rail: \"\",\n    separator: \"absolute left-1/2 top-4 h-0.5 w-full -translate-y-1/2\",\n    fill: \"origin-left scale-x-0\",\n    filled: \"scale-x-100\",\n    text: \"flex flex-col gap-0.5\",\n  },\n  vertical: {\n    root: \"flex flex-col\",\n    item: \"flex gap-3\",\n    rail: \"flex flex-col items-center self-stretch\",\n    // `order-1` rather than a second template branch: the connector has to be\n    // declared before the trigger so the trigger paints over it, and has to sit\n    // below the trigger once the rail is a column.\n    separator: \"order-1 my-1 w-0.5 flex-1\",\n    fill: \"origin-top scale-y-0\",\n    filled: \"scale-y-100\",\n    text: \"flex flex-col gap-0.5\",\n  },\n} satisfies Record<StepperOrientation, Record<string, string>>;\n\nconst layout = computed(() => LAYOUTS[props.orientation]);\n\n/** The step that last held focus, and so owns the spine's single tab stop. */\nconst focused = ref<number | null>(null);\n\n/**\n * Reka's own focusability rule, mirrored: a linear stepper refuses focus to\n * anything past one step ahead of where the reader is. It has to be repeated\n * rather than read off the DOM, because the tab stop is decided while the\n * `tabindex` attributes are still being rendered — and a tab stop parked on a\n * step Reka will not focus leaves the whole spine unreachable by Tab.\n */\nfunction focusable(step: number, current: number): boolean {\n  if (props.steps[step - 1]?.disabled) return false;\n  return props.linear ? step <= current + 1 : true;\n}\n\n/**\n * The one step whose trigger is tabbable. Everything else is `tabindex=\"-1\"`.\n *\n * Reka types the value it hands its own slot as possibly absent even though\n * `StepperRoot` defaults it to 1, so the fallback here is that declaration\n * being honoured rather than a state this can reach.\n */\nfunction tabStop(current: number | undefined): number {\n  const at = current ?? 1;\n  if (focused.value !== null && focusable(focused.value, at)) return focused.value;\n  if (focusable(at, at)) return at;\n  return props.steps.findIndex((_, index) => focusable(index + 1, at)) + 1;\n}\n\n/**\n * Reka points every trigger's `aria-describedby` at a description id whether\n * or not that description was rendered, and a reference resolving to nothing\n * is worse than no reference: it claims a description exists. Binding the key\n * as `undefined` is what takes it back off, since an attribute set to\n * `undefined` is removed rather than merged.\n */\nfunction describedBy(step: StepperStep): Record<string, undefined> {\n  return step.description === undefined ? { \"aria-describedby\": undefined } : {};\n}\n\n/** Reka reports its position as possibly absent; this component's model is a step number or nothing at all. */\nfunction onUpdate(value: number | undefined): void {\n  if (value !== undefined) emit(\"update:modelValue\", value);\n}\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"{ modelValue: current }\"\n    v-bind=\"{ 'aria-label': text.group, ...rootAttrs, ...optional({ modelValue }) }\"\n    data-loom-stepper\n    :orientation=\"orientation\"\n    :linear=\"linear\"\n    :class=\"cn(layout.root, attrs.class as string)\"\n    @update:model-value=\"onUpdate\"\n  >\n    <StepperItem\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      v-slot=\"{ state }\"\n      :step=\"index + 1\"\n      :disabled=\"step.disabled ?? false\"\n      :aria-current=\"undefined\"\n      :class=\"layout.item\"\n    >\n      <div :class=\"layout.rail\">\n        <!-- Declared before the trigger so the trigger paints over it: the\n             connector runs from this indicator's centre to the next one's. -->\n        <StepperSeparator\n          v-if=\"index < steps.length - 1\"\n          :class=\"cn('overflow-hidden rounded-full bg-border', layout.separator)\"\n        >\n          <span\n            :class=\"\n              cn(\n                'block h-full w-full bg-primary transition-transform ease-out',\n                layout.fill,\n                state === 'completed' && layout.filled,\n              )\n            \"\n          />\n        </StepperSeparator>\n\n        <StepperTrigger\n          v-bind=\"describedBy(step)\"\n          :tabindex=\"tabStop(current) === index + 1 ? 0 : -1\"\n          :aria-current=\"state === 'active' ? 'step' : undefined\"\n          :class=\"\n            cn(\n              'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-medium',\n              'transition-colors ease-out',\n              'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n              // Unavailable is a *colour*, and the whole distinction lives on\n              // the indicator. It used to be `opacity-50` on the item, which\n              // took the title and the description down with it:\n              // `--color-muted-foreground` is 5.76:1 on white and 2.11:1 once\n              // composited at half alpha, so the one thing that had to stay\n              // readable was the one thing the fade broke. A grey-filled disc\n              // against the inactive step's white one says the same thing and\n              // costs nothing, and every string below is a measured pair.\n              //\n              // Keyed off the prop and NOT off `data-[disabled]:`, because in\n              // a linear flow Reka marks every step past the next one disabled\n              // — painting all of them unavailable reads as broken rather than\n              // as later, and a step that is merely ahead already says so by\n              // being inactive. The branch also keeps the two apart in the\n              // cascade: the inactive rules carry an attribute selector, so a\n              // plain `bg-muted` alongside them would lose.\n              step.disabled\n                ? 'border-border-strong bg-muted text-muted-foreground'\n                : [\n                    'data-[state=inactive]:border-input data-[state=inactive]:bg-background data-[state=inactive]:text-muted-foreground',\n                    'data-[state=inactive]:enabled:hover:bg-subtle',\n                  ],\n              'data-[state=active]:border-primary data-[state=active]:bg-primary-muted data-[state=active]:text-primary-text',\n              'data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground',\n              'disabled:cursor-not-allowed',\n            )\n          \"\n          @focus=\"focused = index + 1\"\n        >\n          <StepperIndicator class=\"flex items-center justify-center\">\n            <!-- Three states, none of them colour alone: the check is a shape\n                 change, the number is text, and the current step carries\n                 `aria-current` above. -->\n            <Check v-if=\"state === 'completed'\" class=\"h-4 w-4 animate-scale-in\" />\n            <template v-else>{{ index + 1 }}</template>\n          </StepperIndicator>\n        </StepperTrigger>\n      </div>\n\n      <div\n        :class=\"cn(layout.text, orientation === 'vertical' && index < steps.length - 1 && 'pb-6')\"\n      >\n        <!-- `as=\"span\"`, not Reka's default `h4`: a step label is not a\n             section heading, and a component cannot know what heading level\n             the page it lands in has room for. -->\n        <!-- The title mutes rather than fades: `--color-muted-foreground` is a\n             measured 5.76:1 on the card it sits on, two steps back from\n             `--color-foreground` and still comfortably readable. The\n             description below is already that colour and stays there — an\n             unreachable step's description is the one line a reader most needs\n             in order to find out why it is unreachable. -->\n        <StepperTitle\n          as=\"span\"\n          :class=\"\n            cn('text-sm font-medium', step.disabled ? 'text-muted-foreground' : 'text-foreground')\n          \"\n        >\n          <!-- ARIA has a value for \"you are here\" and none for \"done\", and the\n               check glyph is invisible to a screen reader. This element is what\n               `aria-labelledby` names the trigger with, so the word has to join\n               the name from inside it.\n               Two nodes rather than the title plus a trailing \"(completed)\"\n               span, because a suffix is Loom deciding where a qualifier sits\n               relative to the thing it qualifies, and that is a property of the\n               language. The visible half is `aria-hidden` and excluded from the\n               name computation; the hidden half carries the whole finished\n               sentence the vocabulary returned. -->\n          <template v-if=\"state === 'completed'\">\n            <span aria-hidden=\"true\">{{ step.title }}</span>\n            <span class=\"sr-only\">{{ text.completed({ title: step.title }) }}</span>\n          </template>\n          <template v-else>{{ step.title }}</template>\n        </StepperTitle>\n        <StepperDescription v-if=\"step.description\" class=\"text-xs text-muted-foreground\">\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n\n    <!-- Loom's own position announcement, standing in for the one `StepperRoot`\n         renders as a text node its render function hard-codes in English.\n         `data-loom-live` is what the rule in `global.css` selects *around* when\n         it removes Reka's from the accessibility tree, so the two are told\n         apart by what Loom marked rather than by DOM order.\n         The count comes from `steps` rather than from Reka's registry, which\n         fills in over a tick as each trigger mounts — the same number, one\n         render sooner, which matters for a region a screen reader reads on\n         arrival. -->\n    <span data-loom-live role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{\n      text.position({ step: current ?? 1, stepCount: steps.length })\n    }}</span>\n  </StepperRoot>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+export { default, STEPPER_LABELS } from "./Stepper.vue";
+export type { StepperStep, StepperOrientation } from "./Stepper.vue";
+export type { StepperLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+import { STEPPER_LABELS } from "./Stepper.vue_vue_type_script_setup_true_lang.js";
+import Stepper_default from "./Stepper.js";
+export { STEPPER_LABELS, Stepper_default as default };

package/dist/packages/primitives/surface/src/Surface.js

@@ -0,0 +1,7 @@
+import Surface_vue_vue_type_script_setup_true_lang_default, { surfaceVariants } from "./Surface.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/surface/src/Surface.vue
+var Surface_default = Surface_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Surface_default as default, surfaceVariants };
+
+//# sourceMappingURL=Surface.js.map

package/dist/packages/primitives/surface/src/Surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.js","names":[],"sources":["../../../../../packages/primitives/surface/src/Surface.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Surface — the panel/card primitive. Elevation is expressed by hairline\n * borders and background lightness, not heavy shadows (Loom principle:\n * \"hairline over shadow\"): on the paper-light ground a white `card` already\n * reads as raised, so only `overlay` carries a real shadow.\n */\nexport type SurfaceElevation = \"card\" | \"muted\" | \"overlay\";\n\nexport type SurfacePad = \"none\" | \"sm\" | \"md\" | \"lg\";\n\nexport const surfaceVariants = cva(\"rounded-lg transition-colors duration-fast\", {\n  variants: {\n    variant: {\n      card: \"bg-card text-card-foreground border border-border\",\n      muted: \"bg-muted text-foreground border border-transparent\",\n      overlay: \"bg-popover text-popover-foreground border border-border shadow-md\",\n    } satisfies Record<SurfaceElevation, string>,\n    pad: {\n      none: \"p-0\",\n      sm: \"p-3\",\n      md: \"p-4\",\n      lg: \"p-6\",\n    } satisfies Record<SurfacePad, string>,\n    // The ONE hover/press language for clickable rows and cards (a list row,\n    // a picker card): lift by fill, hairline asserts, cursor signals — so\n    // views stop hand-rolling their own `hover:bg-subtle` treatments. The\n    // Surface stays a div; the host owns the actual click/role/tabindex.\n    interactive: {\n      true: \"cursor-pointer hover:bg-subtle/60 hover:border-border-strong active:bg-subtle\",\n    },\n  },\n  defaultVariants: { variant: \"card\", pad: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** How the panel reads on the paper-light ground: a raised card, a recessed panel, or a floating overlay. */\n    variant?: SurfaceElevation;\n    /** Built-in inner padding, so a caller need not remember the spacing token. */\n    pad?: SurfacePad;\n    /** Clickable-surface language: hover fill lift, strong hairline, cursor. The host owns the click handler. */\n    interactive?: boolean;\n  }>(),\n  { variant: \"card\", pad: \"md\", interactive: false },\n);\n</script>\n\n<template>\n  <div :class=\"cn(surfaceVariants({ variant, pad, interactive }))\"><slot /></div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/surface/src/Surface.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/surface/src/Surface.vue"],"names":[],"mappings":"AAiEA;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,eAAO,MAAM,eAAe;;;;8EAsB1B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,6GAA6G;cACnG,gBAAgB;IAC1B,+EAA+E;UACzE,UAAU;IAChB,6GAA6G;kBAC/F,OAAO;;IALrB,6GAA6G;cACnG,gBAAgB;IAC1B,+EAA+E;UACzE,UAAU;IAChB,6GAA6G;kBAC/F,OAAO;;aAJX,gBAAgB;SAEpB,UAAU;iBAEF,OAAO;;cAkCX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/primitives/surface/src/Surface.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/surface/src/Surface.vue?vue&type=script&setup=true&lang.ts
+var surfaceVariants = cva("rounded-lg transition-colors duration-fast", {
+	variants: {
+		variant: {
+			card: "bg-card text-card-foreground border border-border",
+			muted: "bg-muted text-foreground border border-transparent",
+			overlay: "bg-popover text-popover-foreground border border-border shadow-md"
+		},
+		pad: {
+			none: "p-0",
+			sm: "p-3",
+			md: "p-4",
+			lg: "p-6"
+		},
+		interactive: { true: "cursor-pointer hover:bg-subtle/60 hover:border-border-strong active:bg-subtle" }
+	},
+	defaultVariants: {
+		variant: "card",
+		pad: "md"
+	}
+});
+var Surface_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Surface",
+	props: {
+		variant: { default: "card" },
+		pad: { default: "md" },
+		interactive: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)(unref(surfaceVariants)({
+				variant: __props.variant,
+				pad: __props.pad,
+				interactive: __props.interactive
+			}))) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { Surface_vue_vue_type_script_setup_true_lang_default as default, surfaceVariants };
+
+//# sourceMappingURL=Surface.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/surface/src/Surface.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/surface/src/Surface.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Surface — the panel/card primitive. Elevation is expressed by hairline\n * borders and background lightness, not heavy shadows (Loom principle:\n * \"hairline over shadow\"): on the paper-light ground a white `card` already\n * reads as raised, so only `overlay` carries a real shadow.\n */\nexport type SurfaceElevation = \"card\" | \"muted\" | \"overlay\";\n\nexport type SurfacePad = \"none\" | \"sm\" | \"md\" | \"lg\";\n\nexport const surfaceVariants = cva(\"rounded-lg transition-colors duration-fast\", {\n  variants: {\n    variant: {\n      card: \"bg-card text-card-foreground border border-border\",\n      muted: \"bg-muted text-foreground border border-transparent\",\n      overlay: \"bg-popover text-popover-foreground border border-border shadow-md\",\n    } satisfies Record<SurfaceElevation, string>,\n    pad: {\n      none: \"p-0\",\n      sm: \"p-3\",\n      md: \"p-4\",\n      lg: \"p-6\",\n    } satisfies Record<SurfacePad, string>,\n    // The ONE hover/press language for clickable rows and cards (a list row,\n    // a picker card): lift by fill, hairline asserts, cursor signals — so\n    // views stop hand-rolling their own `hover:bg-subtle` treatments. The\n    // Surface stays a div; the host owns the actual click/role/tabindex.\n    interactive: {\n      true: \"cursor-pointer hover:bg-subtle/60 hover:border-border-strong active:bg-subtle\",\n    },\n  },\n  defaultVariants: { variant: \"card\", pad: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** How the panel reads on the paper-light ground: a raised card, a recessed panel, or a floating overlay. */\n    variant?: SurfaceElevation;\n    /** Built-in inner padding, so a caller need not remember the spacing token. */\n    pad?: SurfacePad;\n    /** Clickable-surface language: hover fill lift, strong hairline, cursor. The host owns the click handler. */\n    interactive?: boolean;\n  }>(),\n  { variant: \"card\", pad: \"md\", interactive: false },\n);\n</script>\n\n<template>\n  <div :class=\"cn(surfaceVariants({ variant, pad, interactive }))\"><slot /></div>\n</template>\n"],"mappings":";;;;;AAaA,IAAa,kBAAkB,IAAI,8CAA8C;CAC/E,UAAU;EACR,SAAS;GACP,MAAM;GACN,OAAO;GACP,SAAS;EACX;EACA,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAKA,aAAa,EACX,MAAM,gFACR;CACF;CACA,iBAAiB;EAAE,SAAS;EAAQ,KAAK;CAAK;AAChD,CAAC;;;;;;;;;;;;;GAoBC,OAAA,UAAA,GAAA,mBAA+E,OAAA,EAAzE,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,eAAA,CAAe,CAAA;IAAA,SAAG,QAAA;IAAO,KAAE,QAAA;IAAG,aAAE,QAAA;GAAW,CAAA,CAAA,CAAA,EAAA,GAAA,CAAM,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,3 @@
+export { default, surfaceVariants } from "./Surface.vue";
+export type { SurfaceElevation, SurfacePad } from "./Surface.vue";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+import { surfaceVariants } from "./Surface.vue_vue_type_script_setup_true_lang.js";
+import Surface_default from "./Surface.js";
+export { Surface_default as default, surfaceVariants };

package/dist/packages/primitives/switch/src/Switch.js

@@ -0,0 +1,7 @@
+import Switch_vue_vue_type_script_setup_true_lang_default from "./Switch.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/switch/src/Switch.vue
+var Switch_default = Switch_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Switch_default as default };
+
+//# sourceMappingURL=Switch.js.map

package/dist/packages/primitives/switch/src/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../../../packages/primitives/switch/src/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SwitchRoot, SwitchThumb } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Switch — toggles a boolean setting that takes effect immediately, with no\n * \"Save\" step. Built on Reka UI's Switch for role=\"switch\" + aria-checked +\n * Space/Enter. Label and description live on the surrounding setting row —\n * wire them in with `aria-labelledby`, since Switch renders a button, not a\n * labelable input.\n *\n * Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the\n * wiring stops being the caller's job: `useFieldControl()` puts the row's id on\n * the button — labelable, so the row's `<label for>` names the control that has\n * no name of its own — and brings the row's description, `name`, `required` and\n * `invalid` with it.\n *\n * There is no `readonly` here, and a row's is ignored rather than approximated.\n * A switch that cannot be flipped is disabled; one that looks live and refuses\n * the flip is the only state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Whether the setting is currently on. Omit to let the switch own its own state. */\n    modelValue?: boolean | undefined;\n    /** Blocks both click and keyboard input, and drains the control to the neutral well. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false` — see Checkbox: a concrete default claims host ownership and\n    // leaves an unbound switch emitting updates while never moving.\n    modelValue: undefined,\n    // Not `false` either: absent has to stay tellable from `false` for a Field\n    // above to disable the row and for `:disabled=\"false\"` to overrule one that\n    // does. Vue casts an absent Boolean prop with no declared default to\n    // `false`, which would leave the context wired and inert.\n    disabled: undefined,\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: switchAttrs } = useSplitAttrs();\n\n// One rendered node, so the split is only about `class` — a caller's class\n// needs a Tailwind-aware merge rather than Vue's concatenating fallthrough.\n//\n// `id` and `aria-describedby` arrive as fallthrough attrs rather than props, so\n// they are handed in as this caller's own values; `field.attrs` then spreads\n// **after** `switchAttrs`, and that position is the contract (see\n// TextField.vue). `name` in that bag reaches SwitchRoot's own `name` prop,\n// which is what mints the hidden input a `<form>` submits.\n//\n// `name`, `required` and `invalid` are omitted below because Switch has no prop\n// for any of them: the row's answer stands unopposed. `readonly` is omitted for\n// the reason the docblock gives.\n//\n// The resolved `required` then reaches the element through Reka's own prop\n// rather than the `aria-required` in `field.attrs` — see Checkbox.vue, which\n// carries the reasoning. SwitchRoot happens to spread the fallthrough last, so\n// the attribute would win here; going through the prop keeps the four\n// Reka-rooted controls one shape instead of four merge orders to re-derive.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"{ modelValue, ...switchAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :class=\"\n      cn(\n        'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent',\n        'transition-[background-color,filter,box-shadow] duration-instant ease-out',\n        'hover:brightness-95',\n        // Checked = a decision (Loom law): the track fills with primary.\n        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30',\n        // Focus draws the weave tight: the brand ring blooms.\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n        // Drained, not dimmed. `opacity-50` faded track and thumb together,\n        // compositing both below their measured contrast — the same failure\n        // Button records for its own dim. The unchecked track falls to\n        // `bg-muted`, the well every unavailable control drains to, with the\n        // rim Chip slackens to; a *checked* one keeps its primary fill,\n        // because switched-on is information (Chip and Pagination keep the\n        // wash a selected control already wears) and the native `disabled`\n        // attribute carries unavailability to assistive tech regardless.\n        // The compound `disabled:data-[state=unchecked]:` form is deliberate:\n        // Tailwind sorts data variants after plain `disabled:`, so a bare\n        // `disabled:bg-muted` would lose to `data-[state=unchecked]:bg-*` and\n        // never fire.\n        'disabled:cursor-not-allowed disabled:data-[state=unchecked]:bg-muted disabled:data-[state=unchecked]:border-border',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <SwitchThumb\n      style=\"transition: transform var(--duration-fast) var(--ease-spring)\"\n      :class=\"\n        cn(\n          'absolute top-1/2 left-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm',\n          'active:scale-x-[1.15] active:scale-y-[0.85]',\n          // The travel is a translate, not a `left` change: animating an inset\n          // property relayouts the track on every frame of the slide, while a\n          // transform stays on the compositor. The distance is the checked\n          // inset (1.125rem) minus the resting one (left-0.5), and the\n          // -translate-y-1/2 above composes with it — Tailwind's translate\n          // utilities stack rather than overwrite.\n          'data-[state=checked]:translate-x-[1rem]',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"],"mappings":""}