@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system237.js.map

@@ -0,0 +1 @@
+{"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-system239.js

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

package/dist/design-system239.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system239.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":""}

package/dist/{design-system205.js → design-system240.js}

@@ -112,4 +112,4 @@ var p = { class: "b-timeline-item__label" }, m = {
 //#endregion
 export { C as default };
 
-//# sourceMappingURL=design-system205.js.map
+//# sourceMappingURL=design-system240.js.map

package/dist/design-system240.js.map

@@ -0,0 +1 @@
+{"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"}

package/dist/design-system242.js

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

package/dist/design-system242.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system242.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":""}

package/dist/design-system243.js

@@ -0,0 +1,57 @@
+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));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=design-system243.js.map

package/dist/design-system243.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system243.js","names":[],"sources":["../src/components/BTimeline/BTimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue';\n\nimport type { BTimelineItemColor, BTimelineItemPlacement, BTimelineVariant } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  color = 'blue',\n  icon,\n  loading = false,\n  placement,\n} = defineProps<{\n  /**\n   * Dot color - preset (`blue` | `red` | `green` | `gray`) or any CSS color.\n   * @default 'blue'\n   */\n  color?: BTimelineItemColor;\n  /**\n   * Custom dot content string/emoji. Use the `#icon` slot for rich content.\n   */\n  icon?: string;\n  /**\n   * Shows a spinner on this item's dot - use for in-progress items.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Override the parent timeline's mode for this item only.\n   * Pins the item to the `'start'` or `'end'` side regardless of mode.\n   */\n  placement?: BTimelineItemPlacement;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the timeline item. */\n  default?(): unknown;\n  /** Custom dot/icon content - fully replaces the standard circle. */\n  icon?(): unknown;\n  /** Label shown on the opposing side in alternate/end mode. */\n  label?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Context from parent (mode + item index + variant)\n// ─────────────────────────────────────────────\nconst timelineMode = inject<'start' | 'alternate' | 'end'>('b-timeline-mode', 'start');\nconst timelineIndex = inject<number>('b-timeline-item-index', 0);\nconst timelineVariant = inject<BTimelineVariant>('b-timeline-variant', 'filled');\n\n// ─────────────────────────────────────────────\n// Color helpers\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: string[] = ['blue', 'red', 'green', 'gray'];\n\nconst isPreset = computed(() => PRESET_COLORS.includes(color));\n\nconst colorClass = computed(() =>\n  isPreset.value ? `b-timeline-item--${color}` : 'b-timeline-item--custom',\n);\n\nconst colorStyle = computed<Record<string, string> | undefined>(() =>\n  !isPreset.value ? { '--b-timeline-item-dot-color': color } : undefined,\n);\n\n// ─────────────────────────────────────────────\n// Position class\n// ─────────────────────────────────────────────\nconst positionClass = computed(() => {\n  // Per-item placement overrides the global mode\n  if (placement) {\n    return placement === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n  }\n  if (timelineMode === 'alternate') {\n    return timelineIndex % 2 === 0 ? 'b-timeline-item--left' : 'b-timeline-item--right';\n  }\n  return timelineMode === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n});\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-timeline-item',\n  colorClass.value,\n  positionClass.value,\n  { 'b-timeline-item--pending': loading },\n]);\n\n// ─────────────────────────────────────────────\n// Variant (injected from parent BTimeline)\n// ─────────────────────────────────────────────\nconst variantClass = computed(() =>\n  timelineVariant === 'outlined' ? 'b-timeline-item__dot--outlined' : undefined,\n);\n</script>\n\n<template>\n  <li :class=\"rootClasses\" :style=\"colorStyle\">\n    <!-- Label - always rendered as a structural spacer; CSS hides it in start mode -->\n    <span class=\"b-timeline-item__label\">\n      <slot name=\"label\" />\n    </span>\n\n    <!-- Tail (connecting line) -->\n    <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n\n    <!-- Dot -->\n    <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n      <slot name=\"icon\">\n        <template v-if=\"icon\">\n          <span\n            class=\"b-timeline-item__dot b-timeline-item__dot--custom\"\n            :data-icon=\"icon\"\n            aria-hidden=\"true\"\n          />\n        </template>\n        <template v-else-if=\"loading\">\n          <span class=\"b-timeline-item__dot--pending-spinner\" />\n        </template>\n        <template v-else>\n          <span class=\"b-timeline-item__dot\" :class=\"variantClass\" />\n        </template>\n      </slot>\n    </div>\n\n    <!-- Content -->\n    <div class=\"b-timeline-item__content\">\n      <slot />\n    </div>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAkDA,IAAM,IAAe,EAAsC,mBAAmB,QAAQ,EAChF,IAAgB,EAAe,yBAAyB,EAAE,EAC1D,IAAkB,EAAyB,sBAAsB,SAAS,EAK1E,IAA0B;GAAC;GAAQ;GAAO;GAAS;GAAO,EAE1D,IAAW,QAAe,EAAc,SAAS,EAAA,MAAM,CAAC,EAExD,IAAa,QACjB,EAAS,QAAQ,oBAAoB,EAAA,UAAU,0BAChD,EAEK,IAAa,QAChB,EAAS,QAAmD,KAAA,IAA3C,EAAE,+BAA+B,EAAA,OAAO,CAC3D,EAKK,IAAgB,QAEhB,EAAA,YACK,EAAA,cAAc,QAAQ,2BAA2B,0BAEtD,MAAiB,cACZ,IAAgB,KAAM,IAAI,0BAA0B,2BAEtD,MAAiB,QAAQ,2BAA2B,wBAC3D,EAKI,IAAc,QAAe;GACjC;GACA,EAAW;GACX,EAAc;GACd,EAAE,4BAA4B,EAAA,SAAS;GACxC,CAAC,EAKI,IAAe,QACnB,MAAoB,aAAa,mCAAmC,KAAA,EACrE;yBAIC,EAgCK,MAAA;GAhCA,OAAK,EAAE,EAAA,MAAW;GAAG,OAAK,EAAE,EAAA,MAAU;;GAEzC,EAEO,QAFP,GAEO,CADL,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA;YAIvB,EAAwD,OAAA;IAAnD,OAAM;IAAwB,eAAY;;GAG/C,EAgBM,OAhBN,GAgBM,CAfJ,EAcO,EAAA,QAAA,QAAA,EAAA,QAAA,CAbW,EAAA,QAAA,GAAA,EACd,EAIE,QAAA;;IAHA,OAAM;IACL,aAAW,EAAA;IACZ,eAAY;qBAGK,EAAA,WAAA,GAAA,EACnB,EAAsD,QAAtD,EAAsD,KAAA,GAAA,EAGtD,EAA2D,QAAA;;IAArD,OAAK,EAAA,CAAC,wBAA+B,EAAA,MAAY,CAAA;;GAM7D,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/design-system244.js

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

package/dist/design-system244.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system244.js","names":[],"sources":["../src/components/BTimeline/BTimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue';\n\nimport type { BTimelineItemColor, BTimelineItemPlacement, BTimelineVariant } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  color = 'blue',\n  icon,\n  loading = false,\n  placement,\n} = defineProps<{\n  /**\n   * Dot color - preset (`blue` | `red` | `green` | `gray`) or any CSS color.\n   * @default 'blue'\n   */\n  color?: BTimelineItemColor;\n  /**\n   * Custom dot content string/emoji. Use the `#icon` slot for rich content.\n   */\n  icon?: string;\n  /**\n   * Shows a spinner on this item's dot - use for in-progress items.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Override the parent timeline's mode for this item only.\n   * Pins the item to the `'start'` or `'end'` side regardless of mode.\n   */\n  placement?: BTimelineItemPlacement;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the timeline item. */\n  default?(): unknown;\n  /** Custom dot/icon content - fully replaces the standard circle. */\n  icon?(): unknown;\n  /** Label shown on the opposing side in alternate/end mode. */\n  label?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Context from parent (mode + item index + variant)\n// ─────────────────────────────────────────────\nconst timelineMode = inject<'start' | 'alternate' | 'end'>('b-timeline-mode', 'start');\nconst timelineIndex = inject<number>('b-timeline-item-index', 0);\nconst timelineVariant = inject<BTimelineVariant>('b-timeline-variant', 'filled');\n\n// ─────────────────────────────────────────────\n// Color helpers\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: string[] = ['blue', 'red', 'green', 'gray'];\n\nconst isPreset = computed(() => PRESET_COLORS.includes(color));\n\nconst colorClass = computed(() =>\n  isPreset.value ? `b-timeline-item--${color}` : 'b-timeline-item--custom',\n);\n\nconst colorStyle = computed<Record<string, string> | undefined>(() =>\n  !isPreset.value ? { '--b-timeline-item-dot-color': color } : undefined,\n);\n\n// ─────────────────────────────────────────────\n// Position class\n// ─────────────────────────────────────────────\nconst positionClass = computed(() => {\n  // Per-item placement overrides the global mode\n  if (placement) {\n    return placement === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n  }\n  if (timelineMode === 'alternate') {\n    return timelineIndex % 2 === 0 ? 'b-timeline-item--left' : 'b-timeline-item--right';\n  }\n  return timelineMode === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n});\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-timeline-item',\n  colorClass.value,\n  positionClass.value,\n  { 'b-timeline-item--pending': loading },\n]);\n\n// ─────────────────────────────────────────────\n// Variant (injected from parent BTimeline)\n// ─────────────────────────────────────────────\nconst variantClass = computed(() =>\n  timelineVariant === 'outlined' ? 'b-timeline-item__dot--outlined' : undefined,\n);\n</script>\n\n<template>\n  <li :class=\"rootClasses\" :style=\"colorStyle\">\n    <!-- Label - always rendered as a structural spacer; CSS hides it in start mode -->\n    <span class=\"b-timeline-item__label\">\n      <slot name=\"label\" />\n    </span>\n\n    <!-- Tail (connecting line) -->\n    <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n\n    <!-- Dot -->\n    <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n      <slot name=\"icon\">\n        <template v-if=\"icon\">\n          <span\n            class=\"b-timeline-item__dot b-timeline-item__dot--custom\"\n            :data-icon=\"icon\"\n            aria-hidden=\"true\"\n          />\n        </template>\n        <template v-else-if=\"loading\">\n          <span class=\"b-timeline-item__dot--pending-spinner\" />\n        </template>\n        <template v-else>\n          <span class=\"b-timeline-item__dot\" :class=\"variantClass\" />\n        </template>\n      </slot>\n    </div>\n\n    <!-- Content -->\n    <div class=\"b-timeline-item__content\">\n      <slot />\n    </div>\n  </li>\n</template>\n"],"mappings":""}

package/dist/design-system245.js

@@ -0,0 +1,173 @@
+import { BTooltipPlacement as e, BTooltipTrigger as t } from "./design-system3.js";
+import { useComponentId as n } from "./design-system10.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, watch as b } from "vue";
+//#region src/components/BTooltip/BTooltip.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-describedby"], S = ["id"], ee = {
+	key: 0,
+	class: "b-tooltip__arrow",
+	"aria-hidden": "true"
+}, C = /* @__PURE__ */ l({
+	__name: "BTooltip",
+	props: {
+		title: {},
+		trigger: { default: () => t.Hover },
+		placement: { default: () => e.TopCenter },
+		arrow: {
+			type: Boolean,
+			default: !0
+		},
+		color: {},
+		mouseEnterDelay: { default: 100 },
+		mouseLeaveDelay: { default: 100 },
+		destroyTooltipOnHide: {
+			type: Boolean,
+			default: !1
+		},
+		zIndex: { default: 1070 },
+		fresh: {
+			type: Boolean,
+			default: !1
+		},
+		autoAdjustOverflow: { type: Boolean },
+		modelValue: {
+			type: Boolean,
+			default: () => void 0
+		},
+		toggleClass: {},
+		tooltipClass: {},
+		tooltipInnerClass: {}
+	},
+	emits: ["openChange", "update:modelValue"],
+	setup(l, { expose: C, emit: w }) {
+		let T = w, { componentUID: E } = n(), D = y(), O = h(!1), k = i(() => l.modelValue === void 0 ? O.value : l.modelValue), A = h(!1), j = i(() => l.fresh || l.destroyTooltipOnHide ? k.value : A.value || k.value);
+		b(k, (e) => {
+			e && (A.value = !0);
+		});
+		let M = null, N = null;
+		function P() {
+			M &&= (clearTimeout(M), null), N &&= (clearTimeout(N), null);
+		}
+		function F(e = 0) {
+			P(), !k.value && (e > 0 ? M = setTimeout(() => L(), e) : L());
+		}
+		function I(e = 0) {
+			P(), k.value && (e > 0 ? N = setTimeout(() => R(), e) : R());
+		}
+		function L() {
+			V.value?.showPopover();
+		}
+		function R() {
+			V.value?.hidePopover();
+		}
+		function z(e) {
+			l.modelValue === void 0 ? O.value = e : T("update:modelValue", e), T("openChange", e);
+		}
+		let B = ({ newState: e }) => {
+			z(e === "open");
+		}, V = h(null), H = h(null);
+		function U() {
+			k.value ? I() : F();
+		}
+		function W() {
+			F(l.mouseEnterDelay);
+		}
+		function G() {
+			I(l.mouseLeaveDelay);
+		}
+		function K() {
+			F();
+		}
+		function q() {
+			I();
+		}
+		function J(e) {
+			e.key === "Escape" && k.value && (e.preventDefault(), I(), H.value?.focus());
+		}
+		function Y() {
+			l.trigger === t.Hover && P();
+		}
+		function X() {
+			l.trigger === t.Hover && I(l.mouseLeaveDelay);
+		}
+		function Z() {
+			let e = H.value;
+			if (e) switch (e.addEventListener("keydown", J), l.trigger) {
+				case t.Click:
+					e.addEventListener("click", U);
+					break;
+				case t.Focus:
+					e.addEventListener("focusin", K), e.addEventListener("focusout", q);
+					break;
+				case t.Hover:
+				default:
+					e.addEventListener("mouseenter", W), e.addEventListener("mouseleave", G), e.addEventListener("focusin", K), e.addEventListener("focusout", q);
+					break;
+			}
+		}
+		function Q() {
+			let e = H.value;
+			e && (e.removeEventListener("keydown", J), e.removeEventListener("click", U), e.removeEventListener("focusin", K), e.removeEventListener("focusout", q), e.removeEventListener("mouseenter", W), e.removeEventListener("mouseleave", G));
+		}
+		p(() => {
+			Z();
+		}), f(() => {
+			Q(), P();
+		}), b(() => l.trigger, () => {
+			Q(), Z();
+		}), b(() => l.modelValue, (e) => {
+			e !== void 0 && (e ? V.value?.showPopover() : V.value?.hidePopover());
+		});
+		let $ = i(() => `--b-tooltip-anchor-${E.value}`), te = i(() => ({
+			[e.TopLeft]: "top-left",
+			[e.TopCenter]: "top-center",
+			[e.TopRight]: "top-right",
+			[e.RightTop]: "right-top",
+			[e.RightCenter]: "right-center",
+			[e.RightBottom]: "right-bottom",
+			[e.BottomRight]: "bottom-right",
+			[e.BottomCenter]: "bottom-center",
+			[e.BottomLeft]: "bottom-left",
+			[e.LeftBottom]: "left-bottom",
+			[e.LeftCenter]: "left-center",
+			[e.LeftTop]: "left-top"
+		})[l.placement] ?? "top-center"), ne = i(() => {
+			if (l.color) return {
+				"--b-tooltip-bg": l.color,
+				"--b-tooltip-arrow-color": l.color
+			};
+		});
+		return C({
+			open: L,
+			close: R
+		}), (e, t) => (m(), o(r, null, [s("div", {
+			ref_key: "toggleRef",
+			ref: H,
+			class: u(["b-tooltip__toggle", l.toggleClass]),
+			style: d({ anchorName: $.value }),
+			"aria-describedby": k.value ? v(D) : void 0
+		}, [g(e.$slots, "default")], 14, x), s("div", {
+			ref_key: "tooltipRef",
+			ref: V,
+			popover: "manual",
+			class: u([
+				"b-tooltip__content",
+				te.value,
+				{ "b-tooltip__content--no-arrow": !l.arrow },
+				l.tooltipClass
+			]),
+			style: d([{
+				zIndex: l.zIndex,
+				positionAnchor: $.value
+			}, ne.value]),
+			role: "tooltip",
+			id: v(D),
+			onToggle: B,
+			onMouseenter: Y,
+			onMouseleave: X
+		}, [j.value || !l.destroyTooltipOnHide ? (m(), o(r, { key: 0 }, [l.arrow ? (m(), o("div", ee)) : a("", !0), s("div", { class: u(["b-tooltip__inner", l.tooltipInnerClass]) }, [g(e.$slots, "title", {}, () => [c(_(l.title), 1)])], 2)], 64)) : a("", !0)], 46, S)], 64));
+	}
+});
+//#endregion
+export { C as default };
+
+//# sourceMappingURL=design-system245.js.map

package/dist/design-system245.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system245.js","names":[],"sources":["../src/components/BTooltip/BTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BTooltipPlacement, BTooltipTrigger } from '@/types.ts';\nimport { computed, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  title,\n  trigger = BTooltipTrigger.Hover,\n  placement = BTooltipPlacement.TopCenter,\n  arrow = true,\n  color,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  destroyTooltipOnHide = false,\n  zIndex = 1070,\n  fresh = false,\n  modelValue = undefined,\n} = defineProps<{\n  /** The text shown inside the tooltip. Also accepts the `title` slot. */\n  title?: string;\n  /** The event that triggers the tooltip to open. */\n  trigger?: `${BTooltipTrigger}`;\n  /** Placement of the tooltip relative to the target element. */\n  placement?: `${BTooltipPlacement}`;\n  /** Whether the tooltip has an arrow pointing to the target. */\n  arrow?: boolean;\n  /** Custom background color of the tooltip. */\n  color?: string;\n  /** Delay in ms before showing on mouseenter. */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave. */\n  mouseLeaveDelay?: number;\n  /** Whether to destroy the tooltip DOM when hidden. */\n  destroyTooltipOnHide?: boolean;\n  /** z-index of the tooltip. */\n  zIndex?: number;\n  /** Force re-render when tooltip is shown. */\n  fresh?: boolean;\n  /** Whether to auto-adjust placement when tooltip overflows viewport. */\n  autoAdjustOverflow?: boolean;\n  /** Controlled visibility - bind with `v-model`. */\n  modelValue?: boolean;\n  /** Additional classes to apply to the toggle wrapper. */\n  toggleClass?: string;\n  /** Additional classes to apply to the tooltip content container. */\n  tooltipClass?: string;\n  /** Additional classes to apply to the tooltip inner element. */\n  tooltipInnerClass?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the tooltip visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\ndefineSlots<{\n  /** The target element that triggers the tooltip. */\n  default?(): unknown;\n  /** Overrides the `title` prop. */\n  title?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst tooltipId = useId();\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (fresh) return isOpen.value;\n  if (destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  tooltipRef.value?.showPopover();\n}\n\nfunction doClose() {\n  tooltipRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst tooltipRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n    toggleRef.value?.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Tooltip hover (keep tooltip open when hovering it)\n// ─────────────────────────────────────────────\nfunction onTooltipMouseEnter() {\n  if (trigger === BTooltipTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onTooltipMouseLeave() {\n  if (trigger === BTooltipTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  // Keyboard always attached\n  el.addEventListener('keydown', onKeydown);\n\n  switch (trigger) {\n    case BTooltipTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BTooltipTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BTooltipTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      tooltipRef.value?.showPopover();\n    } else {\n      tooltipRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-tooltip-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BTooltipPlacement.TopLeft]: 'top-left',\n    [BTooltipPlacement.TopCenter]: 'top-center',\n    [BTooltipPlacement.TopRight]: 'top-right',\n    [BTooltipPlacement.RightTop]: 'right-top',\n    [BTooltipPlacement.RightCenter]: 'right-center',\n    [BTooltipPlacement.RightBottom]: 'right-bottom',\n    [BTooltipPlacement.BottomRight]: 'bottom-right',\n    [BTooltipPlacement.BottomCenter]: 'bottom-center',\n    [BTooltipPlacement.BottomLeft]: 'bottom-left',\n    [BTooltipPlacement.LeftBottom]: 'left-bottom',\n    [BTooltipPlacement.LeftCenter]: 'left-center',\n    [BTooltipPlacement.LeftTop]: 'left-top',\n  };\n  return map[placement] ?? 'top-center';\n});\n\nconst customColorStyle = computed(() => {\n  if (!color) return undefined;\n  return {\n    '--b-tooltip-bg': color,\n    '--b-tooltip-arrow-color': color,\n  } as Record<string, string>;\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div\n    ref=\"toggleRef\"\n    :class=\"['b-tooltip__toggle', toggleClass]\"\n    :style=\"{ anchorName: anchorName }\"\n    :aria-describedby=\"isOpen ? tooltipId : undefined\"\n  >\n    <slot />\n  </div>\n\n  <div\n    ref=\"tooltipRef\"\n    popover=\"manual\"\n    :class=\"[\n      'b-tooltip__content',\n      placementClass,\n      { 'b-tooltip__content--no-arrow': !arrow },\n      tooltipClass,\n    ]\"\n    :style=\"[{ zIndex, positionAnchor: anchorName }, customColorStyle]\"\n    role=\"tooltip\"\n    :id=\"tooltipId\"\n    @toggle=\"onPopoverToggle\"\n    @mouseenter=\"onTooltipMouseEnter\"\n    @mouseleave=\"onTooltipMouseLeave\"\n  >\n    <template v-if=\"shouldRender || !destroyTooltipOnHide\">\n      <div v-if=\"arrow\" class=\"b-tooltip__arrow\" aria-hidden=\"true\" />\n      <div :class=\"['b-tooltip__inner', tooltipInnerClass]\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n:root {\n  --b-tooltip-bg: oklch(20% 0 0);\n  --b-tooltip-color: #fff;\n  --b-tooltip-font-size: 0.875rem;\n  --b-tooltip-line-height: 1.5;\n  --b-tooltip-padding-x: 0.5rem;\n  --b-tooltip-padding-y: 0.375rem;\n  --b-tooltip-border-radius: 0.375rem;\n  --b-tooltip-max-width: 250px;\n  --b-tooltip-arrow-size: 8px;\n  --b-tooltip-arrow-color: oklch(20% 0 0);\n  --b-tooltip-gap: 8px;\n  --b-tooltip-transition-duration: 200ms;\n  --b-tooltip-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] {\n  --b-tooltip-bg: oklch(35% 0 0);\n  --b-tooltip-arrow-color: oklch(35% 0 0);\n  --b-tooltip-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] {\n    --b-tooltip-bg: oklch(35% 0 0);\n    --b-tooltip-arrow-color: oklch(35% 0 0);\n    --b-tooltip-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-tooltip__toggle {\n  display: inline-block;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip content (popover)\n   ───────────────────────────────────────────── */\n.b-tooltip__content {\n  /* Reset popover defaults */\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  max-width: var(--b-tooltip-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  /* Animation and visibility */\n  transition:\n    display var(--b-tooltip-transition-duration),\n    opacity var(--b-tooltip-transition-duration);\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-tooltip-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-tooltip-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-tooltip-gap);\n  }\n\n  /* ── Placement: Right ── */\n  &.right-top {\n    inset: auto;\n    top: anchor(top);\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n  &.right-center {\n    inset: auto;\n    align-self: anchor-center;\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n  &.right-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-tooltip-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-tooltip-gap);\n  }\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-tooltip-gap);\n  }\n\n  /* ── Placement: Left ── */\n  &.left-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n  &.left-center {\n    inset: auto;\n    align-self: anchor-center;\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n  &.left-top {\n    inset: auto;\n    top: anchor(top);\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Inner content\n   ───────────────────────────────────────────── */\n.b-tooltip__inner {\n  background: var(--b-tooltip-bg);\n  color: var(--b-tooltip-color);\n  font-size: var(--b-tooltip-font-size);\n  line-height: var(--b-tooltip-line-height);\n  padding: var(--b-tooltip-padding-y) var(--b-tooltip-padding-x);\n  border-radius: var(--b-tooltip-border-radius);\n  box-shadow: var(--b-tooltip-shadow);\n  word-wrap: break-word;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tooltip__arrow {\n  position: absolute;\n  width: var(--b-tooltip-arrow-size);\n  height: var(--b-tooltip-arrow-size);\n  background: var(--b-tooltip-arrow-color);\n  transform: rotate(45deg);\n  pointer-events: none;\n}\n\n/* Arrow positioning for top placements */\n.b-tooltip__content.top-left .b-tooltip__arrow,\n.b-tooltip__content.top-center .b-tooltip__arrow,\n.b-tooltip__content.top-right .b-tooltip__arrow {\n  bottom: calc(var(--b-tooltip-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for bottom placements */\n.b-tooltip__content.bottom-left .b-tooltip__arrow,\n.b-tooltip__content.bottom-center .b-tooltip__arrow,\n.b-tooltip__content.bottom-right .b-tooltip__arrow {\n  top: calc(var(--b-tooltip-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for right placements */\n.b-tooltip__content.right-top .b-tooltip__arrow,\n.b-tooltip__content.right-center .b-tooltip__arrow,\n.b-tooltip__content.right-bottom .b-tooltip__arrow {\n  left: calc(var(--b-tooltip-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for left placements */\n.b-tooltip__content.left-top .b-tooltip__arrow,\n.b-tooltip__content.left-center .b-tooltip__arrow,\n.b-tooltip__content.left-bottom .b-tooltip__arrow {\n  right: calc(var(--b-tooltip-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks (auto-adjust overflow)\n   ───────────────────────────────────────────── */\n@position-try --b-tooltip-top-center {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-bottom-center {\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-right-center {\n  inset: auto;\n  align-self: anchor-center;\n  left: anchor(right);\n  margin-left: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-left-center {\n  inset: auto;\n  align-self: anchor-center;\n  right: anchor(left);\n  margin-right: var(--b-tooltip-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tooltip__content {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAO,GAiBP,EAAE,oBAAiB,GAAgB,EACnC,IAAY,GAAO,EAEnB,IAAe,EAAI,GAAM,EACzB,IAAS,QAAgB,EAAA,eAAe,KAAA,IAAyB,EAAa,QAA1B,EAAA,WAAiC,EAErF,IAAgB,EAAI,GAAM,EAC1B,IAAe,QACf,EAAA,SACA,EAAA,uBAA6B,EAAO,QACjC,EAAc,SAAS,EAAO,MACrC;AAEF,IAAM,IAAS,MAAQ;AACrB,GAAI,MAAK,EAAc,QAAQ;IAC/B;EAKF,IAAI,IAAkD,MAClD,IAAkD;EAEtD,SAAS,IAAc;AAKrB,GAJA,AAEE,OADA,aAAa,EAAU,EACX,OAEd,AAEE,OADA,aAAa,EAAU,EACX;;EAIhB,SAAS,EAAY,IAAQ,GAAG;AAC9B,MAAa,EACT,GAAO,UACP,IAAQ,IACV,IAAY,iBAAiB,GAAQ,EAAE,EAAM,GAE7C,GAAQ;;EAIZ,SAAS,EAAa,IAAQ,GAAG;AAC/B,MAAa,EACR,EAAO,UACR,IAAQ,IACV,IAAY,iBAAiB,GAAS,EAAE,EAAM,GAE9C,GAAS;;EAIb,SAAS,IAAS;AAChB,KAAW,OAAO,aAAa;;EAGjC,SAAS,IAAU;AACjB,KAAW,OAAO,aAAa;;EAGjC,SAAS,EAAQ,GAAc;AAM7B,GALI,EAAA,eAAe,KAAA,IAGjB,EAAa,QAAQ,IAFrB,EAAK,qBAAqB,EAAI,EAIhC,EAAK,cAAc,EAAI;;EAMzB,IAAM,KAAmB,EAAE,kBAA4B;AACrD,KAAQ,MAAa,OAAO;KAMxB,IAAa,EAA2B,KAAK,EAC7C,IAAY,EAA2B,KAAK;EAKlD,SAAS,IAAU;AACjB,GAAI,EAAO,QACT,GAAc,GAEd,GAAa;;EAIjB,SAAS,IAAe;AACtB,KAAY,EAAA,gBAAgB;;EAG9B,SAAS,IAAe;AACtB,KAAa,EAAA,gBAAgB;;EAG/B,SAAS,IAAY;AACnB,MAAa;;EAGf,SAAS,IAAa;AACpB,MAAc;;EAGhB,SAAS,EAAU,GAAsB;AACvC,GAAI,EAAM,QAAQ,YAAY,EAAO,UACnC,EAAM,gBAAgB,EACtB,GAAc,EACd,EAAU,OAAO,OAAO;;EAO5B,SAAS,IAAsB;AAC7B,GAAI,EAAA,YAAY,EAAgB,SAC9B,GAAa;;EAIjB,SAAS,IAAsB;AAC7B,GAAI,EAAA,YAAY,EAAgB,SAC9B,EAAa,EAAA,gBAAgB;;EAOjC,SAAS,IAAkB;GACzB,IAAM,IAAK,EAAU;AAChB,SAKL,SAFA,EAAG,iBAAiB,WAAW,EAAU,EAEjC,EAAA,SAAR;IACE,KAAK,EAAgB;AACnB,OAAG,iBAAiB,SAAS,EAAQ;AACrC;IACF,KAAK,EAAgB;AAEnB,KADA,EAAG,iBAAiB,WAAW,EAAU,EACzC,EAAG,iBAAiB,YAAY,EAAW;AAC3C;IACF,KAAK,EAAgB;IACrB;AAIE,KAHA,EAAG,iBAAiB,cAAc,EAAa,EAC/C,EAAG,iBAAiB,cAAc,EAAa,EAC/C,EAAG,iBAAiB,WAAW,EAAU,EACzC,EAAG,iBAAiB,YAAY,EAAW;AAC3C;;;EAIN,SAAS,IAAkB;GACzB,IAAM,IAAK,EAAU;AAChB,SAEL,EAAG,oBAAoB,WAAW,EAAU,EAC5C,EAAG,oBAAoB,SAAS,EAAQ,EACxC,EAAG,oBAAoB,WAAW,EAAU,EAC5C,EAAG,oBAAoB,YAAY,EAAW,EAC9C,EAAG,oBAAoB,cAAc,EAAa,EAClD,EAAG,oBAAoB,cAAc,EAAa;;AAqBpD,EAlBA,QAAgB;AACd,MAAiB;IACjB,EAEF,QAAsB;AAEpB,GADA,GAAiB,EACjB,GAAa;IACb,EAEF,QACQ,EAAA,eACA;AAEJ,GADA,GAAiB,EACjB,GAAiB;IAEpB,EAGD,QACQ,EAAA,aACL,MAAQ;AACH,SAAQ,KAAA,MACR,IACF,EAAW,OAAO,aAAa,GAE/B,EAAW,OAAO,aAAa;IAGpC;EAKD,IAAM,IAAa,QAAe,sBAAsB,EAAa,QAAQ,EAEvE,KAAiB,SACe;IACjC,EAAkB,UAAU;IAC5B,EAAkB,YAAY;IAC9B,EAAkB,WAAW;IAC7B,EAAkB,WAAW;IAC7B,EAAkB,cAAc;IAChC,EAAkB,cAAc;IAChC,EAAkB,cAAc;IAChC,EAAkB,eAAe;IACjC,EAAkB,aAAa;IAC/B,EAAkB,aAAa;IAC/B,EAAkB,aAAa;IAC/B,EAAkB,UAAU;GAC9B,EACU,EAAA,cAAc,aACzB,EAEI,KAAmB,QAAe;AACjC,SAAA,MACL,QAAO;IACL,kBAAkB,EAAA;IAClB,2BAA2B,EAAA;IAC5B;IACD;SAKF,EAAa;GAAE,MAAM;GAAQ,OAAO;GAAS,CAAC,8BAI5C,EAOM,OAAA;YANA;GAAJ,KAAI;GACH,OAAK,EAAA,CAAA,qBAAwB,EAAA,YAAW,CAAA;GACxC,OAAK,EAAA,EAAA,YAAgB,EAAA,OAAU,CAAA;GAC/B,oBAAkB,EAAA,QAAS,EAAA,EAAS,GAAG,KAAA;MAExC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,EAGV,EAwBM,OAAA;YAvBA;GAAJ,KAAI;GACJ,SAAQ;GACP,OAAK,EAAA;;IAAsC,GAAA;uCAAyD,EAAA,OAAK;IAAU,EAAA;;GAMnH,OAAK,EAAA,CAAA;IAAA,QAAK,EAAA;IAAM,gBAAkB,EAAA;IAAU,EAAI,GAAA,MAAgB,CAAA;GACjE,MAAK;GACJ,IAAI,EAAA,EAAS;GACb,UAAQ;GACR,cAAY;GACZ,cAAY;MAEG,EAAA,SAAY,CAAK,EAAA,wBAAA,GAAA,EAAjC,EAOW,GAAA,EAAA,KAAA,GAAA,EAAA,CANE,EAAA,SAAA,GAAA,EAAX,EAAgE,OAAhE,GAAgE,IAAA,EAAA,IAAA,GAAA,EAChE,EAIM,OAAA,EAJA,OAAK,EAAA,CAAA,oBAAuB,EAAA,kBAAiB,CAAA,EAAA,EAAA,CACjD,EAEO,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,GAAA"}