@ecoma-io/loom 0.4.0 → 0.5.0

package/dist/packages/composition/sidebar/src/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { cn } from "../../../core/src/cn.js";
 import "../../../core/src/index.js";
-import { createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+import { Fragment, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
 //#region packages/composition/sidebar/src/Sidebar.vue?vue&type=script&setup=true&lang.ts
 var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Sidebar",
@@ -16,9 +16,18 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(unref(cn)("flex", __props.side === "right" ? "flex-row-reverse" : "flex-row", __props.gap ? "gap-3 sm:gap-4" : void 0)),
+				class: normalizeClass(unref(cn)("flex flex-row", __props.gap ? "gap-3 sm:gap-4" : void 0)),
 				style: { flexWrap: "wrap" }
-			}, [createElementVNode("div", { style: normalizeStyle({
+			}, [__props.side === "right" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", { style: normalizeStyle({
+				flexBasis: 0,
+				flexGrow: 999,
+				flexShrink: 1,
+				minWidth: __props.contentMin
+			}) }, [renderSlot(_ctx.$slots, "default")], 4), createElementVNode("div", { style: normalizeStyle({
+				flexBasis: __props.sideWidth,
+				flexGrow: 0,
+				flexShrink: 1
+			}) }, [renderSlot(_ctx.$slots, "side")], 4)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { style: normalizeStyle({
 				flexBasis: __props.sideWidth,
 				flexGrow: 0,
 				flexShrink: 1
@@ -27,7 +36,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				flexGrow: 999,
 				flexShrink: 1,
 				minWidth: __props.contentMin
-			}) }, [renderSlot(_ctx.$slots, "default")], 4)], 2);
+			}) }, [renderSlot(_ctx.$slots, "default")], 4)], 64))], 2);
 		};
 	}
 });

package/dist/packages/composition/sidebar/src/Sidebar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/composition/sidebar/src/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Sidebar — content + sidebar with intrinsic CSS collapse.\n *\n * The Every Layout \"Sidebar\" pattern: the sidebar gets a fixed `flex-basis`\n * and the content gets `flex-grow: 999`, so the layout wraps and both panels\n * go full-width the moment the content can't fit its `contentMin` percentage.\n * No media query, no JavaScript — the layout derives its own breakpoint from\n * the container's width.\n *\n * A Sidebar is a component because the `calc()` technique for intrinsic\n * sidebar width is non-obvious and easy to get wrong, and Loom wrapping it\n * prevents footguns. It differs from Split in that the content area is the\n * star — it grows to fill all available space — and the sidebar has a\n * preferred, not a minimum, width.\n */\nexport type SidebarSide = \"left\" | \"right\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Which side the sidebar sits on. Controls flex direction and stacking order. */\n    side?: SidebarSide;\n    /** Preferred width for the sidebar (e.g. \"16rem\"). The sidebar does not grow. */\n    sideWidth?: string;\n    /** Minimum percentage of the container the content demands before the layout wraps. Default: `\"50%\"`. */\n    contentMin?: string;\n    /** Whether to add a gap between the two panels. Default: `true`. */\n    gap?: boolean;\n  }>(),\n  { side: \"left\", sideWidth: \"16rem\", contentMin: \"50%\", gap: true },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap: wrap` is the intrinsic collapse mechanism. When the content\n    can't fit its `contentMin`, it wraps to a new line and both panels take\n    full width — the sidebar becomes a full-width section above or below the\n    content, depending on `side`.\n\n    The sidebar's `flex-basis` is its preferred width. The content's\n    `flex-grow: 999` ensures it takes all remaining space when there is room,\n    but its `flex-basis: 0` and `min-width: contentMin` trigger wrapping\n    when there isn't.\n  -->\n  <div\n    :class=\"\n      cn(\n        'flex',\n        side === 'right' ? 'flex-row-reverse' : 'flex-row',\n        gap ? 'gap-3 sm:gap-4' : undefined,\n      )\n    \"\n    :style=\"{ flexWrap: 'wrap' }\"\n  >\n    <div\n      :style=\"{\n        flexBasis: sideWidth,\n        flexGrow: 0,\n        flexShrink: 1,\n      }\"\n    >\n      <slot name=\"side\" />\n    </div>\n\n    <div\n      :style=\"{\n        flexBasis: 0,\n        flexGrow: 999,\n        flexShrink: 1,\n        minWidth: contentMin,\n      }\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;GAiDE,OAAA,UAAA,GAAA,mBA8BM,OAAA;IA7BH,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,QAA0B,QAAA,SAAI,UAAA,qBAAA,YAAwD,QAAA,MAAG,mBAAsB,KAAA,CAAA,CAAA;IAO/H,OAAO,EAAA,UAAA,OAAA;GAER,GAAA,CAAA,mBAQM,OAAA,EAPH,OAAK,eAAA;IAAuB,WAAA,QAAA;;;GAM7B,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAGtB,mBASM,OAAA,EARH,OAAK,eAAA;;;;IAA0F,UAAA,QAAA;GAOhG,CAAA,EAAA,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"Sidebar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/composition/sidebar/src/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Sidebar — content + sidebar with intrinsic CSS collapse.\n *\n * The Every Layout \"Sidebar\" pattern: the sidebar gets a fixed `flex-basis`\n * and the content gets `flex-grow: 999`, so the layout wraps and both panels\n * go full-width the moment the content can't fit its `contentMin` percentage.\n * No media query, no JavaScript — the layout derives its own breakpoint from\n * the container's width.\n *\n * A Sidebar is a component because the `calc()` technique for intrinsic\n * sidebar width is non-obvious and easy to get wrong, and Loom wrapping it\n * prevents footguns. It differs from Split in that the content area is the\n * star — it grows to fill all available space — and the sidebar has a\n * preferred, not a minimum, width.\n */\nexport type SidebarSide = \"left\" | \"right\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Which side the sidebar sits on. Controls flex direction and stacking order. */\n    side?: SidebarSide;\n    /** Preferred width for the sidebar (e.g. \"16rem\"). The sidebar does not grow. */\n    sideWidth?: string;\n    /** Minimum percentage of the container the content demands before the layout wraps. Default: `\"50%\"`. */\n    contentMin?: string;\n    /** Whether to add a gap between the two panels. Default: `true`. */\n    gap?: boolean;\n  }>(),\n  { side: \"left\", sideWidth: \"16rem\", contentMin: \"50%\", gap: true },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap: wrap` is the intrinsic collapse mechanism. When the content\n    can't fit its `contentMin`, it wraps to a new line and both panels take\n    full width — the sidebar becomes a full-width section above or below the\n    content, depending on `side`.\n\n    The sidebar's `flex-basis` is its preferred width. The content's\n    `flex-grow: 999` ensures it takes all remaining space when there is room,\n    but its `flex-basis: 0` and `min-width: contentMin` trigger wrapping\n    when there isn't.\n  -->\n  <div\n    :class=\"cn('flex flex-row', gap ? 'gap-3 sm:gap-4' : undefined)\"\n    :style=\"{ flexWrap: 'wrap' }\"\n  >\n    <!--\n      Document order follows `side`, so the wrapped stack never contradicts\n      the side-by-side row and screen-reader order matches the visual one:\n      content first when `side=\"right\"`, sidebar first when `side=\"left\"`.\n      flex-row (never reverse) plus this ordering is what makes the wrap\n      produce content-above-sidebar for `side=\"right\"`.\n    -->\n    <template v-if=\"side === 'right'\">\n      <!-- Content: fills all remaining space (flex-grow: 999), but its\n           min-width: contentMin triggers wrapping when there isn't room. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: contentMin,\n        }\"\n      >\n        <slot />\n      </div>\n      <!-- Sidebar: preferred width as flex-basis, does not grow. -->\n      <div\n        :style=\"{\n          flexBasis: sideWidth,\n          flexGrow: 0,\n          flexShrink: 1,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n    </template>\n    <template v-else>\n      <!-- Sidebar: preferred width as flex-basis, does not grow. -->\n      <div\n        :style=\"{\n          flexBasis: sideWidth,\n          flexGrow: 0,\n          flexShrink: 1,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n      <!-- Content: fills all remaining space (flex-grow: 999), but its\n           min-width: contentMin triggers wrapping when there isn't room. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: contentMin,\n        }\"\n      >\n        <slot />\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;GAiDE,OAAA,UAAA,GAAA,mBA2DM,OAAA;IA1DH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,iBAAkB,QAAA,MAAG,mBAAsB,KAAA,CAAS,CAAA;IAC7D,OAAO,EAAA,UAAA,OAAA;GASQ,GAAA,CAAA,QAAA,SAAI,WAApB,UAAA,GAAA,mBAuBW,UAAA,EAAA,KAAA,EAAA,GAAA,CApBT,mBASM,OAAA,EARH,OAAK,eAAA;;;;IAAkG,UAAA,QAAA;GAOxG,CAAA,EAAA,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,GAGV,mBAQM,OAAA,EAPH,OAAK,eAAA;IAAyB,WAAA,QAAA;;;GAM/B,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,MAGxB,UAAA,GAAA,mBAuBW,UAAA,EAAA,KAAA,EAAA,GAAA,CArBT,mBAQM,OAAA,EAPH,OAAK,eAAA;IAAyB,WAAA,QAAA;;;GAM/B,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAItB,mBASM,OAAA,EARH,OAAK,eAAA;;;;IAAkG,UAAA,QAAA;GAOxG,CAAA,EAAA,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA"}

package/dist/packages/composition/split/src/Split.js.map

@@ -1 +1 @@
-{"version":3,"file":"Split.js","names":[],"sources":["../../../../../packages/composition/split/src/Split.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Split — two-panel layout with intrinsic collapse.\n *\n * A flex row that places a side panel and a content area side by side above\n * a `collapseAt` width, and stacks them vertically below it. The side panel\n * gets a fixed minimum width; the content area grows to fill the remaining\n * space.\n *\n * This is the Every Layout \"Sidebar\" pattern, simplified for the common\n * two-panel case. The intrinsic collapse — panels stack when the container is\n * too narrow — avoids a breakpoint per viewport, and works identically inside\n * a sidebar-narrowed workspace and full-bleed on an ultra-wide monitor.\n *\n * A Split is a component, not a hand-rolled flex row with a media query,\n * because the collapse width is a layout decision the call site should name\n * rather than compute, and the stacking order (side above or below) is an\n * intent the `side` prop expresses.\n */\nexport type SplitSide = \"left\" | \"right\";\n\nexport type SplitGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<SplitGap, \"none\">, 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 { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** The side the panel sits on. Controls stacking order when collapsed: \"left\" stacks the panel above, \"right\" stacks it below. */\n    side?: SplitSide;\n    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `\"48rem\"`. */\n    collapseAt?: string;\n    /** Minimum width for the side panel (e.g. \"16rem\"). The content area takes the rest. */\n    minSideWidth?: string;\n    /** Gap between the two panels. Tightens one notch below `sm` (except \"none\"). */\n    gap?: SplitGap;\n  }>(),\n  { side: \"left\", collapseAt: \"48rem\", minSideWidth: \"16rem\", gap: \"md\" },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap` is the intrinsic collapse mechanism: when the combined\n    `min-width` of both panels exceeds the container, the second panel wraps\n    to a new line. The `collapseAt` prop sets the breakpoint that controls\n    when `flex-wrap` is active.\n  -->\n  <div\n    :class=\"\n      cn(\n        'flex',\n        side === 'right' ? 'flex-row-reverse' : 'flex-row',\n        gap !== 'none' ? gapClass[gap] : undefined,\n      )\n    \"\n    :style=\"{\n      flexWrap: 'wrap',\n    }\"\n  >\n    <!-- Side panel: fixed minimum width, does not grow. When collapsed the\n         panel takes full width (flex-basis: 100%). -->\n    <div\n      :style=\"{\n        flexBasis: minSideWidth,\n        flexGrow: 0,\n        flexShrink: 0,\n        minWidth: minSideWidth,\n      }\"\n    >\n      <slot name=\"side\" />\n    </div>\n\n    <!-- Content area: fills remaining space, but demands at least 50% of\n         the container before wrapping. When collapsed it also takes full\n         width. -->\n    <div\n      :style=\"{\n        flexBasis: 0,\n        flexGrow: 999,\n        flexShrink: 1,\n        minWidth: '50%',\n      }\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Split.js","names":[],"sources":["../../../../../packages/composition/split/src/Split.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Split — two-panel layout with intrinsic collapse.\n *\n * A flex row that places a side panel and a content area side by side, and\n * stacks them vertically once the container is too narrow for both. The side\n * panel gets a fixed minimum width; the content area grows to fill the\n * remaining space.\n *\n * This is the Every Layout \"Sidebar\" pattern, simplified for the common\n * two-panel case. The intrinsic collapse — panels stack when the container is\n * too narrow — avoids a breakpoint per viewport, and works identically inside\n * a sidebar-narrowed workspace and full-bleed on an ultra-wide monitor.\n *\n * A Split is a component, not a hand-rolled flex row with a media query,\n * because the wrap-and-floor technique is non-obvious and easy to get wrong,\n * and the stacking order (side above or below) is an intent the `side` prop\n * expresses.\n */\nexport type SplitSide = \"left\" | \"right\";\n\nexport type SplitGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<SplitGap, \"none\">, 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 { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** The side the panel sits on. Controls stacking order when collapsed: \"left\" stacks the panel above, \"right\" stacks it below. */\n    side?: SplitSide;\n    /** Minimum width for the side panel (e.g. \"16rem\"). The content area takes the rest. */\n    minSideWidth?: string;\n    /** Gap between the two panels. Tightens one notch below `sm` (except \"none\"). */\n    gap?: SplitGap;\n  }>(),\n  { side: \"left\", minSideWidth: \"16rem\", gap: \"md\" },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap` is the intrinsic collapse mechanism: when the combined\n    `min-width` of both panels exceeds the container, the second panel wraps\n    to a new line. Where that happens is decided by the panels' own minimum\n    widths — there is no breakpoint prop to set it with.\n  -->\n  <div\n    :class=\"cn('flex flex-row', gap !== 'none' ? gapClass[gap] : undefined)\"\n    :style=\"{\n      flexWrap: 'wrap',\n    }\"\n  >\n    <!--\n      Document order follows `side`, so the wrapped stack never contradicts\n      the side-by-side row and screen-reader order matches the visual one:\n      content first when `side=\"right\"`, side first when `side=\"left\"`.\n      flex-row (never reverse) plus this ordering is what makes the wrap\n      produce content-above-panel for `side=\"right\"`.\n    -->\n    <template v-if=\"side === 'right'\">\n      <!-- Content area: fills remaining space, but demands at least 50% of\n           the container before wrapping. When collapsed it also takes full\n           width. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n      >\n        <slot />\n      </div>\n      <!-- Side panel: fixed minimum width, does not grow. When collapsed the\n           panel takes full width (flex-basis: 100%). -->\n      <div\n        :style=\"{\n          flexBasis: minSideWidth,\n          flexGrow: 0,\n          flexShrink: 0,\n          minWidth: minSideWidth,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n    </template>\n    <template v-else>\n      <!-- Side panel: fixed minimum width, does not grow. When collapsed the\n           panel takes full width (flex-basis: 100%). -->\n      <div\n        :style=\"{\n          flexBasis: minSideWidth,\n          flexGrow: 0,\n          flexShrink: 0,\n          minWidth: minSideWidth,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n      <!-- Content area: fills remaining space, but demands at least 50% of\n           the container before wrapping. When collapsed it also takes full\n           width. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n      >\n        <slot />\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/composition/split/src/Split.vue.d.ts

@@ -1,10 +1,10 @@
 /**
  * Split — two-panel layout with intrinsic collapse.
  *
- * A flex row that places a side panel and a content area side by side above
- * a `collapseAt` width, and stacks them vertically below it. The side panel
- * gets a fixed minimum width; the content area grows to fill the remaining
- * space.
+ * A flex row that places a side panel and a content area side by side, and
+ * stacks them vertically once the container is too narrow for both. The side
+ * panel gets a fixed minimum width; the content area grows to fill the
+ * remaining space.
  *
  * This is the Every Layout "Sidebar" pattern, simplified for the common
  * two-panel case. The intrinsic collapse — panels stack when the container is
@@ -12,9 +12,9 @@
  * a sidebar-narrowed workspace and full-bleed on an ultra-wide monitor.
  *
  * A Split is a component, not a hand-rolled flex row with a media query,
- * because the collapse width is a layout decision the call site should name
- * rather than compute, and the stacking order (side above or below) is an
- * intent the `side` prop expresses.
+ * because the wrap-and-floor technique is non-obvious and easy to get wrong,
+ * and the stacking order (side above or below) is an intent the `side` prop
+ * expresses.
  */
 export type SplitSide = "left" | "right";
 export type SplitGap = "sm" | "md" | "lg" | "none";
@@ -25,8 +25,6 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The side the panel sits on. Controls stacking order when collapsed: "left" stacks the panel above, "right" stacks it below. */
     side?: SplitSide;
-    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `"48rem"`. */
-    collapseAt?: string;
     /** Minimum width for the side panel (e.g. "16rem"). The content area takes the rest. */
     minSideWidth?: string;
     /** Gap between the two panels. Tightens one notch below `sm` (except "none"). */
@@ -34,8 +32,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** The side the panel sits on. Controls stacking order when collapsed: "left" stacks the panel above, "right" stacks it below. */
     side?: SplitSide;
-    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `"48rem"`. */
-    collapseAt?: string;
     /** Minimum width for the side panel (e.g. "16rem"). The content area takes the rest. */
     minSideWidth?: string;
     /** Gap between the two panels. Tightens one notch below `sm` (except "none"). */
@@ -43,9 +39,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }> & Readonly<{}>, {
     gap: SplitGap;
     side: SplitSide;
-    collapseAt: string;
     minSideWidth: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    side?: (props: {}) => any;
+} & {
     side?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;

package/dist/packages/composition/split/src/Split.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Split.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/composition/split/src/Split.vue"],"names":[],"mappings":"AAuGA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEnD,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,MAAM,CAI9C,CAAC;AAEX,OAAO,EAAE,QAAQ,EAAE,CAAC;wBACC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,kIAAkI;WAC3H,SAAS;IAChB,gHAAgH;iBACnG,MAAM;IACnB,wFAAwF;mBACzE,MAAM;IACrB,iFAAiF;UAC3E,QAAQ;;IAPd,kIAAkI;WAC3H,SAAS;IAChB,gHAAgH;iBACnG,MAAM;IACnB,wFAAwF;mBACzE,MAAM;IACrB,iFAAiF;UAC3E,QAAQ;;SAAR,QAAQ;UANP,SAAS;gBAEH,MAAM;kBAEJ,MAAM;;WA+Dd,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC3B,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"}
+{"version":3,"file":"Split.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/composition/split/src/Split.vue"],"names":[],"mappings":"AAkIA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEnD,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,MAAM,CAI9C,CAAC;AAEX,OAAO,EAAE,QAAQ,EAAE,CAAC;wBACC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,kIAAkI;WAC3H,SAAS;IAChB,wFAAwF;mBACzE,MAAM;IACrB,iFAAiF;UAC3E,QAAQ;;IALd,kIAAkI;WAC3H,SAAS;IAChB,wFAAwF;mBACzE,MAAM;IACrB,iFAAiF;UAC3E,QAAQ;;SAAR,QAAQ;UAJP,SAAS;kBAED,MAAM;;cAiFX,CAAC,KAAK,IAAgB,KAAK,GAAG;;WACjC,CAAC,KAAK,IAAgB,KAAK,GAAG;;WAC9B,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC3B,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/composition/split/src/Split.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { cn } from "../../../core/src/cn.js";
 import "../../../core/src/index.js";
-import { createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+import { Fragment, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
 //#region packages/composition/split/src/Split.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { style: {
 	flexBasis: 0,
@@ -8,6 +8,12 @@ var _hoisted_1 = { style: {
 	flexShrink: 1,
 	minWidth: "50%"
 } };
+var _hoisted_2 = { style: {
+	flexBasis: 0,
+	flexGrow: 999,
+	flexShrink: 1,
+	minWidth: "50%"
+} };
 var gapClass = {
 	sm: "gap-2 sm:gap-3",
 	md: "gap-3 sm:gap-4",
@@ -17,21 +23,25 @@ var Split_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 	__name: "Split",
 	props: {
 		side: { default: "left" },
-		collapseAt: { default: "48rem" },
 		minSideWidth: { default: "16rem" },
 		gap: { default: "md" }
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(unref(cn)("flex", __props.side === "right" ? "flex-row-reverse" : "flex-row", __props.gap !== "none" ? gapClass[__props.gap] : void 0)),
+				class: normalizeClass(unref(cn)("flex flex-row", __props.gap !== "none" ? gapClass[__props.gap] : void 0)),
 				style: { flexWrap: "wrap" }
-			}, [createElementVNode("div", { style: normalizeStyle({
+			}, [__props.side === "right" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", { style: normalizeStyle({
+				flexBasis: __props.minSideWidth,
+				flexGrow: 0,
+				flexShrink: 0,
+				minWidth: __props.minSideWidth
+			}) }, [renderSlot(_ctx.$slots, "side")], 4)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { style: normalizeStyle({
 				flexBasis: __props.minSideWidth,
 				flexGrow: 0,
 				flexShrink: 0,
 				minWidth: __props.minSideWidth
-			}) }, [renderSlot(_ctx.$slots, "side")], 4), createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])], 2);
+			}) }, [renderSlot(_ctx.$slots, "side")], 4), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 64))], 2);
 		};
 	}
 });

package/dist/packages/composition/split/src/Split.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Split.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/composition/split/src/Split.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Split — two-panel layout with intrinsic collapse.\n *\n * A flex row that places a side panel and a content area side by side above\n * a `collapseAt` width, and stacks them vertically below it. The side panel\n * gets a fixed minimum width; the content area grows to fill the remaining\n * space.\n *\n * This is the Every Layout \"Sidebar\" pattern, simplified for the common\n * two-panel case. The intrinsic collapse — panels stack when the container is\n * too narrow — avoids a breakpoint per viewport, and works identically inside\n * a sidebar-narrowed workspace and full-bleed on an ultra-wide monitor.\n *\n * A Split is a component, not a hand-rolled flex row with a media query,\n * because the collapse width is a layout decision the call site should name\n * rather than compute, and the stacking order (side above or below) is an\n * intent the `side` prop expresses.\n */\nexport type SplitSide = \"left\" | \"right\";\n\nexport type SplitGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<SplitGap, \"none\">, 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 { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** The side the panel sits on. Controls stacking order when collapsed: \"left\" stacks the panel above, \"right\" stacks it below. */\n    side?: SplitSide;\n    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `\"48rem\"`. */\n    collapseAt?: string;\n    /** Minimum width for the side panel (e.g. \"16rem\"). The content area takes the rest. */\n    minSideWidth?: string;\n    /** Gap between the two panels. Tightens one notch below `sm` (except \"none\"). */\n    gap?: SplitGap;\n  }>(),\n  { side: \"left\", collapseAt: \"48rem\", minSideWidth: \"16rem\", gap: \"md\" },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap` is the intrinsic collapse mechanism: when the combined\n    `min-width` of both panels exceeds the container, the second panel wraps\n    to a new line. The `collapseAt` prop sets the breakpoint that controls\n    when `flex-wrap` is active.\n  -->\n  <div\n    :class=\"\n      cn(\n        'flex',\n        side === 'right' ? 'flex-row-reverse' : 'flex-row',\n        gap !== 'none' ? gapClass[gap] : undefined,\n      )\n    \"\n    :style=\"{\n      flexWrap: 'wrap',\n    }\"\n  >\n    <!-- Side panel: fixed minimum width, does not grow. When collapsed the\n         panel takes full width (flex-basis: 100%). -->\n    <div\n      :style=\"{\n        flexBasis: minSideWidth,\n        flexGrow: 0,\n        flexShrink: 0,\n        minWidth: minSideWidth,\n      }\"\n    >\n      <slot name=\"side\" />\n    </div>\n\n    <!-- Content area: fills remaining space, but demands at least 50% of\n         the container before wrapping. When collapsed it also takes full\n         width. -->\n    <div\n      :style=\"{\n        flexBasis: 0,\n        flexGrow: 999,\n        flexShrink: 1,\n        minWidth: '50%',\n      }\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;AAuBA,IAAM,WAAsD;CAC1D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;GA8BE,OAAA,UAAA,GAAA,mBAsCM,OAAA;IArCH,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,QAA0B,QAAA,SAAI,UAAA,qBAAA,YAAwD,QAAA,QAAG,SAAc,SAAS,QAAA,OAAO,KAAA,CAAA,CAAA;IAOvI,OAAO,EAAA,UAAA,OAEP;GAID,GAAA,CAAA,mBASM,OAAA,EARH,OAAK,eAAA;IAAuB,WAAA,QAAA;;;IAA4E,UAAA,QAAA;GAOzG,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAMtB,mBASM,OATN,YASM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"Split.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/composition/split/src/Split.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Split — two-panel layout with intrinsic collapse.\n *\n * A flex row that places a side panel and a content area side by side, and\n * stacks them vertically once the container is too narrow for both. The side\n * panel gets a fixed minimum width; the content area grows to fill the\n * remaining space.\n *\n * This is the Every Layout \"Sidebar\" pattern, simplified for the common\n * two-panel case. The intrinsic collapse — panels stack when the container is\n * too narrow — avoids a breakpoint per viewport, and works identically inside\n * a sidebar-narrowed workspace and full-bleed on an ultra-wide monitor.\n *\n * A Split is a component, not a hand-rolled flex row with a media query,\n * because the wrap-and-floor technique is non-obvious and easy to get wrong,\n * and the stacking order (side above or below) is an intent the `side` prop\n * expresses.\n */\nexport type SplitSide = \"left\" | \"right\";\n\nexport type SplitGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<SplitGap, \"none\">, 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 { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** The side the panel sits on. Controls stacking order when collapsed: \"left\" stacks the panel above, \"right\" stacks it below. */\n    side?: SplitSide;\n    /** Minimum width for the side panel (e.g. \"16rem\"). The content area takes the rest. */\n    minSideWidth?: string;\n    /** Gap between the two panels. Tightens one notch below `sm` (except \"none\"). */\n    gap?: SplitGap;\n  }>(),\n  { side: \"left\", minSideWidth: \"16rem\", gap: \"md\" },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap` is the intrinsic collapse mechanism: when the combined\n    `min-width` of both panels exceeds the container, the second panel wraps\n    to a new line. Where that happens is decided by the panels' own minimum\n    widths — there is no breakpoint prop to set it with.\n  -->\n  <div\n    :class=\"cn('flex flex-row', gap !== 'none' ? gapClass[gap] : undefined)\"\n    :style=\"{\n      flexWrap: 'wrap',\n    }\"\n  >\n    <!--\n      Document order follows `side`, so the wrapped stack never contradicts\n      the side-by-side row and screen-reader order matches the visual one:\n      content first when `side=\"right\"`, side first when `side=\"left\"`.\n      flex-row (never reverse) plus this ordering is what makes the wrap\n      produce content-above-panel for `side=\"right\"`.\n    -->\n    <template v-if=\"side === 'right'\">\n      <!-- Content area: fills remaining space, but demands at least 50% of\n           the container before wrapping. When collapsed it also takes full\n           width. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n      >\n        <slot />\n      </div>\n      <!-- Side panel: fixed minimum width, does not grow. When collapsed the\n           panel takes full width (flex-basis: 100%). -->\n      <div\n        :style=\"{\n          flexBasis: minSideWidth,\n          flexGrow: 0,\n          flexShrink: 0,\n          minWidth: minSideWidth,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n    </template>\n    <template v-else>\n      <!-- Side panel: fixed minimum width, does not grow. When collapsed the\n           panel takes full width (flex-basis: 100%). -->\n      <div\n        :style=\"{\n          flexBasis: minSideWidth,\n          flexGrow: 0,\n          flexShrink: 0,\n          minWidth: minSideWidth,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n      <!-- Content area: fills remaining space, but demands at least 50% of\n           the container before wrapping. When collapsed it also takes full\n           width. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n      >\n        <slot />\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,WAAsD;CAC1D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;GA4BE,OAAA,UAAA,GAAA,mBAmEM,OAAA;IAlEH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,iBAAkB,QAAA,QAAG,SAAc,SAAS,QAAA,OAAO,KAAA,CAAS,CAAA;IACrE,OAAO,EAAA,UAAA,OAEP;GASe,GAAA,CAAA,QAAA,SAAI,WAApB,UAAA,GAAA,mBA0BW,UAAA,EAAA,KAAA,EAAA,GAAA,CAtBT,mBASM,OATN,YASM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,GAIV,mBASM,OAAA,EARH,OAAK,eAAA;IAAyB,WAAA,QAAA;;;IAAkF,UAAA,QAAA;GAOjH,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,MAGxB,UAAA,GAAA,mBA0BW,UAAA,EAAA,KAAA,EAAA,GAAA,CAvBT,mBASM,OAAA,EARH,OAAK,eAAA;IAAyB,WAAA,QAAA;;;IAAkF,UAAA,QAAA;GAOjH,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAKtB,mBASM,OATN,YASM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA"}

package/dist/packages/core/src/a11y-scope.d.ts

@@ -5,15 +5,81 @@
  * the document is the consumer's to answer, not ours.
  *
  * Single source for every axe run against this package, and there is more
- * than one, in different processes: the documentation site's live
- * accessibility panel and the end-to-end gate that scans the built site. Both
- * import this. The list must never be restated, or the panel a contributor
- * reads and the gate that blocks the merge drift into disagreeing about what
- * counts as a violation.
+ * than one, in different processes: the jsdom demo sweep, the harness gate,
+ * the root gate that scans the built site, and the pin tests that hold the
+ * partition exact. All import this. The list must never be restated, or the
+ * tier a contributor reads and the gate that blocks the merge drift into
+ * disagreeing about what counts as a violation.
  *
  * Exported from the narrow `@ecoma-io/loom/a11y` entry so a tool that only
  * needs this array — a Playwright run, a CI script — can read it without
  * pulling in a single Vue component.
+ *
+ * The array is partitioned into BROWSERLESS_RULES, BROWSER_REQUIRED_RULES, and
+ * TAGGED_BUT_DISABLED_RULES. The split line between the first two is whether a rule's
+ * checks read layout geometry, hit-testing, pseudo-element or computed-color resolution,
+ * cascade-dependent font metrics, canvas, or media state — none of which the jsdom demo
+ * tier provides. TAGGED_BUT_DISABLED holds the WCAG-tagged rules that axe-core 4.12.1
+ * ships with enabled:false; a tag-type runOnly (the old gate: withTags([...WCAG_TAGS]))
+ * excludes them, so they were never part of the tag-selected rule set. A rule-type
+ * runOnly (the gates that consume these lists: withRules([...list])) RUNS any named
+ * rule regardless of enabled status.
+ *
+ * Loom's bar is that a rule mapping to a Level A or AA success criterion stays out of
+ * the runtime tiers only when it is SUPERSEDED (another rule in the tiers already
+ * judges the same criterion) or OUT-OF-REACH (the criterion needs something this
+ * repository cannot supply) — "axe ships it disabled" is not a reason. The partition
+ * below is the result of that review, 2026-08-26: of the 7 disabled rules, 5 were
+ * adopted (aria-roledescription browserless; label-content-name-mismatch, p-as-heading,
+ * table-fake-caption and td-has-header browser-required — the findings on loom's own
+ * markup were fixed in the same change) and 2 remain out, each with its criterion and
+ * its reason written below.
+ *
+ * The runtime tiers hold 68 of the 70 WCAG-tagged rules: BROWSERLESS_RULES (51) ∪
+ * BROWSER_REQUIRED_RULES (17). The union of all three sets equals the full 70, which
+ * is pinned by packages/core/tests/a11y-scope.test.ts.
  */
 export declare const WCAG_TAGS: readonly ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
+/**
+ * Rules that can be judged in jsdom — semantic checks that read only the DOM,
+ * attributes, and cascade (no layout geometry, hit-testing, pseudo-elements,
+ * computed colors, canvas, or media state).
+ *
+ * These 51 rules are verified to produce identical verdicts in jsdom 30 and
+ * Chromium on violation fixtures, and to agree on all 94 demos. Each entry
+ * was classified by scanning its check helpers for browser-API dependencies;
+ * the partition is pinned by packages/core/tests/a11y-scope.test.ts.
+ */
+export declare const BROWSERLESS_RULES: readonly ["area-alt", "aria-allowed-attr", "aria-braille-equivalent", "aria-command-name", "aria-conditional-attr", "aria-deprecated-role", "aria-hidden-body", "aria-input-field-name", "aria-meter-name", "aria-progressbar-name", "aria-prohibited-attr", "aria-required-attr", "aria-required-children", "aria-required-parent", "aria-roledescription", "aria-roles", "aria-tab-name", "aria-toggle-field-name", "aria-tooltip-name", "aria-valid-attr", "aria-valid-attr-value", "autocomplete-valid", "blink", "button-name", "definition-list", "dlitem", "document-title", "duplicate-id-aria", "form-field-multiple-labels", "frame-title", "frame-title-unique", "html-has-lang", "html-lang-valid", "html-xml-lang-mismatch", "image-alt", "input-button-name", "input-image-alt", "label", "link-name", "list", "listitem", "meta-refresh", "meta-viewport", "nested-interactive", "role-img-alt", "select-name", "server-side-image-map", "summary-name", "svg-img-alt", "valid-lang", "video-caption"];
+/**
+ * Rules that require a rendering engine — their checks (or, for the table
+ * rules, their `matches` predicate) read layout geometry, hit-test results,
+ * pseudo-element styles, computed color pipelines, cascade-dependent font
+ * metrics, canvas, or media state (src, currentSrc, plays), which jsdom does
+ * not provide — or which the jsdom demo tier cannot judge because it mounts
+ * demos with no stylesheet loaded.
+ *
+ * These 17 rules are what the browser gates run. The split is:
+ * - 11 rendering-dependent (geometry, hit-testing, computed colors, canvas, media, iframe content)
+ * - 2 conservative-partial (table rules whose `matches` predicate uses border
+ *   geometry; kept in browser until Table semantic markup is pinned)
+ * - 4 adopted 2026-08-26 from TAGGED_BUT_DISABLED (see their own comments)
+ */
+export declare const BROWSER_REQUIRED_RULES: readonly ["aria-hidden-focus", "avoid-inline-spacing", "bypass", "color-contrast", "frame-focusable-content", "link-in-text-block", "marquee", "no-autoplay-audio", "object-alt", "scrollable-region-focusable", "target-size", "td-headers-attr", "th-has-data-cells", "label-content-name-mismatch", "p-as-heading", "table-fake-caption", "td-has-header"];
+/**
+ * WCAG-tagged rules that axe-core 4.12.1 ships with enabled: false and that
+ * stay OUT of the runtime tiers — each with its success criterion and the
+ * OUT-OF-REACH reason, per the review of 2026-08-26. A disabled rule may only
+ * sit here if the criterion needs something this repository cannot supply;
+ * "axe ships it disabled" is not a reason, and neither is a finding on loom's
+ * own markup (that gets fixed and the rule adopted — the other five disabled
+ * rules went exactly that way).
+ *
+ * Naming one of these in a rule-type runOnly would run it anyway (enabled
+ * status does not gate withRules), which is why they live in their own list
+ * rather than being deleted: the union pin in packages/core/tests/
+ * a11y-scope.test.ts keeps the 70-rule partition exact, and a future
+ * component that reaches one of these criteria re-adjudicates here.
+ */
+export declare const TAGGED_BUT_DISABLED_RULES: readonly ["audio-caption", "css-orientation-lock"];
 //# sourceMappingURL=a11y-scope.d.ts.map

package/dist/packages/core/src/a11y-scope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-scope.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/a11y-scope.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,SAAS,mEAAoE,CAAC"}
+{"version":3,"file":"a11y-scope.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/a11y-scope.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,SAAS,mEAAoE,CAAC;AAE3F;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,u9BA+DpB,CAAC;AAEX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB,+VAoCzB,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,oDAsB5B,CAAC"}

package/dist/packages/core/src/a11y-scope.js

@@ -6,15 +6,39 @@
 * the document is the consumer's to answer, not ours.
 *
 * Single source for every axe run against this package, and there is more
-* than one, in different processes: the documentation site's live
-* accessibility panel and the end-to-end gate that scans the built site. Both
-* import this. The list must never be restated, or the panel a contributor
-* reads and the gate that blocks the merge drift into disagreeing about what
-* counts as a violation.
+* than one, in different processes: the jsdom demo sweep, the harness gate,
+* the root gate that scans the built site, and the pin tests that hold the
+* partition exact. All import this. The list must never be restated, or the
+* tier a contributor reads and the gate that blocks the merge drift into
+* disagreeing about what counts as a violation.
 *
 * Exported from the narrow `@ecoma-io/loom/a11y` entry so a tool that only
 * needs this array — a Playwright run, a CI script — can read it without
 * pulling in a single Vue component.
+*
+* The array is partitioned into BROWSERLESS_RULES, BROWSER_REQUIRED_RULES, and
+* TAGGED_BUT_DISABLED_RULES. The split line between the first two is whether a rule's
+* checks read layout geometry, hit-testing, pseudo-element or computed-color resolution,
+* cascade-dependent font metrics, canvas, or media state — none of which the jsdom demo
+* tier provides. TAGGED_BUT_DISABLED holds the WCAG-tagged rules that axe-core 4.12.1
+* ships with enabled:false; a tag-type runOnly (the old gate: withTags([...WCAG_TAGS]))
+* excludes them, so they were never part of the tag-selected rule set. A rule-type
+* runOnly (the gates that consume these lists: withRules([...list])) RUNS any named
+* rule regardless of enabled status.
+*
+* Loom's bar is that a rule mapping to a Level A or AA success criterion stays out of
+* the runtime tiers only when it is SUPERSEDED (another rule in the tiers already
+* judges the same criterion) or OUT-OF-REACH (the criterion needs something this
+* repository cannot supply) — "axe ships it disabled" is not a reason. The partition
+* below is the result of that review, 2026-08-26: of the 7 disabled rules, 5 were
+* adopted (aria-roledescription browserless; label-content-name-mismatch, p-as-heading,
+* table-fake-caption and td-has-header browser-required — the findings on loom's own
+* markup were fixed in the same change) and 2 remain out, each with its criterion and
+* its reason written below.
+*
+* The runtime tiers hold 68 of the 70 WCAG-tagged rules: BROWSERLESS_RULES (51) ∪
+* BROWSER_REQUIRED_RULES (17). The union of all three sets equals the full 70, which
+* is pinned by packages/core/tests/a11y-scope.test.ts.
 */
 var WCAG_TAGS = [
 	"wcag2a",
@@ -23,7 +47,103 @@ var WCAG_TAGS = [
 	"wcag21aa",
 	"wcag22aa"
 ];
+/**
+* Rules that can be judged in jsdom — semantic checks that read only the DOM,
+* attributes, and cascade (no layout geometry, hit-testing, pseudo-elements,
+* computed colors, canvas, or media state).
+*
+* These 51 rules are verified to produce identical verdicts in jsdom 30 and
+* Chromium on violation fixtures, and to agree on all 94 demos. Each entry
+* was classified by scanning its check helpers for browser-API dependencies;
+* the partition is pinned by packages/core/tests/a11y-scope.test.ts.
+*/
+var BROWSERLESS_RULES = [
+	"area-alt",
+	"aria-allowed-attr",
+	"aria-braille-equivalent",
+	"aria-command-name",
+	"aria-conditional-attr",
+	"aria-deprecated-role",
+	"aria-hidden-body",
+	"aria-input-field-name",
+	"aria-meter-name",
+	"aria-progressbar-name",
+	"aria-prohibited-attr",
+	"aria-required-attr",
+	"aria-required-children",
+	"aria-required-parent",
+	"aria-roledescription",
+	"aria-roles",
+	"aria-tab-name",
+	"aria-toggle-field-name",
+	"aria-tooltip-name",
+	"aria-valid-attr",
+	"aria-valid-attr-value",
+	"autocomplete-valid",
+	"blink",
+	"button-name",
+	"definition-list",
+	"dlitem",
+	"document-title",
+	"duplicate-id-aria",
+	"form-field-multiple-labels",
+	"frame-title",
+	"frame-title-unique",
+	"html-has-lang",
+	"html-lang-valid",
+	"html-xml-lang-mismatch",
+	"image-alt",
+	"input-button-name",
+	"input-image-alt",
+	"label",
+	"link-name",
+	"list",
+	"listitem",
+	"meta-refresh",
+	"meta-viewport",
+	"nested-interactive",
+	"role-img-alt",
+	"select-name",
+	"server-side-image-map",
+	"summary-name",
+	"svg-img-alt",
+	"valid-lang",
+	"video-caption"
+];
+/**
+* Rules that require a rendering engine — their checks (or, for the table
+* rules, their `matches` predicate) read layout geometry, hit-test results,
+* pseudo-element styles, computed color pipelines, cascade-dependent font
+* metrics, canvas, or media state (src, currentSrc, plays), which jsdom does
+* not provide — or which the jsdom demo tier cannot judge because it mounts
+* demos with no stylesheet loaded.
+*
+* These 17 rules are what the browser gates run. The split is:
+* - 11 rendering-dependent (geometry, hit-testing, computed colors, canvas, media, iframe content)
+* - 2 conservative-partial (table rules whose `matches` predicate uses border
+*   geometry; kept in browser until Table semantic markup is pinned)
+* - 4 adopted 2026-08-26 from TAGGED_BUT_DISABLED (see their own comments)
+*/
+var BROWSER_REQUIRED_RULES = [
+	"aria-hidden-focus",
+	"avoid-inline-spacing",
+	"bypass",
+	"color-contrast",
+	"frame-focusable-content",
+	"link-in-text-block",
+	"marquee",
+	"no-autoplay-audio",
+	"object-alt",
+	"scrollable-region-focusable",
+	"target-size",
+	"td-headers-attr",
+	"th-has-data-cells",
+	"label-content-name-mismatch",
+	"p-as-heading",
+	"table-fake-caption",
+	"td-has-header"
+];
 //#endregion
-export { WCAG_TAGS };
+export { BROWSERLESS_RULES, BROWSER_REQUIRED_RULES, WCAG_TAGS };
 
 //# sourceMappingURL=a11y-scope.js.map

package/dist/packages/core/src/a11y-scope.js.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-scope.js","names":[],"sources":["../../../../packages/core/src/a11y-scope.ts"],"sourcesContent":["/**\n * The WCAG scope Loom holds itself to: the assistive-technology and keyboard\n * rules, not axe's SEO and document-structure best-practice set. A component\n * library cannot know what document it will be rendered into, so a rule about\n * the document is the consumer's to answer, not ours.\n *\n * Single source for every axe run against this package, and there is more\n * than one, in different processes: the documentation site's live\n * accessibility panel and the end-to-end gate that scans the built site. Both\n * import this. The list must never be restated, or the panel a contributor\n * reads and the gate that blocks the merge drift into disagreeing about what\n * counts as a violation.\n *\n * Exported from the narrow `@ecoma-io/loom/a11y` entry so a tool that only\n * needs this array — a Playwright run, a CI script — can read it without\n * pulling in a single Vue component.\n */\nexport const WCAG_TAGS = [\"wcag2a\", \"wcag2aa\", \"wcag21a\", \"wcag21aa\", \"wcag22aa\"] as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,IAAa,YAAY;CAAC;CAAU;CAAW;CAAW;CAAY;AAAU"}
+{"version":3,"file":"a11y-scope.js","names":[],"sources":["../../../../packages/core/src/a11y-scope.ts"],"sourcesContent":["/**\n * The WCAG scope Loom holds itself to: the assistive-technology and keyboard\n * rules, not axe's SEO and document-structure best-practice set. A component\n * library cannot know what document it will be rendered into, so a rule about\n * the document is the consumer's to answer, not ours.\n *\n * Single source for every axe run against this package, and there is more\n * than one, in different processes: the jsdom demo sweep, the harness gate,\n * the root gate that scans the built site, and the pin tests that hold the\n * partition exact. All import this. The list must never be restated, or the\n * tier a contributor reads and the gate that blocks the merge drift into\n * disagreeing about what counts as a violation.\n *\n * Exported from the narrow `@ecoma-io/loom/a11y` entry so a tool that only\n * needs this array — a Playwright run, a CI script — can read it without\n * pulling in a single Vue component.\n *\n * The array is partitioned into BROWSERLESS_RULES, BROWSER_REQUIRED_RULES, and\n * TAGGED_BUT_DISABLED_RULES. The split line between the first two is whether a rule's\n * checks read layout geometry, hit-testing, pseudo-element or computed-color resolution,\n * cascade-dependent font metrics, canvas, or media state — none of which the jsdom demo\n * tier provides. TAGGED_BUT_DISABLED holds the WCAG-tagged rules that axe-core 4.12.1\n * ships with enabled:false; a tag-type runOnly (the old gate: withTags([...WCAG_TAGS]))\n * excludes them, so they were never part of the tag-selected rule set. A rule-type\n * runOnly (the gates that consume these lists: withRules([...list])) RUNS any named\n * rule regardless of enabled status.\n *\n * Loom's bar is that a rule mapping to a Level A or AA success criterion stays out of\n * the runtime tiers only when it is SUPERSEDED (another rule in the tiers already\n * judges the same criterion) or OUT-OF-REACH (the criterion needs something this\n * repository cannot supply) — \"axe ships it disabled\" is not a reason. The partition\n * below is the result of that review, 2026-08-26: of the 7 disabled rules, 5 were\n * adopted (aria-roledescription browserless; label-content-name-mismatch, p-as-heading,\n * table-fake-caption and td-has-header browser-required — the findings on loom's own\n * markup were fixed in the same change) and 2 remain out, each with its criterion and\n * its reason written below.\n *\n * The runtime tiers hold 68 of the 70 WCAG-tagged rules: BROWSERLESS_RULES (51) ∪\n * BROWSER_REQUIRED_RULES (17). The union of all three sets equals the full 70, which\n * is pinned by packages/core/tests/a11y-scope.test.ts.\n */\nexport const WCAG_TAGS = [\"wcag2a\", \"wcag2aa\", \"wcag21a\", \"wcag21aa\", \"wcag22aa\"] as const;\n\n/**\n * Rules that can be judged in jsdom — semantic checks that read only the DOM,\n * attributes, and cascade (no layout geometry, hit-testing, pseudo-elements,\n * computed colors, canvas, or media state).\n *\n * These 51 rules are verified to produce identical verdicts in jsdom 30 and\n * Chromium on violation fixtures, and to agree on all 94 demos. Each entry\n * was classified by scanning its check helpers for browser-API dependencies;\n * the partition is pinned by packages/core/tests/a11y-scope.test.ts.\n */\nexport const BROWSERLESS_RULES = [\n  \"area-alt\",\n  \"aria-allowed-attr\",\n  \"aria-braille-equivalent\",\n  \"aria-command-name\",\n  \"aria-conditional-attr\",\n  \"aria-deprecated-role\",\n  \"aria-hidden-body\",\n  \"aria-input-field-name\",\n  \"aria-meter-name\",\n  \"aria-progressbar-name\",\n  \"aria-prohibited-attr\",\n  \"aria-required-attr\",\n  \"aria-required-children\",\n  \"aria-required-parent\",\n  // Adopted 2026-08-26 from TAGGED_BUT_DISABLED. Deprecated by axe-core\n  // 4.7.0 with NO successor — the axe-core change that deprecated it states\n  // there is no other rule testing aria-roledescription usage — so WCAG 4.1.2\n  // (Level A) had nothing judging it.\n  // The check reads only the element's role (axe commons getRole), no\n  // browser API: identical verdicts measured jsdom vs Chromium on five\n  // fixtures including two violations (aria-roledescription on a roleless\n  // div, and on role=\"presentation\"), and clean on all 94 demos in both\n  // engines. Loom ships this attribute through Reka (NumberField's\n  // spinbutton, ColorPicker's slider surfaces) — all on roled elements,\n  // which the rule passes.\n  \"aria-roledescription\",\n  \"aria-roles\",\n  \"aria-tab-name\",\n  \"aria-toggle-field-name\",\n  \"aria-tooltip-name\",\n  \"aria-valid-attr\",\n  \"aria-valid-attr-value\",\n  \"autocomplete-valid\",\n  \"blink\",\n  \"button-name\",\n  \"definition-list\",\n  \"dlitem\",\n  \"document-title\",\n  \"duplicate-id-aria\",\n  \"form-field-multiple-labels\",\n  \"frame-title\",\n  \"frame-title-unique\",\n  \"html-has-lang\",\n  \"html-lang-valid\",\n  \"html-xml-lang-mismatch\",\n  \"image-alt\",\n  \"input-button-name\",\n  \"input-image-alt\",\n  \"label\",\n  \"link-name\",\n  \"list\",\n  \"listitem\",\n  \"meta-refresh\",\n  \"meta-viewport\",\n  \"nested-interactive\",\n  \"role-img-alt\",\n  \"select-name\",\n  \"server-side-image-map\",\n  \"summary-name\",\n  \"svg-img-alt\",\n  \"valid-lang\",\n  \"video-caption\",\n] as const;\n\n/**\n * Rules that require a rendering engine — their checks (or, for the table\n * rules, their `matches` predicate) read layout geometry, hit-test results,\n * pseudo-element styles, computed color pipelines, cascade-dependent font\n * metrics, canvas, or media state (src, currentSrc, plays), which jsdom does\n * not provide — or which the jsdom demo tier cannot judge because it mounts\n * demos with no stylesheet loaded.\n *\n * These 17 rules are what the browser gates run. The split is:\n * - 11 rendering-dependent (geometry, hit-testing, computed colors, canvas, media, iframe content)\n * - 2 conservative-partial (table rules whose `matches` predicate uses border\n *   geometry; kept in browser until Table semantic markup is pinned)\n * - 4 adopted 2026-08-26 from TAGGED_BUT_DISABLED (see their own comments)\n */\nexport const BROWSER_REQUIRED_RULES = [\n  // Rendering-dependent (11): each checks geometry/hit-test/computed styles/canvas/media/iframe\n  \"aria-hidden-focus\", // isModalOpen → elementsFromPoint, cantTell in jsdom\n  \"avoid-inline-spacing\", // letter-spacing unresolved + Range.getClientRects gate → false-pass\n  \"bypass\", // same modal-open throw; also pageLevel (page-scoped, wrong in component harness)\n  \"color-contrast\", // computed color pipeline — jsdom cantTell on every node\n  \"frame-focusable-content\", // iframe content inspection — requires browser to load frame\n  \"link-in-text-block\", // innerText + color + rects\n  \"marquee\", // jsdom default overflow:hidden + zero rect → false-pass\n  \"no-autoplay-audio\", // currentSrc empty → never runs\n  \"object-alt\", // matches throws on getClientRects\n  \"scrollable-region-focusable\", // content-vs-container rects zero → never matches, silent false-pass\n  \"target-size\", // zero rects read compliant — silent false-pass on real violations\n  // Conservative-partial (2): table rules using border geometry; jsdom skips border-only tables\n  \"td-headers-attr\", // border heuristic (offsetWidth !== clientHeight)\n  \"th-has-data-cells\", // same border heuristic\n  // Adopted 2026-08-26 (4), each with the measured reason jsdom cannot judge it:\n  \"label-content-name-mismatch\", // WCAG 2.5.3 (A). Measured: 12 violations on\n  // the stepper demo in Chromium, incomplete in jsdom — the visible-text half\n  // of the check reads on-screen geometry (axe's hiddenMethods: opacity, clip,\n  // coords) and icon-ligature detection needs a 2d canvas context, which jsdom\n  // returns null without the `canvas` package. Its stepper/app-header findings\n  // were fixed in the same change as this adoption.\n  \"p-as-heading\", // WCAG 1.3.1 (A). The check reads computed font-weight/-size/\n  // font-style; the jsdom demo tier mounts demos with no stylesheet, so\n  // class-styled emphasis reads as default weight there — the card/empty-state\n  // findings existed only in Chromium. Theme-invariant (font metrics do not\n  // depend on data-theme), so the dark pass gains nothing from re-running it.\n  \"table-fake-caption\", // WCAG 1.3.1 (A). The check itself is DOM-only (toGrid),\n  // but data-table-matches → isDataTable classifies border-only tables through\n  // offsetWidth/clientWidth geometry. Measured: a border-only table whose\n  // first row is one colspanning cell violates in Chromium and never matches\n  // in jsdom — same conservative-partial profile as td-headers-attr above.\n  \"td-has-header\", // WCAG 1.3.1 (A). Same isDataTable dependency. Measured:\n  // a 3x3 border-only table violates in Chromium and never matches in jsdom —\n  // a silent false-pass if this were browserless.\n] as const;\n\n/**\n * WCAG-tagged rules that axe-core 4.12.1 ships with enabled: false and that\n * stay OUT of the runtime tiers — each with its success criterion and the\n * OUT-OF-REACH reason, per the review of 2026-08-26. A disabled rule may only\n * sit here if the criterion needs something this repository cannot supply;\n * \"axe ships it disabled\" is not a reason, and neither is a finding on loom's\n * own markup (that gets fixed and the rule adopted — the other five disabled\n * rules went exactly that way).\n *\n * Naming one of these in a rule-type runOnly would run it anyway (enabled\n * status does not gate withRules), which is why they live in their own list\n * rather than being deleted: the union pin in packages/core/tests/\n * a11y-scope.test.ts keeps the 70-rule partition exact, and a future\n * component that reaches one of these criteria re-adjudicates here.\n */\nexport const TAGGED_BUT_DISABLED_RULES = [\n  // WCAG 1.2.1 (Audio-only and Video-only, Level A). OUT-OF-REACH: the\n  // criterion needs real audio media — loom ships no <audio> element in any\n  // component, demo or docs page (zero grep hits in packages/ and docs/),\n  // and a component library supplies structure, not media. Even if one\n  // appeared, this rule could never redden a gate: its caption check\n  // (axe-core 4.12.1 source) returns false when a captions track exists and\n  // void 0 otherwise — pass or incomplete, never a violation. axe-core\n  // deprecated it in 3.1.0 because WebVTT caption tracks on <audio> do not\n  // function in any browser (\"Audio captions do not work\", per the\n  // deprecation change itself); the text alternative 1.2.1 actually asks for\n  // is host content, not markup.\n  \"audio-caption\",\n  // WCAG 1.3.4 (Orientation, Level AA). OUT-OF-REACH: the criterion needs an\n  // orientation-locked app shell — CSS orientation media queries with fixed\n  // extents, or the Screen Orientation API — and loom ships neither in any\n  // component, demo, docs page or the harness's own stylesheet (zero grep\n  // hits; theme.css is orientation-agnostic by design, tokens not layout).\n  // Locking orientation is the host application's decision; measured 2026-08-26\n  // the rule passes every one of the 94 demos in Chromium, where it reads the\n  // preloaded CSSOM jsdom does not provide.\n  \"css-orientation-lock\",\n] as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,IAAa,YAAY;CAAC;CAAU;CAAW;CAAW;CAAY;AAAU;;;;;;;;;;;AAYhF,IAAa,oBAAoB;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAYA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;;;;AAgBA,IAAa,yBAAyB;CAEpC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CAMA;CAKA;CAKA;AAGF"}

package/dist/packages/core/src/index.d.ts

@@ -2,7 +2,7 @@ export { cn } from "./cn";
 export { optional } from "./props";
 export { useSplitAttrs } from "./attrs";
 export { LIST_STAGGER_CAP, LIST_STAGGER_STEP_MS, listStaggerDelay, smoothScrollBehavior, } from "./motion";
-export { WCAG_TAGS } from "./a11y-scope";
+export { WCAG_TAGS, BROWSERLESS_RULES, BROWSER_REQUIRED_RULES } from "./a11y-scope";
 export { useTheme, themeScript } from "./theme";
 export type { ThemePreference, ResolvedTheme } from "./theme";
 export { applyLoomIconDefaults } from "./icon-defaults";

package/dist/packages/core/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAGpF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/packages/core/src/index.js

@@ -2,7 +2,7 @@ import { cn } from "./cn.js";
 import { optional } from "./props.js";
 import { useSplitAttrs } from "./attrs.js";
 import { listStaggerDelay, smoothScrollBehavior } from "./motion.js";
-import { WCAG_TAGS } from "./a11y-scope.js";
+import { BROWSERLESS_RULES, BROWSER_REQUIRED_RULES, WCAG_TAGS } from "./a11y-scope.js";
 import { themeScript, useTheme } from "./theme.js";
 import { applyLoomIconDefaults } from "./icon-defaults.js";
-export { WCAG_TAGS, applyLoomIconDefaults, cn, listStaggerDelay, optional, smoothScrollBehavior, themeScript, useSplitAttrs, useTheme };
+export { BROWSERLESS_RULES, BROWSER_REQUIRED_RULES, WCAG_TAGS, applyLoomIconDefaults, cn, listStaggerDelay, optional, smoothScrollBehavior, themeScript, useSplitAttrs, useTheme };