@vielzeug/refine 2.1.0 → 2.1.3

package/dist/tab-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.cjs","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { setAriaReflection } from '../../core';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type OreTabItemProps = {\n  /** Whether this tab is currently selected (set by ore-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from ore-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from ore-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a ore-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from ore-tabs) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `ore-tabs`.\n *\n * @element ore-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding ore-tab-panel value\n * @attr {boolean} active - Set by the parent ore-tabs when this tab is selected\n * @attr {boolean} disabled - Prevents selection\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} variant - Inherited from ore-tabs: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} color - Inherited from ore-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @slot prefix - Icon or content before the label\n * @slot - Tab label\n * @slot suffix - Badge or count after the label\n *\n * @cssprop --tab-item-radius - Button border radius\n * @cssprop --tab-item-transition - Transition duration/easing\n * @cssprop --tab-item-padding - Button padding\n * @cssprop --tab-item-font-size - Button font size\n * @cssprop --tab-item-color - Default text color\n * @cssprop --tab-item-hover-bg - Background on hover\n * @cssprop --tab-item-active-bg - Background when active/selected\n * @cssprop --tab-item-active-color - Text color when active/selected\n * @cssprop --tab-item-active-shadow - Box shadow when active/selected\n * @part tab - Tab trigger element.\n * @example\n * ```html\n * <ore-tab-item slot=\"tabs\" value=\"overview\">Overview</ore-tab-item>\n * <ore-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</ore-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = 'ore-tab-item' as const;\ndefine<OreTabItemProps>(TAB_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    active: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n\n    if (tabsCtx) {\n      watch(() => {\n        const color = tabsCtx.color.value;\n        const size = tabsCtx.size.value;\n        const variant = tabsCtx.variant.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const tabId = () => `tab-${props.value.value}`;\n    const buttonRef = ref<HTMLButtonElement>();\n\n    // `aria-controls` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-panel>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-panel>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watchEffect(() => {\n        const button = buttonRef.value;\n        const value = props.value.value;\n\n        if (!button) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const panelEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-panel[value=\"${value}\"]`);\n        const panel = panelEl?.shadowRoot?.querySelector<HTMLElement>('.panel') ?? null;\n\n        setAriaReflection(button, 'ariaControlsElements', panel ? [panel] : []);\n      });\n    });\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        ref=\"${buttonRef}\"\n        id=\"${tabId}\"\n        aria-selected=\"${isActive}\"\n        tabindex=\"${() => (isActive.value ? '0' : '-1')}\"\n        aria-disabled=\"${isDisabled}\"\n        @click=\"${handleClick}\">\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsFocusMixin('button'), coarsePointerMixin, styles],\n});\n"],"mappings":"+XA0DA,IAAa,EAAe,gBAC5B,EAAA,EAAA,OAAA,CAAwB,EAAc,CACpC,MAAO,CACL,GAAG,EAAA,iBACH,OAAQ,EAAA,KAAK,KAAK,EAAK,EACvB,MAAO,EAAA,KAAK,OAAmB,EAC/B,KAAM,EAAA,KAAK,OAAsB,EACjC,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,QAAS,EAAA,KAAK,OAAuB,CACvC,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,EAAQ,EAAA,YAER,GAAA,EAAU,EAAA,OAAA,CAAO,EAAA,QAAQ,EAE3B,GACF,MAAY,CACV,IAAM,EAAQ,EAAQ,MAAM,MACtB,EAAO,EAAQ,KAAK,MACpB,EAAU,EAAQ,QAAQ,MAE5B,IAAU,IAAA,IAAW,EAAG,aAAa,QAAS,CAAK,EAEnD,IAAS,IAAA,IAAW,EAAG,aAAa,OAAQ,CAAI,EAEhD,IAAY,IAAA,IAAW,EAAG,aAAa,UAAW,CAAO,CAC/D,CAAC,EAGH,IAAM,GAAA,EAAW,EAAA,SAAA,KACf,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,KAC9F,EACM,MAAmB,EAAQ,EAAM,SAAS,OAEhD,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,WAAe,EAAS,MAAQ,GAAO,IAAA,EACzC,CACF,CAAC,EAED,IAAM,EAAe,GAAsB,CAGzC,GAFA,EAAM,gBAAgB,EAElB,EAAW,EAAG,CAChB,EAAM,eAAe,EAErB,MACF,CAEA,EAAG,cAAc,IAAI,YAAY,QAAS,CAAE,QAAS,GAAM,OAAQ,CAAE,MAAO,EAAM,MAAM,KAAM,CAAE,CAAC,CAAC,CACpG,EAEM,MAAc,OAAO,EAAM,MAAM,QACjC,GAAA,EAAY,EAAA,IAAA,CAAuB,EAuBzC,OAfA,EAAA,EAAA,UAAA,KAAgB,EACd,EAAA,EAAA,YAAA,KAAkB,CAChB,IAAM,EAAS,EAAU,MACnB,EAAQ,EAAM,MAAM,MAE1B,GAAI,CAAC,EAAQ,OAIb,IAAM,IAFS,EAAQ,EAAG,QAAQ,UAAU,EAAI,KAAA,EACxB,cAA2B,iCAAiC,EAAM,GAAG,EAAA,EACtE,YAAY,cAA2B,QAAQ,GAAK,KAE3E,EAAA,kBAAkB,EAAQ,uBAAwB,EAAQ,CAAC,CAAK,EAAI,CAAC,CAAC,CACxE,CAAC,CACH,CAAC,EAEM,EAAA,IAAI;;;;;eAKA,EAAU;cACX,EAAM;yBACK,EAAS;wBACP,EAAS,MAAQ,IAAM,KAAM;yBAC/B,EAAW;kBAClB,EAAY;;;;;KAM5B,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,uBAAuB,QAAQ,EAAG,EAAA,mBAAoB,EAAA,OAAM,CACxF,CAAC"}
+{"version":3,"file":"tab-item.cjs","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onMounted, prop, ref, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { setAriaReflection } from '../../core';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type OreTabItemProps = {\n  /** Whether this tab is currently selected (set by ore-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from ore-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from ore-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a ore-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from ore-tabs) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `ore-tabs`.\n *\n * @element ore-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding ore-tab-panel value\n * @attr {boolean} active - Set by the parent ore-tabs when this tab is selected\n * @attr {boolean} disabled - Prevents selection\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} variant - Inherited from ore-tabs: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} color - Inherited from ore-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @slot prefix - Icon or content before the label\n * @slot - Tab label\n * @slot suffix - Badge or count after the label\n *\n * @cssprop --tab-item-radius - Button border radius\n * @cssprop --tab-item-transition - Transition duration/easing\n * @cssprop --tab-item-padding - Button padding\n * @cssprop --tab-item-font-size - Button font size\n * @cssprop --tab-item-color - Default text color\n * @cssprop --tab-item-hover-bg - Background on hover\n * @cssprop --tab-item-active-bg - Background when active/selected\n * @cssprop --tab-item-active-color - Text color when active/selected\n * @cssprop --tab-item-active-shadow - Box shadow when active/selected\n * @part tab - Tab trigger element.\n * @example\n * ```html\n * <ore-tab-item slot=\"tabs\" value=\"overview\">Overview</ore-tab-item>\n * <ore-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</ore-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = 'ore-tab-item' as const;\ndefine<OreTabItemProps>(TAB_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    active: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n\n    if (tabsCtx) {\n      watch(() => {\n        const color = tabsCtx.color.value;\n        const size = tabsCtx.size.value;\n        const variant = tabsCtx.variant.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const tabId = () => `tab-${props.value.value}`;\n    const buttonRef = ref<HTMLButtonElement>();\n\n    // `aria-controls` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-panel>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-panel>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watchEffect(() => {\n        const button = buttonRef.value;\n        const value = props.value.value;\n\n        if (!button) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const panelEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-panel[value=\"${value}\"]`);\n        const panel = panelEl?.shadowRoot?.querySelector<HTMLElement>('.panel') ?? null;\n\n        setAriaReflection(button, 'ariaControlsElements', panel ? [panel] : []);\n      });\n    });\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        ref=\"${buttonRef}\"\n        id=\"${tabId}\"\n        aria-selected=\"${isActive}\"\n        tabindex=\"${() => (isActive.value ? '0' : '-1')}\"\n        aria-disabled=\"${isDisabled}\"\n        @click=\"${handleClick}\">\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsFocusMixin('button'), coarsePointerMixin, styles],\n});\n"],"mappings":"+XAwDA,IAAa,EAAe,gBAC5B,EAAA,EAAA,OAAA,CAAwB,EAAc,CACpC,MAAO,CACL,GAAG,EAAA,iBACH,OAAQ,EAAA,KAAK,KAAK,EAAK,EACvB,MAAO,EAAA,KAAK,OAAmB,EAC/B,KAAM,EAAA,KAAK,OAAsB,EACjC,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,QAAS,EAAA,KAAK,OAAuB,CACvC,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,EAAQ,EAAA,YAER,GAAA,EAAU,EAAA,OAAA,CAAO,EAAA,QAAQ,EAE3B,GACF,MAAY,CACV,IAAM,EAAQ,EAAQ,MAAM,MACtB,EAAO,EAAQ,KAAK,MACpB,EAAU,EAAQ,QAAQ,MAE5B,IAAU,IAAA,IAAW,EAAG,aAAa,QAAS,CAAK,EAEnD,IAAS,IAAA,IAAW,EAAG,aAAa,OAAQ,CAAI,EAEhD,IAAY,IAAA,IAAW,EAAG,aAAa,UAAW,CAAO,CAC/D,CAAC,EAGH,IAAM,GAAA,EAAW,EAAA,SAAA,KACf,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,KAC9F,EACM,MAAmB,EAAQ,EAAM,SAAS,OAEhD,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,WAAe,EAAS,MAAQ,GAAO,IAAA,EACzC,CACF,CAAC,EAED,IAAM,EAAe,GAAsB,CAGzC,GAFA,EAAM,gBAAgB,EAElB,EAAW,EAAG,CAChB,EAAM,eAAe,EAErB,MACF,CAEA,EAAG,cAAc,IAAI,YAAY,QAAS,CAAE,QAAS,GAAM,OAAQ,CAAE,MAAO,EAAM,MAAM,KAAM,CAAE,CAAC,CAAC,CACpG,EAEM,MAAc,OAAO,EAAM,MAAM,QACjC,GAAA,EAAY,EAAA,IAAA,CAAuB,EAuBzC,OAfA,EAAA,EAAA,UAAA,KAAgB,EACd,EAAA,EAAA,YAAA,KAAkB,CAChB,IAAM,EAAS,EAAU,MACnB,EAAQ,EAAM,MAAM,MAE1B,GAAI,CAAC,EAAQ,OAIb,IAAM,IAFS,EAAQ,EAAG,QAAQ,UAAU,EAAI,KAAA,EACxB,cAA2B,iCAAiC,EAAM,GAAG,EAAA,EACtE,YAAY,cAA2B,QAAQ,GAAK,KAE3E,EAAA,kBAAkB,EAAQ,uBAAwB,EAAQ,CAAC,CAAK,EAAI,CAAC,CAAC,CACxE,CAAC,CACH,CAAC,EAEM,EAAA,IAAI;;;;;eAKA,EAAU;cACX,EAAM;yBACK,EAAS;wBACP,EAAS,MAAQ,IAAM,KAAM;yBAC/B,EAAW;kBAClB,EAAY;;;;;KAM5B,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,uBAAuB,QAAQ,EAAG,EAAA,mBAAoB,EAAA,OAAM,CACxF,CAAC"}

package/dist/tab-item.js

@@ -1,6 +1,6 @@
-import { setAriaReflection as e } from "./core/aria-reflection.js";
-import { coarsePointerMixin as t } from "./styles/mixins/accessibility.css.js";
-import { colorThemeMixin as n, forcedColorsFocusMixin as r } from "./styles/mixins/theme.css.js";
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { colorThemeMixin as t, forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
+import { setAriaReflection as r } from "./core/aria-reflection.js";
 import { disablableBundle as i } from "./shared/prop-bundles.js";
 import { TABS_CTX as a } from "./tabs.js";
 import o from "./disclosure/tab-item/tab-item.css.js";
@@ -17,30 +17,30 @@ c(_, {
 		value: p.string(""),
 		variant: p.string()
 	},
-	setup(t) {
-		let n = l(), r = h, i = d(a);
-		i && r(() => {
-			let e = i.color.value, t = i.size.value, r = i.variant.value;
-			e !== void 0 && n.setAttribute("color", e), t !== void 0 && n.setAttribute("size", t), r !== void 0 && n.setAttribute("variant", r);
+	setup(e) {
+		let t = l(), n = h, i = d(a);
+		i && n(() => {
+			let e = i.color.value, n = i.size.value, r = i.variant.value;
+			e !== void 0 && t.setAttribute("color", e), n !== void 0 && t.setAttribute("size", n), r !== void 0 && t.setAttribute("variant", r);
 		});
-		let o = g(() => i ? !!i.value.value && i.value.value === t.value.value : t.active.value), c = () => !!t.disabled.value;
+		let o = g(() => i ? !!i.value.value && i.value.value === e.value.value : e.active.value), c = () => !!e.disabled.value;
 		s({ attr: { active: () => o.value ? !0 : void 0 } });
-		let p = (e) => {
-			if (e.stopPropagation(), c()) {
-				e.preventDefault();
+		let p = (n) => {
+			if (n.stopPropagation(), c()) {
+				n.preventDefault();
 				return;
 			}
-			n.dispatchEvent(new CustomEvent("click", {
+			t.dispatchEvent(new CustomEvent("click", {
 				bubbles: !0,
-				detail: { value: t.value.value }
+				detail: { value: e.value.value }
 			}));
-		}, _ = () => `tab-${t.value.value}`, v = m();
+		}, _ = () => `tab-${e.value.value}`, v = m();
 		return f(() => {
 			h(() => {
-				let r = v.value, i = t.value.value;
-				if (!r) return;
-				let a = ((i ? n.closest("ore-tabs") : null)?.querySelector(`:scope > ore-tab-panel[value="${i}"]`))?.shadowRoot?.querySelector(".panel") ?? null;
-				e(r, "ariaControlsElements", a ? [a] : []);
+				let n = v.value, i = e.value.value;
+				if (!n) return;
+				let a = ((i ? t.closest("ore-tabs") : null)?.querySelector(`:scope > ore-tab-panel[value="${i}"]`))?.shadowRoot?.querySelector(".panel") ?? null;
+				r(n, "ariaControlsElements", a ? [a] : []);
 			});
 		}), u`
       <button
@@ -60,9 +60,9 @@ c(_, {
     `;
 	},
 	styles: [
-		n,
-		r("button"),
 		t,
+		n("button"),
+		e,
 		o
 	]
 });

package/dist/tab-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { setAriaReflection } from '../../core';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type OreTabItemProps = {\n  /** Whether this tab is currently selected (set by ore-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from ore-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from ore-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a ore-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from ore-tabs) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `ore-tabs`.\n *\n * @element ore-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding ore-tab-panel value\n * @attr {boolean} active - Set by the parent ore-tabs when this tab is selected\n * @attr {boolean} disabled - Prevents selection\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} variant - Inherited from ore-tabs: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} color - Inherited from ore-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @slot prefix - Icon or content before the label\n * @slot - Tab label\n * @slot suffix - Badge or count after the label\n *\n * @cssprop --tab-item-radius - Button border radius\n * @cssprop --tab-item-transition - Transition duration/easing\n * @cssprop --tab-item-padding - Button padding\n * @cssprop --tab-item-font-size - Button font size\n * @cssprop --tab-item-color - Default text color\n * @cssprop --tab-item-hover-bg - Background on hover\n * @cssprop --tab-item-active-bg - Background when active/selected\n * @cssprop --tab-item-active-color - Text color when active/selected\n * @cssprop --tab-item-active-shadow - Box shadow when active/selected\n * @part tab - Tab trigger element.\n * @example\n * ```html\n * <ore-tab-item slot=\"tabs\" value=\"overview\">Overview</ore-tab-item>\n * <ore-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</ore-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = 'ore-tab-item' as const;\ndefine<OreTabItemProps>(TAB_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    active: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n\n    if (tabsCtx) {\n      watch(() => {\n        const color = tabsCtx.color.value;\n        const size = tabsCtx.size.value;\n        const variant = tabsCtx.variant.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const tabId = () => `tab-${props.value.value}`;\n    const buttonRef = ref<HTMLButtonElement>();\n\n    // `aria-controls` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-panel>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-panel>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watchEffect(() => {\n        const button = buttonRef.value;\n        const value = props.value.value;\n\n        if (!button) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const panelEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-panel[value=\"${value}\"]`);\n        const panel = panelEl?.shadowRoot?.querySelector<HTMLElement>('.panel') ?? null;\n\n        setAriaReflection(button, 'ariaControlsElements', panel ? [panel] : []);\n      });\n    });\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        ref=\"${buttonRef}\"\n        id=\"${tabId}\"\n        aria-selected=\"${isActive}\"\n        tabindex=\"${() => (isActive.value ? '0' : '-1')}\"\n        aria-disabled=\"${isDisabled}\"\n        @click=\"${handleClick}\">\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsFocusMixin('button'), coarsePointerMixin, styles],\n});\n"],"mappings":";;;;;;;;;AA0DA,IAAa,IAAe;AAC5B,EAAwB,GAAc;CACpC,OAAO;EACL,GAAG;EACH,QAAQ,EAAK,KAAK,EAAK;EACvB,OAAO,EAAK,OAAmB;EAC/B,MAAM,EAAK,OAAsB;EACjC,OAAO,EAAK,OAAO,EAAE;EACrB,SAAS,EAAK,OAAuB;CACvC;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,GAER,IAAU,EAAO,CAAQ;EAE/B,AAAI,KACF,QAAY;GACV,IAAM,IAAQ,EAAQ,MAAM,OACtB,IAAO,EAAQ,KAAK,OACpB,IAAU,EAAQ,QAAQ;GAMhC,AAJI,MAAU,KAAA,KAAW,EAAG,aAAa,SAAS,CAAK,GAEnD,MAAS,KAAA,KAAW,EAAG,aAAa,QAAQ,CAAI,GAEhD,MAAY,KAAA,KAAW,EAAG,aAAa,WAAW,CAAO;EAC/D,CAAC;EAGH,IAAM,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,KAC9F,GACM,UAAmB,EAAQ,EAAM,SAAS;EAEhD,EAAK,EACH,MAAM,EACJ,cAAe,EAAS,QAAQ,KAAO,KAAA,EACzC,EACF,CAAC;EAED,IAAM,KAAe,MAAsB;GAGzC,IAFA,EAAM,gBAAgB,GAElB,EAAW,GAAG;IAChB,EAAM,eAAe;IAErB;GACF;GAEA,EAAG,cAAc,IAAI,YAAY,SAAS;IAAE,SAAS;IAAM,QAAQ,EAAE,OAAO,EAAM,MAAM,MAAM;GAAE,CAAC,CAAC;EACpG,GAEM,UAAc,OAAO,EAAM,MAAM,SACjC,IAAY,EAAuB;EAuBzC,OAfA,QAAgB;GACd,QAAkB;IAChB,IAAM,IAAS,EAAU,OACnB,IAAQ,EAAM,MAAM;IAE1B,IAAI,CAAC,GAAQ;IAIb,IAAM,MAFS,IAAQ,EAAG,QAAQ,UAAU,IAAI,KAAA,EACxB,cAA2B,iCAAiC,EAAM,GAAG,EAAA,EACtE,YAAY,cAA2B,QAAQ,KAAK;IAE3E,EAAkB,GAAQ,wBAAwB,IAAQ,CAAC,CAAK,IAAI,CAAC,CAAC;GACxE,CAAC;EACH,CAAC,GAEM,CAAI;;;;;eAKA,EAAU;cACX,EAAM;yBACK,EAAS;0BACP,EAAS,QAAQ,MAAM,KAAM;yBAC/B,EAAW;kBAClB,EAAY;;;;;;CAM5B;CACA,QAAQ;EAAC;EAAiB,EAAuB,QAAQ;EAAG;EAAoB;CAAM;AACxF,CAAC"}
+{"version":3,"file":"tab-item.js","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onMounted, prop, ref, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { setAriaReflection } from '../../core';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type OreTabItemProps = {\n  /** Whether this tab is currently selected (set by ore-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from ore-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from ore-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a ore-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from ore-tabs) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `ore-tabs`.\n *\n * @element ore-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding ore-tab-panel value\n * @attr {boolean} active - Set by the parent ore-tabs when this tab is selected\n * @attr {boolean} disabled - Prevents selection\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} variant - Inherited from ore-tabs: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} color - Inherited from ore-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @slot prefix - Icon or content before the label\n * @slot - Tab label\n * @slot suffix - Badge or count after the label\n *\n * @cssprop --tab-item-radius - Button border radius\n * @cssprop --tab-item-transition - Transition duration/easing\n * @cssprop --tab-item-padding - Button padding\n * @cssprop --tab-item-font-size - Button font size\n * @cssprop --tab-item-color - Default text color\n * @cssprop --tab-item-hover-bg - Background on hover\n * @cssprop --tab-item-active-bg - Background when active/selected\n * @cssprop --tab-item-active-color - Text color when active/selected\n * @cssprop --tab-item-active-shadow - Box shadow when active/selected\n * @part tab - Tab trigger element.\n * @example\n * ```html\n * <ore-tab-item slot=\"tabs\" value=\"overview\">Overview</ore-tab-item>\n * <ore-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</ore-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = 'ore-tab-item' as const;\ndefine<OreTabItemProps>(TAB_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    active: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n\n    if (tabsCtx) {\n      watch(() => {\n        const color = tabsCtx.color.value;\n        const size = tabsCtx.size.value;\n        const variant = tabsCtx.variant.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const tabId = () => `tab-${props.value.value}`;\n    const buttonRef = ref<HTMLButtonElement>();\n\n    // `aria-controls` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-panel>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-panel>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watchEffect(() => {\n        const button = buttonRef.value;\n        const value = props.value.value;\n\n        if (!button) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const panelEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-panel[value=\"${value}\"]`);\n        const panel = panelEl?.shadowRoot?.querySelector<HTMLElement>('.panel') ?? null;\n\n        setAriaReflection(button, 'ariaControlsElements', panel ? [panel] : []);\n      });\n    });\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        ref=\"${buttonRef}\"\n        id=\"${tabId}\"\n        aria-selected=\"${isActive}\"\n        tabindex=\"${() => (isActive.value ? '0' : '-1')}\"\n        aria-disabled=\"${isDisabled}\"\n        @click=\"${handleClick}\">\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsFocusMixin('button'), coarsePointerMixin, styles],\n});\n"],"mappings":";;;;;;;;;AAwDA,IAAa,IAAe;AAC5B,EAAwB,GAAc;CACpC,OAAO;EACL,GAAG;EACH,QAAQ,EAAK,KAAK,EAAK;EACvB,OAAO,EAAK,OAAmB;EAC/B,MAAM,EAAK,OAAsB;EACjC,OAAO,EAAK,OAAO,EAAE;EACrB,SAAS,EAAK,OAAuB;CACvC;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,GAER,IAAU,EAAO,CAAQ;EAE/B,AAAI,KACF,QAAY;GACV,IAAM,IAAQ,EAAQ,MAAM,OACtB,IAAO,EAAQ,KAAK,OACpB,IAAU,EAAQ,QAAQ;GAMhC,AAJI,MAAU,KAAA,KAAW,EAAG,aAAa,SAAS,CAAK,GAEnD,MAAS,KAAA,KAAW,EAAG,aAAa,QAAQ,CAAI,GAEhD,MAAY,KAAA,KAAW,EAAG,aAAa,WAAW,CAAO;EAC/D,CAAC;EAGH,IAAM,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,KAC9F,GACM,UAAmB,EAAQ,EAAM,SAAS;EAEhD,EAAK,EACH,MAAM,EACJ,cAAe,EAAS,QAAQ,KAAO,KAAA,EACzC,EACF,CAAC;EAED,IAAM,KAAe,MAAsB;GAGzC,IAFA,EAAM,gBAAgB,GAElB,EAAW,GAAG;IAChB,EAAM,eAAe;IAErB;GACF;GAEA,EAAG,cAAc,IAAI,YAAY,SAAS;IAAE,SAAS;IAAM,QAAQ,EAAE,OAAO,EAAM,MAAM,MAAM;GAAE,CAAC,CAAC;EACpG,GAEM,UAAc,OAAO,EAAM,MAAM,SACjC,IAAY,EAAuB;EAuBzC,OAfA,QAAgB;GACd,QAAkB;IAChB,IAAM,IAAS,EAAU,OACnB,IAAQ,EAAM,MAAM;IAE1B,IAAI,CAAC,GAAQ;IAIb,IAAM,MAFS,IAAQ,EAAG,QAAQ,UAAU,IAAI,KAAA,EACxB,cAA2B,iCAAiC,EAAM,GAAG,EAAA,EACtE,YAAY,cAA2B,QAAQ,KAAK;IAE3E,EAAkB,GAAQ,wBAAwB,IAAQ,CAAC,CAAK,IAAI,CAAC,CAAC;GACxE,CAAC;EACH,CAAC,GAEM,CAAI;;;;;eAKA,EAAU;cACX,EAAM;yBACK,EAAS;0BACP,EAAS,QAAQ,MAAM,KAAM;yBAC/B,EAAW;kBAClB,EAAY;;;;;;CAM5B;CACA,QAAQ;EAAC;EAAiB,EAAuB,QAAQ;EAAG;EAAoB;CAAM;AACxF,CAAC"}

package/dist/tab-panel.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/aria-reflection.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./tabs.cjs"),r=require("./disclosure/tab-panel/tab-panel.css.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple");var o={"2xl":`var(--size-12)`,lg:`var(--size-6)`,md:`var(--size-4)`,none:`0`,sm:`var(--size-2)`,xl:`var(--size-8)`,xs:`var(--size-1)`},s=`ore-tab-panel`;(0,i.define)(s,{props:{active:i.prop.bool(!1),lazy:i.prop.bool(!1),padding:i.prop.oneOf([`none`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`],`md`),value:i.prop.string(``)},setup(t){let r=(0,i.getHost)(),s=i.watchEffect,c=(0,i.inject)(n.TABS_CTX),l=(0,a.computed)(()=>c?!!c.value.value&&c.value.value===t.value.value:t.active.value);(0,i.bind)({attr:{active:()=>l.value?!0:void 0}});let u=(0,a.computed)(()=>o[t.padding.value??`md`]??o.md),d=(0,a.signal)(!1);s(()=>{l.value&&(d.value=!0)});let f=(0,a.computed)(()=>!t.lazy.value||d.value),p=(0,i.styleMap)({"--tab-panel-padding":u}),m=()=>`tabpanel-${t.value.value}`,h=(0,i.ref)();return(0,i.onMounted)(()=>{s(()=>{let n=h.value,i=t.value.value;if(!n)return;let a=((i?r.closest(`ore-tabs`):null)?.querySelector(`:scope > ore-tab-item[value="${i}"]`))?.shadowRoot?.querySelector(`[role="tab"]`)??null;e.setAriaReflection(n,`ariaLabelledByElements`,a?[a]:[])})}),i.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./core/aria-reflection.cjs"),n=require("./tabs.cjs"),r=require("./disclosure/tab-panel/tab-panel.css.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple");var o={"2xl":`var(--size-12)`,lg:`var(--size-6)`,md:`var(--size-4)`,none:`0`,sm:`var(--size-2)`,xl:`var(--size-8)`,xs:`var(--size-1)`},s=`ore-tab-panel`;(0,i.define)(s,{props:{active:i.prop.bool(!1),lazy:i.prop.bool(!1),padding:i.prop.oneOf([`none`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`],`md`),value:i.prop.string(``)},setup(e){let r=(0,i.getHost)(),s=i.watchEffect,c=(0,i.inject)(n.TABS_CTX),l=(0,a.computed)(()=>c?!!c.value.value&&c.value.value===e.value.value:e.active.value);(0,i.bind)({attr:{active:()=>l.value?!0:void 0}});let u=(0,a.computed)(()=>o[e.padding.value??`md`]??o.md),d=(0,a.signal)(!1);s(()=>{l.value&&(d.value=!0)});let f=(0,a.computed)(()=>!e.lazy.value||d.value),p=(0,i.styleMap)({"--tab-panel-padding":u}),m=()=>`tabpanel-${e.value.value}`,h=(0,i.ref)();return(0,i.onMounted)(()=>{s(()=>{let n=h.value,i=e.value.value;if(!n)return;let a=((i?r.closest(`ore-tabs`):null)?.querySelector(`:scope > ore-tab-item[value="${i}"]`))?.shadowRoot?.querySelector(`[role="tab"]`)??null;t.setAriaReflection(n,`ariaLabelledByElements`,a?[a]:[])})}),i.html`
       <div
         class="panel"
         part="panel"
@@ -12,5 +12,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             <slot></slot>
           `)}
       </div>
-    `},styles:[t.reducedMotionMixin,r.default]}),exports.TAB_PANEL_TAG=s;
+    `},styles:[e.reducedMotionMixin,r.default]}),exports.TAB_PANEL_TAG=s;
 //# sourceMappingURL=tab-panel.cjs.map

package/dist/tab-panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.cjs","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, watchEffect, styleMap, when } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { setAriaReflection } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_PRESET: Record<string, string> = {\n  '2xl': 'var(--size-12)',\n  lg: 'var(--size-6)',\n  md: 'var(--size-4)',\n  none: '0',\n  sm: 'var(--size-2)',\n  xl: 'var(--size-8)',\n  xs: 'var(--size-1)',\n};\n\nexport type OreTabPanelProps = {\n  /** Active state (managed by ore-tabs) */\n  active?: boolean;\n  /** When true, the panel content is not rendered until first activation (preserves resources) */\n  lazy?: boolean;\n  /** Panel padding size: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md' = var(--size-4)) */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Must match the `value` of its corresponding ore-tab-item */\n  value: string;\n};\n\n/**\n * Content panel for a tab. Shown when its `value` matches the selected tab.\n *\n * @element ore-tab-panel\n *\n * @attr {string} value - Must match the corresponding ore-tab-item value\n * @attr {boolean} active - Toggled by the parent ore-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @cssprop --tab-panel-padding - Inner padding of the panel content area\n * @cssprop --tab-panel-font-size - Font size of the panel content\n * @part panel - Panel container.\n * @example\n * ```html\n * <ore-tab-panel value=\"overview\"><p>Overview content here</p></ore-tab-panel>\n * <ore-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></ore-tab-panel>\n * <ore-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></ore-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = 'ore-tab-panel' as const;\ndefine<OreTabPanelProps>(TAB_PANEL_TAG, {\n  props: {\n    active: prop.bool(false),\n    lazy: prop.bool(false),\n    padding: prop.oneOf(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const, 'md'),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const key = props.padding.value ?? 'md';\n\n      return TAB_PANEL_PADDING_PRESET[key] ?? TAB_PANEL_PADDING_PRESET.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    watch(() => {\n      if (isActive.value) hasBeenActive.value = true;\n    });\n\n    // shouldRender: true if not lazy OR has been active at least once\n    const shouldRender = computed(() => !props.lazy.value || hasBeenActive.value);\n    const panelStyle = styleMap({ '--tab-panel-padding': paddingValue });\n    const panelId = () => `tabpanel-${props.value.value}`;\n    const panelRef = ref<HTMLElement>();\n\n    // `aria-labelledby` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-item>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-item>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watch(() => {\n        const panel = panelRef.value;\n        const value = props.value.value;\n\n        if (!panel) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const tabEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-item[value=\"${value}\"]`);\n        const button = tabEl?.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? null;\n\n        setAriaReflection(panel, 'ariaLabelledByElements', button ? [button] : []);\n      });\n    });\n\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        ref=\"${panelRef}\"\n        id=\"${panelId}\"\n        aria-hidden=\"${() => String(!isActive.value)}\"\n        style=\"${panelStyle}\"\n        tabindex=\"0\">\n        ${when(\n          shouldRender,\n          () => html`\n            <slot></slot>\n          `,\n        )}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":"+SAQA,IAAM,EAAmD,CACvD,MAAO,iBACP,GAAI,gBACJ,GAAI,gBACJ,KAAM,IACN,GAAI,gBACJ,GAAI,gBACJ,GAAI,eACN,EAkCa,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAAyB,EAAe,CACtC,MAAO,CACL,OAAQ,EAAA,KAAK,KAAK,EAAK,EACvB,KAAM,EAAA,KAAK,KAAK,EAAK,EACrB,QAAS,EAAA,KAAK,MAAM,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAM,KAAK,EAAY,IAAI,EAChF,MAAO,EAAA,KAAK,OAAO,EAAE,CACvB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,EAAQ,EAAA,YAER,GAAA,EAAU,EAAA,OAAA,CAAO,EAAA,QAAQ,EACzB,GAAA,EAAW,EAAA,SAAA,KACf,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,KAC9F,GAEA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,WAAe,EAAS,MAAQ,GAAO,IAAA,EACzC,CACF,CAAC,EAGD,IAAM,GAAA,EAAe,EAAA,SAAA,KAGZ,EAFK,EAAM,QAAQ,OAAS,OAEK,EAAyB,EAClE,EAEK,GAAA,EAAgB,EAAA,OAAA,CAAO,EAAK,EAElC,MAAY,CACN,EAAS,QAAO,EAAc,MAAQ,GAC5C,CAAC,EAGD,IAAM,GAAA,EAAe,EAAA,SAAA,KAAe,CAAC,EAAM,KAAK,OAAS,EAAc,KAAK,EACtE,GAAA,EAAa,EAAA,SAAA,CAAS,CAAE,sBAAuB,CAAa,CAAC,EAC7D,MAAgB,YAAY,EAAM,MAAM,QACxC,GAAA,EAAW,EAAA,IAAA,CAAiB,EAuBlC,OAfA,EAAA,EAAA,UAAA,KAAgB,CACd,MAAY,CACV,IAAM,EAAQ,EAAS,MACjB,EAAQ,EAAM,MAAM,MAE1B,GAAI,CAAC,EAAO,OAIZ,IAAM,IAFS,EAAQ,EAAG,QAAQ,UAAU,EAAI,KAAA,EAC1B,cAA2B,gCAAgC,EAAM,GAAG,EAAA,EACpE,YAAY,cAA2B,cAAc,GAAK,KAEhF,EAAA,kBAAkB,EAAO,yBAA0B,EAAS,CAAC,CAAM,EAAI,CAAC,CAAC,CAC3E,CAAC,CACH,CAAC,EAEM,EAAA,IAAI;;;;;eAKA,EAAS;cACV,EAAQ;2BACO,OAAO,CAAC,EAAS,KAAK,EAAE;iBACpC,EAAW;;WAElB,EAAA,EAAA,KAAA,CACA,MACM,EAAA,IAAI;;WAGZ,EAAE;;KAGR,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAM,CACrC,CAAC"}
+{"version":3,"file":"tab-panel.cjs","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onMounted, prop, ref, styleMap, watchEffect, when } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { setAriaReflection } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_PRESET: Record<string, string> = {\n  '2xl': 'var(--size-12)',\n  lg: 'var(--size-6)',\n  md: 'var(--size-4)',\n  none: '0',\n  sm: 'var(--size-2)',\n  xl: 'var(--size-8)',\n  xs: 'var(--size-1)',\n};\n\nexport type OreTabPanelProps = {\n  /** Active state (managed by ore-tabs) */\n  active?: boolean;\n  /** When true, the panel content is not rendered until first activation (preserves resources) */\n  lazy?: boolean;\n  /** Panel padding size: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md' = var(--size-4)) */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Must match the `value` of its corresponding ore-tab-item */\n  value: string;\n};\n\n/**\n * Content panel for a tab. Shown when its `value` matches the selected tab.\n *\n * @element ore-tab-panel\n *\n * @attr {string} value - Must match the corresponding ore-tab-item value\n * @attr {boolean} active - Toggled by the parent ore-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @cssprop --tab-panel-padding - Inner padding of the panel content area\n * @cssprop --tab-panel-font-size - Font size of the panel content\n * @part panel - Panel container.\n * @example\n * ```html\n * <ore-tab-panel value=\"overview\"><p>Overview content here</p></ore-tab-panel>\n * <ore-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></ore-tab-panel>\n * <ore-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></ore-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = 'ore-tab-panel' as const;\ndefine<OreTabPanelProps>(TAB_PANEL_TAG, {\n  props: {\n    active: prop.bool(false),\n    lazy: prop.bool(false),\n    padding: prop.oneOf(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const, 'md'),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const key = props.padding.value ?? 'md';\n\n      return TAB_PANEL_PADDING_PRESET[key] ?? TAB_PANEL_PADDING_PRESET.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    watch(() => {\n      if (isActive.value) hasBeenActive.value = true;\n    });\n\n    // shouldRender: true if not lazy OR has been active at least once\n    const shouldRender = computed(() => !props.lazy.value || hasBeenActive.value);\n    const panelStyle = styleMap({ '--tab-panel-padding': paddingValue });\n    const panelId = () => `tabpanel-${props.value.value}`;\n    const panelRef = ref<HTMLElement>();\n\n    // `aria-labelledby` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-item>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-item>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watch(() => {\n        const panel = panelRef.value;\n        const value = props.value.value;\n\n        if (!panel) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const tabEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-item[value=\"${value}\"]`);\n        const button = tabEl?.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? null;\n\n        setAriaReflection(panel, 'ariaLabelledByElements', button ? [button] : []);\n      });\n    });\n\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        ref=\"${panelRef}\"\n        id=\"${panelId}\"\n        aria-hidden=\"${() => String(!isActive.value)}\"\n        style=\"${panelStyle}\"\n        tabindex=\"0\">\n        ${when(\n          shouldRender,\n          () => html`\n            <slot></slot>\n          `,\n        )}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":"+SAQA,IAAM,EAAmD,CACvD,MAAO,iBACP,GAAI,gBACJ,GAAI,gBACJ,KAAM,IACN,GAAI,gBACJ,GAAI,gBACJ,GAAI,eACN,EAkCa,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAAyB,EAAe,CACtC,MAAO,CACL,OAAQ,EAAA,KAAK,KAAK,EAAK,EACvB,KAAM,EAAA,KAAK,KAAK,EAAK,EACrB,QAAS,EAAA,KAAK,MAAM,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAM,KAAK,EAAY,IAAI,EAChF,MAAO,EAAA,KAAK,OAAO,EAAE,CACvB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,EAAQ,EAAA,YAER,GAAA,EAAU,EAAA,OAAA,CAAO,EAAA,QAAQ,EACzB,GAAA,EAAW,EAAA,SAAA,KACf,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,KAC9F,GAEA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,WAAe,EAAS,MAAQ,GAAO,IAAA,EACzC,CACF,CAAC,EAGD,IAAM,GAAA,EAAe,EAAA,SAAA,KAGZ,EAFK,EAAM,QAAQ,OAAS,OAEK,EAAyB,EAClE,EAEK,GAAA,EAAgB,EAAA,OAAA,CAAO,EAAK,EAElC,MAAY,CACN,EAAS,QAAO,EAAc,MAAQ,GAC5C,CAAC,EAGD,IAAM,GAAA,EAAe,EAAA,SAAA,KAAe,CAAC,EAAM,KAAK,OAAS,EAAc,KAAK,EACtE,GAAA,EAAa,EAAA,SAAA,CAAS,CAAE,sBAAuB,CAAa,CAAC,EAC7D,MAAgB,YAAY,EAAM,MAAM,QACxC,GAAA,EAAW,EAAA,IAAA,CAAiB,EAuBlC,OAfA,EAAA,EAAA,UAAA,KAAgB,CACd,MAAY,CACV,IAAM,EAAQ,EAAS,MACjB,EAAQ,EAAM,MAAM,MAE1B,GAAI,CAAC,EAAO,OAIZ,IAAM,IAFS,EAAQ,EAAG,QAAQ,UAAU,EAAI,KAAA,EAC1B,cAA2B,gCAAgC,EAAM,GAAG,EAAA,EACpE,YAAY,cAA2B,cAAc,GAAK,KAEhF,EAAA,kBAAkB,EAAO,yBAA0B,EAAS,CAAC,CAAM,EAAI,CAAC,CAAC,CAC3E,CAAC,CACH,CAAC,EAEM,EAAA,IAAI;;;;;eAKA,EAAS;cACV,EAAQ;2BACO,OAAO,CAAC,EAAS,KAAK,EAAE;iBACpC,EAAW;;WAElB,EAAA,EAAA,KAAA,CACA,MACM,EAAA,IAAI;;WAGZ,EAAE;;KAGR,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAM,CACrC,CAAC"}

package/dist/tab-panel.js

@@ -1,5 +1,5 @@
-import { setAriaReflection as e } from "./core/aria-reflection.js";
-import { reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { setAriaReflection as t } from "./core/aria-reflection.js";
 import { TABS_CTX as n } from "./tabs.js";
 import r from "./disclosure/tab-panel/tab-panel.css.js";
 import { bind as i, define as a, getHost as o, html as s, inject as c, onMounted as l, prop as u, ref as d, styleMap as f, watchEffect as p, when as m } from "@vielzeug/ore";
@@ -29,20 +29,20 @@ a(v, {
 		], "md"),
 		value: u.string("")
 	},
-	setup(t) {
-		let r = o(), a = p, u = c(n), v = h(() => u ? !!u.value.value && u.value.value === t.value.value : t.active.value);
+	setup(e) {
+		let r = o(), a = p, u = c(n), v = h(() => u ? !!u.value.value && u.value.value === e.value.value : e.active.value);
 		i({ attr: { active: () => v.value ? !0 : void 0 } });
-		let y = h(() => _[t.padding.value ?? "md"] ?? _.md), b = g(!1);
+		let y = h(() => _[e.padding.value ?? "md"] ?? _.md), b = g(!1);
 		a(() => {
 			v.value && (b.value = !0);
 		});
-		let x = h(() => !t.lazy.value || b.value), S = f({ "--tab-panel-padding": y }), C = () => `tabpanel-${t.value.value}`, w = d();
+		let x = h(() => !e.lazy.value || b.value), S = f({ "--tab-panel-padding": y }), C = () => `tabpanel-${e.value.value}`, w = d();
 		return l(() => {
 			a(() => {
-				let n = w.value, i = t.value.value;
+				let n = w.value, i = e.value.value;
 				if (!n) return;
 				let a = ((i ? r.closest("ore-tabs") : null)?.querySelector(`:scope > ore-tab-item[value="${i}"]`))?.shadowRoot?.querySelector("[role=\"tab\"]") ?? null;
-				e(n, "ariaLabelledByElements", a ? [a] : []);
+				t(n, "ariaLabelledByElements", a ? [a] : []);
 			});
 		}), s`
       <div
@@ -60,7 +60,7 @@ a(v, {
       </div>
     `;
 	},
-	styles: [t, r]
+	styles: [e, r]
 });
 //#endregion
 export { v as TAB_PANEL_TAG };

package/dist/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, watchEffect, styleMap, when } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { setAriaReflection } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_PRESET: Record<string, string> = {\n  '2xl': 'var(--size-12)',\n  lg: 'var(--size-6)',\n  md: 'var(--size-4)',\n  none: '0',\n  sm: 'var(--size-2)',\n  xl: 'var(--size-8)',\n  xs: 'var(--size-1)',\n};\n\nexport type OreTabPanelProps = {\n  /** Active state (managed by ore-tabs) */\n  active?: boolean;\n  /** When true, the panel content is not rendered until first activation (preserves resources) */\n  lazy?: boolean;\n  /** Panel padding size: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md' = var(--size-4)) */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Must match the `value` of its corresponding ore-tab-item */\n  value: string;\n};\n\n/**\n * Content panel for a tab. Shown when its `value` matches the selected tab.\n *\n * @element ore-tab-panel\n *\n * @attr {string} value - Must match the corresponding ore-tab-item value\n * @attr {boolean} active - Toggled by the parent ore-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @cssprop --tab-panel-padding - Inner padding of the panel content area\n * @cssprop --tab-panel-font-size - Font size of the panel content\n * @part panel - Panel container.\n * @example\n * ```html\n * <ore-tab-panel value=\"overview\"><p>Overview content here</p></ore-tab-panel>\n * <ore-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></ore-tab-panel>\n * <ore-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></ore-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = 'ore-tab-panel' as const;\ndefine<OreTabPanelProps>(TAB_PANEL_TAG, {\n  props: {\n    active: prop.bool(false),\n    lazy: prop.bool(false),\n    padding: prop.oneOf(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const, 'md'),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const key = props.padding.value ?? 'md';\n\n      return TAB_PANEL_PADDING_PRESET[key] ?? TAB_PANEL_PADDING_PRESET.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    watch(() => {\n      if (isActive.value) hasBeenActive.value = true;\n    });\n\n    // shouldRender: true if not lazy OR has been active at least once\n    const shouldRender = computed(() => !props.lazy.value || hasBeenActive.value);\n    const panelStyle = styleMap({ '--tab-panel-padding': paddingValue });\n    const panelId = () => `tabpanel-${props.value.value}`;\n    const panelRef = ref<HTMLElement>();\n\n    // `aria-labelledby` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-item>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-item>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watch(() => {\n        const panel = panelRef.value;\n        const value = props.value.value;\n\n        if (!panel) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const tabEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-item[value=\"${value}\"]`);\n        const button = tabEl?.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? null;\n\n        setAriaReflection(panel, 'ariaLabelledByElements', button ? [button] : []);\n      });\n    });\n\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        ref=\"${panelRef}\"\n        id=\"${panelId}\"\n        aria-hidden=\"${() => String(!isActive.value)}\"\n        style=\"${panelStyle}\"\n        tabindex=\"0\">\n        ${when(\n          shouldRender,\n          () => html`\n            <slot></slot>\n          `,\n        )}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":";;;;;;;AAQA,IAAM,IAAmD;CACvD,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAkCa,IAAgB;AAC7B,EAAyB,GAAe;CACtC,OAAO;EACL,QAAQ,EAAK,KAAK,EAAK;EACvB,MAAM,EAAK,KAAK,EAAK;EACrB,SAAS,EAAK,MAAM;GAAC;GAAQ;GAAM;GAAM;GAAM;GAAM;GAAM;EAAK,GAAY,IAAI;EAChF,OAAO,EAAK,OAAO,EAAE;CACvB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,GAER,IAAU,EAAO,CAAQ,GACzB,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,KAC9F;EAEA,EAAK,EACH,MAAM,EACJ,cAAe,EAAS,QAAQ,KAAO,KAAA,EACzC,EACF,CAAC;EAGD,IAAM,IAAe,QAGZ,EAFK,EAAM,QAAQ,SAAS,SAEK,EAAyB,EAClE,GAEK,IAAgB,EAAO,EAAK;EAElC,QAAY;GACV,AAAI,EAAS,UAAO,EAAc,QAAQ;EAC5C,CAAC;EAGD,IAAM,IAAe,QAAe,CAAC,EAAM,KAAK,SAAS,EAAc,KAAK,GACtE,IAAa,EAAS,EAAE,uBAAuB,EAAa,CAAC,GAC7D,UAAgB,YAAY,EAAM,MAAM,SACxC,IAAW,EAAiB;EAuBlC,OAfA,QAAgB;GACd,QAAY;IACV,IAAM,IAAQ,EAAS,OACjB,IAAQ,EAAM,MAAM;IAE1B,IAAI,CAAC,GAAO;IAIZ,IAAM,MAFS,IAAQ,EAAG,QAAQ,UAAU,IAAI,KAAA,EAC1B,cAA2B,gCAAgC,EAAM,GAAG,EAAA,EACpE,YAAY,cAA2B,gBAAc,KAAK;IAEhF,EAAkB,GAAO,0BAA0B,IAAS,CAAC,CAAM,IAAI,CAAC,CAAC;GAC3E,CAAC;EACH,CAAC,GAEM,CAAI;;;;;eAKA,EAAS;cACV,EAAQ;6BACO,OAAO,CAAC,EAAS,KAAK,EAAE;iBACpC,EAAW;;UAElB,EACA,SACM,CAAI;;WAGZ,EAAE;;;CAGR;CACA,QAAQ,CAAC,GAAoB,CAAM;AACrC,CAAC"}
+{"version":3,"file":"tab-panel.js","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onMounted, prop, ref, styleMap, watchEffect, when } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { setAriaReflection } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_PRESET: Record<string, string> = {\n  '2xl': 'var(--size-12)',\n  lg: 'var(--size-6)',\n  md: 'var(--size-4)',\n  none: '0',\n  sm: 'var(--size-2)',\n  xl: 'var(--size-8)',\n  xs: 'var(--size-1)',\n};\n\nexport type OreTabPanelProps = {\n  /** Active state (managed by ore-tabs) */\n  active?: boolean;\n  /** When true, the panel content is not rendered until first activation (preserves resources) */\n  lazy?: boolean;\n  /** Panel padding size: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md' = var(--size-4)) */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Must match the `value` of its corresponding ore-tab-item */\n  value: string;\n};\n\n/**\n * Content panel for a tab. Shown when its `value` matches the selected tab.\n *\n * @element ore-tab-panel\n *\n * @attr {string} value - Must match the corresponding ore-tab-item value\n * @attr {boolean} active - Toggled by the parent ore-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @cssprop --tab-panel-padding - Inner padding of the panel content area\n * @cssprop --tab-panel-font-size - Font size of the panel content\n * @part panel - Panel container.\n * @example\n * ```html\n * <ore-tab-panel value=\"overview\"><p>Overview content here</p></ore-tab-panel>\n * <ore-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></ore-tab-panel>\n * <ore-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></ore-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = 'ore-tab-panel' as const;\ndefine<OreTabPanelProps>(TAB_PANEL_TAG, {\n  props: {\n    active: prop.bool(false),\n    lazy: prop.bool(false),\n    padding: prop.oneOf(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const, 'md'),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const key = props.padding.value ?? 'md';\n\n      return TAB_PANEL_PADDING_PRESET[key] ?? TAB_PANEL_PADDING_PRESET.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    watch(() => {\n      if (isActive.value) hasBeenActive.value = true;\n    });\n\n    // shouldRender: true if not lazy OR has been active at least once\n    const shouldRender = computed(() => !props.lazy.value || hasBeenActive.value);\n    const panelStyle = styleMap({ '--tab-panel-padding': paddingValue });\n    const panelId = () => `tabpanel-${props.value.value}`;\n    const panelRef = ref<HTMLElement>();\n\n    // `aria-labelledby` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-item>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-item>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watch(() => {\n        const panel = panelRef.value;\n        const value = props.value.value;\n\n        if (!panel) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const tabEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-item[value=\"${value}\"]`);\n        const button = tabEl?.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? null;\n\n        setAriaReflection(panel, 'ariaLabelledByElements', button ? [button] : []);\n      });\n    });\n\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        ref=\"${panelRef}\"\n        id=\"${panelId}\"\n        aria-hidden=\"${() => String(!isActive.value)}\"\n        style=\"${panelStyle}\"\n        tabindex=\"0\">\n        ${when(\n          shouldRender,\n          () => html`\n            <slot></slot>\n          `,\n        )}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":";;;;;;;AAQA,IAAM,IAAmD;CACvD,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAkCa,IAAgB;AAC7B,EAAyB,GAAe;CACtC,OAAO;EACL,QAAQ,EAAK,KAAK,EAAK;EACvB,MAAM,EAAK,KAAK,EAAK;EACrB,SAAS,EAAK,MAAM;GAAC;GAAQ;GAAM;GAAM;GAAM;GAAM;GAAM;EAAK,GAAY,IAAI;EAChF,OAAO,EAAK,OAAO,EAAE;CACvB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,GAER,IAAU,EAAO,CAAQ,GACzB,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,KAC9F;EAEA,EAAK,EACH,MAAM,EACJ,cAAe,EAAS,QAAQ,KAAO,KAAA,EACzC,EACF,CAAC;EAGD,IAAM,IAAe,QAGZ,EAFK,EAAM,QAAQ,SAAS,SAEK,EAAyB,EAClE,GAEK,IAAgB,EAAO,EAAK;EAElC,QAAY;GACV,AAAI,EAAS,UAAO,EAAc,QAAQ;EAC5C,CAAC;EAGD,IAAM,IAAe,QAAe,CAAC,EAAM,KAAK,SAAS,EAAc,KAAK,GACtE,IAAa,EAAS,EAAE,uBAAuB,EAAa,CAAC,GAC7D,UAAgB,YAAY,EAAM,MAAM,SACxC,IAAW,EAAiB;EAuBlC,OAfA,QAAgB;GACd,QAAY;IACV,IAAM,IAAQ,EAAS,OACjB,IAAQ,EAAM,MAAM;IAE1B,IAAI,CAAC,GAAO;IAIZ,IAAM,MAFS,IAAQ,EAAG,QAAQ,UAAU,IAAI,KAAA,EAC1B,cAA2B,gCAAgC,EAAM,GAAG,EAAA,EACpE,YAAY,cAA2B,gBAAc,KAAK;IAEhF,EAAkB,GAAO,0BAA0B,IAAS,CAAC,CAAM,IAAI,CAAC,CAAC;GAC3E,CAAC;EACH,CAAC,GAEM,CAAI;;;;;eAKA,EAAS;cACV,EAAQ;6BACO,OAAO,CAAC,EAAS,KAAK,EAAE;iBACpC,EAAW;;UAElB,EACA,SACM,CAAI;;WAGZ,EAAE;;;CAGR;CACA,QAAQ,CAAC,GAAoB,CAAM;AACrC,CAAC"}

package/dist/table.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/table-base.css.cjs"),n=require("./content/table/table.css.cjs");let r=require("@vielzeug/ore");customElements.get(`ore-tr`)||customElements.define(`ore-tr`,class extends HTMLElement{}),customElements.get(`ore-th`)||customElements.define(`ore-th`,class extends HTMLElement{}),customElements.get(`ore-td`)||customElements.define(`ore-td`,class extends HTMLElement{});var i=[`colspan`,`rowspan`,`headers`,`abbr`];function a(e,t,n){if(e.childElementCount>0){let n=e.innerHTML;if(t.getAttribute(`data-src-html`)===n)return;t.setAttribute(`data-src-html`,n),t.textContent=``;for(let n of e.childNodes)t.appendChild(n.cloneNode(!0))}else{let n=e.textContent??``;t.textContent!==n&&(t.textContent=n)}for(let n of i){let r=e.getAttribute(n);r===null?t.removeAttribute(n):t.setAttribute(n,r)}let r=e.getAttribute(`scope`);r===null?n?t.scope=n:t.removeAttribute(`scope`):t.setAttribute(`scope`,r)}function o(e,t,n,r){let i=new WeakMap;t.textContent=``,n.textContent=``,r.textContent=``;for(let o of e.children){if(o.localName!==`ore-tr`)continue;let e=o.hasAttribute(`head`)?t:o.hasAttribute(`foot`)?r:n,s=document.createElement(`tr`);for(let r of o.children){if(r.localName!==`ore-th`&&r.localName!==`ore-td`)continue;let o=r.localName===`ore-th`,c=document.createElement(o?`th`:`td`),l=o?e===t?`col`:`row`:void 0;c.setAttribute(`part`,e===n?`cell`:`header-cell`),c.removeAttribute(`data-src-html`),a(r,c,l),i.set(r,{inferredScope:l,native:c}),s.appendChild(c)}e.appendChild(s)}return i}var s=`ore-table`;(0,r.define)(s,{props:{bordered:r.prop.bool(!1),caption:r.prop.string(),density:r.prop.string(),fullwidth:r.prop.bool(!1),loading:r.prop.bool(!1),sticky:r.prop.bool(!1),striped:r.prop.bool(!1)},setup(e){let t=(0,r.getHost)(),n=r.watchEffect;return(0,r.bind)({attr:{"aria-busy":e.loading,"aria-label":e.caption}}),(0,r.onMounted)(()=>{let r=t.shadowRoot.querySelector(`.scroll-container`),s=document.createElement(`table`),c=document.createElement(`caption`),l=document.createElement(`thead`),u=document.createElement(`tbody`),d=document.createElement(`tfoot`);r.setAttribute(`part`,`scroll`),s.setAttribute(`part`,`table`),l.setAttribute(`part`,`head`),u.setAttribute(`part`,`body`),d.setAttribute(`part`,`foot`),s.append(c,l,u,d),r.appendChild(s),n(()=>{let t=e.caption.value??``;c.textContent=t,c.hidden=t===``});let f=o(t,l,u,d),p=new MutationObserver(e=>{for(let t of e){let e=(t.target instanceof Element?t.target:t.target.parentElement)?.closest(`ore-th, ore-td`);if(e){let t=f.get(e);t&&a(e,t.native,t.inferredScope)}}});p.observe(t,{attributeFilter:[...i,`scope`],attributes:!0,characterData:!0,childList:!0,subtree:!0});let m=new MutationObserver(()=>{f=o(t,l,u,d)});return m.observe(t,{childList:!0}),()=>{m.disconnect(),p.disconnect()}}),r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/table-base.css.cjs"),n=require("./content/table/table.css.cjs");let r=require("@vielzeug/ore");customElements.get(`ore-tr`)||customElements.define(`ore-tr`,class extends HTMLElement{}),customElements.get(`ore-th`)||customElements.define(`ore-th`,class extends HTMLElement{}),customElements.get(`ore-td`)||customElements.define(`ore-td`,class extends HTMLElement{});var i=[`colspan`,`rowspan`,`headers`,`abbr`];function a(e,t,n){if(e.childElementCount>0){let n=e.innerHTML;if(t.getAttribute(`data-src-html`)===n)return;t.setAttribute(`data-src-html`,n),t.textContent=``;for(let n of e.childNodes)t.appendChild(n.cloneNode(!0))}else{let n=e.textContent??``;t.textContent!==n&&(t.textContent=n)}for(let n of i){let r=e.getAttribute(n);r===null?t.removeAttribute(n):t.setAttribute(n,r)}let r=e.getAttribute(`scope`);r===null?n?t.scope=n:t.removeAttribute(`scope`):t.setAttribute(`scope`,r)}function o(e,t,n,r){let i=new WeakMap;t.textContent=``,n.textContent=``,r.textContent=``;for(let o of e.children){if(o.localName!==`ore-tr`)continue;let e=o.hasAttribute(`head`)?t:o.hasAttribute(`foot`)?r:n,s=document.createElement(`tr`);for(let r of o.children){if(r.localName!==`ore-th`&&r.localName!==`ore-td`)continue;let o=r.localName===`ore-th`,c=document.createElement(o?`th`:`td`),l=o?e===t?`col`:`row`:void 0;c.setAttribute(`part`,e===n?`cell`:`header-cell`),c.removeAttribute(`data-src-html`),a(r,c,l),i.set(r,{inferredScope:l,native:c}),s.appendChild(c)}e.appendChild(s)}return i}var s=`ore-table`;(0,r.define)(s,{props:{bordered:r.prop.bool(!1),caption:r.prop.string(),density:r.prop.string(),fullwidth:r.prop.bool(!1),loading:r.prop.bool(!1),sticky:r.prop.bool(!1),striped:r.prop.bool(!1)},setup(e){let t=(0,r.getHost)(),n=r.watchEffect;return(0,r.bind)({attr:{"aria-busy":e.loading,"aria-label":e.caption}}),(0,r.onMounted)(()=>{let r=t.shadowRoot?.querySelector(`.scroll-container`),s=document.createElement(`table`),c=document.createElement(`caption`),l=document.createElement(`thead`),u=document.createElement(`tbody`),d=document.createElement(`tfoot`);r.setAttribute(`part`,`scroll`),s.setAttribute(`part`,`table`),l.setAttribute(`part`,`head`),u.setAttribute(`part`,`body`),d.setAttribute(`part`,`foot`),s.append(c,l,u,d),r.appendChild(s),n(()=>{let t=e.caption.value??``;c.textContent=t,c.hidden=t===``});let f=o(t,l,u,d),p=new MutationObserver(e=>{for(let t of e){let e=(t.target instanceof Element?t.target:t.target.parentElement)?.closest(`ore-th, ore-td`);if(e){let t=f.get(e);t&&a(e,t.native,t.inferredScope)}}});p.observe(t,{attributeFilter:[...i,`scope`],attributes:!0,characterData:!0,childList:!0,subtree:!0});let m=new MutationObserver(()=>{f=o(t,l,u,d)});return m.observe(t,{childList:!0}),()=>{m.disconnect(),p.disconnect()}}),r.html`
       <div class="scroll-container"></div>
     `},styles:[e.reducedMotionMixin,t.tableBaseMixin(`table`),n.default]}),exports.TABLE_TAG=s;
 //# sourceMappingURL=table.cjs.map

package/dist/table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"table.cjs","names":[],"sources":["../src/content/table/table.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted, watchEffect } from '@vielzeug/ore';\n\nimport { reducedMotionMixin, tableBaseMixin } from '../../styles';\nimport componentStyles from './table.css?inline';\n\n/* ── Types ───────────────────────────────────────────────────────────────── */\n\n/** Table component properties */\nexport type OreTableProps = {\n  /** Adds a thicker outer border */\n  bordered?: boolean;\n  /** Visible caption text — also used as the accessible table label via `aria-label` */\n  caption?: string;\n  /** Cell density: `'compact'` | `'cozy'` (default) | `'comfortable'` */\n  density?: 'compact' | 'cozy' | 'comfortable';\n  /** Expands the table to 100% of its container width */\n  fullwidth?: boolean;\n  /** Applies a busy/disabled state with reduced opacity */\n  loading?: boolean;\n  /** Enables sticky column headers with a vertical scroll container */\n  sticky?: boolean;\n  /** Alternating row stripe backgrounds */\n  striped?: boolean;\n};\n\n/* ── Child element markers ───────────────────────────────────────────────── */\n// ore-tr, ore-th, ore-td are lightweight light-DOM markers.\n// ore-table reads them and constructs a fully-native shadow <table> so that\n// browser features that require real table elements (colspan/rowspan,\n// position:sticky on <thead>, table layout algorithm) all work correctly.\n// Attributes on ore-th/ore-td are mirrored to the generated native cells.\n\n/**\n * Light-DOM row marker consumed by `<ore-table>`.\n *\n * @element ore-tr\n * @attr {boolean} head - Places the row in the generated `<thead>` section\n * @attr {boolean} foot - Places the row in the generated `<tfoot>` section\n *\n * @example\n * ```html\n * <ore-table>\n *   <ore-tr head><ore-th>Name</ore-th><ore-th>Role</ore-th></ore-tr>\n *   <ore-tr><ore-td>Alice</ore-td><ore-td>Admin</ore-td></ore-tr>\n * </ore-table>\n * ```\n */\nif (!customElements.get('ore-tr')) customElements.define('ore-tr', class extends HTMLElement {});\n\n/**\n * Light-DOM header cell marker consumed by `<ore-table>`.\n *\n * @element ore-th\n * @attr {number} colspan  - Mirrors to native `<th colspan>`\n * @attr {number} rowspan  - Mirrors to native `<th rowspan>`\n * @attr {string} scope    - Mirrors to native `<th scope>`: 'col' | 'row' | 'colgroup' | 'rowgroup'\n * @attr {string} headers  - Mirrors to native `<th headers>`\n *\n * @example\n * ```html\n * <ore-tr head>\n *   <ore-th scope=\"col\">Name</ore-th>\n *   <ore-th scope=\"col\" colspan=\"2\">Address</ore-th>\n * </ore-tr>\n * ```\n */\nif (!customElements.get('ore-th')) customElements.define('ore-th', class extends HTMLElement {});\n\n/**\n * Light-DOM data cell marker consumed by `<ore-table>`.\n *\n * @element ore-td\n * @attr {number} colspan  - Mirrors to native `<td colspan>`\n * @attr {number} rowspan  - Mirrors to native `<td rowspan>`\n * @attr {string} headers  - Mirrors to native `<td headers>`\n *\n * @example\n * ```html\n * <ore-tr>\n *   <ore-td>Alice</ore-td>\n *   <ore-td colspan=\"2\">123 Main St, Springfield</ore-td>\n * </ore-tr>\n * ```\n */\nif (!customElements.get('ore-td')) customElements.define('ore-td', class extends HTMLElement {});\n\n/* ── Proxy/mirror helpers ────────────────────────────────────────────────── */\n\n// Attributes forwarded from ore-th/ore-td to the generated native cell.\n// scope is intentionally excluded — it requires fallback logic and is handled separately.\nconst CELL_ATTRS = ['colspan', 'rowspan', 'headers', 'abbr'];\n\n/**\n * Sync text content and tracked attributes from a light-DOM marker to its\n * native mirror. `fallbackScope` is applied when the source element carries no\n * explicit `scope` attribute, ensuring the auto-inferred value is always\n * present and is restored if an explicit override is later removed.\n */\nfunction syncCell(source: Element, native: HTMLTableCellElement, fallbackScope?: string): void {\n  if (source.childElementCount > 0) {\n    // Source has element children — deep-clone them into the native cell so\n    // components like ore-skeleton render correctly inside the shadow table.\n    // Guard: skip re-clone if the serialised content is identical to avoid\n    // redundant DOM work on every MutationObserver tick (e.g. 250+ cells\n    // of skeleton loaders all cloning on each attribute change).\n    const snapshot = source.innerHTML;\n\n    if (native.getAttribute('data-src-html') === snapshot) return;\n\n    native.setAttribute('data-src-html', snapshot);\n    native.textContent = '';\n\n    for (const child of source.childNodes) {\n      native.appendChild(child.cloneNode(true));\n    }\n  } else {\n    const text = source.textContent ?? '';\n\n    if (native.textContent !== text) native.textContent = text;\n  }\n\n  for (const attr of CELL_ATTRS) {\n    const val = source.getAttribute(attr);\n\n    if (val !== null) native.setAttribute(attr, val);\n    else native.removeAttribute(attr);\n  }\n\n  // scope: explicit attribute wins; otherwise restore the inferred fallback.\n  const explicitScope = source.getAttribute('scope');\n\n  if (explicitScope !== null) native.setAttribute('scope', explicitScope);\n  else if (fallbackScope) native.scope = fallbackScope;\n  else native.removeAttribute('scope');\n}\n\n/** Entry stored in the cell map: native mirror element + its inferred scope fallback. */\ntype CellEntry = { inferredScope: string | undefined; native: HTMLTableCellElement };\n\n/**\n * (Re)build the entire native shadow table from the current light-DOM markers.\n * Returns a WeakMap of source marker → CellEntry for targeted sync by the\n * content observer. Storing `inferredScope` per cell ensures that removing an\n * explicit `scope` attribute reverts to the auto-inferred value rather than\n * dropping it entirely.\n */\nfunction buildTable(\n  host: HTMLElement,\n  thead: HTMLTableSectionElement,\n  tbody: HTMLTableSectionElement,\n  tfoot: HTMLTableSectionElement,\n): WeakMap<Element, CellEntry> {\n  const cellMap = new WeakMap<Element, CellEntry>();\n\n  thead.textContent = '';\n  tbody.textContent = '';\n  tfoot.textContent = '';\n\n  for (const child of host.children) {\n    if (child.localName !== 'ore-tr') continue;\n\n    const section = child.hasAttribute('head') ? thead : child.hasAttribute('foot') ? tfoot : tbody;\n    const tr = document.createElement('tr');\n\n    for (const cell of child.children) {\n      if (cell.localName !== 'ore-th' && cell.localName !== 'ore-td') continue;\n\n      const isHeader = cell.localName === 'ore-th';\n      const native = document.createElement(isHeader ? 'th' : 'td');\n      // Auto-infer scope for <th> elements; undefined for <td>.\n      const inferredScope = isHeader ? (section === thead ? 'col' : 'row') : undefined;\n\n      native.setAttribute('part', section === tbody ? 'cell' : 'header-cell');\n      native.removeAttribute('data-src-html');\n      syncCell(cell, native, inferredScope);\n      cellMap.set(cell, { inferredScope, native });\n      tr.appendChild(native);\n    }\n\n    section.appendChild(tr);\n  }\n\n  return cellMap;\n}\n\n/**\n * Data table component.\n *\n * Reads light-DOM `<ore-tr>`/`<ore-th>`/`<ore-td>` markers and projects them\n * into a fully-native shadow `<table>`. Cell attributes (`colspan`, `rowspan`,\n * `scope`, etc.) are mirrored. Changes are observed and synced incrementally.\n *\n * Native table features — sticky headers, colspan/rowspan, the table layout\n * algorithm — all work because the shadow tree contains real table elements.\n *\n * @element ore-table\n *\n * @attr {boolean} bordered  - Thicker outer border\n * @attr {string}  caption   - Caption text shown above the table\n * @attr {boolean} fullwidth - Expands to 100% container width\n * @attr {boolean} loading   - Busy state: reduced opacity, no pointer events\n * @attr {string}  density   - Cell density: 'compact' | 'cozy' | 'comfortable' (default: 'cozy')\n * @attr {boolean} sticky    - Sticky `<thead>` with scroll container\n * @attr {boolean} striped   - Alternating row backgrounds\n *\n * @part scroll       - Scroll container that hosts the generated native table\n * @part table        - Generated native `<table>` element\n * @part head         - Generated native `<thead>` section\n * @part body         - Generated native `<tbody>` section\n * @part foot         - Generated native `<tfoot>` section\n * @part cell         - Every native `<td>` in `<tbody>` rows\n * @part header-cell  - Every native `<th>` / `<td>` in `<thead>` and `<tfoot>` rows\n *\n * @cssprop --table-bg                - Table background color\n * @cssprop --table-border-color      - Cell separator and outer border color\n * @cssprop --table-radius            - Corner radius of the table container\n * @cssprop --table-shadow            - Box shadow of the table container\n * @cssprop --table-header-bg         - Background of header and footer rows\n * @cssprop --table-accent            - Accent color for interactive states\n * @cssprop --table-row-hover-bg      - Row hover background\n * @cssprop --table-stripe-bg         - Even-row stripe background\n * @cssprop --table-cell-padding-x    - Cell horizontal padding\n * @cssprop --table-cell-padding-y    - Cell vertical padding\n * @cssprop --table-font-size         - Base font size for cells\n * @cssprop --table-sticky-max-height - Max height of the sticky scroll container\n * @cssprop --table-sticky-header-bg  - Background of sticky header cells\n * @cssprop --table-sticky-blur       - Backdrop blur applied to sticky headers\n *\n * @example\n * ```html\n * <ore-table caption=\"Top repositories\" striped bordered sticky>\n *   <ore-tr head>\n *     <ore-th>Repository</ore-th>\n *     <ore-th>Stars</ore-th>\n *   </ore-tr>\n *   <ore-tr>\n *     <ore-td>vielzeug/refine</ore-td>\n *     <ore-td>1 200</ore-td>\n *   </ore-tr>\n * </ore-table>\n * ```\n */\nexport const TABLE_TAG = 'ore-table' as const;\ndefine<OreTableProps>(TABLE_TAG, {\n  props: {\n    bordered: prop.bool(false),\n    caption: prop.string(),\n    density: prop.string<'compact' | 'cozy' | 'comfortable'>(),\n    fullwidth: prop.bool(false),\n    loading: prop.bool(false),\n    sticky: prop.bool(false),\n    striped: prop.bool(false),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        'aria-busy': props.loading,\n        'aria-label': props.caption,\n      },\n    });\n\n    // Build the native shadow table via DOM APIs (not innerHTML) to avoid\n    // HTML-parser foster-parenting, which ejects table section elements from\n    // their intended positions in the tree.\n    onMounted(() => {\n      const scrollContainer = el.shadowRoot!.querySelector('.scroll-container')!;\n\n      const table = document.createElement('table');\n      const captionEl = document.createElement('caption');\n      const thead = document.createElement('thead');\n      const tbody = document.createElement('tbody');\n      const tfoot = document.createElement('tfoot');\n\n      scrollContainer.setAttribute('part', 'scroll');\n      table.setAttribute('part', 'table');\n      thead.setAttribute('part', 'head');\n      tbody.setAttribute('part', 'body');\n      tfoot.setAttribute('part', 'foot');\n      table.append(captionEl, thead, tbody, tfoot);\n      scrollContainer.appendChild(table);\n\n      // Reactively sync caption text and visibility from prop.\n      watch(() => {\n        const text = props.caption.value ?? '';\n\n        captionEl.textContent = text;\n        captionEl.hidden = text === '';\n      });\n\n      // Initial full build.\n      let cellMap = buildTable(el, thead, tbody, tfoot);\n\n      // Content observer: syncs text/attribute changes inside ore-th/ore-td.\n      // Remains connected throughout the component lifetime — no\n      // disconnect/reconnect during structural rebuilds. Records that arrive\n      // for cells no longer in cellMap (after a rebuild) are silently ignored\n      // by the `if (entry)` guard, so there is no correctness risk.\n      const contentObserver = new MutationObserver((records) => {\n        for (const rec of records) {\n          const sourceCell = (rec.target instanceof Element ? rec.target : rec.target.parentElement)?.closest(\n            'ore-th, ore-td',\n          );\n\n          if (sourceCell) {\n            const entry = cellMap.get(sourceCell);\n\n            if (entry) syncCell(sourceCell, entry.native, entry.inferredScope);\n          }\n        }\n      });\n\n      contentObserver.observe(el, {\n        // Include 'scope' in attributeFilter so explicit scope changes are picked\n        // up and the fallback-restore logic in syncCell runs correctly.\n        attributeFilter: [...CELL_ATTRS, 'scope'],\n        attributes: true,\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n\n      // Structure observer: triggers a full rebuild when ore-tr elements are\n      // added, removed, or reordered. Scoped to direct children only so it\n      // never fires for cell-level mutations.\n      const structureObserver = new MutationObserver(() => {\n        cellMap = buildTable(el, thead, tbody, tfoot);\n      });\n\n      structureObserver.observe(el, { childList: true });\n\n      return () => {\n        structureObserver.disconnect();\n        contentObserver.disconnect();\n      };\n    });\n\n    return html`\n      <div class=\"scroll-container\"></div>\n    `;\n  },\n\n  styles: [reducedMotionMixin, tableBaseMixin('table'), componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"table.cjs","names":[],"sources":["../src/content/table/table.ts"],"sourcesContent":["import { bind, define, getHost, html, onMounted, prop, watchEffect } from '@vielzeug/ore';\n\nimport { reducedMotionMixin, tableBaseMixin } from '../../styles';\nimport componentStyles from './table.css?inline';\n\n/* ── Types ───────────────────────────────────────────────────────────────── */\n\n/** Table component properties */\nexport type OreTableProps = {\n  /** Adds a thicker outer border */\n  bordered?: boolean;\n  /** Visible caption text — also used as the accessible table label via `aria-label` */\n  caption?: string;\n  /** Cell density: `'compact'` | `'cozy'` (default) | `'comfortable'` */\n  density?: 'compact' | 'cozy' | 'comfortable';\n  /** Expands the table to 100% of its container width */\n  fullwidth?: boolean;\n  /** Applies a busy/disabled state with reduced opacity */\n  loading?: boolean;\n  /** Enables sticky column headers with a vertical scroll container */\n  sticky?: boolean;\n  /** Alternating row stripe backgrounds */\n  striped?: boolean;\n};\n\n/* ── Child element markers ───────────────────────────────────────────────── */\n// ore-tr, ore-th, ore-td are lightweight light-DOM markers.\n// ore-table reads them and constructs a fully-native shadow <table> so that\n// browser features that require real table elements (colspan/rowspan,\n// position:sticky on <thead>, table layout algorithm) all work correctly.\n// Attributes on ore-th/ore-td are mirrored to the generated native cells.\n\n/**\n * Light-DOM row marker consumed by `<ore-table>`.\n *\n * @element ore-tr\n * @attr {boolean} head - Places the row in the generated `<thead>` section\n * @attr {boolean} foot - Places the row in the generated `<tfoot>` section\n *\n * @example\n * ```html\n * <ore-table>\n *   <ore-tr head><ore-th>Name</ore-th><ore-th>Role</ore-th></ore-tr>\n *   <ore-tr><ore-td>Alice</ore-td><ore-td>Admin</ore-td></ore-tr>\n * </ore-table>\n * ```\n */\nif (!customElements.get('ore-tr')) customElements.define('ore-tr', class extends HTMLElement {});\n\n/**\n * Light-DOM header cell marker consumed by `<ore-table>`.\n *\n * @element ore-th\n * @attr {number} colspan  - Mirrors to native `<th colspan>`\n * @attr {number} rowspan  - Mirrors to native `<th rowspan>`\n * @attr {string} scope    - Mirrors to native `<th scope>`: 'col' | 'row' | 'colgroup' | 'rowgroup'\n * @attr {string} headers  - Mirrors to native `<th headers>`\n *\n * @example\n * ```html\n * <ore-tr head>\n *   <ore-th scope=\"col\">Name</ore-th>\n *   <ore-th scope=\"col\" colspan=\"2\">Address</ore-th>\n * </ore-tr>\n * ```\n */\nif (!customElements.get('ore-th')) customElements.define('ore-th', class extends HTMLElement {});\n\n/**\n * Light-DOM data cell marker consumed by `<ore-table>`.\n *\n * @element ore-td\n * @attr {number} colspan  - Mirrors to native `<td colspan>`\n * @attr {number} rowspan  - Mirrors to native `<td rowspan>`\n * @attr {string} headers  - Mirrors to native `<td headers>`\n *\n * @example\n * ```html\n * <ore-tr>\n *   <ore-td>Alice</ore-td>\n *   <ore-td colspan=\"2\">123 Main St, Springfield</ore-td>\n * </ore-tr>\n * ```\n */\nif (!customElements.get('ore-td')) customElements.define('ore-td', class extends HTMLElement {});\n\n/* ── Proxy/mirror helpers ────────────────────────────────────────────────── */\n\n// Attributes forwarded from ore-th/ore-td to the generated native cell.\n// scope is intentionally excluded — it requires fallback logic and is handled separately.\nconst CELL_ATTRS = ['colspan', 'rowspan', 'headers', 'abbr'];\n\n/**\n * Sync text content and tracked attributes from a light-DOM marker to its\n * native mirror. `fallbackScope` is applied when the source element carries no\n * explicit `scope` attribute, ensuring the auto-inferred value is always\n * present and is restored if an explicit override is later removed.\n */\nfunction syncCell(source: Element, native: HTMLTableCellElement, fallbackScope?: string): void {\n  if (source.childElementCount > 0) {\n    // Source has element children — deep-clone them into the native cell so\n    // components like ore-skeleton render correctly inside the shadow table.\n    // Guard: skip re-clone if the serialised content is identical to avoid\n    // redundant DOM work on every MutationObserver tick (e.g. 250+ cells\n    // of skeleton loaders all cloning on each attribute change).\n    const snapshot = source.innerHTML;\n\n    if (native.getAttribute('data-src-html') === snapshot) return;\n\n    native.setAttribute('data-src-html', snapshot);\n    native.textContent = '';\n\n    for (const child of source.childNodes) {\n      native.appendChild(child.cloneNode(true));\n    }\n  } else {\n    const text = source.textContent ?? '';\n\n    if (native.textContent !== text) native.textContent = text;\n  }\n\n  for (const attr of CELL_ATTRS) {\n    const val = source.getAttribute(attr);\n\n    if (val !== null) native.setAttribute(attr, val);\n    else native.removeAttribute(attr);\n  }\n\n  // scope: explicit attribute wins; otherwise restore the inferred fallback.\n  const explicitScope = source.getAttribute('scope');\n\n  if (explicitScope !== null) native.setAttribute('scope', explicitScope);\n  else if (fallbackScope) native.scope = fallbackScope;\n  else native.removeAttribute('scope');\n}\n\n/** Entry stored in the cell map: native mirror element + its inferred scope fallback. */\ntype CellEntry = { inferredScope: string | undefined; native: HTMLTableCellElement };\n\n/**\n * (Re)build the entire native shadow table from the current light-DOM markers.\n * Returns a WeakMap of source marker → CellEntry for targeted sync by the\n * content observer. Storing `inferredScope` per cell ensures that removing an\n * explicit `scope` attribute reverts to the auto-inferred value rather than\n * dropping it entirely.\n */\nfunction buildTable(\n  host: HTMLElement,\n  thead: HTMLTableSectionElement,\n  tbody: HTMLTableSectionElement,\n  tfoot: HTMLTableSectionElement,\n): WeakMap<Element, CellEntry> {\n  const cellMap = new WeakMap<Element, CellEntry>();\n\n  thead.textContent = '';\n  tbody.textContent = '';\n  tfoot.textContent = '';\n\n  for (const child of host.children) {\n    if (child.localName !== 'ore-tr') continue;\n\n    const section = child.hasAttribute('head') ? thead : child.hasAttribute('foot') ? tfoot : tbody;\n    const tr = document.createElement('tr');\n\n    for (const cell of child.children) {\n      if (cell.localName !== 'ore-th' && cell.localName !== 'ore-td') continue;\n\n      const isHeader = cell.localName === 'ore-th';\n      const native = document.createElement(isHeader ? 'th' : 'td');\n      // Auto-infer scope for <th> elements; undefined for <td>.\n      const inferredScope = isHeader ? (section === thead ? 'col' : 'row') : undefined;\n\n      native.setAttribute('part', section === tbody ? 'cell' : 'header-cell');\n      native.removeAttribute('data-src-html');\n      syncCell(cell, native, inferredScope);\n      cellMap.set(cell, { inferredScope, native });\n      tr.appendChild(native);\n    }\n\n    section.appendChild(tr);\n  }\n\n  return cellMap;\n}\n\n/**\n * Data table component.\n *\n * Reads light-DOM `<ore-tr>`/`<ore-th>`/`<ore-td>` markers and projects them\n * into a fully-native shadow `<table>`. Cell attributes (`colspan`, `rowspan`,\n * `scope`, etc.) are mirrored. Changes are observed and synced incrementally.\n *\n * Native table features — sticky headers, colspan/rowspan, the table layout\n * algorithm — all work because the shadow tree contains real table elements.\n *\n * @element ore-table\n *\n * @attr {boolean} bordered  - Thicker outer border\n * @attr {string}  caption   - Caption text shown above the table\n * @attr {boolean} fullwidth - Expands to 100% container width\n * @attr {boolean} loading   - Busy state: reduced opacity, no pointer events\n * @attr {string}  density   - Cell density: 'compact' | 'cozy' | 'comfortable' (default: 'cozy')\n * @attr {boolean} sticky    - Sticky `<thead>` with scroll container\n * @attr {boolean} striped   - Alternating row backgrounds\n *\n * @part scroll       - Scroll container that hosts the generated native table\n * @part table        - Generated native `<table>` element\n * @part head         - Generated native `<thead>` section\n * @part body         - Generated native `<tbody>` section\n * @part foot         - Generated native `<tfoot>` section\n * @part cell         - Every native `<td>` in `<tbody>` rows\n * @part header-cell  - Every native `<th>` / `<td>` in `<thead>` and `<tfoot>` rows\n *\n * @cssprop --table-bg                - Table background color\n * @cssprop --table-border-color      - Cell separator and outer border color\n * @cssprop --table-radius            - Corner radius of the table container\n * @cssprop --table-shadow            - Box shadow of the table container\n * @cssprop --table-header-bg         - Background of header and footer rows\n * @cssprop --table-accent            - Accent color for interactive states\n * @cssprop --table-row-hover-bg      - Row hover background\n * @cssprop --table-stripe-bg         - Even-row stripe background\n * @cssprop --table-cell-padding-x    - Cell horizontal padding\n * @cssprop --table-cell-padding-y    - Cell vertical padding\n * @cssprop --table-font-size         - Base font size for cells\n * @cssprop --table-sticky-max-height - Max height of the sticky scroll container\n * @cssprop --table-sticky-header-bg  - Background of sticky header cells\n * @cssprop --table-sticky-blur       - Backdrop blur applied to sticky headers\n *\n * @example\n * ```html\n * <ore-table caption=\"Top repositories\" striped bordered sticky>\n *   <ore-tr head>\n *     <ore-th>Repository</ore-th>\n *     <ore-th>Stars</ore-th>\n *   </ore-tr>\n *   <ore-tr>\n *     <ore-td>vielzeug/refine</ore-td>\n *     <ore-td>1 200</ore-td>\n *   </ore-tr>\n * </ore-table>\n * ```\n */\nexport const TABLE_TAG = 'ore-table' as const;\ndefine<OreTableProps>(TABLE_TAG, {\n  props: {\n    bordered: prop.bool(false),\n    caption: prop.string(),\n    density: prop.string<'compact' | 'cozy' | 'comfortable'>(),\n    fullwidth: prop.bool(false),\n    loading: prop.bool(false),\n    sticky: prop.bool(false),\n    striped: prop.bool(false),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        'aria-busy': props.loading,\n        'aria-label': props.caption,\n      },\n    });\n\n    // Build the native shadow table via DOM APIs (not innerHTML) to avoid\n    // HTML-parser foster-parenting, which ejects table section elements from\n    // their intended positions in the tree.\n    onMounted(() => {\n      const scrollContainer = el.shadowRoot?.querySelector('.scroll-container')!;\n\n      const table = document.createElement('table');\n      const captionEl = document.createElement('caption');\n      const thead = document.createElement('thead');\n      const tbody = document.createElement('tbody');\n      const tfoot = document.createElement('tfoot');\n\n      scrollContainer.setAttribute('part', 'scroll');\n      table.setAttribute('part', 'table');\n      thead.setAttribute('part', 'head');\n      tbody.setAttribute('part', 'body');\n      tfoot.setAttribute('part', 'foot');\n      table.append(captionEl, thead, tbody, tfoot);\n      scrollContainer.appendChild(table);\n\n      // Reactively sync caption text and visibility from prop.\n      watch(() => {\n        const text = props.caption.value ?? '';\n\n        captionEl.textContent = text;\n        captionEl.hidden = text === '';\n      });\n\n      // Initial full build.\n      let cellMap = buildTable(el, thead, tbody, tfoot);\n\n      // Content observer: syncs text/attribute changes inside ore-th/ore-td.\n      // Remains connected throughout the component lifetime — no\n      // disconnect/reconnect during structural rebuilds. Records that arrive\n      // for cells no longer in cellMap (after a rebuild) are silently ignored\n      // by the `if (entry)` guard, so there is no correctness risk.\n      const contentObserver = new MutationObserver((records) => {\n        for (const rec of records) {\n          const sourceCell = (rec.target instanceof Element ? rec.target : rec.target.parentElement)?.closest(\n            'ore-th, ore-td',\n          );\n\n          if (sourceCell) {\n            const entry = cellMap.get(sourceCell);\n\n            if (entry) syncCell(sourceCell, entry.native, entry.inferredScope);\n          }\n        }\n      });\n\n      contentObserver.observe(el, {\n        // Include 'scope' in attributeFilter so explicit scope changes are picked\n        // up and the fallback-restore logic in syncCell runs correctly.\n        attributeFilter: [...CELL_ATTRS, 'scope'],\n        attributes: true,\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n\n      // Structure observer: triggers a full rebuild when ore-tr elements are\n      // added, removed, or reordered. Scoped to direct children only so it\n      // never fires for cell-level mutations.\n      const structureObserver = new MutationObserver(() => {\n        cellMap = buildTable(el, thead, tbody, tfoot);\n      });\n\n      structureObserver.observe(el, { childList: true });\n\n      return () => {\n        structureObserver.disconnect();\n        contentObserver.disconnect();\n      };\n    });\n\n    return html`\n      <div class=\"scroll-container\"></div>\n    `;\n  },\n\n  styles: [reducedMotionMixin, tableBaseMixin('table'), componentStyles],\n});\n"],"mappings":"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"}

package/dist/table.js

@@ -61,7 +61,7 @@ i(p, {
 			"aria-busy": e.loading,
 			"aria-label": e.caption
 		} }), s(() => {
-			let r = t.shadowRoot.querySelector(".scroll-container"), i = document.createElement("table"), a = document.createElement("caption"), o = document.createElement("thead"), s = document.createElement("tbody"), c = document.createElement("tfoot");
+			let r = t.shadowRoot?.querySelector(".scroll-container"), i = document.createElement("table"), a = document.createElement("caption"), o = document.createElement("thead"), s = document.createElement("tbody"), c = document.createElement("tfoot");
 			r.setAttribute("part", "scroll"), i.setAttribute("part", "table"), o.setAttribute("part", "head"), s.setAttribute("part", "body"), c.setAttribute("part", "foot"), i.append(a, o, s, c), r.appendChild(i), n(() => {
 				let t = e.caption.value ?? "";
 				a.textContent = t, a.hidden = t === "";

package/dist/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../src/content/table/table.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted, watchEffect } from '@vielzeug/ore';\n\nimport { reducedMotionMixin, tableBaseMixin } from '../../styles';\nimport componentStyles from './table.css?inline';\n\n/* ── Types ───────────────────────────────────────────────────────────────── */\n\n/** Table component properties */\nexport type OreTableProps = {\n  /** Adds a thicker outer border */\n  bordered?: boolean;\n  /** Visible caption text — also used as the accessible table label via `aria-label` */\n  caption?: string;\n  /** Cell density: `'compact'` | `'cozy'` (default) | `'comfortable'` */\n  density?: 'compact' | 'cozy' | 'comfortable';\n  /** Expands the table to 100% of its container width */\n  fullwidth?: boolean;\n  /** Applies a busy/disabled state with reduced opacity */\n  loading?: boolean;\n  /** Enables sticky column headers with a vertical scroll container */\n  sticky?: boolean;\n  /** Alternating row stripe backgrounds */\n  striped?: boolean;\n};\n\n/* ── Child element markers ───────────────────────────────────────────────── */\n// ore-tr, ore-th, ore-td are lightweight light-DOM markers.\n// ore-table reads them and constructs a fully-native shadow <table> so that\n// browser features that require real table elements (colspan/rowspan,\n// position:sticky on <thead>, table layout algorithm) all work correctly.\n// Attributes on ore-th/ore-td are mirrored to the generated native cells.\n\n/**\n * Light-DOM row marker consumed by `<ore-table>`.\n *\n * @element ore-tr\n * @attr {boolean} head - Places the row in the generated `<thead>` section\n * @attr {boolean} foot - Places the row in the generated `<tfoot>` section\n *\n * @example\n * ```html\n * <ore-table>\n *   <ore-tr head><ore-th>Name</ore-th><ore-th>Role</ore-th></ore-tr>\n *   <ore-tr><ore-td>Alice</ore-td><ore-td>Admin</ore-td></ore-tr>\n * </ore-table>\n * ```\n */\nif (!customElements.get('ore-tr')) customElements.define('ore-tr', class extends HTMLElement {});\n\n/**\n * Light-DOM header cell marker consumed by `<ore-table>`.\n *\n * @element ore-th\n * @attr {number} colspan  - Mirrors to native `<th colspan>`\n * @attr {number} rowspan  - Mirrors to native `<th rowspan>`\n * @attr {string} scope    - Mirrors to native `<th scope>`: 'col' | 'row' | 'colgroup' | 'rowgroup'\n * @attr {string} headers  - Mirrors to native `<th headers>`\n *\n * @example\n * ```html\n * <ore-tr head>\n *   <ore-th scope=\"col\">Name</ore-th>\n *   <ore-th scope=\"col\" colspan=\"2\">Address</ore-th>\n * </ore-tr>\n * ```\n */\nif (!customElements.get('ore-th')) customElements.define('ore-th', class extends HTMLElement {});\n\n/**\n * Light-DOM data cell marker consumed by `<ore-table>`.\n *\n * @element ore-td\n * @attr {number} colspan  - Mirrors to native `<td colspan>`\n * @attr {number} rowspan  - Mirrors to native `<td rowspan>`\n * @attr {string} headers  - Mirrors to native `<td headers>`\n *\n * @example\n * ```html\n * <ore-tr>\n *   <ore-td>Alice</ore-td>\n *   <ore-td colspan=\"2\">123 Main St, Springfield</ore-td>\n * </ore-tr>\n * ```\n */\nif (!customElements.get('ore-td')) customElements.define('ore-td', class extends HTMLElement {});\n\n/* ── Proxy/mirror helpers ────────────────────────────────────────────────── */\n\n// Attributes forwarded from ore-th/ore-td to the generated native cell.\n// scope is intentionally excluded — it requires fallback logic and is handled separately.\nconst CELL_ATTRS = ['colspan', 'rowspan', 'headers', 'abbr'];\n\n/**\n * Sync text content and tracked attributes from a light-DOM marker to its\n * native mirror. `fallbackScope` is applied when the source element carries no\n * explicit `scope` attribute, ensuring the auto-inferred value is always\n * present and is restored if an explicit override is later removed.\n */\nfunction syncCell(source: Element, native: HTMLTableCellElement, fallbackScope?: string): void {\n  if (source.childElementCount > 0) {\n    // Source has element children — deep-clone them into the native cell so\n    // components like ore-skeleton render correctly inside the shadow table.\n    // Guard: skip re-clone if the serialised content is identical to avoid\n    // redundant DOM work on every MutationObserver tick (e.g. 250+ cells\n    // of skeleton loaders all cloning on each attribute change).\n    const snapshot = source.innerHTML;\n\n    if (native.getAttribute('data-src-html') === snapshot) return;\n\n    native.setAttribute('data-src-html', snapshot);\n    native.textContent = '';\n\n    for (const child of source.childNodes) {\n      native.appendChild(child.cloneNode(true));\n    }\n  } else {\n    const text = source.textContent ?? '';\n\n    if (native.textContent !== text) native.textContent = text;\n  }\n\n  for (const attr of CELL_ATTRS) {\n    const val = source.getAttribute(attr);\n\n    if (val !== null) native.setAttribute(attr, val);\n    else native.removeAttribute(attr);\n  }\n\n  // scope: explicit attribute wins; otherwise restore the inferred fallback.\n  const explicitScope = source.getAttribute('scope');\n\n  if (explicitScope !== null) native.setAttribute('scope', explicitScope);\n  else if (fallbackScope) native.scope = fallbackScope;\n  else native.removeAttribute('scope');\n}\n\n/** Entry stored in the cell map: native mirror element + its inferred scope fallback. */\ntype CellEntry = { inferredScope: string | undefined; native: HTMLTableCellElement };\n\n/**\n * (Re)build the entire native shadow table from the current light-DOM markers.\n * Returns a WeakMap of source marker → CellEntry for targeted sync by the\n * content observer. Storing `inferredScope` per cell ensures that removing an\n * explicit `scope` attribute reverts to the auto-inferred value rather than\n * dropping it entirely.\n */\nfunction buildTable(\n  host: HTMLElement,\n  thead: HTMLTableSectionElement,\n  tbody: HTMLTableSectionElement,\n  tfoot: HTMLTableSectionElement,\n): WeakMap<Element, CellEntry> {\n  const cellMap = new WeakMap<Element, CellEntry>();\n\n  thead.textContent = '';\n  tbody.textContent = '';\n  tfoot.textContent = '';\n\n  for (const child of host.children) {\n    if (child.localName !== 'ore-tr') continue;\n\n    const section = child.hasAttribute('head') ? thead : child.hasAttribute('foot') ? tfoot : tbody;\n    const tr = document.createElement('tr');\n\n    for (const cell of child.children) {\n      if (cell.localName !== 'ore-th' && cell.localName !== 'ore-td') continue;\n\n      const isHeader = cell.localName === 'ore-th';\n      const native = document.createElement(isHeader ? 'th' : 'td');\n      // Auto-infer scope for <th> elements; undefined for <td>.\n      const inferredScope = isHeader ? (section === thead ? 'col' : 'row') : undefined;\n\n      native.setAttribute('part', section === tbody ? 'cell' : 'header-cell');\n      native.removeAttribute('data-src-html');\n      syncCell(cell, native, inferredScope);\n      cellMap.set(cell, { inferredScope, native });\n      tr.appendChild(native);\n    }\n\n    section.appendChild(tr);\n  }\n\n  return cellMap;\n}\n\n/**\n * Data table component.\n *\n * Reads light-DOM `<ore-tr>`/`<ore-th>`/`<ore-td>` markers and projects them\n * into a fully-native shadow `<table>`. Cell attributes (`colspan`, `rowspan`,\n * `scope`, etc.) are mirrored. Changes are observed and synced incrementally.\n *\n * Native table features — sticky headers, colspan/rowspan, the table layout\n * algorithm — all work because the shadow tree contains real table elements.\n *\n * @element ore-table\n *\n * @attr {boolean} bordered  - Thicker outer border\n * @attr {string}  caption   - Caption text shown above the table\n * @attr {boolean} fullwidth - Expands to 100% container width\n * @attr {boolean} loading   - Busy state: reduced opacity, no pointer events\n * @attr {string}  density   - Cell density: 'compact' | 'cozy' | 'comfortable' (default: 'cozy')\n * @attr {boolean} sticky    - Sticky `<thead>` with scroll container\n * @attr {boolean} striped   - Alternating row backgrounds\n *\n * @part scroll       - Scroll container that hosts the generated native table\n * @part table        - Generated native `<table>` element\n * @part head         - Generated native `<thead>` section\n * @part body         - Generated native `<tbody>` section\n * @part foot         - Generated native `<tfoot>` section\n * @part cell         - Every native `<td>` in `<tbody>` rows\n * @part header-cell  - Every native `<th>` / `<td>` in `<thead>` and `<tfoot>` rows\n *\n * @cssprop --table-bg                - Table background color\n * @cssprop --table-border-color      - Cell separator and outer border color\n * @cssprop --table-radius            - Corner radius of the table container\n * @cssprop --table-shadow            - Box shadow of the table container\n * @cssprop --table-header-bg         - Background of header and footer rows\n * @cssprop --table-accent            - Accent color for interactive states\n * @cssprop --table-row-hover-bg      - Row hover background\n * @cssprop --table-stripe-bg         - Even-row stripe background\n * @cssprop --table-cell-padding-x    - Cell horizontal padding\n * @cssprop --table-cell-padding-y    - Cell vertical padding\n * @cssprop --table-font-size         - Base font size for cells\n * @cssprop --table-sticky-max-height - Max height of the sticky scroll container\n * @cssprop --table-sticky-header-bg  - Background of sticky header cells\n * @cssprop --table-sticky-blur       - Backdrop blur applied to sticky headers\n *\n * @example\n * ```html\n * <ore-table caption=\"Top repositories\" striped bordered sticky>\n *   <ore-tr head>\n *     <ore-th>Repository</ore-th>\n *     <ore-th>Stars</ore-th>\n *   </ore-tr>\n *   <ore-tr>\n *     <ore-td>vielzeug/refine</ore-td>\n *     <ore-td>1 200</ore-td>\n *   </ore-tr>\n * </ore-table>\n * ```\n */\nexport const TABLE_TAG = 'ore-table' as const;\ndefine<OreTableProps>(TABLE_TAG, {\n  props: {\n    bordered: prop.bool(false),\n    caption: prop.string(),\n    density: prop.string<'compact' | 'cozy' | 'comfortable'>(),\n    fullwidth: prop.bool(false),\n    loading: prop.bool(false),\n    sticky: prop.bool(false),\n    striped: prop.bool(false),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        'aria-busy': props.loading,\n        'aria-label': props.caption,\n      },\n    });\n\n    // Build the native shadow table via DOM APIs (not innerHTML) to avoid\n    // HTML-parser foster-parenting, which ejects table section elements from\n    // their intended positions in the tree.\n    onMounted(() => {\n      const scrollContainer = el.shadowRoot!.querySelector('.scroll-container')!;\n\n      const table = document.createElement('table');\n      const captionEl = document.createElement('caption');\n      const thead = document.createElement('thead');\n      const tbody = document.createElement('tbody');\n      const tfoot = document.createElement('tfoot');\n\n      scrollContainer.setAttribute('part', 'scroll');\n      table.setAttribute('part', 'table');\n      thead.setAttribute('part', 'head');\n      tbody.setAttribute('part', 'body');\n      tfoot.setAttribute('part', 'foot');\n      table.append(captionEl, thead, tbody, tfoot);\n      scrollContainer.appendChild(table);\n\n      // Reactively sync caption text and visibility from prop.\n      watch(() => {\n        const text = props.caption.value ?? '';\n\n        captionEl.textContent = text;\n        captionEl.hidden = text === '';\n      });\n\n      // Initial full build.\n      let cellMap = buildTable(el, thead, tbody, tfoot);\n\n      // Content observer: syncs text/attribute changes inside ore-th/ore-td.\n      // Remains connected throughout the component lifetime — no\n      // disconnect/reconnect during structural rebuilds. Records that arrive\n      // for cells no longer in cellMap (after a rebuild) are silently ignored\n      // by the `if (entry)` guard, so there is no correctness risk.\n      const contentObserver = new MutationObserver((records) => {\n        for (const rec of records) {\n          const sourceCell = (rec.target instanceof Element ? rec.target : rec.target.parentElement)?.closest(\n            'ore-th, ore-td',\n          );\n\n          if (sourceCell) {\n            const entry = cellMap.get(sourceCell);\n\n            if (entry) syncCell(sourceCell, entry.native, entry.inferredScope);\n          }\n        }\n      });\n\n      contentObserver.observe(el, {\n        // Include 'scope' in attributeFilter so explicit scope changes are picked\n        // up and the fallback-restore logic in syncCell runs correctly.\n        attributeFilter: [...CELL_ATTRS, 'scope'],\n        attributes: true,\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n\n      // Structure observer: triggers a full rebuild when ore-tr elements are\n      // added, removed, or reordered. Scoped to direct children only so it\n      // never fires for cell-level mutations.\n      const structureObserver = new MutationObserver(() => {\n        cellMap = buildTable(el, thead, tbody, tfoot);\n      });\n\n      structureObserver.observe(el, { childList: true });\n\n      return () => {\n        structureObserver.disconnect();\n        contentObserver.disconnect();\n      };\n    });\n\n    return html`\n      <div class=\"scroll-container\"></div>\n    `;\n  },\n\n  styles: [reducedMotionMixin, tableBaseMixin('table'), componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"table.js","names":[],"sources":["../src/content/table/table.ts"],"sourcesContent":["import { bind, define, getHost, html, onMounted, prop, watchEffect } from '@vielzeug/ore';\n\nimport { reducedMotionMixin, tableBaseMixin } from '../../styles';\nimport componentStyles from './table.css?inline';\n\n/* ── Types ───────────────────────────────────────────────────────────────── */\n\n/** Table component properties */\nexport type OreTableProps = {\n  /** Adds a thicker outer border */\n  bordered?: boolean;\n  /** Visible caption text — also used as the accessible table label via `aria-label` */\n  caption?: string;\n  /** Cell density: `'compact'` | `'cozy'` (default) | `'comfortable'` */\n  density?: 'compact' | 'cozy' | 'comfortable';\n  /** Expands the table to 100% of its container width */\n  fullwidth?: boolean;\n  /** Applies a busy/disabled state with reduced opacity */\n  loading?: boolean;\n  /** Enables sticky column headers with a vertical scroll container */\n  sticky?: boolean;\n  /** Alternating row stripe backgrounds */\n  striped?: boolean;\n};\n\n/* ── Child element markers ───────────────────────────────────────────────── */\n// ore-tr, ore-th, ore-td are lightweight light-DOM markers.\n// ore-table reads them and constructs a fully-native shadow <table> so that\n// browser features that require real table elements (colspan/rowspan,\n// position:sticky on <thead>, table layout algorithm) all work correctly.\n// Attributes on ore-th/ore-td are mirrored to the generated native cells.\n\n/**\n * Light-DOM row marker consumed by `<ore-table>`.\n *\n * @element ore-tr\n * @attr {boolean} head - Places the row in the generated `<thead>` section\n * @attr {boolean} foot - Places the row in the generated `<tfoot>` section\n *\n * @example\n * ```html\n * <ore-table>\n *   <ore-tr head><ore-th>Name</ore-th><ore-th>Role</ore-th></ore-tr>\n *   <ore-tr><ore-td>Alice</ore-td><ore-td>Admin</ore-td></ore-tr>\n * </ore-table>\n * ```\n */\nif (!customElements.get('ore-tr')) customElements.define('ore-tr', class extends HTMLElement {});\n\n/**\n * Light-DOM header cell marker consumed by `<ore-table>`.\n *\n * @element ore-th\n * @attr {number} colspan  - Mirrors to native `<th colspan>`\n * @attr {number} rowspan  - Mirrors to native `<th rowspan>`\n * @attr {string} scope    - Mirrors to native `<th scope>`: 'col' | 'row' | 'colgroup' | 'rowgroup'\n * @attr {string} headers  - Mirrors to native `<th headers>`\n *\n * @example\n * ```html\n * <ore-tr head>\n *   <ore-th scope=\"col\">Name</ore-th>\n *   <ore-th scope=\"col\" colspan=\"2\">Address</ore-th>\n * </ore-tr>\n * ```\n */\nif (!customElements.get('ore-th')) customElements.define('ore-th', class extends HTMLElement {});\n\n/**\n * Light-DOM data cell marker consumed by `<ore-table>`.\n *\n * @element ore-td\n * @attr {number} colspan  - Mirrors to native `<td colspan>`\n * @attr {number} rowspan  - Mirrors to native `<td rowspan>`\n * @attr {string} headers  - Mirrors to native `<td headers>`\n *\n * @example\n * ```html\n * <ore-tr>\n *   <ore-td>Alice</ore-td>\n *   <ore-td colspan=\"2\">123 Main St, Springfield</ore-td>\n * </ore-tr>\n * ```\n */\nif (!customElements.get('ore-td')) customElements.define('ore-td', class extends HTMLElement {});\n\n/* ── Proxy/mirror helpers ────────────────────────────────────────────────── */\n\n// Attributes forwarded from ore-th/ore-td to the generated native cell.\n// scope is intentionally excluded — it requires fallback logic and is handled separately.\nconst CELL_ATTRS = ['colspan', 'rowspan', 'headers', 'abbr'];\n\n/**\n * Sync text content and tracked attributes from a light-DOM marker to its\n * native mirror. `fallbackScope` is applied when the source element carries no\n * explicit `scope` attribute, ensuring the auto-inferred value is always\n * present and is restored if an explicit override is later removed.\n */\nfunction syncCell(source: Element, native: HTMLTableCellElement, fallbackScope?: string): void {\n  if (source.childElementCount > 0) {\n    // Source has element children — deep-clone them into the native cell so\n    // components like ore-skeleton render correctly inside the shadow table.\n    // Guard: skip re-clone if the serialised content is identical to avoid\n    // redundant DOM work on every MutationObserver tick (e.g. 250+ cells\n    // of skeleton loaders all cloning on each attribute change).\n    const snapshot = source.innerHTML;\n\n    if (native.getAttribute('data-src-html') === snapshot) return;\n\n    native.setAttribute('data-src-html', snapshot);\n    native.textContent = '';\n\n    for (const child of source.childNodes) {\n      native.appendChild(child.cloneNode(true));\n    }\n  } else {\n    const text = source.textContent ?? '';\n\n    if (native.textContent !== text) native.textContent = text;\n  }\n\n  for (const attr of CELL_ATTRS) {\n    const val = source.getAttribute(attr);\n\n    if (val !== null) native.setAttribute(attr, val);\n    else native.removeAttribute(attr);\n  }\n\n  // scope: explicit attribute wins; otherwise restore the inferred fallback.\n  const explicitScope = source.getAttribute('scope');\n\n  if (explicitScope !== null) native.setAttribute('scope', explicitScope);\n  else if (fallbackScope) native.scope = fallbackScope;\n  else native.removeAttribute('scope');\n}\n\n/** Entry stored in the cell map: native mirror element + its inferred scope fallback. */\ntype CellEntry = { inferredScope: string | undefined; native: HTMLTableCellElement };\n\n/**\n * (Re)build the entire native shadow table from the current light-DOM markers.\n * Returns a WeakMap of source marker → CellEntry for targeted sync by the\n * content observer. Storing `inferredScope` per cell ensures that removing an\n * explicit `scope` attribute reverts to the auto-inferred value rather than\n * dropping it entirely.\n */\nfunction buildTable(\n  host: HTMLElement,\n  thead: HTMLTableSectionElement,\n  tbody: HTMLTableSectionElement,\n  tfoot: HTMLTableSectionElement,\n): WeakMap<Element, CellEntry> {\n  const cellMap = new WeakMap<Element, CellEntry>();\n\n  thead.textContent = '';\n  tbody.textContent = '';\n  tfoot.textContent = '';\n\n  for (const child of host.children) {\n    if (child.localName !== 'ore-tr') continue;\n\n    const section = child.hasAttribute('head') ? thead : child.hasAttribute('foot') ? tfoot : tbody;\n    const tr = document.createElement('tr');\n\n    for (const cell of child.children) {\n      if (cell.localName !== 'ore-th' && cell.localName !== 'ore-td') continue;\n\n      const isHeader = cell.localName === 'ore-th';\n      const native = document.createElement(isHeader ? 'th' : 'td');\n      // Auto-infer scope for <th> elements; undefined for <td>.\n      const inferredScope = isHeader ? (section === thead ? 'col' : 'row') : undefined;\n\n      native.setAttribute('part', section === tbody ? 'cell' : 'header-cell');\n      native.removeAttribute('data-src-html');\n      syncCell(cell, native, inferredScope);\n      cellMap.set(cell, { inferredScope, native });\n      tr.appendChild(native);\n    }\n\n    section.appendChild(tr);\n  }\n\n  return cellMap;\n}\n\n/**\n * Data table component.\n *\n * Reads light-DOM `<ore-tr>`/`<ore-th>`/`<ore-td>` markers and projects them\n * into a fully-native shadow `<table>`. Cell attributes (`colspan`, `rowspan`,\n * `scope`, etc.) are mirrored. Changes are observed and synced incrementally.\n *\n * Native table features — sticky headers, colspan/rowspan, the table layout\n * algorithm — all work because the shadow tree contains real table elements.\n *\n * @element ore-table\n *\n * @attr {boolean} bordered  - Thicker outer border\n * @attr {string}  caption   - Caption text shown above the table\n * @attr {boolean} fullwidth - Expands to 100% container width\n * @attr {boolean} loading   - Busy state: reduced opacity, no pointer events\n * @attr {string}  density   - Cell density: 'compact' | 'cozy' | 'comfortable' (default: 'cozy')\n * @attr {boolean} sticky    - Sticky `<thead>` with scroll container\n * @attr {boolean} striped   - Alternating row backgrounds\n *\n * @part scroll       - Scroll container that hosts the generated native table\n * @part table        - Generated native `<table>` element\n * @part head         - Generated native `<thead>` section\n * @part body         - Generated native `<tbody>` section\n * @part foot         - Generated native `<tfoot>` section\n * @part cell         - Every native `<td>` in `<tbody>` rows\n * @part header-cell  - Every native `<th>` / `<td>` in `<thead>` and `<tfoot>` rows\n *\n * @cssprop --table-bg                - Table background color\n * @cssprop --table-border-color      - Cell separator and outer border color\n * @cssprop --table-radius            - Corner radius of the table container\n * @cssprop --table-shadow            - Box shadow of the table container\n * @cssprop --table-header-bg         - Background of header and footer rows\n * @cssprop --table-accent            - Accent color for interactive states\n * @cssprop --table-row-hover-bg      - Row hover background\n * @cssprop --table-stripe-bg         - Even-row stripe background\n * @cssprop --table-cell-padding-x    - Cell horizontal padding\n * @cssprop --table-cell-padding-y    - Cell vertical padding\n * @cssprop --table-font-size         - Base font size for cells\n * @cssprop --table-sticky-max-height - Max height of the sticky scroll container\n * @cssprop --table-sticky-header-bg  - Background of sticky header cells\n * @cssprop --table-sticky-blur       - Backdrop blur applied to sticky headers\n *\n * @example\n * ```html\n * <ore-table caption=\"Top repositories\" striped bordered sticky>\n *   <ore-tr head>\n *     <ore-th>Repository</ore-th>\n *     <ore-th>Stars</ore-th>\n *   </ore-tr>\n *   <ore-tr>\n *     <ore-td>vielzeug/refine</ore-td>\n *     <ore-td>1 200</ore-td>\n *   </ore-tr>\n * </ore-table>\n * ```\n */\nexport const TABLE_TAG = 'ore-table' as const;\ndefine<OreTableProps>(TABLE_TAG, {\n  props: {\n    bordered: prop.bool(false),\n    caption: prop.string(),\n    density: prop.string<'compact' | 'cozy' | 'comfortable'>(),\n    fullwidth: prop.bool(false),\n    loading: prop.bool(false),\n    sticky: prop.bool(false),\n    striped: prop.bool(false),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        'aria-busy': props.loading,\n        'aria-label': props.caption,\n      },\n    });\n\n    // Build the native shadow table via DOM APIs (not innerHTML) to avoid\n    // HTML-parser foster-parenting, which ejects table section elements from\n    // their intended positions in the tree.\n    onMounted(() => {\n      const scrollContainer = el.shadowRoot?.querySelector('.scroll-container')!;\n\n      const table = document.createElement('table');\n      const captionEl = document.createElement('caption');\n      const thead = document.createElement('thead');\n      const tbody = document.createElement('tbody');\n      const tfoot = document.createElement('tfoot');\n\n      scrollContainer.setAttribute('part', 'scroll');\n      table.setAttribute('part', 'table');\n      thead.setAttribute('part', 'head');\n      tbody.setAttribute('part', 'body');\n      tfoot.setAttribute('part', 'foot');\n      table.append(captionEl, thead, tbody, tfoot);\n      scrollContainer.appendChild(table);\n\n      // Reactively sync caption text and visibility from prop.\n      watch(() => {\n        const text = props.caption.value ?? '';\n\n        captionEl.textContent = text;\n        captionEl.hidden = text === '';\n      });\n\n      // Initial full build.\n      let cellMap = buildTable(el, thead, tbody, tfoot);\n\n      // Content observer: syncs text/attribute changes inside ore-th/ore-td.\n      // Remains connected throughout the component lifetime — no\n      // disconnect/reconnect during structural rebuilds. Records that arrive\n      // for cells no longer in cellMap (after a rebuild) are silently ignored\n      // by the `if (entry)` guard, so there is no correctness risk.\n      const contentObserver = new MutationObserver((records) => {\n        for (const rec of records) {\n          const sourceCell = (rec.target instanceof Element ? rec.target : rec.target.parentElement)?.closest(\n            'ore-th, ore-td',\n          );\n\n          if (sourceCell) {\n            const entry = cellMap.get(sourceCell);\n\n            if (entry) syncCell(sourceCell, entry.native, entry.inferredScope);\n          }\n        }\n      });\n\n      contentObserver.observe(el, {\n        // Include 'scope' in attributeFilter so explicit scope changes are picked\n        // up and the fallback-restore logic in syncCell runs correctly.\n        attributeFilter: [...CELL_ATTRS, 'scope'],\n        attributes: true,\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n\n      // Structure observer: triggers a full rebuild when ore-tr elements are\n      // added, removed, or reordered. Scoped to direct children only so it\n      // never fires for cell-level mutations.\n      const structureObserver = new MutationObserver(() => {\n        cellMap = buildTable(el, thead, tbody, tfoot);\n      });\n\n      structureObserver.observe(el, { childList: true });\n\n      return () => {\n        structureObserver.disconnect();\n        contentObserver.disconnect();\n      };\n    });\n\n    return html`\n      <div class=\"scroll-container\"></div>\n    `;\n  },\n\n  styles: [reducedMotionMixin, tableBaseMixin('table'), componentStyles],\n});\n"],"mappings":";;;;AA+CK,eAAe,IAAI,QAAQ,KAAG,eAAe,OAAO,UAAU,cAAc,YAAY,CAAC,CAAC,GAmB1F,eAAe,IAAI,QAAQ,KAAG,eAAe,OAAO,UAAU,cAAc,YAAY,CAAC,CAAC,GAkB1F,eAAe,IAAI,QAAQ,KAAG,eAAe,OAAO,UAAU,cAAc,YAAY,CAAC,CAAC;AAM/F,IAAM,IAAa;CAAC;CAAW;CAAW;CAAW;AAAM;AAQ3D,SAAS,EAAS,GAAiB,GAA8B,GAA8B;CAC7F,IAAI,EAAO,oBAAoB,GAAG;EAMhC,IAAM,IAAW,EAAO;EAExB,IAAI,EAAO,aAAa,eAAe,MAAM,GAAU;EAGvD,AADA,EAAO,aAAa,iBAAiB,CAAQ,GAC7C,EAAO,cAAc;EAErB,KAAK,IAAM,KAAS,EAAO,YACzB,EAAO,YAAY,EAAM,UAAU,EAAI,CAAC;CAE5C,OAAO;EACL,IAAM,IAAO,EAAO,eAAe;EAEnC,AAAI,EAAO,gBAAgB,MAAM,EAAO,cAAc;CACxD;CAEA,KAAK,IAAM,KAAQ,GAAY;EAC7B,IAAM,IAAM,EAAO,aAAa,CAAI;EAEpC,AAAI,MAAQ,OACP,EAAO,gBAAgB,CAAI,IADd,EAAO,aAAa,GAAM,CAAG;CAEjD;CAGA,IAAM,IAAgB,EAAO,aAAa,OAAO;CAEjD,AAAI,MAAkB,OACb,IAAe,EAAO,QAAQ,IAClC,EAAO,gBAAgB,OAAO,IAFP,EAAO,aAAa,SAAS,CAAa;AAGxE;AAYA,SAAS,EACP,GACA,GACA,GACA,GAC6B;CAC7B,IAAM,oBAAU,IAAI,QAA4B;CAIhD,AAFA,EAAM,cAAc,IACpB,EAAM,cAAc,IACpB,EAAM,cAAc;CAEpB,KAAK,IAAM,KAAS,EAAK,UAAU;EACjC,IAAI,EAAM,cAAc,UAAU;EAElC,IAAM,IAAU,EAAM,aAAa,MAAM,IAAI,IAAQ,EAAM,aAAa,MAAM,IAAI,IAAQ,GACpF,IAAK,SAAS,cAAc,IAAI;EAEtC,KAAK,IAAM,KAAQ,EAAM,UAAU;GACjC,IAAI,EAAK,cAAc,YAAY,EAAK,cAAc,UAAU;GAEhE,IAAM,IAAW,EAAK,cAAc,UAC9B,IAAS,SAAS,cAAc,IAAW,OAAO,IAAI,GAEtD,IAAgB,IAAY,MAAY,IAAQ,QAAQ,QAAS,KAAA;GAMvE,AAJA,EAAO,aAAa,QAAQ,MAAY,IAAQ,SAAS,aAAa,GACtE,EAAO,gBAAgB,eAAe,GACtC,EAAS,GAAM,GAAQ,CAAa,GACpC,EAAQ,IAAI,GAAM;IAAE;IAAe;GAAO,CAAC,GAC3C,EAAG,YAAY,CAAM;EACvB;EAEA,EAAQ,YAAY,CAAE;CACxB;CAEA,OAAO;AACT;AA2DA,IAAa,IAAY;AACzB,EAAsB,GAAW;CAC/B,OAAO;EACL,UAAU,EAAK,KAAK,EAAK;EACzB,SAAS,EAAK,OAAO;EACrB,SAAS,EAAK,OAA2C;EACzD,WAAW,EAAK,KAAK,EAAK;EAC1B,SAAS,EAAK,KAAK,EAAK;EACxB,QAAQ,EAAK,KAAK,EAAK;EACvB,SAAS,EAAK,KAAK,EAAK;CAC1B;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ;EAoFd,OAlFA,EAAK,EACH,MAAM;GACJ,aAAa,EAAM;GACnB,cAAc,EAAM;EACtB,EACF,CAAC,GAKD,QAAgB;GACd,IAAM,IAAkB,EAAG,YAAY,cAAc,mBAAmB,GAElE,IAAQ,SAAS,cAAc,OAAO,GACtC,IAAY,SAAS,cAAc,SAAS,GAC5C,IAAQ,SAAS,cAAc,OAAO,GACtC,IAAQ,SAAS,cAAc,OAAO,GACtC,IAAQ,SAAS,cAAc,OAAO;GAW5C,AATA,EAAgB,aAAa,QAAQ,QAAQ,GAC7C,EAAM,aAAa,QAAQ,OAAO,GAClC,EAAM,aAAa,QAAQ,MAAM,GACjC,EAAM,aAAa,QAAQ,MAAM,GACjC,EAAM,aAAa,QAAQ,MAAM,GACjC,EAAM,OAAO,GAAW,GAAO,GAAO,CAAK,GAC3C,EAAgB,YAAY,CAAK,GAGjC,QAAY;IACV,IAAM,IAAO,EAAM,QAAQ,SAAS;IAGpC,AADA,EAAU,cAAc,GACxB,EAAU,SAAS,MAAS;GAC9B,CAAC;GAGD,IAAI,IAAU,EAAW,GAAI,GAAO,GAAO,CAAK,GAO1C,IAAkB,IAAI,kBAAkB,MAAY;IACxD,KAAK,IAAM,KAAO,GAAS;KACzB,IAAM,KAAc,EAAI,kBAAkB,UAAU,EAAI,SAAS,EAAI,OAAO,cAAA,EAAgB,QAC1F,gBACF;KAEA,IAAI,GAAY;MACd,IAAM,IAAQ,EAAQ,IAAI,CAAU;MAEpC,AAAI,KAAO,EAAS,GAAY,EAAM,QAAQ,EAAM,aAAa;KACnE;IACF;GACF,CAAC;GAED,EAAgB,QAAQ,GAAI;IAG1B,iBAAiB,CAAC,GAAG,GAAY,OAAO;IACxC,YAAY;IACZ,eAAe;IACf,WAAW;IACX,SAAS;GACX,CAAC;GAKD,IAAM,IAAoB,IAAI,uBAAuB;IACnD,IAAU,EAAW,GAAI,GAAO,GAAO,CAAK;GAC9C,CAAC;GAID,OAFA,EAAkB,QAAQ,GAAI,EAAE,WAAW,GAAK,CAAC,SAEpC;IAEX,AADA,EAAkB,WAAW,GAC7B,EAAgB,WAAW;GAC7B;EACF,CAAC,GAEM,CAAI;;;CAGb;CAEA,QAAQ;EAAC;EAAoB,EAAe,OAAO;EAAG;CAAe;AACvE,CAAC"}

package/dist/tabs.cjs

@@ -1,17 +1,17 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./core/keyboard.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/direction.cjs"),i=require("./core/nav.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./disclosure/tabs/tabs.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple"),l=require("@vielzeug/ripple/watch");var u=(0,s.createContext)(`TabsContext`),d=`ore-tabs`;(0,s.define)(d,{props:{...a.themableBundle,...a.sizableBundle,activation:s.prop.oneOf([`auto`,`manual`],`auto`),label:s.prop.string(),orientation:s.prop.oneOf([`horizontal`,`vertical`],`horizontal`),value:s.prop.string(),variant:s.prop.string()},setup(n){let a=(0,s.getHost)(),o=(0,s.useEmit)(),d=a.shadowRoot,f=(0,s.ref)(),p=(0,s.ref)(),m=(0,c.signal)(n.value.value),h=()=>n.activation.value===`manual`,g=()=>n.orientation.value===`vertical`;(0,s.bind)({attr:{value:()=>m.value??null}});let _=()=>[...a.querySelectorAll(`:scope > ore-tab-item[slot="tabs"]`)],v=()=>_().filter(e=>!e.hasAttribute(`disabled`)),y=e=>{e&&(e.shadowRoot?.querySelector(`[role="tab"]`)??e).focus()},b=(e,t=!1)=>{m.value=e,t&&e&&o(`change`,{value:e})},x=()=>{let e=_();if(e.length===0)return;let t=m.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;b(n,!1)};(0,l.watch)(n.value,e=>{m.value=e,x()});let S=i.createListControl({direction:()=>r.elementDirection(a),getItems:()=>v(),loop:!0,onNavigate:(e,t)=>{let n=v()[t];if(y(n),!h()){let e=n?.getAttribute(`value`);e&&b(e,!0)}},orientation:()=>g()?`vertical`:`both`,signal:e.lifecycleSignal(s.onCleanup)});(0,s.provide)(u,{color:n.color,orientation:(0,c.computed)(()=>n.orientation.value??`horizontal`),size:n.size,value:m,variant:n.variant});let C=e=>{let t=p.value,n=f.value;if(!t||!n||!e)return;let r=e.getBoundingClientRect(),i=n.getBoundingClientRect();if(g()){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)`}},w=()=>{let e=m.value;if(!e)return;let t=_().find(t=>t.getAttribute(`value`)===e);C(t)};(0,l.watch)(m,()=>{requestAnimationFrame(w)});let T=e=>{let t=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`ore-tab-item`);if(!t||t.hasAttribute(`disabled`)||t.closest(`ore-tabs`)!==a)return;let n=t.getAttribute(`value`);!n||n===m.value||b(n,!0)},E=t.createInteraction({disabled:(0,c.computed)(()=>!h()),onPress:()=>{let e=v().find(e=>e===document.activeElement||e.shadowRoot?.activeElement===document.activeElement)?.getAttribute(`value`);e&&e!==m.value&&b(e,!0)}});return(0,s.bind)({on:{click:T,keydown:e=>{let t=v();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`)===m.value),r=n?t.indexOf(n):-1;r>=0&&S.set(r),!S.handleKeydown(e)&&E.handleKeydown(e)}}}),(0,s.onMounted)(()=>{let e=()=>{x(),w()},t=d?.querySelector(`slot[name="tabs"]`);return t&&t.addEventListener(`slotchange`,e),e(),requestAnimationFrame(e),()=>{t&&t.removeEventListener(`slotchange`,e)}}),s.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/theme.css.cjs"),t=require("./core/keyboard.cjs"),n=require("./core/ore.cjs"),r=require("./core/direction.cjs"),i=require("./core/nav.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./disclosure/tabs/tabs.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");var l=(0,s.createContext)(`TabsContext`),u=`ore-tabs`;(0,s.define)(u,{props:{...a.themableBundle,...a.sizableBundle,activation:s.prop.oneOf([`auto`,`manual`],`auto`),label:s.prop.string(),orientation:s.prop.oneOf([`horizontal`,`vertical`],`horizontal`),value:s.prop.string(),variant:s.prop.string()},setup(e){let a=(0,s.getHost)(),o=(0,s.useEmit)(),u=a.shadowRoot,d=(0,s.ref)(),f=(0,s.ref)(),p=(0,c.signal)(e.value.value),m=()=>e.activation.value===`manual`,h=()=>e.orientation.value===`vertical`;(0,s.bind)({attr:{value:()=>p.value??null}});let g=()=>[...a.querySelectorAll(`:scope > ore-tab-item[slot="tabs"]`)],_=()=>g().filter(e=>!e.hasAttribute(`disabled`)),v=e=>{e&&(e.shadowRoot?.querySelector(`[role="tab"]`)??e).focus()},y=(e,t=!1)=>{p.value=e,t&&e&&o(`change`,{value:e})},b=()=>{let e=g();if(e.length===0)return;let t=p.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;y(n,!1)};(0,c.watch)(e.value,e=>{p.value=e,b()});let x=i.createListControl({direction:()=>r.elementDirection(a),getItems:()=>_(),loop:!0,onNavigate:(e,t)=>{let n=_()[t];if(v(n),!m()){let e=n?.getAttribute(`value`);e&&y(e,!0)}},orientation:()=>h()?`vertical`:`both`,signal:n.lifecycleSignal(s.onCleanup)});(0,s.provide)(l,{color:e.color,orientation:(0,c.computed)(()=>e.orientation.value??`horizontal`),size:e.size,value:p,variant:e.variant});let S=e=>{let t=f.value,n=d.value;if(!t||!n||!e)return;let r=e.getBoundingClientRect(),i=n.getBoundingClientRect();if(h()){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)`}},C=()=>{let e=p.value;if(!e)return;let t=g().find(t=>t.getAttribute(`value`)===e);S(t)};(0,c.watch)(p,()=>{requestAnimationFrame(C)});let w=e=>{let t=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`ore-tab-item`);if(!t||t.hasAttribute(`disabled`)||t.closest(`ore-tabs`)!==a)return;let n=t.getAttribute(`value`);!n||n===p.value||y(n,!0)},T=t.createInteraction({disabled:(0,c.computed)(()=>!m()),onPress:()=>{let e=_().find(e=>e===document.activeElement||e.shadowRoot?.activeElement===document.activeElement)?.getAttribute(`value`);e&&e!==p.value&&y(e,!0)}});return(0,s.bind)({on:{click:w,keydown:e=>{let t=_();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`)===p.value),r=n?t.indexOf(n):-1;r>=0&&x.set(r),!x.handleKeydown(e)&&T.handleKeydown(e)}}}),(0,s.onMounted)(()=>{let e=()=>{b(),C()},t=u?.querySelector(`slot[name="tabs"]`);return t&&t.addEventListener(`slotchange`,e),e(),requestAnimationFrame(e),()=>{t&&t.removeEventListener(`slotchange`,e)}}),s.html`
       <div class="tablist-wrapper">
         <div
           role="tablist"
-          ref="${f}"
+          ref="${d}"
           part="tablist"
-          aria-orientation="${n.orientation}"
-          aria-label="${n.label}">
+          aria-orientation="${e.orientation}"
+          aria-label="${e.label}">
           <slot name="tabs"></slot>
         </div>
-        <div class="indicator" ref="${p}" part="indicator"></div>
+        <div class="indicator" ref="${f}" part="indicator"></div>
       </div>
       <div class="panels" part="panels">
         <slot></slot>
       </div>
-    `},styles:[n.colorThemeMixin,o.default]}),exports.TABS_CTX=u,exports.TABS_TAG=d;
+    `},styles:[e.colorThemeMixin,o.default]}),exports.TABS_CTX=l,exports.TABS_TAG=u;
 //# sourceMappingURL=tabs.cjs.map