@vielzeug/buildit 2.0.0

package/dist/tab-item.js

@@ -0,0 +1,57 @@
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { colorThemeMixin as t, forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
+import "./styles/index.js";
+import { TABS_CTX as r } from "./tabs.js";
+import i from "./disclosure/tab-item/tab-item.css?inline.js";
+import { computed as a, defineComponent as o, effect as s, fire as c, html as l, inject as u, syncContextProps as d, typed as f } from "@vielzeug/craftit";
+//#region src/disclosure/tab-item/tab-item.ts
+var p = o({
+	props: {
+		active: f(!1),
+		color: f(void 0),
+		disabled: f(!1),
+		size: f(void 0),
+		value: f(""),
+		variant: f(void 0)
+	},
+	setup({ host: e, props: t }) {
+		let n = u(r, void 0);
+		d(n, t, [
+			"color",
+			"size",
+			"variant"
+		]);
+		let i = n ? a(() => !!n.value.value && n.value.value === t.value.value) : t.active;
+		return s(() => {
+			e.toggleAttribute("active", i.value);
+		}), l`
+      <button
+        role="tab"
+        type="button"
+        part="tab"
+        :id="${() => `tab-${t.value.value}`}"
+        :aria-selected=${a(() => String(i.value))}
+        :tabindex=${a(() => i.value ? "0" : "-1")}
+        :aria-disabled=${a(() => String(t.disabled.value))}
+        :aria-controls="${() => `tabpanel-${t.value.value}`}"
+        @click=${() => {
+			t.disabled.value || c.custom(e, "click", { detail: { value: t.value.value } });
+		}}>
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+      </button>
+    `;
+	},
+	styles: [
+		t,
+		n("button"),
+		e,
+		i
+	],
+	tag: "bit-tab-item"
+});
+//#endregion
+export { p as TAB_ITEM_TAG };
+
+//# sourceMappingURL=tab-item.js.map

package/dist/tab-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item.js","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { computed, defineComponent, effect, fire, html, typed, inject, syncContextProps } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type BitTabItemProps = {\n  /** Whether this tab is currently selected (set by bit-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from bit-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from bit-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a bit-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from bit-tabs) */\n  variant?: VisualVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `bit-tabs`.\n *\n * @element bit-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding bit-tab-panel value\n * @attr {boolean} active - Set by the parent bit-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 bit-tabs\n * @attr {string} color - Inherited from bit-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 * @example\n * ```html\n * <bit-tab-item slot=\"tabs\" value=\"overview\">Overview</bit-tab-item>\n * <bit-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</bit-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = defineComponent<BitTabItemProps>({\n  props: {\n    active: typed<boolean>(false),\n    color: typed<BitTabItemProps['color']>(undefined),\n    disabled: typed<boolean>(false),\n    size: typed<BitTabItemProps['size']>(undefined),\n    value: typed<string>(''),\n    variant: typed<BitTabItemProps['variant']>(undefined),\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n\n    syncContextProps(tabsCtx, props, ['color', 'size', 'variant']);\n\n    const isActive = tabsCtx\n      ? computed(() => !!tabsCtx.value.value && tabsCtx.value.value === props.value.value)\n      : props.active;\n\n    effect(() => {\n      host.toggleAttribute('active', isActive.value);\n    });\n\n    const ariaSelected = computed(() => String(isActive.value));\n    const tabIndex = computed(() => (isActive.value ? '0' : '-1'));\n    const handleClick = () => {\n      if (props.disabled.value) return;\n\n      fire.custom(host, 'click', {\n        detail: { value: props.value.value },\n      });\n    };\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        :id=\"${() => `tab-${props.value.value}`}\"\n        :aria-selected=${ariaSelected}\n        :tabindex=${tabIndex}\n        :aria-disabled=${computed(() => String(props.disabled.value))}\n        :aria-controls=\"${() => `tabpanel-${props.value.value}`}\"\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  tag: 'bit-tab-item',\n});\n"],"mappings":";;;;;;;AA6CA,IAAa,IAAe,EAAiC;CAC3D,OAAO;EACL,QAAQ,EAAe,GAAM;EAC7B,OAAO,EAAgC,KAAA,EAAU;EACjD,UAAU,EAAe,GAAM;EAC/B,MAAM,EAA+B,KAAA,EAAU;EAC/C,OAAO,EAAc,GAAG;EACxB,SAAS,EAAkC,KAAA,EAAU;EACtD;CACD,MAAM,EAAE,SAAM,YAAS;EACrB,IAAM,IAAU,EAAO,GAAU,KAAA,EAAU;AAE3C,IAAiB,GAAS,GAAO;GAAC;GAAS;GAAQ;GAAU,CAAC;EAE9D,IAAM,IAAW,IACb,QAAe,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,MAAM,GAClF,EAAM;AAgBV,SAdA,QAAa;AACX,KAAK,gBAAgB,UAAU,EAAS,MAAM;IAC9C,EAYK,CAAI;;;;;qBAKM,OAAO,EAAM,MAAM,QAAQ;yBAfvB,QAAe,OAAO,EAAS,MAAM,CAAC,CAgBzB;oBAfjB,QAAgB,EAAS,QAAQ,MAAM,KAAM,CAgBrC;yBACJ,QAAe,OAAO,EAAM,SAAS,MAAM,CAAC,CAAC;gCACtC,YAAY,EAAM,MAAM,QAAQ;uBAjBlC;AACpB,KAAM,SAAS,SAEnB,EAAK,OAAO,GAAM,SAAS,EACzB,QAAQ,EAAE,OAAO,EAAM,MAAM,OAAO,EACrC,CAAC;IAaqB;;;;;;;CAO3B,QAAQ;EAAC;EAAiB,EAAuB,SAAS;EAAE;EAAoB;EAAO;CACvF,KAAK;CACN,CAAC"}

package/dist/tab-panel.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./tabs.cjs`),n=require(`./disclosure/tab-panel/tab-panel.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({props:{active:(0,r.typed)(!1),lazy:(0,r.typed)(!1),padding:(0,r.typed)(`md`),value:(0,r.typed)(``)},setup({host:e,props:n}){let i=(0,r.inject)(t.TABS_CTX,void 0),a=i?(0,r.computed)(()=>!!i.value.value&&i.value.value===n.value.value):n.active,o=(0,r.computed)(()=>{let e={"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)`};return e[n.padding.value??`md`]??e.md}),s=(0,r.signal)(!1);(0,r.effect)(()=>{e.toggleAttribute(`active`,a.value),a.value&&(s.value=!0)});let c=(0,r.computed)(()=>!n.lazy.value||s.value);return r.html`
+      <div
+        class="panel"
+        part="panel"
+        role="tabpanel"
+        :id="${()=>`tabpanel-${n.value.value}`}"
+        :aria-labelledby="${()=>`tab-${n.value.value}`}"
+        :aria-hidden=${()=>String(!a.value)}
+        :style="${()=>`--tab-panel-padding: ${o.value}`}"
+        tabindex="0">
+        ${()=>c.value?r.html`<slot></slot>`:``}
+      </div>
+    `},styles:[e.reducedMotionMixin,n.default],tag:`bit-tab-panel`});exports.TAB_PANEL_TAG=i;
+//# sourceMappingURL=tab-panel.cjs.map

package/dist/tab-panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.cjs","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { computed, defineComponent, effect, html, typed, inject, signal } from '@vielzeug/craftit';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nexport type BitTabPanelProps = {\n  /** Active state (managed by bit-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 bit-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 bit-tab-panel\n *\n * @attr {string} value - Must match the corresponding bit-tab-item value\n * @attr {boolean} active - Toggled by the parent bit-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @example\n * ```html\n * <bit-tab-panel value=\"overview\"><p>Overview content here</p></bit-tab-panel>\n * <bit-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></bit-tab-panel>\n * <bit-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></bit-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = defineComponent<BitTabPanelProps>({\n  props: {\n    active: typed<boolean>(false),\n    lazy: typed<boolean>(false),\n    padding: typed<BitTabPanelProps['padding']>('md'),\n    value: typed<string>(''),\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n    const isActive = tabsCtx\n      ? computed(() => !!tabsCtx.value.value && tabsCtx.value.value === props.value.value)\n      : props.active;\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const paddingMap: 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      const key = props.padding.value ?? 'md';\n\n      return paddingMap[key] ?? paddingMap.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    effect(() => {\n      host.toggleAttribute('active', isActive.value);\n\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\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        :id=\"${() => `tabpanel-${props.value.value}`}\"\n        :aria-labelledby=\"${() => `tab-${props.value.value}`}\"\n        :aria-hidden=${() => String(!isActive.value)}\n        :style=\"${() => `--tab-panel-padding: ${paddingValue.value}`}\"\n        tabindex=\"0\">\n        ${() => (shouldRender.value ? html`<slot></slot>` : '')}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n  tag: 'bit-tab-panel',\n});\n"],"mappings":"wRAmCA,IAAa,GAAA,EAAA,EAAA,iBAAkD,CAC7D,MAAO,CACL,QAAA,EAAA,EAAA,OAAuB,GAAM,CAC7B,MAAA,EAAA,EAAA,OAAqB,GAAM,CAC3B,SAAA,EAAA,EAAA,OAA4C,KAAK,CACjD,OAAA,EAAA,EAAA,OAAqB,GAAG,CACzB,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAA,EAAA,EAAA,QAAiB,EAAA,SAAU,IAAA,GAAU,CACrC,EAAW,GAAA,EAAA,EAAA,cACE,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAM,CAClF,EAAM,OAEJ,GAAA,EAAA,EAAA,cAA8B,CAClC,IAAM,EAAqC,CACzC,MAAO,iBACP,GAAI,gBACJ,GAAI,gBACJ,KAAM,IACN,GAAI,gBACJ,GAAI,gBACJ,GAAI,gBACL,CAGD,OAAO,EAFK,EAAM,QAAQ,OAAS,OAET,EAAW,IACrC,CAEI,GAAA,EAAA,EAAA,QAAuB,GAAM,EAEnC,EAAA,EAAA,YAAa,CACX,EAAK,gBAAgB,SAAU,EAAS,MAAM,CAE1C,EAAS,QAAO,EAAc,MAAQ,KAC1C,CAGF,IAAM,GAAA,EAAA,EAAA,cAA8B,CAAC,EAAM,KAAK,OAAS,EAAc,MAAM,CAE7E,MAAO,GAAA,IAAI;;;;;mBAKM,YAAY,EAAM,MAAM,QAAQ;gCACnB,OAAO,EAAM,MAAM,QAAQ;2BAChC,OAAO,CAAC,EAAS,MAAM,CAAC;sBAC7B,wBAAwB,EAAa,QAAQ;;cAEpD,EAAa,MAAQ,EAAA,IAAI,gBAAkB,GAAI;;OAI9D,OAAQ,CAAC,EAAA,mBAAoB,EAAA,QAAO,CACpC,IAAK,gBACN,CAAC"}

package/dist/tab-panel.js

@@ -0,0 +1,51 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import "./styles/index.js";
+import { TABS_CTX as t } from "./tabs.js";
+import n from "./disclosure/tab-panel/tab-panel.css?inline.js";
+import { computed as r, defineComponent as i, effect as a, html as o, inject as s, signal as c, typed as l } from "@vielzeug/craftit";
+//#region src/disclosure/tab-panel/tab-panel.ts
+var u = i({
+	props: {
+		active: l(!1),
+		lazy: l(!1),
+		padding: l("md"),
+		value: l("")
+	},
+	setup({ host: e, props: n }) {
+		let i = s(t, void 0), l = i ? r(() => !!i.value.value && i.value.value === n.value.value) : n.active, u = r(() => {
+			let e = {
+				"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)"
+			};
+			return e[n.padding.value ?? "md"] ?? e.md;
+		}), d = c(!1);
+		a(() => {
+			e.toggleAttribute("active", l.value), l.value && (d.value = !0);
+		});
+		let f = r(() => !n.lazy.value || d.value);
+		return o`
+      <div
+        class="panel"
+        part="panel"
+        role="tabpanel"
+        :id="${() => `tabpanel-${n.value.value}`}"
+        :aria-labelledby="${() => `tab-${n.value.value}`}"
+        :aria-hidden=${() => String(!l.value)}
+        :style="${() => `--tab-panel-padding: ${u.value}`}"
+        tabindex="0">
+        ${() => f.value ? o`<slot></slot>` : ""}
+      </div>
+    `;
+	},
+	styles: [e, n],
+	tag: "bit-tab-panel"
+});
+//#endregion
+export { u as TAB_PANEL_TAG };
+
+//# sourceMappingURL=tab-panel.js.map

package/dist/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { computed, defineComponent, effect, html, typed, inject, signal } from '@vielzeug/craftit';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nexport type BitTabPanelProps = {\n  /** Active state (managed by bit-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 bit-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 bit-tab-panel\n *\n * @attr {string} value - Must match the corresponding bit-tab-item value\n * @attr {boolean} active - Toggled by the parent bit-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @example\n * ```html\n * <bit-tab-panel value=\"overview\"><p>Overview content here</p></bit-tab-panel>\n * <bit-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></bit-tab-panel>\n * <bit-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></bit-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = defineComponent<BitTabPanelProps>({\n  props: {\n    active: typed<boolean>(false),\n    lazy: typed<boolean>(false),\n    padding: typed<BitTabPanelProps['padding']>('md'),\n    value: typed<string>(''),\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n    const isActive = tabsCtx\n      ? computed(() => !!tabsCtx.value.value && tabsCtx.value.value === props.value.value)\n      : props.active;\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const paddingMap: 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      const key = props.padding.value ?? 'md';\n\n      return paddingMap[key] ?? paddingMap.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    effect(() => {\n      host.toggleAttribute('active', isActive.value);\n\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\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        :id=\"${() => `tabpanel-${props.value.value}`}\"\n        :aria-labelledby=\"${() => `tab-${props.value.value}`}\"\n        :aria-hidden=${() => String(!isActive.value)}\n        :style=\"${() => `--tab-panel-padding: ${paddingValue.value}`}\"\n        tabindex=\"0\">\n        ${() => (shouldRender.value ? html`<slot></slot>` : '')}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n  tag: 'bit-tab-panel',\n});\n"],"mappings":";;;;;;AAmCA,IAAa,IAAgB,EAAkC;CAC7D,OAAO;EACL,QAAQ,EAAe,GAAM;EAC7B,MAAM,EAAe,GAAM;EAC3B,SAAS,EAAmC,KAAK;EACjD,OAAO,EAAc,GAAG;EACzB;CACD,MAAM,EAAE,SAAM,YAAS;EACrB,IAAM,IAAU,EAAO,GAAU,KAAA,EAAU,EACrC,IAAW,IACb,QAAe,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,MAAM,GAClF,EAAM,QAEJ,IAAe,QAAe;GAClC,IAAM,IAAqC;IACzC,OAAO;IACP,IAAI;IACJ,IAAI;IACJ,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,IAAI;IACL;AAGD,UAAO,EAFK,EAAM,QAAQ,SAAS,SAET,EAAW;IACrC,EAEI,IAAgB,EAAO,GAAM;AAEnC,UAAa;AAGX,GAFA,EAAK,gBAAgB,UAAU,EAAS,MAAM,EAE1C,EAAS,UAAO,EAAc,QAAQ;IAC1C;EAGF,IAAM,IAAe,QAAe,CAAC,EAAM,KAAK,SAAS,EAAc,MAAM;AAE7E,SAAO,CAAI;;;;;qBAKM,YAAY,EAAM,MAAM,QAAQ;kCACnB,OAAO,EAAM,MAAM,QAAQ;6BAChC,OAAO,CAAC,EAAS,MAAM,CAAC;wBAC7B,wBAAwB,EAAa,QAAQ;;gBAEpD,EAAa,QAAQ,CAAI,kBAAkB,GAAI;;;;CAI9D,QAAQ,CAAC,GAAoB,EAAO;CACpC,KAAK;CACN,CAAC"}

package/dist/table.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./content/table/table.css?inline.cjs`);let r=require(`@vielzeug/craftit`);customElements.get(`bit-tr`)||customElements.define(`bit-tr`,class extends HTMLElement{}),customElements.get(`bit-th`)||customElements.define(`bit-th`,class extends HTMLElement{}),customElements.get(`bit-td`)||customElements.define(`bit-td`,class extends HTMLElement{});var i=`bit-tr`,a=`bit-th`,o=`bit-td`,s=[`colspan`,`rowspan`,`scope`,`headers`,`abbr`,`axis`,`align`,`valign`,`width`];function c(e,t,n,r){let i=[];t.textContent=``,n.textContent=``,r.textContent=``;function a(e,t){let n=e.localName===`bit-th`,r=document.createElement(n?`th`:`td`);for(let t of s){let n=e.getAttribute(t);n!==null&&r.setAttribute(t,n)}r.textContent=e.textContent??``;let a=new MutationObserver(()=>{r.textContent=e.textContent??``;for(let t of s){let n=e.getAttribute(t);n===null?r.removeAttribute(t):r.setAttribute(t,n)}});return a.observe(e,{attributes:!0,characterData:!0,childList:!0,subtree:!0}),i.push(a),t.appendChild(r),r}function o(e,t){let n=document.createElement(`tr`);for(let t of e.children)(t.localName===`bit-th`||t.localName===`bit-td`)&&a(t,n);t.appendChild(n)}for(let i of e.children)i.localName===`bit-tr`&&(i.hasAttribute(`head`)?o(i,t):i.hasAttribute(`foot`)?o(i,r):o(i,n));return()=>{for(let e of i)e.disconnect()}}var l=(0,r.defineComponent)({props:{bordered:{default:!1,type:Boolean},caption:{default:void 0},color:{default:void 0},loading:{default:!1,type:Boolean},size:{default:void 0},sticky:{default:!1,type:Boolean},striped:{default:!1,type:Boolean}},setup({host:e,props:t}){return(0,r.aria)({busy:()=>t.loading.value,label:()=>t.caption.value??null}),(0,r.onMount)(()=>{let n=e.shadowRoot.querySelector(`.scroll-container`),i=document.createElement(`table`),a=document.createElement(`caption`),o=document.createElement(`thead`),s=document.createElement(`tbody`),l=document.createElement(`tfoot`);n.setAttribute(`part`,`scroll`),i.setAttribute(`part`,`table`),o.setAttribute(`part`,`head`),s.setAttribute(`part`,`body`),l.setAttribute(`part`,`foot`),i.append(a,o,s,l),n.appendChild(i),(0,r.effect)(()=>{a.hidden=!(a.textContent=t.caption.value??``)});let u=c(e,o,s,l),d=new MutationObserver(()=>{u(),u=c(e,o,s,l)});return d.observe(e,{childList:!0}),()=>{d.disconnect(),u()}}),r.html`<div class="scroll-container"></div>`},styles:[t.colorThemeMixin,e.reducedMotionMixin,n.default],tag:`bit-table`});exports.TABLE_TAG=l,exports.TD_TAG=o,exports.TH_TAG=a,exports.TR_TAG=i;
+//# sourceMappingURL=table.cjs.map

package/dist/table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.cjs","names":[],"sources":["../src/content/table/table.ts"],"sourcesContent":["import { aria, defineComponent, effect, html, onMount } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './table.css?inline';\n\n/* ── Types ───────────────────────────────────────────────────────────────── */\n\n/** Table component properties */\nexport type BitTableProps = {\n  /** Show borders between rows and around the table */\n  bordered?: boolean;\n  /** Visible caption text — also used as accessible label for the table group */\n  caption?: string;\n  /** Theme color applied to the header row background */\n  color?: ThemeColor;\n  /** Show a loading / busy state */\n  loading?: boolean;\n  /** Component size: 'sm' | 'md' | 'lg' */\n  size?: ComponentSize;\n  /** Stick the header row to the top while the body scrolls */\n  sticky?: boolean;\n  /** Alternating row stripe background */\n  striped?: boolean;\n};\n\n/* ── Sub-components (no shadow DOM) ─────────────────────────────────────── */\n\n// bit-tr, bit-th, bit-td are lightweight markers in the light DOM.\n// bit-table reads them and builds a fully-native shadow <table> so that\n// browser features that only work on real table elements (colspan/rowspan,\n// position:sticky on <th>, table layout algorithm) all work correctly.\n\nif (!customElements.get('bit-tr')) customElements.define('bit-tr', class extends HTMLElement {});\n\nif (!customElements.get('bit-th')) customElements.define('bit-th', class extends HTMLElement {});\n\nif (!customElements.get('bit-td')) customElements.define('bit-td', class extends HTMLElement {});\n\nexport const TR_TAG = 'bit-tr';\nexport const TH_TAG = 'bit-th';\nexport const TD_TAG = 'bit-td';\n\n/* ── Table proxy helpers ─────────────────────────────────────────────────── */\n\n// Attributes on bit-th / bit-td that should be forwarded to the native cell.\nconst CELL_ATTRS = ['colspan', 'rowspan', 'scope', 'headers', 'abbr', 'axis', 'align', 'valign', 'width'];\n\n/**\n * Build (or rebuild) the entire native shadow table from the current light-DOM\n * bit-tr / bit-th / bit-td structure.  Returns a cleanup function that\n * disconnects all MutationObservers created during the build.\n */\nfunction buildTable(\n  host: HTMLElement,\n  thead: HTMLTableSectionElement,\n  tbody: HTMLTableSectionElement,\n  tfoot: HTMLTableSectionElement,\n): () => void {\n  const observers: MutationObserver[] = [];\n\n  // Clear all sections first\n  thead.textContent = '';\n  tbody.textContent = '';\n  tfoot.textContent = '';\n\n  /**\n   * Mirror one bit-td / bit-th → native td / th, keeping text content and\n   * relevant attributes in sync via a MutationObserver.\n   */\n  function mirrorCell(source: Element, into: HTMLTableSectionElement | HTMLTableRowElement): HTMLTableCellElement {\n    const isHeader = source.localName === 'bit-th';\n    const cell = document.createElement(isHeader ? 'th' : 'td');\n\n    // Forward allowed attributes\n    for (const attr of CELL_ATTRS) {\n      const val = source.getAttribute(attr);\n\n      if (val !== null) cell.setAttribute(attr, val);\n    }\n\n    cell.textContent = source.textContent ?? '';\n\n    // Keep text + attrs in sync\n    const obs = new MutationObserver(() => {\n      cell.textContent = source.textContent ?? '';\n      for (const attr of CELL_ATTRS) {\n        const val = source.getAttribute(attr);\n\n        if (val !== null) cell.setAttribute(attr, val);\n        else cell.removeAttribute(attr);\n      }\n    });\n\n    obs.observe(source, { attributes: true, characterData: true, childList: true, subtree: true });\n    observers.push(obs);\n\n    into.appendChild(cell);\n\n    return cell;\n  }\n\n  /**\n   * Mirror one bit-tr → native tr with all its cells.\n   */\n  function mirrorRow(source: Element, section: HTMLTableSectionElement): void {\n    const tr = document.createElement('tr');\n\n    for (const child of source.children) {\n      if (child.localName === 'bit-th' || child.localName === 'bit-td') {\n        mirrorCell(child, tr);\n      }\n    }\n    section.appendChild(tr);\n  }\n\n  // Walk all direct children of bit-table\n  for (const child of host.children) {\n    if (child.localName !== 'bit-tr') continue;\n\n    if (child.hasAttribute('head')) {\n      mirrorRow(child, thead);\n    } else if (child.hasAttribute('foot')) {\n      mirrorRow(child, tfoot);\n    } else {\n      mirrorRow(child, tbody);\n    }\n  }\n\n  return () => {\n    for (const obs of observers) obs.disconnect();\n  };\n}\n\n/**\n * Accessible data table. Compose with `<bit-tr>`, `<bit-th>`, and `<bit-td>`.\n * Add `head` to header rows and `foot` to footer rows.\n *\n * @element bit-table\n *\n * @attr {string}  caption  - Visible caption and accessible label\n * @attr {string}  color    - Header theme: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} bordered - Outer border and radius\n * @attr {boolean} loading  - Busy / loading state\n * @attr {string}  size     - Size variant: 'sm' | 'md' | 'lg'\n * @attr {boolean} sticky   - Stick header cells during vertical scroll\n * @attr {boolean} striped  - Alternating row backgrounds\n *\n * @part scroll - Horizontally-scrollable container\n * @part table  - The native `<table>` element\n * @part head   - The native `<thead>` element\n * @part body   - The native `<tbody>` element\n * @part foot   - The native `<tfoot>` element\n *\n * @cssprop --table-bg                  - Table background\n * @cssprop --table-border              - Full border shorthand for row separators (e.g. `2px solid red`)\n * @cssprop --table-header-bg           - Header row background\n * @cssprop --table-header-color        - Header cell text color\n * @cssprop --table-cell-padding        - Cell padding (e.g. `0.75rem 1rem`)\n * @cssprop --table-cell-font-size      - Cell font size\n * @cssprop --table-cell-color          - Body cell text color\n * @cssprop --table-stripe-bg           - Stripe row background\n * @cssprop --table-row-hover-bg        - Row hover background\n * @cssprop --table-radius              - Outer corner radius\n * @cssprop --table-shadow              - Outer box shadow\n * @cssprop --table-sticky-max-height   - Max height when `sticky` is active (default `24rem`)\n *\n * @example\n * ```html\n * <bit-table caption=\"Members\" striped bordered color=\"primary\">\n *   <bit-tr head>\n *     <bit-th scope=\"col\">Name</bit-th>\n *     <bit-th scope=\"col\">Role</bit-th>\n *   </bit-tr>\n *   <bit-tr><bit-td>Alice</bit-td><bit-td>Admin</bit-td></bit-tr>\n *   <bit-tr><bit-td>Bob</bit-td><bit-td>Editor</bit-td></bit-tr>\n *   <bit-tr foot><bit-td colspan=\"2\">2 members</bit-td></bit-tr>\n * </bit-table>\n * ```\n */\nexport const TABLE_TAG = defineComponent<BitTableProps>({\n  props: {\n    bordered: { default: false, type: Boolean },\n    caption: { default: undefined },\n    color: { default: undefined },\n    loading: { default: false, type: Boolean },\n    size: { default: undefined },\n    sticky: { default: false, type: Boolean },\n    striped: { default: false, type: Boolean },\n  },\n  setup({ host, props }) {\n    aria({\n      busy: () => props.loading.value,\n      label: () => props.caption.value ?? null,\n    });\n    // Build the fully-native shadow table via DOM APIs (not innerHTML) to avoid\n    // HTML-parser foster-parenting which would eject <slot> elements from table\n    // contexts.  All three issues — color themes, sticky headers, colspan —\n    // require real <thead>/<tbody>/<tfoot>/<tr>/<th>/<td> in the shadow tree.\n    onMount(() => {\n      const scrollContainer = host.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      // Keep part assignment imperative so template typing stays strict.\n      scrollContainer.setAttribute('part', 'scroll');\n\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      // Sync caption text from prop\n      effect(() => {\n        captionEl.hidden = !(captionEl.textContent = props.caption.value ?? '');\n      });\n\n      // Initial build\n      let cleanupCellObservers = buildTable(host, thead, tbody, tfoot);\n      // Rebuild whenever direct children change (rows added / removed / reordered)\n      const structureObserver = new MutationObserver(() => {\n        cleanupCellObservers();\n        cleanupCellObservers = buildTable(host, thead, tbody, tfoot);\n      });\n\n      structureObserver.observe(host, { childList: true });\n\n      return () => {\n        structureObserver.disconnect();\n        cleanupCellObservers();\n      };\n    });\n\n    return html`<div class=\"scroll-container\"></div>`;\n  },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n  tag: 'bit-table',\n});\n"],"mappings":"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"}

package/dist/table.js

@@ -0,0 +1,101 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { colorThemeMixin as t } from "./styles/mixins/theme.css.js";
+import "./styles/index.js";
+import n from "./content/table/table.css?inline.js";
+import { aria as r, defineComponent as i, effect as a, html as o, onMount as s } from "@vielzeug/craftit";
+customElements.get("bit-tr") || customElements.define("bit-tr", class extends HTMLElement {}), customElements.get("bit-th") || customElements.define("bit-th", class extends HTMLElement {}), customElements.get("bit-td") || customElements.define("bit-td", class extends HTMLElement {});
+var c = "bit-tr", l = "bit-th", u = "bit-td", d = [
+	"colspan",
+	"rowspan",
+	"scope",
+	"headers",
+	"abbr",
+	"axis",
+	"align",
+	"valign",
+	"width"
+];
+function f(e, t, n, r) {
+	let i = [];
+	t.textContent = "", n.textContent = "", r.textContent = "";
+	function a(e, t) {
+		let n = e.localName === "bit-th", r = document.createElement(n ? "th" : "td");
+		for (let t of d) {
+			let n = e.getAttribute(t);
+			n !== null && r.setAttribute(t, n);
+		}
+		r.textContent = e.textContent ?? "";
+		let a = new MutationObserver(() => {
+			r.textContent = e.textContent ?? "";
+			for (let t of d) {
+				let n = e.getAttribute(t);
+				n === null ? r.removeAttribute(t) : r.setAttribute(t, n);
+			}
+		});
+		return a.observe(e, {
+			attributes: !0,
+			characterData: !0,
+			childList: !0,
+			subtree: !0
+		}), i.push(a), t.appendChild(r), r;
+	}
+	function o(e, t) {
+		let n = document.createElement("tr");
+		for (let t of e.children) (t.localName === "bit-th" || t.localName === "bit-td") && a(t, n);
+		t.appendChild(n);
+	}
+	for (let i of e.children) i.localName === "bit-tr" && (i.hasAttribute("head") ? o(i, t) : i.hasAttribute("foot") ? o(i, r) : o(i, n));
+	return () => {
+		for (let e of i) e.disconnect();
+	};
+}
+var p = i({
+	props: {
+		bordered: {
+			default: !1,
+			type: Boolean
+		},
+		caption: { default: void 0 },
+		color: { default: void 0 },
+		loading: {
+			default: !1,
+			type: Boolean
+		},
+		size: { default: void 0 },
+		sticky: {
+			default: !1,
+			type: Boolean
+		},
+		striped: {
+			default: !1,
+			type: Boolean
+		}
+	},
+	setup({ host: e, props: t }) {
+		return r({
+			busy: () => t.loading.value,
+			label: () => t.caption.value ?? null
+		}), s(() => {
+			let n = e.shadowRoot.querySelector(".scroll-container"), r = document.createElement("table"), i = document.createElement("caption"), o = document.createElement("thead"), s = document.createElement("tbody"), c = document.createElement("tfoot");
+			n.setAttribute("part", "scroll"), r.setAttribute("part", "table"), o.setAttribute("part", "head"), s.setAttribute("part", "body"), c.setAttribute("part", "foot"), r.append(i, o, s, c), n.appendChild(r), a(() => {
+				i.hidden = !(i.textContent = t.caption.value ?? "");
+			});
+			let l = f(e, o, s, c), u = new MutationObserver(() => {
+				l(), l = f(e, o, s, c);
+			});
+			return u.observe(e, { childList: !0 }), () => {
+				u.disconnect(), l();
+			};
+		}), o`<div class="scroll-container"></div>`;
+	},
+	styles: [
+		t,
+		e,
+		n
+	],
+	tag: "bit-table"
+});
+//#endregion
+export { p as TABLE_TAG, u as TD_TAG, l as TH_TAG, c as TR_TAG };
+
+//# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../src/content/table/table.ts"],"sourcesContent":["import { aria, defineComponent, effect, html, onMount } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './table.css?inline';\n\n/* ── Types ───────────────────────────────────────────────────────────────── */\n\n/** Table component properties */\nexport type BitTableProps = {\n  /** Show borders between rows and around the table */\n  bordered?: boolean;\n  /** Visible caption text — also used as accessible label for the table group */\n  caption?: string;\n  /** Theme color applied to the header row background */\n  color?: ThemeColor;\n  /** Show a loading / busy state */\n  loading?: boolean;\n  /** Component size: 'sm' | 'md' | 'lg' */\n  size?: ComponentSize;\n  /** Stick the header row to the top while the body scrolls */\n  sticky?: boolean;\n  /** Alternating row stripe background */\n  striped?: boolean;\n};\n\n/* ── Sub-components (no shadow DOM) ─────────────────────────────────────── */\n\n// bit-tr, bit-th, bit-td are lightweight markers in the light DOM.\n// bit-table reads them and builds a fully-native shadow <table> so that\n// browser features that only work on real table elements (colspan/rowspan,\n// position:sticky on <th>, table layout algorithm) all work correctly.\n\nif (!customElements.get('bit-tr')) customElements.define('bit-tr', class extends HTMLElement {});\n\nif (!customElements.get('bit-th')) customElements.define('bit-th', class extends HTMLElement {});\n\nif (!customElements.get('bit-td')) customElements.define('bit-td', class extends HTMLElement {});\n\nexport const TR_TAG = 'bit-tr';\nexport const TH_TAG = 'bit-th';\nexport const TD_TAG = 'bit-td';\n\n/* ── Table proxy helpers ─────────────────────────────────────────────────── */\n\n// Attributes on bit-th / bit-td that should be forwarded to the native cell.\nconst CELL_ATTRS = ['colspan', 'rowspan', 'scope', 'headers', 'abbr', 'axis', 'align', 'valign', 'width'];\n\n/**\n * Build (or rebuild) the entire native shadow table from the current light-DOM\n * bit-tr / bit-th / bit-td structure.  Returns a cleanup function that\n * disconnects all MutationObservers created during the build.\n */\nfunction buildTable(\n  host: HTMLElement,\n  thead: HTMLTableSectionElement,\n  tbody: HTMLTableSectionElement,\n  tfoot: HTMLTableSectionElement,\n): () => void {\n  const observers: MutationObserver[] = [];\n\n  // Clear all sections first\n  thead.textContent = '';\n  tbody.textContent = '';\n  tfoot.textContent = '';\n\n  /**\n   * Mirror one bit-td / bit-th → native td / th, keeping text content and\n   * relevant attributes in sync via a MutationObserver.\n   */\n  function mirrorCell(source: Element, into: HTMLTableSectionElement | HTMLTableRowElement): HTMLTableCellElement {\n    const isHeader = source.localName === 'bit-th';\n    const cell = document.createElement(isHeader ? 'th' : 'td');\n\n    // Forward allowed attributes\n    for (const attr of CELL_ATTRS) {\n      const val = source.getAttribute(attr);\n\n      if (val !== null) cell.setAttribute(attr, val);\n    }\n\n    cell.textContent = source.textContent ?? '';\n\n    // Keep text + attrs in sync\n    const obs = new MutationObserver(() => {\n      cell.textContent = source.textContent ?? '';\n      for (const attr of CELL_ATTRS) {\n        const val = source.getAttribute(attr);\n\n        if (val !== null) cell.setAttribute(attr, val);\n        else cell.removeAttribute(attr);\n      }\n    });\n\n    obs.observe(source, { attributes: true, characterData: true, childList: true, subtree: true });\n    observers.push(obs);\n\n    into.appendChild(cell);\n\n    return cell;\n  }\n\n  /**\n   * Mirror one bit-tr → native tr with all its cells.\n   */\n  function mirrorRow(source: Element, section: HTMLTableSectionElement): void {\n    const tr = document.createElement('tr');\n\n    for (const child of source.children) {\n      if (child.localName === 'bit-th' || child.localName === 'bit-td') {\n        mirrorCell(child, tr);\n      }\n    }\n    section.appendChild(tr);\n  }\n\n  // Walk all direct children of bit-table\n  for (const child of host.children) {\n    if (child.localName !== 'bit-tr') continue;\n\n    if (child.hasAttribute('head')) {\n      mirrorRow(child, thead);\n    } else if (child.hasAttribute('foot')) {\n      mirrorRow(child, tfoot);\n    } else {\n      mirrorRow(child, tbody);\n    }\n  }\n\n  return () => {\n    for (const obs of observers) obs.disconnect();\n  };\n}\n\n/**\n * Accessible data table. Compose with `<bit-tr>`, `<bit-th>`, and `<bit-td>`.\n * Add `head` to header rows and `foot` to footer rows.\n *\n * @element bit-table\n *\n * @attr {string}  caption  - Visible caption and accessible label\n * @attr {string}  color    - Header theme: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} bordered - Outer border and radius\n * @attr {boolean} loading  - Busy / loading state\n * @attr {string}  size     - Size variant: 'sm' | 'md' | 'lg'\n * @attr {boolean} sticky   - Stick header cells during vertical scroll\n * @attr {boolean} striped  - Alternating row backgrounds\n *\n * @part scroll - Horizontally-scrollable container\n * @part table  - The native `<table>` element\n * @part head   - The native `<thead>` element\n * @part body   - The native `<tbody>` element\n * @part foot   - The native `<tfoot>` element\n *\n * @cssprop --table-bg                  - Table background\n * @cssprop --table-border              - Full border shorthand for row separators (e.g. `2px solid red`)\n * @cssprop --table-header-bg           - Header row background\n * @cssprop --table-header-color        - Header cell text color\n * @cssprop --table-cell-padding        - Cell padding (e.g. `0.75rem 1rem`)\n * @cssprop --table-cell-font-size      - Cell font size\n * @cssprop --table-cell-color          - Body cell text color\n * @cssprop --table-stripe-bg           - Stripe row background\n * @cssprop --table-row-hover-bg        - Row hover background\n * @cssprop --table-radius              - Outer corner radius\n * @cssprop --table-shadow              - Outer box shadow\n * @cssprop --table-sticky-max-height   - Max height when `sticky` is active (default `24rem`)\n *\n * @example\n * ```html\n * <bit-table caption=\"Members\" striped bordered color=\"primary\">\n *   <bit-tr head>\n *     <bit-th scope=\"col\">Name</bit-th>\n *     <bit-th scope=\"col\">Role</bit-th>\n *   </bit-tr>\n *   <bit-tr><bit-td>Alice</bit-td><bit-td>Admin</bit-td></bit-tr>\n *   <bit-tr><bit-td>Bob</bit-td><bit-td>Editor</bit-td></bit-tr>\n *   <bit-tr foot><bit-td colspan=\"2\">2 members</bit-td></bit-tr>\n * </bit-table>\n * ```\n */\nexport const TABLE_TAG = defineComponent<BitTableProps>({\n  props: {\n    bordered: { default: false, type: Boolean },\n    caption: { default: undefined },\n    color: { default: undefined },\n    loading: { default: false, type: Boolean },\n    size: { default: undefined },\n    sticky: { default: false, type: Boolean },\n    striped: { default: false, type: Boolean },\n  },\n  setup({ host, props }) {\n    aria({\n      busy: () => props.loading.value,\n      label: () => props.caption.value ?? null,\n    });\n    // Build the fully-native shadow table via DOM APIs (not innerHTML) to avoid\n    // HTML-parser foster-parenting which would eject <slot> elements from table\n    // contexts.  All three issues — color themes, sticky headers, colspan —\n    // require real <thead>/<tbody>/<tfoot>/<tr>/<th>/<td> in the shadow tree.\n    onMount(() => {\n      const scrollContainer = host.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      // Keep part assignment imperative so template typing stays strict.\n      scrollContainer.setAttribute('part', 'scroll');\n\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      // Sync caption text from prop\n      effect(() => {\n        captionEl.hidden = !(captionEl.textContent = props.caption.value ?? '');\n      });\n\n      // Initial build\n      let cleanupCellObservers = buildTable(host, thead, tbody, tfoot);\n      // Rebuild whenever direct children change (rows added / removed / reordered)\n      const structureObserver = new MutationObserver(() => {\n        cleanupCellObservers();\n        cleanupCellObservers = buildTable(host, thead, tbody, tfoot);\n      });\n\n      structureObserver.observe(host, { childList: true });\n\n      return () => {\n        structureObserver.disconnect();\n        cleanupCellObservers();\n      };\n    });\n\n    return html`<div class=\"scroll-container\"></div>`;\n  },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n  tag: 'bit-table',\n});\n"],"mappings":"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"}

package/dist/tabs.cjs

@@ -0,0 +1,17 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const t=require(`./disclosure/tabs/tabs.css?inline.cjs`);let n=require(`@vielzeug/craftit`);var r=(0,n.createContext)(`TabsContext`),i=(0,n.defineComponent)({props:{activation:{default:`auto`},color:{default:void 0},label:{default:void 0},orientation:{default:`horizontal`},size:{default:void 0},value:{default:void 0},variant:{default:void 0}},setup({emit:e,host:t,props:i}){let a=(0,n.ref)(),o=(0,n.ref)(),s=(0,n.signal)(i.value.value),c=()=>[...t.querySelectorAll(`bit-tab-item`)],l=(n,r=!1)=>{s.value=n,n==null?t.removeAttribute(`value`):t.getAttribute(`value`)!==n&&t.setAttribute(`value`,n),r&&n&&e(`change`,{value:n})},u=()=>{let e=c();if(e.length===0)return;let t=s.value;t&&e.some(e=>e.getAttribute(`value`)===t&&!e.hasAttribute(`disabled`))||l(e.find(e=>!e.hasAttribute(`disabled`))?.getAttribute(`value`)??void 0,!1)};(0,n.watch)(i.value,e=>{s.value=e,u()}),(0,n.provide)(r,{color:i.color,orientation:(0,n.computed)(()=>i.orientation.value??`horizontal`),size:i.size,value:s,variant:i.variant});let d=e=>{let t=o.value,n=a.value;if(!(!t||!n||!e))if(i.orientation.value===`vertical`){let r=e.getBoundingClientRect(),i=n.getBoundingClientRect();t.style.top=`${r.top-i.top+n.scrollTop}px`,t.style.height=`${r.height}px`,t.style.left=`0`,t.style.width=``}else{let r=e.getBoundingClientRect(),i=n.getBoundingClientRect();t.style.left=`${r.left-i.left+n.scrollLeft}px`,t.style.width=`${r.width}px`,t.style.top=``,t.style.height=``}},f=()=>{let e=s.value;e&&d(c().find(t=>t.getAttribute(`value`)===e))};return(0,n.watch)(s,()=>requestAnimationFrame(f)),(0,n.handle)(t,`click`,e=>{let n=e.target.closest(`bit-tab-item`);if(!n||n.hasAttribute(`disabled`)||n.closest(`bit-tabs`)!==t)return;let r=n.getAttribute(`value`);!r||r===s.value||l(r,!0)}),(0,n.handle)(t,`keydown`,e=>{let t=c().filter(e=>!e.hasAttribute(`disabled`)),n=t.findIndex(e=>e.getAttribute(`value`)===s.value),r=i.orientation.value===`vertical`,a=n;if(e.key===(r?`ArrowDown`:`ArrowRight`))a=(n+1)%t.length;else if(e.key===(r?`ArrowUp`:`ArrowLeft`))a=(n-1+t.length)%t.length;else if(!r&&e.key===`ArrowDown`)a=(n+1)%t.length;else if(!r&&e.key===`ArrowUp`)a=(n-1+t.length)%t.length;else if(e.key===`Home`)a=0;else if(e.key===`End`)a=t.length-1;else if(i.activation.value===`manual`&&(e.key===`Enter`||e.key===` `)){let e=t.find(e=>e===document.activeElement||e.shadowRoot?.activeElement===document.activeElement)?.getAttribute(`value`);e&&e!==s.value&&l(e,!0);return}else return;e.preventDefault();let o=t[a]?.getAttribute(`value`);o&&(t[a]?.focus(),i.activation.value!==`manual`&&l(o,!0))}),(0,n.onMount)(()=>{let e=()=>{u(),f()},n=t.shadowRoot?.querySelector(`slot[name="tabs"]`);return n&&n.addEventListener(`slotchange`,e),e(),requestAnimationFrame(e),()=>{n&&n.removeEventListener(`slotchange`,e)}}),n.html`
+      <div class="tablist-wrapper">
+        <div
+          role="tablist"
+          ref=${a}
+          part="tablist"
+          :aria-orientation="${()=>i.orientation.value}"
+          :aria-label="${()=>i.label.value??null}">
+          <slot name="tabs"></slot>
+        </div>
+        <div class="indicator" ref=${o} part="indicator"></div>
+      </div>
+      <div class="panels" part="panels">
+        <slot></slot>
+      </div>
+    `},styles:[e.colorThemeMixin,t.default],tag:`bit-tabs`});exports.TABS_CTX=r,exports.TABS_TAG=i;
+//# sourceMappingURL=tabs.cjs.map

package/dist/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","names":[],"sources":["../src/disclosure/tabs/tabs.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  defineComponent,\n  handle,\n  html,\n  onMount,\n  provide,\n  type ReadonlySignal,\n  ref,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\n\n/** Context provided by bit-tabs to its bit-tab-item and bit-tab-panel children. */\nexport type TabsContext = {\n  color: ReadonlySignal<ThemeColor | undefined>;\n  orientation: ReadonlySignal<'horizontal' | 'vertical'>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  value: ReadonlySignal<string | undefined>;\n  variant: ReadonlySignal<VisualVariant | undefined>;\n};\n/** Injection key for the tabs context. */\nexport const TABS_CTX = createContext<TabsContext>('TabsContext');\n\nimport styles from './tabs.css?inline';\n\nexport type BitTabsEvents = {\n  change: { value: string };\n};\n\nexport type BitTabsProps = {\n  /**\n   * Keyboard activation mode.\n   * - `'auto'` (default): Selecting a tab on arrow-key focus immediately activates it (ARIA recommendation for most cases).\n   * - `'manual'`: Arrow keys only move focus; the user must press Enter or Space to activate the focused tab.\n   */\n  activation?: 'auto' | 'manual';\n  /** Theme color */\n  color?: ThemeColor;\n  /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */\n  label?: string;\n  /** Tab list orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** Currently selected tab value */\n  value?: string;\n  /** Visual style variant */\n  variant?: VisualVariant;\n};\n\n/**\n * Tabs container. Manages tab selection and syncs state to child tab items and panels.\n *\n * @element bit-tabs\n *\n * @attr {string} value - The value of the currently selected tab\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @fires change - Emitted when the active tab changes, detail: { value: string }\n *\n * @slot tabs - Place `bit-tab-item` elements here\n * @slot - Place `bit-tab-panel` elements here\n *\n * @example\n * ```html\n * <bit-tabs value=\"tab1\" variant=\"underline\">\n *   <bit-tab-item slot=\"tabs\" value=\"tab1\">Overview</bit-tab-item>\n *   <bit-tab-item slot=\"tabs\" value=\"tab2\">Settings</bit-tab-item>\n *   <bit-tab-panel value=\"tab1\"><p>Overview content</p></bit-tab-panel>\n *   <bit-tab-panel value=\"tab2\"><p>Settings content</p></bit-tab-panel>\n * </bit-tabs>\n * ```\n */\nexport const TABS_TAG = defineComponent<BitTabsProps, BitTabsEvents>({\n  props: {\n    activation: { default: 'auto' },\n    color: { default: undefined },\n    label: { default: undefined },\n    orientation: { default: 'horizontal' },\n    size: { default: undefined },\n    value: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const tablistRef = ref<HTMLElement>();\n    const indicatorRef = ref<HTMLElement>();\n    const selectedValue = signal<string | undefined>(props.value.value);\n    const getTabs = () => [...host.querySelectorAll<HTMLElement>('bit-tab-item')];\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      selectedValue.value = value;\n\n      if (value == null) host.removeAttribute('value');\n      else if (host.getAttribute('value') !== value) host.setAttribute('value', value);\n\n      if (shouldEmit && value) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const tabs = getTabs();\n\n      // During initial connection, slotted tab items may not be assigned yet.\n      // Keep current selection until tabs exist instead of falling back to undefined.\n      if (tabs.length === 0) return;\n\n      const current = selectedValue.value;\n      const hasCurrent = current\n        ? tabs.some((tab) => tab.getAttribute('value') === current && !tab.hasAttribute('disabled'))\n        : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = tabs.find((tab) => !tab.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      setSelection(firstEnabled, false);\n    };\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n      ensureSelection();\n    });\n\n    provide(TABS_CTX, {\n      color: props.color,\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      value: selectedValue,\n      variant: props.variant,\n    });\n\n    const moveIndicator = (activeTab: HTMLElement | undefined) => {\n      const indicator = indicatorRef.value;\n      const tablist = tablistRef.value;\n\n      if (!indicator || !tablist || !activeTab) return;\n\n      if (props.orientation.value === 'vertical') {\n        const tabRect = activeTab.getBoundingClientRect();\n        const listRect = tablist.getBoundingClientRect();\n\n        indicator.style.top = `${tabRect.top - listRect.top + tablist.scrollTop}px`;\n        indicator.style.height = `${tabRect.height}px`;\n        indicator.style.left = '0';\n        indicator.style.width = '';\n      } else {\n        const tabRect = activeTab.getBoundingClientRect();\n        const listRect = tablist.getBoundingClientRect();\n\n        indicator.style.left = `${tabRect.left - listRect.left + tablist.scrollLeft}px`;\n        indicator.style.width = `${tabRect.width}px`;\n        indicator.style.top = '';\n        indicator.style.height = '';\n      }\n    };\n    const triggerIndicator = () => {\n      const value = selectedValue.value;\n\n      if (!value) return;\n\n      const activeTab = getTabs().find((t) => t.getAttribute('value') === value);\n\n      moveIndicator(activeTab);\n    };\n\n    watch(selectedValue, () => requestAnimationFrame(triggerIndicator));\n\n    const handleTabClick = (e: Event) => {\n      const tab = (e.target as HTMLElement).closest('bit-tab-item') as HTMLElement | null;\n\n      if (!tab || tab.hasAttribute('disabled')) return;\n\n      // Guard: only respond to tab-items that belong to THIS tabs instance, not nested ones.\n      if (tab.closest('bit-tabs') !== host) return;\n\n      const value = tab.getAttribute('value');\n\n      if (!value || value === selectedValue.value) return;\n\n      setSelection(value, true);\n    };\n    const handleKeydown = (e: KeyboardEvent) => {\n      const tabs = getTabs().filter((t) => !t.hasAttribute('disabled'));\n      const current = tabs.findIndex((t) => t.getAttribute('value') === selectedValue.value);\n      const isVertical = props.orientation.value === 'vertical';\n      // eslint-disable-next-line no-useless-assignment\n      let next = current;\n\n      if (e.key === (isVertical ? 'ArrowDown' : 'ArrowRight')) next = (current + 1) % tabs.length;\n      else if (e.key === (isVertical ? 'ArrowUp' : 'ArrowLeft')) next = (current - 1 + tabs.length) % tabs.length;\n      else if (!isVertical && e.key === 'ArrowDown') next = (current + 1) % tabs.length;\n      else if (!isVertical && e.key === 'ArrowUp') next = (current - 1 + tabs.length) % tabs.length;\n      else if (e.key === 'Home') next = 0;\n      else if (e.key === 'End') next = tabs.length - 1;\n      else if (props.activation.value === 'manual' && (e.key === 'Enter' || e.key === ' ')) {\n        // Manual mode: activate the currently focused tab\n        const focused = tabs.find(\n          (t) => t === document.activeElement || t.shadowRoot?.activeElement === document.activeElement,\n        );\n        const focusedValue = focused?.getAttribute('value');\n\n        if (focusedValue && focusedValue !== selectedValue.value) {\n          setSelection(focusedValue, true);\n        }\n\n        return;\n      } else return;\n\n      e.preventDefault();\n\n      const value = tabs[next]?.getAttribute('value');\n\n      if (value) {\n        (tabs[next] as HTMLElement)?.focus();\n\n        if (props.activation.value !== 'manual') {\n          // Auto mode: activate on focus\n          setSelection(value, true);\n        }\n      }\n    };\n\n    handle(host, 'click', handleTabClick);\n    handle(host, 'keydown', handleKeydown);\n    onMount(() => {\n      const syncSelection = () => {\n        ensureSelection();\n        triggerIndicator();\n      };\n      const tabsSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tabs\"]');\n\n      if (tabsSlot) {\n        tabsSlot.addEventListener('slotchange', syncSelection);\n      }\n\n      syncSelection();\n      requestAnimationFrame(syncSelection);\n\n      return () => {\n        if (tabsSlot) {\n          tabsSlot.removeEventListener('slotchange', syncSelection);\n        }\n      };\n    });\n\n    return html`\n      <div class=\"tablist-wrapper\">\n        <div\n          role=\"tablist\"\n          ref=${tablistRef}\n          part=\"tablist\"\n          :aria-orientation=\"${() => props.orientation.value}\"\n          :aria-label=\"${() => props.label.value ?? null}\">\n          <slot name=\"tabs\"></slot>\n        </div>\n        <div class=\"indicator\" ref=${indicatorRef} part=\"indicator\"></div>\n      </div>\n      <div class=\"panels\" part=\"panels\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, styles],\n  tag: 'bit-tabs',\n});\n"],"mappings":"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"}

package/dist/tabs.js

@@ -0,0 +1,98 @@
+import { colorThemeMixin as e } from "./styles/mixins/theme.css.js";
+import "./styles/index.js";
+import t from "./disclosure/tabs/tabs.css?inline.js";
+import { computed as n, createContext as r, defineComponent as i, handle as a, html as o, onMount as s, provide as c, ref as l, signal as u, watch as d } from "@vielzeug/craftit";
+//#region src/disclosure/tabs/tabs.ts
+var f = r("TabsContext"), p = i({
+	props: {
+		activation: { default: "auto" },
+		color: { default: void 0 },
+		label: { default: void 0 },
+		orientation: { default: "horizontal" },
+		size: { default: void 0 },
+		value: { default: void 0 },
+		variant: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: r }) {
+		let i = l(), p = l(), m = u(r.value.value), h = () => [...t.querySelectorAll("bit-tab-item")], g = (n, r = !1) => {
+			m.value = n, n == null ? t.removeAttribute("value") : t.getAttribute("value") !== n && t.setAttribute("value", n), r && n && e("change", { value: n });
+		}, _ = () => {
+			let e = h();
+			if (e.length === 0) return;
+			let t = m.value;
+			t && e.some((e) => e.getAttribute("value") === t && !e.hasAttribute("disabled")) || g(e.find((e) => !e.hasAttribute("disabled"))?.getAttribute("value") ?? void 0, !1);
+		};
+		d(r.value, (e) => {
+			m.value = e, _();
+		}), c(f, {
+			color: r.color,
+			orientation: n(() => r.orientation.value ?? "horizontal"),
+			size: r.size,
+			value: m,
+			variant: r.variant
+		});
+		let v = (e) => {
+			let t = p.value, n = i.value;
+			if (!(!t || !n || !e)) if (r.orientation.value === "vertical") {
+				let r = e.getBoundingClientRect(), i = n.getBoundingClientRect();
+				t.style.top = `${r.top - i.top + n.scrollTop}px`, t.style.height = `${r.height}px`, t.style.left = "0", t.style.width = "";
+			} else {
+				let r = e.getBoundingClientRect(), i = n.getBoundingClientRect();
+				t.style.left = `${r.left - i.left + n.scrollLeft}px`, t.style.width = `${r.width}px`, t.style.top = "", t.style.height = "";
+			}
+		}, y = () => {
+			let e = m.value;
+			e && v(h().find((t) => t.getAttribute("value") === e));
+		};
+		return d(m, () => requestAnimationFrame(y)), a(t, "click", (e) => {
+			let n = e.target.closest("bit-tab-item");
+			if (!n || n.hasAttribute("disabled") || n.closest("bit-tabs") !== t) return;
+			let r = n.getAttribute("value");
+			!r || r === m.value || g(r, !0);
+		}), a(t, "keydown", (e) => {
+			let t = h().filter((e) => !e.hasAttribute("disabled")), n = t.findIndex((e) => e.getAttribute("value") === m.value), i = r.orientation.value === "vertical", a = n;
+			if (e.key === (i ? "ArrowDown" : "ArrowRight")) a = (n + 1) % t.length;
+			else if (e.key === (i ? "ArrowUp" : "ArrowLeft")) a = (n - 1 + t.length) % t.length;
+			else if (!i && e.key === "ArrowDown") a = (n + 1) % t.length;
+			else if (!i && e.key === "ArrowUp") a = (n - 1 + t.length) % t.length;
+			else if (e.key === "Home") a = 0;
+			else if (e.key === "End") a = t.length - 1;
+			else if (r.activation.value === "manual" && (e.key === "Enter" || e.key === " ")) {
+				let e = t.find((e) => e === document.activeElement || e.shadowRoot?.activeElement === document.activeElement)?.getAttribute("value");
+				e && e !== m.value && g(e, !0);
+				return;
+			} else return;
+			e.preventDefault();
+			let o = t[a]?.getAttribute("value");
+			o && (t[a]?.focus(), r.activation.value !== "manual" && g(o, !0));
+		}), s(() => {
+			let e = () => {
+				_(), y();
+			}, n = t.shadowRoot?.querySelector("slot[name=\"tabs\"]");
+			return n && n.addEventListener("slotchange", e), e(), requestAnimationFrame(e), () => {
+				n && n.removeEventListener("slotchange", e);
+			};
+		}), o`
+      <div class="tablist-wrapper">
+        <div
+          role="tablist"
+          ref=${i}
+          part="tablist"
+          :aria-orientation="${() => r.orientation.value}"
+          :aria-label="${() => r.label.value ?? null}">
+          <slot name="tabs"></slot>
+        </div>
+        <div class="indicator" ref=${p} part="indicator"></div>
+      </div>
+      <div class="panels" part="panels">
+        <slot></slot>
+      </div>
+    `;
+	},
+	styles: [e, t],
+	tag: "bit-tabs"
+});
+//#endregion
+export { f as TABS_CTX, p as TABS_TAG };
+
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../src/disclosure/tabs/tabs.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  defineComponent,\n  handle,\n  html,\n  onMount,\n  provide,\n  type ReadonlySignal,\n  ref,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\n\n/** Context provided by bit-tabs to its bit-tab-item and bit-tab-panel children. */\nexport type TabsContext = {\n  color: ReadonlySignal<ThemeColor | undefined>;\n  orientation: ReadonlySignal<'horizontal' | 'vertical'>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  value: ReadonlySignal<string | undefined>;\n  variant: ReadonlySignal<VisualVariant | undefined>;\n};\n/** Injection key for the tabs context. */\nexport const TABS_CTX = createContext<TabsContext>('TabsContext');\n\nimport styles from './tabs.css?inline';\n\nexport type BitTabsEvents = {\n  change: { value: string };\n};\n\nexport type BitTabsProps = {\n  /**\n   * Keyboard activation mode.\n   * - `'auto'` (default): Selecting a tab on arrow-key focus immediately activates it (ARIA recommendation for most cases).\n   * - `'manual'`: Arrow keys only move focus; the user must press Enter or Space to activate the focused tab.\n   */\n  activation?: 'auto' | 'manual';\n  /** Theme color */\n  color?: ThemeColor;\n  /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */\n  label?: string;\n  /** Tab list orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** Currently selected tab value */\n  value?: string;\n  /** Visual style variant */\n  variant?: VisualVariant;\n};\n\n/**\n * Tabs container. Manages tab selection and syncs state to child tab items and panels.\n *\n * @element bit-tabs\n *\n * @attr {string} value - The value of the currently selected tab\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @fires change - Emitted when the active tab changes, detail: { value: string }\n *\n * @slot tabs - Place `bit-tab-item` elements here\n * @slot - Place `bit-tab-panel` elements here\n *\n * @example\n * ```html\n * <bit-tabs value=\"tab1\" variant=\"underline\">\n *   <bit-tab-item slot=\"tabs\" value=\"tab1\">Overview</bit-tab-item>\n *   <bit-tab-item slot=\"tabs\" value=\"tab2\">Settings</bit-tab-item>\n *   <bit-tab-panel value=\"tab1\"><p>Overview content</p></bit-tab-panel>\n *   <bit-tab-panel value=\"tab2\"><p>Settings content</p></bit-tab-panel>\n * </bit-tabs>\n * ```\n */\nexport const TABS_TAG = defineComponent<BitTabsProps, BitTabsEvents>({\n  props: {\n    activation: { default: 'auto' },\n    color: { default: undefined },\n    label: { default: undefined },\n    orientation: { default: 'horizontal' },\n    size: { default: undefined },\n    value: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const tablistRef = ref<HTMLElement>();\n    const indicatorRef = ref<HTMLElement>();\n    const selectedValue = signal<string | undefined>(props.value.value);\n    const getTabs = () => [...host.querySelectorAll<HTMLElement>('bit-tab-item')];\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      selectedValue.value = value;\n\n      if (value == null) host.removeAttribute('value');\n      else if (host.getAttribute('value') !== value) host.setAttribute('value', value);\n\n      if (shouldEmit && value) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const tabs = getTabs();\n\n      // During initial connection, slotted tab items may not be assigned yet.\n      // Keep current selection until tabs exist instead of falling back to undefined.\n      if (tabs.length === 0) return;\n\n      const current = selectedValue.value;\n      const hasCurrent = current\n        ? tabs.some((tab) => tab.getAttribute('value') === current && !tab.hasAttribute('disabled'))\n        : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = tabs.find((tab) => !tab.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      setSelection(firstEnabled, false);\n    };\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n      ensureSelection();\n    });\n\n    provide(TABS_CTX, {\n      color: props.color,\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      value: selectedValue,\n      variant: props.variant,\n    });\n\n    const moveIndicator = (activeTab: HTMLElement | undefined) => {\n      const indicator = indicatorRef.value;\n      const tablist = tablistRef.value;\n\n      if (!indicator || !tablist || !activeTab) return;\n\n      if (props.orientation.value === 'vertical') {\n        const tabRect = activeTab.getBoundingClientRect();\n        const listRect = tablist.getBoundingClientRect();\n\n        indicator.style.top = `${tabRect.top - listRect.top + tablist.scrollTop}px`;\n        indicator.style.height = `${tabRect.height}px`;\n        indicator.style.left = '0';\n        indicator.style.width = '';\n      } else {\n        const tabRect = activeTab.getBoundingClientRect();\n        const listRect = tablist.getBoundingClientRect();\n\n        indicator.style.left = `${tabRect.left - listRect.left + tablist.scrollLeft}px`;\n        indicator.style.width = `${tabRect.width}px`;\n        indicator.style.top = '';\n        indicator.style.height = '';\n      }\n    };\n    const triggerIndicator = () => {\n      const value = selectedValue.value;\n\n      if (!value) return;\n\n      const activeTab = getTabs().find((t) => t.getAttribute('value') === value);\n\n      moveIndicator(activeTab);\n    };\n\n    watch(selectedValue, () => requestAnimationFrame(triggerIndicator));\n\n    const handleTabClick = (e: Event) => {\n      const tab = (e.target as HTMLElement).closest('bit-tab-item') as HTMLElement | null;\n\n      if (!tab || tab.hasAttribute('disabled')) return;\n\n      // Guard: only respond to tab-items that belong to THIS tabs instance, not nested ones.\n      if (tab.closest('bit-tabs') !== host) return;\n\n      const value = tab.getAttribute('value');\n\n      if (!value || value === selectedValue.value) return;\n\n      setSelection(value, true);\n    };\n    const handleKeydown = (e: KeyboardEvent) => {\n      const tabs = getTabs().filter((t) => !t.hasAttribute('disabled'));\n      const current = tabs.findIndex((t) => t.getAttribute('value') === selectedValue.value);\n      const isVertical = props.orientation.value === 'vertical';\n      // eslint-disable-next-line no-useless-assignment\n      let next = current;\n\n      if (e.key === (isVertical ? 'ArrowDown' : 'ArrowRight')) next = (current + 1) % tabs.length;\n      else if (e.key === (isVertical ? 'ArrowUp' : 'ArrowLeft')) next = (current - 1 + tabs.length) % tabs.length;\n      else if (!isVertical && e.key === 'ArrowDown') next = (current + 1) % tabs.length;\n      else if (!isVertical && e.key === 'ArrowUp') next = (current - 1 + tabs.length) % tabs.length;\n      else if (e.key === 'Home') next = 0;\n      else if (e.key === 'End') next = tabs.length - 1;\n      else if (props.activation.value === 'manual' && (e.key === 'Enter' || e.key === ' ')) {\n        // Manual mode: activate the currently focused tab\n        const focused = tabs.find(\n          (t) => t === document.activeElement || t.shadowRoot?.activeElement === document.activeElement,\n        );\n        const focusedValue = focused?.getAttribute('value');\n\n        if (focusedValue && focusedValue !== selectedValue.value) {\n          setSelection(focusedValue, true);\n        }\n\n        return;\n      } else return;\n\n      e.preventDefault();\n\n      const value = tabs[next]?.getAttribute('value');\n\n      if (value) {\n        (tabs[next] as HTMLElement)?.focus();\n\n        if (props.activation.value !== 'manual') {\n          // Auto mode: activate on focus\n          setSelection(value, true);\n        }\n      }\n    };\n\n    handle(host, 'click', handleTabClick);\n    handle(host, 'keydown', handleKeydown);\n    onMount(() => {\n      const syncSelection = () => {\n        ensureSelection();\n        triggerIndicator();\n      };\n      const tabsSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tabs\"]');\n\n      if (tabsSlot) {\n        tabsSlot.addEventListener('slotchange', syncSelection);\n      }\n\n      syncSelection();\n      requestAnimationFrame(syncSelection);\n\n      return () => {\n        if (tabsSlot) {\n          tabsSlot.removeEventListener('slotchange', syncSelection);\n        }\n      };\n    });\n\n    return html`\n      <div class=\"tablist-wrapper\">\n        <div\n          role=\"tablist\"\n          ref=${tablistRef}\n          part=\"tablist\"\n          :aria-orientation=\"${() => props.orientation.value}\"\n          :aria-label=\"${() => props.label.value ?? null}\">\n          <slot name=\"tabs\"></slot>\n        </div>\n        <div class=\"indicator\" ref=${indicatorRef} part=\"indicator\"></div>\n      </div>\n      <div class=\"panels\" part=\"panels\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, styles],\n  tag: 'bit-tabs',\n});\n"],"mappings":"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"}

package/dist/text.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./content/text/text.css?inline.cjs`);let t=require(`@vielzeug/craftit`);var n=(0,t.defineComponent)({props:{align:(0,t.typed)(void 0),as:(0,t.typed)(void 0),color:(0,t.typed)(void 0),italic:(0,t.typed)(!1),lines:(0,t.typed)(void 0,{type:Number}),size:(0,t.typed)(void 0),truncate:(0,t.typed)(!1),variant:(0,t.typed)(void 0),weight:(0,t.typed)(void 0)},setup({host:e,props:n}){return(0,t.watch)(n.as,t=>{let n=/^h([1-6])$/.exec(t??``);n?(e.setAttribute(`role`,`heading`),e.setAttribute(`aria-level`,n[1])):(e.removeAttribute(`role`),e.removeAttribute(`aria-level`))},{immediate:!0}),(0,t.watch)(n.lines,t=>{t==null?e.style.removeProperty(`--_lines`):e.style.setProperty(`--_lines`,String(t))},{immediate:!0}),t.html`<slot></slot>`},styles:[e.default],tag:`bit-text`});exports.TEXT_TAG=n;
+//# sourceMappingURL=text.cjs.map

package/dist/text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.cjs","names":[],"sources":["../src/content/text/text.ts"],"sourcesContent":["import { defineComponent, html, typed, watch } from '@vielzeug/craftit';\n\nimport styles from './text.css?inline';\n\n/** Text component properties */\nexport type BitTextProps = {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right' | 'justify';\n  /** Semantic HTML element to render as — sets the correct ARIA role/level on the host */\n  as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code';\n  /** Text color (semantic + theme colors) */\n  color?:\n    | 'primary'\n    | 'secondary'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'heading'\n    | 'body'\n    | 'muted'\n    | 'tertiary'\n    | 'disabled'\n    | 'contrast';\n  /** Italic text style */\n  italic?: boolean;\n  /** Clamp text to N lines with an ellipsis (multi-line truncation) */\n  lines?: number;\n  /** Text size — maps to --text-* tokens for body variants and --heading-* tokens for the heading variant */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Enable single-line text truncation with ellipsis */\n  truncate?: boolean;\n  /** Text semantic variant */\n  variant?: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code';\n  /** Font weight */\n  weight?: 'normal' | 'medium' | 'semibold' | 'bold';\n};\n\n/**\n * A typography component with semantic variants and responsive sizing.\n *\n * @element bit-text\n *\n * @attr {string} variant - Text variant: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code'\n * @attr {string} size - Font size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'. Maps to --text-* tokens for body variants and --heading-* tokens for the heading variant.\n * @attr {string} weight - Font weight: 'normal' | 'medium' | 'semibold' | 'bold'\n * @attr {string} color - Text color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'heading' | 'body' | 'muted' | 'tertiary' | 'disabled' | 'contrast'\n * @attr {string} align - Text alignment: 'left' | 'center' | 'right' | 'justify'\n * @attr {boolean} truncate - Truncate text with ellipsis when it overflows (single-line)\n * @attr {number} lines - Clamp to N lines with ellipsis (multi-line truncation)\n * @attr {boolean} italic - Italic text style\n * @attr {string} as - Semantic HTML element: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code'\n *\n * @slot - Text content\n *\n * @cssprop --text-size - Font size\n * @cssprop --text-weight - Font weight\n * @cssprop --text-color - Text color\n * @cssprop --text-line-height - Line height\n * @cssprop --text-letter-spacing - Letter spacing\n *\n * @example\n * ```html\n * <bit-text variant=\"heading\" size=\"3xl\" weight=\"bold\">Welcome</bit-text>\n * <bit-text as=\"h2\" variant=\"heading\" size=\"xl\">Section title</bit-text>\n * <bit-text color=\"primary\" weight=\"semibold\">Important notice</bit-text>\n * <bit-text variant=\"code\">npm install</bit-text>\n * <bit-text lines=\"2\">Long paragraph that clamps at two lines…</bit-text>\n * ```\n */\n\nexport const TEXT_TAG = defineComponent<BitTextProps>({\n  props: {\n    align: typed<BitTextProps['align']>(undefined),\n    as: typed<BitTextProps['as']>(undefined),\n    color: typed<BitTextProps['color']>(undefined),\n    italic: typed<boolean>(false),\n    lines: typed<number | undefined>(undefined, { type: Number }),\n    size: typed<BitTextProps['size']>(undefined),\n    truncate: typed<boolean>(false),\n    variant: typed<BitTextProps['variant']>(undefined),\n    weight: typed<BitTextProps['weight']>(undefined),\n  },\n  setup({ host, props }) {\n    // Single watcher drives both role + aria-level from `as`.\n    // h1–h6 → role=\"heading\" + aria-level; everything else → remove both.\n    watch(\n      props.as,\n      (tag) => {\n        const match = /^h([1-6])$/.exec((tag as string | undefined) ?? '');\n\n        if (match) {\n          host.setAttribute('role', 'heading');\n          host.setAttribute('aria-level', match[1]);\n        } else {\n          host.removeAttribute('role');\n          host.removeAttribute('aria-level');\n        }\n      },\n      { immediate: true },\n    );\n    // Drive --_lines on the host so the CSS line-clamp rule works.\n    watch(\n      props.lines,\n      (n) => {\n        if (n != null) host.style.setProperty('--_lines', String(n));\n        else host.style.removeProperty('--_lines');\n      },\n      { immediate: true },\n    );\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-text',\n});\n"],"mappings":"4JAuEA,IAAa,GAAA,EAAA,EAAA,iBAAyC,CACpD,MAAO,CACL,OAAA,EAAA,EAAA,OAAoC,IAAA,GAAU,CAC9C,IAAA,EAAA,EAAA,OAA8B,IAAA,GAAU,CACxC,OAAA,EAAA,EAAA,OAAoC,IAAA,GAAU,CAC9C,QAAA,EAAA,EAAA,OAAuB,GAAM,CAC7B,OAAA,EAAA,EAAA,OAAiC,IAAA,GAAW,CAAE,KAAM,OAAQ,CAAC,CAC7D,MAAA,EAAA,EAAA,OAAkC,IAAA,GAAU,CAC5C,UAAA,EAAA,EAAA,OAAyB,GAAM,CAC/B,SAAA,EAAA,EAAA,OAAwC,IAAA,GAAU,CAClD,QAAA,EAAA,EAAA,OAAsC,IAAA,GAAU,CACjD,CACD,MAAM,CAAE,OAAM,SAAS,CA4BrB,OAzBA,EAAA,EAAA,OACE,EAAM,GACL,GAAQ,CACP,IAAM,EAAQ,aAAa,KAAM,GAA8B,GAAG,CAE9D,GACF,EAAK,aAAa,OAAQ,UAAU,CACpC,EAAK,aAAa,aAAc,EAAM,GAAG,GAEzC,EAAK,gBAAgB,OAAO,CAC5B,EAAK,gBAAgB,aAAa,GAGtC,CAAE,UAAW,GAAM,CACpB,EAED,EAAA,EAAA,OACE,EAAM,MACL,GAAM,CACD,GAAK,KACJ,EAAK,MAAM,eAAe,WAAW,CAD3B,EAAK,MAAM,YAAY,WAAY,OAAO,EAAE,CAAC,EAG9D,CAAE,UAAW,GAAM,CACpB,CAEM,EAAA,IAAI,iBAEb,OAAQ,CAAC,EAAA,QAAO,CAChB,IAAK,WACN,CAAC"}

package/dist/text.js

@@ -0,0 +1,30 @@
+import e from "./content/text/text.css?inline.js";
+import { defineComponent as t, html as n, typed as r, watch as i } from "@vielzeug/craftit";
+//#region src/content/text/text.ts
+var a = t({
+	props: {
+		align: r(void 0),
+		as: r(void 0),
+		color: r(void 0),
+		italic: r(!1),
+		lines: r(void 0, { type: Number }),
+		size: r(void 0),
+		truncate: r(!1),
+		variant: r(void 0),
+		weight: r(void 0)
+	},
+	setup({ host: e, props: t }) {
+		return i(t.as, (t) => {
+			let n = /^h([1-6])$/.exec(t ?? "");
+			n ? (e.setAttribute("role", "heading"), e.setAttribute("aria-level", n[1])) : (e.removeAttribute("role"), e.removeAttribute("aria-level"));
+		}, { immediate: !0 }), i(t.lines, (t) => {
+			t == null ? e.style.removeProperty("--_lines") : e.style.setProperty("--_lines", String(t));
+		}, { immediate: !0 }), n`<slot></slot>`;
+	},
+	styles: [e],
+	tag: "bit-text"
+});
+//#endregion
+export { a as TEXT_TAG };
+
+//# sourceMappingURL=text.js.map

package/dist/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../src/content/text/text.ts"],"sourcesContent":["import { defineComponent, html, typed, watch } from '@vielzeug/craftit';\n\nimport styles from './text.css?inline';\n\n/** Text component properties */\nexport type BitTextProps = {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right' | 'justify';\n  /** Semantic HTML element to render as — sets the correct ARIA role/level on the host */\n  as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code';\n  /** Text color (semantic + theme colors) */\n  color?:\n    | 'primary'\n    | 'secondary'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'heading'\n    | 'body'\n    | 'muted'\n    | 'tertiary'\n    | 'disabled'\n    | 'contrast';\n  /** Italic text style */\n  italic?: boolean;\n  /** Clamp text to N lines with an ellipsis (multi-line truncation) */\n  lines?: number;\n  /** Text size — maps to --text-* tokens for body variants and --heading-* tokens for the heading variant */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Enable single-line text truncation with ellipsis */\n  truncate?: boolean;\n  /** Text semantic variant */\n  variant?: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code';\n  /** Font weight */\n  weight?: 'normal' | 'medium' | 'semibold' | 'bold';\n};\n\n/**\n * A typography component with semantic variants and responsive sizing.\n *\n * @element bit-text\n *\n * @attr {string} variant - Text variant: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code'\n * @attr {string} size - Font size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'. Maps to --text-* tokens for body variants and --heading-* tokens for the heading variant.\n * @attr {string} weight - Font weight: 'normal' | 'medium' | 'semibold' | 'bold'\n * @attr {string} color - Text color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'heading' | 'body' | 'muted' | 'tertiary' | 'disabled' | 'contrast'\n * @attr {string} align - Text alignment: 'left' | 'center' | 'right' | 'justify'\n * @attr {boolean} truncate - Truncate text with ellipsis when it overflows (single-line)\n * @attr {number} lines - Clamp to N lines with ellipsis (multi-line truncation)\n * @attr {boolean} italic - Italic text style\n * @attr {string} as - Semantic HTML element: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code'\n *\n * @slot - Text content\n *\n * @cssprop --text-size - Font size\n * @cssprop --text-weight - Font weight\n * @cssprop --text-color - Text color\n * @cssprop --text-line-height - Line height\n * @cssprop --text-letter-spacing - Letter spacing\n *\n * @example\n * ```html\n * <bit-text variant=\"heading\" size=\"3xl\" weight=\"bold\">Welcome</bit-text>\n * <bit-text as=\"h2\" variant=\"heading\" size=\"xl\">Section title</bit-text>\n * <bit-text color=\"primary\" weight=\"semibold\">Important notice</bit-text>\n * <bit-text variant=\"code\">npm install</bit-text>\n * <bit-text lines=\"2\">Long paragraph that clamps at two lines…</bit-text>\n * ```\n */\n\nexport const TEXT_TAG = defineComponent<BitTextProps>({\n  props: {\n    align: typed<BitTextProps['align']>(undefined),\n    as: typed<BitTextProps['as']>(undefined),\n    color: typed<BitTextProps['color']>(undefined),\n    italic: typed<boolean>(false),\n    lines: typed<number | undefined>(undefined, { type: Number }),\n    size: typed<BitTextProps['size']>(undefined),\n    truncate: typed<boolean>(false),\n    variant: typed<BitTextProps['variant']>(undefined),\n    weight: typed<BitTextProps['weight']>(undefined),\n  },\n  setup({ host, props }) {\n    // Single watcher drives both role + aria-level from `as`.\n    // h1–h6 → role=\"heading\" + aria-level; everything else → remove both.\n    watch(\n      props.as,\n      (tag) => {\n        const match = /^h([1-6])$/.exec((tag as string | undefined) ?? '');\n\n        if (match) {\n          host.setAttribute('role', 'heading');\n          host.setAttribute('aria-level', match[1]);\n        } else {\n          host.removeAttribute('role');\n          host.removeAttribute('aria-level');\n        }\n      },\n      { immediate: true },\n    );\n    // Drive --_lines on the host so the CSS line-clamp rule works.\n    watch(\n      props.lines,\n      (n) => {\n        if (n != null) host.style.setProperty('--_lines', String(n));\n        else host.style.removeProperty('--_lines');\n      },\n      { immediate: true },\n    );\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-text',\n});\n"],"mappings":";;;AAuEA,IAAa,IAAW,EAA8B;CACpD,OAAO;EACL,OAAO,EAA6B,KAAA,EAAU;EAC9C,IAAI,EAA0B,KAAA,EAAU;EACxC,OAAO,EAA6B,KAAA,EAAU;EAC9C,QAAQ,EAAe,GAAM;EAC7B,OAAO,EAA0B,KAAA,GAAW,EAAE,MAAM,QAAQ,CAAC;EAC7D,MAAM,EAA4B,KAAA,EAAU;EAC5C,UAAU,EAAe,GAAM;EAC/B,SAAS,EAA+B,KAAA,EAAU;EAClD,QAAQ,EAA8B,KAAA,EAAU;EACjD;CACD,MAAM,EAAE,SAAM,YAAS;AA4BrB,SAzBA,EACE,EAAM,KACL,MAAQ;GACP,IAAM,IAAQ,aAAa,KAAM,KAA8B,GAAG;AAElE,GAAI,KACF,EAAK,aAAa,QAAQ,UAAU,EACpC,EAAK,aAAa,cAAc,EAAM,GAAG,KAEzC,EAAK,gBAAgB,OAAO,EAC5B,EAAK,gBAAgB,aAAa;KAGtC,EAAE,WAAW,IAAM,CACpB,EAED,EACE,EAAM,QACL,MAAM;AACL,GAAI,KAAK,OACJ,EAAK,MAAM,eAAe,WAAW,GAD3B,EAAK,MAAM,YAAY,YAAY,OAAO,EAAE,CAAC;KAG9D,EAAE,WAAW,IAAM,CACpB,EAEM,CAAI;;CAEb,QAAQ,CAAC,EAAO;CAChB,KAAK;CACN,CAAC"}