@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/tab-panel.js

@@ -2,48 +2,46 @@ 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";
+import { computed as r, define as i, effect as a, html as o, inject as s, signal as c } from "@vielzeug/craftit";
 //#region src/disclosure/tab-panel/tab-panel.ts
-var u = i({
+var l = {
+	"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)"
+}, u = i("bit-tab-panel", {
 	props: {
-		active: l(!1),
-		lazy: l(!1),
-		padding: l("md"),
-		value: l("")
+		active: !1,
+		lazy: !1,
+		padding: "md",
+		value: ""
 	},
 	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);
+		let i = s(t, void 0), u = r(() => i ? !!i.value.value && i.value.value === n.value.value : n.active.value);
+		e.bind("attr", { active: () => u.value ? !0 : void 0 });
+		let d = r(() => l[n.padding.value ?? "md"] ?? l.md), f = c(!1);
 		a(() => {
-			e.toggleAttribute("active", l.value), l.value && (d.value = !0);
+			u.value && (f.value = !0);
 		});
-		let f = r(() => !n.lazy.value || d.value);
+		let p = r(() => !n.lazy.value || f.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}`}"
+        :id="${r(() => `tabpanel-${n.value.value}`)}"
+        :aria-labelledby="${r(() => `tab-${n.value.value}`)}"
+        :aria-hidden=${() => String(!u.value)}
+        :style="${() => `--tab-panel-padding: ${d.value}`}"
         tabindex="0">
-        ${() => f.value ? o`<slot></slot>` : ""}
+        ${() => p.value ? o`<slot></slot>` : ""}
       </div>
     `;
 	},
-	styles: [e, n],
-	tag: "bit-tab-panel"
+	styles: [e, n]
 });
 //#endregion
 export { u 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 { 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"}
+{"version":3,"file":"tab-panel.js","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { define, computed, effect, html, inject, signal } from '@vielzeug/craftit';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_MAP: 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 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 = define<BitTabPanelProps>('bit-tab-panel', {\n  props: {\n    active: false,\n    lazy: false,\n    padding: 'md',\n    value: '',\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    host.bind('attr', {\n      active: () => (isActive.value ? true : undefined),\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_MAP[key] ?? TAB_PANEL_PADDING_MAP.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    effect(() => {\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 panelId = computed(() => `tabpanel-${props.value.value}`);\n    const labelledById = computed(() => `tab-${props.value.value}`);\n\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        :id=\"${panelId}\"\n        :aria-labelledby=\"${labelledById}\"\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});\n"],"mappings":";;;;;;AAMA,IAAM,IAAgD;CACpD,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EA+BY,IAAgB,EAAyB,iBAAiB;CACrE,OAAO;EACL,QAAQ;EACR,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACD,MAAM,EAAE,SAAM,YAAS;EACrB,IAAM,IAAU,EAAO,GAAU,KAAA,EAAU,EACrC,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,MAC7F;AAED,IAAK,KAAK,QAAQ,EAChB,cAAe,EAAS,QAAQ,KAAO,KAAA,GACxC,CAAC;EAGF,IAAM,IAAe,QAGZ,EAFK,EAAM,QAAQ,SAAS,SAEE,EAAsB,GAC3D,EAEI,IAAgB,EAAO,GAAM;AAEnC,UAAa;AACX,GAAI,EAAS,UAAO,EAAc,QAAQ;IAC1C;EAGF,IAAM,IAAe,QAAe,CAAC,EAAM,KAAK,SAAS,EAAc,MAAM;AAI7E,SAAO,CAAI;;;;;eAHK,QAAe,YAAY,EAAM,MAAM,QAAQ,CAQ5C;4BAPE,QAAe,OAAO,EAAM,MAAM,QAAQ,CAQ1B;6BACZ,OAAO,CAAC,EAAS,MAAM,CAAC;wBAC7B,wBAAwB,EAAa,QAAQ;;gBAEpD,EAAa,QAAQ,CAAI,kBAAkB,GAAI;;;;CAI9D,QAAQ,CAAC,GAAoB,EAAO;CACrC,CAAC"}

package/dist/table.cjs

@@ -1,2 +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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/accessibility.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const r=require(`./content/table/table.css?inline.cjs`);let i=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 a=`bit-tr`,o=`bit-th`,s=`bit-td`,c=[`colspan`,`rowspan`,`scope`,`headers`,`abbr`,`axis`,`align`,`valign`,`width`];function l(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 c){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 c){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 u=(0,i.define)(`bit-table`,{props:{...e.themableBundle,...e.sizableBundle,bordered:!1,caption:void 0,loading:!1,sticky:!1,striped:!1},setup({host:e,props:t}){return e.bind(`attr`,{ariaBusy:()=>t.loading.value?`true`:null,ariaLabel:()=>t.caption.value??null}),(0,i.onMount)(()=>{let n=e.shadowRoot.querySelector(`.scroll-container`),r=document.createElement(`table`),a=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(a,o,s,c),n.appendChild(r),(0,i.effect)(()=>{a.hidden=!(a.textContent=t.caption.value??``)});let u=l(e.el,o,s,c),d=new MutationObserver(()=>{u(),u=l(e.el,o,s,c)});return d.observe(e.el,{childList:!0}),()=>{d.disconnect(),u()}}),i.html`<div class="scroll-container"></div>`},styles:[n.colorThemeMixin,t.reducedMotionMixin,r.default]});exports.TABLE_TAG=u,exports.TD_TAG=s,exports.TH_TAG=o,exports.TR_TAG=a;
 //# 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 { 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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"}
+{"version":3,"file":"table.cjs","names":[],"sources":["../src/content/table/table.ts"],"sourcesContent":["import { define, effect, html, onMount } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { type PropBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\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\nexport const TABLE_TAG = define<BitTableProps>('bit-table', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    bordered: false,\n    caption: undefined,\n    loading: false,\n    sticky: false,\n    striped: false,\n  } satisfies PropBundle<BitTableProps>,\n  setup({ host, props }) {\n    host.bind('attr', {\n      ariaBusy: () => (props.loading.value ? 'true' : null),\n      ariaLabel: () => 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.el, thead, tbody, tfoot);\n      // Rebuild whenever direct children change (rows added / removed / reordered)\n      const structureObserver = new MutationObserver(() => {\n        cleanupCellObservers();\n        cleanupCellObservers = buildTable(host.el, thead, tbody, tfoot);\n      });\n\n      structureObserver.observe(host.el, { 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});\n"],"mappings":"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"}

package/dist/table.js

@@ -1,10 +1,11 @@
-import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
-import { colorThemeMixin as t } from "./styles/mixins/theme.css.js";
+import { sizableBundle as e, themableBundle as t } from "./inputs/shared/bundles.js";
+import { reducedMotionMixin as n } from "./styles/mixins/accessibility.css.js";
+import { colorThemeMixin as r } 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";
+import i from "./content/table/table.css?inline.js";
+import { define as a, effect as o, html as s, onMount as c } 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 = [
+var l = "bit-tr", u = "bit-th", d = "bit-td", f = [
 	"colspan",
 	"rowspan",
 	"scope",
@@ -15,19 +16,19 @@ var c = "bit-tr", l = "bit-th", u = "bit-td", d = [
 	"valign",
 	"width"
 ];
-function f(e, t, n, r) {
+function p(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) {
+		for (let t of f) {
 			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) {
+			for (let t of f) {
 				let n = e.getAttribute(t);
 				n === null ? r.removeAttribute(t) : r.setAttribute(t, n);
 			}
@@ -49,53 +50,40 @@ function f(e, t, n, r) {
 		for (let e of i) e.disconnect();
 	};
 }
-var p = i({
+var m = a("bit-table", {
 	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
-		}
+		...t,
+		...e,
+		bordered: !1,
+		caption: void 0,
+		loading: !1,
+		sticky: !1,
+		striped: !1
 	},
 	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(() => {
+		return e.bind("attr", {
+			ariaBusy: () => t.loading.value ? "true" : null,
+			ariaLabel: () => t.caption.value ?? null
+		}), c(() => {
+			let n = e.shadowRoot.querySelector(".scroll-container"), r = document.createElement("table"), i = document.createElement("caption"), a = document.createElement("thead"), s = document.createElement("tbody"), c = document.createElement("tfoot");
+			n.setAttribute("part", "scroll"), r.setAttribute("part", "table"), a.setAttribute("part", "head"), s.setAttribute("part", "body"), c.setAttribute("part", "foot"), r.append(i, a, s, c), n.appendChild(r), o(() => {
 				i.hidden = !(i.textContent = t.caption.value ?? "");
 			});
-			let l = f(e, o, s, c), u = new MutationObserver(() => {
-				l(), l = f(e, o, s, c);
+			let l = p(e.el, a, s, c), u = new MutationObserver(() => {
+				l(), l = p(e.el, a, s, c);
 			});
-			return u.observe(e, { childList: !0 }), () => {
+			return u.observe(e.el, { childList: !0 }), () => {
 				u.disconnect(), l();
 			};
-		}), o`<div class="scroll-container"></div>`;
+		}), s`<div class="scroll-container"></div>`;
 	},
 	styles: [
-		t,
-		e,
-		n
-	],
-	tag: "bit-table"
+		r,
+		n,
+		i
+	]
 });
 //#endregion
-export { p as TABLE_TAG, u as TD_TAG, l as TH_TAG, c as TR_TAG };
+export { m as TABLE_TAG, d as TD_TAG, u as TH_TAG, l as TR_TAG };
 
 //# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -1 +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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"}
+{"version":3,"file":"table.js","names":[],"sources":["../src/content/table/table.ts"],"sourcesContent":["import { define, effect, html, onMount } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { type PropBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\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\nexport const TABLE_TAG = define<BitTableProps>('bit-table', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    bordered: false,\n    caption: undefined,\n    loading: false,\n    sticky: false,\n    striped: false,\n  } satisfies PropBundle<BitTableProps>,\n  setup({ host, props }) {\n    host.bind('attr', {\n      ariaBusy: () => (props.loading.value ? 'true' : null),\n      ariaLabel: () => 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.el, thead, tbody, tfoot);\n      // Rebuild whenever direct children change (rows added / removed / reordered)\n      const structureObserver = new MutationObserver(() => {\n        cleanupCellObservers();\n        cleanupCellObservers = buildTable(host.el, thead, tbody, tfoot);\n      });\n\n      structureObserver.observe(host.el, { 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});\n"],"mappings":"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"}

package/dist/tabs.cjs

@@ -1,17 +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`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./packages/craftit/dist/controls/press-control.cjs`),r=require(`./packages/craftit/dist/controls/list-control.cjs`),i=require(`./packages/craftit/dist/controls/list-key-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const a=require(`./disclosure/tabs/tabs.css?inline.cjs`);let o=require(`@vielzeug/craftit`);var s=(0,o.createContext)(`TabsContext`),c={...e.themableBundle,...e.sizableBundle,activation:`auto`,label:void 0,orientation:`horizontal`,value:void 0,variant:void 0},l=(0,o.define)(`bit-tabs`,{props:c,setup({emit:e,host:t,props:a,shadowRoot:c}){let l=(0,o.ref)(),u=(0,o.ref)(),d=(0,o.signal)(a.value.value),f=(0,o.signal)(0),p=(0,o.computed)(()=>a.activation.value===`manual`),m=(0,o.computed)(()=>a.orientation.value===`vertical`);t.bind(`attr`,{value:()=>d.value??null});let h=()=>[...t.el.querySelectorAll(`:scope > bit-tab-item[slot="tabs"]`)],g=()=>h().filter(e=>!e.hasAttribute(`disabled`)),_=e=>{e&&(e.shadowRoot?.querySelector(`[role="tab"]`)??e).focus()},v=(t,n=!1)=>{d.value=t,n&&t&&e(`change`,{value:t})},y=()=>{let e=h();if(e.length===0)return;let t=d.value;t&&e.some(e=>e.getAttribute(`value`)===t&&!e.hasAttribute(`disabled`))||v(e.find(e=>!e.hasAttribute(`disabled`))?.getAttribute(`value`)??void 0,!1)};(0,o.watch)(a.value,e=>{d.value=e,y()});let b=r.n({getIndex:()=>f.value,getItems:()=>g(),isItemDisabled:e=>e.hasAttribute(`disabled`),loop:!0,setIndex:e=>{f.value=e;let t=g()[e];if(_(t),!p.value){let e=t?.getAttribute(`value`);e&&v(e,!0)}}});(0,o.provide)(s,{color:a.color,orientation:(0,o.computed)(()=>a.orientation.value??`horizontal`),size:a.size,value:d,variant:a.variant});let x=e=>{let t=u.value,n=l.value;if(!t||!n||!e)return;let r=e.getBoundingClientRect(),i=n.getBoundingClientRect();m.value?(t.style.top=`${r.top-i.top+n.scrollTop}px`,t.style.height=`${r.height}px`,t.style.left=`0`,t.style.width=``):(t.style.left=`${r.left-i.left+n.scrollLeft}px`,t.style.width=`${r.width}px`,t.style.top=``,t.style.height=``)},S=()=>{let e=d.value;e&&x(h().find(t=>t.getAttribute(`value`)===e))};(0,o.watch)(d,()=>requestAnimationFrame(S));let C=e=>{let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`bit-tab-item`);if(!n||n.hasAttribute(`disabled`)||n.closest(`bit-tabs`)!==t.el)return;let r=n.getAttribute(`value`);!r||r===d.value||v(r,!0)},w=n.t({disabled:()=>!p.value,onPress:()=>{let e=g().find(e=>e===document.activeElement||e.shadowRoot?.activeElement===document.activeElement)?.getAttribute(`value`);e&&e!==d.value&&v(e,!0)}}),T=i.n({control:b,keys:()=>m.value?{next:[`ArrowDown`],prev:[`ArrowUp`]}:{next:[`ArrowRight`,`ArrowDown`],prev:[`ArrowLeft`,`ArrowUp`]}});return t.bind(`on`,{click:C,keydown:e=>{let t=g();if(t.length===0)return;let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`bit-tab-item`),r=n?t.indexOf(n):-1;r>=0&&(f.value=r),!T.handleKeydown(e)&&w.handleKeydown(e)}}),(0,o.onMount)(()=>{let e=()=>{y(),S()},t=c?.querySelector(`slot[name="tabs"]`);return t&&t.addEventListener(`slotchange`,e),e(),requestAnimationFrame(e),()=>{t&&t.removeEventListener(`slotchange`,e)}}),o.html`
       <div class="tablist-wrapper">
         <div
           role="tablist"
-          ref=${a}
+          ref=${l}
           part="tablist"
-          :aria-orientation="${()=>i.orientation.value}"
-          :aria-label="${()=>i.label.value??null}">
+          :aria-orientation="${()=>a.orientation.value}"
+          :aria-label="${()=>a.label.value??null}">
           <slot name="tabs"></slot>
         </div>
-        <div class="indicator" ref=${o} part="indicator"></div>
+        <div class="indicator" ref=${u} 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;
+    `},styles:[t.colorThemeMixin,a.default]});exports.TABS_CTX=s,exports.TABS_TAG=l;
 //# sourceMappingURL=tabs.cjs.map

package/dist/tabs.cjs.map

@@ -1 +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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"}
+{"version":3,"file":"tabs.cjs","names":[],"sources":["../src/disclosure/tabs/tabs.ts"],"sourcesContent":["import {\n  define,\n  computed,\n  createContext,\n  html,\n  onMount,\n  provide,\n  ref,\n  signal,\n  type ReadonlySignal,\n  watch,\n} from '@vielzeug/craftit';\nimport { createListControl, createListKeyControl, createPressControl } from '@vielzeug/craftit/controls';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { sizableBundle, themableBundle, type PropBundle } from '../../inputs/shared/bundles';\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\nconst tabsProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  activation: 'auto',\n  label: undefined,\n  orientation: 'horizontal',\n  value: undefined,\n  variant: undefined,\n} satisfies PropBundle<BitTabsProps>;\n\n/**\n * Tabs container. Manages tab selection and syncs state to child tab items and panels.\n *\n * @element bit-tabs\n * @element bit-tab-item - Child element for tab buttons (auto-discovered)\n * @element bit-tab-panel - Child element for tab content (auto-discovered)\n *\n * @attr {string} value - The value of the currently selected tab\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @fires change - Emitted when the active tab changes with detail: { value: string }\n *\n * @slot tabs - Place `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 = define<BitTabsProps, BitTabsEvents>('bit-tabs', {\n  props: tabsProps,\n  setup({ emit, host, props, shadowRoot }) {\n    const tablistRef = ref<HTMLElement>();\n    const indicatorRef = ref<HTMLElement>();\n    const selectedValue = signal<string | undefined>(props.value.value);\n    const focusedIndex = signal(0);\n    const isManualActivation = computed(() => props.activation.value === 'manual');\n    const isVertical = computed(() => props.orientation.value === 'vertical');\n\n    host.bind('attr', {\n      value: () => selectedValue.value ?? null,\n    });\n\n    const getTabs = () => [...host.el.querySelectorAll<HTMLElement>(':scope > bit-tab-item[slot=\"tabs\"]')];\n    const getEnabledTabs = () => getTabs().filter((t) => !t.hasAttribute('disabled'));\n    const focusTab = (tab: HTMLElement | undefined) => {\n      if (!tab) return;\n\n      const focusable = tab.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? tab;\n\n      focusable.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      selectedValue.value = value;\n\n      if (shouldEmit && value) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const tabs = getTabs();\n\n      if (tabs.length === 0) return; // No tabs yet, keep current selection\n\n      const current = selectedValue.value;\n      const hasCurrent = current\n        ? tabs.some((tab) => tab.getAttribute('value') === current && !tab.hasAttribute('disabled'))\n        : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = tabs.find((tab) => !tab.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      setSelection(firstEnabled, false);\n    };\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // List Control for Keyboard Navigation\n    // ────────────────────────────────────────────────────────────────\n\n    const listControl = createListControl({\n      getIndex: () => focusedIndex.value,\n      getItems: () => getEnabledTabs(),\n      isItemDisabled: (tab: HTMLElement) => tab.hasAttribute('disabled'),\n      loop: true,\n      setIndex: (index) => {\n        focusedIndex.value = index;\n\n        const tabs = getEnabledTabs();\n        const nextTab = tabs[index];\n\n        focusTab(nextTab);\n\n        if (!isManualActivation.value) {\n          const value = nextTab?.getAttribute('value');\n\n          if (value) setSelection(value, true);\n        }\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context & Indicator Management\n    // ────────────────────────────────────────────────────────────────\n\n    provide(TABS_CTX, {\n      color: props.color,\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      value: selectedValue,\n      variant: props.variant,\n    });\n\n    const moveIndicator = (activeTab: HTMLElement | undefined) => {\n      const indicator = indicatorRef.value;\n      const tablist = tablistRef.value;\n\n      if (!indicator || !tablist || !activeTab) return;\n\n      const tabRect = activeTab.getBoundingClientRect();\n      const listRect = tablist.getBoundingClientRect();\n\n      if (isVertical.value) {\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        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\n    const updateIndicator = () => {\n      const value = selectedValue.value;\n\n      if (!value) return;\n\n      const activeTab = getTabs().find((t) => t.getAttribute('value') === value);\n\n      moveIndicator(activeTab);\n    };\n\n    watch(selectedValue, () => requestAnimationFrame(updateIndicator));\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const handleTabClick = (e: Event) => {\n      const tab = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'bit-tab-item');\n\n      if (!tab || tab.hasAttribute('disabled')) return;\n\n      // Guard: only respond to tab-items that belong to THIS tabs instance\n      if (tab.closest('bit-tabs') !== host.el) return;\n\n      const value = tab.getAttribute('value');\n\n      if (!value || value === selectedValue.value) return;\n\n      setSelection(value, true);\n    };\n\n    const activateFocusedTab = (): void => {\n      const tabs = getEnabledTabs();\n      const focusedTab = tabs.find(\n        (tab) => tab === document.activeElement || tab.shadowRoot?.activeElement === document.activeElement,\n      );\n      const focusedValue = focusedTab?.getAttribute('value');\n\n      if (focusedValue && focusedValue !== selectedValue.value) setSelection(focusedValue, true);\n    };\n\n    const manualActivationPress = createPressControl({\n      disabled: () => !isManualActivation.value,\n      onPress: activateFocusedTab,\n    });\n\n    const tabListKeys = createListKeyControl({\n      control: listControl,\n      keys: () => {\n        if (isVertical.value) {\n          return {\n            next: ['ArrowDown'],\n            prev: ['ArrowUp'],\n          };\n        }\n\n        return {\n          next: ['ArrowRight', 'ArrowDown'],\n          prev: ['ArrowLeft', 'ArrowUp'],\n        };\n      },\n    });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const tabs = getEnabledTabs();\n\n      if (tabs.length === 0) return;\n\n      const path = e.composedPath();\n      const activeTabFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'bit-tab-item',\n      );\n\n      const focused = activeTabFromEvent ? tabs.indexOf(activeTabFromEvent) : -1;\n\n      if (focused >= 0) focusedIndex.value = focused;\n\n      if (tabListKeys.handleKeydown(e)) return;\n\n      manualActivationPress.handleKeydown(e);\n    };\n\n    host.bind('on', {\n      click: handleTabClick,\n      keydown: handleKeydown,\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    onMount(() => {\n      const syncSelection = () => {\n        ensureSelection();\n        updateIndicator();\n      };\n\n      const tabsSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tabs\"]');\n\n      if (tabsSlot) {\n        tabsSlot.addEventListener('slotchange', syncSelection);\n      }\n\n      syncSelection();\n      requestAnimationFrame(syncSelection);\n\n      return () => {\n        if (tabsSlot) {\n          tabsSlot.removeEventListener('slotchange', syncSelection);\n        }\n      };\n    });\n\n    return html`\n      <div class=\"tablist-wrapper\">\n        <div\n          role=\"tablist\"\n          ref=${tablistRef}\n          part=\"tablist\"\n          :aria-orientation=\"${() => props.orientation.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});\n"],"mappings":"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"}