@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system186.js

@@ -1,91 +0,0 @@
-import e from "./design-system185.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f } from "vue";
-//#region src/components/BSkeleton/BSkeleton.vue?vue&type=script&setup=true&lang.ts
-var p = {
-	key: 0,
-	class: "b-skeleton__header"
-}, m = { class: "b-skeleton__content" }, h = {
-	key: 1,
-	class: "b-skeleton__paragraph",
-	"aria-hidden": "true"
-}, g = /* @__PURE__ */ s({
-	__name: "BSkeleton",
-	props: {
-		active: {
-			type: Boolean,
-			default: !1
-		},
-		avatar: {
-			type: [Boolean, Object],
-			default: !1
-		},
-		loading: {
-			type: Boolean,
-			default: !0
-		},
-		paragraph: {
-			type: [Boolean, Object],
-			default: !0
-		},
-		round: {
-			type: Boolean,
-			default: !1
-		},
-		title: {
-			type: [Boolean, Object],
-			default: !0
-		}
-	},
-	setup(s) {
-		let g = n(() => s.avatar !== !1 && s.avatar != null), _ = n(() => s.title !== !1 && s.title != null), v = n(() => s.paragraph !== !1 && s.paragraph != null), y = n(() => typeof s.avatar == "object" && s.avatar !== null ? s.avatar : {}), b = n(() => typeof s.title == "object" && s.title !== null ? s.title : {}), x = n(() => typeof s.paragraph == "object" && s.paragraph !== null ? s.paragraph : {}), S = n(() => T(b.value.width)), C = n(() => {
-			let e = x.value.rows;
-			return typeof e == "number" && e > 0 ? Math.floor(e) : 3;
-		}), w = n(() => {
-			let e = x.value.width, t = C.value, n = [];
-			for (let r = 0; r < t; r += 1) if (Array.isArray(e)) {
-				let t = e[r];
-				n.push(T(t) ?? "");
-			} else if (r === t - 1) {
-				let t = T(e);
-				n.push(t ?? "61%");
-			} else n.push("");
-			return n;
-		});
-		function T(e) {
-			if (e != null) return typeof e == "number" ? `${e}px` : e;
-		}
-		let E = n(() => ["b-skeleton", {
-			"b-skeleton--active": s.active,
-			"b-skeleton--with-avatar": g.value,
-			"b-skeleton--round": s.round
-		}]);
-		return (n, b) => s.loading ? (u(), i("div", {
-			key: 0,
-			class: c(E.value),
-			role: "status",
-			"aria-live": "polite",
-			"aria-label": "Loading"
-		}, [g.value ? (u(), i("div", p, [o(e, {
-			active: s.active || y.value.active,
-			shape: y.value.shape,
-			size: y.value.size
-		}, null, 8, [
-			"active",
-			"shape",
-			"size"
-		])])) : r("", !0), a("div", m, [_.value ? (u(), i("h3", {
-			key: 0,
-			class: "b-skeleton__title",
-			style: l(S.value ? { width: S.value } : void 0),
-			"aria-hidden": "true"
-		}, null, 4)) : r("", !0), v.value ? (u(), i("ul", h, [(u(!0), i(t, null, d(w.value, (e, t) => (u(), i("li", {
-			key: t,
-			class: "b-skeleton__paragraph-row",
-			style: l(e ? { width: e } : void 0)
-		}, null, 4))), 128))])) : r("", !0)])], 2)) : f(n.$slots, "default", { key: 1 });
-	}
-});
-//#endregion
-export { g as default };
-
-//# sourceMappingURL=design-system186.js.map

package/dist/design-system186.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system186.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAa,QAAe,EAAA,WAAW,MAAS,EAAA,UAAU,KAAK,EAC/D,IAAY,QAAe,EAAA,UAAU,MAAS,EAAA,SAAS,KAAK,EAC5D,IAAgB,QAAe,EAAA,cAAc,MAAS,EAAA,aAAa,KAAK,EAExE,IAAe,QACnB,OAAO,EAAA,UAAW,YAAY,EAAA,WAAW,OAAO,EAAA,SAAS,EAAE,CAC5D,EAEK,IAAc,QAClB,OAAO,EAAA,SAAU,YAAY,EAAA,UAAU,OAAO,EAAA,QAAQ,EAAE,CACzD,EAEK,IAAkB,QACtB,OAAO,EAAA,aAAc,YAAY,EAAA,cAAc,OAAO,EAAA,YAAY,EAAE,CACrE,EAEK,IAAa,QAAe,EAAe,EAAY,MAAM,MAAM,CAAC,EAEpE,IAAgB,QAAe;GACnC,IAAM,IAAI,EAAgB,MAAM;AAChC,UAAO,OAAO,KAAM,YAAY,IAAI,IAAI,KAAK,MAAM,EAAE,GAAG;IACxD,EAEI,IAAqB,QAAyB;GAClD,IAAM,IAAS,EAAgB,MAAM,OAC/B,IAAO,EAAc,OACrB,IAAgB,EAAE;AACxB,QAAK,IAAI,IAAI,GAAG,IAAI,GAAM,KAAK,EAC7B,KAAI,MAAM,QAAQ,EAAO,EAAE;IACzB,IAAM,IAAI,EAAO;AACjB,MAAI,KAAK,EAAe,EAAE,IAAI,GAAG;cACxB,MAAM,IAAO,GAAG;IAEzB,IAAM,IAAI,EAAe,EAAO;AAChC,MAAI,KAAK,KAAK,MAAM;SAEpB,GAAI,KAAK,GAAG;AAGhB,UAAO;IACP;EAEF,SAAS,EAAe,GAAoD;AACtE,YAAK,KAET,QADI,OAAO,KAAM,WAAiB,GAAG,EAAE,MAChC;;EAGT,IAAM,IAAc,QAAe,CACjC,cACA;GACE,sBAAsB,EAAA;GACtB,2BAA2B,EAAW;GACtC,qBAAqB,EAAA;GACtB,CACF,CAAC;mBAIW,EAAA,WAAA,GAAA,EAAX,EA0BM,OAAA;;GA1Be,OAAK,EAAE,EAAA,MAAW;GAAE,MAAK;GAAS,aAAU;GAAS,cAAW;MACxE,EAAA,SAAA,GAAA,EAAX,EAMM,OANN,GAMM,CALJ,EAIE,GAAA;GAHC,QAAQ,EAAA,UAAU,EAAA,MAAa;GAC/B,OAAO,EAAA,MAAa;GACpB,MAAM,EAAA,MAAa;;;;;qBAIxB,EAgBM,OAhBN,GAgBM,CAdI,EAAA,SAAA,GAAA,EADR,EAKE,MAAA;;GAHA,OAAM;GACL,OAAK,EAAE,EAAA,QAAU,EAAA,OAAY,EAAA,OAAU,GAAK,KAAA,EAAS;GACtD,eAAY;4BAGJ,EAAA,SAAA,GAAA,EAAV,EAOK,MAPL,GAOK,EAAA,EAAA,GAAA,EANH,EAKE,GAAA,MAAA,EAJiB,EAAA,QAAT,GAAG,YADb,EAKE,MAAA;GAHC,KAAK;GACN,OAAM;GACL,OAAK,EAAE,IAAC,EAAA,OAAY,GAAC,GAAK,KAAA,EAAS;gDAO1C,EAAQ,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA"}

package/dist/design-system189.js

@@ -1,38 +0,0 @@
-import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
-//#region src/components/BSkeleton/BSkeletonButton.vue?vue&type=script&setup=true&lang.ts
-var a = /* @__PURE__ */ n({
-	__name: "BSkeletonButton",
-	props: {
-		active: {
-			type: Boolean,
-			default: !1
-		},
-		block: {
-			type: Boolean,
-			default: !1
-		},
-		shape: { default: "default" },
-		size: { default: "default" }
-	},
-	setup(n) {
-		let a = e(() => [
-			"b-skeleton-element",
-			"b-skeleton-button",
-			`b-skeleton-button--${n.shape}`,
-			`b-skeleton-button--${n.size}`,
-			{
-				"b-skeleton-button--block": n.block,
-				"b-skeleton-element--active": n.active
-			}
-		]);
-		return (e, n) => (i(), t("span", {
-			class: r(a.value),
-			role: "presentation",
-			"aria-hidden": "true"
-		}, null, 2));
-	}
-});
-//#endregion
-export { a as default };
-
-//# sourceMappingURL=design-system189.js.map

package/dist/design-system189.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system189.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  shape = 'default',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Button shape. @default 'default' */\n  shape?: BSkeletonButtonShape;\n  /** Button size. @default 'default' */\n  size?: BSkeletonButtonSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${shape}`,\n  `b-skeleton-button--${size}`,\n  {\n    'b-skeleton-button--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-button {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-button-min-width, 64px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-button--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 48px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 80px;\n}\n\n.b-skeleton-button--round {\n  border-radius: 100px;\n}\n\n.b-skeleton-button--circle {\n  width: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-control-height, 32px);\n  border-radius: 50%;\n}\n.b-skeleton-button--circle.b-skeleton-button--small {\n  width: var(--b-skeleton-control-height-sm, 24px);\n  min-width: var(--b-skeleton-control-height-sm, 24px);\n}\n.b-skeleton-button--circle.b-skeleton-button--large {\n  width: var(--b-skeleton-control-height-lg, 40px);\n  min-width: var(--b-skeleton-control-height-lg, 40px);\n}\n\n.b-skeleton-button--square {\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAoBA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,sBAAsB,EAAA;GACtB,sBAAsB,EAAA;GACtB;IACE,4BAA4B,EAAA;IAC5B,8BAA8B,EAAA;IAC/B;GACF,CAAC;yBAIA,EAAgE,QAAA;GAAzD,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY"}

package/dist/design-system192.js

@@ -1,31 +0,0 @@
-import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a } from "vue";
-//#region src/components/BSkeleton/BSkeletonImage.vue?vue&type=script&setup=true&lang.ts
-var o = /* @__PURE__ */ r({
-	__name: "BSkeletonImage",
-	props: { active: {
-		type: Boolean,
-		default: !1
-	} },
-	setup(r) {
-		let o = e(() => [
-			"b-skeleton-element",
-			"b-skeleton-image",
-			{ "b-skeleton-element--active": r.active }
-		]);
-		return (e, r) => (a(), t("div", {
-			class: i(o.value),
-			role: "presentation",
-			"aria-hidden": "true"
-		}, [...r[0] ||= [n("svg", {
-			class: "b-skeleton-image__svg",
-			viewBox: "0 0 1098 1024",
-			xmlns: "http://www.w3.org/2000/svg",
-			"aria-hidden": "true",
-			focusable: "false"
-		}, [n("path", { d: "M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z" })], -1)]], 2));
-	}
-});
-//#endregion
-export { o as default };
-
-//# sourceMappingURL=design-system192.js.map

package/dist/design-system192.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system192.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <svg\n      class=\"b-skeleton-image__svg\"\n      viewBox=\"0 0 1098 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style>\n.b-skeleton-image {\n  display: inline-flex;\n  vertical-align: top;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-skeleton-image-size, 96px);\n  height: var(--b-skeleton-image-size, 96px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-image__svg {\n  width: 48px;\n  height: 48px;\n  fill: oklch(75% 0 0);\n}\n\n[data-prefers-color='dark'] .b-skeleton-image__svg {\n  fill: oklch(50% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton-image__svg {\n    fill: oklch(50% 0 0);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;EAQA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,EAAE,8BAA8B,EAAA,QAAQ;GACzC,CAAC;yBAIA,EAYM,OAAA;GAZA,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY;mBACpD,EAUM,OAAA;GATJ,OAAM;GACN,SAAQ;GACR,OAAM;GACN,eAAY;GACZ,WAAU;MAEV,EAEE,QAAA,EADA,GAAE,m3BAAi3B,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/design-system208.js

@@ -1,7 +0,0 @@
-import e from "./design-system207.js";
-//#region src/components/BSplitter/BSplitterPanel.vue
-var t = e;
-//#endregion
-export { t as default };
-
-//# sourceMappingURL=design-system208.js.map

package/dist/design-system217.js

@@ -1,7 +0,0 @@
-import e from "./design-system216.js";
-//#region src/components/BStatistic/BStatisticTimer.vue
-var t = e;
-//#endregion
-export { t as default };
-
-//# sourceMappingURL=design-system217.js.map

package/dist/design-system217.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system217.js","names":[],"sources":["../src/components/BStatistic/BStatisticTimer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue';\n\nimport BStatistic from './BStatistic.vue';\nimport type { BStatisticTimerType } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  type = 'countdown',\n  value,\n  format = 'HH:mm:ss',\n  title,\n  prefix,\n  suffix,\n  valueStyle,\n} = defineProps<{\n  /**\n   * Timer mode.\n   * - `'countdown'` - counts down to `value` (a future timestamp in ms).\n   * - `'countup'`   - counts up from `value` (a past timestamp in ms).\n   * @default 'countdown'\n   */\n  type?: BStatisticTimerType;\n  /** Target/start timestamp in ms (e.g. `Date.now() + 60_000`). */\n  value: number;\n  /**\n   * Format string. Tokens:\n   * - `D`   days\n   * - `H` / `HH` hours\n   * - `m` / `mm` minutes\n   * - `s` / `ss` seconds\n   * - `S` / `SSS` milliseconds\n   * @default 'HH:mm:ss'\n   */\n  format?: string;\n  /** Title text (mirrors `BStatistic#title`). */\n  title?: string;\n  /** Prefix text (mirrors `BStatistic#prefix`). */\n  prefix?: string;\n  /** Suffix text (mirrors `BStatistic#suffix`). */\n  suffix?: string;\n  /** Inline style on the value element. */\n  valueStyle?: string | Record<string, string | number>;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Emitted once a countdown reaches zero. */\n  finish: [];\n  /** Emitted on every tick with the current ms remaining/elapsed. */\n  change: [ms: number];\n}>();\n\ndefineSlots<{\n  title?(): unknown;\n  prefix?(): unknown;\n  suffix?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Tick\n// ─────────────────────────────────────────────\nconst TICK_MS = 1000 / 30; // ~33ms, smooth enough for sub-second formats\nconst now = ref<number>(0);\nlet timer: ReturnType<typeof setInterval> | null = null;\nlet finished = false;\n\nfunction compute(t: number): number {\n  return type === 'countdown' ? Math.max(0, value - t) : Math.max(0, t - value);\n}\n\nfunction tick() {\n  const t = Date.now();\n  now.value = t;\n  const ms = compute(t);\n  emit('change', ms);\n  if (type === 'countdown' && ms <= 0 && !finished) {\n    finished = true;\n    if (timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n    emit('finish');\n  }\n}\n\nonMounted(() => {\n  // SSR-safe: timers only run in the browser\n  finished = false;\n  now.value = Date.now();\n  // Emit initial change so consumers see the starting value\n  emit('change', compute(now.value));\n  timer = setInterval(tick, TICK_MS);\n});\n\nonBeforeUnmount(() => {\n  if (timer) {\n    clearInterval(timer);\n    timer = null;\n  }\n});\n\n// ─────────────────────────────────────────────\n// Formatting\n// ─────────────────────────────────────────────\nconst ms = computed<number>(() => (now.value ? compute(now.value) : compute(Date.now())));\n\nfunction formatDuration(t: number, fmt: string): string {\n  const days = Math.floor(t / 86_400_000);\n  let rem = t - days * 86_400_000;\n  const hours = Math.floor(rem / 3_600_000);\n  rem -= hours * 3_600_000;\n  const minutes = Math.floor(rem / 60_000);\n  rem -= minutes * 60_000;\n  const seconds = Math.floor(rem / 1000);\n  const milliseconds = rem - seconds * 1000;\n\n  // Bracketed text is treated as a literal (dayjs-compatible).\n  return fmt.replace(/\\[([^\\]]*)\\]|SSS|HH|mm|ss|D|H|m|s|S/g, (match, literal) => {\n    if (literal !== undefined) return literal;\n    switch (match) {\n      case 'SSS':\n        return String(milliseconds).padStart(3, '0');\n      case 'HH':\n        return String(hours).padStart(2, '0');\n      case 'mm':\n        return String(minutes).padStart(2, '0');\n      case 'ss':\n        return String(seconds).padStart(2, '0');\n      case 'D':\n        return String(days);\n      case 'H':\n        return String(hours);\n      case 'm':\n        return String(minutes);\n      case 's':\n        return String(seconds);\n      case 'S':\n        return String(milliseconds);\n      default:\n        return match;\n    }\n  });\n}\n\nconst formatted = computed<string>(() => formatDuration(ms.value, format));\n</script>\n\n<template>\n  <BStatistic\n    class=\"b-statistic-timer\"\n    :title=\"title\"\n    :value=\"formatted\"\n    :prefix=\"prefix\"\n    :suffix=\"suffix\"\n    :value-style=\"valueStyle\"\n  >\n    <template v-if=\"$slots.title\" #title><slot name=\"title\" /></template>\n    <template v-if=\"$slots.prefix\" #prefix><slot name=\"prefix\" /></template>\n    <template v-if=\"$slots.suffix\" #suffix><slot name=\"suffix\" /></template>\n  </BStatistic>\n</template>\n"],"mappings":""}

package/dist/design-system234.js

@@ -1,286 +0,0 @@
-import { BTabsContextKey as e } from "./design-system231.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-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: {
-		activeKey: {},
-		defaultActiveKey: {},
-		items: { default: () => [] },
-		type: { default: "line" },
-		placement: { default: "top" },
-		size: { default: "middle" },
-		centered: {
-			type: Boolean,
-			default: !1
-		},
-		animated: {
-			type: Boolean,
-			default: !0
-		},
-		hideAdd: {
-			type: Boolean,
-			default: !1
-		},
-		destroyOnHidden: {
-			type: Boolean,
-			default: !1
-		},
-		keepAlive: {
-			type: Boolean,
-			default: !1
-		},
-		tabBarGutter: {}
-	},
-	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]);
-		}
-		function R(e) {
-			F.value.delete(e), I.value = I.value.filter((t) => t !== e);
-		}
-		function z(e, t) {
-			F.value.set(e, t);
-		}
-		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 le() {
-			j("edit", null, "add");
-		}
-		function ue(e, t) {
-			t.stopPropagation(), j("edit", e, "remove");
-		}
-		let q = g(null), J = g({});
-		function Y() {
-			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`
-			});
-		}
-		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();
-				});
-			}
-		}
-		let X = g(new Set([G.value]));
-		C(G, (e) => {
-			X.value.add(e);
-		});
-		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;
-		});
-		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)
-			]),
-			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 { k as default };
-
-//# sourceMappingURL=design-system234.js.map

package/dist/design-system234.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system234.js","names":["$slots"],"sources":["../src/components/BTabs/BTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component, VNode } from 'vue';\nimport { computed, defineComponent, h, nextTick, onMounted, provide, ref, useId, watch } from 'vue';\n\nimport type {\n  BTabItem,\n  BTabPaneRegistration,\n  BTabsContext,\n  BTabsPlacement,\n  BTabsSize,\n  BTabsType,\n} from './types';\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  activeKey,\n  defaultActiveKey,\n  items = [],\n  type = 'line',\n  placement = 'top',\n  size = 'middle',\n  centered = false,\n  animated = true,\n  hideAdd = false,\n  destroyOnHidden = false,\n  keepAlive = false,\n  tabBarGutter,\n} = defineProps<{\n  /** Current active tab key (controlled via v-model:activeKey). */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. @default first non-disabled tab */\n  defaultActiveKey?: string;\n  /** Tab items configuration. When provided and non-empty, BTabPane children are ignored. */\n  items?: BTabItem[];\n  /** Visual style of the tabs. @default 'line' */\n  type?: BTabsType;\n  /** Position of the tab bar. @default 'top' */\n  placement?: BTabsPlacement;\n  /** Size preset for the tab bar. @default 'middle' */\n  size?: BTabsSize;\n  /** Whether to center the tab items. @default false */\n  centered?: boolean;\n  /** Whether content switching is animated. @default true */\n  animated?: boolean;\n  /** Whether to hide the add button in editable-card mode. @default false */\n  hideAdd?: boolean;\n  /** Whether to destroy inactive tab content globally. @default false */\n  destroyOnHidden?: boolean;\n  /** Whether to keep component state alive when switching tabs globally. @default false */\n  keepAlive?: boolean;\n  /** Gap between tabs in pixels. */\n  tabBarGutter?: number;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the active tab changes. */\n  (e: 'update:activeKey', key: string): void;\n  /** Fires when the active tab changes (alias for update:activeKey). */\n  (e: 'change', key: string): void;\n  /** Fires when a tab is clicked. */\n  (e: 'tabClick', key: string, event: MouseEvent): void;\n  /** Fires when a tab is added or removed (editable-card only). */\n  (e: 'edit', key: string | null, action: 'add' | 'remove'): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Items mode: receives { item } scoped prop. Pane mode: contains BTabPane children (no props). */\n  default?: (props: { item?: BTabItem }) => unknown;\n  /** Custom label renderer for each tab (items mode). */\n  label?: (props: { item: BTabItem; active: boolean }) => unknown;\n  /** Extra content on the left side of the tab bar. */\n  leftExtra?: () => unknown;\n  /** Extra content on the right side of the tab bar. */\n  rightExtra?: () => unknown;\n  /** Custom add button (editable-card type). */\n  addIcon?: () => unknown;\n  /** Custom remove/close icon (editable-card type). */\n  removeIcon?: (props: { item: BTabItem }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Instance-scoped ID prefix (prevents duplicate IDs when multiple BTabs on page)\n// ─────────────────────────────────────────────\nconst uid = useId();\nconst tabId = (key: string) => `${uid}-tab-${key}`;\nconst panelId = (key: string) => `${uid}-tabpanel-${key}`;\n\n// ─────────────────────────────────────────────\n// Pane registry (for BTabPane child component API)\n// ─────────────────────────────────────────────\nconst paneRegistry = ref(new Map<string, BTabPaneRegistration>());\nconst paneOrder = ref<string[]>([]);\n\nfunction registerPane(pane: BTabPaneRegistration) {\n  paneRegistry.value.set(pane.key, pane);\n  if (!paneOrder.value.includes(pane.key)) {\n    paneOrder.value = [...paneOrder.value, pane.key];\n  }\n}\n\nfunction unregisterPane(key: string) {\n  paneRegistry.value.delete(key);\n  paneOrder.value = paneOrder.value.filter((k) => k !== key);\n}\n\nfunction updatePane(key: string, pane: BTabPaneRegistration) {\n  paneRegistry.value.set(key, pane);\n}\n\n// ─────────────────────────────────────────────\n// Mode detection + effective items\n// ─────────────────────────────────────────────\nconst isItemsMode = computed(() => items && items.length > 0);\n\nconst effectiveItems = computed<BTabItem[]>(() => {\n  if (isItemsMode.value) return items;\n  return paneOrder.value\n    .map((key) => paneRegistry.value.get(key))\n    .filter((p): p is BTabPaneRegistration => p !== undefined)\n    .map((pane) => ({\n      key: pane.key,\n      label: pane.label,\n      disabled: pane.disabled,\n      closable: pane.closable,\n      destroyOnHidden: pane.destroyOnHidden,\n      forceRender: pane.forceRender,\n      keepAlive: pane.keepAlive,\n    }));\n});\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => activeKey !== undefined);\n\nconst firstEnabledKey = computed(\n  () => effectiveItems.value.find((i) => !i.disabled)?.key ?? effectiveItems.value[0]?.key ?? '',\n);\n\nconst internalKey = ref<string>(activeKey ?? defaultActiveKey ?? firstEnabledKey.value);\n\nwatch(\n  () => activeKey,\n  (val) => {\n    if (val !== undefined) internalKey.value = val;\n  },\n);\n\nwatch(effectiveItems, () => {\n  if (\n    internalKey.value === undefined ||\n    !effectiveItems.value.find((i) => i.key === internalKey.value)\n  ) {\n    internalKey.value = firstEnabledKey.value;\n  }\n});\n\nconst currentKey = computed(() => (isControlled.value ? activeKey! : internalKey.value));\n\n// ─────────────────────────────────────────────\n// Provide context to BTabPane children\n// ─────────────────────────────────────────────\nconst context: BTabsContext = {\n  activeKey: currentKey,\n  type: computed(() => type),\n  size: computed(() => size),\n  placement: computed(() => placement),\n  keepAlive: computed(() => keepAlive),\n  destroyOnHidden: computed(() => destroyOnHidden),\n  register: registerPane,\n  unregister: unregisterPane,\n  update: updatePane,\n};\n\nprovide(BTabsContextKey, context);\n\n// ─────────────────────────────────────────────\n// Tab activation\n// ─────────────────────────────────────────────\nfunction activateTab(key: string, event?: MouseEvent) {\n  const item = effectiveItems.value.find((i) => i.key === key);\n  if (!item || item.disabled) return;\n\n  if (event) {\n    emit('tabClick', key, event);\n  }\n\n  if (key === currentKey.value) return;\n\n  if (!isControlled.value) {\n    internalKey.value = key;\n  }\n  emit('update:activeKey', key);\n  emit('change', key);\n}\n\n// ─────────────────────────────────────────────\n// Editable-card actions\n// ─────────────────────────────────────────────\nfunction onAdd() {\n  emit('edit', null, 'add');\n}\n\nfunction onRemove(key: string, event: MouseEvent) {\n  event.stopPropagation();\n  emit('edit', key, 'remove');\n}\n\n// ─────────────────────────────────────────────\n// Ink bar positioning\n// ─────────────────────────────────────────────\nconst tabListRef = ref<HTMLElement | null>(null);\nconst inkBarStyle = ref<Record<string, string>>({});\n\nfunction updateInkBar() {\n  if (!tabListRef.value || type !== 'line') return;\n  const activeEl = tabListRef.value.querySelector<HTMLElement>('.b-tabs__tab--active');\n  if (!activeEl) return;\n\n  const isVertical = placement === 'left' || placement === 'right';\n\n  if (isVertical) {\n    inkBarStyle.value = {\n      top: `${activeEl.offsetTop}px`,\n      height: `${activeEl.offsetHeight}px`,\n    };\n  } else {\n    inkBarStyle.value = {\n      left: `${activeEl.offsetLeft}px`,\n      width: `${activeEl.offsetWidth}px`,\n    };\n  }\n}\n\nwatch(currentKey, async () => {\n  await nextTick();\n  updateInkBar();\n});\n\nonMounted(() => {\n  updateInkBar();\n});\n\n// ─────────────────────────────────────────────\n// Keyboard navigation (roving tabindex)\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent) {\n  const isVertical = placement === 'left' || placement === 'right';\n  const nextKeys = isVertical ? ['ArrowDown'] : ['ArrowRight'];\n  const prevKeys = isVertical ? ['ArrowUp'] : ['ArrowLeft'];\n\n  // Delete key closes the active tab in editable-card mode\n  if (event.key === 'Delete' && type === 'editable-card') {\n    const item = effectiveItems.value.find((i) => i.key === currentKey.value);\n    if (item && item.closable !== false) {\n      event.preventDefault();\n      emit('edit', currentKey.value, 'remove');\n    }\n    return;\n  }\n\n  if ([...nextKeys, ...prevKeys, 'Home', 'End'].includes(event.key)) {\n    event.preventDefault();\n    const enabledItems = effectiveItems.value.filter((i) => !i.disabled);\n    if (enabledItems.length === 0) return;\n\n    const currentIdx = enabledItems.findIndex((i) => i.key === currentKey.value);\n\n    let targetIdx: number;\n    if (nextKeys.includes(event.key)) {\n      targetIdx = (currentIdx + 1) % enabledItems.length;\n    } else if (prevKeys.includes(event.key)) {\n      targetIdx = (currentIdx - 1 + enabledItems.length) % enabledItems.length;\n    } else if (event.key === 'Home') {\n      targetIdx = 0;\n    } else {\n      targetIdx = enabledItems.length - 1;\n    }\n\n    const targetKey = enabledItems[targetIdx].key;\n    activateTab(targetKey);\n\n    nextTick(() => {\n      if (!tabListRef.value) return;\n      const targetEl = tabListRef.value.querySelector<HTMLElement>(`[data-tab-key=\"${targetKey}\"]`);\n      targetEl?.focus();\n    });\n  }\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive + content visibility\n// ─────────────────────────────────────────────\nconst renderedKeys = ref<Set<string>>(new Set([currentKey.value]));\n\nwatch(currentKey, (key) => {\n  renderedKeys.value.add(key);\n});\n\nfunction shouldUseKeepAlive(item: BTabItem): boolean {\n  if (item.destroyOnHidden) return false;\n  if (item.keepAlive !== undefined) return item.keepAlive;\n  if (destroyOnHidden) return false;\n  return keepAlive;\n}\n\nfunction shouldRender(item: BTabItem): boolean {\n  if (item.forceRender) return true;\n  if (shouldUseKeepAlive(item)) return true;\n  const itemDestroy = item.destroyOnHidden ?? destroyOnHidden;\n  if (itemDestroy) return item.key === currentKey.value;\n  return renderedKeys.value.has(item.key);\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive panel wrapper components\n// ─────────────────────────────────────────────\nconst panelWrappers = computed<Record<string, Component>>(() => {\n  const wrappers: Record<string, Component> = {};\n  for (const item of effectiveItems.value) {\n    if (!shouldUseKeepAlive(item)) continue;\n    wrappers[item.key] = defineComponent({\n      name: `BTabPanel_${item.key}`,\n      setup() {\n        return () => {\n          const pane = paneRegistry.value.get(item.key);\n          if (pane) {\n            return pane.renderContent();\n          }\n          return null;\n        };\n      },\n    });\n  }\n  return wrappers;\n});\n\nfunction getPaneContent(key: string): VNode[] {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderContent() ?? [];\n}\n\nfunction getPaneLabel(key: string): VNode[] | undefined {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderLabel?.();\n}\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-tabs',\n  `b-tabs--${type}`,\n  `b-tabs--${placement}`,\n  `b-tabs--${size}`,\n  { 'b-tabs--centered': centered },\n]);\n\nconst tabBarGutterStyle = computed(() =>\n  tabBarGutter !== undefined ? { gap: `${tabBarGutter}px` } : undefined,\n);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <!-- Tab bar -->\n    <div class=\"b-tabs__header\">\n      <div v-if=\"$slots.leftExtra\" class=\"b-tabs__extra b-tabs__extra--left\">\n        <slot name=\"leftExtra\" />\n      </div>\n\n      <div\n        ref=\"tabListRef\"\n        class=\"b-tabs__list\"\n        role=\"tablist\"\n        :aria-orientation=\"\n          placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal'\n        \"\n        :style=\"tabBarGutterStyle\"\n      >\n        <div\n          v-for=\"item in effectiveItems\"\n          :key=\"item.key\"\n          :data-tab-key=\"item.key\"\n          class=\"b-tabs__tab\"\n          :class=\"{\n            'b-tabs__tab--active': item.key === currentKey,\n            'b-tabs__tab--disabled': item.disabled,\n          }\"\n          role=\"tab\"\n          :aria-selected=\"item.key === currentKey\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :aria-controls=\"panelId(item.key)\"\n          :id=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          @click=\"!item.disabled && activateTab(item.key, $event)\"\n          @keydown=\"onKeydown\"\n        >\n          <span class=\"b-tabs__tab-label\">\n            <!-- Items mode: use label slot or item.label -->\n            <template v-if=\"isItemsMode\">\n              <slot name=\"label\" :item=\"item\" :active=\"item.key === currentKey\">\n                {{ item.label }}\n              </slot>\n            </template>\n            <!-- Pane mode: use pane's renderLabel or label string -->\n            <template v-else>\n              <component\n                v-if=\"getPaneLabel(item.key)\"\n                :is=\"() => h('span', getPaneLabel(item.key)!)\"\n              />\n              <template v-else>{{ item.label }}</template>\n            </template>\n          </span>\n          <span\n            v-if=\"type === 'editable-card' && item.closable !== false\"\n            class=\"b-tabs__tab-remove\"\n            aria-hidden=\"true\"\n            @click.stop=\"onRemove(item.key, $event)\"\n          >\n            <slot name=\"removeIcon\" :item=\"item\">\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" class=\"b-tabs__close-icon\">\n                <path\n                  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\"\n                />\n              </svg>\n            </slot>\n          </span>\n        </div>\n\n        <!-- Ink bar (line type only) -->\n        <div\n          v-if=\"type === 'line'\"\n          class=\"b-tabs__ink-bar\"\n          aria-hidden=\"true\"\n          :style=\"inkBarStyle\"\n        />\n      </div>\n\n      <!-- Add button (outside tablist to avoid aria-required-children violation) -->\n      <button\n        v-if=\"type === 'editable-card' && !hideAdd\"\n        class=\"b-tabs__add\"\n        aria-label=\"Add tab\"\n        @click=\"onAdd\"\n      >\n        <slot name=\"addIcon\">\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"b-tabs__add-icon\">\n            <path\n              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\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div v-if=\"$slots.rightExtra\" class=\"b-tabs__extra b-tabs__extra--right\">\n        <slot name=\"rightExtra\" />\n      </div>\n    </div>\n\n    <!-- Hidden slot area for BTabPane registration (pane mode only) -->\n    <div v-if=\"!isItemsMode\" v-show=\"false\" aria-hidden=\"true\" style=\"display: none\">\n      <slot />\n    </div>\n\n    <!-- Tab panels -->\n    <div class=\"b-tabs__content\">\n      <template v-for=\"item in effectiveItems\" :key=\"item.key\">\n        <!-- KeepAlive panels -->\n        <div\n          v-if=\"shouldUseKeepAlive(item)\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n          v-show=\"item.key === currentKey\"\n        >\n          <!-- Pane mode: KeepAlive caches wrapper component instances -->\n          <KeepAlive v-if=\"!isItemsMode\">\n            <component\n              v-if=\"item.key === currentKey\"\n              :is=\"panelWrappers[item.key] ?? (() => null)\"\n              :key=\"item.key\"\n            />\n          </KeepAlive>\n          <!-- Items mode: always render slot content; v-show on parent preserves state -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n        </div>\n\n        <!-- Standard panels (no KeepAlive) -->\n        <div\n          v-else-if=\"shouldRender(item)\"\n          v-show=\"item.key === currentKey\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n        >\n          <!-- Items mode: scoped slot -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n          <!-- Pane mode: render registered content -->\n          <component v-else :is=\"() => getPaneContent(item.key)\" />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTabs - Design tokens (scoped to .b-tabs)\n   ───────────────────────────────────────────── */\n.b-tabs {\n  --b-tabs-ink-bar-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-active-color: oklch(35% 0.2 260);\n  --b-tabs-item-color: oklch(30% 0.02 260 / 88%);\n  --b-tabs-item-hover-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-selected-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-disabled-color: oklch(30% 0.02 260 / 25%);\n  --b-tabs-title-font-size: 14px;\n  --b-tabs-title-font-size-lg: 16px;\n  --b-tabs-title-font-size-sm: 14px;\n  --b-tabs-card-bg: oklch(97% 0.003 260 / 50%);\n  --b-tabs-card-height: 40px;\n  --b-tabs-card-height-lg: 48px;\n  --b-tabs-card-height-sm: 32px;\n  --b-tabs-card-padding: 8px 16px;\n  --b-tabs-card-padding-lg: 11px 16px;\n  --b-tabs-card-padding-sm: 4px 8px;\n  --b-tabs-card-gutter: 2px;\n  --b-tabs-card-border-radius: 8px 8px 0 0;\n  --b-tabs-horizontal-item-gutter: 32px;\n  --b-tabs-horizontal-item-padding: 12px 0;\n  --b-tabs-horizontal-item-padding-lg: 16px 0;\n  --b-tabs-horizontal-item-padding-sm: 8px 0;\n  --b-tabs-horizontal-margin: 0 0 16px 0;\n  --b-tabs-vertical-item-margin: 16px 0 0 0;\n  --b-tabs-vertical-item-padding: 8px 24px;\n  --b-tabs-border-color: oklch(80% 0.005 260);\n  --b-tabs-content-min-height: 0;\n  --b-tabs-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n  --b-tabs-transition-duration: 200ms;\n\n  display: flex;\n  flex-direction: column;\n  font-size: var(--b-tabs-title-font-size);\n  line-height: 1.5;\n}\n\n/* ── Placement layouts ── */\n.b-tabs--left {\n  flex-direction: row;\n}\n\n.b-tabs--right {\n  flex-direction: row-reverse;\n}\n\n.b-tabs--bottom {\n  flex-direction: column-reverse;\n}\n\n/* ── Size variants ── */\n.b-tabs--large {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-lg);\n}\n\n.b-tabs--small {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Header\n   ───────────────────────────────────────────── */\n.b-tabs__header {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.b-tabs--top .b-tabs__header,\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n  margin: var(--b-tabs-horizontal-margin);\n}\n\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: none;\n  border-top: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--left .b-tabs__header,\n.b-tabs--right .b-tabs__header {\n  flex-direction: column;\n  align-items: stretch;\n  border-right: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--right .b-tabs__header {\n  border-right: none;\n  border-left: 1px solid var(--b-tabs-border-color);\n}\n\n/* Card type removes border from header */\n.b-tabs--card .b-tabs__header,\n.b-tabs--editable-card .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n}\n\n/* ─────────────────────────────────────────────\n   Tab list (roving tabindex container)\n   ───────────────────────────────────────────── */\n.b-tabs__list {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: var(--b-tabs-horizontal-item-gutter);\n}\n\n.b-tabs--centered .b-tabs__list {\n  justify-content: center;\n}\n\n.b-tabs--left .b-tabs__list,\n.b-tabs--right .b-tabs__list {\n  flex-direction: column;\n  gap: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Individual tab\n   ───────────────────────────────────────────── */\n.b-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  padding: var(--b-tabs-horizontal-item-padding);\n  border: none;\n  background: none;\n  color: var(--b-tabs-item-color);\n  font-size: inherit;\n  font-family: inherit;\n  cursor: pointer;\n  white-space: nowrap;\n  outline: none;\n  transition: color var(--b-tabs-transition-duration);\n  line-height: 1.5;\n}\n\n.b-tabs__tab:hover:not(.b-tabs__tab--disabled) {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__tab--active {\n  color: var(--b-tabs-item-selected-color);\n  font-weight: 500;\n}\n\n.b-tabs__tab--active:hover {\n  color: var(--b-tabs-item-active-color);\n}\n\n.b-tabs__tab--disabled {\n  color: var(--b-tabs-item-disabled-color);\n  cursor: not-allowed;\n}\n\n.b-tabs__tab:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n  border-radius: 4px;\n}\n\n/* Large size - tab padding */\n.b-tabs--large .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-lg);\n}\n\n/* Small size - tab padding */\n.b-tabs--small .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-sm);\n}\n\n/* Vertical tabs */\n.b-tabs--left .b-tabs__tab,\n.b-tabs--right .b-tabs__tab {\n  padding: var(--b-tabs-vertical-item-padding);\n  justify-content: flex-start;\n}\n\n.b-tabs--left .b-tabs__tab:not(:first-child),\n.b-tabs--right .b-tabs__tab:not(:first-child) {\n  margin: var(--b-tabs-vertical-item-margin);\n}\n\n/* ─────────────────────────────────────────────\n   Card-type tab\n   ───────────────────────────────────────────── */\n.b-tabs--card .b-tabs__list,\n.b-tabs--editable-card .b-tabs__list {\n  gap: var(--b-tabs-card-gutter);\n}\n\n.b-tabs--card .b-tabs__tab,\n.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n}\n\n.b-tabs--card .b-tabs__tab--active,\n.b-tabs--editable-card .b-tabs__tab--active {\n  background: white;\n  border-bottom-color: white;\n}\n\n.b-tabs--large.b-tabs--card .b-tabs__tab,\n.b-tabs--large.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-lg);\n  height: var(--b-tabs-card-height-lg);\n}\n\n.b-tabs--small.b-tabs--card .b-tabs__tab,\n.b-tabs--small.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-sm);\n  height: var(--b-tabs-card-height-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Ink bar (line type indicator)\n   ───────────────────────────────────────────── */\n.b-tabs__ink-bar {\n  position: absolute;\n  background: var(--b-tabs-ink-bar-color);\n  transition:\n    left var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    width var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    top var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    height var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);\n  pointer-events: none;\n}\n\n.b-tabs--top .b-tabs__ink-bar,\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: 0;\n  height: 2px;\n}\n\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: auto;\n  top: 0;\n}\n\n.b-tabs--left .b-tabs__ink-bar {\n  right: 0;\n  width: 2px;\n}\n\n.b-tabs--right .b-tabs__ink-bar {\n  left: 0;\n  width: 2px;\n}\n\n/* ─────────────────────────────────────────────\n   Close / Remove button\n   ───────────────────────────────────────────── */\n.b-tabs__tab-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.6;\n  transition:\n    opacity var(--b-tabs-transition-duration),\n    background var(--b-tabs-transition-duration);\n}\n\n.b-tabs__tab-remove:hover {\n  opacity: 1;\n  background: oklch(0% 0 0 / 8%);\n}\n\n.b-tabs__close-icon {\n  width: 12px;\n  height: 12px;\n}\n\n/* ─────────────────────────────────────────────\n   Add button\n   ───────────────────────────────────────────── */\n.b-tabs__add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n  cursor: pointer;\n  color: var(--b-tabs-item-color);\n  transition: color var(--b-tabs-transition-duration);\n}\n\n.b-tabs__add:hover {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__add:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n}\n\n.b-tabs__add-icon {\n  width: 16px;\n  height: 16px;\n}\n\n/* ─────────────────────────────────────────────\n   Extra content slots\n   ───────────────────────────────────────────── */\n.b-tabs__extra {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Content area\n   ───────────────────────────────────────────── */\n.b-tabs__content {\n  flex: 1;\n  min-height: var(--b-tabs-content-min-height);\n}\n\n.b-tabs__panel {\n  outline: none;\n}\n\n.b-tabs__panel--animated {\n  animation: b-tabs-fade-in var(--b-tabs-transition-duration) ease-in-out;\n}\n\n@keyframes b-tabs-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-tabs {\n  --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n  --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n  --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n  --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n  --b-tabs-border-color: oklch(35% 0.01 260);\n}\n\n[data-prefers-color='dark'] .b-tabs--card .b-tabs__tab--active,\n[data-prefers-color='dark'] .b-tabs--editable-card .b-tabs__tab--active {\n  background: oklch(20% 0.015 260);\n  border-bottom-color: oklch(20% 0.015 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tabs {\n    --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n    --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n    --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n    --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n    --b-tabs-border-color: oklch(35% 0.01 260);\n  }\n  [data-prefers-color='system'] .b-tabs--editable-card .b-tabs__tab--active {\n    background: oklch(20% 0.015 260);\n    border-bottom-color: oklch(20% 0.015 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tabs {\n    --b-tabs-transition-duration: 0ms;\n  }\n\n  .b-tabs__panel--animated {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,IAAM,IAAO,GAgCP,IAAM,GAAO,EACb,KAAS,MAAgB,GAAG,EAAI,OAAO,KACvC,KAAW,MAAgB,GAAG,EAAI,YAAY,KAK9C,IAAe,kBAAI,IAAI,KAAmC,CAAC,EAC3D,IAAY,EAAc,EAAE,CAAC;EAEnC,SAAS,EAAa,GAA4B;AAEhD,GADA,EAAa,MAAM,IAAI,EAAK,KAAK,EAAK,EACjC,EAAU,MAAM,SAAS,EAAK,IAAI,KACrC,EAAU,QAAQ,CAAC,GAAG,EAAU,OAAO,EAAK,IAAI;;EAIpD,SAAS,EAAe,GAAa;AAEnC,GADA,EAAa,MAAM,OAAO,EAAI,EAC9B,EAAU,QAAQ,EAAU,MAAM,QAAQ,MAAM,MAAM,EAAI;;EAG5D,SAAS,EAAW,GAAa,GAA4B;AAC3D,KAAa,MAAM,IAAI,GAAK,EAAK;;EAMnC,IAAM,IAAc,QAAe,EAAA,SAAS,EAAA,MAAM,SAAS,EAAE,EAEvD,IAAiB,QACjB,EAAY,QAAc,EAAA,QACvB,EAAU,MACd,KAAK,MAAQ,EAAa,MAAM,IAAI,EAAI,CAAA,CACxC,QAAQ,MAAiC,MAAM,KAAA,EAAS,CACxD,KAAK,OAAU;GACd,KAAK,EAAK;GACV,OAAO,EAAK;GACZ,UAAU,EAAK;GACf,UAAU,EAAK;GACf,iBAAiB,EAAK;GACtB,aAAa,EAAK;GAClB,WAAW,EAAK;GACjB,EAAE,CACL,EAKI,IAAe,QAAe,EAAA,cAAc,KAAA,EAAU,EAEtD,IAAkB,QAChB,EAAe,MAAM,MAAM,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAe,MAAM,IAAI,OAAO,GAC7F,EAEK,IAAc,EAAY,EAAA,aAAa,EAAA,oBAAoB,EAAgB,MAAM;AASvF,EAPA,QACQ,EAAA,YACL,MAAQ;AACP,GAAI,MAAQ,KAAA,MAAW,EAAY,QAAQ;IAE9C,EAED,EAAM,SAAsB;AAC1B,IACE,EAAY,UAAU,KAAA,KACtB,CAAC,EAAe,MAAM,MAAM,MAAM,EAAE,QAAQ,EAAY,MAAK,MAE7D,EAAY,QAAQ,EAAgB;IAEtC;EAEF,IAAM,IAAa,QAAgB,EAAa,QAAQ,EAAA,YAAa,EAAY,MAAO;AAiBxF,IAAQ,GAZsB;GAC5B,WAAW;GACX,MAAM,QAAe,EAAA,KAAK;GAC1B,MAAM,QAAe,EAAA,KAAK;GAC1B,WAAW,QAAe,EAAA,UAAU;GACpC,WAAW,QAAe,EAAA,UAAU;GACpC,iBAAiB,QAAe,EAAA,gBAAgB;GAChD,UAAU;GACV,YAAY;GACZ,QAAQ;GACT,CAEgC;EAKjC,SAAS,EAAY,GAAa,GAAoB;GACpD,IAAM,IAAO,EAAe,MAAM,MAAM,MAAM,EAAE,QAAQ,EAAI;AACxD,IAAC,KAAQ,EAAK,aAEd,KACF,EAAK,YAAY,GAAK,EAAM,EAG1B,MAAQ,EAAW,UAElB,EAAa,UAChB,EAAY,QAAQ,IAEtB,EAAK,oBAAoB,EAAI,EAC7B,EAAK,UAAU,EAAI;;EAMrB,SAAS,KAAQ;AACf,KAAK,QAAQ,MAAM,MAAM;;EAG3B,SAAS,GAAS,GAAa,GAAmB;AAEhD,GADA,EAAM,iBAAiB,EACvB,EAAK,QAAQ,GAAK,SAAS;;EAM7B,IAAM,IAAa,EAAwB,KAAK,EAC1C,IAAc,EAA4B,EAAE,CAAC;EAEnD,SAAS,IAAe;AACtB,OAAI,CAAC,EAAW,SAAS,EAAA,SAAS,OAAQ;GAC1C,IAAM,IAAW,EAAW,MAAM,cAA2B,uBAAuB;AAC/E,SAEc,EAAA,cAAc,UAAU,EAAA,cAAc,UAGvD,EAAY,QAAQ;IAClB,KAAK,GAAG,EAAS,UAAU;IAC3B,QAAQ,GAAG,EAAS,aAAa;IAClC,GAED,EAAY,QAAQ;IAClB,MAAM,GAAG,EAAS,WAAW;IAC7B,OAAO,GAAG,EAAS,YAAY;IAChC;;AASL,EALA,EAAM,GAAY,YAAY;AAE5B,GADA,MAAM,GAAU,EAChB,GAAc;IACd,EAEF,QAAgB;AACd,MAAc;IACd;EAKF,SAAS,GAAU,GAAsB;GACvC,IAAM,IAAa,EAAA,cAAc,UAAU,EAAA,cAAc,SACnD,IAAW,IAAa,CAAC,YAAY,GAAG,CAAC,aAAa,EACtD,IAAW,IAAa,CAAC,UAAU,GAAG,CAAC,YAAY;AAGzD,OAAI,EAAM,QAAQ,YAAY,EAAA,SAAS,iBAAiB;IACtD,IAAM,IAAO,EAAe,MAAM,MAAM,MAAM,EAAE,QAAQ,EAAW,MAAM;AACzE,IAAI,KAAQ,EAAK,aAAa,OAC5B,EAAM,gBAAgB,EACtB,EAAK,QAAQ,EAAW,OAAO,SAAS;AAE1C;;AAGF,OAAI;IAAC,GAAG;IAAU,GAAG;IAAU;IAAQ;IAAM,CAAC,SAAS,EAAM,IAAI,EAAE;AACjE,MAAM,gBAAgB;IACtB,IAAM,IAAe,EAAe,MAAM,QAAQ,MAAM,CAAC,EAAE,SAAS;AACpE,QAAI,EAAa,WAAW,EAAG;IAE/B,IAAM,IAAa,EAAa,WAAW,MAAM,EAAE,QAAQ,EAAW,MAAM,EAExE;AACJ,IAOE,IAPE,EAAS,SAAS,EAAM,IAAI,IACjB,IAAa,KAAK,EAAa,SACnC,EAAS,SAAS,EAAM,IAAI,IACxB,IAAa,IAAI,EAAa,UAAU,EAAa,SACzD,EAAM,QAAQ,SACX,IAEA,EAAa,SAAS;IAGpC,IAAM,IAAY,EAAa,GAAW;AAG1C,IAFA,EAAY,EAAU,EAEtB,QAAe;AACR,OAAW,SACC,EAAW,MAAM,cAA2B,kBAAkB,EAAU,IAAI,EACnF,OAAO;MACjB;;;EAON,IAAM,IAAe,EAAiB,IAAI,IAAI,CAAC,EAAW,MAAM,CAAC,CAAC;AAElE,IAAM,IAAa,MAAQ;AACzB,KAAa,MAAM,IAAI,EAAI;IAC3B;EAEF,SAAS,EAAmB,GAAyB;AAInD,UAHI,EAAK,kBAAwB,KAC7B,EAAK,cAAc,KAAA,IACnB,EAAA,kBAAwB,KACrB,EAAA,YAFkC,EAAK;;EAKhD,SAAS,GAAa,GAAyB;AAK7C,UAJI,EAAK,eACL,EAAmB,EAAK,GAAS,KACjB,EAAK,mBAAmB,EAAA,kBACpB,EAAK,QAAQ,EAAW,QACzC,EAAa,MAAM,IAAI,EAAK,IAAI;;EAMzC,IAAM,IAAgB,QAA0C;GAC9D,IAAM,IAAsC,EAAE;AAC9C,QAAK,IAAM,KAAQ,EAAe,MAC3B,GAAmB,EAAK,KAC7B,EAAS,EAAK,OAAO,EAAgB;IACnC,MAAM,aAAa,EAAK;IACxB,QAAQ;AACN,kBAAa;MACX,IAAM,IAAO,EAAa,MAAM,IAAI,EAAK,IAAI;AAI7C,aAHI,IACK,EAAK,eAAe,GAEtB;;;IAGZ,CAAC;AAEJ,UAAO;IACP;EAEF,SAAS,GAAe,GAAsB;AAE5C,UADa,EAAa,MAAM,IAAI,EAAI,EAC3B,eAAe,IAAI,EAAE;;EAGpC,SAAS,EAAa,GAAkC;AAEtD,UADa,EAAa,MAAM,IAAI,EAAI,EAC3B,eAAe;;EAM9B,IAAM,KAAc,QAAe;GACjC;GACA,WAAW,EAAA;GACX,WAAW,EAAA;GACX,WAAW,EAAA;GACX,EAAE,oBAAoB,EAAA,UAAU;GACjC,CAAC,EAEI,KAAoB,QACxB,EAAA,iBAAiB,KAAA,IAA2C,KAAA,IAA/B,EAAE,KAAK,GAAG,EAAA,aAAa,KAAK,CAC1D;yBAIC,EA6JM,OAAA,EA7JA,OAAK,EAAE,GAAA,MAAW,EAAA,EAAA;GAEtB,EA4FM,OA5FN,IA4FM;IA3FOA,EAAAA,OAAO,aAAA,GAAA,EAAlB,EAEM,OAFN,IAEM,CADJ,EAAyB,EAAA,QAAA,YAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAG3B,EAkEM,OAAA;cAjEA;KAAJ,KAAI;KACJ,OAAM;KACN,MAAK;KACJ,oBAA6B,EAAA,cAAS,UAAe,EAAA,cAAS,UAAA,aAAA;KAG9D,OAAK,EAAE,GAAA,MAAiB;gBAEzB,EAgDM,GAAA,MAAA,EA/CW,EAAA,QAAR,YADT,EAgDM,OAAA;KA9CH,KAAK,EAAK;KACV,gBAAc,EAAK;KACpB,OAAK,EAAA,CAAC,eAAa;6BAC0B,EAAK,QAAQ,EAAA;+BAAiD,EAAK;;KAIhH,MAAK;KACJ,iBAAe,EAAK,QAAQ,EAAA;KAC5B,iBAAe,EAAK,YAAY,KAAA;KAChC,iBAAe,EAAQ,EAAK,IAAG;KAC/B,IAAI,EAAM,EAAK,IAAG;KAClB,UAAU,EAAK,QAAQ,EAAA,QAAU,IAAA;KACjC,UAAK,MAAA,CAAG,EAAK,YAAY,EAAY,EAAK,KAAK,EAAM;KAC5C;QAEV,EAeO,QAfP,GAeO,CAbW,EAAA,QACd,EAEO,EAAA,QAAA,SAAA;;KAFmB;KAAO,QAAQ,EAAK,QAAQ,EAAA;aAE/C,CAAA,EAAA,EADF,EAAK,MAAK,EAAA,EAAA,CAAA,CAAA,IAAA,GAAA,EAIjB,EAMW,GAAA,EAAA,KAAA,GAAA,EAAA,CAJD,EAAa,EAAK,IAAG,IAAA,GAAA,EAD7B,EAGE,QADW,GAAC,QAAS,EAAa,EAAK,IAAG,CAAA,CAAA,EAAA,EAAA,KAAA,GAAA,CAAA,KAAA,GAAA,EAE5C,EAA4C,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,EAAA,EAAxB,EAAK,MAAK,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAI1B,EAAA,SAAI,mBAAwB,EAAK,aAAQ,MAAA,GAAA,EADjD,EAaO,QAAA;;KAXL,OAAM;KACN,eAAY;KACX,SAAK,IAAA,MAAO,GAAS,EAAK,KAAK,EAAM,EAAA,CAAA,OAAA,CAAA;QAEtC,EAMO,EAAA,QAAA,cAAA,EANwB,SAAI,QAM5B,CAAA,AAAA,EAAA,OALL,EAIM,OAAA;KAJD,SAAQ;KAAY,MAAK;KAAe,OAAM;QACjD,EAEE,QAAA,EADA,GAAE,mMAAiM,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,EAAA,GAAA,GAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,GAAA,WASrM,EAAA,SAAI,UAAA,GAAA,EADZ,EAKE,OAAA;;KAHA,OAAM;KACN,eAAY;KACX,OAAK,EAAE,EAAA,MAAW;;IAMf,EAAA,SAAI,mBAAA,CAAyB,EAAA,WAAA,GAAA,EADrC,EAaS,UAAA;;KAXP,OAAM;KACN,cAAW;KACV,SAAO;QAER,EAMO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,AAAA,EAAA,OALL,EAIM,OAAA;KAJD,SAAQ;KAAY,MAAK;KAAe,eAAY;KAAO,OAAM;QACpE,EAEE,QAAA,EADA,GAAE,yGAAuG,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAMtGA,EAAAA,OAAO,cAAA,GAAA,EAAlB,EAEM,OAFN,IAEM,CADJ,EAA0B,EAAA,QAAA,aAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;;GAKlB,EAAA,QAA0B,EAAA,IAAA,GAAA,GAA1B,GAAA,GAAA,EAAZ,EAEM,OAFN,IAEM,CADJ,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,GAAA,CAAA,CAAA,GADuB,GAAK,CAAA,CAAA;GAKtC,EAsDM,OAtDN,GAsDM,EAAA,EAAA,GAAA,EArDJ,EAoDW,GAAA,MAAA,EApDc,EAAA,QAAR,wBAA8B,EAAK,KAAA,EAAA,CAG1C,EAAmB,EAAI,GAAA,GAAA,GAAA,EAD/B,EA0BM,OAAA;;IAxBH,IAAI,EAAQ,EAAK,IAAG;IACrB,OAAK,EAAA,CAAC,iBAAe;8BAC0B,EAAK,QAAQ,EAAA;gCAAmD,EAAA;;IAI/G,MAAK;IACJ,mBAAiB,EAAM,EAAK,IAAG;IAC/B,UAAU,EAAK,QAAQ,EAAA,QAAU,IAAA;IACjC,eAAa,EAAK,QAAQ,EAAA;OAIT,EAAA,QAIH,EAAA,IAAA,GAAA,IAJG,GAAA,EAAlB,EAMY,GAAA,EAAA,KAAA,GAAA,EAAA,CAJF,EAAK,QAAQ,EAAA,SAAA,GAAA,EADrB,EAIE,EAFK,EAAA,MAAc,EAAK,eAAG,MAAA,EAAA,EAC1B,KAAK,EAAK,KAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,KAAA,GAIC,EAAA,QACd,EAAqB,EAAA,QAAA,WAAA;;IAAR;kCAZP,EAAK,QAAQ,EAAA,MAAU,CAAA,CAAA,GAkBpB,GAAa,EAAI,GAAA,GAAA,GAAA,EAD9B,EAoBM,OAAA;;IAjBH,IAAI,EAAQ,EAAK,IAAG;IACrB,OAAK,EAAA,CAAC,iBAAe;8BAC0B,EAAK,QAAQ,EAAA;gCAAmD,EAAA;;IAI/G,MAAK;IACJ,mBAAiB,EAAM,EAAK,IAAG;IAC/B,UAAU,EAAK,QAAQ,EAAA,QAAU,IAAA;IACjC,eAAa,EAAK,QAAQ,EAAA;OAGX,EAAA,QACd,EAAqB,EAAA,QAAA,WAAA;;IAAR;cAGf,EAAyD,QAA5B,GAAe,EAAK,IAAG,CAAA,EAAA,EAAA,KAAA,GAAA,CAAA,EAAA,EAAA,IAAA,EAAA,GAAA,CAAA,CAAA,GAjB5C,EAAK,QAAQ,EAAA,MAAU,CAAA,CAAA,GAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}