npm - @auronui/vue - Versions diffs - 1.0.21 → 1.0.23 - Mend

@auronui/vue 1.0.21 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (356) hide show

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

	@@ -1 +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 , 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":""}
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 , 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 /* Render as a different element type. /\n as?: string\n /* Merge props onto child element instead of rendering a wrapper. */\n asChild?: boolean\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 :as=\"props.as\"\n :as-child=\"props.asChild\"\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 :as=\"props.as\"\n :as-child=\"props.asChild\"\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 :as=\"props.as\"\n :as-child=\"props.asChild\"\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 CHANGED Viewed

@@ -22,7 +22,9 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			Object,
 			Array
 		] },
-		classNames: {}
+		classNames: {},
+		as: {},
+		asChild: { type: Boolean }
 	},
 	setup(__props) {
 		const props = __props;
@@ -163,11 +165,18 @@ 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,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabList(), props.class, props.classNames?.tabList))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["loop", "class"])) : props.overflow === "arrows" ? (openBlock(), createElementBlock("div", {
+			}, 8, [
+				"loop",
+				"as",
+				"as-child",
+				"class"
+			])) : props.overflow === "arrows" ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(["tabs__list-container tabs__list-container--arrows", {
 					"has-left": canScrollLeft.value,
@@ -205,11 +214,18 @@ var TabList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					class: "tabs__scroll-wrapper"
 				}, [createVNode(unref(TabsList), {
 					loop: props.loop ?? true,
+					as: props.as,
+					"as-child": props.asChild,
 					class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabList(), "tabs__list--scroll", props.class, props.classNames?.tabList))
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
-				}, 8, ["loop", "class"])], 512),
+				}, 8, [
+					"loop",
+					"as",
+					"as-child",
+					"class"
+				])], 512),
 				createVNode(Button_default, {
 					variant: "secondary",
 					size: "sm",
@@ -242,11 +258,18 @@ 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,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabList(), "tabs__list--clipped", props.class, props.classNames?.tabList))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["loop", "class"]), createElementVNode("div", {
+			}, 8, [
+				"loop",
+				"as",
+				"as-child",
+				"class"
+			]), createElementVNode("div", {
 				ref_key: "dropdownEl",
 				ref: dropdownEl,
 				class: normalizeClass(["tabs__more", { "tabs__more--visible": hasOverflow.value }])

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

	@@ -1 +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 , 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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"}
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 , 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 /* Render as a different element type. /\n as?: string\n /* Merge props onto child element instead of rendering a wrapper. */\n asChild?: boolean\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 :as=\"props.as\"\n :as-child=\"props.asChild\"\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 :as=\"props.as\"\n :as-child=\"props.asChild\"\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 :as=\"props.as\"\n :as-child=\"props.asChild\"\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 CHANGED Viewed

	@@ -1 +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 , 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":""}
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 , 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 /* Render as a different element type. /\n as?: string\n /* Merge props onto child element instead of rendering a wrapper. */\n asChild?: boolean\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n <TabsContent\n :value=\"props.value\"\n :force-mount=\"props.forceMount\"\n :as=\"props.as\"\n :as-child=\"props.asChild\"\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 CHANGED Viewed

@@ -15,7 +15,9 @@ var TabPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			Object,
 			Array
 		] },
-		classNames: {}
+		classNames: {},
+		as: {},
+		asChild: { type: Boolean }
 	},
 	setup(__props) {
 		const props = __props;
@@ -24,6 +26,8 @@ var TabPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			return openBlock(), createBlock(unref(TabsContent), {
 				value: props.value,
 				"force-mount": props.forceMount,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.tabPanel(), props.class, props.classNames?.tabPanel))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
@@ -31,6 +35,8 @@ var TabPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			}, 8, [
 				"value",
 				"force-mount",
+				"as",
+				"as-child",
 				"class"
 			]);
 		};

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

	@@ -1 +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 , 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"}
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 , 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 /* Render as a different element type. /\n as?: string\n /* Merge props onto child element instead of rendering a wrapper. */\n asChild?: boolean\n}>()\n\nconst ctx = useTabsInject()\n</script>\n\n<template>\n <TabsContent\n :value=\"props.value\"\n :force-mount=\"props.forceMount\"\n :as=\"props.as\"\n :as-child=\"props.asChild\"\n :class=\"composeClassName(ctx.slotFns.value.tabPanel(), props.class, props.classNames?.tabPanel)\"\n >\n <slot />\n </TabsContent>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAcd,MAAM,MAAM,eAAc;;uBAIxB,YAQc,MAAA,YAAA,EAAA;IAPX,OAAO,MAAM;IACb,eAAa,MAAM;IACnB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,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 CHANGED Viewed

	@@ -1 +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 , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsProvide } from './tabs.context'\nimport TabList from './TabList.vue'\nimport Tab from './Tab.vue'\nimport TabPanel from './TabPanel.vue'\n\ntype TabShorthandItem = { value: string; label: string; content?: string; disabled?: boolean }\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 /* Shorthand API: render tabs from an array instead of the compound slot API */\n items?: TabShorthandItem[]\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\nwatch(\n () => props.items,\n (items) => {\n if (items && items.length > 0 && !props.modelValue && !props.defaultValue && internalValue.value === undefined) {\n internalValue.value = items[0].value\n }\n },\n { immediate: true },\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 <template v-if=\"props.items\">\n <TabList>\n <Tab\n v-for=\"item in props.items\"\n :key=\"item.value\"\n :value=\"item.value\"\n :disabled=\"item.disabled\"\n >{{ item.label }}</Tab>\n </TabList>\n <TabPanel\n v-for=\"item in props.items\"\n :key=\"item.value\"\n :value=\"item.value\"\n >{{ item.content }}</TabPanel>\n </template>\n <slot v-else />\n </TabsRoot>\n</template>\n"],"mappings":""}
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 , type ClassValue} from '../../utils/composeClassName'\nimport { useTabsProvide } from './tabs.context'\nimport TabList from './TabList.vue'\nimport Tab from './Tab.vue'\nimport TabPanel from './TabPanel.vue'\n\ntype TabShorthandItem = { value: string; label: string; content?: string; disabled?: boolean }\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 /* Shorthand API: render tabs from an array instead of the compound slot API /\n items?: TabShorthandItem[]\n /* Reading direction of the tabs. /\n dir?: 'ltr' \| 'rtl'\n /* Whether to unmount tab panels when they are hidden. /\n unmountOnHide?: boolean\n /* Render as a different element type. /\n as?: string\n /* Merge props onto child element instead of rendering a wrapper. */\n asChild?: boolean\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\nwatch(\n () => props.items,\n (items) => {\n if (items && items.length > 0 && !props.modelValue && !props.defaultValue && internalValue.value === undefined) {\n internalValue.value = items[0].value\n }\n },\n { immediate: true },\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 :dir=\"props.dir\"\n :unmount-on-hide=\"props.unmountOnHide\"\n :as=\"props.as\"\n :as-child=\"props.asChild\"\n :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n :data-orientation=\"props.orientation\"\n @update:model-value=\"changeTab\"\n >\n <template v-if=\"props.items\">\n <TabList>\n <Tab\n v-for=\"item in props.items\"\n :key=\"item.value\"\n :value=\"item.value\"\n :disabled=\"item.disabled\"\n >{{ item.label }}</Tab>\n </TabList>\n <TabPanel\n v-for=\"item in props.items\"\n :key=\"item.value\"\n :value=\"item.value\"\n >{{ item.content }}</TabPanel>\n </template>\n <slot v-else />\n </TabsRoot>\n</template>\n"],"mappings":""}

package/dist/components/tabs/Tabs.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -23,7 +23,11 @@ var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			Array
 		] },
 		classNames: {},
-		items: {}
+		items: {},
+		dir: {},
+		unmountOnHide: { type: Boolean },
+		as: {},
+		asChild: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -52,6 +56,10 @@ var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				"model-value": internalValue.value,
 				orientation: props.orientation,
 				"activation-mode": props.activationMode,
+				dir: props.dir,
+				"unmount-on-hide": props.unmountOnHide,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": props.orientation,
 				"onUpdate:modelValue": changeTab
@@ -82,6 +90,10 @@ var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				"model-value",
 				"orientation",
 				"activation-mode",
+				"dir",
+				"unmount-on-hide",
+				"as",
+				"as-child",
 				"class",
 				"data-orientation"
 			]);

package/dist/components/tabs/Tabs.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang.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'\nimport TabList from './TabList.vue'\nimport Tab from './Tab.vue'\nimport TabPanel from './TabPanel.vue'\n\ntype TabShorthandItem = { value: string; label: string; content?: string; disabled?: boolean }\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 /* Shorthand API: render tabs from an array instead of the compound slot API */\n items?: TabShorthandItem[]\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\nwatch(\n () => props.items,\n (items) => {\n if (items && items.length > 0 && !props.modelValue && !props.defaultValue && internalValue.value === undefined) {\n internalValue.value = items[0].value\n }\n },\n { immediate: true },\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 <template v-if=\"props.items\">\n <TabList>\n <Tab\n v-for=\"item in props.items\"\n :key=\"item.value\"\n :value=\"item.value\"\n :disabled=\"item.disabled\"\n >{{ item.label }}</Tab>\n </TabList>\n <TabPanel\n v-for=\"item in props.items\"\n :key=\"item.value\"\n :value=\"item.value\"\n >{{ item.content }}</TabPanel>\n </template>\n <slot v-else />\n </TabsRoot>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAYA,MAAM,QAAQ;~~EAmBd~~,MAAM,OAAO;EAIb,MAAM,gBAAgB,IAAwB,MAAM,cAAc,MAAM,aAAY;AAEpF,cAAY,MAAM,aAAa,MAAM;AACnC,OAAI,MAAM,KAAA,EAAW,eAAc,QAAQ;IAC5C;AAED,cACQ,MAAM,QACX,UAAU;AACT,OAAI,SAAS,MAAM,SAAS,KAAK,CAAC,MAAM,cAAc,CAAC,MAAM,gBAAgB,cAAc,UAAU,KAAA,EACnG,eAAc,QAAQ,MAAM,GAAG;KAGnC,EAAE,WAAW,MAAM,CACrB;EAEA,SAAS,UAAU,OAAe;AAChC,iBAAc,QAAQ;AACtB,QAAK,qBAAqB,MAAK;;EAGjC,MAAM,UAAU,eAAe,aAAa,EAAE,SAAS,MAAM,SAAS,CAAC,CAAA;AAEvE,iBAAe;GACb;GACA,aAAa,MAAM,OAAO,cAAc;GACxC,cAAc;GACd;GACD,CAAA;;uBAIC,~~YAwBW~~,MAAA,SAAA,EAAA;~~IAvBR~~,eAAa,cAAA;IACb,aAAa,MAAM;IACnB,mBAAiB,MAAM;IACvB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,oBAAkB,MAAM;IACxB,uBAAoB;;2BAgBV,CAdK,MAAM,SAAA,WAAA,EAAtB,mBAcW,UAAA,EAAA,KAAA,GAAA,EAAA,CAbT,YAOU,iBAAA,MAAA;4BALqB,EAAA,UAAA,KAAA,EAD7B,mBAKuB,UAAA,MAAA,WAJN,MAAM,QAAd,SAAI;0BADb,YAKuB,aAAA;OAHpB,KAAK,KAAK;OACV,OAAO,KAAK;OACZ,UAAU,KAAK;;8BACD,CAAA,gBAAA,gBAAb,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;0BAEhB,mBAI8B,UAAA,MAAA,WAHb,MAAM,QAAd,SAAI;yBADb,YAI8B,kBAAA;MAF3B,KAAK,KAAK;MACV,OAAO,KAAK;;6BACI,CAAA,gBAAA,gBAAf,KAAK,QAAO,EAAA,EAAA,CAAA,CAAA;;;uBAElB,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang.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'\nimport TabList from './TabList.vue'\nimport Tab from './Tab.vue'\nimport TabPanel from './TabPanel.vue'\n\ntype TabShorthandItem = { value: string; label: string; content?: string; disabled?: boolean }\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 /* Shorthand API: render tabs from an array instead of the compound slot API /\n items?: TabShorthandItem[]\n /* Reading direction of the tabs. /\n dir?: 'ltr' \| 'rtl'\n /* Whether to unmount tab panels when they are hidden. /\n unmountOnHide?: boolean\n /* Render as a different element type. /\n as?: string\n /* Merge props onto child element instead of rendering a wrapper. */\n asChild?: boolean\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\nwatch(\n () => props.items,\n (items) => {\n if (items && items.length > 0 && !props.modelValue && !props.defaultValue && internalValue.value === undefined) {\n internalValue.value = items[0].value\n }\n },\n { immediate: true },\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 :dir=\"props.dir\"\n :unmount-on-hide=\"props.unmountOnHide\"\n :as=\"props.as\"\n :as-child=\"props.asChild\"\n :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n :data-orientation=\"props.orientation\"\n @update:model-value=\"changeTab\"\n >\n <template v-if=\"props.items\">\n <TabList>\n <Tab\n v-for=\"item in props.items\"\n :key=\"item.value\"\n :value=\"item.value\"\n :disabled=\"item.disabled\"\n >{{ item.label }}</Tab>\n </TabList>\n <TabPanel\n v-for=\"item in props.items\"\n :key=\"item.value\"\n :value=\"item.value\"\n >{{ item.content }}</TabPanel>\n </template>\n <slot v-else />\n </TabsRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EA2Bd,MAAM,OAAO;EAIb,MAAM,gBAAgB,IAAwB,MAAM,cAAc,MAAM,aAAY;AAEpF,cAAY,MAAM,aAAa,MAAM;AACnC,OAAI,MAAM,KAAA,EAAW,eAAc,QAAQ;IAC5C;AAED,cACQ,MAAM,QACX,UAAU;AACT,OAAI,SAAS,MAAM,SAAS,KAAK,CAAC,MAAM,cAAc,CAAC,MAAM,gBAAgB,cAAc,UAAU,KAAA,EACnG,eAAc,QAAQ,MAAM,GAAG;KAGnC,EAAE,WAAW,MAAM,CACrB;EAEA,SAAS,UAAU,OAAe;AAChC,iBAAc,QAAQ;AACtB,QAAK,qBAAqB,MAAK;;EAGjC,MAAM,UAAU,eAAe,aAAa,EAAE,SAAS,MAAM,SAAS,CAAC,CAAA;AAEvE,iBAAe;GACb;GACA,aAAa,MAAM,OAAO,cAAc;GACxC,cAAc;GACd;GACD,CAAA;;uBAIC,YA4BW,MAAA,SAAA,EAAA;IA3BR,eAAa,cAAA;IACb,aAAa,MAAM;IACnB,mBAAiB,MAAM;IACvB,KAAK,MAAM;IACX,mBAAiB,MAAM;IACvB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,oBAAkB,MAAM;IACxB,uBAAoB;;2BAgBV,CAdK,MAAM,SAAA,WAAA,EAAtB,mBAcW,UAAA,EAAA,KAAA,GAAA,EAAA,CAbT,YAOU,iBAAA,MAAA;4BALqB,EAAA,UAAA,KAAA,EAD7B,mBAKuB,UAAA,MAAA,WAJN,MAAM,QAAd,SAAI;0BADb,YAKuB,aAAA;OAHpB,KAAK,KAAK;OACV,OAAO,KAAK;OACZ,UAAU,KAAK;;8BACD,CAAA,gBAAA,gBAAb,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;0BAEhB,mBAI8B,UAAA,MAAA,WAHb,MAAM,QAAd,SAAI;yBADb,YAI8B,kBAAA;MAF3B,KAAK,KAAK;MACV,OAAO,KAAK;;6BACI,CAAA,gBAAA,gBAAf,KAAK,QAAO,EAAA,EAAA,CAAA,CAAA;;;uBAElB,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/time-field/TimeField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeField.js","names":[],"sources":["../../../src/components/time-field/TimeField.vue"],"sourcesContent":["<!--\n TimeField — form-field mirror of Input.vue for @internationalized/date Time values.\n\n Anatomy, data-attributes, floating-label behavior, start/end content\n slots, and a11y wiring all mirror Input.vue / DateInput.vue. See the\n Input.vue docblock for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeFieldRoot, TimeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeFieldVariants, type TimeFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'flat',\n size: 'md',\n color: 'default',\n labelPlacement: 'inside',\n fullWidth: false,\n isInvalid: false,\n isDisabled: false,\n isReadOnly: false,\n isRequired: false,\n granularity: 'minute',\n hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeValue \| null \| undefined>()\n\ntype Props = {\n /** Visual style of the field. @default 'flat' /\n variant?: TimeFieldVariants['variant']\n /* Field height. @default 'md' /\n size?: TimeFieldVariants['size']\n /* Accent color applied to focus ring + floating label. @default 'default' /\n color?: TimeFieldVariants['color']\n /* Label placement relative to the field. @default 'inside' /\n labelPlacement?: TimeFieldVariants['labelPlacement']\n /* Stretches root wrapper to 100% width. @default false /\n fullWidth?: boolean\n /* Marks the field as invalid. @default false /\n isInvalid?: boolean\n /* Disables the field. @default false /\n isDisabled?: boolean\n /* Makes the field read-only. @default false /\n isReadOnly?: boolean\n /* Adds a required asterisk next to the label. @default false /\n isRequired?: boolean\n /* Field label. When omitted, floating-label behavior is skipped. /\n label?: string\n /* Helper text below the field. Suppressed when isInvalid && errorMessage is shown. /\n description?: string\n /* Error text below the field. Only rendered when isInvalid is true. /\n errorMessage?: string\n /* Extra classes merged onto the root wrapper. /\n class?: ClassValue\n /* Per-slot class overrides. /\n classNames?: Partial<{\n base: ClassValue\n label: ClassValue\n mainWrapper: ClassValue\n inputWrapper: ClassValue\n startContent: ClassValue\n segmentList: ClassValue\n segment: ClassValue\n endContent: ClassValue\n helperWrapper: ClassValue\n errorMessage: ClassValue\n description: ClassValue\n }>\n\n / ─── TimeField-specific ──────────────────────────────────────── /\n defaultValue?: TimeValue\n placeholderValue?: TimeValue\n minValue?: TimeValue\n maxValue?: TimeValue\n granularity?: 'hour' \| 'minute' \| 'second'\n hourCycle?: 12 \| 24\n locale?: string\n name?: string\n hideTimeZone?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string \| undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\nconst descriptionId = computed(() => `${generatedId}-description`)\nconst errorMessageId = computed(() => `${generatedId}-error`)\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null)\n\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value \|\| showDescription.value)\nconst ariaDescribedBy = computed(() => {\n if (showError.value) return errorMessageId.value\n if (showDescription.value) return descriptionId.value\n return undefined\n})\n\nconst fieldRef = ref<HTMLElement \| null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement \| null>(() => {\n const r = fieldRef.value as unknown as { $el?: HTMLElement } \| HTMLElement \| null\n if (!r) return null\n if (r instanceof HTMLElement) return r\n return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a TIME SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a TimePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n const root = fieldEl.value\n if (!root) { isFocused.value = false; return }\n const active = (root.ownerDocument ?? document).activeElement as HTMLElement \| null\n isFocused.value = !!active\n && root.contains(active)\n && active.hasAttribute('data-reka-time-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n const root = fieldEl.value\n if (!root) return\n const target = e.target as Node \| null\n if (!target \|\| root.contains(target)) return\n suppressSegmentFocusUntil = performance.now() + 250\n const active = (root.ownerDocument ?? document).activeElement as HTMLElement \| null\n if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n active.blur()\n }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n if (performance.now() >= suppressSegmentFocusUntil) return\n const root = fieldEl.value\n if (!root) return\n const t = e.target as HTMLElement \| null\n if (t && root.contains(t) && t.hasAttribute?.('data-reka-time-field-segment')) {\n t.blur()\n }\n}\n\nonMounted(() => {\n document.addEventListener('focusin', onDocFocusIn)\n document.addEventListener('focusout', onDocFocusOut)\n document.addEventListener('pointerdown', onDocPointerDown, true)\n document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n document.removeEventListener('focusin', onDocFocusIn)\n document.removeEventListener('focusout', onDocFocusOut)\n document.removeEventListener('pointerdown', onDocPointerDown, true)\n document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n const root = fieldEl.value\n if (!root \|\| typeof root.querySelectorAll !== 'function') {\n segmentsFilled.value = false\n return\n }\n const segs = root.querySelectorAll('[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])')\n let anyFilled = false\n segs.forEach((el) => {\n if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n })\n segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity, () => props.hourCycle], () => {\n queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value \|\| segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n const target = e.target as HTMLElement \| null\n if (!target) return\n if (target.closest('[data-reka-time-field-segment]')) return\n if (target.closest('[data-slot=\"start-content\"]')) return\n if (target.closest('[data-slot=\"end-content\"]')) return\n if (target.closest('button, [role=\"button\"]')) return\n const root = fieldEl.value\n if (!root) return\n const active = (root.ownerDocument ?? document).activeElement as HTMLElement \| null\n if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n return\n }\n const first = root.querySelector<HTMLElement>(\n '[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])',\n )\n if (first) {\n e.preventDefault()\n first.focus()\n }\n}\n\nconst slotFns = computed(() =>\n timeFieldVariants({\n variant: props.variant,\n size: props.size,\n color: props.color,\n fullWidth: props.fullWidth,\n isInvalid: props.isInvalid,\n isDisabled: props.isDisabled,\n isReadonly: props.isReadOnly,\n hasLabel: hasLabel.value,\n labelPlacement: props.labelPlacement,\n }),\n)\n\nconst showOutsideLabel = computed(\n () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n <div\n :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n :data-invalid=\"isInvalid \|\| undefined\"\n :data-disabled=\"isDisabled \|\| undefined\"\n :data-readonly=\"isReadOnly \|\| undefined\"\n :data-required=\"isRequired \|\| undefined\"\n :data-has-label=\"hasLabel \|\| undefined\"\n :data-has-helper=\"hasHelper \|\| undefined\"\n >\n <label\n v-if=\"showOutsideLabel\"\n :id=\"labelId\"\n :for=\"fieldId\"\n :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n >{{ label }}<span\n v-if=\"isRequired\"\n aria-hidden=\"true\"\n > </span></label>\n\n <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n <TimeFieldRoot\n :id=\"fieldId\"\n ref=\"fieldRef\"\n v-model=\"modelValue\"\n :default-value=\"defaultValue\"\n :placeholder=\"placeholderValue\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :locale=\"locale\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadOnly\"\n :name=\"name\"\n :hide-time-zone=\"hideTimeZone\"\n :aria-labelledby=\"hasLabel ? labelId : undefined\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"isRequired \|\| undefined\"\n :aria-invalid=\"isInvalid \|\| undefined\"\n :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n :data-filled=\"hasLabel ? (effectiveFilled \|\| undefined) : undefined\"\n :data-focused=\"isFocused \|\| undefined\"\n :data-invalid=\"isInvalid \|\| undefined\"\n :data-disabled=\"isDisabled \|\| undefined\"\n :data-readonly=\"isReadOnly \|\| undefined\"\n @mousedown=\"handleFieldMousedown\"\n >\n <template #default=\"{ segments }\">\n <label\n v-if=\"showInsideLabel\"\n :id=\"labelId\"\n :for=\"fieldId\"\n :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n >{{ label }}<span\n v-if=\"isRequired\"\n aria-hidden=\"true\"\n > *</span></label>\n\n <span\n v-if=\"$slots.startContent\"\n :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n data-slot=\"start-content\"\n >\n <slot name=\"startContent\" />\n </span>\n\n <div\n :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n data-slot=\"segment-list\"\n >\n <template\n v-for=\"(segment, _i) in segments\"\n :key=\"_i\"\n >\n <TimeFieldInput\n :part=\"segment.part\"\n :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n >\n {{ segment.value }}\n </TimeFieldInput>\n </template>\n </div>\n\n <span\n v-if=\"$slots.endContent\"\n :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n data-slot=\"end-content\"\n >\n <slot name=\"endContent\" />\n </span>\n </template>\n </TimeFieldRoot>\n\n <div\n v-if=\"hasHelper\"\n :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n >\n <div\n v-if=\"showError\"\n :id=\"errorMessageId\"\n :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n role=\"alert\"\n >\n {{ errorMessage }}\n </div>\n <div\n v-else-if=\"showDescription\"\n :id=\"descriptionId\"\n :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n >\n {{ description }}\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TimeField.js","names":[],"sources":["../../../src/components/time-field/TimeField.vue"],"sourcesContent":["<!--\n TimeField — form-field mirror of Input.vue for @internationalized/date Time values.\n\n Anatomy, data-attributes, floating-label behavior, start/end content\n slots, and a11y wiring all mirror Input.vue / DateInput.vue. See the\n Input.vue docblock for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeFieldRoot, TimeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeFieldVariants, type TimeFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'flat',\n size: 'md',\n color: 'default',\n labelPlacement: 'inside',\n fullWidth: false,\n isInvalid: false,\n isDisabled: false,\n isReadOnly: false,\n isRequired: false,\n granularity: 'minute',\n hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeValue \| null \| undefined>()\n\ntype Props = {\n /** Visual style of the field. @default 'flat' /\n variant?: TimeFieldVariants['variant']\n /* Field height. @default 'md' /\n size?: TimeFieldVariants['size']\n /* Accent color applied to focus ring + floating label. @default 'default' /\n color?: TimeFieldVariants['color']\n /* Label placement relative to the field. @default 'inside' /\n labelPlacement?: TimeFieldVariants['labelPlacement']\n /* Stretches root wrapper to 100% width. @default false /\n fullWidth?: boolean\n /* Marks the field as invalid. @default false /\n isInvalid?: boolean\n /* Disables the field. @default false /\n isDisabled?: boolean\n /* Makes the field read-only. @default false /\n isReadOnly?: boolean\n /* Adds a required asterisk next to the label. @default false /\n isRequired?: boolean\n /* Field label. When omitted, floating-label behavior is skipped. /\n label?: string\n /* Helper text below the field. Suppressed when isInvalid && errorMessage is shown. /\n description?: string\n /* Error text below the field. Only rendered when isInvalid is true. /\n errorMessage?: string\n /* Extra classes merged onto the root wrapper. /\n class?: ClassValue\n /* Per-slot class overrides. /\n classNames?: Partial<{\n base: ClassValue\n label: ClassValue\n mainWrapper: ClassValue\n inputWrapper: ClassValue\n startContent: ClassValue\n segmentList: ClassValue\n segment: ClassValue\n endContent: ClassValue\n helperWrapper: ClassValue\n errorMessage: ClassValue\n description: ClassValue\n }>\n\n / ─── TimeField-specific ──────────────────────────────────────── /\n defaultValue?: TimeValue\n defaultPlaceholder?: TimeValue\n placeholderValue?: TimeValue\n minValue?: TimeValue\n maxValue?: TimeValue\n granularity?: 'hour' \| 'minute' \| 'second'\n hourCycle?: 12 \| 24\n /* Steps for segment keyboard navigation. /\n step?: Partial<Record<'hour' \| 'minute' \| 'second' \| 'millisecond', number>>\n /* Enable step snapping behavior. /\n stepSnapping?: boolean\n locale?: string\n name?: string\n hideTimeZone?: boolean\n /* Marks the field as required for form submission. /\n required?: boolean\n /* Text direction for the field. /\n dir?: 'ltr' \| 'rtl'\n /* Render root as a different element or component. /\n as?: string\n /* Render root child as root element. /\n asChild?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string \| undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\nconst descriptionId = computed(() => `${generatedId}-description`)\nconst errorMessageId = computed(() => `${generatedId}-error`)\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null)\n\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value \|\| showDescription.value)\nconst ariaDescribedBy = computed(() => {\n if (showError.value) return errorMessageId.value\n if (showDescription.value) return descriptionId.value\n return undefined\n})\n\nconst fieldRef = ref<HTMLElement \| null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement \| null>(() => {\n const r = fieldRef.value as unknown as { $el?: HTMLElement } \| HTMLElement \| null\n if (!r) return null\n if (r instanceof HTMLElement) return r\n return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a TIME SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a TimePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n const root = fieldEl.value\n if (!root) { isFocused.value = false; return }\n const active = (root.ownerDocument ?? document).activeElement as HTMLElement \| null\n isFocused.value = !!active\n && root.contains(active)\n && active.hasAttribute('data-reka-time-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n const root = fieldEl.value\n if (!root) return\n const target = e.target as Node \| null\n if (!target \|\| root.contains(target)) return\n suppressSegmentFocusUntil = performance.now() + 250\n const active = (root.ownerDocument ?? document).activeElement as HTMLElement \| null\n if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n active.blur()\n }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n if (performance.now() >= suppressSegmentFocusUntil) return\n const root = fieldEl.value\n if (!root) return\n const t = e.target as HTMLElement \| null\n if (t && root.contains(t) && t.hasAttribute?.('data-reka-time-field-segment')) {\n t.blur()\n }\n}\n\nonMounted(() => {\n document.addEventListener('focusin', onDocFocusIn)\n document.addEventListener('focusout', onDocFocusOut)\n document.addEventListener('pointerdown', onDocPointerDown, true)\n document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n document.removeEventListener('focusin', onDocFocusIn)\n document.removeEventListener('focusout', onDocFocusOut)\n document.removeEventListener('pointerdown', onDocPointerDown, true)\n document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n const root = fieldEl.value\n if (!root \|\| typeof root.querySelectorAll !== 'function') {\n segmentsFilled.value = false\n return\n }\n const segs = root.querySelectorAll('[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])')\n let anyFilled = false\n segs.forEach((el) => {\n if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n })\n segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity, () => props.hourCycle], () => {\n queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value \|\| segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n const target = e.target as HTMLElement \| null\n if (!target) return\n if (target.closest('[data-reka-time-field-segment]')) return\n if (target.closest('[data-slot=\"start-content\"]')) return\n if (target.closest('[data-slot=\"end-content\"]')) return\n if (target.closest('button, [role=\"button\"]')) return\n const root = fieldEl.value\n if (!root) return\n const active = (root.ownerDocument ?? document).activeElement as HTMLElement \| null\n if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n return\n }\n const first = root.querySelector<HTMLElement>(\n '[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])',\n )\n if (first) {\n e.preventDefault()\n first.focus()\n }\n}\n\nconst slotFns = computed(() =>\n timeFieldVariants({\n variant: props.variant,\n size: props.size,\n color: props.color,\n fullWidth: props.fullWidth,\n isInvalid: props.isInvalid,\n isDisabled: props.isDisabled,\n isReadonly: props.isReadOnly,\n hasLabel: hasLabel.value,\n labelPlacement: props.labelPlacement,\n }),\n)\n\nconst showOutsideLabel = computed(\n () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n <div\n :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n :data-invalid=\"isInvalid \|\| undefined\"\n :data-disabled=\"isDisabled \|\| undefined\"\n :data-readonly=\"isReadOnly \|\| undefined\"\n :data-required=\"isRequired \|\| undefined\"\n :data-has-label=\"hasLabel \|\| undefined\"\n :data-has-helper=\"hasHelper \|\| undefined\"\n >\n <label\n v-if=\"showOutsideLabel\"\n :id=\"labelId\"\n :for=\"fieldId\"\n :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n >{{ label }}<span\n v-if=\"isRequired\"\n aria-hidden=\"true\"\n > </span></label>\n\n <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n <TimeFieldRoot\n :id=\"fieldId\"\n ref=\"fieldRef\"\n v-model=\"modelValue\"\n :default-value=\"defaultValue\"\n :default-placeholder=\"defaultPlaceholder\"\n :placeholder=\"placeholderValue\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :step=\"step\"\n :step-snapping=\"stepSnapping\"\n :locale=\"locale\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadOnly\"\n :name=\"name\"\n :hide-time-zone=\"hideTimeZone\"\n :required=\"required\"\n :dir=\"dir\"\n :as=\"as\"\n :as-child=\"asChild\"\n :aria-labelledby=\"hasLabel ? labelId : undefined\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"isRequired \|\| undefined\"\n :aria-invalid=\"isInvalid \|\| undefined\"\n :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n :data-filled=\"hasLabel ? (effectiveFilled \|\| undefined) : undefined\"\n :data-focused=\"isFocused \|\| undefined\"\n :data-invalid=\"isInvalid \|\| undefined\"\n :data-disabled=\"isDisabled \|\| undefined\"\n :data-readonly=\"isReadOnly \|\| undefined\"\n @mousedown=\"handleFieldMousedown\"\n >\n <template #default=\"{ segments }\">\n <label\n v-if=\"showInsideLabel\"\n :id=\"labelId\"\n :for=\"fieldId\"\n :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n >{{ label }}<span\n v-if=\"isRequired\"\n aria-hidden=\"true\"\n > *</span></label>\n\n <span\n v-if=\"$slots.startContent\"\n :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n data-slot=\"start-content\"\n >\n <slot name=\"startContent\" />\n </span>\n\n <div\n :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n data-slot=\"segment-list\"\n >\n <template\n v-for=\"(segment, _i) in segments\"\n :key=\"_i\"\n >\n <TimeFieldInput\n :part=\"segment.part\"\n :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n >\n {{ segment.value }}\n </TimeFieldInput>\n </template>\n </div>\n\n <span\n v-if=\"$slots.endContent\"\n :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n data-slot=\"end-content\"\n >\n <slot name=\"endContent\" />\n </span>\n </template>\n </TimeFieldRoot>\n\n <div\n v-if=\"hasHelper\"\n :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n >\n <div\n v-if=\"showError\"\n :id=\"errorMessageId\"\n :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n role=\"alert\"\n >\n {{ errorMessage }}\n </div>\n <div\n v-else-if=\"showDescription\"\n :id=\"descriptionId\"\n :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n >\n {{ description }}\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/time-field/TimeField.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -63,17 +63,24 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		] },
 		classNames: {},
 		defaultValue: {},
+		defaultPlaceholder: {},
 		placeholderValue: {},
 		minValue: {},
 		maxValue: {},
 		granularity: { default: "minute" },
 		hourCycle: {},
+		step: {},
+		stepSnapping: { type: Boolean },
 		locale: {},
 		name: {},
 		hideTimeZone: {
 			type: Boolean,
 			default: false
-		}
+		},
+		required: { type: Boolean },
+		dir: {},
+		as: {},
+		asChild: { type: Boolean }
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -223,16 +230,23 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				modelValue: modelValue.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
 				"default-value": __props.defaultValue,
+				"default-placeholder": __props.defaultPlaceholder,
 				placeholder: __props.placeholderValue,
 				"min-value": __props.minValue,
 				"max-value": __props.maxValue,
 				granularity: __props.granularity,
 				"hour-cycle": __props.hourCycle,
+				step: __props.step,
+				"step-snapping": __props.stepSnapping,
 				locale: __props.locale,
 				disabled: __props.isDisabled,
 				readonly: __props.isReadOnly,
 				name: __props.name,
 				"hide-time-zone": __props.hideTimeZone,
+				required: __props.required,
+				dir: __props.dir,
+				as: __props.as,
+				"as-child": __props.asChild,
 				"aria-labelledby": hasLabel.value ? labelId.value : void 0,
 				"aria-describedby": ariaDescribedBy.value,
 				"aria-required": __props.isRequired || void 0,
@@ -281,16 +295,23 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"id",
 				"modelValue",
 				"default-value",
+				"default-placeholder",
 				"placeholder",
 				"min-value",
 				"max-value",
 				"granularity",
 				"hour-cycle",
+				"step",
+				"step-snapping",
 				"locale",
 				"disabled",
 				"readonly",
 				"name",
 				"hide-time-zone",
+				"required",
+				"dir",
+				"as",
+				"as-child",
 				"aria-labelledby",
 				"aria-describedby",
 				"aria-required",