@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system204.js

@@ -1,8 +1,103 @@
-import e from "./design-system202.js";
-/* empty css                 */
-//#region src/components/BTag/BTag.vue
-var t = e;
+import { BSpinSize as e } from "./design-system3.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createStaticVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useSlots as b, watch as x, withCtx as S } from "vue";
+//#region src/components/BSpin/BSpin.vue?vue&type=script&setup=true&lang.ts
+var C = ["aria-label", "aria-describedby"], w = {
+	class: "b-spin__indicator",
+	"aria-hidden": "true"
+}, T = ["id"], E = ["aria-label", "aria-describedby"], D = {
+	class: "b-spin__indicator",
+	"aria-hidden": "true"
+}, O = ["id"], k = ["aria-label", "aria-describedby"], A = {
+	class: "b-spin__indicator",
+	"aria-hidden": "true"
+}, j = ["id"], M = ["aria-busy", "inert"], N = /* @__PURE__ */ f({
+	__name: "BSpin",
+	props: {
+		spinning: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: () => e.Default },
+		tip: { default: "" },
+		delay: { default: 0 },
+		fullscreen: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let f = b(), N = y(), P = h(!1), F;
+		function I(t) {
+			clearTimeout(F), t && e.delay > 0 ? F = setTimeout(() => {
+				P.value = !0;
+			}, e.delay) : P.value = t;
+		}
+		I(e.spinning), x(() => e.spinning, I);
+		let L = i(() => !!f.default), R = i(() => !!(e.tip || f.tip)), z = i(() => [
+			"b-spin",
+			`b-spin--${e.size}`,
+			{
+				"b-spin--spinning": P.value,
+				"b-spin--nested": L.value,
+				"b-spin--has-tip": R.value,
+				"b-spin--fullscreen": e.fullscreen
+			}
+		]);
+		return (i, f) => e.fullscreen ? (m(), a(n, {
+			key: 0,
+			to: "body"
+		}, [d(r, { name: "b-spin-fade" }, {
+			default: S(() => [P.value ? (m(), s("div", {
+				key: 0,
+				class: p(["b-spin b-spin--fullscreen", [`b-spin--${e.size}`, {
+					"b-spin--spinning": P.value,
+					"b-spin--has-tip": R.value
+				}]]),
+				role: "status",
+				"aria-label": R.value ? void 0 : "Loading",
+				"aria-describedby": R.value ? v(N) : void 0
+			}, [c("div", w, [g(i.$slots, "indicator", {}, () => [f[0] ||= c("span", { class: "b-spin__dot" }, [
+				c("i", { class: "b-spin__dot-item" }),
+				c("i", { class: "b-spin__dot-item" }),
+				c("i", { class: "b-spin__dot-item" }),
+				c("i", { class: "b-spin__dot-item" })
+			], -1)])]), R.value ? (m(), s("div", {
+				key: 0,
+				id: v(N),
+				class: "b-spin__tip"
+			}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, T)) : o("", !0)], 10, C)) : o("", !0)]),
+			_: 3
+		})])) : L.value ? (m(), s("div", {
+			key: 2,
+			class: p(z.value)
+		}, [P.value ? (m(), s("div", {
+			key: 0,
+			class: "b-spin__overlay-container",
+			role: "status",
+			"aria-label": R.value ? void 0 : "Loading",
+			"aria-describedby": R.value ? v(N) : void 0
+		}, [c("div", A, [g(i.$slots, "indicator", {}, () => [f[2] ||= l("<span class=\"b-spin__dot\"><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i></span>", 1)])]), R.value ? (m(), s("div", {
+			key: 0,
+			id: v(N),
+			class: "b-spin__tip"
+		}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, j)) : o("", !0)], 8, k)) : o("", !0), c("div", {
+			class: p(["b-spin__content", { "b-spin__content--blurred": P.value }]),
+			"aria-busy": P.value,
+			inert: P.value
+		}, [g(i.$slots, "default")], 10, M)], 2)) : (m(), s(t, { key: 1 }, [P.value ? (m(), s("div", {
+			key: 0,
+			class: p(z.value),
+			role: "status",
+			"aria-label": R.value ? void 0 : "Loading",
+			"aria-describedby": R.value ? v(N) : void 0
+		}, [c("div", D, [g(i.$slots, "indicator", {}, () => [f[1] ||= l("<span class=\"b-spin__dot\"><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i></span>", 1)])]), R.value ? (m(), s("div", {
+			key: 0,
+			id: v(N),
+			class: "b-spin__tip"
+		}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, O)) : o("", !0)], 10, E)) : o("", !0)], 64));
+	}
+});
 //#endregion
-export { t as default };
+export { N as default };
 
 //# sourceMappingURL=design-system204.js.map

package/dist/design-system204.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system204.js","names":[],"sources":["../src/components/BTag/BTag.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\n\nimport type { BTagColor, BTagPresetColor, BTagSize, BTagVariant } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  color,\n  variant = 'filled',\n  size = 'default',\n  closable = false,\n  closeIcon,\n  visible = undefined,\n  bordered = true,\n  icon,\n} = defineProps<{\n  /**\n   * Preset semantic color name or any CSS color value.\n   * Preset names map to a full color scale (bg, border, text).\n   * Any other string is treated as a raw CSS color and applied to the border.\n   * @example 'success' | 'processing' | 'error' | '#ff0000' | 'rgb(0,0,255)'\n   */\n  color?: BTagColor;\n  /**\n   * Visual style variant.\n   * @default 'filled'\n   */\n  variant?: BTagVariant;\n  /**\n   * Size of the tag.\n   * @default 'default'\n   */\n  size?: BTagSize;\n  /**\n   * Whether the tag can be closed/removed.\n   * @default false\n   */\n  closable?: boolean;\n  /**\n   * Custom icon shown as the close trigger (string emoji / unicode or slot).\n   * If omitted the default × SVG is used.\n   */\n  closeIcon?: string;\n  /**\n   * Controlled visibility - operate the tag in controlled mode via v-model.\n   * When undefined the component manages its own visibility.\n   */\n  visible?: boolean;\n  /**\n   * Whether the tag has a border.\n   * @default true\n   */\n  bordered?: boolean;\n  /**\n   * Leading icon string (emoji / unicode). For accessible icon rendering\n   * prefer the `#icon` slot which lets callers set `role=\"img\"` + `aria-label`.\n   */\n  icon?: string;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires synchronously when the close button is clicked/activated. */\n  (e: 'close', event: MouseEvent | KeyboardEvent): void;\n  /** Fires after the fade-out transition fully completes. */\n  (e: 'afterClose'): void;\n  /** v-model support - emitted with `false` when the tag is closed. */\n  (e: 'update:visible', value: boolean): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Default tag content. */\n  default?(): unknown;\n  /** Leading icon area - receives no scoped props. */\n  icon?(): unknown;\n  /** Overrides the built-in close icon. */\n  closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Preset colors\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: BTagPresetColor[] = [\n  'default',\n  'success',\n  'processing',\n  'error',\n  'warning',\n  'magenta',\n  'red',\n  'volcano',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'geekblue',\n  'purple',\n];\n\nconst isPreset = computed(() => color === undefined || (PRESET_COLORS as string[]).includes(color));\n\nconst effectiveColor = computed<BTagPresetColor>(() =>\n  isPreset.value ? ((color ?? 'default') as BTagPresetColor) : 'default',\n);\n\n// ─────────────────────────────────────────────\n// Visibility state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => visible !== undefined);\nconst internalVisible = ref(true);\n\n// Sync external → internal when switching to controlled\nwatch(\n  () => visible,\n  (val) => {\n    if (val !== undefined) internalVisible.value = val;\n  },\n);\n\nconst isVisible = computed(() => (isControlled.value ? visible! : internalVisible.value));\n\n// ─────────────────────────────────────────────\n// Close logic\n// ─────────────────────────────────────────────\nfunction handleClose(event: MouseEvent | KeyboardEvent) {\n  emit('close', event);\n  if (isControlled.value) {\n    emit('update:visible', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onCloseClick(event: MouseEvent) {\n  handleClose(event);\n}\n\nfunction onCloseKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ' || event.key === 'Escape') {\n    event.preventDefault();\n    handleClose(event);\n  }\n}\n\nfunction onAfterLeave() {\n  emit('afterClose');\n}\n\n// ─────────────────────────────────────────────\n// Root class\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-tag',\n  `b-tag--${effectiveColor.value}`,\n  `b-tag--${variant}`,\n  {\n    'b-tag--borderless': !bordered,\n    'b-tag--closable': closable,\n    'b-tag--small': size === 'small',\n    'b-tag--large': size === 'large',\n    'b-tag--custom-color': !isPreset.value,\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Custom color inline style\n// ─────────────────────────────────────────────\nconst customColorStyle = computed(() => {\n  if (isPreset.value) return undefined;\n  // For custom colors: use the color as border + text; tint bg at 10% opacity\n  return {\n    '--b-tag-custom-color': color,\n  } as Record<string, string>;\n});\n</script>\n\n<template>\n  <Transition name=\"b-tag-fade\" @after-leave=\"onAfterLeave\">\n    <span v-if=\"isVisible\" :class=\"rootClasses\" :style=\"customColorStyle\">\n      <!-- Leading icon -->\n      <span\n        v-if=\"$slots.icon || icon\"\n        class=\"b-tag__icon\"\n        :aria-hidden=\"$slots.icon ? undefined : 'true'\"\n      >\n        <slot name=\"icon\">{{ icon }}</slot>\n      </span>\n\n      <!-- Content -->\n      <span class=\"b-tag__content\">\n        <slot />\n      </span>\n\n      <!-- Close button -->\n      <button\n        v-if=\"closable\"\n        type=\"button\"\n        class=\"b-tag__close\"\n        aria-label=\"Remove tag\"\n        tabindex=\"0\"\n        @click.stop=\"onCloseClick\"\n        @keydown=\"onCloseKeydown\"\n      >\n        <slot name=\"closeIcon\">\n          <span\n            v-if=\"closeIcon\"\n            class=\"b-tag__close-label\"\n            aria-hidden=\"true\"\n            :data-icon=\"closeIcon\"\n          />\n          <svg\n            v-else\n            class=\"b-tag__close-icon\"\n            viewBox=\"0 0 12 12\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M9.5 3.205 8.795 2.5 6 5.295 3.205 2.5 2.5 3.205 5.295 6 2.5 8.795 3.205 9.5 6 6.705 8.795 9.5 9.5 8.795 6.705 6z\"\n            />\n          </svg>\n        </slot>\n      </button>\n    </span>\n  </Transition>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTag - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-tag {\n  /* Layout */\n  --b-tag-height: 22px;\n  --b-tag-padding: 0 7px;\n  --b-tag-border-radius: 4px;\n  --b-tag-font-size: 12px;\n  --b-tag-line-height: 20px;\n  --b-tag-gap: 4px;\n\n  /* Close button */\n  --b-tag-close-size: 12px;\n  --b-tag-close-offset: 3px;\n  --b-tag-close-opacity: 0.45;\n  --b-tag-close-hover-opacity: 1;\n\n  /* Animation */\n  --b-tag-transition-duration: 200ms;\n\n  /* Custom color (set via inline style for non-preset colors) */\n  --b-tag-custom-color: initial;\n\n  /* ── Default color scheme ── */\n  --b-tag-bg: oklch(96% 0.003 260);\n  --b-tag-border-color: oklch(87% 0.007 260);\n  --b-tag-color: oklch(32% 0.02 260);\n\n  /* ── Layout ── */\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-tag-gap);\n  height: var(--b-tag-height);\n  padding: var(--b-tag-padding);\n  border-radius: var(--b-tag-border-radius);\n  border: 1px solid var(--b-tag-border-color);\n  background: var(--b-tag-bg);\n  color: var(--b-tag-color);\n  font-size: var(--b-tag-font-size);\n  line-height: var(--b-tag-line-height);\n  white-space: nowrap;\n  box-sizing: border-box;\n  vertical-align: middle;\n  cursor: default;\n  user-select: none;\n}\n\n/* ── Size variants ── */\n.b-tag--small {\n  --b-tag-height: 18px;\n  --b-tag-padding: 0 5px;\n  --b-tag-font-size: 11px;\n  --b-tag-line-height: 16px;\n  --b-tag-close-size: 10px;\n}\n\n.b-tag--large {\n  --b-tag-height: 28px;\n  --b-tag-padding: 0 10px;\n  --b-tag-font-size: 14px;\n  --b-tag-line-height: 26px;\n  --b-tag-close-size: 14px;\n}\n\n/* ── Borderless ── */\n.b-tag--borderless {\n  border-color: transparent;\n}\n\n/* ── Outlined variant ── */\n.b-tag--outlined {\n  background: transparent;\n}\n\n/* ── Icon ── */\n.b-tag__icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  font-size: var(--b-tag-font-size);\n}\n\n/* ── Content ── */\n.b-tag__content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: var(--b-tag-line-height);\n}\n\n/* ── Close button ── */\n.b-tag__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0;\n  margin-left: var(--b-tag-close-offset);\n  border: none;\n  border-radius: 2px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  opacity: var(--b-tag-close-opacity);\n  line-height: 1;\n  font-size: var(--b-tag-close-size);\n  width: var(--b-tag-close-size);\n  height: var(--b-tag-close-size);\n  transition: opacity var(--b-tag-transition-duration) ease;\n}\n\n.b-tag__close:hover {\n  opacity: var(--b-tag-close-hover-opacity);\n}\n\n.b-tag__close:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  opacity: var(--b-tag-close-hover-opacity);\n}\n\n.b-tag__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n.b-tag__close-label::before {\n  content: attr(data-icon);\n}\n\n/* ─────────────────────────────────────────────\n   Preset color schemes\n   ───────────────────────────────────────────── */\n\n/* ── success ── */\n.b-tag--success {\n  --b-tag-bg: oklch(95% 0.05 145);\n  --b-tag-border-color: oklch(78% 0.14 148);\n  --b-tag-color: oklch(40% 0.14 148);\n}\n\n/* ── processing (blue pulse-ready) ── */\n.b-tag--processing {\n  --b-tag-bg: oklch(94% 0.05 260);\n  --b-tag-border-color: oklch(72% 0.17 262);\n  --b-tag-color: oklch(45% 0.18 262);\n}\n\n/* ── error ── */\n.b-tag--error {\n  --b-tag-bg: oklch(96% 0.04 20);\n  --b-tag-border-color: oklch(78% 0.15 22);\n  --b-tag-color: oklch(40% 0.17 22);\n}\n\n/* ── warning ── */\n.b-tag--warning {\n  --b-tag-bg: oklch(97% 0.06 75);\n  --b-tag-border-color: oklch(82% 0.17 58);\n  --b-tag-color: oklch(42% 0.14 55);\n}\n\n/* ── magenta ── */\n.b-tag--magenta {\n  --b-tag-bg: oklch(95% 0.04 345);\n  --b-tag-border-color: oklch(76% 0.18 350);\n  --b-tag-color: oklch(42% 0.2 348);\n}\n\n/* ── red ── */\n.b-tag--red {\n  --b-tag-bg: oklch(96% 0.035 15);\n  --b-tag-border-color: oklch(74% 0.19 18);\n  --b-tag-color: oklch(40% 0.2 18);\n}\n\n/* ── volcano ── */\n.b-tag--volcano {\n  --b-tag-bg: oklch(96% 0.04 38);\n  --b-tag-border-color: oklch(76% 0.17 38);\n  --b-tag-color: oklch(42% 0.18 38);\n}\n\n/* ── orange ── */\n.b-tag--orange {\n  --b-tag-bg: oklch(97% 0.055 65);\n  --b-tag-border-color: oklch(80% 0.18 62);\n  --b-tag-color: oklch(44% 0.16 60);\n}\n\n/* ── gold ── */\n.b-tag--gold {\n  --b-tag-bg: oklch(97% 0.06 80);\n  --b-tag-border-color: oklch(82% 0.18 78);\n  --b-tag-color: oklch(45% 0.14 78);\n}\n\n/* ── lime ── */\n.b-tag--lime {\n  --b-tag-bg: oklch(96% 0.07 128);\n  --b-tag-border-color: oklch(80% 0.18 128);\n  --b-tag-color: oklch(42% 0.15 128);\n}\n\n/* ── green ── */\n.b-tag--green {\n  --b-tag-bg: oklch(95% 0.05 145);\n  --b-tag-border-color: oklch(76% 0.16 147);\n  --b-tag-color: oklch(38% 0.14 147);\n}\n\n/* ── cyan ── */\n.b-tag--cyan {\n  --b-tag-bg: oklch(95% 0.05 200);\n  --b-tag-border-color: oklch(76% 0.14 200);\n  --b-tag-color: oklch(40% 0.12 200);\n}\n\n/* ── blue ── */\n.b-tag--blue {\n  --b-tag-bg: oklch(94% 0.05 255);\n  --b-tag-border-color: oklch(72% 0.17 258);\n  --b-tag-color: oklch(42% 0.18 258);\n}\n\n/* ── geekblue ── */\n.b-tag--geekblue {\n  --b-tag-bg: oklch(94% 0.04 270);\n  --b-tag-border-color: oklch(68% 0.2 272);\n  --b-tag-color: oklch(38% 0.22 272);\n}\n\n/* ── purple ── */\n.b-tag--purple {\n  --b-tag-bg: oklch(95% 0.04 300);\n  --b-tag-border-color: oklch(72% 0.18 300);\n  --b-tag-color: oklch(40% 0.2 300);\n}\n\n/* ─────────────────────────────────────────────\n   Custom (non-preset) color\n   ───────────────────────────────────────────── */\n.b-tag--custom-color {\n  /* 8% tint keeps the background very light; 55% blend with black produces\n     text dark enough to clear WCAG AA 4.5:1 against that near-white bg. */\n  --b-tag-bg: color-mix(in oklch, var(--b-tag-custom-color) 8%, white);\n  --b-tag-border-color: color-mix(in oklch, var(--b-tag-custom-color) 50%, white);\n  --b-tag-color: color-mix(in oklch, var(--b-tag-custom-color) 55%, black);\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-tag {\n  --b-tag-bg: oklch(26% 0.008 260);\n  --b-tag-border-color: oklch(36% 0.012 260);\n  --b-tag-color: oklch(82% 0.01 260);\n}\n\n[data-prefers-color='dark'] .b-tag--success {\n  --b-tag-bg: oklch(20% 0.06 148);\n  --b-tag-border-color: oklch(38% 0.12 148);\n  --b-tag-color: oklch(78% 0.12 148);\n}\n\n[data-prefers-color='dark'] .b-tag--processing {\n  --b-tag-bg: oklch(20% 0.06 260);\n  --b-tag-border-color: oklch(40% 0.14 262);\n  --b-tag-color: oklch(76% 0.15 262);\n}\n\n[data-prefers-color='dark'] .b-tag--error {\n  --b-tag-bg: oklch(20% 0.05 20);\n  --b-tag-border-color: oklch(38% 0.14 22);\n  --b-tag-color: oklch(78% 0.14 22);\n}\n\n[data-prefers-color='dark'] .b-tag--warning {\n  --b-tag-bg: oklch(20% 0.06 58);\n  --b-tag-border-color: oklch(40% 0.15 58);\n  --b-tag-color: oklch(80% 0.14 58);\n}\n\n[data-prefers-color='dark'] .b-tag--magenta {\n  --b-tag-bg: oklch(20% 0.05 348);\n  --b-tag-border-color: oklch(38% 0.16 350);\n  --b-tag-color: oklch(76% 0.16 348);\n}\n\n[data-prefers-color='dark'] .b-tag--red {\n  --b-tag-bg: oklch(20% 0.05 18);\n  --b-tag-border-color: oklch(38% 0.17 18);\n  --b-tag-color: oklch(76% 0.17 18);\n}\n\n[data-prefers-color='dark'] .b-tag--volcano {\n  --b-tag-bg: oklch(20% 0.05 38);\n  --b-tag-border-color: oklch(38% 0.15 38);\n  --b-tag-color: oklch(76% 0.15 38);\n}\n\n[data-prefers-color='dark'] .b-tag--orange {\n  --b-tag-bg: oklch(20% 0.06 62);\n  --b-tag-border-color: oklch(40% 0.16 62);\n  --b-tag-color: oklch(80% 0.16 62);\n}\n\n[data-prefers-color='dark'] .b-tag--gold {\n  --b-tag-bg: oklch(20% 0.06 78);\n  --b-tag-border-color: oklch(40% 0.16 78);\n  --b-tag-color: oklch(80% 0.14 78);\n}\n\n[data-prefers-color='dark'] .b-tag--lime {\n  --b-tag-bg: oklch(20% 0.07 128);\n  --b-tag-border-color: oklch(40% 0.16 128);\n  --b-tag-color: oklch(80% 0.14 128);\n}\n\n[data-prefers-color='dark'] .b-tag--green {\n  --b-tag-bg: oklch(20% 0.06 147);\n  --b-tag-border-color: oklch(38% 0.14 147);\n  --b-tag-color: oklch(76% 0.13 147);\n}\n\n[data-prefers-color='dark'] .b-tag--cyan {\n  --b-tag-bg: oklch(20% 0.05 200);\n  --b-tag-border-color: oklch(38% 0.12 200);\n  --b-tag-color: oklch(76% 0.11 200);\n}\n\n[data-prefers-color='dark'] .b-tag--blue {\n  --b-tag-bg: oklch(20% 0.06 258);\n  --b-tag-border-color: oklch(38% 0.15 258);\n  --b-tag-color: oklch(74% 0.15 258);\n}\n\n[data-prefers-color='dark'] .b-tag--geekblue {\n  --b-tag-bg: oklch(20% 0.05 272);\n  --b-tag-border-color: oklch(36% 0.18 272);\n  --b-tag-color: oklch(72% 0.18 272);\n}\n\n[data-prefers-color='dark'] .b-tag--purple {\n  --b-tag-bg: oklch(20% 0.05 300);\n  --b-tag-border-color: oklch(36% 0.16 300);\n  --b-tag-color: oklch(74% 0.16 300);\n}\n\n[data-prefers-color='dark'] .b-tag--custom-color {\n  --b-tag-bg: color-mix(in oklch, var(--b-tag-custom-color) 15%, oklch(15% 0 0));\n  --b-tag-border-color: color-mix(in oklch, var(--b-tag-custom-color) 50%, oklch(15% 0 0));\n  --b-tag-color: color-mix(in oklch, var(--b-tag-custom-color) 85%, white);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tag {\n    --b-tag-bg: oklch(26% 0.008 260);\n    --b-tag-border-color: oklch(36% 0.012 260);\n    --b-tag-color: oklch(82% 0.01 260);\n  }\n  [data-prefers-color='system'] .b-tag--success {\n    --b-tag-bg: oklch(20% 0.06 148);\n    --b-tag-border-color: oklch(38% 0.12 148);\n    --b-tag-color: oklch(78% 0.12 148);\n  }\n  [data-prefers-color='system'] .b-tag--processing {\n    --b-tag-bg: oklch(20% 0.06 260);\n    --b-tag-border-color: oklch(40% 0.14 262);\n    --b-tag-color: oklch(76% 0.15 262);\n  }\n  [data-prefers-color='system'] .b-tag--error {\n    --b-tag-bg: oklch(20% 0.05 20);\n    --b-tag-border-color: oklch(38% 0.14 22);\n    --b-tag-color: oklch(78% 0.14 22);\n  }\n  [data-prefers-color='system'] .b-tag--warning {\n    --b-tag-bg: oklch(20% 0.06 58);\n    --b-tag-border-color: oklch(40% 0.15 58);\n    --b-tag-color: oklch(80% 0.14 58);\n  }\n  [data-prefers-color='system'] .b-tag--magenta {\n    --b-tag-bg: oklch(20% 0.05 348);\n    --b-tag-border-color: oklch(38% 0.16 350);\n    --b-tag-color: oklch(76% 0.16 348);\n  }\n  [data-prefers-color='system'] .b-tag--red {\n    --b-tag-bg: oklch(20% 0.05 18);\n    --b-tag-border-color: oklch(38% 0.17 18);\n    --b-tag-color: oklch(76% 0.17 18);\n  }\n  [data-prefers-color='system'] .b-tag--volcano {\n    --b-tag-bg: oklch(20% 0.05 38);\n    --b-tag-border-color: oklch(38% 0.15 38);\n    --b-tag-color: oklch(76% 0.15 38);\n  }\n  [data-prefers-color='system'] .b-tag--orange {\n    --b-tag-bg: oklch(20% 0.06 62);\n    --b-tag-border-color: oklch(40% 0.16 62);\n    --b-tag-color: oklch(80% 0.16 62);\n  }\n  [data-prefers-color='system'] .b-tag--gold {\n    --b-tag-bg: oklch(20% 0.06 78);\n    --b-tag-border-color: oklch(40% 0.16 78);\n    --b-tag-color: oklch(80% 0.14 78);\n  }\n  [data-prefers-color='system'] .b-tag--lime {\n    --b-tag-bg: oklch(20% 0.07 128);\n    --b-tag-border-color: oklch(40% 0.16 128);\n    --b-tag-color: oklch(80% 0.14 128);\n  }\n  [data-prefers-color='system'] .b-tag--green {\n    --b-tag-bg: oklch(20% 0.06 147);\n    --b-tag-border-color: oklch(38% 0.14 147);\n    --b-tag-color: oklch(76% 0.13 147);\n  }\n  [data-prefers-color='system'] .b-tag--cyan {\n    --b-tag-bg: oklch(20% 0.05 200);\n    --b-tag-border-color: oklch(38% 0.12 200);\n    --b-tag-color: oklch(76% 0.11 200);\n  }\n  [data-prefers-color='system'] .b-tag--blue {\n    --b-tag-bg: oklch(20% 0.06 258);\n    --b-tag-border-color: oklch(38% 0.15 258);\n    --b-tag-color: oklch(74% 0.15 258);\n  }\n  [data-prefers-color='system'] .b-tag--geekblue {\n    --b-tag-bg: oklch(20% 0.05 272);\n    --b-tag-border-color: oklch(36% 0.18 272);\n    --b-tag-color: oklch(72% 0.18 272);\n  }\n  [data-prefers-color='system'] .b-tag--purple {\n    --b-tag-bg: oklch(20% 0.05 300);\n    --b-tag-border-color: oklch(36% 0.16 300);\n    --b-tag-color: oklch(74% 0.16 300);\n  }\n  [data-prefers-color='system'] .b-tag--custom-color {\n    --b-tag-bg: color-mix(in oklch, var(--b-tag-custom-color) 15%, oklch(15% 0 0));\n    --b-tag-border-color: color-mix(in oklch, var(--b-tag-custom-color) 50%, oklch(15% 0 0));\n    --b-tag-color: color-mix(in oklch, var(--b-tag-custom-color) 85%, white);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Transition (fade)\n   ───────────────────────────────────────────── */\n.b-tag-fade-enter-active,\n.b-tag-fade-leave-active {\n  transition:\n    opacity var(--b-tag-transition-duration) ease,\n    transform var(--b-tag-transition-duration) ease;\n}\n\n.b-tag-fade-enter-from,\n.b-tag-fade-leave-to {\n  opacity: 0;\n  transform: scale(0.85);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tag {\n    --b-tag-transition-duration: 0ms;\n  }\n\n  .b-tag-fade-enter-active,\n  .b-tag-fade-leave-active {\n    transition: opacity var(--b-tag-transition-duration) ease;\n    transform: none !important;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system204.js","names":[],"sources":["../src/components/BSpin/BSpin.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  spinning = true,\n  size = BSpinSize.Default,\n  tip = '',\n  delay = 0,\n  fullscreen = false,\n} = defineProps<{\n  /**\n   * Whether the Spin indicator is active.\n   * @default true\n   */\n  spinning?: boolean;\n  /**\n   * Size of the spinner - small, default, or large.\n   * @default 'default'\n   */\n  size?: `${BSpinSize}`;\n  /**\n   * Descriptive text displayed below the spinning indicator.\n   */\n  tip?: string;\n  /**\n   * Delay in milliseconds before the spinner shows after `spinning` becomes true.\n   * Prevents flicker for fast operations. Does not apply to hiding.\n   * @default 0\n   */\n  delay?: number;\n  /**\n   * Display as fullscreen overlay (fixed, covers the entire viewport).\n   * @default false\n   */\n  fullscreen?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Content to wrap with a spinning overlay. */\n  default?(): unknown;\n  /** Custom spinner indicator (replaces the default dots). */\n  indicator?(): unknown;\n  /** Custom tip content (replaces the `tip` prop text). */\n  tip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(spinning);\n\nwatch(() => spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': fullscreen,\n  },\n]);\n</script>\n\n<template>\n  <!-- Fullscreen mode: uses Teleport to <body> -->\n  <Teleport v-if=\"fullscreen\" to=\"body\">\n    <Transition name=\"b-spin-fade\">\n      <div\n        v-if=\"shouldShow\"\n        class=\"b-spin b-spin--fullscreen\"\n        :class=\"[`b-spin--${size}`, { 'b-spin--spinning': shouldShow, 'b-spin--has-tip': hasTip }]\"\n        role=\"status\"\n        :aria-label=\"hasTip ? undefined : 'Loading'\"\n        :aria-describedby=\"hasTip ? tipId : undefined\"\n      >\n        <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\">\n            <span class=\"b-spin__dot\">\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n            </span>\n          </slot>\n        </div>\n        <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n          <slot name=\"tip\">{{ tip }}</slot>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n\n  <!-- Standalone (no children) -->\n  <template v-else-if=\"!isNested\">\n    <div\n      v-if=\"shouldShow\"\n      :class=\"rootClasses\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n  </template>\n\n  <!-- Nested (wraps children) -->\n  <div v-else :class=\"rootClasses\">\n    <div\n      v-if=\"shouldShow\"\n      class=\"b-spin__overlay-container\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n    <div\n      class=\"b-spin__content\"\n      :class=\"{ 'b-spin__content--blurred': shouldShow }\"\n      :aria-busy=\"shouldShow\"\n      :inert=\"shouldShow\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-spin {\n  /* Dot sizes per variant */\n  --b-spin-dot-size-small: 14px;\n  --b-spin-dot-size-default: 20px;\n  --b-spin-dot-size-large: 32px;\n\n  /* Dot colour */\n  --b-spin-dot-color: oklch(50% 0.169 237.323); /* primary – darkened for AA contrast */\n\n  /* Tip text */\n  --b-spin-tip-color: oklch(50% 0.169 237.323);\n  --b-spin-tip-font-size: 0.875rem;\n\n  /* Overlay */\n  --b-spin-overlay-bg: oklch(100% 0 0 / 0.6);\n  --b-spin-content-blur: 0.5px;\n\n  /* Fullscreen */\n  --b-spin-fullscreen-bg: oklch(100% 0 0 / 0.75);\n\n  /* Animation */\n  --b-spin-animation-duration: 1.2s;\n  --b-spin-transition-duration: 300ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-spin {\n  --b-spin-dot-color: oklch(72% 0.14 237);\n  --b-spin-tip-color: oklch(72% 0.14 237);\n  --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n  --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-spin {\n    --b-spin-dot-color: oklch(72% 0.14 237);\n    --b-spin-tip-color: oklch(72% 0.14 237);\n    --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n    --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-spin {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n/* Nested wrapper needs relative positioning for overlay */\n.b-spin--nested {\n  position: relative;\n  display: block;\n}\n\n/* ── Overlay container (nested mode) ── */\n.b-spin__overlay-container {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-overlay-bg);\n  border-radius: inherit;\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n/* ── Content (nested) ── */\n.b-spin__content {\n  transition:\n    opacity var(--b-spin-transition-duration) ease,\n    filter var(--b-spin-transition-duration) ease;\n}\n\n.b-spin__content--blurred {\n  opacity: 0.5;\n  filter: blur(var(--b-spin-content-blur));\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ── Fullscreen ── */\n.b-spin--fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 1070;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-fullscreen-bg);\n}\n\n/* ── Dot indicator ── */\n.b-spin__indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.b-spin__dot {\n  position: relative;\n  display: inline-block;\n  font-size: var(--b-spin-dot-size-default);\n  width: 1em;\n  height: 1em;\n  animation: b-spin-rotate var(--b-spin-animation-duration) linear infinite;\n}\n\n.b-spin--small .b-spin__dot {\n  font-size: var(--b-spin-dot-size-small);\n}\n\n.b-spin--large .b-spin__dot {\n  font-size: var(--b-spin-dot-size-large);\n}\n\n.b-spin__dot-item {\n  position: absolute;\n  display: block;\n  width: calc(1em * 0.45);\n  height: calc(1em * 0.45);\n  background-color: var(--b-spin-dot-color);\n  border-radius: 50%;\n  opacity: 0.3;\n  animation: b-spin-bounce var(--b-spin-animation-duration) ease-in-out infinite;\n  transform: scale(0.75);\n}\n\n.b-spin__dot-item:nth-child(1) {\n  top: 0;\n  left: 0;\n}\n\n.b-spin__dot-item:nth-child(2) {\n  top: 0;\n  right: 0;\n  animation-delay: 0.4s;\n}\n\n.b-spin__dot-item:nth-child(3) {\n  right: 0;\n  bottom: 0;\n  animation-delay: 0.8s;\n}\n\n.b-spin__dot-item:nth-child(4) {\n  bottom: 0;\n  left: 0;\n  animation-delay: 1.2s;\n}\n\n/* ── Tip ── */\n.b-spin__tip {\n  color: var(--b-spin-tip-color);\n  font-size: var(--b-spin-tip-font-size);\n  text-align: center;\n}\n\n/* ─────────────────────────────────────────────\n   Keyframes\n   ───────────────────────────────────────────── */\n@keyframes b-spin-rotate {\n  to {\n    transform: rotate(405deg);\n  }\n}\n\n@keyframes b-spin-bounce {\n  0%,\n  100% {\n    opacity: 0.3;\n    transform: scale(0.75);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Fade transition (fullscreen)\n   ───────────────────────────────────────────── */\n.b-spin-fade-enter-active,\n.b-spin-fade-leave-active {\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n.b-spin-fade-enter-from,\n.b-spin-fade-leave-to {\n  opacity: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-spin__dot {\n    animation: none;\n  }\n\n  .b-spin__dot-item {\n    animation: none;\n    opacity: 0.8;\n    transform: scale(1);\n  }\n\n  .b-spin-fade-enter-active,\n  .b-spin-fade-leave-active {\n    transition: none;\n  }\n\n  .b-spin__content {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,IAAM,IAAQ,GAOV,EAKE,IAAQ,GAAO,EAGf,IAAa,EAAI,GAAM,EACzB;EAEJ,SAAS,EAAc,GAAgB;AAErC,GADA,aAAa,EAAW,EACpB,KAAS,EAAA,QAAQ,IACnB,IAAa,iBAAiB;AAC5B,MAAW,QAAQ;MAClB,EAAA,MAAM,GAET,EAAW,QAAQ;;AAOvB,EAFA,EAAc,EAAA,SAAS,EAEvB,QAAY,EAAA,UAAU,EAAc;EAKpC,IAAM,IAAW,QAAe,EAAQ,EAAM,QAAS,EACjD,IAAS,QAAe,GAAQ,EAAA,OAAO,EAAM,KAAK,EAElD,IAAc,QAAe;GACjC;GACA,WAAW,EAAA;GACX;IACE,oBAAoB,EAAW;IAC/B,kBAAkB,EAAS;IAC3B,mBAAmB,EAAO;IAC1B,sBAAsB,EAAA;IACvB;GACF,CAAC;mBAKgB,EAAA,cAAA,GAAA,EAAhB,EAyBW,GAAA;;GAzBiB,IAAG;MAC7B,EAuBa,GAAA,EAvBD,MAAK,eAAa,EAAA;oBAsBtB,CApBE,EAAA,SAAA,GAAA,EADR,EAqBM,OAAA;;IAnBJ,OAAK,EAAA,CAAC,6BAA2B,CAAA,WACb,EAAA,QAAI;KAAA,oBAA0B,EAAA;KAAU,mBAAqB,EAAA;KAAM,CAAA,CAAA,CAAA;IACvF,MAAK;IACJ,cAAY,EAAA,QAAS,KAAA,IAAS;IAC9B,oBAAkB,EAAA,QAAS,EAAA,EAAK,GAAG,KAAA;OAEpC,EASM,OATN,GASM,CARJ,EAOO,EAAA,QAAA,aAAA,EAAA,QAAA,CAAA,AAAA,EAAA,OANL,EAKO,QAAA,EALD,OAAM,eAAa,EAAA;IACvB,EAA8B,KAAA,EAA3B,OAAM,oBAAkB,CAAA;IAC3B,EAA8B,KAAA,EAA3B,OAAM,oBAAkB,CAAA;IAC3B,EAA8B,KAAA,EAA3B,OAAM,oBAAkB,CAAA;IAC3B,EAA8B,KAAA,EAA3B,OAAM,oBAAkB,CAAA;eAItB,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;IAFc,IAAI,EAAA,EAAK;IAAE,OAAM;OACnC,EAAiC,EAAA,QAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAb,EAAA,IAAG,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;UAOT,EAAA,SAmBO,GAAA,EAM7B,EA8BM,OAAA;;GA9BO,OAAK,EAAE,EAAA,MAAW;MAErB,EAAA,SAAA,GAAA,EADR,EAoBM,OAAA;;GAlBJ,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,QAAS,KAAA,IAAS;GAC9B,oBAAkB,EAAA,QAAS,EAAA,EAAK,GAAG,KAAA;MAEpC,EASM,OATN,GASM,CARJ,EAOO,EAAA,QAAA,aAAA,EAAA,QAAA,CAAA,AAAA,EAAA,OAAA,EAAA,+KAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAEE,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;GAFc,IAAI,EAAA,EAAK;GAAE,OAAM;MACnC,EAAiC,EAAA,QAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAb,EAAA,IAAG,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAG3B,EAOM,OAAA;GANJ,OAAK,EAAA,CAAC,mBAAiB,EAAA,4BACe,EAAA,OAAU,CAAA,CAAA;GAC/C,aAAW,EAAA;GACX,OAAO,EAAA;MAER,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,EAAA,KArDU,GAAA,EAAtB,EAsBW,GAAA,EAAA,KAAA,GAAA,EAAA,CApBD,EAAA,SAAA,GAAA,EADR,EAoBM,OAAA;;GAlBH,OAAK,EAAE,EAAA,MAAW;GACnB,MAAK;GACJ,cAAY,EAAA,QAAS,KAAA,IAAS;GAC9B,oBAAkB,EAAA,QAAS,EAAA,EAAK,GAAG,KAAA;MAEpC,EASM,OATN,GASM,CARJ,EAOO,EAAA,QAAA,aAAA,EAAA,QAAA,CAAA,AAAA,EAAA,OAAA,EAAA,+KAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAEE,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;GAFc,IAAI,EAAA,EAAK;GAAE,OAAM;MACnC,EAAiC,EAAA,QAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAb,EAAA,IAAG,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}

package/dist/design-system206.js

@@ -0,0 +1,8 @@
+import e from "./design-system204.js";
+/* empty css                 */
+//#region src/components/BSpin/BSpin.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=design-system206.js.map

package/dist/design-system206.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system206.js","names":[],"sources":["../src/components/BSpin/BSpin.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  spinning = true,\n  size = BSpinSize.Default,\n  tip = '',\n  delay = 0,\n  fullscreen = false,\n} = defineProps<{\n  /**\n   * Whether the Spin indicator is active.\n   * @default true\n   */\n  spinning?: boolean;\n  /**\n   * Size of the spinner - small, default, or large.\n   * @default 'default'\n   */\n  size?: `${BSpinSize}`;\n  /**\n   * Descriptive text displayed below the spinning indicator.\n   */\n  tip?: string;\n  /**\n   * Delay in milliseconds before the spinner shows after `spinning` becomes true.\n   * Prevents flicker for fast operations. Does not apply to hiding.\n   * @default 0\n   */\n  delay?: number;\n  /**\n   * Display as fullscreen overlay (fixed, covers the entire viewport).\n   * @default false\n   */\n  fullscreen?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Content to wrap with a spinning overlay. */\n  default?(): unknown;\n  /** Custom spinner indicator (replaces the default dots). */\n  indicator?(): unknown;\n  /** Custom tip content (replaces the `tip` prop text). */\n  tip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(spinning);\n\nwatch(() => spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': fullscreen,\n  },\n]);\n</script>\n\n<template>\n  <!-- Fullscreen mode: uses Teleport to <body> -->\n  <Teleport v-if=\"fullscreen\" to=\"body\">\n    <Transition name=\"b-spin-fade\">\n      <div\n        v-if=\"shouldShow\"\n        class=\"b-spin b-spin--fullscreen\"\n        :class=\"[`b-spin--${size}`, { 'b-spin--spinning': shouldShow, 'b-spin--has-tip': hasTip }]\"\n        role=\"status\"\n        :aria-label=\"hasTip ? undefined : 'Loading'\"\n        :aria-describedby=\"hasTip ? tipId : undefined\"\n      >\n        <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\">\n            <span class=\"b-spin__dot\">\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n            </span>\n          </slot>\n        </div>\n        <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n          <slot name=\"tip\">{{ tip }}</slot>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n\n  <!-- Standalone (no children) -->\n  <template v-else-if=\"!isNested\">\n    <div\n      v-if=\"shouldShow\"\n      :class=\"rootClasses\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n  </template>\n\n  <!-- Nested (wraps children) -->\n  <div v-else :class=\"rootClasses\">\n    <div\n      v-if=\"shouldShow\"\n      class=\"b-spin__overlay-container\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n    <div\n      class=\"b-spin__content\"\n      :class=\"{ 'b-spin__content--blurred': shouldShow }\"\n      :aria-busy=\"shouldShow\"\n      :inert=\"shouldShow\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-spin {\n  /* Dot sizes per variant */\n  --b-spin-dot-size-small: 14px;\n  --b-spin-dot-size-default: 20px;\n  --b-spin-dot-size-large: 32px;\n\n  /* Dot colour */\n  --b-spin-dot-color: oklch(50% 0.169 237.323); /* primary – darkened for AA contrast */\n\n  /* Tip text */\n  --b-spin-tip-color: oklch(50% 0.169 237.323);\n  --b-spin-tip-font-size: 0.875rem;\n\n  /* Overlay */\n  --b-spin-overlay-bg: oklch(100% 0 0 / 0.6);\n  --b-spin-content-blur: 0.5px;\n\n  /* Fullscreen */\n  --b-spin-fullscreen-bg: oklch(100% 0 0 / 0.75);\n\n  /* Animation */\n  --b-spin-animation-duration: 1.2s;\n  --b-spin-transition-duration: 300ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-spin {\n  --b-spin-dot-color: oklch(72% 0.14 237);\n  --b-spin-tip-color: oklch(72% 0.14 237);\n  --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n  --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-spin {\n    --b-spin-dot-color: oklch(72% 0.14 237);\n    --b-spin-tip-color: oklch(72% 0.14 237);\n    --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n    --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-spin {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n/* Nested wrapper needs relative positioning for overlay */\n.b-spin--nested {\n  position: relative;\n  display: block;\n}\n\n/* ── Overlay container (nested mode) ── */\n.b-spin__overlay-container {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-overlay-bg);\n  border-radius: inherit;\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n/* ── Content (nested) ── */\n.b-spin__content {\n  transition:\n    opacity var(--b-spin-transition-duration) ease,\n    filter var(--b-spin-transition-duration) ease;\n}\n\n.b-spin__content--blurred {\n  opacity: 0.5;\n  filter: blur(var(--b-spin-content-blur));\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ── Fullscreen ── */\n.b-spin--fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 1070;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-fullscreen-bg);\n}\n\n/* ── Dot indicator ── */\n.b-spin__indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.b-spin__dot {\n  position: relative;\n  display: inline-block;\n  font-size: var(--b-spin-dot-size-default);\n  width: 1em;\n  height: 1em;\n  animation: b-spin-rotate var(--b-spin-animation-duration) linear infinite;\n}\n\n.b-spin--small .b-spin__dot {\n  font-size: var(--b-spin-dot-size-small);\n}\n\n.b-spin--large .b-spin__dot {\n  font-size: var(--b-spin-dot-size-large);\n}\n\n.b-spin__dot-item {\n  position: absolute;\n  display: block;\n  width: calc(1em * 0.45);\n  height: calc(1em * 0.45);\n  background-color: var(--b-spin-dot-color);\n  border-radius: 50%;\n  opacity: 0.3;\n  animation: b-spin-bounce var(--b-spin-animation-duration) ease-in-out infinite;\n  transform: scale(0.75);\n}\n\n.b-spin__dot-item:nth-child(1) {\n  top: 0;\n  left: 0;\n}\n\n.b-spin__dot-item:nth-child(2) {\n  top: 0;\n  right: 0;\n  animation-delay: 0.4s;\n}\n\n.b-spin__dot-item:nth-child(3) {\n  right: 0;\n  bottom: 0;\n  animation-delay: 0.8s;\n}\n\n.b-spin__dot-item:nth-child(4) {\n  bottom: 0;\n  left: 0;\n  animation-delay: 1.2s;\n}\n\n/* ── Tip ── */\n.b-spin__tip {\n  color: var(--b-spin-tip-color);\n  font-size: var(--b-spin-tip-font-size);\n  text-align: center;\n}\n\n/* ─────────────────────────────────────────────\n   Keyframes\n   ───────────────────────────────────────────── */\n@keyframes b-spin-rotate {\n  to {\n    transform: rotate(405deg);\n  }\n}\n\n@keyframes b-spin-bounce {\n  0%,\n  100% {\n    opacity: 0.3;\n    transform: scale(0.75);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Fade transition (fullscreen)\n   ───────────────────────────────────────────── */\n.b-spin-fade-enter-active,\n.b-spin-fade-leave-active {\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n.b-spin-fade-enter-from,\n.b-spin-fade-leave-to {\n  opacity: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-spin__dot {\n    animation: none;\n  }\n\n  .b-spin__dot-item {\n    animation: none;\n    opacity: 0.8;\n    transform: scale(1);\n  }\n\n  .b-spin-fade-enter-active,\n  .b-spin-fade-leave-active {\n    transition: none;\n  }\n\n  .b-spin__content {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system207.js

@@ -1,8 +1,22 @@
-import e from "./design-system205.js";
-/* empty css                 */
-//#region src/components/BTimeline/BTimeline.vue
-var t = e;
+import { defineComponent as e, renderSlot as t } from "vue";
+//#region src/components/BSplitter/BSplitterPanel.vue?vue&type=script&setup=true&lang.ts
+var n = /* @__PURE__ */ e({
+	name: "BSplitterPanel",
+	__name: "BSplitterPanel",
+	props: {
+		size: {},
+		defaultSize: {},
+		min: {},
+		max: {},
+		resizable: { type: Boolean },
+		collapsible: { type: [Boolean, Object] },
+		destroyOnHidden: { type: Boolean }
+	},
+	setup(e) {
+		return (e, n) => t(e.$slots, "default");
+	}
+});
 //#endregion
-export { t as default };
+export { n as default };
 
 //# sourceMappingURL=design-system207.js.map

package/dist/design-system207.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system207.js","names":[],"sources":["../src/components/BTimeline/BTimeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide } from 'vue';\n\nimport type {\n  BTimelineItem,\n  BTimelineItemColor,\n  BTimelineItemPlacement,\n  BTimelineMode,\n  BTimelineOrientation,\n  BTimelineVariant,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  mode = 'start',\n  variant = 'filled',\n  orientation = 'vertical',\n  pending = false,\n  pendingDot,\n  reverse = false,\n  items,\n} = defineProps<{\n  /**\n   * Controls which side labels appear on.\n   * - `'start'`     - all content on the right of the line (default)\n   * - `'end'`       - all content on the left of the line\n   * - `'alternate'` - content alternates left/right\n   * @default 'start'\n   */\n  mode?: BTimelineMode;\n  /**\n   * Dot style.\n   * - `'filled'`   - solid filled circle (default)\n   * - `'outlined'` - hollow ring with colored border\n   * @default 'filled'\n   */\n  variant?: BTimelineVariant;\n  /**\n   * Layout direction.\n   * - `'vertical'`   - items stacked top-to-bottom (default)\n   * - `'horizontal'` - items laid out left-to-right\n   * @default 'vertical'\n   */\n  orientation?: BTimelineOrientation;\n  /**\n   * Whether to show a pending (ghost) item at the bottom.\n   * Pass `true` for the default spinner, or a string for custom content.\n   * @default false\n   */\n  pending?: boolean | string;\n  /**\n   * Custom dot for the pending item. Overridden by the `#pendingDot` slot.\n   */\n  pendingDot?: string;\n  /**\n   * Whether to reverse the order of items (newest first).\n   * @default false\n   */\n  reverse?: boolean;\n  /**\n   * Data-driven items. When provided, slot-based BTimelineItem children are\n   * ignored. Use this for simple, data-only timelines.\n   */\n  items?: BTimelineItem[];\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /**\n   * Default slot: place `<BTimelineItem>` children here.\n   * Ignored when `items` prop is provided.\n   */\n  default?(): unknown;\n  /** Custom dot for the pending ghost item. */\n  pendingDot?(): unknown;\n}>();\n\n// Provide mode to slot-based BTimelineItem children\nprovide('b-timeline-mode', mode);\nprovide('b-timeline-variant', variant);\n\n// ─────────────────────────────────────────────\n// Pending item helpers\n// ─────────────────────────────────────────────\nconst hasPending = computed(() => !!pending);\nconst pendingContent = computed(() => (pending !== true && pending ? pending : ''));\n\n// ─────────────────────────────────────────────\n// Reversed items (data-driven)\n// ─────────────────────────────────────────────\nconst orderedItems = computed<BTimelineItem[]>(() => {\n  if (!items) return [];\n  return reverse ? [...items].reverse() : items;\n});\n\n// ─────────────────────────────────────────────\n// CSS-var dot color helper\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: BTimelineItemColor[] = ['blue', 'red', 'green', 'gray'];\n\nfunction isPresetColor(color?: BTimelineItemColor): boolean {\n  return !color || PRESET_COLORS.includes(color as string);\n}\n\nfunction dotColorStyle(color?: BTimelineItemColor): Record<string, string> | undefined {\n  if (!color || isPresetColor(color)) return undefined;\n  return { '--b-timeline-item-dot-color': color };\n}\n\nfunction dotColorClass(color?: BTimelineItemColor): string {\n  const c = color ?? 'blue';\n  return isPresetColor(c) ? `b-timeline-item--${c}` : 'b-timeline-item--custom';\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-timeline',\n  `b-timeline--${mode}`,\n  `b-timeline--${variant}`,\n  `b-timeline--${orientation}`,\n  {\n    'b-timeline--pending': hasPending.value,\n    'b-timeline--reverse': reverse,\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Item position helper\n// ─────────────────────────────────────────────\nfunction itemPositionClass(index: number, placement?: BTimelineItemPlacement): string {\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 (mode === 'alternate') {\n    return index % 2 === 0 ? 'b-timeline-item--left' : 'b-timeline-item--right';\n  }\n  return mode === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n}\n</script>\n\n<template>\n  <ol :class=\"rootClasses\" aria-label=\"Timeline\">\n    <!-- ── Data-driven items ── -->\n    <template v-if=\"items && items.length\">\n      <li\n        v-for=\"(item, i) in orderedItems\"\n        :key=\"i\"\n        class=\"b-timeline-item\"\n        :class=\"[\n          dotColorClass(item.color),\n          itemPositionClass(i, item.placement),\n          { 'b-timeline-item--pending': item.loading },\n          item.className,\n        ]\"\n        :style=\"[\n          dotColorStyle(item.color),\n          typeof item.style === 'string' ? item.style : item.style,\n        ]\"\n      >\n        <!-- Label / title (opposing side) - always rendered as structural spacer; CSS hides in start mode -->\n        <span class=\"b-timeline-item__label\">{{ item.title ?? '' }}</span>\n\n        <!-- Line + dot -->\n        <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n        <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n          <template v-if=\"item.icon\">\n            <span class=\"b-timeline-item__dot--custom\" :data-icon=\"item.icon\" aria-hidden=\"true\" />\n          </template>\n          <template v-else-if=\"item.loading\">\n            <span class=\"b-timeline-item__dot--pending-spinner\" />\n          </template>\n          <template v-else>\n            <span class=\"b-timeline-item__dot\" />\n          </template>\n        </div>\n\n        <!-- Content -->\n        <div class=\"b-timeline-item__content\">{{ item.content }}</div>\n      </li>\n    </template>\n\n    <!-- ── Slot-based items (default slot children) ── -->\n    <template v-else>\n      <slot />\n    </template>\n\n    <!-- ── Pending ghost item ── -->\n    <li\n      v-if=\"hasPending\"\n      class=\"b-timeline-item b-timeline-item--pending\"\n      :class=\"[itemPositionClass(items ? orderedItems.length : 0)]\"\n      aria-label=\"Pending\"\n    >\n      <!-- Label spacer (structural; hidden in start mode via CSS) -->\n      <span class=\"b-timeline-item__label\" />\n      <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n      <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n        <slot name=\"pendingDot\">\n          <span\n            v-if=\"pendingDot\"\n            class=\"b-timeline-item__dot--custom\"\n            :data-icon=\"pendingDot\"\n            aria-hidden=\"true\"\n          />\n          <span v-else class=\"b-timeline-item__dot--pending-spinner\" aria-hidden=\"true\" />\n        </slot>\n      </div>\n      <div class=\"b-timeline-item__content\">{{ pendingContent }}</div>\n    </li>\n  </ol>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTimeline - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-timeline {\n  /* ── Structural ── */\n  --b-timeline-line-width: 2px;\n  --b-timeline-line-color: oklch(90% 0.005 260);\n  --b-timeline-item-padding-bottom: 20px;\n\n  /* ── Dot ── */\n  --b-timeline-dot-size: 10px;\n  --b-timeline-dot-offset: 0px; /* fine-tune vertical alignment */\n  --b-timeline-dot-border-width: 2px;\n  --b-timeline-custom-dot-font-size: 20px; /* emoji / text custom dots */\n\n  /* ── Blue (default) ── */\n  --b-timeline-color-blue: oklch(54.6% 0.245 262.881);\n  /* ── Green ── */\n  --b-timeline-color-green: oklch(52% 0.17 145);\n  /* ── Red ── */\n  --b-timeline-color-red: oklch(50% 0.2 20);\n  /* ── Gray ── */\n  --b-timeline-color-gray: oklch(68% 0.01 260);\n\n  /* ── Content text ── */\n  --b-timeline-content-color: oklch(32% 0.02 260);\n  --b-timeline-content-font-size: 14px;\n\n  /* ── Label text ── */\n  --b-timeline-label-color: oklch(52% 0.01 260);\n  --b-timeline-label-font-size: 14px;\n\n  /* ── Pending ── */\n  --b-timeline-pending-line-style: dashed;\n  --b-timeline-pending-dot-color: oklch(70% 0.01 260);\n\n  /* ── Spinner ── */\n  --b-timeline-spinner-size: 14px;\n  --b-timeline-spinner-border-color: oklch(54.6% 0.245 262.881 / 20%);\n  --b-timeline-spinner-accent-color: oklch(54.6% 0.245 262.881);\n  --b-timeline-spinner-duration: 700ms;\n\n  /* ── Transition ── */\n  --b-timeline-transition-duration: 200ms;\n\n  /* ── Layout ── */\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--b-timeline-content-font-size);\n  line-height: 1.5;\n  color: var(--b-timeline-content-color);\n}\n\n/* ─────────────────────────────────────────────\n   Item\n   ───────────────────────────────────────────── */\n.b-timeline-item {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding-bottom: var(--b-timeline-item-padding-bottom);\n  margin: 0;\n  list-style: none;\n}\n\n/* last item - hide tail, collapse bottom padding */\n.b-timeline-item:last-child {\n  padding-bottom: 0;\n}\n\n.b-timeline-item:last-child .b-timeline-item__tail {\n  display: none;\n}\n\n/* ── Tail (vertical line) ── */\n.b-timeline-item__tail {\n  position: absolute;\n  top: calc(var(--b-timeline-dot-size) + 4px);\n  left: calc(\n    (var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2)\n  ); /* overridden per-mode */\n  height: calc(100% - var(--b-timeline-dot-size) - 4px);\n  width: var(--b-timeline-line-width);\n  background: var(--b-timeline-line-color);\n  transition: background var(--b-timeline-transition-duration);\n}\n\n/* ── Dot wrapper ── */\n.b-timeline-item__dot-wrapper {\n  position: relative;\n  flex-shrink: 0;\n  width: var(--b-timeline-dot-size);\n  height: var(--b-timeline-dot-size);\n  margin-top: var(--b-timeline-dot-offset);\n  z-index: 1;\n  overflow: visible;\n}\n\n/* ── Standard dot ── */\n.b-timeline-item__dot {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background: var(--b-timeline-item-current-color, var(--b-timeline-color-blue));\n  box-sizing: border-box;\n}\n\n/* ── Custom dot (icon / text) ── */\n.b-timeline-item__dot--custom {\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--b-timeline-custom-dot-font-size);\n  line-height: 1;\n  width: var(--b-timeline-custom-dot-font-size);\n  height: var(--b-timeline-custom-dot-font-size);\n  /* shift left/up so the icon stays centred over the dot position */\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--b-timeline-item-current-color, var(--b-timeline-color-blue));\n}\n\n/* Symbol rendered via ::before so no text node exists - avoids axe non-text-char rule */\n.b-timeline-item__dot--custom::before {\n  content: attr(data-icon);\n}\n\n/* ─────────────────────────────────────────────\n   Preset colors - set --b-timeline-item-current-color\n   ───────────────────────────────────────────── */\n.b-timeline-item--blue {\n  --b-timeline-item-current-color: var(--b-timeline-color-blue);\n}\n\n.b-timeline-item--green {\n  --b-timeline-item-current-color: var(--b-timeline-color-green);\n}\n\n.b-timeline-item--red {\n  --b-timeline-item-current-color: var(--b-timeline-color-red);\n}\n\n.b-timeline-item--gray {\n  --b-timeline-item-current-color: var(--b-timeline-color-gray);\n}\n\n/* Custom (non-preset) color: provided via inline var */\n.b-timeline-item--custom {\n  --b-timeline-item-current-color: var(--b-timeline-item-dot-color);\n}\n\n/* ─────────────────────────────────────────────\n   Content & Label\n   ───────────────────────────────────────────── */\n.b-timeline-item__content {\n  flex: 1;\n  padding-left: 12px;\n  color: var(--b-timeline-content-color);\n  font-size: var(--b-timeline-content-font-size);\n  word-break: break-word;\n}\n\n.b-timeline-item__label {\n  display: none; /* hidden in start mode; shown in alternate/end */\n  color: var(--b-timeline-label-color);\n  font-size: var(--b-timeline-label-font-size);\n  text-align: right;\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Mode: start (default) - content right of line\n   Each item: [dot] [content]\n   ───────────────────────────────────────────── */\n.b-timeline--start .b-timeline-item {\n  flex-direction: row;\n}\n\n.b-timeline--start .b-timeline-item__tail {\n  left: calc((var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2));\n}\n\n.b-timeline--start .b-timeline-item__label {\n  display: none;\n}\n\n/* ─────────────────────────────────────────────\n   Mode: end - content left of line\n   Each item: [content] [dot]\n   ───────────────────────────────────────────── */\n.b-timeline--end .b-timeline-item {\n  flex-direction: row-reverse;\n}\n\n.b-timeline--end .b-timeline-item__content {\n  padding-left: 0;\n  padding-right: 12px;\n  text-align: right;\n}\n\n.b-timeline--end .b-timeline-item__tail {\n  right: calc((var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2));\n  left: auto;\n}\n\n.b-timeline--end .b-timeline-item__label {\n  display: none;\n}\n\n/* ─────────────────────────────────────────────\n   Mode: alternate\n   Each row is always: [left-half][dot][right-half]\n   Left items  (even): left-half = label (right-aligned)\n                       right-half = content (left-aligned)\n   Right items (odd):  left-half = content (right-aligned)\n                       right-half = label (left-aligned)\n   We use CSS `order` to swap - never flex-direction:row-reverse,\n   which would flip the padding direction and break the gap.\n   ───────────────────────────────────────────── */\n\n/* Label: always rendered as a structural spacer; hidden in start mode */\n.b-timeline--alternate .b-timeline-item__label {\n  display: block;\n  /* Each half = 50% of the row minus half the dot width.\n     box-sizing:border-box means padding is included in this width,\n     so the dot centre lands exactly at 50% of the row. */\n  flex: 0 0 calc(50% - var(--b-timeline-dot-size) / 2);\n  box-sizing: border-box;\n  font-size: var(--b-timeline-label-font-size);\n  color: var(--b-timeline-label-color);\n  word-break: break-word;\n}\n\n/* Content: same symmetric half-width */\n.b-timeline--alternate .b-timeline-item__content {\n  flex: 0 0 calc(50% - var(--b-timeline-dot-size) / 2);\n  box-sizing: border-box;\n}\n\n/* Tail: always at exactly 50% of the row, regardless of which items have labels */\n.b-timeline--alternate .b-timeline-item__tail {\n  left: calc(50% - var(--b-timeline-line-width) / 2);\n  transform: none;\n}\n\n/* ── Left items (even): label LEFT → dot → content RIGHT ── */\n/* DOM order: label(1) tail(abs) dot(2) content(3) - already correct, no reordering needed */\n.b-timeline--alternate .b-timeline-item--left .b-timeline-item__label {\n  order: 1;\n  text-align: right;\n  padding-right: 12px;\n  padding-left: 0;\n}\n\n.b-timeline--alternate .b-timeline-item--left .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--alternate .b-timeline-item--left .b-timeline-item__content {\n  order: 3;\n  text-align: left;\n  padding-left: 12px;\n  padding-right: 0;\n}\n\n/* ── Right items (odd): content LEFT → dot → label RIGHT ── */\n/* Use `order` to pull content before dot, push label after dot */\n.b-timeline--alternate .b-timeline-item--right .b-timeline-item__content {\n  order: 1;\n  text-align: right;\n  padding-right: 12px;\n  padding-left: 0;\n}\n\n.b-timeline--alternate .b-timeline-item--right .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--alternate .b-timeline-item--right .b-timeline-item__label {\n  order: 3;\n  text-align: left;\n  padding-left: 12px;\n  padding-right: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Variant: outlined - hollow ring dot\n   ───────────────────────────────────────────── */\n.b-timeline--outlined .b-timeline-item__dot {\n  background: transparent;\n  border: var(--b-timeline-dot-border-width) solid\n    var(--b-timeline-item-current-color, var(--b-timeline-color-blue));\n}\n\n/* ─────────────────────────────────────────────\n   Orientation: horizontal\n   Items laid out left-to-right; tail becomes a\n   horizontal bar running to the right.\n   ───────────────────────────────────────────── */\n.b-timeline--horizontal {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  overflow-x: auto;\n}\n\n.b-timeline--horizontal.b-timeline--start .b-timeline-item,\n.b-timeline--horizontal.b-timeline--end .b-timeline-item {\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n  padding-bottom: 0;\n  padding-right: 0;\n  min-width: 80px;\n}\n\n/* Horizontal tail: runs right from the dot */\n.b-timeline--horizontal .b-timeline-item__tail {\n  top: calc(var(--b-timeline-dot-size) / 2 - var(--b-timeline-line-width) / 2);\n  left: calc(var(--b-timeline-dot-size) + 4px);\n  width: calc(100% - var(--b-timeline-dot-size) - 4px);\n  height: var(--b-timeline-line-width);\n  right: auto;\n  bottom: auto;\n}\n\n/* In horizontal mode the last item still hides its tail */\n.b-timeline--horizontal .b-timeline-item:last-child .b-timeline-item__tail {\n  display: none;\n}\n\n/* Dot: centred horizontally above content */\n.b-timeline--horizontal .b-timeline-item__dot-wrapper {\n  margin-top: 0;\n  flex-shrink: 0;\n}\n\n/* Content sits below the dot row */\n.b-timeline--horizontal .b-timeline-item__content {\n  padding-left: 0;\n  padding-top: 8px;\n  text-align: center;\n  width: 100%;\n}\n\n/* Label sits above the dot row (for start mode) */\n.b-timeline--horizontal.b-timeline--start .b-timeline-item__label {\n  display: block;\n  text-align: center;\n  padding-bottom: 8px;\n  order: 1;\n}\n\n.b-timeline--horizontal.b-timeline--start .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--horizontal.b-timeline--start .b-timeline-item__content {\n  order: 3;\n}\n\n/* For end mode, label goes below content */\n.b-timeline--horizontal.b-timeline--end .b-timeline-item__content {\n  order: 1;\n  padding-top: 8px;\n  padding-right: 0;\n  text-align: center;\n}\n\n.b-timeline--horizontal.b-timeline--end .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--horizontal.b-timeline--end .b-timeline-item__label {\n  display: block;\n  text-align: center;\n  padding-top: 8px;\n  order: 3;\n}\n\n/* ─────────────────────────────────────────────\n   Pending item\n   ───────────────────────────────────────────── */\n.b-timeline-item--pending .b-timeline-item__tail {\n  border-left: var(--b-timeline-line-width) var(--b-timeline-pending-line-style)\n    var(--b-timeline-line-color);\n  background: transparent;\n}\n\n.b-timeline--start .b-timeline-item--pending .b-timeline-item__tail {\n  /* override the absolute left, matches .b-timeline--start logic */\n  left: calc((var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2));\n}\n\n/* Horizontal pending tail */\n.b-timeline--horizontal .b-timeline-item--pending .b-timeline-item__tail {\n  border-left: none;\n  border-top: var(--b-timeline-line-width) var(--b-timeline-pending-line-style)\n    var(--b-timeline-line-color);\n  background: transparent;\n  height: 0;\n}\n\n/* ── Default pending spinner ── */\n.b-timeline-item__dot--pending-spinner {\n  display: block;\n  width: var(--b-timeline-spinner-size);\n  height: var(--b-timeline-spinner-size);\n  margin-left: calc((var(--b-timeline-dot-size) - var(--b-timeline-spinner-size)) / 2);\n  border-radius: 50%;\n  border: var(--b-timeline-dot-border-width) solid var(--b-timeline-spinner-border-color);\n  border-top-color: var(--b-timeline-spinner-accent-color);\n  animation: b-timeline-spin var(--b-timeline-spinner-duration) linear infinite;\n}\n\n@keyframes b-timeline-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-timeline {\n  --b-timeline-line-color: oklch(32% 0.012 260);\n  --b-timeline-content-color: oklch(82% 0.01 260);\n  --b-timeline-label-color: oklch(60% 0.01 260);\n  --b-timeline-color-gray: oklch(50% 0.01 260);\n  --b-timeline-spinner-border-color: oklch(54.6% 0.245 262.881 / 15%);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-timeline {\n    --b-timeline-line-color: oklch(32% 0.012 260);\n    --b-timeline-content-color: oklch(82% 0.01 260);\n    --b-timeline-label-color: oklch(60% 0.01 260);\n    --b-timeline-color-gray: oklch(50% 0.01 260);\n    --b-timeline-spinner-border-color: oklch(54.6% 0.245 262.881 / 15%);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-timeline {\n    --b-timeline-transition-duration: 0ms;\n    --b-timeline-spinner-duration: 0ms;\n  }\n\n  .b-timeline-item__dot--pending-spinner {\n    animation: none;\n    border-top-color: var(--b-timeline-spinner-border-color);\n    opacity: 0.6;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system207.js","names":[],"sources":["../src/components/BSplitter/BSplitterPanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * BSplitterPanel\n * --------------\n * A pure data/marker component used inside <BSplitter>.\n *\n * It does not render any wrapper element of its own — <BSplitter> reads the\n * VNode's props and default-slot content and renders the panel <div>\n * itself, so that draggers can be interspersed correctly between panels.\n *\n * Props mirror AntD's `Splitter.Panel` API.\n */\nimport type { BSplitterPanelCollapsible } from './types';\n\ndefineOptions({ name: 'BSplitterPanel' });\n\ndefineProps<{\n  /** Controlled size (px number or any CSS unit string e.g. '50%'). */\n  size?: number | string;\n  /** Initial size for uncontrolled mode (px number or CSS string). */\n  defaultSize?: number | string;\n  /** Minimum size (px or CSS string). */\n  min?: number | string;\n  /** Maximum size (px or CSS string). */\n  max?: number | string;\n  /** Whether the dragger adjacent to this panel can resize it. @default true */\n  resizable?: boolean;\n  /** Collapsible config — `true` enables both directions, or pass an object. */\n  collapsible?: boolean | BSplitterPanelCollapsible;\n  /** Destroy panel content from the DOM when its size collapses to 0. @default false */\n  destroyOnHidden?: boolean;\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <!-- Render only the slot content. BSplitter wraps it in a panel div. -->\n  <slot />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;mBAwCE,EAAQ,EAAA,QAAA,UAAA"}

package/dist/design-system208.js

@@ -1,57 +1,7 @@
-import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, inject as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderSlot as c } from "vue";
-//#region src/components/BTimeline/BTimelineItem.vue?vue&type=script&setup=true&lang.ts
-var l = { class: "b-timeline-item__label" }, u = {
-	class: "b-timeline-item__dot-wrapper",
-	"aria-hidden": "true"
-}, d = ["data-icon"], f = {
-	key: 1,
-	class: "b-timeline-item__dot--pending-spinner"
-}, p = { class: "b-timeline-item__content" }, m = /* @__PURE__ */ r({
-	__name: "BTimelineItem",
-	props: {
-		color: { default: "blue" },
-		icon: {},
-		loading: {
-			type: Boolean,
-			default: !1
-		},
-		placement: {}
-	},
-	setup(r) {
-		let m = i("b-timeline-mode", "start"), h = i("b-timeline-item-index", 0), g = i("b-timeline-variant", "filled"), _ = [
-			"blue",
-			"red",
-			"green",
-			"gray"
-		], v = e(() => _.includes(r.color)), y = e(() => v.value ? `b-timeline-item--${r.color}` : "b-timeline-item--custom"), b = e(() => v.value ? void 0 : { "--b-timeline-item-dot-color": r.color }), x = e(() => r.placement ? r.placement === "end" ? "b-timeline-item--right" : "b-timeline-item--left" : m === "alternate" ? h % 2 == 0 ? "b-timeline-item--left" : "b-timeline-item--right" : m === "end" ? "b-timeline-item--right" : "b-timeline-item--left"), S = e(() => [
-			"b-timeline-item",
-			y.value,
-			x.value,
-			{ "b-timeline-item--pending": r.loading }
-		]), C = e(() => g === "outlined" ? "b-timeline-item__dot--outlined" : void 0);
-		return (e, i) => (s(), t("li", {
-			class: a(S.value),
-			style: o(b.value)
-		}, [
-			n("span", l, [c(e.$slots, "label")]),
-			i[0] ||= n("div", {
-				class: "b-timeline-item__tail",
-				"aria-hidden": "true"
-			}, null, -1),
-			n("div", u, [c(e.$slots, "icon", {}, () => [r.icon ? (s(), t("span", {
-				key: 0,
-				class: "b-timeline-item__dot b-timeline-item__dot--custom",
-				"data-icon": r.icon,
-				"aria-hidden": "true"
-			}, null, 8, d)) : r.loading ? (s(), t("span", f)) : (s(), t("span", {
-				key: 2,
-				class: a(["b-timeline-item__dot", C.value])
-			}, null, 2))])]),
-			n("div", p, [c(e.$slots, "default")])
-		], 6));
-	}
-});
+import e from "./design-system207.js";
+//#region src/components/BSplitter/BSplitterPanel.vue
+var t = e;
 //#endregion
-export { m as default };
+export { t as default };
 
 //# sourceMappingURL=design-system208.js.map

package/dist/design-system208.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system208.js","names":[],"sources":["../src/components/BTimeline/BTimelineItem.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from \"vue\"\n\nconst _hoisted_1 = { class: \"b-timeline-item__label\" }\nconst _hoisted_2 = {\n  class: \"b-timeline-item__dot-wrapper\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = [\"data-icon\"]\nconst _hoisted_4 = {\n  key: 1,\n  class: \"b-timeline-item__dot--pending-spinner\"\n}\nconst _hoisted_5 = { class: \"b-timeline-item__content\" }\n\nimport { computed, inject } from 'vue';\n\nimport type { BTimelineItemColor, BTimelineItemPlacement, BTimelineVariant } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BTimelineItem',\n  props: {\n    color: { default: 'blue' },\n    icon: {},\n    loading: { type: Boolean, default: false },\n    placement: {}\n  },\n  setup(__props: any) {\n\n\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\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(__props.color));\n\nconst colorClass = computed(() =>\n  isPreset.value ? `b-timeline-item--${__props.color}` : 'b-timeline-item--custom',\n);\n\nconst colorStyle = computed<Record<string, string> | undefined>(() =>\n  !isPreset.value ? { '--b-timeline-item-dot-color': __props.color } : undefined,\n);\n\n// ─────────────────────────────────────────────\n// Position class\n// ─────────────────────────────────────────────\nconst positionClass = computed(() => {\n  // Per-item placement overrides the global mode\n  if (__props.placement) {\n    return __props.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': __props.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\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"li\", {\n    class: _normalizeClass(rootClasses.value),\n    style: _normalizeStyle(colorStyle.value)\n  }, [\n    _createElementVNode(\"span\", _hoisted_1, [\n      _renderSlot(_ctx.$slots, \"label\")\n    ]),\n    _cache[0] || (_cache[0] = _createElementVNode(\"div\", {\n      class: \"b-timeline-item__tail\",\n      \"aria-hidden\": \"true\"\n    }, null, -1)),\n    _createElementVNode(\"div\", _hoisted_2, [\n      _renderSlot(_ctx.$slots, \"icon\", {}, () => [\n        (__props.icon)\n          ? (_openBlock(), _createElementBlock(\"span\", {\n              key: 0,\n              class: \"b-timeline-item__dot b-timeline-item__dot--custom\",\n              \"data-icon\": __props.icon,\n              \"aria-hidden\": \"true\"\n            }, null, 8, _hoisted_3))\n          : (__props.loading)\n            ? (_openBlock(), _createElementBlock(\"span\", _hoisted_4))\n            : (_openBlock(), _createElementBlock(\"span\", {\n                key: 2,\n                class: _normalizeClass([\"b-timeline-item__dot\", variantClass.value])\n              }, null, 2))\n      ])\n    ]),\n    _createElementVNode(\"div\", _hoisted_5, [\n      _renderSlot(_ctx.$slots, \"default\")\n    ])\n  ], 6))\n}\n}\n\n})"],"mappings":";;AAGA,IAAM,IAAa,EAAE,OAAO,0BAA0B,EAChD,IAAa;CACjB,OAAO;CACP,eAAe;CAChB,EACK,IAAa,CAAC,YAAY,EAC1B,IAAa;CACjB,KAAK;CACL,OAAO;CACR,EACK,IAAa,EAAE,OAAO,4BAA4B,EAUxD,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,OAAO,EAAE,SAAS,QAAQ;EAC1B,MAAM,EAAE;EACR,SAAS;GAAE,MAAM;GAAS,SAAS;GAAO;EAC1C,WAAW,EAAE;EACd;CACD,MAAM,GAAc;EAYtB,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,EAAQ,MAAM,CAAC,EAEhE,IAAa,QACjB,EAAS,QAAQ,oBAAoB,EAAQ,UAAU,0BACxD,EAEK,IAAa,QAChB,EAAS,QAA2D,KAAA,IAAnD,EAAE,+BAA+B,EAAQ,OAAO,CACnE,EAKK,IAAgB,QAEhB,EAAQ,YACH,EAAQ,cAAc,QAAQ,2BAA2B,0BAE9D,MAAiB,cACZ,IAAgB,KAAM,IAAI,0BAA0B,2BAEtD,MAAiB,QAAQ,2BAA2B,wBAC3D,EAKI,IAAc,QAAe;GACjC;GACA,EAAW;GACX,EAAc;GACd,EAAE,4BAA4B,EAAQ,SAAS;GAChD,CAAC,EAKI,IAAe,QACnB,MAAoB,aAAa,mCAAmC,KAAA,EACrE;AAED,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,MAAM;GAC9C,OAAO,EAAgB,EAAY,MAAM;GACzC,OAAO,EAAgB,EAAW,MAAM;GACzC,EAAE;GACD,EAAoB,QAAQ,GAAY,CACtC,EAAY,EAAK,QAAQ,QAAQ,CAClC,CAAC;GACF,AAAc,EAAO,OAAK,EAAoB,OAAO;IACnD,OAAO;IACP,eAAe;IAChB,EAAE,MAAM,GAAG;GACZ,EAAoB,OAAO,GAAY,CACrC,EAAY,EAAK,QAAQ,QAAQ,EAAE,QAAQ,CACxC,EAAQ,QACJ,GAAY,EAAE,EAAoB,QAAQ;IACzC,KAAK;IACL,OAAO;IACP,aAAa,EAAQ;IACrB,eAAe;IAChB,EAAE,MAAM,GAAG,EAAW,IACtB,EAAQ,WACN,GAAY,EAAE,EAAoB,QAAQ,EAAW,KACrD,GAAY,EAAE,EAAoB,QAAQ;IACzC,KAAK;IACL,OAAO,EAAgB,CAAC,wBAAwB,EAAa,MAAM,CAAC;IACrE,EAAE,MAAM,EAAE,EAClB,CAAC,CACH,CAAC;GACF,EAAoB,OAAO,GAAY,CACrC,EAAY,EAAK,QAAQ,UAAU,CACpC,CAAC;GACH,EAAE,EAAE;;CAIN,CAAA"}
+{"version":3,"file":"design-system208.js","names":[],"sources":["../src/components/BSplitter/BSplitterPanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * BSplitterPanel\n * --------------\n * A pure data/marker component used inside <BSplitter>.\n *\n * It does not render any wrapper element of its own — <BSplitter> reads the\n * VNode's props and default-slot content and renders the panel <div>\n * itself, so that draggers can be interspersed correctly between panels.\n *\n * Props mirror AntD's `Splitter.Panel` API.\n */\nimport type { BSplitterPanelCollapsible } from './types';\n\ndefineOptions({ name: 'BSplitterPanel' });\n\ndefineProps<{\n  /** Controlled size (px number or any CSS unit string e.g. '50%'). */\n  size?: number | string;\n  /** Initial size for uncontrolled mode (px number or CSS string). */\n  defaultSize?: number | string;\n  /** Minimum size (px or CSS string). */\n  min?: number | string;\n  /** Maximum size (px or CSS string). */\n  max?: number | string;\n  /** Whether the dragger adjacent to this panel can resize it. @default true */\n  resizable?: boolean;\n  /** Collapsible config — `true` enables both directions, or pass an object. */\n  collapsible?: boolean | BSplitterPanelCollapsible;\n  /** Destroy panel content from the DOM when its size collapses to 0. @default false */\n  destroyOnHidden?: boolean;\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <!-- Render only the slot content. BSplitter wraps it in a panel div. -->\n  <slot />\n</template>\n"],"mappings":""}

package/dist/design-system209.js

@@ -1,7 +1,6 @@
-import e from "./design-system208.js";
-//#region src/components/BTimeline/BTimelineItem.vue
-var t = e;
+//#region src/components/BSplitter/types.ts
+var e = Symbol("BSplitterContext");
 //#endregion
-export { t as default };
+export { e as BSplitterContextKey };
 
 //# sourceMappingURL=design-system209.js.map

package/dist/design-system209.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system209.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-system209.js","names":[],"sources":["../src/components/BSplitter/types.ts"],"sourcesContent":["import type { InjectionKey, VNode } from 'vue';\n\nexport type BSplitterOrientation = 'horizontal' | 'vertical';\n\n/**\n * Per-side collapsible config on a panel.\n * `start` = collapse toward the previous (left/top) panel.\n * `end`   = collapse toward the next (right/bottom) panel.\n */\nexport interface BSplitterPanelCollapsible {\n  start?: boolean;\n  end?: boolean;\n}\n\n/**\n * Splitter-level collapsible config (motion + custom icons).\n */\nexport interface BSplitterCollapsible {\n  /** Whether the size change should animate (CSS transition). @default true */\n  motion?: boolean;\n  /** Custom icon nodes for the collapse buttons. */\n  icon?: {\n    start?: VNode | string;\n    end?: VNode | string;\n  };\n}\n\n/** Resolved per-panel configuration extracted from slot VNodes. */\nexport interface BSplitterPanelConfig {\n  /** Panel index (0-based). */\n  index: number;\n  size?: number | string;\n  defaultSize?: number | string;\n  min?: number | string;\n  max?: number | string;\n  resizable: boolean;\n  collapsible: BSplitterPanelCollapsible | false;\n  destroyOnHidden: boolean;\n  /** Default slot content for the panel. */\n  content?: VNode[];\n}\n\n/** Context provided by BSplitter to its children (currently unused; kept for future). */\nexport interface BSplitterContext {\n  orientation: 'horizontal' | 'vertical';\n}\n\nexport const BSplitterContextKey: InjectionKey<BSplitterContext> = Symbol('BSplitterContext');\n"],"mappings":";AA+CA,IAAa,IAAsD,OAAO,mBAAmB"}