@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system237.js

@@ -1,122 +0,0 @@
-import { Transition as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, watch as m, withCtx as h, withModifiers as g } from "vue";
-//#region src/components/BTag/BTag.vue?vue&type=script&setup=true&lang.ts
-var _ = ["aria-hidden"], v = { class: "b-tag__content" }, y = ["data-icon"], b = {
-	key: 1,
-	class: "b-tag__close-icon",
-	viewBox: "0 0 12 12",
-	xmlns: "http://www.w3.org/2000/svg",
-	"aria-hidden": "true",
-	focusable: "false"
-}, x = /* @__PURE__ */ s({
-	__name: "BTag",
-	props: {
-		color: {},
-		variant: { default: "filled" },
-		size: { default: "default" },
-		closable: {
-			type: Boolean,
-			default: !1
-		},
-		closeIcon: {},
-		visible: {
-			type: Boolean,
-			default: () => void 0
-		},
-		bordered: {
-			type: Boolean,
-			default: !0
-		},
-		icon: {}
-	},
-	emits: [
-		"close",
-		"afterClose",
-		"update:visible"
-	],
-	setup(s, { emit: x }) {
-		let S = x, C = [
-			"default",
-			"success",
-			"processing",
-			"error",
-			"warning",
-			"magenta",
-			"red",
-			"volcano",
-			"orange",
-			"gold",
-			"lime",
-			"green",
-			"cyan",
-			"blue",
-			"geekblue",
-			"purple"
-		], w = t(() => s.color === void 0 || C.includes(s.color)), T = t(() => w.value ? s.color ?? "default" : "default"), E = t(() => s.visible !== void 0), D = d(!0);
-		m(() => s.visible, (e) => {
-			e !== void 0 && (D.value = e);
-		});
-		let O = t(() => E.value ? s.visible : D.value);
-		function k(e) {
-			S("close", e), E.value ? S("update:visible", !1) : D.value = !1;
-		}
-		function A(e) {
-			k(e);
-		}
-		function j(e) {
-			(e.key === "Enter" || e.key === " " || e.key === "Escape") && (e.preventDefault(), k(e));
-		}
-		function M() {
-			S("afterClose");
-		}
-		let N = t(() => [
-			"b-tag",
-			`b-tag--${T.value}`,
-			`b-tag--${s.variant}`,
-			{
-				"b-tag--borderless": !s.bordered,
-				"b-tag--closable": s.closable,
-				"b-tag--small": s.size === "small",
-				"b-tag--large": s.size === "large",
-				"b-tag--custom-color": !w.value
-			}
-		]), P = t(() => {
-			if (!w.value) return { "--b-tag-custom-color": s.color };
-		});
-		return (t, d) => (u(), n(e, {
-			name: "b-tag-fade",
-			onAfterLeave: M
-		}, {
-			default: h(() => [O.value ? (u(), i("span", {
-				key: 0,
-				class: c(N.value),
-				style: l(P.value)
-			}, [
-				t.$slots.icon || s.icon ? (u(), i("span", {
-					key: 0,
-					class: "b-tag__icon",
-					"aria-hidden": t.$slots.icon ? void 0 : "true"
-				}, [f(t.$slots, "icon", {}, () => [o(p(s.icon), 1)])], 8, _)) : r("", !0),
-				a("span", v, [f(t.$slots, "default")]),
-				s.closable ? (u(), i("button", {
-					key: 1,
-					type: "button",
-					class: "b-tag__close",
-					"aria-label": "Remove tag",
-					tabindex: "0",
-					onClick: g(A, ["stop"]),
-					onKeydown: j
-				}, [f(t.$slots, "closeIcon", {}, () => [s.closeIcon ? (u(), i("span", {
-					key: 0,
-					class: "b-tag__close-label",
-					"aria-hidden": "true",
-					"data-icon": s.closeIcon
-				}, null, 8, y)) : (u(), i("svg", b, [...d[0] ||= [a("path", { 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" }, null, -1)]]))])], 32)) : r("", !0)
-			], 6)) : r("", !0)]),
-			_: 3
-		}));
-	}
-});
-//#endregion
-export { x as default };
-
-//# sourceMappingURL=design-system237.js.map

package/dist/design-system237.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system237.js","names":["$slots"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEA,IAAM,IAAO,GAwBP,IAAmC;GACvC;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EAEK,IAAW,QAAe,EAAA,UAAU,KAAA,KAAc,EAA2B,SAAS,EAAA,MAAM,CAAC,EAE7F,IAAiB,QACrB,EAAS,QAAU,EAAA,SAAS,YAAiC,UAC9D,EAKK,IAAe,QAAe,EAAA,YAAY,KAAA,EAAU,EACpD,IAAkB,EAAI,GAAK;AAGjC,UACQ,EAAA,UACL,MAAQ;AACP,GAAI,MAAQ,KAAA,MAAW,EAAgB,QAAQ;IAElD;EAED,IAAM,IAAY,QAAgB,EAAa,QAAQ,EAAA,UAAW,EAAgB,MAAO;EAKzF,SAAS,EAAY,GAAmC;AAEtD,GADA,EAAK,SAAS,EAAM,EAChB,EAAa,QACf,EAAK,kBAAkB,GAAM,GAE7B,EAAgB,QAAQ;;EAI5B,SAAS,EAAa,GAAmB;AACvC,KAAY,EAAM;;EAGpB,SAAS,EAAe,GAAsB;AAC5C,IAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OAAO,EAAM,QAAQ,cAC9D,EAAM,gBAAgB,EACtB,EAAY,EAAM;;EAItB,SAAS,IAAe;AACtB,KAAK,aAAa;;EAMpB,IAAM,IAAc,QAAe;GACjC;GACA,UAAU,EAAe;GACzB,UAAU,EAAA;GACV;IACE,qBAAqB,CAAC,EAAA;IACtB,mBAAmB,EAAA;IACnB,gBAAgB,EAAA,SAAS;IACzB,gBAAgB,EAAA,SAAS;IACzB,uBAAuB,CAAC,EAAS;IAClC;GACF,CAAC,EAKI,IAAmB,QAAe;AAClC,UAAS,MAEb,QAAO,EACL,wBAAwB,EAAA,OACzB;IACD;yBAIA,EAgDa,GAAA;GAhDD,MAAK;GAA2B;;oBA+CnC,CA9CK,EAAA,SAAA,GAAA,EAAZ,EA8CO,QAAA;;IA9CiB,OAAK,EAAE,EAAA,MAAW;IAAG,OAAK,EAAE,EAAA,MAAgB;;IAG1DA,EAAAA,OAAO,QAAQ,EAAA,QAAA,GAAA,EADvB,EAMO,QAAA;;KAJL,OAAM;KACL,eAAaA,EAAAA,OAAO,OAAO,KAAA,IAAS;QAErC,EAAmC,EAAA,QAAA,QAAA,EAAA,QAAA,CAAA,EAAA,EAAd,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAI3B,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;IAKF,EAAA,YAAA,GAAA,EADR,EA6BS,UAAA;;KA3BP,MAAK;KACL,OAAM;KACN,cAAW;KACX,UAAS;KACR,SAAK,EAAO,GAAY,CAAA,OAAA,CAAA;KACxB,WAAS;QAEV,EAmBO,EAAA,QAAA,aAAA,EAAA,QAAA,CAjBG,EAAA,aAAA,GAAA,EADR,EAKE,QAAA;;KAHA,OAAM;KACN,eAAY;KACX,aAAW,EAAA;4BAEd,EAWM,OAXN,GAWM,CAAA,GAAA,AAAA,EAAA,OAAA,CAHJ,EAEE,QAAA,EADA,GAAE,qHAAmH,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/design-system240.js

@@ -1,115 +0,0 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, provide as l, renderList as u, renderSlot as d, toDisplayString as f } from "vue";
-//#region src/components/BTimeline/BTimeline.vue?vue&type=script&setup=true&lang.ts
-var p = { class: "b-timeline-item__label" }, m = {
-	class: "b-timeline-item__dot-wrapper",
-	"aria-hidden": "true"
-}, h = ["data-icon"], g = {
-	key: 1,
-	class: "b-timeline-item__dot--pending-spinner"
-}, _ = {
-	key: 2,
-	class: "b-timeline-item__dot"
-}, v = { class: "b-timeline-item__content" }, y = {
-	class: "b-timeline-item__dot-wrapper",
-	"aria-hidden": "true"
-}, b = ["data-icon"], x = {
-	key: 1,
-	class: "b-timeline-item__dot--pending-spinner",
-	"aria-hidden": "true"
-}, S = { class: "b-timeline-item__content" }, C = /* @__PURE__ */ a({
-	__name: "BTimeline",
-	props: {
-		mode: { default: "start" },
-		variant: { default: "filled" },
-		orientation: { default: "vertical" },
-		pending: {
-			type: [Boolean, String],
-			default: !1
-		},
-		pendingDot: {},
-		reverse: {
-			type: Boolean,
-			default: !1
-		},
-		items: {}
-	},
-	setup(a) {
-		l("b-timeline-mode", a.mode), l("b-timeline-variant", a.variant);
-		let C = t(() => !!a.pending), w = t(() => a.pending !== !0 && a.pending ? a.pending : ""), T = t(() => a.items ? a.reverse ? [...a.items].reverse() : a.items : []), E = [
-			"blue",
-			"red",
-			"green",
-			"gray"
-		];
-		function D(e) {
-			return !e || E.includes(e);
-		}
-		function O(e) {
-			if (!(!e || D(e))) return { "--b-timeline-item-dot-color": e };
-		}
-		function k(e) {
-			let t = e ?? "blue";
-			return D(t) ? `b-timeline-item--${t}` : "b-timeline-item--custom";
-		}
-		let A = t(() => [
-			"b-timeline",
-			`b-timeline--${a.mode}`,
-			`b-timeline--${a.variant}`,
-			`b-timeline--${a.orientation}`,
-			{
-				"b-timeline--pending": C.value,
-				"b-timeline--reverse": a.reverse
-			}
-		]);
-		function j(e, t) {
-			return t ? t === "end" ? "b-timeline-item--right" : "b-timeline-item--left" : a.mode === "alternate" ? e % 2 == 0 ? "b-timeline-item--left" : "b-timeline-item--right" : a.mode === "end" ? "b-timeline-item--right" : "b-timeline-item--left";
-		}
-		return (t, l) => (c(), r("ol", {
-			class: o(A.value),
-			"aria-label": "Timeline"
-		}, [a.items && a.items.length ? (c(!0), r(e, { key: 0 }, u(T.value, (e, t) => (c(), r("li", {
-			key: t,
-			class: o(["b-timeline-item", [
-				k(e.color),
-				j(t, e.placement),
-				{ "b-timeline-item--pending": e.loading },
-				e.className
-			]]),
-			style: s([O(e.color), (e.style, e.style)])
-		}, [
-			i("span", p, f(e.title ?? ""), 1),
-			l[0] ||= i("div", {
-				class: "b-timeline-item__tail",
-				"aria-hidden": "true"
-			}, null, -1),
-			i("div", m, [e.icon ? (c(), r("span", {
-				key: 0,
-				class: "b-timeline-item__dot--custom",
-				"data-icon": e.icon,
-				"aria-hidden": "true"
-			}, null, 8, h)) : e.loading ? (c(), r("span", g)) : (c(), r("span", _))]),
-			i("div", v, f(e.content), 1)
-		], 6))), 128)) : d(t.$slots, "default", { key: 1 }), C.value ? (c(), r("li", {
-			key: 2,
-			class: o(["b-timeline-item b-timeline-item--pending", [j(a.items ? T.value.length : 0)]]),
-			"aria-label": "Pending"
-		}, [
-			l[1] ||= i("span", { class: "b-timeline-item__label" }, null, -1),
-			l[2] ||= i("div", {
-				class: "b-timeline-item__tail",
-				"aria-hidden": "true"
-			}, null, -1),
-			i("div", y, [d(t.$slots, "pendingDot", {}, () => [a.pendingDot ? (c(), r("span", {
-				key: 0,
-				class: "b-timeline-item__dot--custom",
-				"data-icon": a.pendingDot,
-				"aria-hidden": "true"
-			}, null, 8, b)) : (c(), r("span", x))])]),
-			i("div", S, f(w.value), 1)
-		], 2)) : n("", !0)], 2));
-	}
-});
-//#endregion
-export { C as default };
-
-//# sourceMappingURL=design-system240.js.map

package/dist/design-system240.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system240.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,EADA,EAAQ,mBAAmB,EAAA,KAAK,EAChC,EAAQ,sBAAsB,EAAA,QAAQ;EAKtC,IAAM,IAAa,QAAe,CAAC,CAAC,EAAA,QAAQ,EACtC,IAAiB,QAAgB,EAAA,YAAY,MAAQ,EAAA,UAAU,EAAA,UAAU,GAAI,EAK7E,IAAe,QACd,EAAA,QACE,EAAA,UAAU,CAAC,GAAG,EAAA,MAAM,CAAC,SAAS,GAAG,EAAA,QADrB,EAAE,CAErB,EAKI,IAAsC;GAAC;GAAQ;GAAO;GAAS;GAAO;EAE5E,SAAS,EAAc,GAAqC;AAC1D,UAAO,CAAC,KAAS,EAAc,SAAS,EAAgB;;EAG1D,SAAS,EAAc,GAAgE;AACjF,UAAC,KAAS,EAAc,EAAM,EAClC,QAAO,EAAE,+BAA+B,GAAO;;EAGjD,SAAS,EAAc,GAAoC;GACzD,IAAM,IAAI,KAAS;AACnB,UAAO,EAAc,EAAE,GAAG,oBAAoB,MAAM;;EAMtD,IAAM,IAAc,QAAe;GACjC;GACA,eAAe,EAAA;GACf,eAAe,EAAA;GACf,eAAe,EAAA;GACf;IACE,uBAAuB,EAAW;IAClC,uBAAuB,EAAA;IACxB;GACF,CAAC;EAKF,SAAS,EAAkB,GAAe,GAA4C;AAQpF,UANI,IACK,MAAc,QAAQ,2BAA2B,0BAEtD,EAAA,SAAS,cACJ,IAAQ,KAAM,IAAI,0BAA0B,2BAE9C,EAAA,SAAS,QAAQ,2BAA2B;;yBAKnD,EAoEK,MAAA;GApEA,OAAK,EAAE,EAAA,MAAW;GAAE,cAAW;MAElB,EAAA,SAAS,EAAA,MAAM,UAAA,EAAA,GAAA,EAC7B,EAkCK,GAAA,EAAA,KAAA,GAAA,EAAA,EAjCiB,EAAA,QAAZ,GAAM,YADhB,EAkCK,MAAA;GAhCF,KAAK;GACN,OAAK,EAAA,CAAC,mBAAiB;IACH,EAAc,EAAK,MAAK;IAAa,EAAkB,GAAG,EAAK,UAAS;kCAA2C,EAAK,SAAO;IAAc,EAAK;;GAMrK,OAAK,EAAA,CAAc,EAAc,EAAK,MAAK,GAAoB,EAAK,OAAqB,EAAK,OAAa,CAAA;;GAM5G,EAAkE,QAAlE,GAAkE,EAA1B,EAAK,SAAK,GAAA,EAAA,EAAA;YAGlD,EAAwD,OAAA;IAAnD,OAAM;IAAwB,eAAY;;GAC/C,EAUM,OAVN,GAUM,CATY,EAAK,QAAA,GAAA,EACnB,EAAuF,QAAA;;IAAjF,OAAM;IAAgC,aAAW,EAAK;IAAM,eAAY;qBAE3D,EAAK,WAAA,GAAA,EACxB,EAAsD,QAAtD,EAAsD,KAAA,GAAA,EAGtD,EAAqC,QAArC,EAAqC,EAAA,CAAA;GAKzC,EAA8D,OAA9D,GAA8D,EAArB,EAAK,QAAO,EAAA,EAAA;mBAMvD,EAAQ,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,EAKF,EAAA,SAAA,GAAA,EADR,EAqBK,MAAA;;GAnBH,OAAK,EAAA,CAAC,4CAA0C,CACvC,EAAkB,EAAA,QAAQ,EAAA,MAAa,SAAM,EAAA,CAAA,CAAA,CAAA;GACtD,cAAW;;YAGX,EAAuC,QAAA,EAAjC,OAAM,0BAAwB,EAAA,MAAA,GAAA;YACpC,EAAwD,OAAA;IAAnD,OAAM;IAAwB,eAAY;;GAC/C,EAUM,OAVN,GAUM,CATJ,EAQO,EAAA,QAAA,cAAA,EAAA,QAAA,CANG,EAAA,cAAA,GAAA,EADR,EAKE,QAAA;;IAHA,OAAM;IACL,aAAW,EAAA;IACZ,eAAY;2BAEd,EAAgF,QAAhF,EAAgF,EAAA,CAAA,CAAA,CAAA;GAGpF,EAAgE,OAAhE,GAAgE,EAAvB,EAAA,MAAc,EAAA,EAAA"}