@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system243.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system243.js","names":[],"sources":["../src/components/BTimeline/BTimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue';\n\nimport type { BTimelineItemColor, BTimelineItemPlacement, BTimelineVariant } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  color = 'blue',\n  icon,\n  loading = false,\n  placement,\n} = defineProps<{\n  /**\n   * Dot color - preset (`blue` | `red` | `green` | `gray`) or any CSS color.\n   * @default 'blue'\n   */\n  color?: BTimelineItemColor;\n  /**\n   * Custom dot content string/emoji. Use the `#icon` slot for rich content.\n   */\n  icon?: string;\n  /**\n   * Shows a spinner on this item's dot - use for in-progress items.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Override the parent timeline's mode for this item only.\n   * Pins the item to the `'start'` or `'end'` side regardless of mode.\n   */\n  placement?: BTimelineItemPlacement;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the timeline item. */\n  default?(): unknown;\n  /** Custom dot/icon content - fully replaces the standard circle. */\n  icon?(): unknown;\n  /** Label shown on the opposing side in alternate/end mode. */\n  label?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Context from parent (mode + item index + variant)\n// ─────────────────────────────────────────────\nconst timelineMode = inject<'start' | 'alternate' | 'end'>('b-timeline-mode', 'start');\nconst timelineIndex = inject<number>('b-timeline-item-index', 0);\nconst timelineVariant = inject<BTimelineVariant>('b-timeline-variant', 'filled');\n\n// ─────────────────────────────────────────────\n// Color helpers\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: string[] = ['blue', 'red', 'green', 'gray'];\n\nconst isPreset = computed(() => PRESET_COLORS.includes(color));\n\nconst colorClass = computed(() =>\n  isPreset.value ? `b-timeline-item--${color}` : 'b-timeline-item--custom',\n);\n\nconst colorStyle = computed<Record<string, string> | undefined>(() =>\n  !isPreset.value ? { '--b-timeline-item-dot-color': color } : undefined,\n);\n\n// ─────────────────────────────────────────────\n// Position class\n// ─────────────────────────────────────────────\nconst positionClass = computed(() => {\n  // Per-item placement overrides the global mode\n  if (placement) {\n    return placement === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n  }\n  if (timelineMode === 'alternate') {\n    return timelineIndex % 2 === 0 ? 'b-timeline-item--left' : 'b-timeline-item--right';\n  }\n  return timelineMode === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n});\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-timeline-item',\n  colorClass.value,\n  positionClass.value,\n  { 'b-timeline-item--pending': loading },\n]);\n\n// ─────────────────────────────────────────────\n// Variant (injected from parent BTimeline)\n// ─────────────────────────────────────────────\nconst variantClass = computed(() =>\n  timelineVariant === 'outlined' ? 'b-timeline-item__dot--outlined' : undefined,\n);\n</script>\n\n<template>\n  <li :class=\"rootClasses\" :style=\"colorStyle\">\n    <!-- Label - always rendered as a structural spacer; CSS hides it in start mode -->\n    <span class=\"b-timeline-item__label\">\n      <slot name=\"label\" />\n    </span>\n\n    <!-- Tail (connecting line) -->\n    <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n\n    <!-- Dot -->\n    <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n      <slot name=\"icon\">\n        <template v-if=\"icon\">\n          <span\n            class=\"b-timeline-item__dot b-timeline-item__dot--custom\"\n            :data-icon=\"icon\"\n            aria-hidden=\"true\"\n          />\n        </template>\n        <template v-else-if=\"loading\">\n          <span class=\"b-timeline-item__dot--pending-spinner\" />\n        </template>\n        <template v-else>\n          <span class=\"b-timeline-item__dot\" :class=\"variantClass\" />\n        </template>\n      </slot>\n    </div>\n\n    <!-- Content -->\n    <div class=\"b-timeline-item__content\">\n      <slot />\n    </div>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAkDA,IAAM,IAAe,EAAsC,mBAAmB,QAAQ,EAChF,IAAgB,EAAe,yBAAyB,EAAE,EAC1D,IAAkB,EAAyB,sBAAsB,SAAS,EAK1E,IAA0B;GAAC;GAAQ;GAAO;GAAS;GAAO,EAE1D,IAAW,QAAe,EAAc,SAAS,EAAA,MAAM,CAAC,EAExD,IAAa,QACjB,EAAS,QAAQ,oBAAoB,EAAA,UAAU,0BAChD,EAEK,IAAa,QAChB,EAAS,QAAmD,KAAA,IAA3C,EAAE,+BAA+B,EAAA,OAAO,CAC3D,EAKK,IAAgB,QAEhB,EAAA,YACK,EAAA,cAAc,QAAQ,2BAA2B,0BAEtD,MAAiB,cACZ,IAAgB,KAAM,IAAI,0BAA0B,2BAEtD,MAAiB,QAAQ,2BAA2B,wBAC3D,EAKI,IAAc,QAAe;GACjC;GACA,EAAW;GACX,EAAc;GACd,EAAE,4BAA4B,EAAA,SAAS;GACxC,CAAC,EAKI,IAAe,QACnB,MAAoB,aAAa,mCAAmC,KAAA,EACrE;yBAIC,EAgCK,MAAA;GAhCA,OAAK,EAAE,EAAA,MAAW;GAAG,OAAK,EAAE,EAAA,MAAU;;GAEzC,EAEO,QAFP,GAEO,CADL,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA;YAIvB,EAAwD,OAAA;IAAnD,OAAM;IAAwB,eAAY;;GAG/C,EAgBM,OAhBN,GAgBM,CAfJ,EAcO,EAAA,QAAA,QAAA,EAAA,QAAA,CAbW,EAAA,QAAA,GAAA,EACd,EAIE,QAAA;;IAHA,OAAM;IACL,aAAW,EAAA;IACZ,eAAY;qBAGK,EAAA,WAAA,GAAA,EACnB,EAAsD,QAAtD,EAAsD,KAAA,GAAA,EAGtD,EAA2D,QAAA;;IAArD,OAAK,EAAA,CAAC,wBAA+B,EAAA,MAAY,CAAA;;GAM7D,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"design-system243.js","names":[],"sources":["../src/components/BTabs/BTabPane.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VNode } from 'vue';\nimport { inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue';\n\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /** Unique key identifying this tab pane. */\n  tabKey: string;\n  /** Tab header label text. Use the `tab` slot for rich labels. */\n  tab?: string;\n  /** Whether this tab is disabled. @default false */\n  disabled?: boolean;\n  /** Show close button in editable-card mode. @default true */\n  closable?: boolean;\n  /** Destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Force render content even when inactive. @default false */\n  forceRender?: boolean;\n  /** Keep component state alive when switching away. Overrides global setting. */\n  keepAlive?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Tab pane content. */\n  default?: () => unknown;\n  /** Custom tab label content. */\n  tab?: () => unknown;\n}>();\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Inject parent context\n// ─────────────────────────────────────────────\nconst tabsContext = inject(BTabsContextKey, null);\n\n// ─────────────────────────────────────────────\n// Registration helpers\n// ─────────────────────────────────────────────\nfunction buildRegistration() {\n  return {\n    key: props.tabKey,\n    label: props.tab,\n    disabled: props.disabled,\n    closable: props.closable,\n    destroyOnHidden: props.destroyOnHidden,\n    forceRender: props.forceRender,\n    keepAlive: props.keepAlive,\n    renderContent: () => (slots.default?.() ?? []) as VNode[],\n    renderLabel: slots.tab ? () => slots.tab!() as VNode[] : undefined,\n  };\n}\n\nonMounted(() => {\n  tabsContext?.register(buildRegistration());\n});\n\nonBeforeUnmount(() => {\n  tabsContext?.unregister(props.tabKey);\n});\n\nwatch(\n  () => [\n    props.tab,\n    props.disabled,\n    props.closable,\n    props.destroyOnHidden,\n    props.forceRender,\n    props.keepAlive,\n  ],\n  () => {\n    tabsContext?.update(props.tabKey, buildRegistration());\n  },\n);\n</script>\n\n<template>\n  <!-- BTabPane is a registration-only component. All rendering is handled by BTabs. -->\n  <slot v-if=\"false\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EASA,IAAM,IAAQ,GA2BR,IAAQ,GAAU,EAKlB,IAAc,EAAO,GAAiB,KAAK;EAKjD,SAAS,IAAoB;AAC3B,UAAO;IACL,KAAK,EAAM;IACX,OAAO,EAAM;IACb,UAAU,EAAM;IAChB,UAAU,EAAM;IAChB,iBAAiB,EAAM;IACvB,aAAa,EAAM;IACnB,WAAW,EAAM;IACjB,qBAAsB,EAAM,WAAW,IAAI,EAAE;IAC7C,aAAa,EAAM,YAAY,EAAM,KAAM,GAAc,KAAA;IAC1D;;SAGH,QAAgB;AACd,MAAa,SAAS,GAAmB,CAAC;IAC1C,EAEF,QAAsB;AACpB,MAAa,WAAW,EAAM,OAAO;IACrC,EAEF,QACQ;GACJ,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACP,QACK;AACJ,MAAa,OAAO,EAAM,QAAQ,GAAmB,CAAC;IAEzD"}

package/dist/design-system244.js

@@ -1,5 +1,5 @@
 import e from "./design-system243.js";
-//#region src/components/BTimeline/BTimelineItem.vue
+//#region src/components/BTabs/BTabPane.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system244.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system244.js","names":[],"sources":["../src/components/BTimeline/BTimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue';\n\nimport type { BTimelineItemColor, BTimelineItemPlacement, BTimelineVariant } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  color = 'blue',\n  icon,\n  loading = false,\n  placement,\n} = defineProps<{\n  /**\n   * Dot color - preset (`blue` | `red` | `green` | `gray`) or any CSS color.\n   * @default 'blue'\n   */\n  color?: BTimelineItemColor;\n  /**\n   * Custom dot content string/emoji. Use the `#icon` slot for rich content.\n   */\n  icon?: string;\n  /**\n   * Shows a spinner on this item's dot - use for in-progress items.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Override the parent timeline's mode for this item only.\n   * Pins the item to the `'start'` or `'end'` side regardless of mode.\n   */\n  placement?: BTimelineItemPlacement;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the timeline item. */\n  default?(): unknown;\n  /** Custom dot/icon content - fully replaces the standard circle. */\n  icon?(): unknown;\n  /** Label shown on the opposing side in alternate/end mode. */\n  label?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Context from parent (mode + item index + variant)\n// ─────────────────────────────────────────────\nconst timelineMode = inject<'start' | 'alternate' | 'end'>('b-timeline-mode', 'start');\nconst timelineIndex = inject<number>('b-timeline-item-index', 0);\nconst timelineVariant = inject<BTimelineVariant>('b-timeline-variant', 'filled');\n\n// ─────────────────────────────────────────────\n// Color helpers\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: string[] = ['blue', 'red', 'green', 'gray'];\n\nconst isPreset = computed(() => PRESET_COLORS.includes(color));\n\nconst colorClass = computed(() =>\n  isPreset.value ? `b-timeline-item--${color}` : 'b-timeline-item--custom',\n);\n\nconst colorStyle = computed<Record<string, string> | undefined>(() =>\n  !isPreset.value ? { '--b-timeline-item-dot-color': color } : undefined,\n);\n\n// ─────────────────────────────────────────────\n// Position class\n// ─────────────────────────────────────────────\nconst positionClass = computed(() => {\n  // Per-item placement overrides the global mode\n  if (placement) {\n    return placement === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n  }\n  if (timelineMode === 'alternate') {\n    return timelineIndex % 2 === 0 ? 'b-timeline-item--left' : 'b-timeline-item--right';\n  }\n  return timelineMode === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n});\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-timeline-item',\n  colorClass.value,\n  positionClass.value,\n  { 'b-timeline-item--pending': loading },\n]);\n\n// ─────────────────────────────────────────────\n// Variant (injected from parent BTimeline)\n// ─────────────────────────────────────────────\nconst variantClass = computed(() =>\n  timelineVariant === 'outlined' ? 'b-timeline-item__dot--outlined' : undefined,\n);\n</script>\n\n<template>\n  <li :class=\"rootClasses\" :style=\"colorStyle\">\n    <!-- Label - always rendered as a structural spacer; CSS hides it in start mode -->\n    <span class=\"b-timeline-item__label\">\n      <slot name=\"label\" />\n    </span>\n\n    <!-- Tail (connecting line) -->\n    <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n\n    <!-- Dot -->\n    <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n      <slot name=\"icon\">\n        <template v-if=\"icon\">\n          <span\n            class=\"b-timeline-item__dot b-timeline-item__dot--custom\"\n            :data-icon=\"icon\"\n            aria-hidden=\"true\"\n          />\n        </template>\n        <template v-else-if=\"loading\">\n          <span class=\"b-timeline-item__dot--pending-spinner\" />\n        </template>\n        <template v-else>\n          <span class=\"b-timeline-item__dot\" :class=\"variantClass\" />\n        </template>\n      </slot>\n    </div>\n\n    <!-- Content -->\n    <div class=\"b-timeline-item__content\">\n      <slot />\n    </div>\n  </li>\n</template>\n"],"mappings":""}
+{"version":3,"file":"design-system244.js","names":[],"sources":["../src/components/BTabs/BTabPane.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VNode } from 'vue';\nimport { inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue';\n\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /** Unique key identifying this tab pane. */\n  tabKey: string;\n  /** Tab header label text. Use the `tab` slot for rich labels. */\n  tab?: string;\n  /** Whether this tab is disabled. @default false */\n  disabled?: boolean;\n  /** Show close button in editable-card mode. @default true */\n  closable?: boolean;\n  /** Destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Force render content even when inactive. @default false */\n  forceRender?: boolean;\n  /** Keep component state alive when switching away. Overrides global setting. */\n  keepAlive?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Tab pane content. */\n  default?: () => unknown;\n  /** Custom tab label content. */\n  tab?: () => unknown;\n}>();\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Inject parent context\n// ─────────────────────────────────────────────\nconst tabsContext = inject(BTabsContextKey, null);\n\n// ─────────────────────────────────────────────\n// Registration helpers\n// ─────────────────────────────────────────────\nfunction buildRegistration() {\n  return {\n    key: props.tabKey,\n    label: props.tab,\n    disabled: props.disabled,\n    closable: props.closable,\n    destroyOnHidden: props.destroyOnHidden,\n    forceRender: props.forceRender,\n    keepAlive: props.keepAlive,\n    renderContent: () => (slots.default?.() ?? []) as VNode[],\n    renderLabel: slots.tab ? () => slots.tab!() as VNode[] : undefined,\n  };\n}\n\nonMounted(() => {\n  tabsContext?.register(buildRegistration());\n});\n\nonBeforeUnmount(() => {\n  tabsContext?.unregister(props.tabKey);\n});\n\nwatch(\n  () => [\n    props.tab,\n    props.disabled,\n    props.closable,\n    props.destroyOnHidden,\n    props.forceRender,\n    props.keepAlive,\n  ],\n  () => {\n    tabsContext?.update(props.tabKey, buildRegistration());\n  },\n);\n</script>\n\n<template>\n  <!-- BTabPane is a registration-only component. All rendering is handled by BTabs. -->\n  <slot v-if=\"false\" />\n</template>\n"],"mappings":""}

package/dist/design-system245.js

@@ -1,173 +1,286 @@
-import { BTooltipPlacement as e, BTooltipTrigger as t } from "./design-system3.js";
-import { useComponentId as n } from "./design-system10.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, watch as b } from "vue";
-//#region src/components/BTooltip/BTooltip.vue?vue&type=script&setup=true&lang.ts
-var x = ["aria-describedby"], S = ["id"], ee = {
+import { BTabsContextKey as e } from "./design-system242.js";
+import { Fragment as t, KeepAlive as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, h as ee, nextTick as u, normalizeClass as d, normalizeStyle as f, onMounted as p, openBlock as m, provide as h, ref as g, renderList as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, useId as x, vShow as S, watch as C, withDirectives as w, withModifiers as te } from "vue";
+//#region src/components/BTabs/BTabs.vue?vue&type=script&setup=true&lang.ts
+var ne = { class: "b-tabs__header" }, re = {
 	key: 0,
-	class: "b-tooltip__arrow",
-	"aria-hidden": "true"
-}, C = /* @__PURE__ */ l({
-	__name: "BTooltip",
+	class: "b-tabs__extra b-tabs__extra--left"
+}, ie = ["aria-orientation"], ae = [
+	"data-tab-key",
+	"aria-selected",
+	"aria-disabled",
+	"aria-controls",
+	"id",
+	"tabindex",
+	"onClick"
+], T = { class: "b-tabs__tab-label" }, oe = ["onClick"], se = {
+	key: 2,
+	class: "b-tabs__extra b-tabs__extra--right"
+}, ce = {
+	key: 0,
+	"aria-hidden": "true",
+	style: { display: "none" }
+}, E = { class: "b-tabs__content" }, D = [
+	"id",
+	"aria-labelledby",
+	"tabindex",
+	"aria-hidden"
+], O = [
+	"id",
+	"aria-labelledby",
+	"tabindex",
+	"aria-hidden"
+], k = /* @__PURE__ */ l({
+	__name: "BTabs",
 	props: {
-		title: {},
-		trigger: { default: () => t.Hover },
-		placement: { default: () => e.TopCenter },
-		arrow: {
+		activeKey: {},
+		defaultActiveKey: {},
+		items: { default: () => [] },
+		type: { default: "line" },
+		placement: { default: "top" },
+		size: { default: "middle" },
+		centered: {
+			type: Boolean,
+			default: !1
+		},
+		animated: {
 			type: Boolean,
 			default: !0
 		},
-		color: {},
-		mouseEnterDelay: { default: 100 },
-		mouseLeaveDelay: { default: 100 },
-		destroyTooltipOnHide: {
+		hideAdd: {
 			type: Boolean,
 			default: !1
 		},
-		zIndex: { default: 1070 },
-		fresh: {
+		destroyOnHidden: {
 			type: Boolean,
 			default: !1
 		},
-		autoAdjustOverflow: { type: Boolean },
-		modelValue: {
+		keepAlive: {
 			type: Boolean,
-			default: () => void 0
+			default: !1
 		},
-		toggleClass: {},
-		tooltipClass: {},
-		tooltipInnerClass: {}
+		tabBarGutter: {}
 	},
-	emits: ["openChange", "update:modelValue"],
-	setup(l, { expose: C, emit: w }) {
-		let T = w, { componentUID: E } = n(), D = y(), O = h(!1), k = i(() => l.modelValue === void 0 ? O.value : l.modelValue), A = h(!1), j = i(() => l.fresh || l.destroyTooltipOnHide ? k.value : A.value || k.value);
-		b(k, (e) => {
-			e && (A.value = !0);
-		});
-		let M = null, N = null;
-		function P() {
-			M &&= (clearTimeout(M), null), N &&= (clearTimeout(N), null);
-		}
-		function F(e = 0) {
-			P(), !k.value && (e > 0 ? M = setTimeout(() => L(), e) : L());
-		}
-		function I(e = 0) {
-			P(), k.value && (e > 0 ? N = setTimeout(() => R(), e) : R());
-		}
-		function L() {
-			V.value?.showPopover();
-		}
-		function R() {
-			V.value?.hidePopover();
-		}
-		function z(e) {
-			l.modelValue === void 0 ? O.value = e : T("update:modelValue", e), T("openChange", e);
+	emits: [
+		"update:activeKey",
+		"change",
+		"tabClick",
+		"edit"
+	],
+	setup(k, { emit: A }) {
+		let j = A, M = x(), N = (e) => `${M}-tab-${e}`, P = (e) => `${M}-tabpanel-${e}`, F = g(/* @__PURE__ */ new Map()), I = g([]);
+		function L(e) {
+			F.value.set(e.key, e), I.value.includes(e.key) || (I.value = [...I.value, e.key]);
 		}
-		let B = ({ newState: e }) => {
-			z(e === "open");
-		}, V = h(null), H = h(null);
-		function U() {
-			k.value ? I() : F();
+		function R(e) {
+			F.value.delete(e), I.value = I.value.filter((t) => t !== e);
 		}
-		function W() {
-			F(l.mouseEnterDelay);
+		function z(e, t) {
+			F.value.set(e, t);
 		}
-		function G() {
-			I(l.mouseLeaveDelay);
-		}
-		function K() {
-			F();
+		let B = r(() => k.items && k.items.length > 0), V = r(() => B.value ? k.items : I.value.map((e) => F.value.get(e)).filter((e) => e !== void 0).map((e) => ({
+			key: e.key,
+			label: e.label,
+			disabled: e.disabled,
+			closable: e.closable,
+			destroyOnHidden: e.destroyOnHidden,
+			forceRender: e.forceRender,
+			keepAlive: e.keepAlive
+		}))), H = r(() => k.activeKey !== void 0), U = r(() => V.value.find((e) => !e.disabled)?.key ?? V.value[0]?.key ?? ""), W = g(k.activeKey ?? k.defaultActiveKey ?? U.value);
+		C(() => k.activeKey, (e) => {
+			e !== void 0 && (W.value = e);
+		}), C(V, () => {
+			(W.value === void 0 || !V.value.find((e) => e.key === W.value)) && (W.value = U.value);
+		});
+		let G = r(() => H.value ? k.activeKey : W.value);
+		h(e, {
+			activeKey: G,
+			type: r(() => k.type),
+			size: r(() => k.size),
+			placement: r(() => k.placement),
+			keepAlive: r(() => k.keepAlive),
+			destroyOnHidden: r(() => k.destroyOnHidden),
+			register: L,
+			unregister: R,
+			update: z
+		});
+		function K(e, t) {
+			let n = V.value.find((t) => t.key === e);
+			!n || n.disabled || (t && j("tabClick", e, t), e !== G.value && (H.value || (W.value = e), j("update:activeKey", e), j("change", e)));
 		}
-		function q() {
-			I();
+		function le() {
+			j("edit", null, "add");
 		}
-		function J(e) {
-			e.key === "Escape" && k.value && (e.preventDefault(), I(), H.value?.focus());
+		function ue(e, t) {
+			t.stopPropagation(), j("edit", e, "remove");
 		}
+		let q = g(null), J = g({});
 		function Y() {
-			l.trigger === t.Hover && P();
+			if (!q.value || k.type !== "line") return;
+			let e = q.value.querySelector(".b-tabs__tab--active");
+			e && (k.placement === "left" || k.placement === "right" ? J.value = {
+				top: `${e.offsetTop}px`,
+				height: `${e.offsetHeight}px`
+			} : J.value = {
+				left: `${e.offsetLeft}px`,
+				width: `${e.offsetWidth}px`
+			});
 		}
-		function X() {
-			l.trigger === t.Hover && I(l.mouseLeaveDelay);
-		}
-		function Z() {
-			let e = H.value;
-			if (e) switch (e.addEventListener("keydown", J), l.trigger) {
-				case t.Click:
-					e.addEventListener("click", U);
-					break;
-				case t.Focus:
-					e.addEventListener("focusin", K), e.addEventListener("focusout", q);
-					break;
-				case t.Hover:
-				default:
-					e.addEventListener("mouseenter", W), e.addEventListener("mouseleave", G), e.addEventListener("focusin", K), e.addEventListener("focusout", q);
-					break;
+		C(G, async () => {
+			await u(), Y();
+		}), p(() => {
+			Y();
+		});
+		function de(e) {
+			let t = k.placement === "left" || k.placement === "right", n = t ? ["ArrowDown"] : ["ArrowRight"], r = t ? ["ArrowUp"] : ["ArrowLeft"];
+			if (e.key === "Delete" && k.type === "editable-card") {
+				let t = V.value.find((e) => e.key === G.value);
+				t && t.closable !== !1 && (e.preventDefault(), j("edit", G.value, "remove"));
+				return;
+			}
+			if ([
+				...n,
+				...r,
+				"Home",
+				"End"
+			].includes(e.key)) {
+				e.preventDefault();
+				let t = V.value.filter((e) => !e.disabled);
+				if (t.length === 0) return;
+				let i = t.findIndex((e) => e.key === G.value), a;
+				a = n.includes(e.key) ? (i + 1) % t.length : r.includes(e.key) ? (i - 1 + t.length) % t.length : e.key === "Home" ? 0 : t.length - 1;
+				let o = t[a].key;
+				K(o), u(() => {
+					q.value && q.value.querySelector(`[data-tab-key="${o}"]`)?.focus();
+				});
 			}
 		}
-		function Q() {
-			let e = H.value;
-			e && (e.removeEventListener("keydown", J), e.removeEventListener("click", U), e.removeEventListener("focusin", K), e.removeEventListener("focusout", q), e.removeEventListener("mouseenter", W), e.removeEventListener("mouseleave", G));
-		}
-		p(() => {
-			Z();
-		}), f(() => {
-			Q(), P();
-		}), b(() => l.trigger, () => {
-			Q(), Z();
-		}), b(() => l.modelValue, (e) => {
-			e !== void 0 && (e ? V.value?.showPopover() : V.value?.hidePopover());
+		let X = g(new Set([G.value]));
+		C(G, (e) => {
+			X.value.add(e);
 		});
-		let $ = i(() => `--b-tooltip-anchor-${E.value}`), te = i(() => ({
-			[e.TopLeft]: "top-left",
-			[e.TopCenter]: "top-center",
-			[e.TopRight]: "top-right",
-			[e.RightTop]: "right-top",
-			[e.RightCenter]: "right-center",
-			[e.RightBottom]: "right-bottom",
-			[e.BottomRight]: "bottom-right",
-			[e.BottomCenter]: "bottom-center",
-			[e.BottomLeft]: "bottom-left",
-			[e.LeftBottom]: "left-bottom",
-			[e.LeftCenter]: "left-center",
-			[e.LeftTop]: "left-top"
-		})[l.placement] ?? "top-center"), ne = i(() => {
-			if (l.color) return {
-				"--b-tooltip-bg": l.color,
-				"--b-tooltip-arrow-color": l.color
-			};
+		function Z(e) {
+			return e.destroyOnHidden ? !1 : e.keepAlive === void 0 ? k.destroyOnHidden ? !1 : k.keepAlive : e.keepAlive;
+		}
+		function fe(e) {
+			return e.forceRender || Z(e) ? !0 : e.destroyOnHidden ?? k.destroyOnHidden ? e.key === G.value : X.value.has(e.key);
+		}
+		let Q = r(() => {
+			let e = {};
+			for (let t of V.value) Z(t) && (e[t.key] = l({
+				name: `BTabPanel_${t.key}`,
+				setup() {
+					return () => {
+						let e = F.value.get(t.key);
+						return e ? e.renderContent() : null;
+					};
+				}
+			}));
+			return e;
 		});
-		return C({
-			open: L,
-			close: R
-		}), (e, t) => (m(), o(r, null, [s("div", {
-			ref_key: "toggleRef",
-			ref: H,
-			class: u(["b-tooltip__toggle", l.toggleClass]),
-			style: d({ anchorName: $.value }),
-			"aria-describedby": k.value ? v(D) : void 0
-		}, [g(e.$slots, "default")], 14, x), s("div", {
-			ref_key: "tooltipRef",
-			ref: V,
-			popover: "manual",
-			class: u([
-				"b-tooltip__content",
-				te.value,
-				{ "b-tooltip__content--no-arrow": !l.arrow },
-				l.tooltipClass
+		function pe(e) {
+			return F.value.get(e)?.renderContent() ?? [];
+		}
+		function $(e) {
+			return F.value.get(e)?.renderLabel?.();
+		}
+		let me = r(() => [
+			"b-tabs",
+			`b-tabs--${k.type}`,
+			`b-tabs--${k.placement}`,
+			`b-tabs--${k.size}`,
+			{ "b-tabs--centered": k.centered }
+		]), he = r(() => k.tabBarGutter === void 0 ? void 0 : { gap: `${k.tabBarGutter}px` });
+		return (e, r) => (m(), o("div", { class: d(me.value) }, [
+			s("div", ne, [
+				e.$slots.leftExtra ? (m(), o("div", re, [v(e.$slots, "leftExtra")])) : a("", !0),
+				s("div", {
+					ref_key: "tabListRef",
+					ref: q,
+					class: "b-tabs__list",
+					role: "tablist",
+					"aria-orientation": k.placement === "left" || k.placement === "right" ? "vertical" : "horizontal",
+					style: f(he.value)
+				}, [(m(!0), o(t, null, _(V.value, (n) => (m(), o("div", {
+					key: n.key,
+					"data-tab-key": n.key,
+					class: d(["b-tabs__tab", {
+						"b-tabs__tab--active": n.key === G.value,
+						"b-tabs__tab--disabled": n.disabled
+					}]),
+					role: "tab",
+					"aria-selected": n.key === G.value,
+					"aria-disabled": n.disabled || void 0,
+					"aria-controls": P(n.key),
+					id: N(n.key),
+					tabindex: n.key === G.value ? 0 : -1,
+					onClick: (e) => !n.disabled && K(n.key, e),
+					onKeydown: de
+				}, [s("span", T, [B.value ? v(e.$slots, "label", {
+					key: 0,
+					item: n,
+					active: n.key === G.value
+				}, () => [c(b(n.label), 1)]) : (m(), o(t, { key: 1 }, [$(n.key) ? (m(), i(y(() => ee("span", $(n.key))), { key: 0 })) : (m(), o(t, { key: 1 }, [c(b(n.label), 1)], 64))], 64))]), k.type === "editable-card" && n.closable !== !1 ? (m(), o("span", {
+					key: 0,
+					class: "b-tabs__tab-remove",
+					"aria-hidden": "true",
+					onClick: te((e) => ue(n.key, e), ["stop"])
+				}, [v(e.$slots, "removeIcon", { item: n }, () => [r[0] ||= s("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					class: "b-tabs__close-icon"
+				}, [s("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" })], -1)])], 8, oe)) : a("", !0)], 42, ae))), 128)), k.type === "line" ? (m(), o("div", {
+					key: 0,
+					class: "b-tabs__ink-bar",
+					"aria-hidden": "true",
+					style: f(J.value)
+				}, null, 4)) : a("", !0)], 12, ie),
+				k.type === "editable-card" && !k.hideAdd ? (m(), o("button", {
+					key: 1,
+					class: "b-tabs__add",
+					"aria-label": "Add tab",
+					onClick: le
+				}, [v(e.$slots, "addIcon", {}, () => [r[1] ||= s("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					"aria-hidden": "true",
+					class: "b-tabs__add-icon"
+				}, [s("path", { d: "M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" })], -1)])])) : a("", !0),
+				e.$slots.rightExtra ? (m(), o("div", se, [v(e.$slots, "rightExtra")])) : a("", !0)
 			]),
-			style: d([{
-				zIndex: l.zIndex,
-				positionAnchor: $.value
-			}, ne.value]),
-			role: "tooltip",
-			id: v(D),
-			onToggle: B,
-			onMouseenter: Y,
-			onMouseleave: X
-		}, [j.value || !l.destroyTooltipOnHide ? (m(), o(r, { key: 0 }, [l.arrow ? (m(), o("div", ee)) : a("", !0), s("div", { class: u(["b-tooltip__inner", l.tooltipInnerClass]) }, [g(e.$slots, "title", {}, () => [c(_(l.title), 1)])], 2)], 64)) : a("", !0)], 46, S)], 64));
+			B.value ? a("", !0) : w((m(), o("div", ce, [v(e.$slots, "default")], 512)), [[S, !1]]),
+			s("div", E, [(m(!0), o(t, null, _(V.value, (r) => (m(), o(t, { key: r.key }, [Z(r) ? w((m(), o("div", {
+				key: 0,
+				id: P(r.key),
+				class: d(["b-tabs__panel", {
+					"b-tabs__panel--active": r.key === G.value,
+					"b-tabs__panel--animated": k.animated
+				}]),
+				role: "tabpanel",
+				"aria-labelledby": N(r.key),
+				tabindex: r.key === G.value ? 0 : -1,
+				"aria-hidden": r.key !== G.value
+			}, [B.value ? a("", !0) : (m(), i(n, { key: 0 }, [r.key === G.value ? (m(), i(y(Q.value[r.key] ?? (() => null)), { key: r.key })) : a("", !0)], 1024)), B.value ? v(e.$slots, "default", {
+				key: 1,
+				item: r
+			}) : a("", !0)], 10, D)), [[S, r.key === G.value]]) : fe(r) ? w((m(), o("div", {
+				key: 1,
+				id: P(r.key),
+				class: d(["b-tabs__panel", {
+					"b-tabs__panel--active": r.key === G.value,
+					"b-tabs__panel--animated": k.animated
+				}]),
+				role: "tabpanel",
+				"aria-labelledby": N(r.key),
+				tabindex: r.key === G.value ? 0 : -1,
+				"aria-hidden": r.key !== G.value
+			}, [B.value ? v(e.$slots, "default", {
+				key: 0,
+				item: r
+			}) : (m(), i(y(() => pe(r.key)), { key: 1 }))], 10, O)), [[S, r.key === G.value]]) : a("", !0)], 64))), 128))])
+		], 2));
 	}
 });
 //#endregion
-export { C as default };
+export { k as default };
 
 //# sourceMappingURL=design-system245.js.map