@ecoma-io/loom 0.5.0 → 0.6.0

package/dist/patterns/app-header/src/AppHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import { createCommentVNode, createElementBlock, defineComponent, openBlock, renderSlot } from "vue";
+//#region packages/patterns/app-header/src/AppHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	key: 0,
+	class: "flex shrink-0 items-center gap-2"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "order-last min-w-0 basis-full sm:order-none sm:max-w-sm sm:flex-1 sm:basis-auto lg:max-w-md"
+};
+var _hoisted_4 = {
+	key: 2,
+	class: "ml-auto flex shrink-0 items-center gap-1 sm:gap-2"
+};
+var AppHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "AppHeader",
+	props: { ariaLabel: {} },
+	setup(__props) {
+		/**
+		* AppHeader — the web app's TOP BAR: the shell-level strip that stays on
+		* screen above every surface, distinct from two components it is easy to
+		* confuse with:
+		*
+		* - **`PageHeader`** — a surface's own pinned title band, sitting *inside*
+		*   the content area this bar sits above.
+		* - **`TitleBar`** — the desktop window's native chrome (drag region, window
+		*   controls). This bar is browser content, not window furniture.
+		*
+		* Layout is three regions, so callers never hand-tune widths: brand (left) ·
+		* optional search · a trailing cluster for a leading control, notifications, and
+		* the user menu, pushed right by `ml-auto`. Every region is a named slot —
+		* this pattern owns the strip's geometry and elevation, never its content or
+		* behavior.
+		*
+		* The trailing cluster is pushed right by its own `ml-auto`, not by a spacer
+		* element. A spacer works, but it is a second `flex-1` beside the search
+		* field, so the two end up splitting the free space instead of the field
+		* taking what is actually left; `ml-auto` costs no element and no width, and
+		* keeps the cluster flush right even when no search is slotted at all.
+		*
+		* **Below `sm` the bar is two rows, and that is the point of this pattern's
+		* responsive behavior.** A brand, a real search field, and a leading control +
+		* notifications + account cluster do not fit across a 390px viewport: on
+		* that width the search field is left about 60px and renders as a magnifier
+		* glyph pressed against the org name — a control that is technically present
+		* and practically unusable. So the search takes a full-width second row
+		* (`basis-full` + `order-last`), the header height goes from fixed to
+		* `min-h-14`, and from `sm` up it snaps back to the single `flex-nowrap` row.
+		* Wrapping rather than hiding is deliberate: the host slotted a search
+		* because its users need one, and a pattern does not get to decide they need
+		* it less on a phone.
+		*
+		* The `order-last` is the one thing to keep in mind if this changes: it
+		* moves the search visually below the cluster while leaving it before the
+		* cluster in the DOM, so on a phone the tab order reaches search first. That
+		* is the better of the two mismatches — search is the more-used control —
+		* but it is a mismatch, so do not extend `order-*` to the other regions.
+		*
+		* **Pinned, and separated by a hairline — never a shadow.** It sits on
+		* `bg-card` (the raised plane), one step above the content it sits over,
+		* unlike `PageHeader` which shares the content's own `bg-background` plane.
+		* Because content scrolls *under* it, the surface is translucent + blurred
+		* so the motion beneath stays legible as depth — the opaque `bg-card` is
+		* declared first and stays the fallback wherever `backdrop-filter` is
+		* unsupported, so the bar is never a see-through smear.
+		*
+		* Widths step rather than hold one value: gutters open up from `sm` and
+		* again on wide desktops (`3xl`, 1920px), where a 16px gutter beside a
+		* 1920px canvas reads as an accident.
+		*
+		* Deliberately neutral: this is shell chrome shared by every user and every
+		* action alike, so it never wears `--primary`/`--accent` — the bar stays
+		* uncommitted until a specific action is happening on the surface below.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("header", {
+				"data-loom-app-header": "",
+				"aria-label": __props.ariaLabel,
+				class: "sticky top-0 z-30 flex min-h-14 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-card px-3 py-2 text-card-foreground backdrop-blur-md supports-[backdrop-filter]:bg-card/80 sm:h-14 sm:flex-nowrap sm:gap-x-3 sm:px-4 sm:py-0 lg:px-6 3xl:h-16 3xl:px-8"
+			}, [
+				_ctx.$slots.brand ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "brand")])) : createCommentVNode("", true),
+				_ctx.$slots.search ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "search")])) : createCommentVNode("", true),
+				_ctx.$slots.leading || _ctx.$slots.notifications || _ctx.$slots.userMenu ? (openBlock(), createElementBlock("div", _hoisted_4, [
+					renderSlot(_ctx.$slots, "leading"),
+					renderSlot(_ctx.$slots, "notifications"),
+					renderSlot(_ctx.$slots, "userMenu")
+				])) : createCommentVNode("", true)
+			], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { AppHeader_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AppHeader.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/app-header/src/AppHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../packages/patterns/app-header/src/AppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * AppHeader — the web app's TOP BAR: the shell-level strip that stays on\n * screen above every surface, distinct from two components it is easy to\n * confuse with:\n *\n * - **`PageHeader`** — a surface's own pinned title band, sitting *inside*\n *   the content area this bar sits above.\n * - **`TitleBar`** — the desktop window's native chrome (drag region, window\n *   controls). This bar is browser content, not window furniture.\n *\n * Layout is three regions, so callers never hand-tune widths: brand (left) ·\n * optional search · a trailing cluster for a leading control, notifications, and\n * the user menu, pushed right by `ml-auto`. Every region is a named slot —\n * this pattern owns the strip's geometry and elevation, never its content or\n * behavior.\n *\n * The trailing cluster is pushed right by its own `ml-auto`, not by a spacer\n * element. A spacer works, but it is a second `flex-1` beside the search\n * field, so the two end up splitting the free space instead of the field\n * taking what is actually left; `ml-auto` costs no element and no width, and\n * keeps the cluster flush right even when no search is slotted at all.\n *\n * **Below `sm` the bar is two rows, and that is the point of this pattern's\n * responsive behavior.** A brand, a real search field, and a leading control +\n * notifications + account cluster do not fit across a 390px viewport: on\n * that width the search field is left about 60px and renders as a magnifier\n * glyph pressed against the org name — a control that is technically present\n * and practically unusable. So the search takes a full-width second row\n * (`basis-full` + `order-last`), the header height goes from fixed to\n * `min-h-14`, and from `sm` up it snaps back to the single `flex-nowrap` row.\n * Wrapping rather than hiding is deliberate: the host slotted a search\n * because its users need one, and a pattern does not get to decide they need\n * it less on a phone.\n *\n * The `order-last` is the one thing to keep in mind if this changes: it\n * moves the search visually below the cluster while leaving it before the\n * cluster in the DOM, so on a phone the tab order reaches search first. That\n * is the better of the two mismatches — search is the more-used control —\n * but it is a mismatch, so do not extend `order-*` to the other regions.\n *\n * **Pinned, and separated by a hairline — never a shadow.** It sits on\n * `bg-card` (the raised plane), one step above the content it sits over,\n * unlike `PageHeader` which shares the content's own `bg-background` plane.\n * Because content scrolls *under* it, the surface is translucent + blurred\n * so the motion beneath stays legible as depth — the opaque `bg-card` is\n * declared first and stays the fallback wherever `backdrop-filter` is\n * unsupported, so the bar is never a see-through smear.\n *\n * Widths step rather than hold one value: gutters open up from `sm` and\n * again on wide desktops (`3xl`, 1920px), where a 16px gutter beside a\n * 1920px canvas reads as an accident.\n *\n * Deliberately neutral: this is shell chrome shared by every user and every\n * action alike, so it never wears `--primary`/`--accent` — the bar stays\n * uncommitted until a specific action is happening on the surface below.\n */\ndefineProps<{\n  /** Accessible name for the `<header>` landmark, for a page with more than one header-like region. */\n  ariaLabel?: string;\n}>();\n</script>\n\n<template>\n  <!-- `data-loom-app-header` is the hook `global.css` uses to add the\n       safe-area inset to the bar's top padding (the same vendor-rule pattern\n       as `[data-loom-titlebar]`): a PWA under a notch or a title-bar overlay\n       must not paint its first row into reserved space. -->\n  <header\n    data-loom-app-header=\"\"\n    :aria-label=\"ariaLabel\"\n    class=\"sticky top-0 z-30 flex min-h-14 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-card px-3 py-2 text-card-foreground backdrop-blur-md supports-[backdrop-filter]:bg-card/80 sm:h-14 sm:flex-nowrap sm:gap-x-3 sm:px-4 sm:py-0 lg:px-6 3xl:h-16 3xl:px-8\"\n  >\n    <div v-if=\"$slots.brand\" class=\"flex shrink-0 items-center gap-2\">\n      <!-- @slot The product mark and name, leftmost. -->\n      <slot name=\"brand\" />\n    </div>\n\n    <!-- Own full-width row below `sm` (see the doc header on `order-last`);\n         from `sm` up it rejoins the row and takes a cap so it never stretches\n         into a banner on a wide canvas. -->\n    <div\n      v-if=\"$slots.search\"\n      class=\"order-last min-w-0 basis-full sm:order-none sm:max-w-sm sm:flex-1 sm:basis-auto lg:max-w-md\"\n    >\n      <!-- @slot The app's global search field. Exactly one control — a filter belongs to `PageHeader` or the content area, not here. -->\n      <slot name=\"search\" />\n    </div>\n\n    <div\n      v-if=\"$slots.leading || $slots.notifications || $slots.userMenu\"\n      class=\"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\"\n    >\n      <!-- @slot A leading control in the trailing cluster — workspace switcher, org selector, breadcrumb, etc. -->\n      <slot name=\"leading\" />\n      <!-- @slot The notifications trigger, between the leading control and the account menu. -->\n      <slot name=\"notifications\" />\n      <!-- @slot The account menu, trailing the cluster. -->\n      <slot name=\"userMenu\" />\n    </div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEE,OAAA,UAAA,GAAA,mBAgCS,UAAA;IA/BP,wBAAqB;IACpB,cAAY,QAAA;IACb,OAAM;;IAEKA,KAAAA,OAAO,SAAlB,UAAA,GAAA,mBAGM,OAHN,YAGM,CADJ,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAOfA,KAAAA,OAAO,UADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAIhBA,KAAAA,OAAO,WAAWA,KAAAA,OAAO,iBAAiBA,KAAAA,OAAO,YADzD,UAAA,GAAA,mBAUM,OAVN,YAUM;KALJ,WAAuB,KAAA,QAAA,SAAA;KAEvB,WAA6B,KAAA,QAAA,eAAA;KAE7B,WAAwB,KAAA,QAAA,UAAA"}

package/dist/patterns/empty-state/src/EmptyState.js

@@ -0,0 +1,7 @@
+import EmptyState_vue_vue_type_script_setup_true_lang_default from "./EmptyState.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/empty-state/src/EmptyState.vue
+var EmptyState_default = EmptyState_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EmptyState_default as default };
+
+//# sourceMappingURL=EmptyState.js.map

package/dist/patterns/empty-state/src/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../../packages/patterns/empty-state/src/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { EMPTY_STATE_STAGGER_STEP_MS, staggerDelay } from \"@ecoma-io/loom-core\";\n\n/**\n * EmptyState — the shape of \"nothing here yet\": icon → title → optional\n * description → at most ONE call-to-action, centered in the empty region. An\n * empty region should explain itself and invite the next step — empty is a\n * welcome, never an error (a failed load renders `InlineError`; an empty\n * *result* renders this).\n *\n * The entrance is a staggered fade-rise film (icon, title, description,\n * action — one 60ms step apart): this is content appearing, not action\n * feedback, so it budgets like a panel rather than against the\n * interaction-feedback ceiling, all token-tier CSS. The step is the\n * empty-state family's own (`EMPTY_STATE_STAGGER_STEP_MS` in core's motion\n * vocabulary) and the delays are computed, not inlined — a stagger the\n * pattern decided alone is a duration family of one, which is how the list\n * staggers drifted before core took them. Purely presentational: the icon\n * comes via the `icon` slot (decorative, hidden from assistive tech), the\n * CTA via the `action` slot — the host owns behavior and wording, and no\n * fallback copy ships with the component.\n *\n * The icon sits in a hairline medallion — a `bg-subtle` disc with a `border`\n * ring — rather than floating bare. Two reasons: the glyph itself is sized\n * 20px, the emphasis step for an empty-state icon, and a 20px stroke drawing\n * alone in a large blank region has nothing to hold it, so it reads as a\n * stray mark; the medallion gives it a shape to anchor without adding a\n * shadow (a disc is a surface plus a hairline, never a float). `bg-subtle`\n * is chosen over `bg-card` so the disc stays visible on `bg-card` and\n * `bg-background` alike — this pattern is dropped into both.\n *\n * Type comes from the named scale (`text-title` / `text-small`), not\n * hand-picked `text-sm`/`text-xs` — the empty state is a titled moment, not\n * a caption.\n */\ndefineProps<{\n  /** What is missing, stated plainly — always shown. */\n  title: string;\n  /** What to do about it. Omit rather than pad the region with filler copy. */\n  description?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center justify-center gap-1.5 px-6 py-10 text-center sm:py-14\">\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"animate-fade-rise mb-3 grid h-12 w-12 place-items-center rounded-full border border-border bg-subtle text-muted-foreground [&_svg]:h-5 [&_svg]:w-5\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <!-- One paragraph, not a short titled one before a longer one. The empty\n         state is a single message, and a short, larger, bolder <p> sitting\n         before a smaller one is exactly the fake-heading shape `p-as-heading`\n         flags (WCAG 1.3.1; measured 2026-08-26 on this pattern's own demo).\n         Block spans keep the stacked look and the stagger. -->\n    <p>\n      <span\n        class=\"block animate-fade-rise text-title text-foreground\"\n        :style=\"{ animationDelay: staggerDelay(1, EMPTY_STATE_STAGGER_STEP_MS) }\"\n      >\n        {{ title }}\n      </span>\n      <span\n        v-if=\"description\"\n        class=\"mt-1.5 block animate-fade-rise max-w-sm text-balance text-small text-muted-foreground\"\n        :style=\"{ animationDelay: staggerDelay(2, EMPTY_STATE_STAGGER_STEP_MS) }\"\n      >\n        {{ description }}\n      </span>\n    </p>\n    <div\n      v-if=\"$slots.action\"\n      class=\"animate-fade-rise mt-4\"\n      :style=\"{ animationDelay: staggerDelay(3, EMPTY_STATE_STAGGER_STEP_MS) }\"\n    >\n      <slot name=\"action\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/patterns/empty-state/src/EmptyState.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,73 @@
+import { staggerDelay } from "../../../core/src/motion.js";
+import "../../../core/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeStyle, openBlock, renderSlot, toDisplayString, unref } from "vue";
+//#region packages/patterns/empty-state/src/EmptyState.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col items-center justify-center gap-1.5 px-6 py-10 text-center sm:py-14" };
+var _hoisted_2 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "animate-fade-rise mb-3 grid h-12 w-12 place-items-center rounded-full border border-border bg-subtle text-muted-foreground [&_svg]:h-5 [&_svg]:w-5"
+};
+/**
+* EmptyState — the shape of "nothing here yet": icon → title → optional
+* description → at most ONE call-to-action, centered in the empty region. An
+* empty region should explain itself and invite the next step — empty is a
+* welcome, never an error (a failed load renders `InlineError`; an empty
+* *result* renders this).
+*
+* The entrance is a staggered fade-rise film (icon, title, description,
+* action — one 60ms step apart): this is content appearing, not action
+* feedback, so it budgets like a panel rather than against the
+* interaction-feedback ceiling, all token-tier CSS. The step is the
+* empty-state family's own (`EMPTY_STATE_STAGGER_STEP_MS` in core's motion
+* vocabulary) and the delays are computed, not inlined — a stagger the
+* pattern decided alone is a duration family of one, which is how the list
+* staggers drifted before core took them. Purely presentational: the icon
+* comes via the `icon` slot (decorative, hidden from assistive tech), the
+* CTA via the `action` slot — the host owns behavior and wording, and no
+* fallback copy ships with the component.
+*
+* The icon sits in a hairline medallion — a `bg-subtle` disc with a `border`
+* ring — rather than floating bare. Two reasons: the glyph itself is sized
+* 20px, the emphasis step for an empty-state icon, and a 20px stroke drawing
+* alone in a large blank region has nothing to hold it, so it reads as a
+* stray mark; the medallion gives it a shape to anchor without adding a
+* shadow (a disc is a surface plus a hairline, never a float). `bg-subtle`
+* is chosen over `bg-card` so the disc stays visible on `bg-card` and
+* `bg-background` alike — this pattern is dropped into both.
+*
+* Type comes from the named scale (`text-title` / `text-small`), not
+* hand-picked `text-sm`/`text-xs` — the empty state is a titled moment, not
+* a caption.
+*/
+var EmptyState_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "EmptyState",
+	props: {
+		title: {},
+		description: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true),
+				createElementVNode("p", null, [createElementVNode("span", {
+					class: "block animate-fade-rise text-title text-foreground",
+					style: normalizeStyle({ animationDelay: unref(staggerDelay)(1, unref(60)) })
+				}, toDisplayString(__props.title), 5), __props.description ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "mt-1.5 block animate-fade-rise max-w-sm text-balance text-small text-muted-foreground",
+					style: normalizeStyle({ animationDelay: unref(staggerDelay)(2, unref(60)) })
+				}, toDisplayString(__props.description), 5)) : createCommentVNode("", true)]),
+				_ctx.$slots.action ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: "animate-fade-rise mt-4",
+					style: normalizeStyle({ animationDelay: unref(staggerDelay)(3, unref(60)) })
+				}, [renderSlot(_ctx.$slots, "action")], 4)) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { EmptyState_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EmptyState.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/empty-state/src/EmptyState.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../packages/patterns/empty-state/src/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { EMPTY_STATE_STAGGER_STEP_MS, staggerDelay } from \"@ecoma-io/loom-core\";\n\n/**\n * EmptyState — the shape of \"nothing here yet\": icon → title → optional\n * description → at most ONE call-to-action, centered in the empty region. An\n * empty region should explain itself and invite the next step — empty is a\n * welcome, never an error (a failed load renders `InlineError`; an empty\n * *result* renders this).\n *\n * The entrance is a staggered fade-rise film (icon, title, description,\n * action — one 60ms step apart): this is content appearing, not action\n * feedback, so it budgets like a panel rather than against the\n * interaction-feedback ceiling, all token-tier CSS. The step is the\n * empty-state family's own (`EMPTY_STATE_STAGGER_STEP_MS` in core's motion\n * vocabulary) and the delays are computed, not inlined — a stagger the\n * pattern decided alone is a duration family of one, which is how the list\n * staggers drifted before core took them. Purely presentational: the icon\n * comes via the `icon` slot (decorative, hidden from assistive tech), the\n * CTA via the `action` slot — the host owns behavior and wording, and no\n * fallback copy ships with the component.\n *\n * The icon sits in a hairline medallion — a `bg-subtle` disc with a `border`\n * ring — rather than floating bare. Two reasons: the glyph itself is sized\n * 20px, the emphasis step for an empty-state icon, and a 20px stroke drawing\n * alone in a large blank region has nothing to hold it, so it reads as a\n * stray mark; the medallion gives it a shape to anchor without adding a\n * shadow (a disc is a surface plus a hairline, never a float). `bg-subtle`\n * is chosen over `bg-card` so the disc stays visible on `bg-card` and\n * `bg-background` alike — this pattern is dropped into both.\n *\n * Type comes from the named scale (`text-title` / `text-small`), not\n * hand-picked `text-sm`/`text-xs` — the empty state is a titled moment, not\n * a caption.\n */\ndefineProps<{\n  /** What is missing, stated plainly — always shown. */\n  title: string;\n  /** What to do about it. Omit rather than pad the region with filler copy. */\n  description?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center justify-center gap-1.5 px-6 py-10 text-center sm:py-14\">\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"animate-fade-rise mb-3 grid h-12 w-12 place-items-center rounded-full border border-border bg-subtle text-muted-foreground [&_svg]:h-5 [&_svg]:w-5\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <!-- One paragraph, not a short titled one before a longer one. The empty\n         state is a single message, and a short, larger, bolder <p> sitting\n         before a smaller one is exactly the fake-heading shape `p-as-heading`\n         flags (WCAG 1.3.1; measured 2026-08-26 on this pattern's own demo).\n         Block spans keep the stacked look and the stagger. -->\n    <p>\n      <span\n        class=\"block animate-fade-rise text-title text-foreground\"\n        :style=\"{ animationDelay: staggerDelay(1, EMPTY_STATE_STAGGER_STEP_MS) }\"\n      >\n        {{ title }}\n      </span>\n      <span\n        v-if=\"description\"\n        class=\"mt-1.5 block animate-fade-rise max-w-sm text-balance text-small text-muted-foreground\"\n        :style=\"{ animationDelay: staggerDelay(2, EMPTY_STATE_STAGGER_STEP_MS) }\"\n      >\n        {{ description }}\n      </span>\n    </p>\n    <div\n      v-if=\"$slots.action\"\n      class=\"animate-fade-rise mt-4\"\n      :style=\"{ animationDelay: staggerDelay(3, EMPTY_STATE_STAGGER_STEP_MS) }\"\n    >\n      <slot name=\"action\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CE,OAAA,UAAA,GAAA,mBAmCM,OAnCN,YAmCM;IAjCIA,KAAAA,OAAO,QADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAOtB,mBAcI,KAAA,MAAA,CAbF,mBAKO,QAAA;KAJL,OAAM;KACL,OAAK,eAAA,EAAA,gBAAoB,MAAA,YAAA,CAAY,CAAA,GAAI,MAAA,EAAA,CAA2B,EAAA,CAAA;IAElE,GAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,GAGF,QAAA,eADR,UAAA,GAAA,mBAMO,QAAA;;KAJL,OAAM;KACL,OAAK,eAAA,EAAA,gBAAoB,MAAA,YAAA,CAAY,CAAA,GAAI,MAAA,EAAA,CAA2B,EAAA,CAAA;IAElE,GAAA,gBAAA,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAIVA,KAAAA,OAAO,UADf,UAAA,GAAA,mBAMM,OAAA;;KAJJ,OAAM;KACL,OAAK,eAAA,EAAA,gBAAoB,MAAA,YAAA,CAAY,CAAA,GAAI,MAAA,EAAA,CAA2B,EAAA,CAAA;IAErE,GAAA,CAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/patterns/error-state/src/ErrorState.js

@@ -0,0 +1,7 @@
+import ErrorState_vue_vue_type_script_setup_true_lang_default from "./ErrorState.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/error-state/src/ErrorState.vue
+var ErrorState_default = ErrorState_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ErrorState_default as default };
+
+//# sourceMappingURL=ErrorState.js.map

package/dist/patterns/error-state/src/ErrorState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.js","names":[],"sources":["../../../../packages/patterns/error-state/src/ErrorState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ErrorState — the shape of \"something went wrong\": icon → title → optional\n * description → optional retry action, centered in the error region. This is\n * EmptyState's mirror: where that pattern says \"nothing here yet\" and invites\n * the next step, this one says \"something broke\" and offers a retry.\n *\n * No staggered entrance. EmptyState is content appearing — a welcome, budgeted\n * like a panel reveal. An error is not content; it is a problem that needs\n * attention now, and a fade-rise film that delays the message reads as\n * indifference. Everything renders at once.\n *\n * The icon sits in a hairline medallion — the same shape as EmptyState's, but\n * tinted `bg-destructive/10` with a `border-destructive/30` ring — because a\n * bare glyph in a region that already signals alarm has no anchor and the\n * colour alone does the work that EmptyState's neutral medallion needed\n * `bg-subtle` for. The icon is decorative and `aria-hidden`; the title already\n * carries the meaning.\n *\n * The action slot is semantically a retry affordance but remains a generic\n * slot — the host owns the wording and behaviour, and no fallback copy ships\n * with the component.\n */\ndefineProps<{\n  /** What went wrong, stated plainly — always shown. */\n  title: string;\n  /** More context about the error. Omit rather than pad the region with filler copy. */\n  description?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center justify-center gap-1.5 px-6 py-10 text-center sm:py-14\">\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"grid h-12 w-12 place-items-center rounded-full border border-destructive/30 bg-destructive/10 text-destructive-text [&_svg]:h-5 [&_svg]:w-5\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <p class=\"text-title text-foreground\">\n      {{ title }}\n    </p>\n    <p v-if=\"description\" class=\"max-w-sm text-balance text-small text-muted-foreground\">\n      {{ description }}\n    </p>\n    <div v-if=\"$slots.action\" class=\"mt-4\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/patterns/error-state/src/ErrorState.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,60 @@
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, toDisplayString } from "vue";
+//#region packages/patterns/error-state/src/ErrorState.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col items-center justify-center gap-1.5 px-6 py-10 text-center sm:py-14" };
+var _hoisted_2 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "grid h-12 w-12 place-items-center rounded-full border border-destructive/30 bg-destructive/10 text-destructive-text [&_svg]:h-5 [&_svg]:w-5"
+};
+var _hoisted_3 = { class: "text-title text-foreground" };
+var _hoisted_4 = {
+	key: 1,
+	class: "max-w-sm text-balance text-small text-muted-foreground"
+};
+var _hoisted_5 = {
+	key: 2,
+	class: "mt-4"
+};
+var ErrorState_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ErrorState",
+	props: {
+		title: {},
+		description: {}
+	},
+	setup(__props) {
+		/**
+		* ErrorState — the shape of "something went wrong": icon → title → optional
+		* description → optional retry action, centered in the error region. This is
+		* EmptyState's mirror: where that pattern says "nothing here yet" and invites
+		* the next step, this one says "something broke" and offers a retry.
+		*
+		* No staggered entrance. EmptyState is content appearing — a welcome, budgeted
+		* like a panel reveal. An error is not content; it is a problem that needs
+		* attention now, and a fade-rise film that delays the message reads as
+		* indifference. Everything renders at once.
+		*
+		* The icon sits in a hairline medallion — the same shape as EmptyState's, but
+		* tinted `bg-destructive/10` with a `border-destructive/30` ring — because a
+		* bare glyph in a region that already signals alarm has no anchor and the
+		* colour alone does the work that EmptyState's neutral medallion needed
+		* `bg-subtle` for. The icon is decorative and `aria-hidden`; the title already
+		* carries the meaning.
+		*
+		* The action slot is semantically a retry affordance but remains a generic
+		* slot — the host owns the wording and behaviour, and no fallback copy ships
+		* with the component.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true),
+				createElementVNode("p", _hoisted_3, toDisplayString(__props.title), 1),
+				__props.description ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+				_ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { ErrorState_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ErrorState.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/error-state/src/ErrorState.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../packages/patterns/error-state/src/ErrorState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ErrorState — the shape of \"something went wrong\": icon → title → optional\n * description → optional retry action, centered in the error region. This is\n * EmptyState's mirror: where that pattern says \"nothing here yet\" and invites\n * the next step, this one says \"something broke\" and offers a retry.\n *\n * No staggered entrance. EmptyState is content appearing — a welcome, budgeted\n * like a panel reveal. An error is not content; it is a problem that needs\n * attention now, and a fade-rise film that delays the message reads as\n * indifference. Everything renders at once.\n *\n * The icon sits in a hairline medallion — the same shape as EmptyState's, but\n * tinted `bg-destructive/10` with a `border-destructive/30` ring — because a\n * bare glyph in a region that already signals alarm has no anchor and the\n * colour alone does the work that EmptyState's neutral medallion needed\n * `bg-subtle` for. The icon is decorative and `aria-hidden`; the title already\n * carries the meaning.\n *\n * The action slot is semantically a retry affordance but remains a generic\n * slot — the host owns the wording and behaviour, and no fallback copy ships\n * with the component.\n */\ndefineProps<{\n  /** What went wrong, stated plainly — always shown. */\n  title: string;\n  /** More context about the error. Omit rather than pad the region with filler copy. */\n  description?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center justify-center gap-1.5 px-6 py-10 text-center sm:py-14\">\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"grid h-12 w-12 place-items-center rounded-full border border-destructive/30 bg-destructive/10 text-destructive-text [&_svg]:h-5 [&_svg]:w-5\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <p class=\"text-title text-foreground\">\n      {{ title }}\n    </p>\n    <p v-if=\"description\" class=\"max-w-sm text-balance text-small text-muted-foreground\">\n      {{ description }}\n    </p>\n    <div v-if=\"$slots.action\" class=\"mt-4\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCE,OAAA,UAAA,GAAA,mBAiBM,OAjBN,YAiBM;IAfIA,KAAAA,OAAO,QADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEtB,mBAEI,KAFJ,YAEI,gBADC,QAAA,KAAK,GAAA,CAAA;IAED,QAAA,eAAT,UAAA,GAAA,mBAEI,KAFJ,YAEI,gBADC,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAELA,KAAAA,OAAO,UAAlB,UAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/patterns/error-summary/src/ErrorSummary.js

@@ -0,0 +1,7 @@
+import ErrorSummary_vue_vue_type_script_setup_true_lang_default, { ERROR_SUMMARY_LABELS } from "./ErrorSummary.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/error-summary/src/ErrorSummary.vue
+var ErrorSummary_default = ErrorSummary_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ERROR_SUMMARY_LABELS, ErrorSummary_default as default };
+
+//# sourceMappingURL=ErrorSummary.js.map

package/dist/patterns/error-summary/src/ErrorSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorSummary.js","names":[],"sources":["../../../../packages/patterns/error-summary/src/ErrorSummary.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ErrorSummaryLabels, LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/** One invalid field the summary lists. */\nexport interface ErrorSummaryEntry {\n  /** The id of the element the entry links to — the invalid field's control. Give it `tabindex=\"-1\"` (or be natively focusable) so focus can land. */\n  id: string;\n  /** The error text for that field. */\n  message: string;\n  /** The field's visible label, spoken ahead of the message in the link text. */\n  fieldLabel?: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it.\n * `heading` takes the count rather than a finished sentence for the reason\n * `LabelOf` in `@ecoma-io/loom-labels` records: plurals are a language\n * decision, and Loom's English has no right to make it for anyone else.\n */\nexport const ERROR_SUMMARY_LABELS: ErrorSummaryLabels = {\n  heading: ({ count }) =>\n    `There is a problem (${String(count)} ${count === 1 ? \"error\" : \"errors\"})`,\n  description: () => \"\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref, useId, watch } from \"vue\";\nimport { TriangleAlert } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * ErrorSummary — the GOV.UK error-summary pattern. On submit-failure, focus\n * moves to a summary listing every field error, each entry a link that moves\n * focus to the invalid field. The container takes `tabindex=\"-1\"` and is\n * focused programmatically whenever the errors first render or change while\n * the form stays invalid.\n *\n * The announcement happens once. `role=\"alert\"` exists only between the\n * summary's appearance and the focus this component immediately gives it —\n * a region that stayed alert would re-announce the whole list on every\n * later change, which is the failure the pattern exists to avoid. Where\n * InlineError annotates one field, this orients the reader across the whole\n * form.\n */\nconst props = defineProps<{\n  /** Every invalid field, most important first. Give each `id` a focusable target. */\n  errors: ErrorSummaryEntry[];\n  /** Names for the summary's own copy — the heading takes the count, so a host owns its plural forms. */\n  labels?: LabelOverrides<ErrorSummaryLabels> | undefined;\n}>();\n\nconst text = useLabels(\"errorSummary\", ERROR_SUMMARY_LABELS, () => props.labels);\n\nconst box = ref<HTMLElement | null>(null);\nconst headingId = useId();\nconst announcing = ref(false);\n// True while the form is known to be invalid: the announcement belongs to\n// the empty→invalid transition alone, not to any later change of detail.\nlet invalid = false;\n\nwatch(\n  () => props.errors,\n  async (errors) => {\n    if (errors.length === 0) {\n      invalid = false;\n      return;\n    }\n    announcing.value = !invalid;\n    invalid = true;\n    await nextTick();\n    box.value?.focus();\n  },\n  { deep: true, immediate: true },\n);\n\nfunction focusField(id: string): void {\n  // The link's native jump is suppressed: focusing scrolls the field into\n  // view, and a jump-to-anchor from a link moves no focus at all when the\n  // target is a tabindex=\"-1\" field — which is the documented host contract.\n  document.getElementById(id)?.focus();\n}\n</script>\n\n<template>\n  <!-- Mounted only while invalid, like InlineError: `v-if`, never `v-show` —\n       a summary that never leaves the DOM cannot announce its return. -->\n  <div\n    v-if=\"errors.length > 0\"\n    ref=\"box\"\n    tabindex=\"-1\"\n    :role=\"announcing ? 'alert' : undefined\"\n    :aria-labelledby=\"headingId\"\n    :class=\"\n      cn(\n        'rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-destructive-text',\n        'animate-fade-rise',\n        'focus:outline-2 focus:outline-offset-2 focus:outline-destructive',\n      )\n    \"\n    @focus=\"announcing = false\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <TriangleAlert class=\"mt-0.5 h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n      <div class=\"min-w-0\">\n        <h2 :id=\"headingId\" class=\"text-sm font-semibold\">\n          {{ text.heading({ count: errors.length }) }}\n        </h2>\n        <p v-if=\"text.description({ count: errors.length }) !== ''\" class=\"mt-1 text-sm\">\n          {{ text.description({ count: errors.length }) }}\n        </p>\n        <ul class=\"mt-2 list-disc space-y-1 pl-5\">\n          <li v-for=\"error in errors\" :key=\"error.id\">\n            <a\n              :href=\"`#${error.id}`\"\n              class=\"font-medium underline underline-offset-2\"\n              @click.prevent=\"focusField(error.id)\"\n              >{{ error.fieldLabel ? `${error.fieldLabel}: ${error.message}` : error.message }}</a\n            >\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/patterns/error-summary/src/ErrorSummary.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,90 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useId, watch, withModifiers } from "vue";
+import { TriangleAlert } from "@lucide/vue";
+//#region packages/patterns/error-summary/src/ErrorSummary.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "aria-labelledby"];
+var _hoisted_2 = { class: "flex items-start gap-2" };
+var _hoisted_3 = { class: "min-w-0" };
+var _hoisted_4 = ["id"];
+var _hoisted_5 = {
+	key: 0,
+	class: "mt-1 text-sm"
+};
+var _hoisted_6 = { class: "mt-2 list-disc space-y-1 pl-5" };
+var _hoisted_7 = ["href", "onClick"];
+/**
+* Loom's English, co-located with the component so it tree-shakes with it.
+* `heading` takes the count rather than a finished sentence for the reason
+* `LabelOf` in `@ecoma-io/loom-labels` records: plurals are a language
+* decision, and Loom's English has no right to make it for anyone else.
+*/
+var ERROR_SUMMARY_LABELS = {
+	heading: ({ count }) => `There is a problem (${String(count)} ${count === 1 ? "error" : "errors"})`,
+	description: () => ""
+};
+var ErrorSummary_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ErrorSummary",
+	props: {
+		errors: {},
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("errorSummary", ERROR_SUMMARY_LABELS, () => props.labels);
+		const box = ref(null);
+		const headingId = useId();
+		const announcing = ref(false);
+		let invalid = false;
+		watch(() => props.errors, async (errors) => {
+			if (errors.length === 0) {
+				invalid = false;
+				return;
+			}
+			announcing.value = !invalid;
+			invalid = true;
+			await nextTick();
+			box.value?.focus();
+		}, {
+			deep: true,
+			immediate: true
+		});
+		function focusField(id) {
+			document.getElementById(id)?.focus();
+		}
+		return (_ctx, _cache) => {
+			return __props.errors.length > 0 ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "box",
+				ref: box,
+				tabindex: "-1",
+				role: announcing.value ? "alert" : void 0,
+				"aria-labelledby": unref(headingId),
+				class: normalizeClass(unref(cn)("rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-destructive-text", "animate-fade-rise", "focus:outline-2 focus:outline-offset-2 focus:outline-destructive")),
+				onFocus: _cache[0] || (_cache[0] = ($event) => announcing.value = false)
+			}, [createElementVNode("div", _hoisted_2, [createVNode(unref(TriangleAlert), {
+				class: "mt-0.5 h-4 w-4 shrink-0",
+				"aria-hidden": "true"
+			}), createElementVNode("div", _hoisted_3, [
+				createElementVNode("h2", {
+					id: unref(headingId),
+					class: "text-sm font-semibold"
+				}, toDisplayString(unref(text).heading({ count: __props.errors.length })), 9, _hoisted_4),
+				unref(text).description({ count: __props.errors.length }) !== "" ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(unref(text).description({ count: __props.errors.length })), 1)) : createCommentVNode("", true),
+				createElementVNode("ul", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.errors, (error) => {
+					return openBlock(), createElementBlock("li", { key: error.id }, [createElementVNode("a", {
+						href: `#${error.id}`,
+						class: "font-medium underline underline-offset-2",
+						onClick: withModifiers(($event) => focusField(error.id), ["prevent"])
+					}, toDisplayString(error.fieldLabel ? `${error.fieldLabel}: ${error.message}` : error.message), 9, _hoisted_7)]);
+				}), 128))])
+			])])], 42, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { ERROR_SUMMARY_LABELS, ErrorSummary_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ErrorSummary.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/error-summary/src/ErrorSummary.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorSummary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/patterns/error-summary/src/ErrorSummary.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ErrorSummaryLabels, LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/** One invalid field the summary lists. */\nexport interface ErrorSummaryEntry {\n  /** The id of the element the entry links to — the invalid field's control. Give it `tabindex=\"-1\"` (or be natively focusable) so focus can land. */\n  id: string;\n  /** The error text for that field. */\n  message: string;\n  /** The field's visible label, spoken ahead of the message in the link text. */\n  fieldLabel?: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it.\n * `heading` takes the count rather than a finished sentence for the reason\n * `LabelOf` in `@ecoma-io/loom-labels` records: plurals are a language\n * decision, and Loom's English has no right to make it for anyone else.\n */\nexport const ERROR_SUMMARY_LABELS: ErrorSummaryLabels = {\n  heading: ({ count }) =>\n    `There is a problem (${String(count)} ${count === 1 ? \"error\" : \"errors\"})`,\n  description: () => \"\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref, useId, watch } from \"vue\";\nimport { TriangleAlert } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * ErrorSummary — the GOV.UK error-summary pattern. On submit-failure, focus\n * moves to a summary listing every field error, each entry a link that moves\n * focus to the invalid field. The container takes `tabindex=\"-1\"` and is\n * focused programmatically whenever the errors first render or change while\n * the form stays invalid.\n *\n * The announcement happens once. `role=\"alert\"` exists only between the\n * summary's appearance and the focus this component immediately gives it —\n * a region that stayed alert would re-announce the whole list on every\n * later change, which is the failure the pattern exists to avoid. Where\n * InlineError annotates one field, this orients the reader across the whole\n * form.\n */\nconst props = defineProps<{\n  /** Every invalid field, most important first. Give each `id` a focusable target. */\n  errors: ErrorSummaryEntry[];\n  /** Names for the summary's own copy — the heading takes the count, so a host owns its plural forms. */\n  labels?: LabelOverrides<ErrorSummaryLabels> | undefined;\n}>();\n\nconst text = useLabels(\"errorSummary\", ERROR_SUMMARY_LABELS, () => props.labels);\n\nconst box = ref<HTMLElement | null>(null);\nconst headingId = useId();\nconst announcing = ref(false);\n// True while the form is known to be invalid: the announcement belongs to\n// the empty→invalid transition alone, not to any later change of detail.\nlet invalid = false;\n\nwatch(\n  () => props.errors,\n  async (errors) => {\n    if (errors.length === 0) {\n      invalid = false;\n      return;\n    }\n    announcing.value = !invalid;\n    invalid = true;\n    await nextTick();\n    box.value?.focus();\n  },\n  { deep: true, immediate: true },\n);\n\nfunction focusField(id: string): void {\n  // The link's native jump is suppressed: focusing scrolls the field into\n  // view, and a jump-to-anchor from a link moves no focus at all when the\n  // target is a tabindex=\"-1\" field — which is the documented host contract.\n  document.getElementById(id)?.focus();\n}\n</script>\n\n<template>\n  <!-- Mounted only while invalid, like InlineError: `v-if`, never `v-show` —\n       a summary that never leaves the DOM cannot announce its return. -->\n  <div\n    v-if=\"errors.length > 0\"\n    ref=\"box\"\n    tabindex=\"-1\"\n    :role=\"announcing ? 'alert' : undefined\"\n    :aria-labelledby=\"headingId\"\n    :class=\"\n      cn(\n        'rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-destructive-text',\n        'animate-fade-rise',\n        'focus:outline-2 focus:outline-offset-2 focus:outline-destructive',\n      )\n    \"\n    @focus=\"announcing = false\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <TriangleAlert class=\"mt-0.5 h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n      <div class=\"min-w-0\">\n        <h2 :id=\"headingId\" class=\"text-sm font-semibold\">\n          {{ text.heading({ count: errors.length }) }}\n        </h2>\n        <p v-if=\"text.description({ count: errors.length }) !== ''\" class=\"mt-1 text-sm\">\n          {{ text.description({ count: errors.length }) }}\n        </p>\n        <ul class=\"mt-2 list-disc space-y-1 pl-5\">\n          <li v-for=\"error in errors\" :key=\"error.id\">\n            <a\n              :href=\"`#${error.id}`\"\n              class=\"font-medium underline underline-offset-2\"\n              @click.prevent=\"focusField(error.id)\"\n              >{{ error.fieldLabel ? `${error.fieldLabel}: ${error.message}` : error.message }}</a\n            >\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAa,uBAA2C;CACtD,UAAU,EAAE,YACV,uBAAuB,OAAO,KAAK,EAAE,GAAG,UAAU,IAAI,UAAU,SAAS;CAC3E,mBAAmB;AACrB;;;;;;;;EAuBA,MAAM,QAAQ;EAOd,MAAM,OAAO,UAAU,gBAAgB,4BAA4B,MAAM,MAAM;EAE/E,MAAM,MAAM,IAAwB,IAAI;EACxC,MAAM,YAAY,MAAM;EACxB,MAAM,aAAa,IAAI,KAAK;EAG5B,IAAI,UAAU;EAEd,YACQ,MAAM,QACZ,OAAO,WAAW;GAChB,IAAI,OAAO,WAAW,GAAG;IACvB,UAAU;IACV;GACF;GACA,WAAW,QAAQ,CAAC;GACpB,UAAU;GACV,MAAM,SAAS;GACf,IAAI,OAAO,MAAM;EACnB,GACA;GAAE,MAAM;GAAM,WAAW;EAAK,CAChC;EAEA,SAAS,WAAW,IAAkB;GAIpC,SAAS,eAAe,EAAE,CAAC,EAAE,MAAM;EACrC;;GAOU,OAAA,QAAA,OAAO,SAAM,KADrB,UAAA,GAAA,mBAoCM,OAAA;;IAlCA,SAAA;IAAJ,KAAI;IACJ,UAAS;IACR,MAAM,WAAA,QAAU,UAAa,KAAA;IAC7B,mBAAiB,MAAA,SAAA;IACjB,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,6FAAA,qBAAA,kEAAA,CAAA;IAOhB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,WAAA,QAAU;GAElB,GAAA,CAAA,mBAoBM,OApBN,YAoBM,CAnBJ,YAAoE,MAAA,aAAA,GAAA;IAArD,OAAM;IAA0B,eAAY;GAC3D,CAAA,GAAA,mBAiBM,OAjBN,YAiBM;IAhBJ,mBAEK,MAAA;KAFA,IAAI,MAAA,SAAA;KAAW,OAAM;IACrB,GAAA,gBAAA,MAAA,IAAA,CAAI,CAAC,QAAO,EAAA,OAAU,QAAA,OAAO,OAAM,CAAA,CAAA,GAAA,GAAA,UAAA;IAE/B,MAAA,IAAA,CAAI,CAAC,YAAW,EAAA,OAAU,QAAA,OAAO,OAAM,CAAA,MAAA,MAAhD,UAAA,GAAA,mBAEI,KAFJ,YAEI,gBADC,MAAA,IAAA,CAAI,CAAC,YAAW,EAAA,OAAU,QAAA,OAAO,OAAM,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAE5C,mBASK,MATL,YASK,EARH,UAAA,IAAA,GAAA,mBAOK,UAAA,MAAA,WAPe,QAAA,SAAT,UAAK;KAAhB,OAAA,UAAA,GAAA,mBAOK,MAAA,EAPwB,KAAK,MAAM,GAAA,GAAA,CACtC,mBAKC,KAAA;MAJE,MAAI,IAAM,MAAM;MACjB,OAAM;MACL,SAAK,eAAA,WAAU,WAAW,MAAM,EAAE,GAAA,CAAA,SAAA,CAAA;KAC/B,GAAA,gBAAA,MAAM,aAAU,GAAM,MAAM,WAAU,IAAK,MAAM,YAAY,MAAM,OAAO,GAAA,GAAA,UAAA,CAAA,CAAA"}

package/dist/patterns/form-actions/src/FormActions.js

@@ -0,0 +1,7 @@
+import FormActions_vue_vue_type_script_setup_true_lang_default from "./FormActions.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/form-actions/src/FormActions.vue
+var FormActions_default = FormActions_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FormActions_default as default };
+
+//# sourceMappingURL=FormActions.js.map

package/dist/patterns/form-actions/src/FormActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActions.js","names":[],"sources":["../../../../packages/patterns/form-actions/src/FormActions.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * FormActions — the submit/cancel button row at the bottom of a form. A pattern\n * that owns the layout of form actions so every form in the product has the\n * same action alignment: primary action right, cancel left, separated from the\n * form content by a top border.\n *\n * The pattern exists because \"submit right, cancel left\" is a layout decision\n * repeated in every form, and getting the spacing and alignment wrong is easy.\n * It owns the geometry; the host owns the button text and behavior.\n *\n * The default slot carries the primary actions (submit, save) and the `cancel`\n * slot carries the secondary action. In \"between\" mode the two slots sit at\n * opposite ends; in \"right\" or \"left\" mode everything goes through the default\n * slot, shifted to one side.\n *\n * The row wraps rather than scrolls or shrinks: a cancel slot plus several\n * primary actions cannot be guaranteed to fit a phone width, and an action\n * row that pushes past the viewport is the one overflow the interface\n * contract names outright.\n */\nexport type FormActionsAlign = \"right\" | \"left\" | \"between\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /**\n     * How the action row distributes its content.\n     * - \"between\": cancel slot left, primary actions right (default — the\n     *   arrangement most forms need)\n     * - \"right\": all actions pushed right (short forms, single CTA)\n     * - \"left\": all actions pushed left (right-to-left locales, or a design\n     *   that calls for it)\n     */\n    align?: FormActionsAlign;\n  }>(),\n  { align: \"between\" },\n);\n\nconst justify: Record<FormActionsAlign, string> = {\n  between: \"justify-between\",\n  right: \"justify-end\",\n  left: \"justify-start\",\n};\n</script>\n\n<template>\n  <!-- border-t separates the actions from the form content above without\n       needing a wrapping section or extra spacing rules -->\n  <!-- The gap is FormSection's sm band, not its md band, on purpose: sm:gap-3\n       keeps the gap every existing form already renders at and above `sm`, so\n       only the phone band — the band where the row actually wraps — tightens. -->\n  <div\n    :class=\"\n      cn('flex flex-wrap items-center gap-2 sm:gap-3 border-t border-border pt-6', justify[align])\n    \"\n  >\n    <!-- @slot The secondary/cancel action — placed on the left in \"between\" mode. -->\n    <slot name=\"cancel\" />\n    <!-- @slot The primary actions (submit, save) — placed on the right in \"between\" mode. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/patterns/form-actions/src/FormActions.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region packages/patterns/form-actions/src/FormActions.vue?vue&type=script&setup=true&lang.ts
+var FormActions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "FormActions",
+	props: { align: { default: "between" } },
+	setup(__props) {
+		const justify = {
+			between: "justify-between",
+			right: "justify-end",
+			left: "justify-start"
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("flex flex-wrap items-center gap-2 sm:gap-3 border-t border-border pt-6", justify[__props.align])) }, [renderSlot(_ctx.$slots, "cancel"), renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { FormActions_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=FormActions.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/form-actions/src/FormActions.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActions.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/patterns/form-actions/src/FormActions.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * FormActions — the submit/cancel button row at the bottom of a form. A pattern\n * that owns the layout of form actions so every form in the product has the\n * same action alignment: primary action right, cancel left, separated from the\n * form content by a top border.\n *\n * The pattern exists because \"submit right, cancel left\" is a layout decision\n * repeated in every form, and getting the spacing and alignment wrong is easy.\n * It owns the geometry; the host owns the button text and behavior.\n *\n * The default slot carries the primary actions (submit, save) and the `cancel`\n * slot carries the secondary action. In \"between\" mode the two slots sit at\n * opposite ends; in \"right\" or \"left\" mode everything goes through the default\n * slot, shifted to one side.\n *\n * The row wraps rather than scrolls or shrinks: a cancel slot plus several\n * primary actions cannot be guaranteed to fit a phone width, and an action\n * row that pushes past the viewport is the one overflow the interface\n * contract names outright.\n */\nexport type FormActionsAlign = \"right\" | \"left\" | \"between\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /**\n     * How the action row distributes its content.\n     * - \"between\": cancel slot left, primary actions right (default — the\n     *   arrangement most forms need)\n     * - \"right\": all actions pushed right (short forms, single CTA)\n     * - \"left\": all actions pushed left (right-to-left locales, or a design\n     *   that calls for it)\n     */\n    align?: FormActionsAlign;\n  }>(),\n  { align: \"between\" },\n);\n\nconst justify: Record<FormActionsAlign, string> = {\n  between: \"justify-between\",\n  right: \"justify-end\",\n  left: \"justify-start\",\n};\n</script>\n\n<template>\n  <!-- border-t separates the actions from the form content above without\n       needing a wrapping section or extra spacing rules -->\n  <!-- The gap is FormSection's sm band, not its md band, on purpose: sm:gap-3\n       keeps the gap every existing form already renders at and above `sm`, so\n       only the phone band — the band where the row actually wraps — tightens. -->\n  <div\n    :class=\"\n      cn('flex flex-wrap items-center gap-2 sm:gap-3 border-t border-border pt-6', justify[align])\n    \"\n  >\n    <!-- @slot The secondary/cancel action — placed on the left in \"between\" mode. -->\n    <slot name=\"cancel\" />\n    <!-- @slot The primary actions (submit, save) — placed on the right in \"between\" mode. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EA0CA,MAAM,UAA4C;GAChD,SAAS;GACT,OAAO;GACP,MAAM;EACR;;GASE,OAAA,UAAA,GAAA,mBASM,OAAA,EARH,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,0EAA2E,QAAQ,QAAA,MAAK,CAAA,EAAA,GAAA,CAKzG,WAAsB,KAAA,QAAA,QAAA,GAEtB,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/patterns/form-section/src/FormSection.js

@@ -0,0 +1,7 @@
+import FormSection_vue_vue_type_script_setup_true_lang_default, { gapClass } from "./FormSection.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/form-section/src/FormSection.vue
+var FormSection_default = FormSection_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FormSection_default as default, gapClass };
+
+//# sourceMappingURL=FormSection.js.map

package/dist/patterns/form-section/src/FormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.js","names":[],"sources":["../../../../packages/patterns/form-section/src/FormSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * FormSection — a labeled group of form fields with an optional\n * description, the arrangement every form page reaches for repeatedly: a\n * Fieldset (for the accessible `<fieldset>/<legend>` semantics, disabled/\n * readonly propagation, and hint/error line) with vertical Stack spacing\n * between the fields.\n *\n * The pattern exists because that composition is written at every form page\n * and the spacing between sections is a layout decision it can own once.\n * It is a thin convenience over Fieldset, not a replacement: when a group\n * needs a shape FormSection does not offer, Fieldset is still the right\n * primitive.\n *\n * `description` is NOT Fieldset's `hint`. The description sits between the\n * legend and the fields — it orients the person filling the form (\"Where\n * should we ship your order?\"). The hint sits below the fields and\n * supplements the controls themselves (\"Street address, P.O. box, or\n * military address\"). They serve different readers at different points in\n * the form and both can be present at once.\n */\nexport type FormSectionGap = \"sm\" | \"md\" | \"lg\";\n\nconst gapClass: Record<FormSectionGap, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport Fieldset from \"@ecoma-io/loom-fieldset\";\nimport { cn, optional } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** The section title — rendered as a real `<legend>` by Fieldset. */\n    legend?: string;\n    /**\n     * Supporting text shown below the legend, above the fields.\n     * NOT the same as `hint`, which sits below the fields — this orients the\n     * person filling the form, while `hint` supplements the controls.\n     */\n    description?: string;\n    /** Forwarded to Fieldset: supporting text shown below the group. Hidden while `error` is set. */\n    hint?: string;\n    /** Forwarded to Fieldset: the group's error message. Replaces `hint`. */\n    error?: string;\n    /** Forwarded to Fieldset: marks the group mandatory and appends a destructive asterisk. */\n    required?: boolean;\n    /** Forwarded to Fieldset: disables every control inside, slotted ones included. */\n    disabled?: boolean;\n    /** Forwarded to Fieldset: renders every Loom control inside read-only. */\n    readonly?: boolean | undefined;\n    /** Forwarded to Fieldset: set on the `<fieldset>`, used to derive the hint/error id. */\n    id?: string;\n    /** Gap between fields — mirrors Stack's gap scale. */\n    gap?: FormSectionGap;\n  }>(),\n  {\n    required: false,\n    disabled: false,\n    // Explicitly `undefined`, not `false`: matches Fieldset's own default so\n    // an absent prop does not overrule a Field or control that set it.\n    readonly: undefined,\n    gap: \"md\",\n  },\n);\n</script>\n\n<template>\n  <Fieldset\n    v-bind=\"optional({ legend, hint, error, id })\"\n    :required=\"required\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n  >\n    <p v-if=\"description\" class=\"max-w-prose text-small text-muted-foreground\">\n      {{ description }}\n    </p>\n    <div :class=\"cn('flex flex-col', gapClass[gap])\">\n      <!-- @slot The form fields in the section. -->\n      <slot />\n    </div>\n  </Fieldset>\n</template>\n"],"mappings":""}

package/dist/patterns/form-section/src/FormSection.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import "../../../core/src/index.js";
+import Fieldset_default from "../../../primitives/fieldset/src/Fieldset.js";
+import "../../../primitives/fieldset/src/index.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region packages/patterns/form-section/src/FormSection.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "max-w-prose text-small text-muted-foreground"
+};
+var gapClass = {
+	sm: "gap-2 sm:gap-3",
+	md: "gap-3 sm:gap-4",
+	lg: "gap-4 sm:gap-6"
+};
+var FormSection_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "FormSection",
+	props: {
+		legend: {},
+		description: {},
+		hint: {},
+		error: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		gap: { default: "md" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Fieldset_default), mergeProps(unref(optional)({
+				legend: __props.legend,
+				hint: __props.hint,
+				error: __props.error,
+				id: __props.id
+			}), {
+				required: __props.required,
+				disabled: __props.disabled,
+				readonly: __props.readonly
+			}), {
+				default: withCtx(() => [__props.description ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(__props.description), 1)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(unref(cn)("flex flex-col", gapClass[__props.gap])) }, [renderSlot(_ctx.$slots, "default")], 2)]),
+				_: 3
+			}, 16, [
+				"required",
+				"disabled",
+				"readonly"
+			]);
+		};
+	}
+});
+//#endregion
+export { FormSection_vue_vue_type_script_setup_true_lang_default as default, gapClass };
+
+//# sourceMappingURL=FormSection.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/form-section/src/FormSection.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/patterns/form-section/src/FormSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * FormSection — a labeled group of form fields with an optional\n * description, the arrangement every form page reaches for repeatedly: a\n * Fieldset (for the accessible `<fieldset>/<legend>` semantics, disabled/\n * readonly propagation, and hint/error line) with vertical Stack spacing\n * between the fields.\n *\n * The pattern exists because that composition is written at every form page\n * and the spacing between sections is a layout decision it can own once.\n * It is a thin convenience over Fieldset, not a replacement: when a group\n * needs a shape FormSection does not offer, Fieldset is still the right\n * primitive.\n *\n * `description` is NOT Fieldset's `hint`. The description sits between the\n * legend and the fields — it orients the person filling the form (\"Where\n * should we ship your order?\"). The hint sits below the fields and\n * supplements the controls themselves (\"Street address, P.O. box, or\n * military address\"). They serve different readers at different points in\n * the form and both can be present at once.\n */\nexport type FormSectionGap = \"sm\" | \"md\" | \"lg\";\n\nconst gapClass: Record<FormSectionGap, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport Fieldset from \"@ecoma-io/loom-fieldset\";\nimport { cn, optional } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** The section title — rendered as a real `<legend>` by Fieldset. */\n    legend?: string;\n    /**\n     * Supporting text shown below the legend, above the fields.\n     * NOT the same as `hint`, which sits below the fields — this orients the\n     * person filling the form, while `hint` supplements the controls.\n     */\n    description?: string;\n    /** Forwarded to Fieldset: supporting text shown below the group. Hidden while `error` is set. */\n    hint?: string;\n    /** Forwarded to Fieldset: the group's error message. Replaces `hint`. */\n    error?: string;\n    /** Forwarded to Fieldset: marks the group mandatory and appends a destructive asterisk. */\n    required?: boolean;\n    /** Forwarded to Fieldset: disables every control inside, slotted ones included. */\n    disabled?: boolean;\n    /** Forwarded to Fieldset: renders every Loom control inside read-only. */\n    readonly?: boolean | undefined;\n    /** Forwarded to Fieldset: set on the `<fieldset>`, used to derive the hint/error id. */\n    id?: string;\n    /** Gap between fields — mirrors Stack's gap scale. */\n    gap?: FormSectionGap;\n  }>(),\n  {\n    required: false,\n    disabled: false,\n    // Explicitly `undefined`, not `false`: matches Fieldset's own default so\n    // an absent prop does not overrule a Field or control that set it.\n    readonly: undefined,\n    gap: \"md\",\n  },\n);\n</script>\n\n<template>\n  <Fieldset\n    v-bind=\"optional({ legend, hint, error, id })\"\n    :required=\"required\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n  >\n    <p v-if=\"description\" class=\"max-w-prose text-small text-muted-foreground\">\n      {{ description }}\n    </p>\n    <div :class=\"cn('flex flex-col', gapClass[gap])\">\n      <!-- @slot The form fields in the section. -->\n      <slot />\n    </div>\n  </Fieldset>\n</template>\n"],"mappings":";;;;;;;;;;;AAuBA,IAAM,WAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;;;GA8CE,OAAA,UAAA,GAAA,YAaW,MAAA,gBAAA,GAbX,WACU,MAYC,QAAA,CAZO,CAAA;IAAA,QAAG,QAAA;IAAM,MAAE,QAAA;IAAI,OAAE,QAAA;IAAK,IAAE,QAAA;GAAE,CAAA,GAAA;IACzC,UAAU,QAAA;IACV,UAAU,QAAA;IACV,UAAU,QAAA;;IAEX,SAAA,cAEI,CAFK,QAAA,eAAT,UAAA,GAAA,mBAEI,KAFJ,YAEI,gBADC,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEhB,mBAGM,OAAA,EAHA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,iBAAkB,SAAS,QAAA,IAAG,CAAA,EAAA,GAAA,CAE3C,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/patterns/loading-state/src/LoadingState.js

@@ -0,0 +1,7 @@
+import LoadingState_vue_vue_type_script_setup_true_lang_default from "./LoadingState.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/loading-state/src/LoadingState.vue
+var LoadingState_default = LoadingState_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { LoadingState_default as default };
+
+//# sourceMappingURL=LoadingState.js.map

package/dist/patterns/loading-state/src/LoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.js","names":[],"sources":["../../../../packages/patterns/loading-state/src/LoadingState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * LoadingState — the shape of \"not yet known\": a Spinner for short waits or a\n * column of skeleton lines for content-shaped waits. This replaces the \"flash\n * of EmptyState\" antipattern — never show EmptyState before the real result is\n * known, because an empty state that flickers and disappears is a short-lived\n * lie.\n *\n * Two modes controlled by `mode`:\n * - `spinner` (default): centred Spinner with an optional label. Good for\n *   indeterminate waits where the host does not know the content shape.\n * - `skeleton`: a column of skeleton lines that approximate the content the\n *   host is loading. The default lines are three bars of varying width — enough\n *   to suggest paragraph-shaped content without the host having to compose\n *   anything. Hosts that know their own shape provide a default slot and render\n *   whatever Skeleton arrangement matches their real layout.\n *\n * The Spinner carries its own accessible label (`aria-label` on the primitive)\n * so this pattern does not add a redundant one. The skeleton lines are purely\n * decorative (`aria-hidden` on each Skeleton) — the host's real content will\n * replace them.\n */\nimport Spinner from \"@ecoma-io/loom-spinner\";\nimport Skeleton from \"@ecoma-io/loom-skeleton\";\n\nwithDefaults(\n  defineProps<{\n    /** Shown below the spinner in spinner mode. Omit for a spinner-only wait. */\n    label?: string;\n    /** `spinner` for short indeterminate waits; `skeleton` for content-shaped waits. */\n    mode?: \"spinner\" | \"skeleton\";\n  }>(),\n  { mode: \"spinner\" },\n);\n</script>\n\n<template>\n  <div\n    v-if=\"mode === 'spinner'\"\n    class=\"flex flex-col items-center justify-center gap-3 px-6 py-10 sm:py-14\"\n  >\n    <Spinner size=\"lg\" />\n    <p v-if=\"label\" class=\"text-small text-muted-foreground\">{{ label }}</p>\n  </div>\n  <div v-else class=\"flex flex-col gap-3 px-6 py-10 sm:py-14\">\n    <slot>\n      <!-- Default skeleton lines approximate paragraph-shaped content without\n           requiring the host to compose anything. Hosts that know their own\n           shape slot their own Skeleton arrangement instead. -->\n      <Skeleton class=\"h-4 w-full\" />\n      <Skeleton class=\"h-4 w-3/4\" />\n      <Skeleton class=\"h-4 w-5/6\" />\n    </slot>\n  </div>\n</template>\n"],"mappings":""}