@vielzeug/refine 1.1.1

package/dist/tabs.js

@@ -0,0 +1,126 @@
+import { colorThemeMixin as e } from "./styles/mixins/theme.css.js";
+import { sizableBundle as t, themableBundle as n } from "./shared/prop-bundles.js";
+import { createInteraction as r } from "./headless/keyboard.js";
+import { createListControl as i } from "./headless/nav.js";
+import a from "./disclosure/tabs/tabs.css?inline.js";
+import { createContext as o, define as s, html as c, prop as l, ref as u } from "@vielzeug/ore";
+import { computed as d, signal as f, watch as p } from "@vielzeug/ripple";
+//#region src/disclosure/tabs/tabs.ts
+var m = o("TabsContext"), h = "ore-tabs";
+s(h, {
+	props: {
+		...n,
+		...t,
+		activation: l.oneOf(["auto", "manual"], "auto"),
+		label: l.string(),
+		orientation: l.oneOf(["horizontal", "vertical"], "horizontal"),
+		value: l.string(),
+		variant: l.string()
+	},
+	setup(e, { bind: t, el: n, emit: a, onMounted: o, provide: s }) {
+		let l = n.shadowRoot, h = u(), g = u(), _ = f(e.value.value), v = () => e.activation.value === "manual", y = () => e.orientation.value === "vertical";
+		t({ attr: { value: () => _.value ?? null } });
+		let b = () => [...n.querySelectorAll(":scope > ore-tab-item[slot=\"tabs\"]")], x = () => b().filter((e) => !e.hasAttribute("disabled")), S = (e) => {
+			e && (e.shadowRoot?.querySelector("[role=\"tab\"]") ?? e).focus();
+		}, C = (e, t = !1) => {
+			_.value = e, t && e && a("change", { value: e });
+		}, w = () => {
+			let e = b();
+			if (e.length === 0) return;
+			let t = _.value;
+			if (t && e.some((e) => e.getAttribute("value") === t && !e.hasAttribute("disabled"))) return;
+			let n = e.find((e) => !e.hasAttribute("disabled"))?.getAttribute("value") ?? void 0;
+			C(n, !1);
+		};
+		p(e.value, (e) => {
+			_.value = e, w();
+		});
+		let T = i({
+			getItems: () => x(),
+			loop: !0,
+			onNavigate: (e, t) => {
+				let n = x()[t];
+				if (S(n), !v()) {
+					let e = n?.getAttribute("value");
+					e && C(e, !0);
+				}
+			},
+			orientation: () => y() ? "vertical" : "both"
+		});
+		s(m, {
+			color: e.color,
+			orientation: d(() => e.orientation.value ?? "horizontal"),
+			size: e.size,
+			value: _,
+			variant: e.variant
+		});
+		let E = (e) => {
+			let t = g.value, n = h.value;
+			if (!t || !n || !e) return;
+			let r = e.getBoundingClientRect(), i = n.getBoundingClientRect();
+			if (y()) {
+				let e = r.top - i.top + n.scrollTop;
+				t.style.transition = "none", t.style.height = `${r.height}px`, t.style.width = "", t.style.left = "0", t.style.top = "0", t.offsetWidth, t.style.transition = "", t.style.transform = `translateY(${e}px)`;
+			} else {
+				let e = r.left - i.left + n.scrollLeft;
+				t.style.transition = "none", t.style.width = `${r.width}px`, t.style.height = "", t.style.top = "", t.style.left = "0", t.offsetWidth, t.style.transition = "", t.style.transform = `translateX(${e}px)`;
+			}
+		}, D = () => {
+			let e = _.value;
+			if (!e) return;
+			let t = b().find((t) => t.getAttribute("value") === e);
+			E(t);
+		};
+		p(_, () => {
+			requestAnimationFrame(D);
+		});
+		let O = (e) => {
+			let t = e.composedPath().find((e) => e instanceof HTMLElement && e.localName === "ore-tab-item");
+			if (!t || t.hasAttribute("disabled") || t.closest("ore-tabs") !== n) return;
+			let r = t.getAttribute("value");
+			!r || r === _.value || C(r, !0);
+		}, k = r({
+			disabled: d(() => !v()),
+			onPress: () => {
+				let e = x().find((e) => e === document.activeElement || e.shadowRoot?.activeElement === document.activeElement)?.getAttribute("value");
+				e && e !== _.value && C(e, !0);
+			}
+		});
+		return t({ on: {
+			click: O,
+			keydown: (e) => {
+				let t = x();
+				if (t.length === 0) return;
+				let n = e.composedPath().find((e) => e instanceof HTMLElement && e.localName === "ore-tab-item") ?? t.find((e) => e.getAttribute("value") === _.value), r = n ? t.indexOf(n) : -1;
+				r >= 0 && T.set(r), !T.handleKeydown(e) && k.handleKeydown(e);
+			}
+		} }), o(() => {
+			let e = () => {
+				w(), D();
+			}, t = l?.querySelector("slot[name=\"tabs\"]");
+			return t && t.addEventListener("slotchange", e), e(), requestAnimationFrame(e), () => {
+				t && t.removeEventListener("slotchange", e);
+			};
+		}), c`
+      <div class="tablist-wrapper">
+        <div
+          role="tablist"
+          ref="${h}"
+          part="tablist"
+          aria-orientation="${e.orientation}"
+          aria-label="${e.label}">
+          <slot name="tabs"></slot>
+        </div>
+        <div class="indicator" ref="${g}" part="indicator"></div>
+      </div>
+      <div class="panels" part="panels">
+        <slot></slot>
+      </div>
+    `;
+	},
+	styles: [e, a]
+});
+//#endregion
+export { m as TABS_CTX, h as TABS_TAG };
+
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../src/disclosure/tabs/tabs.ts"],"sourcesContent":["import { createContext, define, html, prop, ref } from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { createInteraction, createListControl } from '../../headless';\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin } from '../../styles';\nimport styles from './tabs.css?inline';\n\n/** Context provided by ore-tabs to its ore-tab-item and ore-tab-panel children. */\nexport type TabsContext = {\n  color: Readable<ThemeColor | undefined>;\n  orientation: Readable<'horizontal' | 'vertical'>;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n  variant: Readable<SurfaceVariant | undefined>;\n};\n/** Injection key for the tabs context. */\nexport const TABS_CTX = createContext<TabsContext>('TabsContext');\n\nexport type OreTabsEvents = {\n  change: { value: string };\n};\n\nexport type OreTabsProps = {\n  /**\n   * Keyboard activation mode.\n   * - `'auto'` (default): Selecting a tab on arrow-key focus immediately activates it (ARIA recommendation for most cases).\n   * - `'manual'`: Arrow keys only move focus; the user must press Enter or Space to activate the focused tab.\n   */\n  activation?: 'auto' | 'manual';\n  /** Theme color */\n  color?: ThemeColor;\n  /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */\n  label?: string;\n  /** Tab list orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** Currently selected tab value */\n  value?: string;\n  /** Visual style variant */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Tabs container. Manages tab selection and syncs state to child tab items and panels.\n *\n * @element ore-tabs\n * @element ore-tab-item - Child element for tab buttons (auto-discovered)\n * @element ore-tab-panel - Child element for tab content (auto-discovered)\n *\n * @attr {string} value - The value of the currently selected tab\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @fires change - Emitted when the active tab changes with detail: { value: string }\n *\n * @slot tabs - Place `ore-tab-item` elements here\n * @slot - Place `ore-tab-panel` elements here\n *\n * @cssprop --tabs-radius - Border radius of the tablist container and panels\n * @cssprop --tabs-transition - Transition duration/easing for the active indicator\n * @cssprop --tabs-indicator-color - Color of the sliding active indicator line\n * @cssprop --tabs-bg - Background of the host element (flat variant)\n * @cssprop --tabs-tablist-bg - Tablist container background (solid/glass/frost variants)\n * @cssprop --tabs-tablist-border-color - Tablist container border color\n * @part tablist - Container that holds the slotted tab items\n * @part indicator - Active tab indicator element\n * @part panels - Container that holds tab panel content\n * @example\n * ```html\n * <ore-tabs value=\"tab1\" variant=\"bordered\">\n *   <ore-tab-item slot=\"tabs\" value=\"tab1\">Overview</ore-tab-item>\n *   <ore-tab-item slot=\"tabs\" value=\"tab2\">Settings</ore-tab-item>\n *   <ore-tab-panel value=\"tab1\"><p>Overview content</p></ore-tab-panel>\n *   <ore-tab-panel value=\"tab2\"><p>Settings content</p></ore-tab-panel>\n * </ore-tabs>\n * ```\n */\nexport const TABS_TAG = 'ore-tabs' as const;\ndefine<OreTabsProps, OreTabsEvents>(TABS_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    activation: prop.oneOf(['auto', 'manual'] as const, 'auto'),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    value: prop.string(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props, { bind, el, emit, onMounted, provide }) {\n    const shadowRoot = el.shadowRoot;\n    const tablistRef = ref<HTMLElement>();\n    const indicatorRef = ref<HTMLElement>();\n    const selectedValue = signal<string | undefined>(props.value.value);\n    const isManualActivation = () => props.activation.value === 'manual';\n    const isVertical = () => props.orientation.value === 'vertical';\n\n    bind({\n      attr: {\n        value: () => selectedValue.value ?? null,\n      },\n    });\n\n    const getTabs = () => [...el.querySelectorAll<HTMLElement>(':scope > ore-tab-item[slot=\"tabs\"]')];\n    const getEnabledTabs = () => getTabs().filter((t) => !t.hasAttribute('disabled'));\n    const focusTab = (tab: HTMLElement | undefined) => {\n      if (!tab) return;\n\n      const focusable = tab.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? tab;\n\n      focusable.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      selectedValue.value = value;\n\n      if (shouldEmit && value) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const tabs = getTabs();\n\n      if (tabs.length === 0) return; // No tabs yet, keep current selection\n\n      const current = selectedValue.value;\n      const hasCurrent = current\n        ? tabs.some((tab) => tab.getAttribute('value') === current && !tab.hasAttribute('disabled'))\n        : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = tabs.find((tab) => !tab.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      setSelection(firstEnabled, false);\n    };\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // List Control for Keyboard Navigation\n    // ────────────────────────────────────────────────────────────────\n\n    const listControl = createListControl({\n      getItems: () => getEnabledTabs(),\n      loop: true,\n      onNavigate: (_action, index) => {\n        const tabs = getEnabledTabs();\n        const nextTab = tabs[index];\n\n        focusTab(nextTab);\n\n        if (!isManualActivation()) {\n          const value = nextTab?.getAttribute('value');\n\n          if (value) setSelection(value, true);\n        }\n      },\n      orientation: () => (isVertical() ? 'vertical' : 'both'),\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context & Indicator Management\n    // ────────────────────────────────────────────────────────────────\n\n    provide(TABS_CTX, {\n      color: props.color,\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      value: selectedValue,\n      variant: props.variant,\n    });\n\n    const moveIndicator = (activeTab: HTMLElement | undefined) => {\n      const indicator = indicatorRef.value;\n      const tablist = tablistRef.value;\n\n      if (!indicator || !tablist || !activeTab) return;\n\n      const tabRect = activeTab.getBoundingClientRect();\n      const listRect = tablist.getBoundingClientRect();\n\n      if (isVertical()) {\n        const y = tabRect.top - listRect.top + tablist.scrollTop;\n\n        indicator.style.transition = 'none';\n        indicator.style.height = `${tabRect.height}px`;\n        indicator.style.width = '';\n        indicator.style.left = '0';\n        indicator.style.top = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateY(${y}px)`;\n      } else {\n        const x = tabRect.left - listRect.left + tablist.scrollLeft;\n\n        indicator.style.transition = 'none';\n        indicator.style.width = `${tabRect.width}px`;\n        indicator.style.height = '';\n        indicator.style.top = '';\n        indicator.style.left = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateX(${x}px)`;\n      }\n    };\n\n    const updateIndicator = () => {\n      const value = selectedValue.value;\n\n      if (!value) return;\n\n      const activeTab = getTabs().find((t) => t.getAttribute('value') === value);\n\n      moveIndicator(activeTab);\n    };\n\n    watch(selectedValue, () => {\n      requestAnimationFrame(updateIndicator);\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const handleTabClick = (e: Event) => {\n      const tab = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item');\n\n      if (!tab || tab.hasAttribute('disabled')) return;\n\n      // Guard: only respond to tab-items that belong to THIS tabs instance\n      if (tab.closest('ore-tabs') !== el) return;\n\n      const value = tab.getAttribute('value');\n\n      if (!value || value === selectedValue.value) return;\n\n      setSelection(value, true);\n    };\n\n    const activateFocusedTab = (): void => {\n      const tabs = getEnabledTabs();\n      const focusedTab = tabs.find(\n        (tab) => tab === document.activeElement || tab.shadowRoot?.activeElement === document.activeElement,\n      );\n      const focusedValue = focusedTab?.getAttribute('value');\n\n      if (focusedValue && focusedValue !== selectedValue.value) setSelection(focusedValue, true);\n    };\n\n    const manualActivationPress = createInteraction({\n      disabled: computed(() => !isManualActivation()),\n      onPress: activateFocusedTab,\n    });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const tabs = getEnabledTabs();\n\n      if (tabs.length === 0) return;\n\n      const path = e.composedPath();\n      const activeTabFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item',\n      );\n\n      const tabFromEvent = activeTabFromEvent ?? tabs.find((t) => t.getAttribute('value') === selectedValue.value);\n      const focused = tabFromEvent ? tabs.indexOf(tabFromEvent) : -1;\n\n      if (focused >= 0) listControl.set(focused);\n\n      if (listControl.handleKeydown(e)) return;\n\n      manualActivationPress.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: handleTabClick,\n        keydown: handleKeydown,\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const syncSelection = () => {\n        ensureSelection();\n        updateIndicator();\n      };\n\n      const tabsSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tabs\"]');\n\n      if (tabsSlot) {\n        tabsSlot.addEventListener('slotchange', syncSelection);\n      }\n\n      syncSelection();\n      requestAnimationFrame(syncSelection);\n\n      return () => {\n        if (tabsSlot) {\n          tabsSlot.removeEventListener('slotchange', syncSelection);\n        }\n      };\n    });\n\n    return html`\n      <div class=\"tablist-wrapper\">\n        <div\n          role=\"tablist\"\n          ref=\"${tablistRef}\"\n          part=\"tablist\"\n          aria-orientation=\"${props.orientation}\"\n          aria-label=\"${props.label}\">\n          <slot name=\"tabs\"></slot>\n        </div>\n        <div class=\"indicator\" ref=\"${indicatorRef}\" part=\"indicator\"></div>\n      </div>\n      <div class=\"panels\" part=\"panels\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, styles],\n});\n"],"mappings":";;;;;;;;AAmBA,IAAa,IAAW,EAA2B,aAAa,GA+DnD,IAAW;AACxB,EAAoC,GAAU;CAC5C,OAAO;EACL,GAAG;EACH,GAAG;EACH,YAAY,EAAK,MAAM,CAAC,QAAQ,QAAQ,GAAY,MAAM;EAC1D,OAAO,EAAK,OAAO;EACnB,aAAa,EAAK,MAAM,CAAC,cAAc,UAAU,GAAY,YAAY;EACzE,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAAuB;CACvC;CACA,MAAM,GAAO,EAAE,SAAM,OAAI,SAAM,cAAW,cAAW;EACnD,IAAM,IAAa,EAAG,YAChB,IAAa,EAAiB,GAC9B,IAAe,EAAiB,GAChC,IAAgB,EAA2B,EAAM,MAAM,KAAK,GAC5D,UAA2B,EAAM,WAAW,UAAU,UACtD,UAAmB,EAAM,YAAY,UAAU;EAErD,EAAK,EACH,MAAM,EACJ,aAAa,EAAc,SAAS,KACtC,EACF,CAAC;EAED,IAAM,UAAgB,CAAC,GAAG,EAAG,iBAA8B,sCAAoC,CAAC,GAC1F,UAAuB,EAAQ,CAAC,CAAC,QAAQ,MAAM,CAAC,EAAE,aAAa,UAAU,CAAC,GAC1E,KAAY,MAAiC;GAC5C,MAEa,EAAI,YAAY,cAA2B,gBAAc,KAAK,EAAA,CAEtE,MAAM;EAClB,GAMM,KAAgB,GAA2B,IAAa,OAAU;GAGtE,AAFA,EAAc,QAAQ,GAElB,KAAc,KAAO,EAAK,UAAU,EAAE,SAAM,CAAC;EACnD,GAEM,UAAwB;GAC5B,IAAM,IAAO,EAAQ;GAErB,IAAI,EAAK,WAAW,GAAG;GAEvB,IAAM,IAAU,EAAc;GAK9B,IAJmB,KACf,EAAK,MAAM,MAAQ,EAAI,aAAa,OAAO,MAAM,KAAW,CAAC,EAAI,aAAa,UAAU,CAAC,GAG7E;GAEhB,IAAM,IAAe,EAAK,MAAM,MAAQ,CAAC,EAAI,aAAa,UAAU,CAAC,CAAC,EAAE,aAAa,OAAO,KAAK,KAAA;GAEjG,EAAa,GAAc,EAAK;EAClC;EAEA,EAAM,EAAM,QAAQ,MAAU;GAE5B,AADA,EAAc,QAAQ,GACtB,EAAgB;EAClB,CAAC;EAMD,IAAM,IAAc,EAAkB;GACpC,gBAAgB,EAAe;GAC/B,MAAM;GACN,aAAa,GAAS,MAAU;IAE9B,IAAM,IADO,EACG,CAAA,CAAK;IAIrB,IAFA,EAAS,CAAO,GAEZ,CAAC,EAAmB,GAAG;KACzB,IAAM,IAAQ,GAAS,aAAa,OAAO;KAE3C,AAAI,KAAO,EAAa,GAAO,EAAI;IACrC;GACF;GACA,mBAAoB,EAAW,IAAI,aAAa;EAClD,CAAC;EAMD,EAAQ,GAAU;GAChB,OAAO,EAAM;GACb,aAAa,QAAe,EAAM,YAAY,SAAS,YAAY;GACnE,MAAM,EAAM;GACZ,OAAO;GACP,SAAS,EAAM;EACjB,CAAC;EAED,IAAM,KAAiB,MAAuC;GAC5D,IAAM,IAAY,EAAa,OACzB,IAAU,EAAW;GAE3B,IAAI,CAAC,KAAa,CAAC,KAAW,CAAC,GAAW;GAE1C,IAAM,IAAU,EAAU,sBAAsB,GAC1C,IAAW,EAAQ,sBAAsB;GAE/C,IAAI,EAAW,GAAG;IAChB,IAAM,IAAI,EAAQ,MAAM,EAAS,MAAM,EAAQ;IAS/C,AAPA,EAAU,MAAM,aAAa,QAC7B,EAAU,MAAM,SAAS,GAAG,EAAQ,OAAO,KAC3C,EAAU,MAAM,QAAQ,IACxB,EAAU,MAAM,OAAO,KACvB,EAAU,MAAM,MAAM,KACtB,EAAe,aACf,EAAU,MAAM,aAAa,IAC7B,EAAU,MAAM,YAAY,cAAc,EAAE;GAC9C,OAAO;IACL,IAAM,IAAI,EAAQ,OAAO,EAAS,OAAO,EAAQ;IASjD,AAPA,EAAU,MAAM,aAAa,QAC7B,EAAU,MAAM,QAAQ,GAAG,EAAQ,MAAM,KACzC,EAAU,MAAM,SAAS,IACzB,EAAU,MAAM,MAAM,IACtB,EAAU,MAAM,OAAO,KACvB,EAAe,aACf,EAAU,MAAM,aAAa,IAC7B,EAAU,MAAM,YAAY,cAAc,EAAE;GAC9C;EACF,GAEM,UAAwB;GAC5B,IAAM,IAAQ,EAAc;GAE5B,IAAI,CAAC,GAAO;GAEZ,IAAM,IAAY,EAAQ,CAAC,CAAC,MAAM,MAAM,EAAE,aAAa,OAAO,MAAM,CAAK;GAEzE,EAAc,CAAS;EACzB;EAEA,EAAM,SAAqB;GACzB,sBAAsB,CAAe;EACvC,CAAC;EAMD,IAAM,KAAkB,MAAa;GACnC,IAAM,IAAM,EACT,aAAa,CAAC,CACd,MAAM,MAA8B,aAAgB,eAAe,EAAK,cAAc,cAAc;GAKvG,IAHI,CAAC,KAAO,EAAI,aAAa,UAAU,KAGnC,EAAI,QAAQ,UAAU,MAAM,GAAI;GAEpC,IAAM,IAAQ,EAAI,aAAa,OAAO;GAElC,CAAC,KAAS,MAAU,EAAc,SAEtC,EAAa,GAAO,EAAI;EAC1B,GAYM,IAAwB,EAAkB;GAC9C,UAAU,QAAe,CAAC,EAAmB,CAAC;GAC9C,eAZqC;IAKrC,IAAM,IAJO,EACM,CAAA,CAAK,MACrB,MAAQ,MAAQ,SAAS,iBAAiB,EAAI,YAAY,kBAAkB,SAAS,aAEnE,CAAA,EAAY,aAAa,OAAO;IAErD,AAAI,KAAgB,MAAiB,EAAc,SAAO,EAAa,GAAc,EAAI;GAC3F;EAKA,CAAC;EAuDD,OAjCA,EAAK,EACH,IAAI;GACF,OAAO;GACP,UAvBmB,MAAqB;IAC1C,IAAM,IAAO,EAAe;IAE5B,IAAI,EAAK,WAAW,GAAG;IAOvB,IAAM,IALO,EAAE,aACY,CAAA,CAAK,MAC7B,MAA8B,aAAgB,eAAe,EAAK,cAAc,cAG9D,KAAsB,EAAK,MAAM,MAAM,EAAE,aAAa,OAAO,MAAM,EAAc,KAAK,GACrG,IAAU,IAAe,EAAK,QAAQ,CAAY,IAAI;IAE5D,AAAI,KAAW,KAAG,EAAY,IAAI,CAAO,GAErC,GAAY,cAAc,CAAC,KAE/B,EAAsB,cAAc,CAAC;GACvC;EAME,EACF,CAAC,GAMD,QAAgB;GACd,IAAM,UAAsB;IAE1B,AADA,EAAgB,GAChB,EAAgB;GAClB,GAEM,IAAW,GAAY,cAA+B,qBAAmB;GAS/E,OAPI,KACF,EAAS,iBAAiB,cAAc,CAAa,GAGvD,EAAc,GACd,sBAAsB,CAAa,SAEtB;IACX,AAAI,KACF,EAAS,oBAAoB,cAAc,CAAa;GAE5D;EACF,CAAC,GAEM,CAAI;;;;iBAIE,EAAW;;8BAEE,EAAM,YAAY;wBACxB,EAAM,MAAM;;;sCAGE,EAAa;;;;;;CAMjD;CACA,QAAQ,CAAC,GAAiB,CAAM;AAClC,CAAC"}

package/dist/testing/index.d.ts

@@ -0,0 +1,233 @@
+/**
+ * @vielzeug/refine/testing
+ *
+ * Testing utilities for refine components. Provides a11y helpers, ARIA query
+ * utilities, and convenience wrappers for common patterns in component tests.
+ *
+ * @example
+ * ```typescript
+ * import { getAriaLabel, getAriaDescribedBy, isAriaInvalid } from '@vielzeug/refine/testing';
+ * import { mount } from '@vielzeug/ore/testing';
+ *
+ * const fixture = mount('<ore-input label="Name"></ore-input>');
+ * const input = fixture.query('input')!;
+ * expect(isAriaInvalid(input)).toBe(false);
+ * ```
+ */
+/** Returns whether `aria-invalid="true"` is set on the element. */
+export declare const isAriaInvalid: (el: Element) => boolean;
+/** Returns whether `aria-disabled="true"` is set on the element. */
+export declare const isAriaDisabled: (el: Element) => boolean;
+/** Returns whether `aria-checked="true"` is set on the element. */
+export declare const isAriaChecked: (el: Element) => boolean;
+/** Returns whether `aria-checked="mixed"` is set on the element. */
+export declare const isAriaIndeterminate: (el: Element) => boolean;
+/** Returns whether `aria-expanded="true"` is set on the element. */
+export declare const isAriaExpanded: (el: Element) => boolean;
+/** Returns whether `aria-pressed="true"` is set on the element. */
+export declare const isAriaPressed: (el: Element) => boolean;
+/** Returns whether `aria-required="true"` is set on the element. */
+export declare const isAriaRequired: (el: Element) => boolean;
+/** Returns whether `aria-hidden="true"` is set on the element. */
+export declare const isAriaHidden: (el: Element) => boolean;
+/** Returns the `aria-label` string attribute, or null. */
+export declare const getAriaLabel: (el: Element) => null | string;
+/** Returns the `aria-labelledby` attribute value (space-separated IDs), or null. */
+export declare const getAriaLabelledBy: (el: Element) => null | string;
+/** Returns the `aria-describedby` attribute value (space-separated IDs), or null. */
+export declare const getAriaDescribedBy: (el: Element) => null | string;
+/** Returns the `aria-controls` attribute value, or null. */
+export declare const getAriaControls: (el: Element) => null | string;
+/** Returns the `role` attribute value, or null. */
+export declare const getRole: (el: Element) => null | string;
+/**
+ * Queries the shadow root of a custom element for a matching CSS selector.
+ * Returns null if the element has no shadow root or no match is found.
+ */
+export declare const queryInShadow: <T extends Element = Element>(host: Element, selector: string) => null | T;
+/**
+ * Queries all matching elements inside the shadow root of a custom element.
+ * Returns an empty array if the element has no shadow root.
+ */
+export declare const queryAllInShadow: <T extends Element = Element>(host: Element, selector: string) => T[];
+/**
+ * Queries a shadow DOM element by its CSS `part` attribute.
+ * Shorthand for `queryInShadow(host, '[part="name"]')`.
+ *
+ * @example
+ * ```ts
+ * const btn = queryPart(carousel, 'prev-btn');
+ * expect(btn).not.toBeNull();
+ * ```
+ */
+export declare const queryPart: <T extends Element = Element>(host: Element, part: string) => null | T;
+/**
+ * Returns an array of light-DOM children assigned to a named slot,
+ * or all slotted children if no name is given.
+ *
+ * @example
+ * ```ts
+ * const slides = getSlotted(carousel);
+ * expect(slides).toHaveLength(3);
+ * ```
+ */
+export declare const getSlotted: (host: Element, slotName?: string) => Element[];
+/**
+ * Dispatches a `PointerEvent` on the given element.
+ * Useful for testing hover, drag, and pointer interactions without
+ * relying on the fire helper from @vielzeug/ore/testing.
+ *
+ * @example
+ * ```ts
+ * dispatchPointer(el, 'enter');
+ * dispatchPointer(el, 'leave');
+ * ```
+ */
+export declare const dispatchPointer: (el: Element, type: "cancel" | "down" | "enter" | "leave" | "move" | "up", init?: PointerEventInit) => void;
+/**
+ * Returns the current form value of a form-associated custom element.
+ * Uses the ElementInternals-exposed `value` if available, then falls back
+ * to the reflected DOM `value` property.
+ */
+export declare const getFormValue: (el: HTMLElement & {
+    value?: string;
+}) => null | string;
+/**
+ * Returns whether a form-associated element is considered valid (no constraint
+ * violations reported by the browser or via `setValidity`).
+ */
+export declare const isFormValid: (el: HTMLElement & {
+    validity?: ValidityState;
+}) => boolean;
+/**
+ * Creates a synthetic `KeyboardEvent` with the given key.
+ * Useful for testing keyboard navigation in headless controls.
+ */
+export declare const keyEvent: (key: string, init?: KeyboardEventInit) => KeyboardEvent;
+/**
+ * Returns a Promise that resolves after a microtask tick (one `queueMicrotask`).
+ * Use when you need to wait for reactivity (signal effects) to settle without
+ * moving into the macrotask queue.
+ */
+export declare const nextTick: () => Promise<void>;
+/**
+ * Returns a Promise that resolves after `ms` milliseconds.
+ * Use sparingly — prefer `nextTick()` for reactive updates.
+ */
+export declare const wait: (ms?: number) => Promise<void>;
+/**
+ * Resets the headless ID counter to 0. Use in test `beforeEach` hooks when you need
+ * deterministic IDs across test runs.
+ *
+ * @example
+ * ```ts
+ * import { resetIdCounter } from '@vielzeug/refine/testing';
+ * beforeEach(() => resetIdCounter());
+ * ```
+ */
+export { resetIdCounter } from '@vielzeug/ore';
+/**
+ * Returns a snapshot of the most commonly tested ARIA attributes on an element.
+ * Useful for concise inline snapshot assertions in component tests.
+ *
+ * `ariaLabel` and `labelledby` are kept separate because `aria-label` is a
+ * direct string while `aria-labelledby` is an ID reference — conflating them
+ * masks bugs where the wrong labelling mechanism is used.
+ *
+ * @example
+ * ```ts
+ * expect(getAriaState(input)).toMatchObject({ invalid: 'true', required: 'true' });
+ * ```
+ */
+export declare const getAriaState: (el: Element) => {
+    ariaLabel: null | string;
+    checked: null | string;
+    disabled: null | string;
+    expanded: null | string;
+    invalid: null | string;
+    labelledby: null | string;
+    required: null | string;
+    role: null | string;
+};
+import type { Fixture } from '@vielzeug/ore/testing';
+import type { OreButtonGroupProps } from '../inputs/button-group/button-group';
+import type { OreButtonProps } from '../inputs/button/button';
+import type { OreCheckboxGroupProps } from '../inputs/checkbox-group/checkbox-group';
+import type { OreCheckboxProps } from '../inputs/checkbox/checkbox';
+import type { OreComboboxProps } from '../inputs/combobox/combobox.types';
+import type { OreFileInputProps } from '../inputs/file-input/file-input';
+import type { OreFormProps } from '../inputs/form/form';
+import type { OreInputProps } from '../inputs/input/input';
+import type { OreNumberInputProps } from '../inputs/number-input/number-input';
+import type { OreOtpInputProps } from '../inputs/otp-input/otp-input';
+import type { OreRadioGroupProps } from '../inputs/radio-group/radio-group';
+import type { OreRadioProps } from '../inputs/radio/radio';
+import type { OreRatingProps } from '../inputs/rating/rating';
+import type { OreSelectProps } from '../inputs/select/select';
+import type { OreSliderProps } from '../inputs/slider/slider';
+import type { OreSwitchProps } from '../inputs/switch/switch';
+import type { OreTextareaProps } from '../inputs/textarea/textarea';
+/**
+ * Serializes an attribute map to an HTML attribute string fragment.
+ * Values are HTML-escaped to prevent attribute injection.
+ *
+ * @example
+ * ```ts
+ * attrsToHtml({ disabled: '', label: 'Name' }); // → 'disabled label="Name"'
+ * ```
+ */
+export declare const attrsToHtml: (attrs: Record<string, string>) => string;
+/**
+ * Converts a props object into an HTML attribute record.
+ * - `true` → empty boolean attribute (e.g., `disabled`)
+ * - `false` / `null` / `undefined` → attribute omitted
+ * - Array of objects → **omitted** (cannot be serialized as an HTML attribute;
+ *   use `opts.innerHTML` with slotted elements instead)
+ * - Array of primitives → comma-joined string
+ * - everything else → stringified
+ *
+ * @example
+ * ```ts
+ * propsToAttrs({ disabled: true, label: 'Name', value: undefined });
+ * // → { disabled: '', label: 'Name' }
+ * ```
+ */
+export declare const propsToAttrs: (props?: Record<string, unknown>) => Record<string, string>;
+type MountOptions = {
+    innerHTML?: string;
+};
+/** Typed mount wrapper for `<ore-input>`. Catch prop name typos at compile time. */
+export declare const mountOreInput: (props?: Partial<OreInputProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-textarea>`. */
+export declare const mountOreTextarea: (props?: Partial<OreTextareaProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-select>`. */
+export declare const mountOreSelect: (props?: Partial<OreSelectProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-combobox>`. */
+export declare const mountOreCombobox: (props?: Partial<OreComboboxProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-checkbox>`. */
+export declare const mountOreCheckbox: (props?: Partial<OreCheckboxProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-checkbox-group>`. */
+export declare const mountOreCheckboxGroup: (props?: Partial<OreCheckboxGroupProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-radio>`. */
+export declare const mountOreRadio: (props?: Partial<OreRadioProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-radio-group>`. */
+export declare const mountOreRadioGroup: (props?: Partial<OreRadioGroupProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-switch>`. */
+export declare const mountOreSwitch: (props?: Partial<OreSwitchProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-button>`. */
+export declare const mountOreButton: (props?: Partial<OreButtonProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-button-group>`. */
+export declare const mountOreButtonGroup: (props?: Partial<OreButtonGroupProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-file-input>`. */
+export declare const mountOreFileInput: (props?: Partial<OreFileInputProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-form>`. */
+export declare const mountOreForm: (props?: Partial<OreFormProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-number-input>`. */
+export declare const mountOreNumberInput: (props?: Partial<OreNumberInputProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-otp-input>`. */
+export declare const mountOreOtpInput: (props?: Partial<OreOtpInputProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-rating>`. */
+export declare const mountOreRating: (props?: Partial<OreRatingProps>, opts?: MountOptions) => Promise<Fixture>;
+/** Typed mount wrapper for `<ore-slider>`. */
+export declare const mountOreSlider: (props?: Partial<OreSliderProps>, opts?: MountOptions) => Promise<Fixture>;
+//# sourceMappingURL=index.d.ts.map

package/dist/testing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/testing/index.ts"],"names":[],"mappings":"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"}

package/dist/testing.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/testing/mount.cjs");require("./ore/dist/testing.cjs");let t=require("@vielzeug/ore");var n=e=>e.getAttribute(`aria-invalid`)===`true`,r=e=>e.getAttribute(`aria-disabled`)===`true`,i=e=>e.getAttribute(`aria-checked`)===`true`,a=e=>e.getAttribute(`aria-checked`)===`mixed`,o=e=>e.getAttribute(`aria-expanded`)===`true`,s=e=>e.getAttribute(`aria-pressed`)===`true`,c=e=>e.getAttribute(`aria-required`)===`true`,l=e=>e.getAttribute(`aria-hidden`)===`true`,u=e=>e.getAttribute(`aria-label`),d=e=>e.getAttribute(`aria-labelledby`),f=e=>e.getAttribute(`aria-describedby`),p=e=>e.getAttribute(`aria-controls`),m=e=>e.getAttribute(`role`),h=(e,t)=>e.shadowRoot?.querySelector(t)??null,g=(e,t)=>Array.from(e.shadowRoot?.querySelectorAll(t)??[]),_=(e,t)=>h(e,`[part="${t}"]`),v=(e,t)=>{let n=t?`[slot="${t}"]`:`:not([slot])`;return Array.from(e.querySelectorAll(`:scope > ${n}`))},y=(e,t,n)=>{e.dispatchEvent(new PointerEvent(`pointer${t}`,{bubbles:!0,composed:!0,...n}))},b=e=>e.value??null,x=e=>e.validity?.valid??!0,S=(e,t)=>new KeyboardEvent(`keydown`,{bubbles:!0,cancelable:!0,key:e,...t}),C=()=>new Promise(e=>{queueMicrotask(e)}),w=(e=0)=>new Promise(t=>{setTimeout(t,e)}),T=e=>({ariaLabel:e.getAttribute(`aria-label`),checked:e.getAttribute(`aria-checked`),disabled:e.getAttribute(`aria-disabled`),expanded:e.getAttribute(`aria-expanded`),invalid:e.getAttribute(`aria-invalid`),labelledby:e.getAttribute(`aria-labelledby`),required:e.getAttribute(`aria-required`),role:e.getAttribute(`role`)}),E=e=>Object.entries(e).map(([e,t])=>t===``?e:`${e}="${t.replace(/"/g,`&quot;`)}"`).join(` `),D=(e={})=>{let t={};for(let[n,r]of Object.entries(e))if(!(r===!1||r==null))if(r===!0)t[n]=``;else if(Array.isArray(r)){if(r.length>0&&typeof r[0]==`object`)continue;t[n]=r.join(`,`)}else t[n]=String(r);return t},O=(t,n)=>e.mount(`<ore-input ${E(D(t))}>${n?.innerHTML??``}</ore-input>`),k=(t,n)=>e.mount(`<ore-textarea ${E(D(t))}>${n?.innerHTML??``}</ore-textarea>`),A=(t,n)=>e.mount(`<ore-select ${E(D(t))}>${n?.innerHTML??``}</ore-select>`),j=(t,n)=>e.mount(`<ore-combobox ${E(D(t))}>${n?.innerHTML??``}</ore-combobox>`),M=(t,n)=>e.mount(`<ore-checkbox ${E(D(t))}>${n?.innerHTML??``}</ore-checkbox>`),N=(t,n)=>e.mount(`<ore-checkbox-group ${E(D(t))}>${n?.innerHTML??``}</ore-checkbox-group>`),P=(t,n)=>e.mount(`<ore-radio ${E(D(t))}>${n?.innerHTML??``}</ore-radio>`),F=(t,n)=>e.mount(`<ore-radio-group ${E(D(t))}>${n?.innerHTML??``}</ore-radio-group>`),I=(t,n)=>e.mount(`<ore-switch ${E(D(t))}>${n?.innerHTML??``}</ore-switch>`),L=(t,n)=>e.mount(`<ore-button ${E(D(t))}>${n?.innerHTML??``}</ore-button>`),R=(t,n)=>e.mount(`<ore-button-group ${E(D(t))}>${n?.innerHTML??``}</ore-button-group>`),z=(t,n)=>e.mount(`<ore-file-input ${E(D(t))}>${n?.innerHTML??``}</ore-file-input>`),B=(t,n)=>e.mount(`<ore-form ${E(D(t))}>${n?.innerHTML??``}</ore-form>`),V=(t,n)=>e.mount(`<ore-number-input ${E(D(t))}>${n?.innerHTML??``}</ore-number-input>`),H=(t,n)=>e.mount(`<ore-otp-input ${E(D(t))}>${n?.innerHTML??``}</ore-otp-input>`),U=(t,n)=>e.mount(`<ore-rating ${E(D(t))}>${n?.innerHTML??``}</ore-rating>`),W=(t,n)=>e.mount(`<ore-slider ${E(D(t))}>${n?.innerHTML??``}</ore-slider>`);exports.attrsToHtml=E,exports.dispatchPointer=y,exports.getAriaControls=p,exports.getAriaDescribedBy=f,exports.getAriaLabel=u,exports.getAriaLabelledBy=d,exports.getAriaState=T,exports.getFormValue=b,exports.getRole=m,exports.getSlotted=v,exports.isAriaChecked=i,exports.isAriaDisabled=r,exports.isAriaExpanded=o,exports.isAriaHidden=l,exports.isAriaIndeterminate=a,exports.isAriaInvalid=n,exports.isAriaPressed=s,exports.isAriaRequired=c,exports.isFormValid=x,exports.keyEvent=S,exports.mountOreButton=L,exports.mountOreButtonGroup=R,exports.mountOreCheckbox=M,exports.mountOreCheckboxGroup=N,exports.mountOreCombobox=j,exports.mountOreFileInput=z,exports.mountOreForm=B,exports.mountOreInput=O,exports.mountOreNumberInput=V,exports.mountOreOtpInput=H,exports.mountOreRadio=P,exports.mountOreRadioGroup=F,exports.mountOreRating=U,exports.mountOreSelect=A,exports.mountOreSlider=W,exports.mountOreSwitch=I,exports.mountOreTextarea=k,exports.nextTick=C,exports.propsToAttrs=D,exports.queryAllInShadow=g,exports.queryInShadow=h,exports.queryPart=_,Object.defineProperty(exports,"resetIdCounter",{enumerable:!0,get:function(){return t.resetIdCounter}}),exports.wait=w;
+//# sourceMappingURL=testing.cjs.map

package/dist/testing.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.cjs","names":[],"sources":["../src/testing/index.ts"],"sourcesContent":["/**\n * @vielzeug/refine/testing\n *\n * Testing utilities for refine components. Provides a11y helpers, ARIA query\n * utilities, and convenience wrappers for common patterns in component tests.\n *\n * @example\n * ```typescript\n * import { getAriaLabel, getAriaDescribedBy, isAriaInvalid } from '@vielzeug/refine/testing';\n * import { mount } from '@vielzeug/ore/testing';\n *\n * const fixture = mount('<ore-input label=\"Name\"></ore-input>');\n * const input = fixture.query('input')!;\n * expect(isAriaInvalid(input)).toBe(false);\n * ```\n */\n\n// ── ARIA attribute helpers ────────────────────────────────────────────────────\n\n/** Returns whether `aria-invalid=\"true\"` is set on the element. */\nexport const isAriaInvalid = (el: Element): boolean => el.getAttribute('aria-invalid') === 'true';\n\n/** Returns whether `aria-disabled=\"true\"` is set on the element. */\nexport const isAriaDisabled = (el: Element): boolean => el.getAttribute('aria-disabled') === 'true';\n\n/** Returns whether `aria-checked=\"true\"` is set on the element. */\nexport const isAriaChecked = (el: Element): boolean => el.getAttribute('aria-checked') === 'true';\n\n/** Returns whether `aria-checked=\"mixed\"` is set on the element. */\nexport const isAriaIndeterminate = (el: Element): boolean => el.getAttribute('aria-checked') === 'mixed';\n\n/** Returns whether `aria-expanded=\"true\"` is set on the element. */\nexport const isAriaExpanded = (el: Element): boolean => el.getAttribute('aria-expanded') === 'true';\n\n/** Returns whether `aria-pressed=\"true\"` is set on the element. */\nexport const isAriaPressed = (el: Element): boolean => el.getAttribute('aria-pressed') === 'true';\n\n/** Returns whether `aria-required=\"true\"` is set on the element. */\nexport const isAriaRequired = (el: Element): boolean => el.getAttribute('aria-required') === 'true';\n\n/** Returns whether `aria-hidden=\"true\"` is set on the element. */\nexport const isAriaHidden = (el: Element): boolean => el.getAttribute('aria-hidden') === 'true';\n\n/** Returns the `aria-label` string attribute, or null. */\nexport const getAriaLabel = (el: Element): null | string => el.getAttribute('aria-label');\n\n/** Returns the `aria-labelledby` attribute value (space-separated IDs), or null. */\nexport const getAriaLabelledBy = (el: Element): null | string => el.getAttribute('aria-labelledby');\n\n/** Returns the `aria-describedby` attribute value (space-separated IDs), or null. */\nexport const getAriaDescribedBy = (el: Element): null | string => el.getAttribute('aria-describedby');\n\n/** Returns the `aria-controls` attribute value, or null. */\nexport const getAriaControls = (el: Element): null | string => el.getAttribute('aria-controls');\n\n/** Returns the `role` attribute value, or null. */\nexport const getRole = (el: Element): null | string => el.getAttribute('role');\n\n// ── DOM query helpers ─────────────────────────────────────────────────────────\n\n/**\n * Queries the shadow root of a custom element for a matching CSS selector.\n * Returns null if the element has no shadow root or no match is found.\n */\nexport const queryInShadow = <T extends Element = Element>(host: Element, selector: string): null | T => {\n  return host.shadowRoot?.querySelector<T>(selector) ?? null;\n};\n\n/**\n * Queries all matching elements inside the shadow root of a custom element.\n * Returns an empty array if the element has no shadow root.\n */\nexport const queryAllInShadow = <T extends Element = Element>(host: Element, selector: string): T[] => {\n  return Array.from(host.shadowRoot?.querySelectorAll<T>(selector) ?? []);\n};\n\n/**\n * Queries a shadow DOM element by its CSS `part` attribute.\n * Shorthand for `queryInShadow(host, '[part=\"name\"]')`.\n *\n * @example\n * ```ts\n * const btn = queryPart(carousel, 'prev-btn');\n * expect(btn).not.toBeNull();\n * ```\n */\nexport const queryPart = <T extends Element = Element>(host: Element, part: string): null | T =>\n  queryInShadow<T>(host, `[part=\"${part}\"]`);\n\n/**\n * Returns an array of light-DOM children assigned to a named slot,\n * or all slotted children if no name is given.\n *\n * @example\n * ```ts\n * const slides = getSlotted(carousel);\n * expect(slides).toHaveLength(3);\n * ```\n */\nexport const getSlotted = (host: Element, slotName?: string): Element[] => {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n\n  return Array.from(host.querySelectorAll(`:scope > ${selector}`));\n};\n\n/**\n * Dispatches a `PointerEvent` on the given element.\n * Useful for testing hover, drag, and pointer interactions without\n * relying on the fire helper from @vielzeug/ore/testing.\n *\n * @example\n * ```ts\n * dispatchPointer(el, 'enter');\n * dispatchPointer(el, 'leave');\n * ```\n */\nexport const dispatchPointer = (\n  el: Element,\n  type: 'cancel' | 'down' | 'enter' | 'leave' | 'move' | 'up',\n  init?: PointerEventInit,\n): void => {\n  el.dispatchEvent(new PointerEvent(`pointer${type}`, { bubbles: true, composed: true, ...init }));\n};\n\n// ── Form-associated component helpers ─────────────────────────────────────────\n\n/**\n * Returns the current form value of a form-associated custom element.\n * Uses the ElementInternals-exposed `value` if available, then falls back\n * to the reflected DOM `value` property.\n */\nexport const getFormValue = (el: HTMLElement & { value?: string }): null | string => {\n  return el.value ?? null;\n};\n\n/**\n * Returns whether a form-associated element is considered valid (no constraint\n * violations reported by the browser or via `setValidity`).\n */\nexport const isFormValid = (el: HTMLElement & { validity?: ValidityState }): boolean => {\n  return el.validity?.valid ?? true;\n};\n\n// ── Event helpers ─────────────────────────────────────────────────────────────\n\n/**\n * Creates a synthetic `KeyboardEvent` with the given key.\n * Useful for testing keyboard navigation in headless controls.\n */\nexport const keyEvent = (key: string, init?: KeyboardEventInit): KeyboardEvent => {\n  return new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key, ...init });\n};\n\n/**\n * Returns a Promise that resolves after a microtask tick (one `queueMicrotask`).\n * Use when you need to wait for reactivity (signal effects) to settle without\n * moving into the macrotask queue.\n */\nexport const nextTick = (): Promise<void> =>\n  new Promise((resolve) => {\n    queueMicrotask(resolve);\n  });\n\n/**\n * Returns a Promise that resolves after `ms` milliseconds.\n * Use sparingly — prefer `nextTick()` for reactive updates.\n */\nexport const wait = (ms = 0): Promise<void> =>\n  new Promise((resolve) => {\n    setTimeout(resolve, ms);\n  });\n\n// ── ID counter ────────────────────────────────────────────────────────────────\n\n/**\n * Resets the headless ID counter to 0. Use in test `beforeEach` hooks when you need\n * deterministic IDs across test runs.\n *\n * @example\n * ```ts\n * import { resetIdCounter } from '@vielzeug/refine/testing';\n * beforeEach(() => resetIdCounter());\n * ```\n */\nexport { resetIdCounter } from '@vielzeug/ore';\n\n// ── ARIA snapshot helper ───────────────────────────────────────────────────────\n\n/**\n * Returns a snapshot of the most commonly tested ARIA attributes on an element.\n * Useful for concise inline snapshot assertions in component tests.\n *\n * `ariaLabel` and `labelledby` are kept separate because `aria-label` is a\n * direct string while `aria-labelledby` is an ID reference — conflating them\n * masks bugs where the wrong labelling mechanism is used.\n *\n * @example\n * ```ts\n * expect(getAriaState(input)).toMatchObject({ invalid: 'true', required: 'true' });\n * ```\n */\nexport const getAriaState = (\n  el: Element,\n): {\n  ariaLabel: null | string;\n  checked: null | string;\n  disabled: null | string;\n  expanded: null | string;\n  invalid: null | string;\n  labelledby: null | string;\n  required: null | string;\n  role: null | string;\n} => ({\n  ariaLabel: el.getAttribute('aria-label'),\n  checked: el.getAttribute('aria-checked'),\n  disabled: el.getAttribute('aria-disabled'),\n  expanded: el.getAttribute('aria-expanded'),\n  invalid: el.getAttribute('aria-invalid'),\n  labelledby: el.getAttribute('aria-labelledby'),\n  required: el.getAttribute('aria-required'),\n  role: el.getAttribute('role'),\n});\n\n// ── Typed component mount wrappers (F3) ───────────────────────────────────────\n\nimport type { Fixture } from '@vielzeug/ore/testing';\n\nimport { mount } from '@vielzeug/ore/testing';\n\nimport type { OreButtonGroupProps } from '../inputs/button-group/button-group';\nimport type { OreButtonProps } from '../inputs/button/button';\nimport type { OreCheckboxGroupProps } from '../inputs/checkbox-group/checkbox-group';\nimport type { OreCheckboxProps } from '../inputs/checkbox/checkbox';\nimport type { OreComboboxProps } from '../inputs/combobox/combobox.types';\nimport type { OreFileInputProps } from '../inputs/file-input/file-input';\nimport type { OreFormProps } from '../inputs/form/form';\nimport type { OreInputProps } from '../inputs/input/input';\nimport type { OreNumberInputProps } from '../inputs/number-input/number-input';\nimport type { OreOtpInputProps } from '../inputs/otp-input/otp-input';\nimport type { OreRadioGroupProps } from '../inputs/radio-group/radio-group';\nimport type { OreRadioProps } from '../inputs/radio/radio';\nimport type { OreRatingProps } from '../inputs/rating/rating';\nimport type { OreSelectProps } from '../inputs/select/select';\nimport type { OreSliderProps } from '../inputs/slider/slider';\nimport type { OreSwitchProps } from '../inputs/switch/switch';\nimport type { OreTextareaProps } from '../inputs/textarea/textarea';\n\n/**\n * Serializes an attribute map to an HTML attribute string fragment.\n * Values are HTML-escaped to prevent attribute injection.\n *\n * @example\n * ```ts\n * attrsToHtml({ disabled: '', label: 'Name' }); // → 'disabled label=\"Name\"'\n * ```\n */\nexport const attrsToHtml = (attrs: Record<string, string>): string =>\n  Object.entries(attrs)\n    .map(([key, value]) => (value === '' ? key : `${key}=\"${value.replace(/\"/g, '&quot;')}\"`))\n    .join(' ');\n\n/**\n * Converts a props object into an HTML attribute record.\n * - `true` → empty boolean attribute (e.g., `disabled`)\n * - `false` / `null` / `undefined` → attribute omitted\n * - Array of objects → **omitted** (cannot be serialized as an HTML attribute;\n *   use `opts.innerHTML` with slotted elements instead)\n * - Array of primitives → comma-joined string\n * - everything else → stringified\n *\n * @example\n * ```ts\n * propsToAttrs({ disabled: true, label: 'Name', value: undefined });\n * // → { disabled: '', label: 'Name' }\n * ```\n */\nexport const propsToAttrs = (props: Record<string, unknown> = {}): Record<string, string> => {\n  const attrs: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (value === false || value == null) continue;\n\n    if (value === true) {\n      attrs[key] = '';\n    } else if (Array.isArray(value)) {\n      // Object arrays cannot be represented as HTML attributes — skip silently.\n      if (value.length > 0 && typeof value[0] === 'object') continue;\n\n      attrs[key] = (value as string[]).join(',');\n    } else {\n      attrs[key] = String(value);\n    }\n  }\n\n  return attrs;\n};\n\ntype MountOptions = { innerHTML?: string };\n\n/** Typed mount wrapper for `<ore-input>`. Catch prop name typos at compile time. */\nexport const mountOreInput = (props?: Partial<OreInputProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-input ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-input>`);\n\n/** Typed mount wrapper for `<ore-textarea>`. */\nexport const mountOreTextarea = (props?: Partial<OreTextareaProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-textarea ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-textarea>`);\n\n/** Typed mount wrapper for `<ore-select>`. */\nexport const mountOreSelect = (props?: Partial<OreSelectProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-select ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-select>`);\n\n/** Typed mount wrapper for `<ore-combobox>`. */\nexport const mountOreCombobox = (props?: Partial<OreComboboxProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-combobox ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-combobox>`);\n\n/** Typed mount wrapper for `<ore-checkbox>`. */\nexport const mountOreCheckbox = (props?: Partial<OreCheckboxProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-checkbox ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-checkbox>`);\n\n/** Typed mount wrapper for `<ore-checkbox-group>`. */\nexport const mountOreCheckboxGroup = (props?: Partial<OreCheckboxGroupProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-checkbox-group ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-checkbox-group>`);\n\n/** Typed mount wrapper for `<ore-radio>`. */\nexport const mountOreRadio = (props?: Partial<OreRadioProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-radio ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-radio>`);\n\n/** Typed mount wrapper for `<ore-radio-group>`. */\nexport const mountOreRadioGroup = (props?: Partial<OreRadioGroupProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-radio-group ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-radio-group>`);\n\n/** Typed mount wrapper for `<ore-switch>`. */\nexport const mountOreSwitch = (props?: Partial<OreSwitchProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-switch ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-switch>`);\n\n/** Typed mount wrapper for `<ore-button>`. */\nexport const mountOreButton = (props?: Partial<OreButtonProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-button ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-button>`);\n\n/** Typed mount wrapper for `<ore-button-group>`. */\nexport const mountOreButtonGroup = (props?: Partial<OreButtonGroupProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-button-group ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-button-group>`);\n\n/** Typed mount wrapper for `<ore-file-input>`. */\nexport const mountOreFileInput = (props?: Partial<OreFileInputProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-file-input ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-file-input>`);\n\n/** Typed mount wrapper for `<ore-form>`. */\nexport const mountOreForm = (props?: Partial<OreFormProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-form ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-form>`);\n\n/** Typed mount wrapper for `<ore-number-input>`. */\nexport const mountOreNumberInput = (props?: Partial<OreNumberInputProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-number-input ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-number-input>`);\n\n/** Typed mount wrapper for `<ore-otp-input>`. */\nexport const mountOreOtpInput = (props?: Partial<OreOtpInputProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-otp-input ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-otp-input>`);\n\n/** Typed mount wrapper for `<ore-rating>`. */\nexport const mountOreRating = (props?: Partial<OreRatingProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-rating ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-rating>`);\n\n/** Typed mount wrapper for `<ore-slider>`. */\nexport const mountOreSlider = (props?: Partial<OreSliderProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-slider ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-slider>`);\n"],"mappings":"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"}

package/dist/testing.js

@@ -0,0 +1,44 @@
+import { mount as e } from "./ore/dist/testing/mount.js";
+import "./ore/dist/testing.js";
+import { resetIdCounter as t } from "@vielzeug/ore";
+//#region src/testing/index.ts
+var n = (e) => e.getAttribute("aria-invalid") === "true", r = (e) => e.getAttribute("aria-disabled") === "true", i = (e) => e.getAttribute("aria-checked") === "true", a = (e) => e.getAttribute("aria-checked") === "mixed", o = (e) => e.getAttribute("aria-expanded") === "true", s = (e) => e.getAttribute("aria-pressed") === "true", c = (e) => e.getAttribute("aria-required") === "true", l = (e) => e.getAttribute("aria-hidden") === "true", u = (e) => e.getAttribute("aria-label"), d = (e) => e.getAttribute("aria-labelledby"), f = (e) => e.getAttribute("aria-describedby"), p = (e) => e.getAttribute("aria-controls"), m = (e) => e.getAttribute("role"), h = (e, t) => e.shadowRoot?.querySelector(t) ?? null, g = (e, t) => Array.from(e.shadowRoot?.querySelectorAll(t) ?? []), _ = (e, t) => h(e, `[part="${t}"]`), v = (e, t) => {
+	let n = t ? `[slot="${t}"]` : ":not([slot])";
+	return Array.from(e.querySelectorAll(`:scope > ${n}`));
+}, y = (e, t, n) => {
+	e.dispatchEvent(new PointerEvent(`pointer${t}`, {
+		bubbles: !0,
+		composed: !0,
+		...n
+	}));
+}, b = (e) => e.value ?? null, x = (e) => e.validity?.valid ?? !0, S = (e, t) => new KeyboardEvent("keydown", {
+	bubbles: !0,
+	cancelable: !0,
+	key: e,
+	...t
+}), C = () => new Promise((e) => {
+	queueMicrotask(e);
+}), w = (e = 0) => new Promise((t) => {
+	setTimeout(t, e);
+}), T = (e) => ({
+	ariaLabel: e.getAttribute("aria-label"),
+	checked: e.getAttribute("aria-checked"),
+	disabled: e.getAttribute("aria-disabled"),
+	expanded: e.getAttribute("aria-expanded"),
+	invalid: e.getAttribute("aria-invalid"),
+	labelledby: e.getAttribute("aria-labelledby"),
+	required: e.getAttribute("aria-required"),
+	role: e.getAttribute("role")
+}), E = (e) => Object.entries(e).map(([e, t]) => t === "" ? e : `${e}="${t.replace(/"/g, """)}"`).join(" "), D = (e = {}) => {
+	let t = {};
+	for (let [n, r] of Object.entries(e)) if (!(r === !1 || r == null)) if (r === !0) t[n] = "";
+	else if (Array.isArray(r)) {
+		if (r.length > 0 && typeof r[0] == "object") continue;
+		t[n] = r.join(",");
+	} else t[n] = String(r);
+	return t;
+}, O = (t, n) => e(`<ore-input ${E(D(t))}>${n?.innerHTML ?? ""}</ore-input>`), k = (t, n) => e(`<ore-textarea ${E(D(t))}>${n?.innerHTML ?? ""}</ore-textarea>`), A = (t, n) => e(`<ore-select ${E(D(t))}>${n?.innerHTML ?? ""}</ore-select>`), j = (t, n) => e(`<ore-combobox ${E(D(t))}>${n?.innerHTML ?? ""}</ore-combobox>`), M = (t, n) => e(`<ore-checkbox ${E(D(t))}>${n?.innerHTML ?? ""}</ore-checkbox>`), N = (t, n) => e(`<ore-checkbox-group ${E(D(t))}>${n?.innerHTML ?? ""}</ore-checkbox-group>`), P = (t, n) => e(`<ore-radio ${E(D(t))}>${n?.innerHTML ?? ""}</ore-radio>`), F = (t, n) => e(`<ore-radio-group ${E(D(t))}>${n?.innerHTML ?? ""}</ore-radio-group>`), I = (t, n) => e(`<ore-switch ${E(D(t))}>${n?.innerHTML ?? ""}</ore-switch>`), L = (t, n) => e(`<ore-button ${E(D(t))}>${n?.innerHTML ?? ""}</ore-button>`), R = (t, n) => e(`<ore-button-group ${E(D(t))}>${n?.innerHTML ?? ""}</ore-button-group>`), z = (t, n) => e(`<ore-file-input ${E(D(t))}>${n?.innerHTML ?? ""}</ore-file-input>`), B = (t, n) => e(`<ore-form ${E(D(t))}>${n?.innerHTML ?? ""}</ore-form>`), V = (t, n) => e(`<ore-number-input ${E(D(t))}>${n?.innerHTML ?? ""}</ore-number-input>`), H = (t, n) => e(`<ore-otp-input ${E(D(t))}>${n?.innerHTML ?? ""}</ore-otp-input>`), U = (t, n) => e(`<ore-rating ${E(D(t))}>${n?.innerHTML ?? ""}</ore-rating>`), W = (t, n) => e(`<ore-slider ${E(D(t))}>${n?.innerHTML ?? ""}</ore-slider>`);
+//#endregion
+export { E as attrsToHtml, y as dispatchPointer, p as getAriaControls, f as getAriaDescribedBy, u as getAriaLabel, d as getAriaLabelledBy, T as getAriaState, b as getFormValue, m as getRole, v as getSlotted, i as isAriaChecked, r as isAriaDisabled, o as isAriaExpanded, l as isAriaHidden, a as isAriaIndeterminate, n as isAriaInvalid, s as isAriaPressed, c as isAriaRequired, x as isFormValid, S as keyEvent, L as mountOreButton, R as mountOreButtonGroup, M as mountOreCheckbox, N as mountOreCheckboxGroup, j as mountOreCombobox, z as mountOreFileInput, B as mountOreForm, O as mountOreInput, V as mountOreNumberInput, H as mountOreOtpInput, P as mountOreRadio, F as mountOreRadioGroup, U as mountOreRating, A as mountOreSelect, W as mountOreSlider, I as mountOreSwitch, k as mountOreTextarea, C as nextTick, D as propsToAttrs, g as queryAllInShadow, h as queryInShadow, _ as queryPart, t as resetIdCounter, w as wait };
+
+//# sourceMappingURL=testing.js.map

package/dist/testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.js","names":[],"sources":["../src/testing/index.ts"],"sourcesContent":["/**\n * @vielzeug/refine/testing\n *\n * Testing utilities for refine components. Provides a11y helpers, ARIA query\n * utilities, and convenience wrappers for common patterns in component tests.\n *\n * @example\n * ```typescript\n * import { getAriaLabel, getAriaDescribedBy, isAriaInvalid } from '@vielzeug/refine/testing';\n * import { mount } from '@vielzeug/ore/testing';\n *\n * const fixture = mount('<ore-input label=\"Name\"></ore-input>');\n * const input = fixture.query('input')!;\n * expect(isAriaInvalid(input)).toBe(false);\n * ```\n */\n\n// ── ARIA attribute helpers ────────────────────────────────────────────────────\n\n/** Returns whether `aria-invalid=\"true\"` is set on the element. */\nexport const isAriaInvalid = (el: Element): boolean => el.getAttribute('aria-invalid') === 'true';\n\n/** Returns whether `aria-disabled=\"true\"` is set on the element. */\nexport const isAriaDisabled = (el: Element): boolean => el.getAttribute('aria-disabled') === 'true';\n\n/** Returns whether `aria-checked=\"true\"` is set on the element. */\nexport const isAriaChecked = (el: Element): boolean => el.getAttribute('aria-checked') === 'true';\n\n/** Returns whether `aria-checked=\"mixed\"` is set on the element. */\nexport const isAriaIndeterminate = (el: Element): boolean => el.getAttribute('aria-checked') === 'mixed';\n\n/** Returns whether `aria-expanded=\"true\"` is set on the element. */\nexport const isAriaExpanded = (el: Element): boolean => el.getAttribute('aria-expanded') === 'true';\n\n/** Returns whether `aria-pressed=\"true\"` is set on the element. */\nexport const isAriaPressed = (el: Element): boolean => el.getAttribute('aria-pressed') === 'true';\n\n/** Returns whether `aria-required=\"true\"` is set on the element. */\nexport const isAriaRequired = (el: Element): boolean => el.getAttribute('aria-required') === 'true';\n\n/** Returns whether `aria-hidden=\"true\"` is set on the element. */\nexport const isAriaHidden = (el: Element): boolean => el.getAttribute('aria-hidden') === 'true';\n\n/** Returns the `aria-label` string attribute, or null. */\nexport const getAriaLabel = (el: Element): null | string => el.getAttribute('aria-label');\n\n/** Returns the `aria-labelledby` attribute value (space-separated IDs), or null. */\nexport const getAriaLabelledBy = (el: Element): null | string => el.getAttribute('aria-labelledby');\n\n/** Returns the `aria-describedby` attribute value (space-separated IDs), or null. */\nexport const getAriaDescribedBy = (el: Element): null | string => el.getAttribute('aria-describedby');\n\n/** Returns the `aria-controls` attribute value, or null. */\nexport const getAriaControls = (el: Element): null | string => el.getAttribute('aria-controls');\n\n/** Returns the `role` attribute value, or null. */\nexport const getRole = (el: Element): null | string => el.getAttribute('role');\n\n// ── DOM query helpers ─────────────────────────────────────────────────────────\n\n/**\n * Queries the shadow root of a custom element for a matching CSS selector.\n * Returns null if the element has no shadow root or no match is found.\n */\nexport const queryInShadow = <T extends Element = Element>(host: Element, selector: string): null | T => {\n  return host.shadowRoot?.querySelector<T>(selector) ?? null;\n};\n\n/**\n * Queries all matching elements inside the shadow root of a custom element.\n * Returns an empty array if the element has no shadow root.\n */\nexport const queryAllInShadow = <T extends Element = Element>(host: Element, selector: string): T[] => {\n  return Array.from(host.shadowRoot?.querySelectorAll<T>(selector) ?? []);\n};\n\n/**\n * Queries a shadow DOM element by its CSS `part` attribute.\n * Shorthand for `queryInShadow(host, '[part=\"name\"]')`.\n *\n * @example\n * ```ts\n * const btn = queryPart(carousel, 'prev-btn');\n * expect(btn).not.toBeNull();\n * ```\n */\nexport const queryPart = <T extends Element = Element>(host: Element, part: string): null | T =>\n  queryInShadow<T>(host, `[part=\"${part}\"]`);\n\n/**\n * Returns an array of light-DOM children assigned to a named slot,\n * or all slotted children if no name is given.\n *\n * @example\n * ```ts\n * const slides = getSlotted(carousel);\n * expect(slides).toHaveLength(3);\n * ```\n */\nexport const getSlotted = (host: Element, slotName?: string): Element[] => {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n\n  return Array.from(host.querySelectorAll(`:scope > ${selector}`));\n};\n\n/**\n * Dispatches a `PointerEvent` on the given element.\n * Useful for testing hover, drag, and pointer interactions without\n * relying on the fire helper from @vielzeug/ore/testing.\n *\n * @example\n * ```ts\n * dispatchPointer(el, 'enter');\n * dispatchPointer(el, 'leave');\n * ```\n */\nexport const dispatchPointer = (\n  el: Element,\n  type: 'cancel' | 'down' | 'enter' | 'leave' | 'move' | 'up',\n  init?: PointerEventInit,\n): void => {\n  el.dispatchEvent(new PointerEvent(`pointer${type}`, { bubbles: true, composed: true, ...init }));\n};\n\n// ── Form-associated component helpers ─────────────────────────────────────────\n\n/**\n * Returns the current form value of a form-associated custom element.\n * Uses the ElementInternals-exposed `value` if available, then falls back\n * to the reflected DOM `value` property.\n */\nexport const getFormValue = (el: HTMLElement & { value?: string }): null | string => {\n  return el.value ?? null;\n};\n\n/**\n * Returns whether a form-associated element is considered valid (no constraint\n * violations reported by the browser or via `setValidity`).\n */\nexport const isFormValid = (el: HTMLElement & { validity?: ValidityState }): boolean => {\n  return el.validity?.valid ?? true;\n};\n\n// ── Event helpers ─────────────────────────────────────────────────────────────\n\n/**\n * Creates a synthetic `KeyboardEvent` with the given key.\n * Useful for testing keyboard navigation in headless controls.\n */\nexport const keyEvent = (key: string, init?: KeyboardEventInit): KeyboardEvent => {\n  return new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key, ...init });\n};\n\n/**\n * Returns a Promise that resolves after a microtask tick (one `queueMicrotask`).\n * Use when you need to wait for reactivity (signal effects) to settle without\n * moving into the macrotask queue.\n */\nexport const nextTick = (): Promise<void> =>\n  new Promise((resolve) => {\n    queueMicrotask(resolve);\n  });\n\n/**\n * Returns a Promise that resolves after `ms` milliseconds.\n * Use sparingly — prefer `nextTick()` for reactive updates.\n */\nexport const wait = (ms = 0): Promise<void> =>\n  new Promise((resolve) => {\n    setTimeout(resolve, ms);\n  });\n\n// ── ID counter ────────────────────────────────────────────────────────────────\n\n/**\n * Resets the headless ID counter to 0. Use in test `beforeEach` hooks when you need\n * deterministic IDs across test runs.\n *\n * @example\n * ```ts\n * import { resetIdCounter } from '@vielzeug/refine/testing';\n * beforeEach(() => resetIdCounter());\n * ```\n */\nexport { resetIdCounter } from '@vielzeug/ore';\n\n// ── ARIA snapshot helper ───────────────────────────────────────────────────────\n\n/**\n * Returns a snapshot of the most commonly tested ARIA attributes on an element.\n * Useful for concise inline snapshot assertions in component tests.\n *\n * `ariaLabel` and `labelledby` are kept separate because `aria-label` is a\n * direct string while `aria-labelledby` is an ID reference — conflating them\n * masks bugs where the wrong labelling mechanism is used.\n *\n * @example\n * ```ts\n * expect(getAriaState(input)).toMatchObject({ invalid: 'true', required: 'true' });\n * ```\n */\nexport const getAriaState = (\n  el: Element,\n): {\n  ariaLabel: null | string;\n  checked: null | string;\n  disabled: null | string;\n  expanded: null | string;\n  invalid: null | string;\n  labelledby: null | string;\n  required: null | string;\n  role: null | string;\n} => ({\n  ariaLabel: el.getAttribute('aria-label'),\n  checked: el.getAttribute('aria-checked'),\n  disabled: el.getAttribute('aria-disabled'),\n  expanded: el.getAttribute('aria-expanded'),\n  invalid: el.getAttribute('aria-invalid'),\n  labelledby: el.getAttribute('aria-labelledby'),\n  required: el.getAttribute('aria-required'),\n  role: el.getAttribute('role'),\n});\n\n// ── Typed component mount wrappers (F3) ───────────────────────────────────────\n\nimport type { Fixture } from '@vielzeug/ore/testing';\n\nimport { mount } from '@vielzeug/ore/testing';\n\nimport type { OreButtonGroupProps } from '../inputs/button-group/button-group';\nimport type { OreButtonProps } from '../inputs/button/button';\nimport type { OreCheckboxGroupProps } from '../inputs/checkbox-group/checkbox-group';\nimport type { OreCheckboxProps } from '../inputs/checkbox/checkbox';\nimport type { OreComboboxProps } from '../inputs/combobox/combobox.types';\nimport type { OreFileInputProps } from '../inputs/file-input/file-input';\nimport type { OreFormProps } from '../inputs/form/form';\nimport type { OreInputProps } from '../inputs/input/input';\nimport type { OreNumberInputProps } from '../inputs/number-input/number-input';\nimport type { OreOtpInputProps } from '../inputs/otp-input/otp-input';\nimport type { OreRadioGroupProps } from '../inputs/radio-group/radio-group';\nimport type { OreRadioProps } from '../inputs/radio/radio';\nimport type { OreRatingProps } from '../inputs/rating/rating';\nimport type { OreSelectProps } from '../inputs/select/select';\nimport type { OreSliderProps } from '../inputs/slider/slider';\nimport type { OreSwitchProps } from '../inputs/switch/switch';\nimport type { OreTextareaProps } from '../inputs/textarea/textarea';\n\n/**\n * Serializes an attribute map to an HTML attribute string fragment.\n * Values are HTML-escaped to prevent attribute injection.\n *\n * @example\n * ```ts\n * attrsToHtml({ disabled: '', label: 'Name' }); // → 'disabled label=\"Name\"'\n * ```\n */\nexport const attrsToHtml = (attrs: Record<string, string>): string =>\n  Object.entries(attrs)\n    .map(([key, value]) => (value === '' ? key : `${key}=\"${value.replace(/\"/g, '&quot;')}\"`))\n    .join(' ');\n\n/**\n * Converts a props object into an HTML attribute record.\n * - `true` → empty boolean attribute (e.g., `disabled`)\n * - `false` / `null` / `undefined` → attribute omitted\n * - Array of objects → **omitted** (cannot be serialized as an HTML attribute;\n *   use `opts.innerHTML` with slotted elements instead)\n * - Array of primitives → comma-joined string\n * - everything else → stringified\n *\n * @example\n * ```ts\n * propsToAttrs({ disabled: true, label: 'Name', value: undefined });\n * // → { disabled: '', label: 'Name' }\n * ```\n */\nexport const propsToAttrs = (props: Record<string, unknown> = {}): Record<string, string> => {\n  const attrs: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (value === false || value == null) continue;\n\n    if (value === true) {\n      attrs[key] = '';\n    } else if (Array.isArray(value)) {\n      // Object arrays cannot be represented as HTML attributes — skip silently.\n      if (value.length > 0 && typeof value[0] === 'object') continue;\n\n      attrs[key] = (value as string[]).join(',');\n    } else {\n      attrs[key] = String(value);\n    }\n  }\n\n  return attrs;\n};\n\ntype MountOptions = { innerHTML?: string };\n\n/** Typed mount wrapper for `<ore-input>`. Catch prop name typos at compile time. */\nexport const mountOreInput = (props?: Partial<OreInputProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-input ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-input>`);\n\n/** Typed mount wrapper for `<ore-textarea>`. */\nexport const mountOreTextarea = (props?: Partial<OreTextareaProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-textarea ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-textarea>`);\n\n/** Typed mount wrapper for `<ore-select>`. */\nexport const mountOreSelect = (props?: Partial<OreSelectProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-select ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-select>`);\n\n/** Typed mount wrapper for `<ore-combobox>`. */\nexport const mountOreCombobox = (props?: Partial<OreComboboxProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-combobox ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-combobox>`);\n\n/** Typed mount wrapper for `<ore-checkbox>`. */\nexport const mountOreCheckbox = (props?: Partial<OreCheckboxProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-checkbox ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-checkbox>`);\n\n/** Typed mount wrapper for `<ore-checkbox-group>`. */\nexport const mountOreCheckboxGroup = (props?: Partial<OreCheckboxGroupProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-checkbox-group ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-checkbox-group>`);\n\n/** Typed mount wrapper for `<ore-radio>`. */\nexport const mountOreRadio = (props?: Partial<OreRadioProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-radio ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-radio>`);\n\n/** Typed mount wrapper for `<ore-radio-group>`. */\nexport const mountOreRadioGroup = (props?: Partial<OreRadioGroupProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-radio-group ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-radio-group>`);\n\n/** Typed mount wrapper for `<ore-switch>`. */\nexport const mountOreSwitch = (props?: Partial<OreSwitchProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-switch ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-switch>`);\n\n/** Typed mount wrapper for `<ore-button>`. */\nexport const mountOreButton = (props?: Partial<OreButtonProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-button ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-button>`);\n\n/** Typed mount wrapper for `<ore-button-group>`. */\nexport const mountOreButtonGroup = (props?: Partial<OreButtonGroupProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-button-group ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-button-group>`);\n\n/** Typed mount wrapper for `<ore-file-input>`. */\nexport const mountOreFileInput = (props?: Partial<OreFileInputProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-file-input ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-file-input>`);\n\n/** Typed mount wrapper for `<ore-form>`. */\nexport const mountOreForm = (props?: Partial<OreFormProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-form ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-form>`);\n\n/** Typed mount wrapper for `<ore-number-input>`. */\nexport const mountOreNumberInput = (props?: Partial<OreNumberInputProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-number-input ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-number-input>`);\n\n/** Typed mount wrapper for `<ore-otp-input>`. */\nexport const mountOreOtpInput = (props?: Partial<OreOtpInputProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-otp-input ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-otp-input>`);\n\n/** Typed mount wrapper for `<ore-rating>`. */\nexport const mountOreRating = (props?: Partial<OreRatingProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-rating ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-rating>`);\n\n/** Typed mount wrapper for `<ore-slider>`. */\nexport const mountOreSlider = (props?: Partial<OreSliderProps>, opts?: MountOptions): Promise<Fixture> =>\n  mount(`<ore-slider ${attrsToHtml(propsToAttrs(props))}>${opts?.innerHTML ?? ''}</ore-slider>`);\n"],"mappings":"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"}

package/dist/text.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./content/text/text.css?inline.cjs");let t=require("@vielzeug/ore");var n=`ore-text`;(0,t.define)(n,{props:{align:t.prop.string(),as:t.prop.string(),color:t.prop.string(),italic:t.prop.bool(),lines:t.prop.number(),size:t.prop.string(),truncate:t.prop.bool(),variant:t.prop.string(),weight:t.prop.string()},setup(e,{bind:n,el:r}){return n({attr:{"aria-level":()=>{let t=/^h([1-6])$/.exec(e.as.value??``);return t?t[1]:null},role:()=>/^h([1-6])$/.test(e.as.value??``)?`heading`:null},style:{"--_lines":()=>e.lines.value==null?null:String(e.lines.value)}}),t.html`<slot></slot>`},styles:[e.default]}),exports.TEXT_TAG=n;
+//# sourceMappingURL=text.cjs.map

package/dist/text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.cjs","names":[],"sources":["../src/content/text/text.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport styles from './text.css?inline';\n\n/** Text component properties */\nexport type OreTextProps = {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right' | 'justify';\n  /** Semantic HTML element to render as — sets the correct ARIA role/level on the host */\n  as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code';\n  /** Text color (semantic + theme colors) */\n  color?:\n    | 'primary'\n    | 'secondary'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'heading'\n    | 'body'\n    | 'muted'\n    | 'tertiary'\n    | 'disabled'\n    | 'contrast';\n  /** Italic text style */\n  italic?: boolean;\n  /** Clamp text to N lines with an ellipsis (multi-line truncation) */\n  lines?: number;\n  /** Text size — maps to --text-* tokens for body variants and --heading-* tokens for the heading variant */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Enable single-line text truncation with ellipsis */\n  truncate?: boolean;\n  /** Text semantic variant */\n  variant?: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code';\n  /** Font weight */\n  weight?: 'normal' | 'medium' | 'semibold' | 'bold';\n};\n\n/**\n * A typography component with semantic variants and responsive sizing.\n *\n * @element ore-text\n *\n * @attr {string} variant - Text variant: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code'\n * @attr {string} size - Font size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'. Maps to --text-* tokens for body variants and --heading-* tokens for the heading variant.\n * @attr {string} weight - Font weight: 'normal' | 'medium' | 'semibold' | 'bold'\n * @attr {string} color - Text color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'heading' | 'body' | 'muted' | 'tertiary' | 'disabled' | 'contrast'\n * @attr {string} align - Text alignment: 'left' | 'center' | 'right' | 'justify'\n * @attr {boolean} truncate - Truncate text with ellipsis when it overflows (single-line)\n * @attr {number} lines - Clamp to N lines with ellipsis (multi-line truncation)\n * @attr {boolean} italic - Italic text style\n * @attr {string} as - Semantic HTML element: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code'\n *\n * @slot - Text content\n *\n * @cssprop --text-size - Font size\n * @cssprop --text-weight - Font weight\n * @cssprop --text-color - Text color\n * @cssprop --text-line-height - Line height\n * @cssprop --text-letter-spacing - Letter spacing\n *\n * @example\n * ```html\n * <ore-text variant=\"heading\" size=\"2xl\" weight=\"bold\">Welcome</ore-text>\n * <ore-text as=\"h2\" variant=\"heading\" size=\"xl\">Section title</ore-text>\n * <ore-text color=\"primary\" weight=\"semibold\">Important notice</ore-text>\n * <ore-text variant=\"code\">npm install</ore-text>\n * <ore-text lines=\"2\">Long paragraph that clamps at two lines…</ore-text>\n * ```\n */\n\nexport const TEXT_TAG = 'ore-text' as const;\ndefine<OreTextProps>(TEXT_TAG, {\n  props: {\n    align: prop.string<'left' | 'center' | 'right' | 'justify'>(),\n    as: prop.string<'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code'>(),\n    color: prop.string<\n      | 'primary'\n      | 'secondary'\n      | 'info'\n      | 'success'\n      | 'warning'\n      | 'error'\n      | 'heading'\n      | 'body'\n      | 'muted'\n      | 'tertiary'\n      | 'disabled'\n      | 'contrast'\n    >(),\n    italic: prop.bool(),\n    lines: prop.number(),\n    size: prop.string<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>(),\n    truncate: prop.bool(),\n    variant: prop.string<'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code'>(),\n    weight: prop.string<'normal' | 'medium' | 'semibold' | 'bold'>(),\n  },\n  setup(props, { bind, el: _el }) {\n    bind({\n      attr: {\n        'aria-level': () => {\n          const match = /^h([1-6])$/.exec((props.as.value as string) ?? '');\n\n          return match ? match[1] : null;\n        },\n        role: () => (/^h([1-6])$/.test((props.as.value as string) ?? '') ? 'heading' : null),\n      },\n      style: {\n        '--_lines': () => (props.lines.value != null ? String(props.lines.value) : null),\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n});\n"],"mappings":"wJAuEA,IAAa,EAAW,wBACH,EAAU,CAC7B,MAAO,CACL,MAAO,EAAA,KAAK,OAAgD,EAC5D,GAAI,EAAA,KAAK,OAA0F,EACnG,MAAO,EAAA,KAAK,OAaV,EACF,OAAQ,EAAA,KAAK,KAAK,EAClB,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,EAAA,KAAK,OAAiD,EAC5D,SAAU,EAAA,KAAK,KAAK,EACpB,QAAS,EAAA,KAAK,OAAuE,EACrF,OAAQ,EAAA,KAAK,OAAkD,CACjE,EACA,MAAM,EAAO,CAAE,OAAM,GAAI,GAAO,CAe9B,OAdA,EAAK,CACH,KAAM,CACJ,iBAAoB,CAClB,IAAM,EAAQ,aAAa,KAAM,EAAM,GAAG,OAAoB,EAAE,EAEhE,OAAO,EAAQ,EAAM,GAAK,IAC5B,EACA,SAAa,aAAa,KAAM,EAAM,GAAG,OAAoB,EAAE,EAAI,UAAY,IACjF,EACA,MAAO,CACL,eAAmB,EAAM,MAAM,OAAS,KAAmC,KAA5B,OAAO,EAAM,MAAM,KAAK,CACzE,CACF,CAAC,EAEM,EAAA,IAAI,eACb,EACA,OAAQ,CAAC,EAAA,OAAM,CACjB,CAAC"}