@auronui/vue 1.0.13 → 1.0.15

package/dist/components/table/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\n\ndefineProps<{\n  columnIndex?: number\n  sortDirection?: 'ascending' | 'descending' | 'none'\n}>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n</script>\n\n<template>\n  <th\n    role=\"columnheader\"\n    :class=\"slotFns.column()\"\n    :data-col-index=\"columnIndex\"\n    :aria-sort=\"sortDirection\"\n  >\n    <slot />\n  </th>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TableHeaderCell.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  columnIndex?: number\n  sortDirection?: 'ascending' | 'descending' | 'none'\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    column: ClassValue\n  }>\n}>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n</script>\n\n<template>\n  <th\n    role=\"columnheader\"\n    :class=\"composeClassName(slotFns.column(), props.classNames?.column)\"\n    :data-col-index=\"columnIndex\"\n    :aria-sort=\"sortDirection\"\n  >\n    <slot />\n  </th>\n</template>\n"],"mappings":""}

package/dist/components/table/TableHeaderCell.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import { useTableInject } from "./table.context.js";
-import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
 import { tableVariants } from "@auronui/styles";
 //#region src/components/table/TableHeaderCell.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-col-index", "aria-sort"];
@@ -7,15 +8,17 @@ var TableHeaderCell_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 	__name: "TableHeaderCell",
 	props: {
 		columnIndex: {},
-		sortDirection: {}
+		sortDirection: {},
+		classNames: {}
 	},
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = computed(() => tableVariants({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("th", {
 				role: "columnheader",
-				class: normalizeClass(slotFns.value.column()),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.column(), props.classNames?.column)),
 				"data-col-index": __props.columnIndex,
 				"aria-sort": __props.sortDirection
 			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);

package/dist/components/table/TableHeaderCell.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\n\ndefineProps<{\n  columnIndex?: number\n  sortDirection?: 'ascending' | 'descending' | 'none'\n}>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n</script>\n\n<template>\n  <th\n    role=\"columnheader\"\n    :class=\"slotFns.column()\"\n    :data-col-index=\"columnIndex\"\n    :aria-sort=\"sortDirection\"\n  >\n    <slot />\n  </th>\n</template>\n"],"mappings":";;;;;;;;;;;;EAUA,MAAM,MAAM,gBAAe;EAC3B,MAAM,UAAU,eAAe,cAAc,EAAE,SAAS,IAAI,QAAQ,OAAO,CAAC,CAAA;;uBAI1E,mBAOK,MAAA;IANH,MAAK;IACJ,OAAK,eAAE,QAAA,MAAQ,QAAM,CAAA;IACrB,kBAAgB,QAAA;IAChB,aAAW,QAAA;OAEZ,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA"}
+{"version":3,"file":"TableHeaderCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  columnIndex?: number\n  sortDirection?: 'ascending' | 'descending' | 'none'\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    column: ClassValue\n  }>\n}>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n</script>\n\n<template>\n  <th\n    role=\"columnheader\"\n    :class=\"composeClassName(slotFns.column(), props.classNames?.column)\"\n    :data-col-index=\"columnIndex\"\n    :aria-sort=\"sortDirection\"\n  >\n    <slot />\n  </th>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EASd,MAAM,MAAM,gBAAe;EAC3B,MAAM,UAAU,eAAe,cAAc,EAAE,SAAS,IAAI,QAAQ,OAAO,CAAC,CAAA;;uBAI1E,mBAOK,MAAA;IANH,MAAK;IACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,QAAM,EAAI,MAAM,YAAY,OAAM,CAAA;IAClE,kBAAgB,QAAA;IAChB,aAAW,QAAA;OAEZ,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","names":[],"sources":["../../../src/components/table/TableRow.vue"],"sourcesContent":["<!-- Thin public re-export for consumers who want to compose their own body.\n     Renders a single tr with role=\"row\" and the row slot style. -->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n</script>\n\n<template>\n  <tr\n    role=\"row\"\n    :class=\"slotFns.row()\"\n  >\n    <slot />\n  </tr>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TableRow.js","names":[],"sources":["../../../src/components/table/TableRow.vue"],"sourcesContent":["<!-- Thin public re-export for consumers who want to compose their own body.\n     Renders a single tr with role=\"row\" and the row slot style. -->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\ninterface Props {\n  /** Additional classes to apply to the root element */\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    row: ClassValue\n  }>\n}\n\nconst props = defineProps<Props>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n</script>\n\n<template>\n  <tr\n    role=\"row\"\n    :class=\"composeClassName(slotFns.row(), props.class, props.classNames?.row)\"\n  >\n    <slot />\n  </tr>\n</template>\n"],"mappings":""}

package/dist/components/table/TableRow.vue_vue_type_script_setup_true_lang.js

@@ -1,16 +1,22 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import { useTableInject } from "./table.context.js";
-import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
 import { tableVariants } from "@auronui/styles";
 //#region src/components/table/TableRow.vue?vue&type=script&setup=true&lang.ts
 var TableRow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "TableRow",
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = computed(() => tableVariants({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("tr", {
 				role: "row",
-				class: normalizeClass(slotFns.value.row())
+				class: normalizeClass(unref(composeClassName)(slotFns.value.row(), props.class, props.classNames?.row))
 			}, [renderSlot(_ctx.$slots, "default")], 2);
 		};
 	}

package/dist/components/table/TableRow.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/table/TableRow.vue"],"sourcesContent":["<!-- Thin public re-export for consumers who want to compose their own body.\n     Renders a single tr with role=\"row\" and the row slot style. -->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n</script>\n\n<template>\n  <tr\n    role=\"row\"\n    :class=\"slotFns.row()\"\n  >\n    <slot />\n  </tr>\n</template>\n"],"mappings":";;;;;;;EAOA,MAAM,MAAM,gBAAe;EAC3B,MAAM,UAAU,eAAe,cAAc,EAAE,SAAS,IAAI,QAAQ,OAAO,CAAC,CAAA;;uBAI1E,mBAKK,MAAA;IAJH,MAAK;IACJ,OAAK,eAAE,QAAA,MAAQ,KAAG,CAAA;OAEnB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"TableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/table/TableRow.vue"],"sourcesContent":["<!-- Thin public re-export for consumers who want to compose their own body.\n     Renders a single tr with role=\"row\" and the row slot style. -->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\ninterface Props {\n  /** Additional classes to apply to the root element */\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    row: ClassValue\n  }>\n}\n\nconst props = defineProps<Props>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n</script>\n\n<template>\n  <tr\n    role=\"row\"\n    :class=\"composeClassName(slotFns.row(), props.class, props.classNames?.row)\"\n  >\n    <slot />\n  </tr>\n</template>\n"],"mappings":";;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAEd,MAAM,MAAM,gBAAe;EAC3B,MAAM,UAAU,eAAe,cAAc,EAAE,SAAS,IAAI,QAAQ,OAAO,CAAC,CAAA;;uBAI1E,mBAKK,MAAA;IAJH,MAAK;IACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,KAAG,EAAI,MAAM,OAAO,MAAM,YAAY,IAAG,CAAA;OAE1E,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/components/table/TableVirtualBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableVirtualBody.js","names":[],"sources":["../../../src/components/table/TableVirtualBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useVirtualizer } from '@tanstack/vue-virtual'\nimport { FlexRender, type Row, type RowData } from '@tanstack/vue-table'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\n\nconst props = defineProps<{\n  scrollElement: HTMLElement | null\n  estimatedRowHeight?: number\n  overscan?: number\n}>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n\nconst rows = computed(() => ctx.table.getRowModel().rows)\n\nconst virtualizer = useVirtualizer({\n  get count() {\n    return rows.value.length\n  },\n  getScrollElement: () => props.scrollElement,\n  estimateSize: () => props.estimatedRowHeight ?? 44,\n  overscan: props.overscan ?? 8,\n})\n\nconst virtualItems = computed(() => virtualizer.value.getVirtualItems())\nconst totalSize = computed(() => virtualizer.value.getTotalSize())\n\n// Spacer heights above and below the rendered slice.\n// This is the standard TanStack Virtual table pattern: pad via empty <tr> rows\n// so the <tbody> stays inside <table> (valid HTML) and inherits column widths.\nconst paddingTop = computed(() => {\n  const items = virtualItems.value\n  return items.length > 0 ? items[0].start : 0\n})\nconst paddingBottom = computed(() => {\n  const items = virtualItems.value\n  if (items.length === 0) return 0\n  return totalSize.value - items[items.length - 1].end\n})\n\nconst columnCount = computed(() => ctx.table.getVisibleLeafColumns().length)\n\nfunction onRowKeydown(row: Row<RowData>, event: KeyboardEvent) {\n  if (event.key !== ' ') return\n  if (ctx.selectionMode.value === 'none') return\n  const target = event.target as HTMLElement\n  if (target.tagName === 'INPUT' || target.closest('[role=\"checkbox\"]')) return\n  event.preventDefault()\n  if (ctx.selectionMode.value === 'single') {\n    ctx.table.setRowSelection({ [row.id]: true })\n  } else {\n    row.toggleSelected()\n  }\n}\n\ndefineExpose({\n  scrollToIndex: (index: number) =>\n    virtualizer.value.scrollToIndex(index, { align: 'auto' }),\n})\n</script>\n\n<template>\n  <!--\n    Uses <tbody> + spacer <tr> rows so virtualized rows stay inside valid\n    <table> structure and inherit column widths from <thead>.\n    paddingTop/paddingBottom spacers replace the absolute-positioning approach.\n  -->\n  <tbody :class=\"slotFns.body()\">\n    <tr\n      v-if=\"paddingTop > 0\"\n      aria-hidden=\"true\"\n    >\n      <td\n        :colspan=\"columnCount\"\n        :style=\"{ height: `${paddingTop}px`, padding: 0, border: 'none' }\"\n      />\n    </tr>\n    <tr\n      v-for=\"vItem in virtualItems\"\n      :key=\"rows[vItem.index].id\"\n      role=\"row\"\n      :class=\"slotFns.row()\"\n      :aria-rowindex=\"vItem.index + 1\"\n      :aria-selected=\"\n        ctx.selectionMode.value !== 'none'\n          ? rows[vItem.index].getIsSelected()\n          : undefined\n      \"\n      :data-state=\"rows[vItem.index].getIsSelected() ? 'checked' : undefined\"\n      @click=\"(e: MouseEvent) => ctx.handleRowClick(vItem.index, e)\"\n      @keydown=\"(e: KeyboardEvent) => onRowKeydown(rows[vItem.index] as Row<RowData>, e)\"\n    >\n      <td\n        v-for=\"(cell, colIndex) in rows[vItem.index].getVisibleCells()\"\n        :key=\"cell.id\"\n        role=\"gridcell\"\n        :class=\"slotFns.cell()\"\n        :data-row-index=\"vItem.index\"\n        :data-col-index=\"colIndex\"\n        :tabindex=\"\n          ctx.activeCell.value !== null &&\n            ctx.activeCell.value.rowIndex === vItem.index &&\n            ctx.activeCell.value.columnIndex === colIndex\n            ? 0\n            : ctx.activeCell.value === null && vItem.index === 0 && colIndex === 0\n              ? 0\n              : -1\n        \"\n      >\n        <FlexRender\n          :render=\"cell.column.columnDef.cell\"\n          :props=\"cell.getContext()\"\n        />\n      </td>\n    </tr>\n    <tr\n      v-if=\"paddingBottom > 0\"\n      aria-hidden=\"true\"\n    >\n      <td\n        :colspan=\"columnCount\"\n        :style=\"{ height: `${paddingBottom}px`, padding: 0, border: 'none' }\"\n      />\n    </tr>\n  </tbody>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TableVirtualBody.js","names":[],"sources":["../../../src/components/table/TableVirtualBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useVirtualizer } from '@tanstack/vue-virtual'\nimport { FlexRender, type Row, type RowData } from '@tanstack/vue-table'\nimport { tableVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTableInject } from './table.context'\n\nconst props = defineProps<{\n  scrollElement: HTMLElement | null\n  estimatedRowHeight?: number\n  overscan?: number\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    body: ClassValue\n    row: ClassValue\n    cell: ClassValue\n  }>\n}>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n\nconst rows = computed(() => ctx.table.getRowModel().rows)\n\nconst virtualizer = useVirtualizer({\n  get count() {\n    return rows.value.length\n  },\n  getScrollElement: () => props.scrollElement,\n  estimateSize: () => props.estimatedRowHeight ?? 44,\n  overscan: props.overscan ?? 8,\n})\n\nconst virtualItems = computed(() => virtualizer.value.getVirtualItems())\nconst totalSize = computed(() => virtualizer.value.getTotalSize())\n\n// Spacer heights above and below the rendered slice.\n// This is the standard TanStack Virtual table pattern: pad via empty <tr> rows\n// so the <tbody> stays inside <table> (valid HTML) and inherits column widths.\nconst paddingTop = computed(() => {\n  const items = virtualItems.value\n  return items.length > 0 ? items[0].start : 0\n})\nconst paddingBottom = computed(() => {\n  const items = virtualItems.value\n  if (items.length === 0) return 0\n  return totalSize.value - items[items.length - 1].end\n})\n\nconst columnCount = computed(() => ctx.table.getVisibleLeafColumns().length)\n\nfunction onRowKeydown(row: Row<RowData>, event: KeyboardEvent) {\n  if (event.key !== ' ') return\n  if (ctx.selectionMode.value === 'none') return\n  const target = event.target as HTMLElement\n  if (target.tagName === 'INPUT' || target.closest('[role=\"checkbox\"]')) return\n  event.preventDefault()\n  if (ctx.selectionMode.value === 'single') {\n    ctx.table.setRowSelection({ [row.id]: true })\n  } else {\n    row.toggleSelected()\n  }\n}\n\ndefineExpose({\n  scrollToIndex: (index: number) =>\n    virtualizer.value.scrollToIndex(index, { align: 'auto' }),\n})\n</script>\n\n<template>\n  <!--\n    Uses <tbody> + spacer <tr> rows so virtualized rows stay inside valid\n    <table> structure and inherit column widths from <thead>.\n    paddingTop/paddingBottom spacers replace the absolute-positioning approach.\n  -->\n  <tbody :class=\"composeClassName(slotFns.body(), props.classNames?.body)\">\n    <tr\n      v-if=\"paddingTop > 0\"\n      aria-hidden=\"true\"\n    >\n      <td\n        :colspan=\"columnCount\"\n        :style=\"{ height: `${paddingTop}px`, padding: 0, border: 'none' }\"\n      />\n    </tr>\n    <tr\n      v-for=\"vItem in virtualItems\"\n      :key=\"rows[vItem.index].id\"\n      role=\"row\"\n      :class=\"composeClassName(slotFns.row(), props.classNames?.row)\"\n      :aria-rowindex=\"vItem.index + 1\"\n      :aria-selected=\"\n        ctx.selectionMode.value !== 'none'\n          ? rows[vItem.index].getIsSelected()\n          : undefined\n      \"\n      :data-state=\"rows[vItem.index].getIsSelected() ? 'checked' : undefined\"\n      @click=\"(e: MouseEvent) => ctx.handleRowClick(vItem.index, e)\"\n      @keydown=\"(e: KeyboardEvent) => onRowKeydown(rows[vItem.index] as Row<RowData>, e)\"\n    >\n      <td\n        v-for=\"(cell, colIndex) in rows[vItem.index].getVisibleCells()\"\n        :key=\"cell.id\"\n        role=\"gridcell\"\n        :class=\"composeClassName(slotFns.cell(), props.classNames?.cell)\"\n        :data-row-index=\"vItem.index\"\n        :data-col-index=\"colIndex\"\n        :tabindex=\"\n          ctx.activeCell.value !== null &&\n            ctx.activeCell.value.rowIndex === vItem.index &&\n            ctx.activeCell.value.columnIndex === colIndex\n            ? 0\n            : ctx.activeCell.value === null && vItem.index === 0 && colIndex === 0\n              ? 0\n              : -1\n        \"\n      >\n        <FlexRender\n          :render=\"cell.column.columnDef.cell\"\n          :props=\"cell.getContext()\"\n        />\n      </td>\n    </tr>\n    <tr\n      v-if=\"paddingBottom > 0\"\n      aria-hidden=\"true\"\n    >\n      <td\n        :colspan=\"columnCount\"\n        :style=\"{ height: `${paddingBottom}px`, padding: 0, border: 'none' }\"\n      />\n    </tr>\n  </tbody>\n</template>\n"],"mappings":""}

package/dist/components/table/TableVirtualBody.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import { FlexRender } from "../../node_modules/.pnpm/@tanstack_vue-table@8.21.3_vue@3.5.32_typescript@6.0.2_/node_modules/@tanstack/vue-table/build/lib/index.js";
 import { useTableInject } from "./table.context.js";
 import { useVirtualizer } from "../../node_modules/.pnpm/@tanstack_vue-virtual@3.13.23_vue@3.5.32_typescript@6.0.2_/node_modules/@tanstack/vue-virtual/dist/esm/index.js";
@@ -31,7 +32,8 @@ var TableVirtualBody_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	props: {
 		scrollElement: {},
 		estimatedRowHeight: {},
-		overscan: {}
+		overscan: {},
+		classNames: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -69,7 +71,7 @@ var TableVirtualBody_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		}
 		__expose({ scrollToIndex: (index) => virtualizer.value.scrollToIndex(index, { align: "auto" }) });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("tbody", { class: normalizeClass(slotFns.value.body()) }, [
+			return openBlock(), createElementBlock("tbody", { class: normalizeClass(unref(composeClassName)(slotFns.value.body(), props.classNames?.body)) }, [
 				paddingTop.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_1, [createElementVNode("td", {
 					colspan: columnCount.value,
 					style: normalizeStyle({
@@ -82,7 +84,7 @@ var TableVirtualBody_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					return openBlock(), createElementBlock("tr", {
 						key: rows.value[vItem.index].id,
 						role: "row",
-						class: normalizeClass(slotFns.value.row()),
+						class: normalizeClass(unref(composeClassName)(slotFns.value.row(), props.classNames?.row)),
 						"aria-rowindex": vItem.index + 1,
 						"aria-selected": unref(ctx).selectionMode.value !== "none" ? rows.value[vItem.index].getIsSelected() : void 0,
 						"data-state": rows.value[vItem.index].getIsSelected() ? "checked" : void 0,
@@ -92,7 +94,7 @@ var TableVirtualBody_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						return openBlock(), createElementBlock("td", {
 							key: cell.id,
 							role: "gridcell",
-							class: normalizeClass(slotFns.value.cell()),
+							class: normalizeClass(unref(composeClassName)(slotFns.value.cell(), props.classNames?.cell)),
 							"data-row-index": vItem.index,
 							"data-col-index": colIndex,
 							tabindex: unref(ctx).activeCell.value !== null && unref(ctx).activeCell.value.rowIndex === vItem.index && unref(ctx).activeCell.value.columnIndex === colIndex ? 0 : unref(ctx).activeCell.value === null && vItem.index === 0 && colIndex === 0 ? 0 : -1

package/dist/components/table/TableVirtualBody.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableVirtualBody.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/table/TableVirtualBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useVirtualizer } from '@tanstack/vue-virtual'\nimport { FlexRender, type Row, type RowData } from '@tanstack/vue-table'\nimport { tableVariants } from '@auronui/styles'\nimport { useTableInject } from './table.context'\n\nconst props = defineProps<{\n  scrollElement: HTMLElement | null\n  estimatedRowHeight?: number\n  overscan?: number\n}>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n\nconst rows = computed(() => ctx.table.getRowModel().rows)\n\nconst virtualizer = useVirtualizer({\n  get count() {\n    return rows.value.length\n  },\n  getScrollElement: () => props.scrollElement,\n  estimateSize: () => props.estimatedRowHeight ?? 44,\n  overscan: props.overscan ?? 8,\n})\n\nconst virtualItems = computed(() => virtualizer.value.getVirtualItems())\nconst totalSize = computed(() => virtualizer.value.getTotalSize())\n\n// Spacer heights above and below the rendered slice.\n// This is the standard TanStack Virtual table pattern: pad via empty <tr> rows\n// so the <tbody> stays inside <table> (valid HTML) and inherits column widths.\nconst paddingTop = computed(() => {\n  const items = virtualItems.value\n  return items.length > 0 ? items[0].start : 0\n})\nconst paddingBottom = computed(() => {\n  const items = virtualItems.value\n  if (items.length === 0) return 0\n  return totalSize.value - items[items.length - 1].end\n})\n\nconst columnCount = computed(() => ctx.table.getVisibleLeafColumns().length)\n\nfunction onRowKeydown(row: Row<RowData>, event: KeyboardEvent) {\n  if (event.key !== ' ') return\n  if (ctx.selectionMode.value === 'none') return\n  const target = event.target as HTMLElement\n  if (target.tagName === 'INPUT' || target.closest('[role=\"checkbox\"]')) return\n  event.preventDefault()\n  if (ctx.selectionMode.value === 'single') {\n    ctx.table.setRowSelection({ [row.id]: true })\n  } else {\n    row.toggleSelected()\n  }\n}\n\ndefineExpose({\n  scrollToIndex: (index: number) =>\n    virtualizer.value.scrollToIndex(index, { align: 'auto' }),\n})\n</script>\n\n<template>\n  <!--\n    Uses <tbody> + spacer <tr> rows so virtualized rows stay inside valid\n    <table> structure and inherit column widths from <thead>.\n    paddingTop/paddingBottom spacers replace the absolute-positioning approach.\n  -->\n  <tbody :class=\"slotFns.body()\">\n    <tr\n      v-if=\"paddingTop > 0\"\n      aria-hidden=\"true\"\n    >\n      <td\n        :colspan=\"columnCount\"\n        :style=\"{ height: `${paddingTop}px`, padding: 0, border: 'none' }\"\n      />\n    </tr>\n    <tr\n      v-for=\"vItem in virtualItems\"\n      :key=\"rows[vItem.index].id\"\n      role=\"row\"\n      :class=\"slotFns.row()\"\n      :aria-rowindex=\"vItem.index + 1\"\n      :aria-selected=\"\n        ctx.selectionMode.value !== 'none'\n          ? rows[vItem.index].getIsSelected()\n          : undefined\n      \"\n      :data-state=\"rows[vItem.index].getIsSelected() ? 'checked' : undefined\"\n      @click=\"(e: MouseEvent) => ctx.handleRowClick(vItem.index, e)\"\n      @keydown=\"(e: KeyboardEvent) => onRowKeydown(rows[vItem.index] as Row<RowData>, e)\"\n    >\n      <td\n        v-for=\"(cell, colIndex) in rows[vItem.index].getVisibleCells()\"\n        :key=\"cell.id\"\n        role=\"gridcell\"\n        :class=\"slotFns.cell()\"\n        :data-row-index=\"vItem.index\"\n        :data-col-index=\"colIndex\"\n        :tabindex=\"\n          ctx.activeCell.value !== null &&\n            ctx.activeCell.value.rowIndex === vItem.index &&\n            ctx.activeCell.value.columnIndex === colIndex\n            ? 0\n            : ctx.activeCell.value === null && vItem.index === 0 && colIndex === 0\n              ? 0\n              : -1\n        \"\n      >\n        <FlexRender\n          :render=\"cell.column.columnDef.cell\"\n          :props=\"cell.getContext()\"\n        />\n      </td>\n    </tr>\n    <tr\n      v-if=\"paddingBottom > 0\"\n      aria-hidden=\"true\"\n    >\n      <td\n        :colspan=\"columnCount\"\n        :style=\"{ height: `${paddingBottom}px`, padding: 0, border: 'none' }\"\n      />\n    </tr>\n  </tbody>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TableVirtualBody.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/table/TableVirtualBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useVirtualizer } from '@tanstack/vue-virtual'\nimport { FlexRender, type Row, type RowData } from '@tanstack/vue-table'\nimport { tableVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTableInject } from './table.context'\n\nconst props = defineProps<{\n  scrollElement: HTMLElement | null\n  estimatedRowHeight?: number\n  overscan?: number\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    body: ClassValue\n    row: ClassValue\n    cell: ClassValue\n  }>\n}>()\n\nconst ctx = useTableInject()\nconst slotFns = computed(() => tableVariants({ variant: ctx.variant.value }))\n\nconst rows = computed(() => ctx.table.getRowModel().rows)\n\nconst virtualizer = useVirtualizer({\n  get count() {\n    return rows.value.length\n  },\n  getScrollElement: () => props.scrollElement,\n  estimateSize: () => props.estimatedRowHeight ?? 44,\n  overscan: props.overscan ?? 8,\n})\n\nconst virtualItems = computed(() => virtualizer.value.getVirtualItems())\nconst totalSize = computed(() => virtualizer.value.getTotalSize())\n\n// Spacer heights above and below the rendered slice.\n// This is the standard TanStack Virtual table pattern: pad via empty <tr> rows\n// so the <tbody> stays inside <table> (valid HTML) and inherits column widths.\nconst paddingTop = computed(() => {\n  const items = virtualItems.value\n  return items.length > 0 ? items[0].start : 0\n})\nconst paddingBottom = computed(() => {\n  const items = virtualItems.value\n  if (items.length === 0) return 0\n  return totalSize.value - items[items.length - 1].end\n})\n\nconst columnCount = computed(() => ctx.table.getVisibleLeafColumns().length)\n\nfunction onRowKeydown(row: Row<RowData>, event: KeyboardEvent) {\n  if (event.key !== ' ') return\n  if (ctx.selectionMode.value === 'none') return\n  const target = event.target as HTMLElement\n  if (target.tagName === 'INPUT' || target.closest('[role=\"checkbox\"]')) return\n  event.preventDefault()\n  if (ctx.selectionMode.value === 'single') {\n    ctx.table.setRowSelection({ [row.id]: true })\n  } else {\n    row.toggleSelected()\n  }\n}\n\ndefineExpose({\n  scrollToIndex: (index: number) =>\n    virtualizer.value.scrollToIndex(index, { align: 'auto' }),\n})\n</script>\n\n<template>\n  <!--\n    Uses <tbody> + spacer <tr> rows so virtualized rows stay inside valid\n    <table> structure and inherit column widths from <thead>.\n    paddingTop/paddingBottom spacers replace the absolute-positioning approach.\n  -->\n  <tbody :class=\"composeClassName(slotFns.body(), props.classNames?.body)\">\n    <tr\n      v-if=\"paddingTop > 0\"\n      aria-hidden=\"true\"\n    >\n      <td\n        :colspan=\"columnCount\"\n        :style=\"{ height: `${paddingTop}px`, padding: 0, border: 'none' }\"\n      />\n    </tr>\n    <tr\n      v-for=\"vItem in virtualItems\"\n      :key=\"rows[vItem.index].id\"\n      role=\"row\"\n      :class=\"composeClassName(slotFns.row(), props.classNames?.row)\"\n      :aria-rowindex=\"vItem.index + 1\"\n      :aria-selected=\"\n        ctx.selectionMode.value !== 'none'\n          ? rows[vItem.index].getIsSelected()\n          : undefined\n      \"\n      :data-state=\"rows[vItem.index].getIsSelected() ? 'checked' : undefined\"\n      @click=\"(e: MouseEvent) => ctx.handleRowClick(vItem.index, e)\"\n      @keydown=\"(e: KeyboardEvent) => onRowKeydown(rows[vItem.index] as Row<RowData>, e)\"\n    >\n      <td\n        v-for=\"(cell, colIndex) in rows[vItem.index].getVisibleCells()\"\n        :key=\"cell.id\"\n        role=\"gridcell\"\n        :class=\"composeClassName(slotFns.cell(), props.classNames?.cell)\"\n        :data-row-index=\"vItem.index\"\n        :data-col-index=\"colIndex\"\n        :tabindex=\"\n          ctx.activeCell.value !== null &&\n            ctx.activeCell.value.rowIndex === vItem.index &&\n            ctx.activeCell.value.columnIndex === colIndex\n            ? 0\n            : ctx.activeCell.value === null && vItem.index === 0 && colIndex === 0\n              ? 0\n              : -1\n        \"\n      >\n        <FlexRender\n          :render=\"cell.column.columnDef.cell\"\n          :props=\"cell.getContext()\"\n        />\n      </td>\n    </tr>\n    <tr\n      v-if=\"paddingBottom > 0\"\n      aria-hidden=\"true\"\n    >\n      <td\n        :colspan=\"columnCount\"\n        :style=\"{ height: `${paddingBottom}px`, padding: 0, border: 'none' }\"\n      />\n    </tr>\n  </tbody>\n</template>\n"],"mappings":"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"}

package/dist/components/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","names":[],"sources":["../../../src/components/tabs/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsTrigger } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  value: string\n  disabled?: boolean\n  class?: string\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsTrigger\n    :value=\"props.value\"\n    :disabled=\"props.disabled\"\n    :data-tab-value=\"props.value\"\n    :class=\"composeClassName(ctx.slotFns.value.tab(), props.class)\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Tab.js","names":[],"sources":["../../../src/components/tabs/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsTrigger } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  value: string\n  disabled?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots. */\n  classNames?: Partial<{\n    tab: ClassValue\n  }>\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsTrigger\n    :value=\"props.value\"\n    :disabled=\"props.disabled\"\n    :data-tab-value=\"props.value\"\n    :class=\"composeClassName(ctx.slotFns.value.tab(), props.class, props.classNames?.tab)\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"],"mappings":""}

package/dist/components/tabs/Tab.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,8 @@ var Tab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 	props: {
 		value: {},
 		disabled: { type: Boolean },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -18,7 +19,7 @@ var Tab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 				value: props.value,
 				disabled: props.disabled,
 				"data-tab-value": props.value,
-				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tab(), props.class))
+				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tab(), props.class, props.classNames?.tab))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3

package/dist/components/tabs/Tab.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tabs/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsTrigger } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  value: string\n  disabled?: boolean\n  class?: string\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsTrigger\n    :value=\"props.value\"\n    :disabled=\"props.disabled\"\n    :data-tab-value=\"props.value\"\n    :class=\"composeClassName(ctx.slotFns.value.tab(), props.class)\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAMd,MAAM,MAAM,eAAc;;uBAIxB,YAOc,MAAA,YAAA,EAAA;IANX,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,kBAAgB,MAAM;IACtB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,KAAG,EAAI,MAAM,MAAK,CAAA;;2BAErD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"Tab.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tabs/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsTrigger } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  value: string\n  disabled?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots. */\n  classNames?: Partial<{\n    tab: ClassValue\n  }>\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsTrigger\n    :value=\"props.value\"\n    :disabled=\"props.disabled\"\n    :data-tab-value=\"props.value\"\n    :class=\"composeClassName(ctx.slotFns.value.tab(), props.class, props.classNames?.tab)\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAUd,MAAM,MAAM,eAAc;;uBAIxB,YAOc,MAAA,YAAA,EAAA;IANX,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,kBAAgB,MAAM;IACtB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,KAAG,EAAI,MAAM,OAAO,MAAM,YAAY,IAAG,CAAA;;2BAE5E,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/tabs/TabIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabIndicator.js","names":[],"sources":["../../../src/components/tabs/TabIndicator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsIndicator } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{ class?: string }>()\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsIndicator :class=\"composeClassName(ctx.slotFns.value.tabIndicator(), props.class)\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"TabIndicator.js","names":[],"sources":["../../../src/components/tabs/TabIndicator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsIndicator } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{ tabIndicator: ClassValue }>\n}>()\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsIndicator :class=\"composeClassName(ctx.slotFns.value.tabIndicator(), props.class, props.classNames?.tabIndicator)\" />\n</template>\n"],"mappings":""}

package/dist/components/tabs/TabIndicator.vue_vue_type_script_setup_true_lang.js

@@ -5,12 +5,15 @@ import { TabsIndicator } from "reka-ui";
 //#region src/components/tabs/TabIndicator.vue?vue&type=script&setup=true&lang.ts
 var TabIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "TabIndicator",
-	props: { class: {} },
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useTabsInject();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(TabsIndicator), { class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabIndicator(), props.class)) }, null, 8, ["class"]);
+			return openBlock(), createBlock(unref(TabsIndicator), { class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabIndicator(), props.class, props.classNames?.tabIndicator)) }, null, 8, ["class"]);
 		};
 	}
 });

package/dist/components/tabs/TabIndicator.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabIndicator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tabs/TabIndicator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsIndicator } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{ class?: string }>()\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsIndicator :class=\"composeClassName(ctx.slotFns.value.tabIndicator(), props.class)\" />\n</template>\n"],"mappings":";;;;;;;;;EAKA,MAAM,QAAQ;EACd,MAAM,MAAM,eAAc;;uBAIxB,YAA0F,MAAA,cAAA,EAAA,EAA1E,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,cAAY,EAAI,MAAM,MAAK,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA"}
+{"version":3,"file":"TabIndicator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tabs/TabIndicator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsIndicator } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{ tabIndicator: ClassValue }>\n}>()\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsIndicator :class=\"composeClassName(ctx.slotFns.value.tabIndicator(), props.class, props.classNames?.tabIndicator)\" />\n</template>\n"],"mappings":";;;;;;;;;;;;EAKA,MAAM,QAAQ;EAKd,MAAM,MAAM,eAAc;;uBAIxB,YAA0H,MAAA,cAAA,EAAA,EAA1G,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,cAAY,EAAI,MAAM,OAAO,MAAM,YAAY,aAAY,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA"}

package/dist/components/tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","names":[],"sources":["../../../src/components/tabs/TabList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, onMounted, watch } from 'vue'\nimport { useTemplateRef } from 'vue'\nimport { TabsList } from 'reka-ui'\nimport { useResizeObserver, onClickOutside } from '@vueuse/core'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\nimport Button from '../button/Button.vue'\n\nconst props = defineProps<{\n  loop?: boolean\n  overflow?: 'arrows' | 'dropdown'\n  class?: string\n}>()\n\nconst ctx = useTabsInject()\n\n// ── Arrows mode ─────────────────────────────────────────────────────────────\nconst scrollWrapperEl = useTemplateRef<HTMLElement>('scrollWrapperEl')\nconst canScrollLeft = ref(false)\nconst canScrollRight = ref(false)\n\nfunction updateScrollButtons() {\n  const el = scrollWrapperEl.value\n  if (!el) { canScrollLeft.value = false; canScrollRight.value = false; return }\n  canScrollLeft.value = el.scrollLeft > 1\n  canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 1\n}\n\nfunction scrollTabs(dir: 'left' | 'right') {\n  const el = scrollWrapperEl.value\n  if (!el) return\n  el.scrollBy({ left: dir === 'left' ? -200 : 200, behavior: 'smooth' })\n  // Poll briefly after smooth scroll starts so button states update\n  setTimeout(updateScrollButtons, 150)\n  setTimeout(updateScrollButtons, 350)\n}\n\nwatch(scrollWrapperEl, (el, oldEl) => {\n  if (oldEl) oldEl.removeEventListener('scroll', updateScrollButtons)\n  if (el) {\n    el.addEventListener('scroll', updateScrollButtons, { passive: true })\n    nextTick(updateScrollButtons)\n  }\n}, { immediate: true })\n\nuseResizeObserver(scrollWrapperEl, () => nextTick(updateScrollButtons))\n\n// ── Dropdown mode ────────────────────────────────────────────────────────────\ninterface OverflowTab {\n  value: string\n  label: string\n  disabled: boolean\n}\n\nconst containerEl = useTemplateRef<HTMLElement>('containerEl')\n// Button component ref — use .$el to reach the underlying DOM element for offsetWidth\nconst moreBtnEl = useTemplateRef<InstanceType<typeof Button>>('moreBtnEl')\nconst dropdownEl = useTemplateRef<HTMLElement>('dropdownEl')\n\nconst hiddenTabs = ref<OverflowTab[]>([])\nconst dropdownOpen = ref(false)\nconst hasOverflow = computed(() => hiddenTabs.value.length > 0)\n// Pre-measured natural width of the more button (measured once on mount before it's visible)\nlet moreBtnNaturalWidth = 48\n\nonClickOutside(dropdownEl, () => { dropdownOpen.value = false })\n\nfunction computeOverflow() {\n  if (!containerEl.value) return\n\n  const allTabs = Array.from(\n    containerEl.value.querySelectorAll('[data-tab-value]'),\n  ) as HTMLElement[]\n\n  // Reveal all tabs first\n  allTabs.forEach(t => t.removeAttribute('data-overflow-hidden'))\n\n  // Tabs use w-full and shrink to share the container width, so offsetWidth after\n  // a normal render would be containerWidth/n — useless for overflow detection.\n  // Force each tab to its natural content width for measurement only (no paint flash:\n  // all DOM reads/writes happen synchronously within this JS task before the next frame).\n  const listEl = containerEl.value.querySelector('[role=\"tablist\"]') as HTMLElement | null\n  if (listEl) {\n    listEl.style.overflow = 'visible'\n    allTabs.forEach(t => { t.style.flexShrink = '0'; t.style.width = 'auto' })\n    void listEl.offsetWidth // force reflow so offsetWidth reads below are accurate\n  }\n\n  const containerWidth = containerEl.value.clientWidth\n  const tabWidths = allTabs.map(t => t.offsetWidth)\n  const totalWidth = tabWidths.reduce((sum, w) => sum + w, 0)\n\n  // Restore layout before any early-return so tabs always look correct\n  if (listEl) {\n    listEl.style.overflow = ''\n    allTabs.forEach(t => { t.style.flexShrink = ''; t.style.width = '' })\n  }\n\n  if (totalWidth <= containerWidth) {\n    hiddenTabs.value = []\n    return\n  }\n\n  // More button is in-flow (display:none when no overflow, display:flex when visible).\n  // Use the pre-measured natural width so the calculation is accurate on the first run\n  // before the button becomes visible.\n  const available = containerWidth - moreBtnNaturalWidth\n\n  let accumulated = 0\n  const newHidden: OverflowTab[] = []\n  const visibleEls: HTMLElement[] = []\n\n  for (let i = 0; i < allTabs.length; i++) {\n    const tab = allTabs[i]\n    const w = tabWidths[i]\n    if (accumulated + w <= available) {\n      accumulated += w\n      visibleEls.push(tab)\n    } else {\n      newHidden.push({\n        value: tab.getAttribute('data-tab-value') ?? '',\n        label: tab.textContent?.trim() ?? '',\n        disabled: tab.hasAttribute('data-disabled') || tab.getAttribute('aria-disabled') === 'true',\n      })\n      tab.setAttribute('data-overflow-hidden', '')\n    }\n  }\n\n  // If the active tab ended up hidden, swap it with the last visible tab\n  const activeValue = ctx.currentValue.value\n  if (activeValue) {\n    const hiddenActiveIdx = newHidden.findIndex(t => t.value === activeValue)\n    if (hiddenActiveIdx !== -1 && visibleEls.length > 0) {\n      const displacedEl = visibleEls[visibleEls.length - 1]\n      const activeEl = allTabs.find(t => t.getAttribute('data-tab-value') === activeValue)\n\n      if (displacedEl && activeEl) {\n        // Swap: make displaced tab hidden, active tab visible\n        displacedEl.setAttribute('data-overflow-hidden', '')\n        activeEl.removeAttribute('data-overflow-hidden')\n\n        const displaced: OverflowTab = {\n          value: displacedEl.getAttribute('data-tab-value') ?? '',\n          label: displacedEl.textContent?.trim() ?? '',\n          disabled: displacedEl.hasAttribute('data-disabled') || displacedEl.getAttribute('aria-disabled') === 'true',\n        }\n        newHidden.splice(hiddenActiveIdx, 1)\n        newHidden.unshift(displaced)\n      }\n    }\n  }\n\n  hiddenTabs.value = newHidden\n}\n\nuseResizeObserver(containerEl, () => nextTick(computeOverflow))\nonMounted(() => {\n  // Pre-measure the more button's natural width before it becomes visible (display:none).\n  // Temporarily show it, read offsetWidth, then hide again — happens before first paint.\n  const btnEl = (moreBtnEl.value as InstanceType<typeof Button> | null)?.$el as HTMLElement | null\n  if (btnEl) {\n    btnEl.style.display = 'flex'\n    void btnEl.offsetWidth\n    moreBtnNaturalWidth = btnEl.offsetWidth\n    btnEl.style.display = ''\n  }\n  nextTick(computeOverflow)\n})\n\n// Recompute when the active tab changes so the active tab is always visible\nwatch(() => ctx.currentValue.value, () => {\n  if (props.overflow === 'dropdown') nextTick(computeOverflow)\n})\n\n// When overflow state first transitions false→true the more button enters the flex flow,\n// narrowing the container. Re-run once so the tab count reflects the reduced available space.\nwatch(hasOverflow, () => {\n  if (props.overflow === 'dropdown') nextTick(computeOverflow)\n})\n\nfunction selectOverflowTab(value: string) {\n  ctx.changeTab(value)\n  dropdownOpen.value = false\n}\n</script>\n\n<template>\n  <!-- ── Default (no overflow behaviour) ───────────────────────────────────── -->\n  <TabsList\n    v-if=\"!props.overflow\"\n    :loop=\"props.loop ?? true\"\n    :class=\"composeClassName(ctx.slotFns.value.tabList(), props.class)\"\n  >\n    <slot />\n  </TabsList>\n\n  <!-- ── Arrows mode ────────────────────────────────────────────────────────── -->\n  <div\n    v-else-if=\"props.overflow === 'arrows'\"\n    class=\"tabs__list-container tabs__list-container--arrows\"\n    :class=\"{ 'has-left': canScrollLeft, 'has-right': canScrollRight }\"\n  >\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      radius=\"full\"\n      :is-icon-only=\"true\"\n      :class=\"composeClassName('tabs__arrow tabs__arrow--left', canScrollLeft && 'is-visible')\"\n      aria-label=\"Scroll tabs left\"\n      tabindex=\"-1\"\n      @click=\"scrollTabs('left')\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M9 11L5 7L9 3\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </Button>\n\n    <div ref=\"scrollWrapperEl\" class=\"tabs__scroll-wrapper\">\n      <TabsList\n        :loop=\"props.loop ?? true\"\n        :class=\"composeClassName(ctx.slotFns.value.tabList(), 'tabs__list--scroll', props.class)\"\n      >\n        <slot />\n      </TabsList>\n    </div>\n\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      radius=\"full\"\n      :is-icon-only=\"true\"\n      :class=\"composeClassName('tabs__arrow tabs__arrow--right', canScrollRight && 'is-visible')\"\n      aria-label=\"Scroll tabs right\"\n      tabindex=\"-1\"\n      @click=\"scrollTabs('right')\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M5 3L9 7L5 11\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </Button>\n  </div>\n\n  <!-- ── Dropdown mode ──────────────────────────────────────────────────────── -->\n  <div\n    v-else-if=\"props.overflow === 'dropdown'\"\n    ref=\"containerEl\"\n    class=\"tabs__list-container tabs__list-container--dropdown\"\n  >\n    <TabsList\n      :loop=\"props.loop ?? true\"\n      :class=\"composeClassName(ctx.slotFns.value.tabList(), 'tabs__list--clipped', props.class)\"\n    >\n      <slot />\n    </TabsList>\n\n    <!-- Always rendered so offsetWidth is measurable; visibility toggled via CSS -->\n    <div\n      ref=\"dropdownEl\"\n      class=\"tabs__more\"\n      :class=\"{ 'tabs__more--visible': hasOverflow }\"\n    >\n      <Button\n        ref=\"moreBtnEl\"\n        variant=\"secondary\"\n        size=\"sm\"\n        radius=\"full\"\n        class=\"tabs__more-btn\"\n        :aria-expanded=\"dropdownOpen\"\n        aria-haspopup=\"menu\"\n        @click=\"dropdownOpen = !dropdownOpen\"\n      >\n        +{{ hiddenTabs.length }}\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M2 4L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </Button>\n\n      <div v-if=\"dropdownOpen\" class=\"tabs__overflow-menu\" role=\"menu\">\n        <Button\n          v-for=\"tab in hiddenTabs\"\n          :key=\"tab.value\"\n          variant=\"ghost\"\n          radius=\"lg\"\n          class=\"tabs__overflow-item\"\n          role=\"menuitem\"\n          :disabled=\"tab.disabled\"\n          @click=\"selectOverflowTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TabList.js","names":[],"sources":["../../../src/components/tabs/TabList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, onMounted, watch } from 'vue'\nimport { useTemplateRef } from 'vue'\nimport { TabsList } from 'reka-ui'\nimport { useResizeObserver, onClickOutside } from '@vueuse/core'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\nimport Button from '../button/Button.vue'\n\nconst props = defineProps<{\n  loop?: boolean\n  overflow?: 'arrows' | 'dropdown'\n  class?: ClassValue\n  /** Override classes on individual slots */\n  classNames?: Partial<{\n    tabList: ClassValue\n  }>\n}>()\n\nconst ctx = useTabsInject()\n\n// ── Arrows mode ─────────────────────────────────────────────────────────────\nconst scrollWrapperEl = useTemplateRef<HTMLElement>('scrollWrapperEl')\nconst canScrollLeft = ref(false)\nconst canScrollRight = ref(false)\n\nfunction updateScrollButtons() {\n  const el = scrollWrapperEl.value\n  if (!el) { canScrollLeft.value = false; canScrollRight.value = false; return }\n  canScrollLeft.value = el.scrollLeft > 1\n  canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 1\n}\n\nfunction scrollTabs(dir: 'left' | 'right') {\n  const el = scrollWrapperEl.value\n  if (!el) return\n  el.scrollBy({ left: dir === 'left' ? -200 : 200, behavior: 'smooth' })\n  // Poll briefly after smooth scroll starts so button states update\n  setTimeout(updateScrollButtons, 150)\n  setTimeout(updateScrollButtons, 350)\n}\n\nwatch(scrollWrapperEl, (el, oldEl) => {\n  if (oldEl) oldEl.removeEventListener('scroll', updateScrollButtons)\n  if (el) {\n    el.addEventListener('scroll', updateScrollButtons, { passive: true })\n    nextTick(updateScrollButtons)\n  }\n}, { immediate: true })\n\nuseResizeObserver(scrollWrapperEl, () => nextTick(updateScrollButtons))\n\n// ── Dropdown mode ────────────────────────────────────────────────────────────\ninterface OverflowTab {\n  value: string\n  label: string\n  disabled: boolean\n}\n\nconst containerEl = useTemplateRef<HTMLElement>('containerEl')\nconst dropdownEl = useTemplateRef<HTMLElement>('dropdownEl')\n\nconst hiddenTabs = ref<OverflowTab[]>([])\nconst dropdownOpen = ref(false)\nconst hasOverflow = computed(() => hiddenTabs.value.length > 0)\n\nonClickOutside(dropdownEl, () => { dropdownOpen.value = false })\n\nfunction computeOverflow() {\n  if (!containerEl.value) return\n\n  const allTabs = Array.from(\n    containerEl.value.querySelectorAll('[data-tab-value]'),\n  ) as HTMLElement[]\n\n  // Reveal all tabs first\n  allTabs.forEach(t => t.removeAttribute('data-overflow-hidden'))\n\n  // Tabs use w-full and shrink to share the container width, so offsetWidth after\n  // a normal render would be containerWidth/n — useless for overflow detection.\n  // Force each tab to its natural content width for measurement only (no paint flash:\n  // all DOM reads/writes happen synchronously within this JS task before the next frame).\n  const listEl = containerEl.value.querySelector('[role=\"tablist\"]') as HTMLElement | null\n  if (listEl) {\n    listEl.style.overflow = 'visible'\n    allTabs.forEach(t => { t.style.flexShrink = '0'; t.style.width = 'auto' })\n    void listEl.offsetWidth // force reflow so offsetWidth reads below are accurate\n  }\n\n  // Measure the more button's real width by temporarily revealing its wrapper.\n  // The wrapper is display:none when there's no overflow, so we can't rely on a\n  // pre-measured value — measure it here while the (always-visible) container holds it.\n  let moreWidth = 0\n  const moreEl = dropdownEl.value\n  if (moreEl) {\n    const prevDisplay = moreEl.style.display\n    moreEl.style.display = 'flex'\n    void moreEl.offsetWidth\n    moreWidth = moreEl.offsetWidth\n    moreEl.style.display = prevDisplay\n  }\n\n  // clientWidth includes the container's horizontal padding; the flex children only\n  // get the content box. Subtract padding so measurements compare against real space.\n  const cs = getComputedStyle(containerEl.value)\n  const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight)\n  const gap = parseFloat(cs.columnGap) || 0\n  const contentWidth = containerEl.value.clientWidth - padX\n\n  const tabWidths = allTabs.map(t => t.offsetWidth)\n  const totalWidth = tabWidths.reduce((sum, w) => sum + w, 0)\n\n  // Restore layout before any early-return so tabs always look correct\n  if (listEl) {\n    listEl.style.overflow = ''\n    allTabs.forEach(t => { t.style.flexShrink = ''; t.style.width = '' })\n  }\n\n  if (totalWidth <= contentWidth) {\n    hiddenTabs.value = []\n    return\n  }\n\n  // When the more button is shown it sits beside the clipped list, separated by `gap`.\n  // Reserve its width + the gap (+1px sub-pixel safety) so the last visible tab can\n  // never extend under the button.\n  const available = contentWidth - moreWidth - gap - 1\n\n  let accumulated = 0\n  const newHidden: OverflowTab[] = []\n  const visibleEls: HTMLElement[] = []\n\n  for (let i = 0; i < allTabs.length; i++) {\n    const tab = allTabs[i]\n    const w = tabWidths[i]\n    if (accumulated + w <= available) {\n      accumulated += w\n      visibleEls.push(tab)\n    } else {\n      newHidden.push({\n        value: tab.getAttribute('data-tab-value') ?? '',\n        label: tab.textContent?.trim() ?? '',\n        disabled: tab.hasAttribute('data-disabled') || tab.getAttribute('aria-disabled') === 'true',\n      })\n      tab.setAttribute('data-overflow-hidden', '')\n    }\n  }\n\n  // If the active tab ended up hidden, swap it with the last visible tab\n  const activeValue = ctx.currentValue.value\n  if (activeValue) {\n    const hiddenActiveIdx = newHidden.findIndex(t => t.value === activeValue)\n    if (hiddenActiveIdx !== -1 && visibleEls.length > 0) {\n      const displacedEl = visibleEls[visibleEls.length - 1]\n      const activeEl = allTabs.find(t => t.getAttribute('data-tab-value') === activeValue)\n\n      if (displacedEl && activeEl) {\n        // Swap: make displaced tab hidden, active tab visible\n        displacedEl.setAttribute('data-overflow-hidden', '')\n        activeEl.removeAttribute('data-overflow-hidden')\n\n        const displaced: OverflowTab = {\n          value: displacedEl.getAttribute('data-tab-value') ?? '',\n          label: displacedEl.textContent?.trim() ?? '',\n          disabled: displacedEl.hasAttribute('data-disabled') || displacedEl.getAttribute('aria-disabled') === 'true',\n        }\n        newHidden.splice(hiddenActiveIdx, 1)\n        newHidden.unshift(displaced)\n      }\n    }\n  }\n\n  hiddenTabs.value = newHidden\n}\n\nuseResizeObserver(containerEl, () => nextTick(computeOverflow))\nonMounted(() => {\n  nextTick(computeOverflow)\n})\n\n// Recompute when the active tab changes so the active tab is always visible\nwatch(() => ctx.currentValue.value, () => {\n  if (props.overflow === 'dropdown') nextTick(computeOverflow)\n})\n\n// Safety re-check when overflow toggles. computeOverflow already reserves the more\n// button's width up front, so this is idempotent — it just guards against layout\n// settling (e.g. a scrollbar appearing) on the false→true transition.\nwatch(hasOverflow, () => {\n  if (props.overflow === 'dropdown') nextTick(computeOverflow)\n})\n\nfunction selectOverflowTab(value: string) {\n  ctx.changeTab(value)\n  dropdownOpen.value = false\n}\n</script>\n\n<template>\n  <!-- ── Default (no overflow behaviour) ───────────────────────────────────── -->\n  <TabsList\n    v-if=\"!props.overflow\"\n    :loop=\"props.loop ?? true\"\n    :class=\"composeClassName(ctx.slotFns.value.tabList(), props.class, props.classNames?.tabList)\"\n  >\n    <slot />\n  </TabsList>\n\n  <!-- ── Arrows mode ────────────────────────────────────────────────────────── -->\n  <div\n    v-else-if=\"props.overflow === 'arrows'\"\n    class=\"tabs__list-container tabs__list-container--arrows\"\n    :class=\"{ 'has-left': canScrollLeft, 'has-right': canScrollRight }\"\n  >\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      radius=\"full\"\n      :is-icon-only=\"true\"\n      :class=\"composeClassName('tabs__arrow tabs__arrow--left', canScrollLeft && 'is-visible')\"\n      aria-label=\"Scroll tabs left\"\n      tabindex=\"-1\"\n      @click=\"scrollTabs('left')\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M9 11L5 7L9 3\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </Button>\n\n    <div ref=\"scrollWrapperEl\" class=\"tabs__scroll-wrapper\">\n      <TabsList\n        :loop=\"props.loop ?? true\"\n        :class=\"composeClassName(ctx.slotFns.value.tabList(), 'tabs__list--scroll', props.class, props.classNames?.tabList)\"\n      >\n        <slot />\n      </TabsList>\n    </div>\n\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      radius=\"full\"\n      :is-icon-only=\"true\"\n      :class=\"composeClassName('tabs__arrow tabs__arrow--right', canScrollRight && 'is-visible')\"\n      aria-label=\"Scroll tabs right\"\n      tabindex=\"-1\"\n      @click=\"scrollTabs('right')\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M5 3L9 7L5 11\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </Button>\n  </div>\n\n  <!-- ── Dropdown mode ──────────────────────────────────────────────────────── -->\n  <div\n    v-else-if=\"props.overflow === 'dropdown'\"\n    ref=\"containerEl\"\n    class=\"tabs__list-container tabs__list-container--dropdown\"\n  >\n    <TabsList\n      :loop=\"props.loop ?? true\"\n      :class=\"composeClassName(ctx.slotFns.value.tabList(), 'tabs__list--clipped', props.class, props.classNames?.tabList)\"\n    >\n      <slot />\n    </TabsList>\n\n    <!-- Always rendered so offsetWidth is measurable; visibility toggled via CSS -->\n    <div\n      ref=\"dropdownEl\"\n      class=\"tabs__more\"\n      :class=\"{ 'tabs__more--visible': hasOverflow }\"\n    >\n      <Button\n        variant=\"secondary\"\n        size=\"sm\"\n        radius=\"full\"\n        class=\"tabs__more-btn\"\n        :aria-expanded=\"dropdownOpen\"\n        aria-haspopup=\"menu\"\n        @click=\"dropdownOpen = !dropdownOpen\"\n      >\n        +{{ hiddenTabs.length }}\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M2 4L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </Button>\n\n      <div v-if=\"dropdownOpen\" class=\"tabs__overflow-menu\" role=\"menu\">\n        <Button\n          v-for=\"tab in hiddenTabs\"\n          :key=\"tab.value\"\n          variant=\"ghost\"\n          radius=\"lg\"\n          class=\"tabs__overflow-item\"\n          role=\"menuitem\"\n          :disabled=\"tab.disabled\"\n          @click=\"selectOverflowTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tabs/TabList.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,8 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	props: {
 		loop: { type: Boolean },
 		overflow: {},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -52,12 +53,10 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		}, { immediate: true });
 		useResizeObserver(scrollWrapperEl, () => nextTick(updateScrollButtons));
 		const containerEl = useTemplateRef("containerEl");
-		const moreBtnEl = useTemplateRef("moreBtnEl");
 		const dropdownEl = useTemplateRef("dropdownEl");
 		const hiddenTabs = ref([]);
 		const dropdownOpen = ref(false);
 		const hasOverflow = computed(() => hiddenTabs.value.length > 0);
-		let moreBtnNaturalWidth = 48;
 		onClickOutside(dropdownEl, () => {
 			dropdownOpen.value = false;
 		});
@@ -74,7 +73,19 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				});
 				listEl.offsetWidth;
 			}
-			const containerWidth = containerEl.value.clientWidth;
+			let moreWidth = 0;
+			const moreEl = dropdownEl.value;
+			if (moreEl) {
+				const prevDisplay = moreEl.style.display;
+				moreEl.style.display = "flex";
+				moreEl.offsetWidth;
+				moreWidth = moreEl.offsetWidth;
+				moreEl.style.display = prevDisplay;
+			}
+			const cs = getComputedStyle(containerEl.value);
+			const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+			const gap = parseFloat(cs.columnGap) || 0;
+			const contentWidth = containerEl.value.clientWidth - padX;
 			const tabWidths = allTabs.map((t) => t.offsetWidth);
 			const totalWidth = tabWidths.reduce((sum, w) => sum + w, 0);
 			if (listEl) {
@@ -84,11 +95,11 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					t.style.width = "";
 				});
 			}
-			if (totalWidth <= containerWidth) {
+			if (totalWidth <= contentWidth) {
 				hiddenTabs.value = [];
 				return;
 			}
-			const available = containerWidth - moreBtnNaturalWidth;
+			const available = contentWidth - moreWidth - gap - 1;
 			let accumulated = 0;
 			const newHidden = [];
 			const visibleEls = [];
@@ -130,13 +141,6 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		}
 		useResizeObserver(containerEl, () => nextTick(computeOverflow));
 		onMounted(() => {
-			const btnEl = moreBtnEl.value?.$el;
-			if (btnEl) {
-				btnEl.style.display = "flex";
-				btnEl.offsetWidth;
-				moreBtnNaturalWidth = btnEl.offsetWidth;
-				btnEl.style.display = "";
-			}
 			nextTick(computeOverflow);
 		});
 		watch(() => ctx.currentValue.value, () => {
@@ -153,7 +157,7 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			return !props.overflow ? (openBlock(), createBlock(unref(TabsList), {
 				key: 0,
 				loop: props.loop ?? true,
-				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabList(), props.class))
+				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabList(), props.class, props.classNames?.tabList))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
@@ -195,7 +199,7 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					class: "tabs__scroll-wrapper"
 				}, [createVNode(unref(TabsList), {
 					loop: props.loop ?? true,
-					class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabList(), "tabs__list--scroll", props.class))
+					class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabList(), "tabs__list--scroll", props.class, props.classNames?.tabList))
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
@@ -232,7 +236,7 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				class: "tabs__list-container tabs__list-container--dropdown"
 			}, [createVNode(unref(TabsList), {
 				loop: props.loop ?? true,
-				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabList(), "tabs__list--clipped", props.class))
+				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabList(), "tabs__list--clipped", props.class, props.classNames?.tabList))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
@@ -241,8 +245,6 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				ref: dropdownEl,
 				class: normalizeClass(["tabs__more", { "tabs__more--visible": hasOverflow.value }])
 			}, [createVNode(Button_default, {
-				ref_key: "moreBtnEl",
-				ref: moreBtnEl,
 				variant: "secondary",
 				size: "sm",
 				radius: "full",

package/dist/components/tabs/TabList.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tabs/TabList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, onMounted, watch } from 'vue'\nimport { useTemplateRef } from 'vue'\nimport { TabsList } from 'reka-ui'\nimport { useResizeObserver, onClickOutside } from '@vueuse/core'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\nimport Button from '../button/Button.vue'\n\nconst props = defineProps<{\n  loop?: boolean\n  overflow?: 'arrows' | 'dropdown'\n  class?: string\n}>()\n\nconst ctx = useTabsInject()\n\n// ── Arrows mode ─────────────────────────────────────────────────────────────\nconst scrollWrapperEl = useTemplateRef<HTMLElement>('scrollWrapperEl')\nconst canScrollLeft = ref(false)\nconst canScrollRight = ref(false)\n\nfunction updateScrollButtons() {\n  const el = scrollWrapperEl.value\n  if (!el) { canScrollLeft.value = false; canScrollRight.value = false; return }\n  canScrollLeft.value = el.scrollLeft > 1\n  canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 1\n}\n\nfunction scrollTabs(dir: 'left' | 'right') {\n  const el = scrollWrapperEl.value\n  if (!el) return\n  el.scrollBy({ left: dir === 'left' ? -200 : 200, behavior: 'smooth' })\n  // Poll briefly after smooth scroll starts so button states update\n  setTimeout(updateScrollButtons, 150)\n  setTimeout(updateScrollButtons, 350)\n}\n\nwatch(scrollWrapperEl, (el, oldEl) => {\n  if (oldEl) oldEl.removeEventListener('scroll', updateScrollButtons)\n  if (el) {\n    el.addEventListener('scroll', updateScrollButtons, { passive: true })\n    nextTick(updateScrollButtons)\n  }\n}, { immediate: true })\n\nuseResizeObserver(scrollWrapperEl, () => nextTick(updateScrollButtons))\n\n// ── Dropdown mode ────────────────────────────────────────────────────────────\ninterface OverflowTab {\n  value: string\n  label: string\n  disabled: boolean\n}\n\nconst containerEl = useTemplateRef<HTMLElement>('containerEl')\n// Button component ref — use .$el to reach the underlying DOM element for offsetWidth\nconst moreBtnEl = useTemplateRef<InstanceType<typeof Button>>('moreBtnEl')\nconst dropdownEl = useTemplateRef<HTMLElement>('dropdownEl')\n\nconst hiddenTabs = ref<OverflowTab[]>([])\nconst dropdownOpen = ref(false)\nconst hasOverflow = computed(() => hiddenTabs.value.length > 0)\n// Pre-measured natural width of the more button (measured once on mount before it's visible)\nlet moreBtnNaturalWidth = 48\n\nonClickOutside(dropdownEl, () => { dropdownOpen.value = false })\n\nfunction computeOverflow() {\n  if (!containerEl.value) return\n\n  const allTabs = Array.from(\n    containerEl.value.querySelectorAll('[data-tab-value]'),\n  ) as HTMLElement[]\n\n  // Reveal all tabs first\n  allTabs.forEach(t => t.removeAttribute('data-overflow-hidden'))\n\n  // Tabs use w-full and shrink to share the container width, so offsetWidth after\n  // a normal render would be containerWidth/n — useless for overflow detection.\n  // Force each tab to its natural content width for measurement only (no paint flash:\n  // all DOM reads/writes happen synchronously within this JS task before the next frame).\n  const listEl = containerEl.value.querySelector('[role=\"tablist\"]') as HTMLElement | null\n  if (listEl) {\n    listEl.style.overflow = 'visible'\n    allTabs.forEach(t => { t.style.flexShrink = '0'; t.style.width = 'auto' })\n    void listEl.offsetWidth // force reflow so offsetWidth reads below are accurate\n  }\n\n  const containerWidth = containerEl.value.clientWidth\n  const tabWidths = allTabs.map(t => t.offsetWidth)\n  const totalWidth = tabWidths.reduce((sum, w) => sum + w, 0)\n\n  // Restore layout before any early-return so tabs always look correct\n  if (listEl) {\n    listEl.style.overflow = ''\n    allTabs.forEach(t => { t.style.flexShrink = ''; t.style.width = '' })\n  }\n\n  if (totalWidth <= containerWidth) {\n    hiddenTabs.value = []\n    return\n  }\n\n  // More button is in-flow (display:none when no overflow, display:flex when visible).\n  // Use the pre-measured natural width so the calculation is accurate on the first run\n  // before the button becomes visible.\n  const available = containerWidth - moreBtnNaturalWidth\n\n  let accumulated = 0\n  const newHidden: OverflowTab[] = []\n  const visibleEls: HTMLElement[] = []\n\n  for (let i = 0; i < allTabs.length; i++) {\n    const tab = allTabs[i]\n    const w = tabWidths[i]\n    if (accumulated + w <= available) {\n      accumulated += w\n      visibleEls.push(tab)\n    } else {\n      newHidden.push({\n        value: tab.getAttribute('data-tab-value') ?? '',\n        label: tab.textContent?.trim() ?? '',\n        disabled: tab.hasAttribute('data-disabled') || tab.getAttribute('aria-disabled') === 'true',\n      })\n      tab.setAttribute('data-overflow-hidden', '')\n    }\n  }\n\n  // If the active tab ended up hidden, swap it with the last visible tab\n  const activeValue = ctx.currentValue.value\n  if (activeValue) {\n    const hiddenActiveIdx = newHidden.findIndex(t => t.value === activeValue)\n    if (hiddenActiveIdx !== -1 && visibleEls.length > 0) {\n      const displacedEl = visibleEls[visibleEls.length - 1]\n      const activeEl = allTabs.find(t => t.getAttribute('data-tab-value') === activeValue)\n\n      if (displacedEl && activeEl) {\n        // Swap: make displaced tab hidden, active tab visible\n        displacedEl.setAttribute('data-overflow-hidden', '')\n        activeEl.removeAttribute('data-overflow-hidden')\n\n        const displaced: OverflowTab = {\n          value: displacedEl.getAttribute('data-tab-value') ?? '',\n          label: displacedEl.textContent?.trim() ?? '',\n          disabled: displacedEl.hasAttribute('data-disabled') || displacedEl.getAttribute('aria-disabled') === 'true',\n        }\n        newHidden.splice(hiddenActiveIdx, 1)\n        newHidden.unshift(displaced)\n      }\n    }\n  }\n\n  hiddenTabs.value = newHidden\n}\n\nuseResizeObserver(containerEl, () => nextTick(computeOverflow))\nonMounted(() => {\n  // Pre-measure the more button's natural width before it becomes visible (display:none).\n  // Temporarily show it, read offsetWidth, then hide again — happens before first paint.\n  const btnEl = (moreBtnEl.value as InstanceType<typeof Button> | null)?.$el as HTMLElement | null\n  if (btnEl) {\n    btnEl.style.display = 'flex'\n    void btnEl.offsetWidth\n    moreBtnNaturalWidth = btnEl.offsetWidth\n    btnEl.style.display = ''\n  }\n  nextTick(computeOverflow)\n})\n\n// Recompute when the active tab changes so the active tab is always visible\nwatch(() => ctx.currentValue.value, () => {\n  if (props.overflow === 'dropdown') nextTick(computeOverflow)\n})\n\n// When overflow state first transitions false→true the more button enters the flex flow,\n// narrowing the container. Re-run once so the tab count reflects the reduced available space.\nwatch(hasOverflow, () => {\n  if (props.overflow === 'dropdown') nextTick(computeOverflow)\n})\n\nfunction selectOverflowTab(value: string) {\n  ctx.changeTab(value)\n  dropdownOpen.value = false\n}\n</script>\n\n<template>\n  <!-- ── Default (no overflow behaviour) ───────────────────────────────────── -->\n  <TabsList\n    v-if=\"!props.overflow\"\n    :loop=\"props.loop ?? true\"\n    :class=\"composeClassName(ctx.slotFns.value.tabList(), props.class)\"\n  >\n    <slot />\n  </TabsList>\n\n  <!-- ── Arrows mode ────────────────────────────────────────────────────────── -->\n  <div\n    v-else-if=\"props.overflow === 'arrows'\"\n    class=\"tabs__list-container tabs__list-container--arrows\"\n    :class=\"{ 'has-left': canScrollLeft, 'has-right': canScrollRight }\"\n  >\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      radius=\"full\"\n      :is-icon-only=\"true\"\n      :class=\"composeClassName('tabs__arrow tabs__arrow--left', canScrollLeft && 'is-visible')\"\n      aria-label=\"Scroll tabs left\"\n      tabindex=\"-1\"\n      @click=\"scrollTabs('left')\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M9 11L5 7L9 3\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </Button>\n\n    <div ref=\"scrollWrapperEl\" class=\"tabs__scroll-wrapper\">\n      <TabsList\n        :loop=\"props.loop ?? true\"\n        :class=\"composeClassName(ctx.slotFns.value.tabList(), 'tabs__list--scroll', props.class)\"\n      >\n        <slot />\n      </TabsList>\n    </div>\n\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      radius=\"full\"\n      :is-icon-only=\"true\"\n      :class=\"composeClassName('tabs__arrow tabs__arrow--right', canScrollRight && 'is-visible')\"\n      aria-label=\"Scroll tabs right\"\n      tabindex=\"-1\"\n      @click=\"scrollTabs('right')\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M5 3L9 7L5 11\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </Button>\n  </div>\n\n  <!-- ── Dropdown mode ──────────────────────────────────────────────────────── -->\n  <div\n    v-else-if=\"props.overflow === 'dropdown'\"\n    ref=\"containerEl\"\n    class=\"tabs__list-container tabs__list-container--dropdown\"\n  >\n    <TabsList\n      :loop=\"props.loop ?? true\"\n      :class=\"composeClassName(ctx.slotFns.value.tabList(), 'tabs__list--clipped', props.class)\"\n    >\n      <slot />\n    </TabsList>\n\n    <!-- Always rendered so offsetWidth is measurable; visibility toggled via CSS -->\n    <div\n      ref=\"dropdownEl\"\n      class=\"tabs__more\"\n      :class=\"{ 'tabs__more--visible': hasOverflow }\"\n    >\n      <Button\n        ref=\"moreBtnEl\"\n        variant=\"secondary\"\n        size=\"sm\"\n        radius=\"full\"\n        class=\"tabs__more-btn\"\n        :aria-expanded=\"dropdownOpen\"\n        aria-haspopup=\"menu\"\n        @click=\"dropdownOpen = !dropdownOpen\"\n      >\n        +{{ hiddenTabs.length }}\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M2 4L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </Button>\n\n      <div v-if=\"dropdownOpen\" class=\"tabs__overflow-menu\" role=\"menu\">\n        <Button\n          v-for=\"tab in hiddenTabs\"\n          :key=\"tab.value\"\n          variant=\"ghost\"\n          radius=\"lg\"\n          class=\"tabs__overflow-item\"\n          role=\"menuitem\"\n          :disabled=\"tab.disabled\"\n          @click=\"selectOverflowTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TabList.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tabs/TabList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, onMounted, watch } from 'vue'\nimport { useTemplateRef } from 'vue'\nimport { TabsList } from 'reka-ui'\nimport { useResizeObserver, onClickOutside } from '@vueuse/core'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\nimport Button from '../button/Button.vue'\n\nconst props = defineProps<{\n  loop?: boolean\n  overflow?: 'arrows' | 'dropdown'\n  class?: ClassValue\n  /** Override classes on individual slots */\n  classNames?: Partial<{\n    tabList: ClassValue\n  }>\n}>()\n\nconst ctx = useTabsInject()\n\n// ── Arrows mode ─────────────────────────────────────────────────────────────\nconst scrollWrapperEl = useTemplateRef<HTMLElement>('scrollWrapperEl')\nconst canScrollLeft = ref(false)\nconst canScrollRight = ref(false)\n\nfunction updateScrollButtons() {\n  const el = scrollWrapperEl.value\n  if (!el) { canScrollLeft.value = false; canScrollRight.value = false; return }\n  canScrollLeft.value = el.scrollLeft > 1\n  canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 1\n}\n\nfunction scrollTabs(dir: 'left' | 'right') {\n  const el = scrollWrapperEl.value\n  if (!el) return\n  el.scrollBy({ left: dir === 'left' ? -200 : 200, behavior: 'smooth' })\n  // Poll briefly after smooth scroll starts so button states update\n  setTimeout(updateScrollButtons, 150)\n  setTimeout(updateScrollButtons, 350)\n}\n\nwatch(scrollWrapperEl, (el, oldEl) => {\n  if (oldEl) oldEl.removeEventListener('scroll', updateScrollButtons)\n  if (el) {\n    el.addEventListener('scroll', updateScrollButtons, { passive: true })\n    nextTick(updateScrollButtons)\n  }\n}, { immediate: true })\n\nuseResizeObserver(scrollWrapperEl, () => nextTick(updateScrollButtons))\n\n// ── Dropdown mode ────────────────────────────────────────────────────────────\ninterface OverflowTab {\n  value: string\n  label: string\n  disabled: boolean\n}\n\nconst containerEl = useTemplateRef<HTMLElement>('containerEl')\nconst dropdownEl = useTemplateRef<HTMLElement>('dropdownEl')\n\nconst hiddenTabs = ref<OverflowTab[]>([])\nconst dropdownOpen = ref(false)\nconst hasOverflow = computed(() => hiddenTabs.value.length > 0)\n\nonClickOutside(dropdownEl, () => { dropdownOpen.value = false })\n\nfunction computeOverflow() {\n  if (!containerEl.value) return\n\n  const allTabs = Array.from(\n    containerEl.value.querySelectorAll('[data-tab-value]'),\n  ) as HTMLElement[]\n\n  // Reveal all tabs first\n  allTabs.forEach(t => t.removeAttribute('data-overflow-hidden'))\n\n  // Tabs use w-full and shrink to share the container width, so offsetWidth after\n  // a normal render would be containerWidth/n — useless for overflow detection.\n  // Force each tab to its natural content width for measurement only (no paint flash:\n  // all DOM reads/writes happen synchronously within this JS task before the next frame).\n  const listEl = containerEl.value.querySelector('[role=\"tablist\"]') as HTMLElement | null\n  if (listEl) {\n    listEl.style.overflow = 'visible'\n    allTabs.forEach(t => { t.style.flexShrink = '0'; t.style.width = 'auto' })\n    void listEl.offsetWidth // force reflow so offsetWidth reads below are accurate\n  }\n\n  // Measure the more button's real width by temporarily revealing its wrapper.\n  // The wrapper is display:none when there's no overflow, so we can't rely on a\n  // pre-measured value — measure it here while the (always-visible) container holds it.\n  let moreWidth = 0\n  const moreEl = dropdownEl.value\n  if (moreEl) {\n    const prevDisplay = moreEl.style.display\n    moreEl.style.display = 'flex'\n    void moreEl.offsetWidth\n    moreWidth = moreEl.offsetWidth\n    moreEl.style.display = prevDisplay\n  }\n\n  // clientWidth includes the container's horizontal padding; the flex children only\n  // get the content box. Subtract padding so measurements compare against real space.\n  const cs = getComputedStyle(containerEl.value)\n  const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight)\n  const gap = parseFloat(cs.columnGap) || 0\n  const contentWidth = containerEl.value.clientWidth - padX\n\n  const tabWidths = allTabs.map(t => t.offsetWidth)\n  const totalWidth = tabWidths.reduce((sum, w) => sum + w, 0)\n\n  // Restore layout before any early-return so tabs always look correct\n  if (listEl) {\n    listEl.style.overflow = ''\n    allTabs.forEach(t => { t.style.flexShrink = ''; t.style.width = '' })\n  }\n\n  if (totalWidth <= contentWidth) {\n    hiddenTabs.value = []\n    return\n  }\n\n  // When the more button is shown it sits beside the clipped list, separated by `gap`.\n  // Reserve its width + the gap (+1px sub-pixel safety) so the last visible tab can\n  // never extend under the button.\n  const available = contentWidth - moreWidth - gap - 1\n\n  let accumulated = 0\n  const newHidden: OverflowTab[] = []\n  const visibleEls: HTMLElement[] = []\n\n  for (let i = 0; i < allTabs.length; i++) {\n    const tab = allTabs[i]\n    const w = tabWidths[i]\n    if (accumulated + w <= available) {\n      accumulated += w\n      visibleEls.push(tab)\n    } else {\n      newHidden.push({\n        value: tab.getAttribute('data-tab-value') ?? '',\n        label: tab.textContent?.trim() ?? '',\n        disabled: tab.hasAttribute('data-disabled') || tab.getAttribute('aria-disabled') === 'true',\n      })\n      tab.setAttribute('data-overflow-hidden', '')\n    }\n  }\n\n  // If the active tab ended up hidden, swap it with the last visible tab\n  const activeValue = ctx.currentValue.value\n  if (activeValue) {\n    const hiddenActiveIdx = newHidden.findIndex(t => t.value === activeValue)\n    if (hiddenActiveIdx !== -1 && visibleEls.length > 0) {\n      const displacedEl = visibleEls[visibleEls.length - 1]\n      const activeEl = allTabs.find(t => t.getAttribute('data-tab-value') === activeValue)\n\n      if (displacedEl && activeEl) {\n        // Swap: make displaced tab hidden, active tab visible\n        displacedEl.setAttribute('data-overflow-hidden', '')\n        activeEl.removeAttribute('data-overflow-hidden')\n\n        const displaced: OverflowTab = {\n          value: displacedEl.getAttribute('data-tab-value') ?? '',\n          label: displacedEl.textContent?.trim() ?? '',\n          disabled: displacedEl.hasAttribute('data-disabled') || displacedEl.getAttribute('aria-disabled') === 'true',\n        }\n        newHidden.splice(hiddenActiveIdx, 1)\n        newHidden.unshift(displaced)\n      }\n    }\n  }\n\n  hiddenTabs.value = newHidden\n}\n\nuseResizeObserver(containerEl, () => nextTick(computeOverflow))\nonMounted(() => {\n  nextTick(computeOverflow)\n})\n\n// Recompute when the active tab changes so the active tab is always visible\nwatch(() => ctx.currentValue.value, () => {\n  if (props.overflow === 'dropdown') nextTick(computeOverflow)\n})\n\n// Safety re-check when overflow toggles. computeOverflow already reserves the more\n// button's width up front, so this is idempotent — it just guards against layout\n// settling (e.g. a scrollbar appearing) on the false→true transition.\nwatch(hasOverflow, () => {\n  if (props.overflow === 'dropdown') nextTick(computeOverflow)\n})\n\nfunction selectOverflowTab(value: string) {\n  ctx.changeTab(value)\n  dropdownOpen.value = false\n}\n</script>\n\n<template>\n  <!-- ── Default (no overflow behaviour) ───────────────────────────────────── -->\n  <TabsList\n    v-if=\"!props.overflow\"\n    :loop=\"props.loop ?? true\"\n    :class=\"composeClassName(ctx.slotFns.value.tabList(), props.class, props.classNames?.tabList)\"\n  >\n    <slot />\n  </TabsList>\n\n  <!-- ── Arrows mode ────────────────────────────────────────────────────────── -->\n  <div\n    v-else-if=\"props.overflow === 'arrows'\"\n    class=\"tabs__list-container tabs__list-container--arrows\"\n    :class=\"{ 'has-left': canScrollLeft, 'has-right': canScrollRight }\"\n  >\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      radius=\"full\"\n      :is-icon-only=\"true\"\n      :class=\"composeClassName('tabs__arrow tabs__arrow--left', canScrollLeft && 'is-visible')\"\n      aria-label=\"Scroll tabs left\"\n      tabindex=\"-1\"\n      @click=\"scrollTabs('left')\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M9 11L5 7L9 3\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </Button>\n\n    <div ref=\"scrollWrapperEl\" class=\"tabs__scroll-wrapper\">\n      <TabsList\n        :loop=\"props.loop ?? true\"\n        :class=\"composeClassName(ctx.slotFns.value.tabList(), 'tabs__list--scroll', props.class, props.classNames?.tabList)\"\n      >\n        <slot />\n      </TabsList>\n    </div>\n\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      radius=\"full\"\n      :is-icon-only=\"true\"\n      :class=\"composeClassName('tabs__arrow tabs__arrow--right', canScrollRight && 'is-visible')\"\n      aria-label=\"Scroll tabs right\"\n      tabindex=\"-1\"\n      @click=\"scrollTabs('right')\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M5 3L9 7L5 11\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </Button>\n  </div>\n\n  <!-- ── Dropdown mode ──────────────────────────────────────────────────────── -->\n  <div\n    v-else-if=\"props.overflow === 'dropdown'\"\n    ref=\"containerEl\"\n    class=\"tabs__list-container tabs__list-container--dropdown\"\n  >\n    <TabsList\n      :loop=\"props.loop ?? true\"\n      :class=\"composeClassName(ctx.slotFns.value.tabList(), 'tabs__list--clipped', props.class, props.classNames?.tabList)\"\n    >\n      <slot />\n    </TabsList>\n\n    <!-- Always rendered so offsetWidth is measurable; visibility toggled via CSS -->\n    <div\n      ref=\"dropdownEl\"\n      class=\"tabs__more\"\n      :class=\"{ 'tabs__more--visible': hasOverflow }\"\n    >\n      <Button\n        variant=\"secondary\"\n        size=\"sm\"\n        radius=\"full\"\n        class=\"tabs__more-btn\"\n        :aria-expanded=\"dropdownOpen\"\n        aria-haspopup=\"menu\"\n        @click=\"dropdownOpen = !dropdownOpen\"\n      >\n        +{{ hiddenTabs.length }}\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M2 4L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </Button>\n\n      <div v-if=\"dropdownOpen\" class=\"tabs__overflow-menu\" role=\"menu\">\n        <Button\n          v-for=\"tab in hiddenTabs\"\n          :key=\"tab.value\"\n          variant=\"ghost\"\n          radius=\"lg\"\n          class=\"tabs__overflow-item\"\n          role=\"menuitem\"\n          :disabled=\"tab.disabled\"\n          @click=\"selectOverflowTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":[],"sources":["../../../src/components/tabs/TabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsContent } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  value: string\n  forceMount?: boolean\n  class?: string\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsContent\n    :value=\"props.value\"\n    :force-mount=\"props.forceMount\"\n    :class=\"composeClassName(ctx.slotFns.value.tabPanel(), props.class)\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../../../src/components/tabs/TabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsContent } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  value: string\n  forceMount?: boolean\n  class?: ClassValue\n  /** Custom classes to apply to specific slots */\n  classNames?: Partial<{\n    tabPanel: ClassValue\n  }>\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsContent\n    :value=\"props.value\"\n    :force-mount=\"props.forceMount\"\n    :class=\"composeClassName(ctx.slotFns.value.tabPanel(), props.class, props.classNames?.tabPanel)\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"],"mappings":""}

package/dist/components/tabs/TabPanel.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,8 @@ var TabPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	props: {
 		value: {},
 		forceMount: { type: Boolean },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -17,7 +18,7 @@ var TabPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			return openBlock(), createBlock(unref(TabsContent), {
 				value: props.value,
 				"force-mount": props.forceMount,
-				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabPanel(), props.class))
+				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabPanel(), props.class, props.classNames?.tabPanel))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3

package/dist/components/tabs/TabPanel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tabs/TabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsContent } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  value: string\n  forceMount?: boolean\n  class?: string\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsContent\n    :value=\"props.value\"\n    :force-mount=\"props.forceMount\"\n    :class=\"composeClassName(ctx.slotFns.value.tabPanel(), props.class)\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAMd,MAAM,MAAM,eAAc;;uBAIxB,YAMc,MAAA,YAAA,EAAA;IALX,OAAO,MAAM;IACb,eAAa,MAAM;IACnB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,UAAQ,EAAI,MAAM,MAAK,CAAA;;2BAE1D,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"TabPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tabs/TabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabsContent } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsInject } from './tabs.context'\n\nconst props = defineProps<{\n  value: string\n  forceMount?: boolean\n  class?: ClassValue\n  /** Custom classes to apply to specific slots */\n  classNames?: Partial<{\n    tabPanel: ClassValue\n  }>\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n  <TabsContent\n    :value=\"props.value\"\n    :force-mount=\"props.forceMount\"\n    :class=\"composeClassName(ctx.slotFns.value.tabPanel(), props.class, props.classNames?.tabPanel)\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAUd,MAAM,MAAM,eAAc;;uBAIxB,YAMc,MAAA,YAAA,EAAA;IALX,OAAO,MAAM;IACb,eAAa,MAAM;IACnB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,UAAQ,EAAI,MAAM,OAAO,MAAM,YAAY,SAAQ,CAAA;;2BAEtF,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, watch } from 'vue'\nimport { TabsRoot } from 'reka-ui'\nimport { tabsVariants, type TabsVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useTabsProvide } from './tabs.context'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  orientation?: 'horizontal' | 'vertical'\n  variant?: TabsVariants['variant']\n  activationMode?: 'automatic' | 'manual'\n  class?: string\n}>(), {\n  orientation: 'horizontal',\n  variant: 'primary',\n  activationMode: 'automatic',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst internalValue = ref<string | undefined>(props.modelValue ?? props.defaultValue)\n\nwatch(() => props.modelValue, (v) => {\n  if (v !== undefined) internalValue.value = v\n})\n\nfunction changeTab(value: string) {\n  internalValue.value = value\n  emit('update:modelValue', value)\n}\n\nconst slotFns = computed(() => tabsVariants({ variant: props.variant }))\n\nuseTabsProvide({\n  slotFns,\n  orientation: toRef(props, 'orientation'),\n  currentValue: internalValue,\n  changeTab,\n})\n</script>\n\n<template>\n  <TabsRoot\n    :model-value=\"internalValue\"\n    :orientation=\"props.orientation\"\n    :activation-mode=\"props.activationMode\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :data-orientation=\"props.orientation\"\n    @update:model-value=\"changeTab\"\n  >\n    <slot />\n  </TabsRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, watch } from 'vue'\nimport { TabsRoot } from 'reka-ui'\nimport { tabsVariants, type TabsVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsProvide } from './tabs.context'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  orientation?: 'horizontal' | 'vertical'\n  variant?: TabsVariants['variant']\n  activationMode?: 'automatic' | 'manual'\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n}>(), {\n  orientation: 'horizontal',\n  variant: 'primary',\n  activationMode: 'automatic',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst internalValue = ref<string | undefined>(props.modelValue ?? props.defaultValue)\n\nwatch(() => props.modelValue, (v) => {\n  if (v !== undefined) internalValue.value = v\n})\n\nfunction changeTab(value: string) {\n  internalValue.value = value\n  emit('update:modelValue', value)\n}\n\nconst slotFns = computed(() => tabsVariants({ variant: props.variant }))\n\nuseTabsProvide({\n  slotFns,\n  orientation: toRef(props, 'orientation'),\n  currentValue: internalValue,\n  changeTab,\n})\n</script>\n\n<template>\n  <TabsRoot\n    :model-value=\"internalValue\"\n    :orientation=\"props.orientation\"\n    :activation-mode=\"props.activationMode\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-orientation=\"props.orientation\"\n    @update:model-value=\"changeTab\"\n  >\n    <slot />\n  </TabsRoot>\n</template>\n"],"mappings":""}