@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system228.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system228.js","names":[],"sources":["../src/components/BTimePicker/BTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nimport {\n  BTimePickerPlacement,\n  BTimePickerSize,\n  BTimePickerStatus,\n  BTimePickerVariant,\n  type BTimePickerDisabledTime,\n} from './types';\n\nconst {\n  size = BTimePickerSize.Medium,\n  variant = BTimePickerVariant.Outlined,\n  placeholder = 'Select time',\n  disabled = false,\n  inputReadOnly = false,\n  allowClear = true,\n  showNow = true,\n  use12Hours = false,\n  hourStep = 1,\n  minuteStep = 1,\n  secondStep = 1,\n  format,\n  placement: _placement = BTimePickerPlacement.BottomLeft,\n  status,\n  hideDisabledOptions = false,\n  needConfirm = true,\n  changeOnScroll = false,\n  showHour = true,\n  showMinute = true,\n  showSecond = true,\n  defaultOpen = false,\n  defaultValue,\n  open,\n  disabledTime,\n} = defineProps<{\n  /** Size of the input */\n  size?: `${BTimePickerSize}`;\n  /** Visual variant */\n  variant?: `${BTimePickerVariant}`;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Make input read-only (useful for touch devices) */\n  inputReadOnly?: boolean;\n  /** Show clear button */\n  allowClear?: boolean;\n  /** Show \"Now\" button in footer */\n  showNow?: boolean;\n  /** Use 12-hour format with AM/PM */\n  use12Hours?: boolean;\n  /** Hour selection step */\n  hourStep?: number;\n  /** Minute selection step */\n  minuteStep?: number;\n  /** Second selection step */\n  secondStep?: number;\n  /** Time format string (e.g. 'HH:mm:ss', 'hh:mm a') */\n  format?: string;\n  /** Popup placement */\n  placement?: `${BTimePickerPlacement}`;\n  /** Validation status */\n  status?: `${BTimePickerStatus}`;\n  /** Hide disabled time options from columns */\n  hideDisabledOptions?: boolean;\n  /** Require OK button confirmation before applying value */\n  needConfirm?: boolean;\n  /** Update value on scroll instead of click */\n  changeOnScroll?: boolean;\n  /** Show hour column */\n  showHour?: boolean;\n  /** Show minute column */\n  showMinute?: boolean;\n  /** Show second column */\n  showSecond?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Default value (uncontrolled) */\n  defaultValue?: Date;\n  /** Controlled open state */\n  open?: boolean;\n  /** Function returning disabled hours/minutes/seconds */\n  disabledTime?: () => BTimePickerDisabledTime;\n}>();\n\nconst model = defineModel<Date | null>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [time: Date | null, timeString: string];\n  openChange: [open: boolean];\n}>();\n\nconst inputEl = ref<HTMLInputElement | null>(null);\nconst panelEl = ref<HTMLElement | null>(null);\nconst hourColEl = ref<HTMLElement | null>(null);\nconst minuteColEl = ref<HTMLElement | null>(null);\nconst secondColEl = ref<HTMLElement | null>(null);\nconst ampmColEl = ref<HTMLElement | null>(null);\n\ndefineExpose({\n  focus: () => inputEl.value?.focus(),\n  blur: () => inputEl.value?.blur(),\n});\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-time-picker-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// State\n// ─────────────────────────────────────────────\nconst isOpen = ref(defaultOpen);\nconst isPanelOpen = ref(open !== undefined ? !!open : defaultOpen);\nconst internalValue = ref<Date | null>(defaultValue ?? null);\nconst pendingHour = ref<number | null>(null);\nconst pendingMinute = ref<number | null>(null);\nconst pendingSecond = ref<number | null>(null);\nconst pendingAmpm = ref<'AM' | 'PM' | null>(null);\nconst inputText = ref('');\nconst focusedColumn = ref<'hour' | 'minute' | 'second' | 'ampm'>('hour');\n\nconst selectedTime = computed({\n  get: () => model.value ?? internalValue.value,\n  set: (val) => {\n    internalValue.value = val;\n    model.value = val;\n  },\n});\n\n// ─────────────────────────────────────────────\n// Format\n// ─────────────────────────────────────────────\nconst activeFormat = computed(() => {\n  if (format) return format;\n  const parts: string[] = [];\n  if (showHour) parts.push(use12Hours ? 'hh' : 'HH');\n  if (showMinute) parts.push('mm');\n  if (showSecond) parts.push('ss');\n  const base = parts.join(':');\n  return use12Hours ? `${base} A` : base;\n});\n\nfunction pad(n: number): string {\n  return String(n).padStart(2, '0');\n}\n\nfunction formatTime(d: Date | null): string {\n  if (!d) return '';\n  const h = d.getHours();\n  const m = d.getMinutes();\n  const s = d.getSeconds();\n  const ampm = h >= 12 ? 'PM' : 'AM';\n\n  let result = activeFormat.value;\n  if (use12Hours) {\n    const h12 = h % 12 || 12;\n    result = result.replace('hh', pad(h12));\n    result = result.replace('h', String(h12));\n    result = result.replace('A', ampm);\n    result = result.replace('a', ampm.toLowerCase());\n  } else {\n    result = result.replace('HH', pad(h));\n    result = result.replace('H', String(h));\n  }\n  result = result.replace('mm', pad(m));\n  result = result.replace('ss', pad(s));\n  return result;\n}\n\nfunction parseTimeString(str: string): Date | null {\n  if (!str.trim()) return null;\n  const timeRegex12 = /(\\d{1,2}):(\\d{2})(?::(\\d{2}))?\\s*(AM|PM|am|pm)?/;\n  const match = str.match(timeRegex12);\n  if (!match) return null;\n\n  let h = parseInt(match[1], 10);\n  const m = parseInt(match[2], 10);\n  const s = match[3] ? parseInt(match[3], 10) : 0;\n  const period = match[4]?.toUpperCase();\n\n  if (use12Hours && period) {\n    if (period === 'PM' && h < 12) h += 12;\n    if (period === 'AM' && h === 12) h = 0;\n  }\n\n  if (h < 0 || h > 23 || m < 0 || m > 59 || s < 0 || s > 59) return null;\n\n  const d = new Date();\n  d.setHours(h, m, s, 0);\n  return d;\n}\n\n// ─────────────────────────────────────────────\n// Disabled time logic\n// ─────────────────────────────────────────────\nconst disabledHours = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  return dt.disabledHours?.() ?? [];\n});\n\nconst disabledMinutes = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  return dt.disabledMinutes?.(h) ?? [];\n});\n\nconst disabledSeconds = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  const m = pendingMinute.value ?? selectedTime.value?.getMinutes() ?? 0;\n  return dt.disabledSeconds?.(h, m) ?? [];\n});\n\n// ─────────────────────────────────────────────\n// Column data\n// ─────────────────────────────────────────────\nconst hours = computed(() => {\n  const list: number[] = [];\n  if (use12Hours) {\n    for (let i = 1; i <= 12; i += hourStep) list.push(i);\n  } else {\n    for (let i = 0; i < 24; i += hourStep) list.push(i);\n  }\n  if (hideDisabledOptions) {\n    return list.filter((h) => !disabledHours.value.includes(use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h));\n  }\n  return list;\n});\n\nconst minutes = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += minuteStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((m) => !disabledMinutes.value.includes(m));\n  }\n  return list;\n});\n\nconst seconds = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += secondStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((s) => !disabledSeconds.value.includes(s));\n  }\n  return list;\n});\n\nfunction to24Hour(h12: number, period: 'AM' | 'PM'): number {\n  if (period === 'AM') return h12 === 12 ? 0 : h12;\n  return h12 === 12 ? 12 : h12 + 12;\n}\n\nfunction to12Hour(h24: number): { hour: number; period: 'AM' | 'PM' } {\n  const period: 'AM' | 'PM' = h24 >= 12 ? 'PM' : 'AM';\n  const hour = h24 % 12 || 12;\n  return { hour, period };\n}\n\n// ─────────────────────────────────────────────\n// Panel open/close\n// ─────────────────────────────────────────────\nfunction openPanel() {\n  if (disabled) return;\n  isOpen.value = true;\n  isPanelOpen.value = true;\n  emit('openChange', true);\n  panelEl.value?.showPopover?.();\n  syncPendingFromValue();\n  nextTick(() => scrollToSelected());\n}\n\nfunction closePanel() {\n  isOpen.value = false;\n  isPanelOpen.value = false;\n  emit('openChange', false);\n  panelEl.value?.hidePopover?.();\n  inputEl.value?.focus();\n}\n\nfunction togglePanel() {\n  if (isPanelOpen.value) closePanel();\n  else openPanel();\n}\n\nfunction handlePopoverToggle(e: Event) {\n  const toggleEvent = e as ToggleEvent;\n  const nowOpen = toggleEvent.newState === 'open';\n  isOpen.value = nowOpen;\n  isPanelOpen.value = nowOpen;\n  if (!nowOpen) emit('openChange', false);\n}\n\n// ─────────────────────────────────────────────\n// Sync pending state\n// ─────────────────────────────────────────────\nfunction syncPendingFromValue() {\n  const t = selectedTime.value;\n  if (t) {\n    if (use12Hours) {\n      const { hour, period } = to12Hour(t.getHours());\n      pendingHour.value = hour;\n      pendingAmpm.value = period;\n    } else {\n      pendingHour.value = t.getHours();\n    }\n    pendingMinute.value = t.getMinutes();\n    pendingSecond.value = t.getSeconds();\n  } else {\n    pendingHour.value = null;\n    pendingMinute.value = null;\n    pendingSecond.value = null;\n    pendingAmpm.value = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nfunction selectHour(h: number) {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  if (disabledHours.value.includes(h24)) return;\n  pendingHour.value = h;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectMinute(m: number) {\n  if (disabledMinutes.value.includes(m)) return;\n  pendingMinute.value = m;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectSecond(s: number) {\n  if (disabledSeconds.value.includes(s)) return;\n  pendingSecond.value = s;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectAmpm(val: 'AM' | 'PM') {\n  pendingAmpm.value = val;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction applyPendingIfComplete() {\n  if (pendingHour.value !== null && pendingMinute.value !== null) {\n    if (showSecond && pendingSecond.value === null) return;\n    if (use12Hours && pendingAmpm.value === null) return;\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction applyPending() {\n  const h = pendingHour.value ?? 0;\n  const m = pendingMinute.value ?? 0;\n  const s = pendingSecond.value ?? 0;\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n\n  const d = new Date();\n  d.setHours(h24, m, s, 0);\n  selectedTime.value = d;\n  inputText.value = formatTime(d);\n  emit('change', d, formatTime(d));\n}\n\nfunction handleOk() {\n  applyPending();\n  closePanel();\n}\n\nfunction handleNow() {\n  const now = new Date();\n  if (use12Hours) {\n    const { hour, period } = to12Hour(now.getHours());\n    pendingHour.value = hour;\n    pendingAmpm.value = period;\n  } else {\n    pendingHour.value = now.getHours();\n  }\n  pendingMinute.value = now.getMinutes();\n  pendingSecond.value = now.getSeconds();\n  nextTick(() => scrollToSelected());\n  if (!needConfirm) {\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction handleClear(e: Event) {\n  e.stopPropagation();\n  selectedTime.value = null;\n  inputText.value = '';\n  pendingHour.value = null;\n  pendingMinute.value = null;\n  pendingSecond.value = null;\n  pendingAmpm.value = null;\n  emit('change', null, '');\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nfunction handleInputChange(e: Event) {\n  const val = (e.target as HTMLInputElement).value;\n  inputText.value = val;\n}\n\nfunction handleInputBlur() {\n  if (!isPanelOpen.value) {\n    const parsed = parseTimeString(inputText.value);\n    if (parsed) {\n      selectedTime.value = parsed;\n      inputText.value = formatTime(parsed);\n      emit('change', parsed, formatTime(parsed));\n    } else if (inputText.value === '') {\n      selectedTime.value = null;\n      emit('change', null, '');\n    } else {\n      inputText.value = formatTime(selectedTime.value);\n    }\n  }\n}\n\nfunction handleInputKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') {\n    if (!isPanelOpen.value) {\n      e.preventDefault();\n      openPanel();\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      const parsed = parseTimeString(inputText.value);\n      if (parsed) {\n        selectedTime.value = parsed;\n        inputText.value = formatTime(parsed);\n        emit('change', parsed, formatTime(parsed));\n      }\n      closePanel();\n    }\n  } else if (e.key === 'Escape') {\n    if (isPanelOpen.value) {\n      e.preventDefault();\n      closePanel();\n    }\n  }\n}\n\n// ─────────────────────────────────────────────\n// Panel keyboard navigation\n// ─────────────────────────────────────────────\nfunction handlePanelKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    closePanel();\n    return;\n  }\n\n  if (e.key === 'Tab') {\n    const columns: ('hour' | 'minute' | 'second' | 'ampm')[] = [];\n    if (showHour) columns.push('hour');\n    if (showMinute) columns.push('minute');\n    if (showSecond) columns.push('second');\n    if (use12Hours) columns.push('ampm');\n\n    const idx = columns.indexOf(focusedColumn.value);\n    if (e.shiftKey) {\n      if (idx > 0) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx - 1];\n      }\n    } else {\n      if (idx < columns.length - 1) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx + 1];\n      }\n    }\n    return;\n  }\n\n  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n    e.preventDefault();\n    const delta = e.key === 'ArrowUp' ? -1 : 1;\n    adjustFocusedColumn(delta);\n    return;\n  }\n\n  if (e.key === 'Enter') {\n    e.preventDefault();\n    handleOk();\n  }\n}\n\nfunction adjustFocusedColumn(delta: number) {\n  if (focusedColumn.value === 'hour') {\n    const list = hours.value;\n    const current = pendingHour.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectHour(next);\n    scrollColumnTo(hourColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'minute') {\n    const list = minutes.value;\n    const current = pendingMinute.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectMinute(next);\n    scrollColumnTo(minuteColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'second') {\n    const list = seconds.value;\n    const current = pendingSecond.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectSecond(next);\n    scrollColumnTo(secondColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'ampm') {\n    const val = pendingAmpm.value === 'AM' ? 'PM' : 'AM';\n    selectAmpm(val);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Scroll helpers\n// ─────────────────────────────────────────────\nfunction scrollColumnTo(col: HTMLElement | null, idx: number) {\n  if (!col || !col.scrollTo) return;\n  const cellHeight = 28;\n  col.scrollTo({ top: idx * cellHeight, behavior: 'smooth' });\n}\n\nfunction scrollToSelected() {\n  if (pendingHour.value !== null) {\n    const idx = hours.value.indexOf(pendingHour.value);\n    if (idx >= 0) scrollColumnTo(hourColEl.value, idx);\n  }\n  if (pendingMinute.value !== null) {\n    const idx = minutes.value.indexOf(pendingMinute.value);\n    if (idx >= 0) scrollColumnTo(minuteColEl.value, idx);\n  }\n  if (pendingSecond.value !== null && showSecond) {\n    const idx = seconds.value.indexOf(pendingSecond.value);\n    if (idx >= 0) scrollColumnTo(secondColEl.value, idx);\n  }\n  if (pendingAmpm.value && use12Hours) {\n    const idx = pendingAmpm.value === 'AM' ? 0 : 1;\n    scrollColumnTo(ampmColEl.value, idx);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside\n// ─────────────────────────────────────────────\nfunction handleClickOutside(e: MouseEvent) {\n  if (!isPanelOpen.value) return;\n  const target = e.target as Node;\n  if (panelEl.value?.contains(target)) return;\n  if (inputEl.value?.parentElement?.contains(target)) return;\n  closePanel();\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', handleClickOutside);\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', handleClickOutside);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  () => open,\n  (val) => {\n    if (val !== undefined) {\n      if (val) openPanel();\n      else closePanel();\n    }\n  },\n);\n\nwatch(selectedTime, (val) => {\n  inputText.value = formatTime(val);\n});\n\n// Init display\ninputText.value = formatTime(selectedTime.value);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-time-picker',\n  `b-time-picker--${size}`,\n  `b-time-picker--${variant}`,\n  {\n    'b-time-picker--disabled': disabled,\n    'b-time-picker--open': isPanelOpen.value,\n    [`b-time-picker--${status}`]: !!status,\n  },\n]);\n\nconst isHourDisabled = (h: number) => {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  return disabledHours.value.includes(h24);\n};\nconst isMinuteDisabled = (m: number) => disabledMinutes.value.includes(m);\nconst isSecondDisabled = (s: number) => disabledSeconds.value.includes(s);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <div\n      class=\"b-time-picker__input-wrap\"\n      :style=\"{ anchorName }\"\n      @click=\"togglePanel\"\n    >\n      <input\n        :id=\"`b-time-picker-input-${componentUID}`\"\n        ref=\"inputEl\"\n        class=\"b-time-picker__input\"\n        type=\"text\"\n        role=\"combobox\"\n        :aria-expanded=\"isPanelOpen\"\n        aria-haspopup=\"dialog\"\n        :aria-controls=\"isPanelOpen ? `b-time-picker-panel-${componentUID}` : undefined\"\n        :aria-describedby=\"status ? `b-time-picker-status-${componentUID}` : undefined\"\n        :aria-label=\"placeholder\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"inputReadOnly\"\n        :value=\"inputText\"\n        autocomplete=\"off\"\n        @input=\"handleInputChange\"\n        @blur=\"handleInputBlur\"\n        @keydown=\"handleInputKeydown\"\n      />\n      <span class=\"b-time-picker__suffix\">\n        <svg\n          v-if=\"!allowClear || !selectedTime\"\n          class=\"b-time-picker__icon\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <polyline points=\"12 6 12 12 16 14\" />\n        </svg>\n        <button\n          v-else\n          class=\"b-time-picker__clear\"\n          type=\"button\"\n          aria-label=\"Clear time\"\n          tabindex=\"-1\"\n          @click=\"handleClear\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\n            <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\n          </svg>\n        </button>\n      </span>\n      <span\n        v-if=\"status\"\n        :id=\"`b-time-picker-status-${componentUID}`\"\n        class=\"b-time-picker__status-text\"\n        aria-live=\"polite\"\n      >\n        {{ status }}\n      </span>\n    </div>\n\n    <div\n      :id=\"`b-time-picker-panel-${componentUID}`\"\n      ref=\"panelEl\"\n      class=\"b-time-picker__panel\"\n      popover\n      role=\"dialog\"\n      :aria-label=\"'Time picker'\"\n      :aria-modal=\"true\"\n      :style=\"{ positionAnchor: anchorName }\"\n      @toggle=\"handlePopoverToggle\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <div class=\"b-time-picker__columns\" role=\"group\" aria-label=\"Time selection columns\">\n        <!-- Hour Column -->\n        <div\n          v-if=\"showHour\"\n          ref=\"hourColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Hours'\"\n          :aria-activedescendant=\"pendingHour !== null ? `b-time-picker-hour-${pendingHour}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"h in hours\"\n            :id=\"`b-time-picker-hour-${h}-${componentUID}`\"\n            :key=\"h\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingHour === h,\n              'b-time-picker__cell--disabled': isHourDisabled(h),\n              'b-time-picker__cell--focused': focusedColumn === 'hour' && pendingHour === h,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingHour === h\"\n            :aria-disabled=\"isHourDisabled(h)\"\n            @click=\"selectHour(h)\"\n          >\n            {{ pad(h) }}\n          </div>\n        </div>\n\n        <!-- Minute Column -->\n        <div\n          v-if=\"showMinute\"\n          ref=\"minuteColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Minutes'\"\n          :aria-activedescendant=\"pendingMinute !== null ? `b-time-picker-minute-${pendingMinute}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"m in minutes\"\n            :id=\"`b-time-picker-minute-${m}-${componentUID}`\"\n            :key=\"m\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingMinute === m,\n              'b-time-picker__cell--disabled': isMinuteDisabled(m),\n              'b-time-picker__cell--focused': focusedColumn === 'minute' && pendingMinute === m,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingMinute === m\"\n            :aria-disabled=\"isMinuteDisabled(m)\"\n            @click=\"selectMinute(m)\"\n          >\n            {{ pad(m) }}\n          </div>\n        </div>\n\n        <!-- Second Column -->\n        <div\n          v-if=\"showSecond\"\n          ref=\"secondColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Seconds'\"\n          :aria-activedescendant=\"pendingSecond !== null ? `b-time-picker-second-${pendingSecond}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"s in seconds\"\n            :id=\"`b-time-picker-second-${s}-${componentUID}`\"\n            :key=\"s\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingSecond === s,\n              'b-time-picker__cell--disabled': isSecondDisabled(s),\n              'b-time-picker__cell--focused': focusedColumn === 'second' && pendingSecond === s,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingSecond === s\"\n            :aria-disabled=\"isSecondDisabled(s)\"\n            @click=\"selectSecond(s)\"\n          >\n            {{ pad(s) }}\n          </div>\n        </div>\n\n        <!-- AM/PM Column -->\n        <div\n          v-if=\"use12Hours\"\n          ref=\"ampmColEl\"\n          class=\"b-time-picker__column b-time-picker__column--ampm\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'AM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'AM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'AM'\"\n            @click=\"selectAmpm('AM')\"\n          >\n            AM\n          </div>\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'PM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'PM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'PM'\"\n            @click=\"selectAmpm('PM')\"\n          >\n            PM\n          </div>\n        </div>\n      </div>\n\n      <div v-if=\"needConfirm || showNow\" class=\"b-time-picker__footer\">\n        <button\n          v-if=\"showNow\"\n          class=\"b-time-picker__now-btn\"\n          type=\"button\"\n          @click=\"handleNow\"\n        >\n          Now\n        </button>\n        <button\n          v-if=\"needConfirm\"\n          class=\"b-time-picker__ok-btn\"\n          type=\"button\"\n          @click=\"handleOk\"\n        >\n          OK\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-time-picker {\n  --b-time-picker-input-font-size: 14px;\n  --b-time-picker-input-font-size-lg: 16px;\n  --b-time-picker-input-font-size-sm: 14px;\n  --b-time-picker-padding-block: 4px;\n  --b-time-picker-padding-block-lg: 7px;\n  --b-time-picker-padding-block-sm: 0px;\n  --b-time-picker-padding-inline: 11px;\n  --b-time-picker-padding-inline-lg: 11px;\n  --b-time-picker-padding-inline-sm: 7px;\n  --b-time-picker-border-color: #d9d9d9;\n  --b-time-picker-hover-border-color: #4096ff;\n  --b-time-picker-active-border-color: #1677ff;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-time-picker-bg: #ffffff;\n  --b-time-picker-hover-bg: #ffffff;\n  --b-time-picker-active-bg: #ffffff;\n  --b-time-picker-text-color: rgba(0, 0, 0, 0.88);\n  --b-time-picker-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-icon-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-time-picker-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-panel-bg: #ffffff;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-time-picker-cell-height: 28px;\n  --b-time-picker-cell-width: 56px;\n  --b-time-picker-cell-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-selected-bg: #e6f4ff;\n  --b-time-picker-cell-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-column-height: 224px;\n  --b-time-picker-column-width: 56px;\n  --b-time-picker-footer-bg: #ffffff;\n  --b-time-picker-border-radius: 6px;\n  --b-time-picker-panel-border-radius: 8px;\n  --b-time-picker-transition-duration: 0.2s;\n  --b-time-picker-z-index-popup: 1050;\n\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  max-width: 200px;\n}\n\n/* ──── Input Wrap ──── */\n.b-time-picker__input-wrap {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  background: var(--b-time-picker-bg);\n  border: 1px solid var(--b-time-picker-border-color);\n  border-radius: var(--b-time-picker-border-radius);\n  padding: var(--b-time-picker-padding-block) var(--b-time-picker-padding-inline);\n  cursor: pointer;\n  transition:\n    border-color var(--b-time-picker-transition-duration),\n    box-shadow var(--b-time-picker-transition-duration),\n    background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__input-wrap:hover {\n  border-color: var(--b-time-picker-hover-border-color);\n  background: var(--b-time-picker-hover-bg);\n}\n\n.b-time-picker--open .b-time-picker__input-wrap {\n  border-color: var(--b-time-picker-active-border-color);\n  box-shadow: var(--b-time-picker-active-shadow);\n  background: var(--b-time-picker-active-bg);\n}\n\n/* ──── Size Variants ──── */\n.b-time-picker--sm .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-sm) var(--b-time-picker-padding-inline-sm);\n}\n\n.b-time-picker--sm .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-sm);\n}\n\n.b-time-picker--lg .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-lg) var(--b-time-picker-padding-inline-lg);\n}\n\n.b-time-picker--lg .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-lg);\n}\n\n/* ──── Variant Styles ──── */\n.b-time-picker--filled .b-time-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: transparent;\n}\n\n.b-time-picker--filled .b-time-picker__input-wrap:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.b-time-picker--borderless .b-time-picker__input-wrap {\n  border-color: transparent;\n  background: transparent;\n  box-shadow: none;\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap {\n  border-radius: 0;\n  border: none;\n  border-bottom: 1px solid var(--b-time-picker-border-color);\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap:hover {\n  border-bottom-color: var(--b-time-picker-hover-border-color);\n}\n\n.b-time-picker--underlined.b-time-picker--open .b-time-picker__input-wrap {\n  border-bottom-color: var(--b-time-picker-active-border-color);\n  box-shadow: none;\n}\n\n/* ──── Status ──── */\n.b-time-picker--error .b-time-picker__input-wrap {\n  border-color: #ff4d4f;\n}\n\n.b-time-picker--error.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-error-active-shadow);\n}\n\n.b-time-picker--warning .b-time-picker__input-wrap {\n  border-color: #faad14;\n}\n\n.b-time-picker--warning.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-warning-active-shadow);\n}\n\n/* ──── Disabled ──── */\n.b-time-picker--disabled .b-time-picker__input-wrap {\n  background: var(--b-time-picker-disabled-bg);\n  border-color: var(--b-time-picker-border-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.b-time-picker--disabled .b-time-picker__input {\n  color: var(--b-time-picker-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ──── Input ──── */\n.b-time-picker__input {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: var(--b-time-picker-input-font-size);\n  color: var(--b-time-picker-text-color);\n  line-height: 1.5;\n  padding: 0;\n  min-width: 0;\n}\n\n.b-time-picker__input::placeholder {\n  color: var(--b-time-picker-placeholder-color);\n}\n\n/* ──── Suffix / Icons ──── */\n.b-time-picker__suffix {\n  display: flex;\n  align-items: center;\n  margin-left: 4px;\n  flex-shrink: 0;\n}\n\n.b-time-picker__icon {\n  width: 14px;\n  height: 14px;\n  color: var(--b-time-picker-icon-color);\n}\n\n.b-time-picker__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--b-time-picker-clear-color);\n  transition: color var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__clear:hover {\n  color: var(--b-time-picker-clear-hover-color);\n}\n\n.b-time-picker__clear svg {\n  width: 14px;\n  height: 14px;\n}\n\n.b-time-picker__status-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n}\n\n/* ──── Panel ──── */\n.b-time-picker__panel {\n  position: absolute;\n  position-anchor: var(--b-time-picker-anchor);\n  inset: unset;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin: 0;\n  margin-top: 4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--b-time-picker-panel-border-radius);\n  background: var(--b-time-picker-panel-bg);\n  box-shadow: var(--b-time-picker-panel-shadow);\n  z-index: var(--b-time-picker-z-index-popup);\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-4px);\n  transition:\n    opacity var(--b-time-picker-transition-duration) ease,\n    transform var(--b-time-picker-transition-duration) ease;\n}\n\n.b-time-picker__panel:popover-open {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n@starting-style {\n  .b-time-picker__panel:popover-open {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n/* ──── Columns ──── */\n.b-time-picker__columns {\n  display: flex;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.b-time-picker__column {\n  width: var(--b-time-picker-column-width);\n  height: var(--b-time-picker-column-height);\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-right: 1px solid #f0f0f0;\n  scroll-behavior: smooth;\n  scrollbar-width: thin;\n}\n\n.b-time-picker__column:last-child {\n  border-right: none;\n}\n\n/* ──── Cells ──── */\n.b-time-picker__cell {\n  height: var(--b-time-picker-cell-height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--b-time-picker-text-color);\n  transition: background var(--b-time-picker-transition-duration);\n  user-select: none;\n}\n\n.b-time-picker__cell:hover {\n  background: var(--b-time-picker-cell-hover-bg);\n}\n\n.b-time-picker__cell--selected {\n  background: var(--b-time-picker-cell-selected-bg);\n  font-weight: 600;\n}\n\n.b-time-picker__cell--focused {\n  outline: 2px solid var(--b-time-picker-active-border-color);\n  outline-offset: -2px;\n}\n\n.b-time-picker__cell--disabled {\n  color: var(--b-time-picker-cell-disabled-color);\n  background: var(--b-time-picker-cell-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-time-picker__cell--disabled:hover {\n  background: var(--b-time-picker-cell-disabled-bg);\n}\n\n/* ──── Footer ──── */\n.b-time-picker__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 8px;\n  background: var(--b-time-picker-footer-bg);\n}\n\n.b-time-picker__now-btn {\n  border: none;\n  background: none;\n  color: var(--b-time-picker-active-border-color);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__now-btn:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.b-time-picker__ok-btn {\n  border: none;\n  background: var(--b-time-picker-active-border-color);\n  color: #fff;\n  cursor: pointer;\n  font-size: 14px;\n  padding: 2px 12px;\n  border-radius: 4px;\n  font-weight: 500;\n  line-height: 1.5;\n  transition:\n    background var(--b-time-picker-transition-duration),\n    opacity var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__ok-btn:hover {\n  opacity: 0.85;\n}\n\n/* ──── Placement ──── */\n.b-time-picker--bottom-right .b-time-picker__panel {\n  left: unset;\n  right: anchor(right);\n}\n\n.b-time-picker--top-left .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n.b-time-picker--top-right .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  left: unset;\n  right: anchor(right);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n/* ──── Dark Mode ──── */\n[data-prefers-color='dark'] .b-time-picker {\n  --b-time-picker-bg: #141414;\n  --b-time-picker-hover-bg: #141414;\n  --b-time-picker-active-bg: #141414;\n  --b-time-picker-border-color: #424242;\n  --b-time-picker-hover-border-color: #165dff;\n  --b-time-picker-active-border-color: #1668dc;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n  --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n  --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-panel-bg: #1f1f1f;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-cell-selected-bg: #111a2c;\n  --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-footer-bg: #1f1f1f;\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-time-picker {\n    --b-time-picker-bg: #141414;\n    --b-time-picker-hover-bg: #141414;\n    --b-time-picker-active-bg: #141414;\n    --b-time-picker-border-color: #424242;\n    --b-time-picker-hover-border-color: #165dff;\n    --b-time-picker-active-border-color: #1668dc;\n    --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n    --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n    --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-panel-bg: #1f1f1f;\n    --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-cell-selected-bg: #111a2c;\n    --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n    --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-footer-bg: #1f1f1f;\n    --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n    --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n  }\n}\n\n/* ──── Reduced Motion ──── */\n@media (prefers-reduced-motion: reduce) {\n  .b-time-picker,\n  .b-time-picker * {\n    --b-time-picker-transition-duration: 0ms;\n    transition-duration: 0ms !important;\n    animation-duration: 0ms !important;\n  }\n\n  .b-time-picker__column {\n    scroll-behavior: auto;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system230.js

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

package/dist/design-system230.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system230.js","names":[],"sources":["../src/components/BTimePicker/BTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nimport {\n  BTimePickerPlacement,\n  BTimePickerSize,\n  BTimePickerStatus,\n  BTimePickerVariant,\n  type BTimePickerDisabledTime,\n} from './types';\n\nconst {\n  size = BTimePickerSize.Medium,\n  variant = BTimePickerVariant.Outlined,\n  placeholder = 'Select time',\n  disabled = false,\n  inputReadOnly = false,\n  allowClear = true,\n  showNow = true,\n  use12Hours = false,\n  hourStep = 1,\n  minuteStep = 1,\n  secondStep = 1,\n  format,\n  placement: _placement = BTimePickerPlacement.BottomLeft,\n  status,\n  hideDisabledOptions = false,\n  needConfirm = true,\n  changeOnScroll = false,\n  showHour = true,\n  showMinute = true,\n  showSecond = true,\n  defaultOpen = false,\n  defaultValue,\n  open,\n  disabledTime,\n} = defineProps<{\n  /** Size of the input */\n  size?: `${BTimePickerSize}`;\n  /** Visual variant */\n  variant?: `${BTimePickerVariant}`;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Make input read-only (useful for touch devices) */\n  inputReadOnly?: boolean;\n  /** Show clear button */\n  allowClear?: boolean;\n  /** Show \"Now\" button in footer */\n  showNow?: boolean;\n  /** Use 12-hour format with AM/PM */\n  use12Hours?: boolean;\n  /** Hour selection step */\n  hourStep?: number;\n  /** Minute selection step */\n  minuteStep?: number;\n  /** Second selection step */\n  secondStep?: number;\n  /** Time format string (e.g. 'HH:mm:ss', 'hh:mm a') */\n  format?: string;\n  /** Popup placement */\n  placement?: `${BTimePickerPlacement}`;\n  /** Validation status */\n  status?: `${BTimePickerStatus}`;\n  /** Hide disabled time options from columns */\n  hideDisabledOptions?: boolean;\n  /** Require OK button confirmation before applying value */\n  needConfirm?: boolean;\n  /** Update value on scroll instead of click */\n  changeOnScroll?: boolean;\n  /** Show hour column */\n  showHour?: boolean;\n  /** Show minute column */\n  showMinute?: boolean;\n  /** Show second column */\n  showSecond?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Default value (uncontrolled) */\n  defaultValue?: Date;\n  /** Controlled open state */\n  open?: boolean;\n  /** Function returning disabled hours/minutes/seconds */\n  disabledTime?: () => BTimePickerDisabledTime;\n}>();\n\nconst model = defineModel<Date | null>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [time: Date | null, timeString: string];\n  openChange: [open: boolean];\n}>();\n\nconst inputEl = ref<HTMLInputElement | null>(null);\nconst panelEl = ref<HTMLElement | null>(null);\nconst hourColEl = ref<HTMLElement | null>(null);\nconst minuteColEl = ref<HTMLElement | null>(null);\nconst secondColEl = ref<HTMLElement | null>(null);\nconst ampmColEl = ref<HTMLElement | null>(null);\n\ndefineExpose({\n  focus: () => inputEl.value?.focus(),\n  blur: () => inputEl.value?.blur(),\n});\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-time-picker-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// State\n// ─────────────────────────────────────────────\nconst isOpen = ref(defaultOpen);\nconst isPanelOpen = ref(open !== undefined ? !!open : defaultOpen);\nconst internalValue = ref<Date | null>(defaultValue ?? null);\nconst pendingHour = ref<number | null>(null);\nconst pendingMinute = ref<number | null>(null);\nconst pendingSecond = ref<number | null>(null);\nconst pendingAmpm = ref<'AM' | 'PM' | null>(null);\nconst inputText = ref('');\nconst focusedColumn = ref<'hour' | 'minute' | 'second' | 'ampm'>('hour');\n\nconst selectedTime = computed({\n  get: () => model.value ?? internalValue.value,\n  set: (val) => {\n    internalValue.value = val;\n    model.value = val;\n  },\n});\n\n// ─────────────────────────────────────────────\n// Format\n// ─────────────────────────────────────────────\nconst activeFormat = computed(() => {\n  if (format) return format;\n  const parts: string[] = [];\n  if (showHour) parts.push(use12Hours ? 'hh' : 'HH');\n  if (showMinute) parts.push('mm');\n  if (showSecond) parts.push('ss');\n  const base = parts.join(':');\n  return use12Hours ? `${base} A` : base;\n});\n\nfunction pad(n: number): string {\n  return String(n).padStart(2, '0');\n}\n\nfunction formatTime(d: Date | null): string {\n  if (!d) return '';\n  const h = d.getHours();\n  const m = d.getMinutes();\n  const s = d.getSeconds();\n  const ampm = h >= 12 ? 'PM' : 'AM';\n\n  let result = activeFormat.value;\n  if (use12Hours) {\n    const h12 = h % 12 || 12;\n    result = result.replace('hh', pad(h12));\n    result = result.replace('h', String(h12));\n    result = result.replace('A', ampm);\n    result = result.replace('a', ampm.toLowerCase());\n  } else {\n    result = result.replace('HH', pad(h));\n    result = result.replace('H', String(h));\n  }\n  result = result.replace('mm', pad(m));\n  result = result.replace('ss', pad(s));\n  return result;\n}\n\nfunction parseTimeString(str: string): Date | null {\n  if (!str.trim()) return null;\n  const timeRegex12 = /(\\d{1,2}):(\\d{2})(?::(\\d{2}))?\\s*(AM|PM|am|pm)?/;\n  const match = str.match(timeRegex12);\n  if (!match) return null;\n\n  let h = parseInt(match[1], 10);\n  const m = parseInt(match[2], 10);\n  const s = match[3] ? parseInt(match[3], 10) : 0;\n  const period = match[4]?.toUpperCase();\n\n  if (use12Hours && period) {\n    if (period === 'PM' && h < 12) h += 12;\n    if (period === 'AM' && h === 12) h = 0;\n  }\n\n  if (h < 0 || h > 23 || m < 0 || m > 59 || s < 0 || s > 59) return null;\n\n  const d = new Date();\n  d.setHours(h, m, s, 0);\n  return d;\n}\n\n// ─────────────────────────────────────────────\n// Disabled time logic\n// ─────────────────────────────────────────────\nconst disabledHours = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  return dt.disabledHours?.() ?? [];\n});\n\nconst disabledMinutes = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  return dt.disabledMinutes?.(h) ?? [];\n});\n\nconst disabledSeconds = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  const m = pendingMinute.value ?? selectedTime.value?.getMinutes() ?? 0;\n  return dt.disabledSeconds?.(h, m) ?? [];\n});\n\n// ─────────────────────────────────────────────\n// Column data\n// ─────────────────────────────────────────────\nconst hours = computed(() => {\n  const list: number[] = [];\n  if (use12Hours) {\n    for (let i = 1; i <= 12; i += hourStep) list.push(i);\n  } else {\n    for (let i = 0; i < 24; i += hourStep) list.push(i);\n  }\n  if (hideDisabledOptions) {\n    return list.filter((h) => !disabledHours.value.includes(use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h));\n  }\n  return list;\n});\n\nconst minutes = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += minuteStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((m) => !disabledMinutes.value.includes(m));\n  }\n  return list;\n});\n\nconst seconds = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += secondStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((s) => !disabledSeconds.value.includes(s));\n  }\n  return list;\n});\n\nfunction to24Hour(h12: number, period: 'AM' | 'PM'): number {\n  if (period === 'AM') return h12 === 12 ? 0 : h12;\n  return h12 === 12 ? 12 : h12 + 12;\n}\n\nfunction to12Hour(h24: number): { hour: number; period: 'AM' | 'PM' } {\n  const period: 'AM' | 'PM' = h24 >= 12 ? 'PM' : 'AM';\n  const hour = h24 % 12 || 12;\n  return { hour, period };\n}\n\n// ─────────────────────────────────────────────\n// Panel open/close\n// ─────────────────────────────────────────────\nfunction openPanel() {\n  if (disabled) return;\n  isOpen.value = true;\n  isPanelOpen.value = true;\n  emit('openChange', true);\n  panelEl.value?.showPopover?.();\n  syncPendingFromValue();\n  nextTick(() => scrollToSelected());\n}\n\nfunction closePanel() {\n  isOpen.value = false;\n  isPanelOpen.value = false;\n  emit('openChange', false);\n  panelEl.value?.hidePopover?.();\n  inputEl.value?.focus();\n}\n\nfunction togglePanel() {\n  if (isPanelOpen.value) closePanel();\n  else openPanel();\n}\n\nfunction handlePopoverToggle(e: Event) {\n  const toggleEvent = e as ToggleEvent;\n  const nowOpen = toggleEvent.newState === 'open';\n  isOpen.value = nowOpen;\n  isPanelOpen.value = nowOpen;\n  if (!nowOpen) emit('openChange', false);\n}\n\n// ─────────────────────────────────────────────\n// Sync pending state\n// ─────────────────────────────────────────────\nfunction syncPendingFromValue() {\n  const t = selectedTime.value;\n  if (t) {\n    if (use12Hours) {\n      const { hour, period } = to12Hour(t.getHours());\n      pendingHour.value = hour;\n      pendingAmpm.value = period;\n    } else {\n      pendingHour.value = t.getHours();\n    }\n    pendingMinute.value = t.getMinutes();\n    pendingSecond.value = t.getSeconds();\n  } else {\n    pendingHour.value = null;\n    pendingMinute.value = null;\n    pendingSecond.value = null;\n    pendingAmpm.value = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nfunction selectHour(h: number) {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  if (disabledHours.value.includes(h24)) return;\n  pendingHour.value = h;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectMinute(m: number) {\n  if (disabledMinutes.value.includes(m)) return;\n  pendingMinute.value = m;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectSecond(s: number) {\n  if (disabledSeconds.value.includes(s)) return;\n  pendingSecond.value = s;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectAmpm(val: 'AM' | 'PM') {\n  pendingAmpm.value = val;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction applyPendingIfComplete() {\n  if (pendingHour.value !== null && pendingMinute.value !== null) {\n    if (showSecond && pendingSecond.value === null) return;\n    if (use12Hours && pendingAmpm.value === null) return;\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction applyPending() {\n  const h = pendingHour.value ?? 0;\n  const m = pendingMinute.value ?? 0;\n  const s = pendingSecond.value ?? 0;\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n\n  const d = new Date();\n  d.setHours(h24, m, s, 0);\n  selectedTime.value = d;\n  inputText.value = formatTime(d);\n  emit('change', d, formatTime(d));\n}\n\nfunction handleOk() {\n  applyPending();\n  closePanel();\n}\n\nfunction handleNow() {\n  const now = new Date();\n  if (use12Hours) {\n    const { hour, period } = to12Hour(now.getHours());\n    pendingHour.value = hour;\n    pendingAmpm.value = period;\n  } else {\n    pendingHour.value = now.getHours();\n  }\n  pendingMinute.value = now.getMinutes();\n  pendingSecond.value = now.getSeconds();\n  nextTick(() => scrollToSelected());\n  if (!needConfirm) {\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction handleClear(e: Event) {\n  e.stopPropagation();\n  selectedTime.value = null;\n  inputText.value = '';\n  pendingHour.value = null;\n  pendingMinute.value = null;\n  pendingSecond.value = null;\n  pendingAmpm.value = null;\n  emit('change', null, '');\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nfunction handleInputChange(e: Event) {\n  const val = (e.target as HTMLInputElement).value;\n  inputText.value = val;\n}\n\nfunction handleInputBlur() {\n  if (!isPanelOpen.value) {\n    const parsed = parseTimeString(inputText.value);\n    if (parsed) {\n      selectedTime.value = parsed;\n      inputText.value = formatTime(parsed);\n      emit('change', parsed, formatTime(parsed));\n    } else if (inputText.value === '') {\n      selectedTime.value = null;\n      emit('change', null, '');\n    } else {\n      inputText.value = formatTime(selectedTime.value);\n    }\n  }\n}\n\nfunction handleInputKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') {\n    if (!isPanelOpen.value) {\n      e.preventDefault();\n      openPanel();\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      const parsed = parseTimeString(inputText.value);\n      if (parsed) {\n        selectedTime.value = parsed;\n        inputText.value = formatTime(parsed);\n        emit('change', parsed, formatTime(parsed));\n      }\n      closePanel();\n    }\n  } else if (e.key === 'Escape') {\n    if (isPanelOpen.value) {\n      e.preventDefault();\n      closePanel();\n    }\n  }\n}\n\n// ─────────────────────────────────────────────\n// Panel keyboard navigation\n// ─────────────────────────────────────────────\nfunction handlePanelKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    closePanel();\n    return;\n  }\n\n  if (e.key === 'Tab') {\n    const columns: ('hour' | 'minute' | 'second' | 'ampm')[] = [];\n    if (showHour) columns.push('hour');\n    if (showMinute) columns.push('minute');\n    if (showSecond) columns.push('second');\n    if (use12Hours) columns.push('ampm');\n\n    const idx = columns.indexOf(focusedColumn.value);\n    if (e.shiftKey) {\n      if (idx > 0) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx - 1];\n      }\n    } else {\n      if (idx < columns.length - 1) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx + 1];\n      }\n    }\n    return;\n  }\n\n  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n    e.preventDefault();\n    const delta = e.key === 'ArrowUp' ? -1 : 1;\n    adjustFocusedColumn(delta);\n    return;\n  }\n\n  if (e.key === 'Enter') {\n    e.preventDefault();\n    handleOk();\n  }\n}\n\nfunction adjustFocusedColumn(delta: number) {\n  if (focusedColumn.value === 'hour') {\n    const list = hours.value;\n    const current = pendingHour.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectHour(next);\n    scrollColumnTo(hourColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'minute') {\n    const list = minutes.value;\n    const current = pendingMinute.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectMinute(next);\n    scrollColumnTo(minuteColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'second') {\n    const list = seconds.value;\n    const current = pendingSecond.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectSecond(next);\n    scrollColumnTo(secondColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'ampm') {\n    const val = pendingAmpm.value === 'AM' ? 'PM' : 'AM';\n    selectAmpm(val);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Scroll helpers\n// ─────────────────────────────────────────────\nfunction scrollColumnTo(col: HTMLElement | null, idx: number) {\n  if (!col || !col.scrollTo) return;\n  const cellHeight = 28;\n  col.scrollTo({ top: idx * cellHeight, behavior: 'smooth' });\n}\n\nfunction scrollToSelected() {\n  if (pendingHour.value !== null) {\n    const idx = hours.value.indexOf(pendingHour.value);\n    if (idx >= 0) scrollColumnTo(hourColEl.value, idx);\n  }\n  if (pendingMinute.value !== null) {\n    const idx = minutes.value.indexOf(pendingMinute.value);\n    if (idx >= 0) scrollColumnTo(minuteColEl.value, idx);\n  }\n  if (pendingSecond.value !== null && showSecond) {\n    const idx = seconds.value.indexOf(pendingSecond.value);\n    if (idx >= 0) scrollColumnTo(secondColEl.value, idx);\n  }\n  if (pendingAmpm.value && use12Hours) {\n    const idx = pendingAmpm.value === 'AM' ? 0 : 1;\n    scrollColumnTo(ampmColEl.value, idx);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside\n// ─────────────────────────────────────────────\nfunction handleClickOutside(e: MouseEvent) {\n  if (!isPanelOpen.value) return;\n  const target = e.target as Node;\n  if (panelEl.value?.contains(target)) return;\n  if (inputEl.value?.parentElement?.contains(target)) return;\n  closePanel();\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', handleClickOutside);\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', handleClickOutside);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  () => open,\n  (val) => {\n    if (val !== undefined) {\n      if (val) openPanel();\n      else closePanel();\n    }\n  },\n);\n\nwatch(selectedTime, (val) => {\n  inputText.value = formatTime(val);\n});\n\n// Init display\ninputText.value = formatTime(selectedTime.value);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-time-picker',\n  `b-time-picker--${size}`,\n  `b-time-picker--${variant}`,\n  {\n    'b-time-picker--disabled': disabled,\n    'b-time-picker--open': isPanelOpen.value,\n    [`b-time-picker--${status}`]: !!status,\n  },\n]);\n\nconst isHourDisabled = (h: number) => {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  return disabledHours.value.includes(h24);\n};\nconst isMinuteDisabled = (m: number) => disabledMinutes.value.includes(m);\nconst isSecondDisabled = (s: number) => disabledSeconds.value.includes(s);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <div\n      class=\"b-time-picker__input-wrap\"\n      :style=\"{ anchorName }\"\n      @click=\"togglePanel\"\n    >\n      <input\n        :id=\"`b-time-picker-input-${componentUID}`\"\n        ref=\"inputEl\"\n        class=\"b-time-picker__input\"\n        type=\"text\"\n        role=\"combobox\"\n        :aria-expanded=\"isPanelOpen\"\n        aria-haspopup=\"dialog\"\n        :aria-controls=\"isPanelOpen ? `b-time-picker-panel-${componentUID}` : undefined\"\n        :aria-describedby=\"status ? `b-time-picker-status-${componentUID}` : undefined\"\n        :aria-label=\"placeholder\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"inputReadOnly\"\n        :value=\"inputText\"\n        autocomplete=\"off\"\n        @input=\"handleInputChange\"\n        @blur=\"handleInputBlur\"\n        @keydown=\"handleInputKeydown\"\n      />\n      <span class=\"b-time-picker__suffix\">\n        <svg\n          v-if=\"!allowClear || !selectedTime\"\n          class=\"b-time-picker__icon\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <polyline points=\"12 6 12 12 16 14\" />\n        </svg>\n        <button\n          v-else\n          class=\"b-time-picker__clear\"\n          type=\"button\"\n          aria-label=\"Clear time\"\n          tabindex=\"-1\"\n          @click=\"handleClear\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\n            <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\n          </svg>\n        </button>\n      </span>\n      <span\n        v-if=\"status\"\n        :id=\"`b-time-picker-status-${componentUID}`\"\n        class=\"b-time-picker__status-text\"\n        aria-live=\"polite\"\n      >\n        {{ status }}\n      </span>\n    </div>\n\n    <div\n      :id=\"`b-time-picker-panel-${componentUID}`\"\n      ref=\"panelEl\"\n      class=\"b-time-picker__panel\"\n      popover\n      role=\"dialog\"\n      :aria-label=\"'Time picker'\"\n      :aria-modal=\"true\"\n      :style=\"{ positionAnchor: anchorName }\"\n      @toggle=\"handlePopoverToggle\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <div class=\"b-time-picker__columns\" role=\"group\" aria-label=\"Time selection columns\">\n        <!-- Hour Column -->\n        <div\n          v-if=\"showHour\"\n          ref=\"hourColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Hours'\"\n          :aria-activedescendant=\"pendingHour !== null ? `b-time-picker-hour-${pendingHour}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"h in hours\"\n            :id=\"`b-time-picker-hour-${h}-${componentUID}`\"\n            :key=\"h\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingHour === h,\n              'b-time-picker__cell--disabled': isHourDisabled(h),\n              'b-time-picker__cell--focused': focusedColumn === 'hour' && pendingHour === h,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingHour === h\"\n            :aria-disabled=\"isHourDisabled(h)\"\n            @click=\"selectHour(h)\"\n          >\n            {{ pad(h) }}\n          </div>\n        </div>\n\n        <!-- Minute Column -->\n        <div\n          v-if=\"showMinute\"\n          ref=\"minuteColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Minutes'\"\n          :aria-activedescendant=\"pendingMinute !== null ? `b-time-picker-minute-${pendingMinute}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"m in minutes\"\n            :id=\"`b-time-picker-minute-${m}-${componentUID}`\"\n            :key=\"m\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingMinute === m,\n              'b-time-picker__cell--disabled': isMinuteDisabled(m),\n              'b-time-picker__cell--focused': focusedColumn === 'minute' && pendingMinute === m,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingMinute === m\"\n            :aria-disabled=\"isMinuteDisabled(m)\"\n            @click=\"selectMinute(m)\"\n          >\n            {{ pad(m) }}\n          </div>\n        </div>\n\n        <!-- Second Column -->\n        <div\n          v-if=\"showSecond\"\n          ref=\"secondColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Seconds'\"\n          :aria-activedescendant=\"pendingSecond !== null ? `b-time-picker-second-${pendingSecond}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"s in seconds\"\n            :id=\"`b-time-picker-second-${s}-${componentUID}`\"\n            :key=\"s\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingSecond === s,\n              'b-time-picker__cell--disabled': isSecondDisabled(s),\n              'b-time-picker__cell--focused': focusedColumn === 'second' && pendingSecond === s,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingSecond === s\"\n            :aria-disabled=\"isSecondDisabled(s)\"\n            @click=\"selectSecond(s)\"\n          >\n            {{ pad(s) }}\n          </div>\n        </div>\n\n        <!-- AM/PM Column -->\n        <div\n          v-if=\"use12Hours\"\n          ref=\"ampmColEl\"\n          class=\"b-time-picker__column b-time-picker__column--ampm\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'AM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'AM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'AM'\"\n            @click=\"selectAmpm('AM')\"\n          >\n            AM\n          </div>\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'PM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'PM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'PM'\"\n            @click=\"selectAmpm('PM')\"\n          >\n            PM\n          </div>\n        </div>\n      </div>\n\n      <div v-if=\"needConfirm || showNow\" class=\"b-time-picker__footer\">\n        <button\n          v-if=\"showNow\"\n          class=\"b-time-picker__now-btn\"\n          type=\"button\"\n          @click=\"handleNow\"\n        >\n          Now\n        </button>\n        <button\n          v-if=\"needConfirm\"\n          class=\"b-time-picker__ok-btn\"\n          type=\"button\"\n          @click=\"handleOk\"\n        >\n          OK\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-time-picker {\n  --b-time-picker-input-font-size: 14px;\n  --b-time-picker-input-font-size-lg: 16px;\n  --b-time-picker-input-font-size-sm: 14px;\n  --b-time-picker-padding-block: 4px;\n  --b-time-picker-padding-block-lg: 7px;\n  --b-time-picker-padding-block-sm: 0px;\n  --b-time-picker-padding-inline: 11px;\n  --b-time-picker-padding-inline-lg: 11px;\n  --b-time-picker-padding-inline-sm: 7px;\n  --b-time-picker-border-color: #d9d9d9;\n  --b-time-picker-hover-border-color: #4096ff;\n  --b-time-picker-active-border-color: #1677ff;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-time-picker-bg: #ffffff;\n  --b-time-picker-hover-bg: #ffffff;\n  --b-time-picker-active-bg: #ffffff;\n  --b-time-picker-text-color: rgba(0, 0, 0, 0.88);\n  --b-time-picker-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-icon-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-time-picker-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-panel-bg: #ffffff;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-time-picker-cell-height: 28px;\n  --b-time-picker-cell-width: 56px;\n  --b-time-picker-cell-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-selected-bg: #e6f4ff;\n  --b-time-picker-cell-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-column-height: 224px;\n  --b-time-picker-column-width: 56px;\n  --b-time-picker-footer-bg: #ffffff;\n  --b-time-picker-border-radius: 6px;\n  --b-time-picker-panel-border-radius: 8px;\n  --b-time-picker-transition-duration: 0.2s;\n  --b-time-picker-z-index-popup: 1050;\n\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  max-width: 200px;\n}\n\n/* ──── Input Wrap ──── */\n.b-time-picker__input-wrap {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  background: var(--b-time-picker-bg);\n  border: 1px solid var(--b-time-picker-border-color);\n  border-radius: var(--b-time-picker-border-radius);\n  padding: var(--b-time-picker-padding-block) var(--b-time-picker-padding-inline);\n  cursor: pointer;\n  transition:\n    border-color var(--b-time-picker-transition-duration),\n    box-shadow var(--b-time-picker-transition-duration),\n    background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__input-wrap:hover {\n  border-color: var(--b-time-picker-hover-border-color);\n  background: var(--b-time-picker-hover-bg);\n}\n\n.b-time-picker--open .b-time-picker__input-wrap {\n  border-color: var(--b-time-picker-active-border-color);\n  box-shadow: var(--b-time-picker-active-shadow);\n  background: var(--b-time-picker-active-bg);\n}\n\n/* ──── Size Variants ──── */\n.b-time-picker--sm .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-sm) var(--b-time-picker-padding-inline-sm);\n}\n\n.b-time-picker--sm .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-sm);\n}\n\n.b-time-picker--lg .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-lg) var(--b-time-picker-padding-inline-lg);\n}\n\n.b-time-picker--lg .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-lg);\n}\n\n/* ──── Variant Styles ──── */\n.b-time-picker--filled .b-time-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: transparent;\n}\n\n.b-time-picker--filled .b-time-picker__input-wrap:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.b-time-picker--borderless .b-time-picker__input-wrap {\n  border-color: transparent;\n  background: transparent;\n  box-shadow: none;\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap {\n  border-radius: 0;\n  border: none;\n  border-bottom: 1px solid var(--b-time-picker-border-color);\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap:hover {\n  border-bottom-color: var(--b-time-picker-hover-border-color);\n}\n\n.b-time-picker--underlined.b-time-picker--open .b-time-picker__input-wrap {\n  border-bottom-color: var(--b-time-picker-active-border-color);\n  box-shadow: none;\n}\n\n/* ──── Status ──── */\n.b-time-picker--error .b-time-picker__input-wrap {\n  border-color: #ff4d4f;\n}\n\n.b-time-picker--error.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-error-active-shadow);\n}\n\n.b-time-picker--warning .b-time-picker__input-wrap {\n  border-color: #faad14;\n}\n\n.b-time-picker--warning.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-warning-active-shadow);\n}\n\n/* ──── Disabled ──── */\n.b-time-picker--disabled .b-time-picker__input-wrap {\n  background: var(--b-time-picker-disabled-bg);\n  border-color: var(--b-time-picker-border-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.b-time-picker--disabled .b-time-picker__input {\n  color: var(--b-time-picker-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ──── Input ──── */\n.b-time-picker__input {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: var(--b-time-picker-input-font-size);\n  color: var(--b-time-picker-text-color);\n  line-height: 1.5;\n  padding: 0;\n  min-width: 0;\n}\n\n.b-time-picker__input::placeholder {\n  color: var(--b-time-picker-placeholder-color);\n}\n\n/* ──── Suffix / Icons ──── */\n.b-time-picker__suffix {\n  display: flex;\n  align-items: center;\n  margin-left: 4px;\n  flex-shrink: 0;\n}\n\n.b-time-picker__icon {\n  width: 14px;\n  height: 14px;\n  color: var(--b-time-picker-icon-color);\n}\n\n.b-time-picker__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--b-time-picker-clear-color);\n  transition: color var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__clear:hover {\n  color: var(--b-time-picker-clear-hover-color);\n}\n\n.b-time-picker__clear svg {\n  width: 14px;\n  height: 14px;\n}\n\n.b-time-picker__status-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n}\n\n/* ──── Panel ──── */\n.b-time-picker__panel {\n  position: absolute;\n  position-anchor: var(--b-time-picker-anchor);\n  inset: unset;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin: 0;\n  margin-top: 4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--b-time-picker-panel-border-radius);\n  background: var(--b-time-picker-panel-bg);\n  box-shadow: var(--b-time-picker-panel-shadow);\n  z-index: var(--b-time-picker-z-index-popup);\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-4px);\n  transition:\n    opacity var(--b-time-picker-transition-duration) ease,\n    transform var(--b-time-picker-transition-duration) ease;\n}\n\n.b-time-picker__panel:popover-open {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n@starting-style {\n  .b-time-picker__panel:popover-open {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n/* ──── Columns ──── */\n.b-time-picker__columns {\n  display: flex;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.b-time-picker__column {\n  width: var(--b-time-picker-column-width);\n  height: var(--b-time-picker-column-height);\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-right: 1px solid #f0f0f0;\n  scroll-behavior: smooth;\n  scrollbar-width: thin;\n}\n\n.b-time-picker__column:last-child {\n  border-right: none;\n}\n\n/* ──── Cells ──── */\n.b-time-picker__cell {\n  height: var(--b-time-picker-cell-height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--b-time-picker-text-color);\n  transition: background var(--b-time-picker-transition-duration);\n  user-select: none;\n}\n\n.b-time-picker__cell:hover {\n  background: var(--b-time-picker-cell-hover-bg);\n}\n\n.b-time-picker__cell--selected {\n  background: var(--b-time-picker-cell-selected-bg);\n  font-weight: 600;\n}\n\n.b-time-picker__cell--focused {\n  outline: 2px solid var(--b-time-picker-active-border-color);\n  outline-offset: -2px;\n}\n\n.b-time-picker__cell--disabled {\n  color: var(--b-time-picker-cell-disabled-color);\n  background: var(--b-time-picker-cell-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-time-picker__cell--disabled:hover {\n  background: var(--b-time-picker-cell-disabled-bg);\n}\n\n/* ──── Footer ──── */\n.b-time-picker__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 8px;\n  background: var(--b-time-picker-footer-bg);\n}\n\n.b-time-picker__now-btn {\n  border: none;\n  background: none;\n  color: var(--b-time-picker-active-border-color);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__now-btn:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.b-time-picker__ok-btn {\n  border: none;\n  background: var(--b-time-picker-active-border-color);\n  color: #fff;\n  cursor: pointer;\n  font-size: 14px;\n  padding: 2px 12px;\n  border-radius: 4px;\n  font-weight: 500;\n  line-height: 1.5;\n  transition:\n    background var(--b-time-picker-transition-duration),\n    opacity var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__ok-btn:hover {\n  opacity: 0.85;\n}\n\n/* ──── Placement ──── */\n.b-time-picker--bottom-right .b-time-picker__panel {\n  left: unset;\n  right: anchor(right);\n}\n\n.b-time-picker--top-left .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n.b-time-picker--top-right .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  left: unset;\n  right: anchor(right);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n/* ──── Dark Mode ──── */\n[data-prefers-color='dark'] .b-time-picker {\n  --b-time-picker-bg: #141414;\n  --b-time-picker-hover-bg: #141414;\n  --b-time-picker-active-bg: #141414;\n  --b-time-picker-border-color: #424242;\n  --b-time-picker-hover-border-color: #165dff;\n  --b-time-picker-active-border-color: #1668dc;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n  --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n  --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-panel-bg: #1f1f1f;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-cell-selected-bg: #111a2c;\n  --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-footer-bg: #1f1f1f;\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-time-picker {\n    --b-time-picker-bg: #141414;\n    --b-time-picker-hover-bg: #141414;\n    --b-time-picker-active-bg: #141414;\n    --b-time-picker-border-color: #424242;\n    --b-time-picker-hover-border-color: #165dff;\n    --b-time-picker-active-border-color: #1668dc;\n    --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n    --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n    --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-panel-bg: #1f1f1f;\n    --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-cell-selected-bg: #111a2c;\n    --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n    --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-footer-bg: #1f1f1f;\n    --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n    --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n  }\n}\n\n/* ──── Reduced Motion ──── */\n@media (prefers-reduced-motion: reduce) {\n  .b-time-picker,\n  .b-time-picker * {\n    --b-time-picker-transition-duration: 0ms;\n    transition-duration: 0ms !important;\n    animation-duration: 0ms !important;\n  }\n\n  .b-time-picker__column {\n    scroll-behavior: auto;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/{design-system196.js → design-system231.js}

@@ -3,4 +3,4 @@ var e = Symbol("BTabsContext");
 //#endregion
 export { e as BTabsContextKey };
 
-//# sourceMappingURL=design-system196.js.map
+//# sourceMappingURL=design-system231.js.map

package/dist/{design-system196.js.map → design-system231.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system196.js","names":[],"sources":["../src/components/BTabs/types.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, VNode } from 'vue';\n\nexport type BTabsType = 'line' | 'card' | 'editable-card';\nexport type BTabsPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type BTabsSize = 'small' | 'middle' | 'large';\n\nexport interface BTabItem {\n  /** Unique identifier for the tab. */\n  key: string;\n  /** Tab header text or VNode. */\n  label?: string | VNode;\n  /** Whether the tab is disabled. @default false */\n  disabled?: boolean;\n  /** Whether the close button is shown (editable-card only). @default true */\n  closable?: boolean;\n  /** Whether to destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Whether to force render content even when not active. @default false */\n  forceRender?: boolean;\n  /** Whether to keep this tab's component state alive when switching away. Overrides global keepAlive. */\n  keepAlive?: boolean;\n}\n\n// ─────────────────────────────────────────────\n// BTabPane registration (provide/inject)\n// ─────────────────────────────────────────────\n\nexport interface BTabPaneRegistration {\n  /** Unique key for this pane. */\n  key: string;\n  /** Tab label (text or VNode). */\n  label?: string | VNode;\n  /** Whether tab is disabled. */\n  disabled?: boolean;\n  /** Whether close button shows in editable-card mode. */\n  closable?: boolean;\n  /** Whether to destroy when hidden. */\n  destroyOnHidden?: boolean;\n  /** Whether to force render even when inactive. */\n  forceRender?: boolean;\n  /** Per-pane keepAlive override. */\n  keepAlive?: boolean;\n  /** Render function for the pane content (from BTabPane's default slot). */\n  renderContent: () => VNode[];\n  /** Optional render function for custom label (from BTabPane's tab slot). */\n  renderLabel?: () => VNode[];\n}\n\n// ─────────────────────────────────────────────\n// Context injected from BTabs to BTabPane children\n// ─────────────────────────────────────────────\n\nexport interface BTabsContext {\n  /** Currently active tab key. */\n  activeKey: ComputedRef<string>;\n  /** Tab type. */\n  type: ComputedRef<BTabsType>;\n  /** Tab size. */\n  size: ComputedRef<BTabsSize>;\n  /** Tab placement. */\n  placement: ComputedRef<BTabsPlacement>;\n  /** Global keepAlive setting. */\n  keepAlive: ComputedRef<boolean>;\n  /** Global destroyOnHidden setting. */\n  destroyOnHidden: ComputedRef<boolean>;\n  /** Register a pane. */\n  register: (pane: BTabPaneRegistration) => void;\n  /** Unregister a pane by key. */\n  unregister: (key: string) => void;\n  /** Update a registered pane's data (when props change reactively). */\n  update: (key: string, pane: BTabPaneRegistration) => void;\n}\n\nexport const BTabsContextKey: InjectionKey<BTabsContext> = Symbol('BTabsContext');\n"],"mappings":";AAyEA,IAAa,IAA8C,OAAO,eAAe"}
+{"version":3,"file":"design-system231.js","names":[],"sources":["../src/components/BTabs/types.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, VNode } from 'vue';\n\nexport type BTabsType = 'line' | 'card' | 'editable-card';\nexport type BTabsPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type BTabsSize = 'small' | 'middle' | 'large';\n\nexport interface BTabItem {\n  /** Unique identifier for the tab. */\n  key: string;\n  /** Tab header text or VNode. */\n  label?: string | VNode;\n  /** Whether the tab is disabled. @default false */\n  disabled?: boolean;\n  /** Whether the close button is shown (editable-card only). @default true */\n  closable?: boolean;\n  /** Whether to destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Whether to force render content even when not active. @default false */\n  forceRender?: boolean;\n  /** Whether to keep this tab's component state alive when switching away. Overrides global keepAlive. */\n  keepAlive?: boolean;\n}\n\n// ─────────────────────────────────────────────\n// BTabPane registration (provide/inject)\n// ─────────────────────────────────────────────\n\nexport interface BTabPaneRegistration {\n  /** Unique key for this pane. */\n  key: string;\n  /** Tab label (text or VNode). */\n  label?: string | VNode;\n  /** Whether tab is disabled. */\n  disabled?: boolean;\n  /** Whether close button shows in editable-card mode. */\n  closable?: boolean;\n  /** Whether to destroy when hidden. */\n  destroyOnHidden?: boolean;\n  /** Whether to force render even when inactive. */\n  forceRender?: boolean;\n  /** Per-pane keepAlive override. */\n  keepAlive?: boolean;\n  /** Render function for the pane content (from BTabPane's default slot). */\n  renderContent: () => VNode[];\n  /** Optional render function for custom label (from BTabPane's tab slot). */\n  renderLabel?: () => VNode[];\n}\n\n// ─────────────────────────────────────────────\n// Context injected from BTabs to BTabPane children\n// ─────────────────────────────────────────────\n\nexport interface BTabsContext {\n  /** Currently active tab key. */\n  activeKey: ComputedRef<string>;\n  /** Tab type. */\n  type: ComputedRef<BTabsType>;\n  /** Tab size. */\n  size: ComputedRef<BTabsSize>;\n  /** Tab placement. */\n  placement: ComputedRef<BTabsPlacement>;\n  /** Global keepAlive setting. */\n  keepAlive: ComputedRef<boolean>;\n  /** Global destroyOnHidden setting. */\n  destroyOnHidden: ComputedRef<boolean>;\n  /** Register a pane. */\n  register: (pane: BTabPaneRegistration) => void;\n  /** Unregister a pane by key. */\n  unregister: (key: string) => void;\n  /** Update a registered pane's data (when props change reactively). */\n  update: (key: string, pane: BTabPaneRegistration) => void;\n}\n\nexport const BTabsContextKey: InjectionKey<BTabsContext> = Symbol('BTabsContext');\n"],"mappings":";AAyEA,IAAa,IAA8C,OAAO,eAAe"}

package/dist/design-system232.js

@@ -0,0 +1,49 @@
+import { BTabsContextKey as e } from "./design-system231.js";
+import { createCommentVNode as t, defineComponent as n, inject as r, onBeforeUnmount as i, onMounted as a, useSlots as o, watch as s } from "vue";
+//#region src/components/BTabs/BTabPane.vue?vue&type=script&setup=true&lang.ts
+var c = /* @__PURE__ */ n({
+	__name: "BTabPane",
+	props: {
+		tabKey: {},
+		tab: {},
+		disabled: { type: Boolean },
+		closable: { type: Boolean },
+		destroyOnHidden: { type: Boolean },
+		forceRender: { type: Boolean },
+		keepAlive: { type: Boolean }
+	},
+	setup(n) {
+		let c = n, l = o(), u = r(e, null);
+		function d() {
+			return {
+				key: c.tabKey,
+				label: c.tab,
+				disabled: c.disabled,
+				closable: c.closable,
+				destroyOnHidden: c.destroyOnHidden,
+				forceRender: c.forceRender,
+				keepAlive: c.keepAlive,
+				renderContent: () => l.default?.() ?? [],
+				renderLabel: l.tab ? () => l.tab() : void 0
+			};
+		}
+		return a(() => {
+			u?.register(d());
+		}), i(() => {
+			u?.unregister(c.tabKey);
+		}), s(() => [
+			c.tab,
+			c.disabled,
+			c.closable,
+			c.destroyOnHidden,
+			c.forceRender,
+			c.keepAlive
+		], () => {
+			u?.update(c.tabKey, d());
+		}), (e, n) => t("", !0);
+	}
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=design-system232.js.map

package/dist/design-system232.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system232.js","names":[],"sources":["../src/components/BTabs/BTabPane.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VNode } from 'vue';\nimport { inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue';\n\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /** Unique key identifying this tab pane. */\n  tabKey: string;\n  /** Tab header label text. Use the `tab` slot for rich labels. */\n  tab?: string;\n  /** Whether this tab is disabled. @default false */\n  disabled?: boolean;\n  /** Show close button in editable-card mode. @default true */\n  closable?: boolean;\n  /** Destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Force render content even when inactive. @default false */\n  forceRender?: boolean;\n  /** Keep component state alive when switching away. Overrides global setting. */\n  keepAlive?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Tab pane content. */\n  default?: () => unknown;\n  /** Custom tab label content. */\n  tab?: () => unknown;\n}>();\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Inject parent context\n// ─────────────────────────────────────────────\nconst tabsContext = inject(BTabsContextKey, null);\n\n// ─────────────────────────────────────────────\n// Registration helpers\n// ─────────────────────────────────────────────\nfunction buildRegistration() {\n  return {\n    key: props.tabKey,\n    label: props.tab,\n    disabled: props.disabled,\n    closable: props.closable,\n    destroyOnHidden: props.destroyOnHidden,\n    forceRender: props.forceRender,\n    keepAlive: props.keepAlive,\n    renderContent: () => (slots.default?.() ?? []) as VNode[],\n    renderLabel: slots.tab ? () => slots.tab!() as VNode[] : undefined,\n  };\n}\n\nonMounted(() => {\n  tabsContext?.register(buildRegistration());\n});\n\nonBeforeUnmount(() => {\n  tabsContext?.unregister(props.tabKey);\n});\n\nwatch(\n  () => [\n    props.tab,\n    props.disabled,\n    props.closable,\n    props.destroyOnHidden,\n    props.forceRender,\n    props.keepAlive,\n  ],\n  () => {\n    tabsContext?.update(props.tabKey, buildRegistration());\n  },\n);\n</script>\n\n<template>\n  <!-- BTabPane is a registration-only component. All rendering is handled by BTabs. -->\n  <slot v-if=\"false\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EASA,IAAM,IAAQ,GA2BR,IAAQ,GAAU,EAKlB,IAAc,EAAO,GAAiB,KAAK;EAKjD,SAAS,IAAoB;AAC3B,UAAO;IACL,KAAK,EAAM;IACX,OAAO,EAAM;IACb,UAAU,EAAM;IAChB,UAAU,EAAM;IAChB,iBAAiB,EAAM;IACvB,aAAa,EAAM;IACnB,WAAW,EAAM;IACjB,qBAAsB,EAAM,WAAW,IAAI,EAAE;IAC7C,aAAa,EAAM,YAAY,EAAM,KAAM,GAAc,KAAA;IAC1D;;SAGH,QAAgB;AACd,MAAa,SAAS,GAAmB,CAAC;IAC1C,EAEF,QAAsB;AACpB,MAAa,WAAW,EAAM,OAAO;IACrC,EAEF,QACQ;GACJ,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACP,QACK;AACJ,MAAa,OAAO,EAAM,QAAQ,GAAmB,CAAC;IAEzD"}

package/dist/design-system233.js

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

package/dist/design-system233.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system233.js","names":[],"sources":["../src/components/BTabs/BTabPane.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VNode } from 'vue';\nimport { inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue';\n\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /** Unique key identifying this tab pane. */\n  tabKey: string;\n  /** Tab header label text. Use the `tab` slot for rich labels. */\n  tab?: string;\n  /** Whether this tab is disabled. @default false */\n  disabled?: boolean;\n  /** Show close button in editable-card mode. @default true */\n  closable?: boolean;\n  /** Destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Force render content even when inactive. @default false */\n  forceRender?: boolean;\n  /** Keep component state alive when switching away. Overrides global setting. */\n  keepAlive?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Tab pane content. */\n  default?: () => unknown;\n  /** Custom tab label content. */\n  tab?: () => unknown;\n}>();\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Inject parent context\n// ─────────────────────────────────────────────\nconst tabsContext = inject(BTabsContextKey, null);\n\n// ─────────────────────────────────────────────\n// Registration helpers\n// ─────────────────────────────────────────────\nfunction buildRegistration() {\n  return {\n    key: props.tabKey,\n    label: props.tab,\n    disabled: props.disabled,\n    closable: props.closable,\n    destroyOnHidden: props.destroyOnHidden,\n    forceRender: props.forceRender,\n    keepAlive: props.keepAlive,\n    renderContent: () => (slots.default?.() ?? []) as VNode[],\n    renderLabel: slots.tab ? () => slots.tab!() as VNode[] : undefined,\n  };\n}\n\nonMounted(() => {\n  tabsContext?.register(buildRegistration());\n});\n\nonBeforeUnmount(() => {\n  tabsContext?.unregister(props.tabKey);\n});\n\nwatch(\n  () => [\n    props.tab,\n    props.disabled,\n    props.closable,\n    props.destroyOnHidden,\n    props.forceRender,\n    props.keepAlive,\n  ],\n  () => {\n    tabsContext?.update(props.tabKey, buildRegistration());\n  },\n);\n</script>\n\n<template>\n  <!-- BTabPane is a registration-only component. All rendering is handled by BTabs. -->\n  <slot v-if=\"false\" />\n</template>\n"],"mappings":""}

package/dist/{design-system199.js → design-system234.js}

@@ -1,4 +1,4 @@
-import { BTabsContextKey as e } from "./design-system196.js";
+import { BTabsContextKey as e } from "./design-system231.js";
 import { Fragment as t, KeepAlive as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, h as ee, nextTick as u, normalizeClass as d, normalizeStyle as f, onMounted as p, openBlock as m, provide as h, ref as g, renderList as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, useId as x, vShow as S, watch as C, withDirectives as w, withModifiers as te } from "vue";
 //#region src/components/BTabs/BTabs.vue?vue&type=script&setup=true&lang.ts
 var ne = { class: "b-tabs__header" }, re = {
@@ -283,4 +283,4 @@ var ne = { class: "b-tabs__header" }, re = {
 //#endregion
 export { k as default };
 
-//# sourceMappingURL=design-system199.js.map
+//# sourceMappingURL=design-system234.js.map

package/dist/design-system234.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system234.js","names":["$slots"],"sources":["../src/components/BTabs/BTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component, VNode } from 'vue';\nimport { computed, defineComponent, h, nextTick, onMounted, provide, ref, useId, watch } from 'vue';\n\nimport type {\n  BTabItem,\n  BTabPaneRegistration,\n  BTabsContext,\n  BTabsPlacement,\n  BTabsSize,\n  BTabsType,\n} from './types';\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  activeKey,\n  defaultActiveKey,\n  items = [],\n  type = 'line',\n  placement = 'top',\n  size = 'middle',\n  centered = false,\n  animated = true,\n  hideAdd = false,\n  destroyOnHidden = false,\n  keepAlive = false,\n  tabBarGutter,\n} = defineProps<{\n  /** Current active tab key (controlled via v-model:activeKey). */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. @default first non-disabled tab */\n  defaultActiveKey?: string;\n  /** Tab items configuration. When provided and non-empty, BTabPane children are ignored. */\n  items?: BTabItem[];\n  /** Visual style of the tabs. @default 'line' */\n  type?: BTabsType;\n  /** Position of the tab bar. @default 'top' */\n  placement?: BTabsPlacement;\n  /** Size preset for the tab bar. @default 'middle' */\n  size?: BTabsSize;\n  /** Whether to center the tab items. @default false */\n  centered?: boolean;\n  /** Whether content switching is animated. @default true */\n  animated?: boolean;\n  /** Whether to hide the add button in editable-card mode. @default false */\n  hideAdd?: boolean;\n  /** Whether to destroy inactive tab content globally. @default false */\n  destroyOnHidden?: boolean;\n  /** Whether to keep component state alive when switching tabs globally. @default false */\n  keepAlive?: boolean;\n  /** Gap between tabs in pixels. */\n  tabBarGutter?: number;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the active tab changes. */\n  (e: 'update:activeKey', key: string): void;\n  /** Fires when the active tab changes (alias for update:activeKey). */\n  (e: 'change', key: string): void;\n  /** Fires when a tab is clicked. */\n  (e: 'tabClick', key: string, event: MouseEvent): void;\n  /** Fires when a tab is added or removed (editable-card only). */\n  (e: 'edit', key: string | null, action: 'add' | 'remove'): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Items mode: receives { item } scoped prop. Pane mode: contains BTabPane children (no props). */\n  default?: (props: { item?: BTabItem }) => unknown;\n  /** Custom label renderer for each tab (items mode). */\n  label?: (props: { item: BTabItem; active: boolean }) => unknown;\n  /** Extra content on the left side of the tab bar. */\n  leftExtra?: () => unknown;\n  /** Extra content on the right side of the tab bar. */\n  rightExtra?: () => unknown;\n  /** Custom add button (editable-card type). */\n  addIcon?: () => unknown;\n  /** Custom remove/close icon (editable-card type). */\n  removeIcon?: (props: { item: BTabItem }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Instance-scoped ID prefix (prevents duplicate IDs when multiple BTabs on page)\n// ─────────────────────────────────────────────\nconst uid = useId();\nconst tabId = (key: string) => `${uid}-tab-${key}`;\nconst panelId = (key: string) => `${uid}-tabpanel-${key}`;\n\n// ─────────────────────────────────────────────\n// Pane registry (for BTabPane child component API)\n// ─────────────────────────────────────────────\nconst paneRegistry = ref(new Map<string, BTabPaneRegistration>());\nconst paneOrder = ref<string[]>([]);\n\nfunction registerPane(pane: BTabPaneRegistration) {\n  paneRegistry.value.set(pane.key, pane);\n  if (!paneOrder.value.includes(pane.key)) {\n    paneOrder.value = [...paneOrder.value, pane.key];\n  }\n}\n\nfunction unregisterPane(key: string) {\n  paneRegistry.value.delete(key);\n  paneOrder.value = paneOrder.value.filter((k) => k !== key);\n}\n\nfunction updatePane(key: string, pane: BTabPaneRegistration) {\n  paneRegistry.value.set(key, pane);\n}\n\n// ─────────────────────────────────────────────\n// Mode detection + effective items\n// ─────────────────────────────────────────────\nconst isItemsMode = computed(() => items && items.length > 0);\n\nconst effectiveItems = computed<BTabItem[]>(() => {\n  if (isItemsMode.value) return items;\n  return paneOrder.value\n    .map((key) => paneRegistry.value.get(key))\n    .filter((p): p is BTabPaneRegistration => p !== undefined)\n    .map((pane) => ({\n      key: pane.key,\n      label: pane.label,\n      disabled: pane.disabled,\n      closable: pane.closable,\n      destroyOnHidden: pane.destroyOnHidden,\n      forceRender: pane.forceRender,\n      keepAlive: pane.keepAlive,\n    }));\n});\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => activeKey !== undefined);\n\nconst firstEnabledKey = computed(\n  () => effectiveItems.value.find((i) => !i.disabled)?.key ?? effectiveItems.value[0]?.key ?? '',\n);\n\nconst internalKey = ref<string>(activeKey ?? defaultActiveKey ?? firstEnabledKey.value);\n\nwatch(\n  () => activeKey,\n  (val) => {\n    if (val !== undefined) internalKey.value = val;\n  },\n);\n\nwatch(effectiveItems, () => {\n  if (\n    internalKey.value === undefined ||\n    !effectiveItems.value.find((i) => i.key === internalKey.value)\n  ) {\n    internalKey.value = firstEnabledKey.value;\n  }\n});\n\nconst currentKey = computed(() => (isControlled.value ? activeKey! : internalKey.value));\n\n// ─────────────────────────────────────────────\n// Provide context to BTabPane children\n// ─────────────────────────────────────────────\nconst context: BTabsContext = {\n  activeKey: currentKey,\n  type: computed(() => type),\n  size: computed(() => size),\n  placement: computed(() => placement),\n  keepAlive: computed(() => keepAlive),\n  destroyOnHidden: computed(() => destroyOnHidden),\n  register: registerPane,\n  unregister: unregisterPane,\n  update: updatePane,\n};\n\nprovide(BTabsContextKey, context);\n\n// ─────────────────────────────────────────────\n// Tab activation\n// ─────────────────────────────────────────────\nfunction activateTab(key: string, event?: MouseEvent) {\n  const item = effectiveItems.value.find((i) => i.key === key);\n  if (!item || item.disabled) return;\n\n  if (event) {\n    emit('tabClick', key, event);\n  }\n\n  if (key === currentKey.value) return;\n\n  if (!isControlled.value) {\n    internalKey.value = key;\n  }\n  emit('update:activeKey', key);\n  emit('change', key);\n}\n\n// ─────────────────────────────────────────────\n// Editable-card actions\n// ─────────────────────────────────────────────\nfunction onAdd() {\n  emit('edit', null, 'add');\n}\n\nfunction onRemove(key: string, event: MouseEvent) {\n  event.stopPropagation();\n  emit('edit', key, 'remove');\n}\n\n// ─────────────────────────────────────────────\n// Ink bar positioning\n// ─────────────────────────────────────────────\nconst tabListRef = ref<HTMLElement | null>(null);\nconst inkBarStyle = ref<Record<string, string>>({});\n\nfunction updateInkBar() {\n  if (!tabListRef.value || type !== 'line') return;\n  const activeEl = tabListRef.value.querySelector<HTMLElement>('.b-tabs__tab--active');\n  if (!activeEl) return;\n\n  const isVertical = placement === 'left' || placement === 'right';\n\n  if (isVertical) {\n    inkBarStyle.value = {\n      top: `${activeEl.offsetTop}px`,\n      height: `${activeEl.offsetHeight}px`,\n    };\n  } else {\n    inkBarStyle.value = {\n      left: `${activeEl.offsetLeft}px`,\n      width: `${activeEl.offsetWidth}px`,\n    };\n  }\n}\n\nwatch(currentKey, async () => {\n  await nextTick();\n  updateInkBar();\n});\n\nonMounted(() => {\n  updateInkBar();\n});\n\n// ─────────────────────────────────────────────\n// Keyboard navigation (roving tabindex)\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent) {\n  const isVertical = placement === 'left' || placement === 'right';\n  const nextKeys = isVertical ? ['ArrowDown'] : ['ArrowRight'];\n  const prevKeys = isVertical ? ['ArrowUp'] : ['ArrowLeft'];\n\n  // Delete key closes the active tab in editable-card mode\n  if (event.key === 'Delete' && type === 'editable-card') {\n    const item = effectiveItems.value.find((i) => i.key === currentKey.value);\n    if (item && item.closable !== false) {\n      event.preventDefault();\n      emit('edit', currentKey.value, 'remove');\n    }\n    return;\n  }\n\n  if ([...nextKeys, ...prevKeys, 'Home', 'End'].includes(event.key)) {\n    event.preventDefault();\n    const enabledItems = effectiveItems.value.filter((i) => !i.disabled);\n    if (enabledItems.length === 0) return;\n\n    const currentIdx = enabledItems.findIndex((i) => i.key === currentKey.value);\n\n    let targetIdx: number;\n    if (nextKeys.includes(event.key)) {\n      targetIdx = (currentIdx + 1) % enabledItems.length;\n    } else if (prevKeys.includes(event.key)) {\n      targetIdx = (currentIdx - 1 + enabledItems.length) % enabledItems.length;\n    } else if (event.key === 'Home') {\n      targetIdx = 0;\n    } else {\n      targetIdx = enabledItems.length - 1;\n    }\n\n    const targetKey = enabledItems[targetIdx].key;\n    activateTab(targetKey);\n\n    nextTick(() => {\n      if (!tabListRef.value) return;\n      const targetEl = tabListRef.value.querySelector<HTMLElement>(`[data-tab-key=\"${targetKey}\"]`);\n      targetEl?.focus();\n    });\n  }\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive + content visibility\n// ─────────────────────────────────────────────\nconst renderedKeys = ref<Set<string>>(new Set([currentKey.value]));\n\nwatch(currentKey, (key) => {\n  renderedKeys.value.add(key);\n});\n\nfunction shouldUseKeepAlive(item: BTabItem): boolean {\n  if (item.destroyOnHidden) return false;\n  if (item.keepAlive !== undefined) return item.keepAlive;\n  if (destroyOnHidden) return false;\n  return keepAlive;\n}\n\nfunction shouldRender(item: BTabItem): boolean {\n  if (item.forceRender) return true;\n  if (shouldUseKeepAlive(item)) return true;\n  const itemDestroy = item.destroyOnHidden ?? destroyOnHidden;\n  if (itemDestroy) return item.key === currentKey.value;\n  return renderedKeys.value.has(item.key);\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive panel wrapper components\n// ─────────────────────────────────────────────\nconst panelWrappers = computed<Record<string, Component>>(() => {\n  const wrappers: Record<string, Component> = {};\n  for (const item of effectiveItems.value) {\n    if (!shouldUseKeepAlive(item)) continue;\n    wrappers[item.key] = defineComponent({\n      name: `BTabPanel_${item.key}`,\n      setup() {\n        return () => {\n          const pane = paneRegistry.value.get(item.key);\n          if (pane) {\n            return pane.renderContent();\n          }\n          return null;\n        };\n      },\n    });\n  }\n  return wrappers;\n});\n\nfunction getPaneContent(key: string): VNode[] {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderContent() ?? [];\n}\n\nfunction getPaneLabel(key: string): VNode[] | undefined {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderLabel?.();\n}\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-tabs',\n  `b-tabs--${type}`,\n  `b-tabs--${placement}`,\n  `b-tabs--${size}`,\n  { 'b-tabs--centered': centered },\n]);\n\nconst tabBarGutterStyle = computed(() =>\n  tabBarGutter !== undefined ? { gap: `${tabBarGutter}px` } : undefined,\n);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <!-- Tab bar -->\n    <div class=\"b-tabs__header\">\n      <div v-if=\"$slots.leftExtra\" class=\"b-tabs__extra b-tabs__extra--left\">\n        <slot name=\"leftExtra\" />\n      </div>\n\n      <div\n        ref=\"tabListRef\"\n        class=\"b-tabs__list\"\n        role=\"tablist\"\n        :aria-orientation=\"\n          placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal'\n        \"\n        :style=\"tabBarGutterStyle\"\n      >\n        <div\n          v-for=\"item in effectiveItems\"\n          :key=\"item.key\"\n          :data-tab-key=\"item.key\"\n          class=\"b-tabs__tab\"\n          :class=\"{\n            'b-tabs__tab--active': item.key === currentKey,\n            'b-tabs__tab--disabled': item.disabled,\n          }\"\n          role=\"tab\"\n          :aria-selected=\"item.key === currentKey\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :aria-controls=\"panelId(item.key)\"\n          :id=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          @click=\"!item.disabled && activateTab(item.key, $event)\"\n          @keydown=\"onKeydown\"\n        >\n          <span class=\"b-tabs__tab-label\">\n            <!-- Items mode: use label slot or item.label -->\n            <template v-if=\"isItemsMode\">\n              <slot name=\"label\" :item=\"item\" :active=\"item.key === currentKey\">\n                {{ item.label }}\n              </slot>\n            </template>\n            <!-- Pane mode: use pane's renderLabel or label string -->\n            <template v-else>\n              <component\n                v-if=\"getPaneLabel(item.key)\"\n                :is=\"() => h('span', getPaneLabel(item.key)!)\"\n              />\n              <template v-else>{{ item.label }}</template>\n            </template>\n          </span>\n          <span\n            v-if=\"type === 'editable-card' && item.closable !== false\"\n            class=\"b-tabs__tab-remove\"\n            aria-hidden=\"true\"\n            @click.stop=\"onRemove(item.key, $event)\"\n          >\n            <slot name=\"removeIcon\" :item=\"item\">\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" class=\"b-tabs__close-icon\">\n                <path\n                  d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\n                />\n              </svg>\n            </slot>\n          </span>\n        </div>\n\n        <!-- Ink bar (line type only) -->\n        <div\n          v-if=\"type === 'line'\"\n          class=\"b-tabs__ink-bar\"\n          aria-hidden=\"true\"\n          :style=\"inkBarStyle\"\n        />\n      </div>\n\n      <!-- Add button (outside tablist to avoid aria-required-children violation) -->\n      <button\n        v-if=\"type === 'editable-card' && !hideAdd\"\n        class=\"b-tabs__add\"\n        aria-label=\"Add tab\"\n        @click=\"onAdd\"\n      >\n        <slot name=\"addIcon\">\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"b-tabs__add-icon\">\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div v-if=\"$slots.rightExtra\" class=\"b-tabs__extra b-tabs__extra--right\">\n        <slot name=\"rightExtra\" />\n      </div>\n    </div>\n\n    <!-- Hidden slot area for BTabPane registration (pane mode only) -->\n    <div v-if=\"!isItemsMode\" v-show=\"false\" aria-hidden=\"true\" style=\"display: none\">\n      <slot />\n    </div>\n\n    <!-- Tab panels -->\n    <div class=\"b-tabs__content\">\n      <template v-for=\"item in effectiveItems\" :key=\"item.key\">\n        <!-- KeepAlive panels -->\n        <div\n          v-if=\"shouldUseKeepAlive(item)\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n          v-show=\"item.key === currentKey\"\n        >\n          <!-- Pane mode: KeepAlive caches wrapper component instances -->\n          <KeepAlive v-if=\"!isItemsMode\">\n            <component\n              v-if=\"item.key === currentKey\"\n              :is=\"panelWrappers[item.key] ?? (() => null)\"\n              :key=\"item.key\"\n            />\n          </KeepAlive>\n          <!-- Items mode: always render slot content; v-show on parent preserves state -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n        </div>\n\n        <!-- Standard panels (no KeepAlive) -->\n        <div\n          v-else-if=\"shouldRender(item)\"\n          v-show=\"item.key === currentKey\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n        >\n          <!-- Items mode: scoped slot -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n          <!-- Pane mode: render registered content -->\n          <component v-else :is=\"() => getPaneContent(item.key)\" />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTabs - Design tokens (scoped to .b-tabs)\n   ───────────────────────────────────────────── */\n.b-tabs {\n  --b-tabs-ink-bar-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-active-color: oklch(35% 0.2 260);\n  --b-tabs-item-color: oklch(30% 0.02 260 / 88%);\n  --b-tabs-item-hover-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-selected-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-disabled-color: oklch(30% 0.02 260 / 25%);\n  --b-tabs-title-font-size: 14px;\n  --b-tabs-title-font-size-lg: 16px;\n  --b-tabs-title-font-size-sm: 14px;\n  --b-tabs-card-bg: oklch(97% 0.003 260 / 50%);\n  --b-tabs-card-height: 40px;\n  --b-tabs-card-height-lg: 48px;\n  --b-tabs-card-height-sm: 32px;\n  --b-tabs-card-padding: 8px 16px;\n  --b-tabs-card-padding-lg: 11px 16px;\n  --b-tabs-card-padding-sm: 4px 8px;\n  --b-tabs-card-gutter: 2px;\n  --b-tabs-card-border-radius: 8px 8px 0 0;\n  --b-tabs-horizontal-item-gutter: 32px;\n  --b-tabs-horizontal-item-padding: 12px 0;\n  --b-tabs-horizontal-item-padding-lg: 16px 0;\n  --b-tabs-horizontal-item-padding-sm: 8px 0;\n  --b-tabs-horizontal-margin: 0 0 16px 0;\n  --b-tabs-vertical-item-margin: 16px 0 0 0;\n  --b-tabs-vertical-item-padding: 8px 24px;\n  --b-tabs-border-color: oklch(80% 0.005 260);\n  --b-tabs-content-min-height: 0;\n  --b-tabs-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n  --b-tabs-transition-duration: 200ms;\n\n  display: flex;\n  flex-direction: column;\n  font-size: var(--b-tabs-title-font-size);\n  line-height: 1.5;\n}\n\n/* ── Placement layouts ── */\n.b-tabs--left {\n  flex-direction: row;\n}\n\n.b-tabs--right {\n  flex-direction: row-reverse;\n}\n\n.b-tabs--bottom {\n  flex-direction: column-reverse;\n}\n\n/* ── Size variants ── */\n.b-tabs--large {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-lg);\n}\n\n.b-tabs--small {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Header\n   ───────────────────────────────────────────── */\n.b-tabs__header {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.b-tabs--top .b-tabs__header,\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n  margin: var(--b-tabs-horizontal-margin);\n}\n\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: none;\n  border-top: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--left .b-tabs__header,\n.b-tabs--right .b-tabs__header {\n  flex-direction: column;\n  align-items: stretch;\n  border-right: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--right .b-tabs__header {\n  border-right: none;\n  border-left: 1px solid var(--b-tabs-border-color);\n}\n\n/* Card type removes border from header */\n.b-tabs--card .b-tabs__header,\n.b-tabs--editable-card .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n}\n\n/* ─────────────────────────────────────────────\n   Tab list (roving tabindex container)\n   ───────────────────────────────────────────── */\n.b-tabs__list {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: var(--b-tabs-horizontal-item-gutter);\n}\n\n.b-tabs--centered .b-tabs__list {\n  justify-content: center;\n}\n\n.b-tabs--left .b-tabs__list,\n.b-tabs--right .b-tabs__list {\n  flex-direction: column;\n  gap: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Individual tab\n   ───────────────────────────────────────────── */\n.b-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  padding: var(--b-tabs-horizontal-item-padding);\n  border: none;\n  background: none;\n  color: var(--b-tabs-item-color);\n  font-size: inherit;\n  font-family: inherit;\n  cursor: pointer;\n  white-space: nowrap;\n  outline: none;\n  transition: color var(--b-tabs-transition-duration);\n  line-height: 1.5;\n}\n\n.b-tabs__tab:hover:not(.b-tabs__tab--disabled) {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__tab--active {\n  color: var(--b-tabs-item-selected-color);\n  font-weight: 500;\n}\n\n.b-tabs__tab--active:hover {\n  color: var(--b-tabs-item-active-color);\n}\n\n.b-tabs__tab--disabled {\n  color: var(--b-tabs-item-disabled-color);\n  cursor: not-allowed;\n}\n\n.b-tabs__tab:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n  border-radius: 4px;\n}\n\n/* Large size - tab padding */\n.b-tabs--large .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-lg);\n}\n\n/* Small size - tab padding */\n.b-tabs--small .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-sm);\n}\n\n/* Vertical tabs */\n.b-tabs--left .b-tabs__tab,\n.b-tabs--right .b-tabs__tab {\n  padding: var(--b-tabs-vertical-item-padding);\n  justify-content: flex-start;\n}\n\n.b-tabs--left .b-tabs__tab:not(:first-child),\n.b-tabs--right .b-tabs__tab:not(:first-child) {\n  margin: var(--b-tabs-vertical-item-margin);\n}\n\n/* ─────────────────────────────────────────────\n   Card-type tab\n   ───────────────────────────────────────────── */\n.b-tabs--card .b-tabs__list,\n.b-tabs--editable-card .b-tabs__list {\n  gap: var(--b-tabs-card-gutter);\n}\n\n.b-tabs--card .b-tabs__tab,\n.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n}\n\n.b-tabs--card .b-tabs__tab--active,\n.b-tabs--editable-card .b-tabs__tab--active {\n  background: white;\n  border-bottom-color: white;\n}\n\n.b-tabs--large.b-tabs--card .b-tabs__tab,\n.b-tabs--large.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-lg);\n  height: var(--b-tabs-card-height-lg);\n}\n\n.b-tabs--small.b-tabs--card .b-tabs__tab,\n.b-tabs--small.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-sm);\n  height: var(--b-tabs-card-height-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Ink bar (line type indicator)\n   ───────────────────────────────────────────── */\n.b-tabs__ink-bar {\n  position: absolute;\n  background: var(--b-tabs-ink-bar-color);\n  transition:\n    left var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    width var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    top var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    height var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);\n  pointer-events: none;\n}\n\n.b-tabs--top .b-tabs__ink-bar,\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: 0;\n  height: 2px;\n}\n\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: auto;\n  top: 0;\n}\n\n.b-tabs--left .b-tabs__ink-bar {\n  right: 0;\n  width: 2px;\n}\n\n.b-tabs--right .b-tabs__ink-bar {\n  left: 0;\n  width: 2px;\n}\n\n/* ─────────────────────────────────────────────\n   Close / Remove button\n   ───────────────────────────────────────────── */\n.b-tabs__tab-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.6;\n  transition:\n    opacity var(--b-tabs-transition-duration),\n    background var(--b-tabs-transition-duration);\n}\n\n.b-tabs__tab-remove:hover {\n  opacity: 1;\n  background: oklch(0% 0 0 / 8%);\n}\n\n.b-tabs__close-icon {\n  width: 12px;\n  height: 12px;\n}\n\n/* ─────────────────────────────────────────────\n   Add button\n   ───────────────────────────────────────────── */\n.b-tabs__add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n  cursor: pointer;\n  color: var(--b-tabs-item-color);\n  transition: color var(--b-tabs-transition-duration);\n}\n\n.b-tabs__add:hover {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__add:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n}\n\n.b-tabs__add-icon {\n  width: 16px;\n  height: 16px;\n}\n\n/* ─────────────────────────────────────────────\n   Extra content slots\n   ───────────────────────────────────────────── */\n.b-tabs__extra {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Content area\n   ───────────────────────────────────────────── */\n.b-tabs__content {\n  flex: 1;\n  min-height: var(--b-tabs-content-min-height);\n}\n\n.b-tabs__panel {\n  outline: none;\n}\n\n.b-tabs__panel--animated {\n  animation: b-tabs-fade-in var(--b-tabs-transition-duration) ease-in-out;\n}\n\n@keyframes b-tabs-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-tabs {\n  --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n  --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n  --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n  --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n  --b-tabs-border-color: oklch(35% 0.01 260);\n}\n\n[data-prefers-color='dark'] .b-tabs--card .b-tabs__tab--active,\n[data-prefers-color='dark'] .b-tabs--editable-card .b-tabs__tab--active {\n  background: oklch(20% 0.015 260);\n  border-bottom-color: oklch(20% 0.015 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tabs {\n    --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n    --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n    --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n    --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n    --b-tabs-border-color: oklch(35% 0.01 260);\n  }\n  [data-prefers-color='system'] .b-tabs--editable-card .b-tabs__tab--active {\n    background: oklch(20% 0.015 260);\n    border-bottom-color: oklch(20% 0.015 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tabs {\n    --b-tabs-transition-duration: 0ms;\n  }\n\n  .b-tabs__panel--animated {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system236.js

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

package/dist/design-system236.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system236.js","names":[],"sources":["../src/components/BTabs/BTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component, VNode } from 'vue';\nimport { computed, defineComponent, h, nextTick, onMounted, provide, ref, useId, watch } from 'vue';\n\nimport type {\n  BTabItem,\n  BTabPaneRegistration,\n  BTabsContext,\n  BTabsPlacement,\n  BTabsSize,\n  BTabsType,\n} from './types';\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  activeKey,\n  defaultActiveKey,\n  items = [],\n  type = 'line',\n  placement = 'top',\n  size = 'middle',\n  centered = false,\n  animated = true,\n  hideAdd = false,\n  destroyOnHidden = false,\n  keepAlive = false,\n  tabBarGutter,\n} = defineProps<{\n  /** Current active tab key (controlled via v-model:activeKey). */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. @default first non-disabled tab */\n  defaultActiveKey?: string;\n  /** Tab items configuration. When provided and non-empty, BTabPane children are ignored. */\n  items?: BTabItem[];\n  /** Visual style of the tabs. @default 'line' */\n  type?: BTabsType;\n  /** Position of the tab bar. @default 'top' */\n  placement?: BTabsPlacement;\n  /** Size preset for the tab bar. @default 'middle' */\n  size?: BTabsSize;\n  /** Whether to center the tab items. @default false */\n  centered?: boolean;\n  /** Whether content switching is animated. @default true */\n  animated?: boolean;\n  /** Whether to hide the add button in editable-card mode. @default false */\n  hideAdd?: boolean;\n  /** Whether to destroy inactive tab content globally. @default false */\n  destroyOnHidden?: boolean;\n  /** Whether to keep component state alive when switching tabs globally. @default false */\n  keepAlive?: boolean;\n  /** Gap between tabs in pixels. */\n  tabBarGutter?: number;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the active tab changes. */\n  (e: 'update:activeKey', key: string): void;\n  /** Fires when the active tab changes (alias for update:activeKey). */\n  (e: 'change', key: string): void;\n  /** Fires when a tab is clicked. */\n  (e: 'tabClick', key: string, event: MouseEvent): void;\n  /** Fires when a tab is added or removed (editable-card only). */\n  (e: 'edit', key: string | null, action: 'add' | 'remove'): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Items mode: receives { item } scoped prop. Pane mode: contains BTabPane children (no props). */\n  default?: (props: { item?: BTabItem }) => unknown;\n  /** Custom label renderer for each tab (items mode). */\n  label?: (props: { item: BTabItem; active: boolean }) => unknown;\n  /** Extra content on the left side of the tab bar. */\n  leftExtra?: () => unknown;\n  /** Extra content on the right side of the tab bar. */\n  rightExtra?: () => unknown;\n  /** Custom add button (editable-card type). */\n  addIcon?: () => unknown;\n  /** Custom remove/close icon (editable-card type). */\n  removeIcon?: (props: { item: BTabItem }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Instance-scoped ID prefix (prevents duplicate IDs when multiple BTabs on page)\n// ─────────────────────────────────────────────\nconst uid = useId();\nconst tabId = (key: string) => `${uid}-tab-${key}`;\nconst panelId = (key: string) => `${uid}-tabpanel-${key}`;\n\n// ─────────────────────────────────────────────\n// Pane registry (for BTabPane child component API)\n// ─────────────────────────────────────────────\nconst paneRegistry = ref(new Map<string, BTabPaneRegistration>());\nconst paneOrder = ref<string[]>([]);\n\nfunction registerPane(pane: BTabPaneRegistration) {\n  paneRegistry.value.set(pane.key, pane);\n  if (!paneOrder.value.includes(pane.key)) {\n    paneOrder.value = [...paneOrder.value, pane.key];\n  }\n}\n\nfunction unregisterPane(key: string) {\n  paneRegistry.value.delete(key);\n  paneOrder.value = paneOrder.value.filter((k) => k !== key);\n}\n\nfunction updatePane(key: string, pane: BTabPaneRegistration) {\n  paneRegistry.value.set(key, pane);\n}\n\n// ─────────────────────────────────────────────\n// Mode detection + effective items\n// ─────────────────────────────────────────────\nconst isItemsMode = computed(() => items && items.length > 0);\n\nconst effectiveItems = computed<BTabItem[]>(() => {\n  if (isItemsMode.value) return items;\n  return paneOrder.value\n    .map((key) => paneRegistry.value.get(key))\n    .filter((p): p is BTabPaneRegistration => p !== undefined)\n    .map((pane) => ({\n      key: pane.key,\n      label: pane.label,\n      disabled: pane.disabled,\n      closable: pane.closable,\n      destroyOnHidden: pane.destroyOnHidden,\n      forceRender: pane.forceRender,\n      keepAlive: pane.keepAlive,\n    }));\n});\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => activeKey !== undefined);\n\nconst firstEnabledKey = computed(\n  () => effectiveItems.value.find((i) => !i.disabled)?.key ?? effectiveItems.value[0]?.key ?? '',\n);\n\nconst internalKey = ref<string>(activeKey ?? defaultActiveKey ?? firstEnabledKey.value);\n\nwatch(\n  () => activeKey,\n  (val) => {\n    if (val !== undefined) internalKey.value = val;\n  },\n);\n\nwatch(effectiveItems, () => {\n  if (\n    internalKey.value === undefined ||\n    !effectiveItems.value.find((i) => i.key === internalKey.value)\n  ) {\n    internalKey.value = firstEnabledKey.value;\n  }\n});\n\nconst currentKey = computed(() => (isControlled.value ? activeKey! : internalKey.value));\n\n// ─────────────────────────────────────────────\n// Provide context to BTabPane children\n// ─────────────────────────────────────────────\nconst context: BTabsContext = {\n  activeKey: currentKey,\n  type: computed(() => type),\n  size: computed(() => size),\n  placement: computed(() => placement),\n  keepAlive: computed(() => keepAlive),\n  destroyOnHidden: computed(() => destroyOnHidden),\n  register: registerPane,\n  unregister: unregisterPane,\n  update: updatePane,\n};\n\nprovide(BTabsContextKey, context);\n\n// ─────────────────────────────────────────────\n// Tab activation\n// ─────────────────────────────────────────────\nfunction activateTab(key: string, event?: MouseEvent) {\n  const item = effectiveItems.value.find((i) => i.key === key);\n  if (!item || item.disabled) return;\n\n  if (event) {\n    emit('tabClick', key, event);\n  }\n\n  if (key === currentKey.value) return;\n\n  if (!isControlled.value) {\n    internalKey.value = key;\n  }\n  emit('update:activeKey', key);\n  emit('change', key);\n}\n\n// ─────────────────────────────────────────────\n// Editable-card actions\n// ─────────────────────────────────────────────\nfunction onAdd() {\n  emit('edit', null, 'add');\n}\n\nfunction onRemove(key: string, event: MouseEvent) {\n  event.stopPropagation();\n  emit('edit', key, 'remove');\n}\n\n// ─────────────────────────────────────────────\n// Ink bar positioning\n// ─────────────────────────────────────────────\nconst tabListRef = ref<HTMLElement | null>(null);\nconst inkBarStyle = ref<Record<string, string>>({});\n\nfunction updateInkBar() {\n  if (!tabListRef.value || type !== 'line') return;\n  const activeEl = tabListRef.value.querySelector<HTMLElement>('.b-tabs__tab--active');\n  if (!activeEl) return;\n\n  const isVertical = placement === 'left' || placement === 'right';\n\n  if (isVertical) {\n    inkBarStyle.value = {\n      top: `${activeEl.offsetTop}px`,\n      height: `${activeEl.offsetHeight}px`,\n    };\n  } else {\n    inkBarStyle.value = {\n      left: `${activeEl.offsetLeft}px`,\n      width: `${activeEl.offsetWidth}px`,\n    };\n  }\n}\n\nwatch(currentKey, async () => {\n  await nextTick();\n  updateInkBar();\n});\n\nonMounted(() => {\n  updateInkBar();\n});\n\n// ─────────────────────────────────────────────\n// Keyboard navigation (roving tabindex)\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent) {\n  const isVertical = placement === 'left' || placement === 'right';\n  const nextKeys = isVertical ? ['ArrowDown'] : ['ArrowRight'];\n  const prevKeys = isVertical ? ['ArrowUp'] : ['ArrowLeft'];\n\n  // Delete key closes the active tab in editable-card mode\n  if (event.key === 'Delete' && type === 'editable-card') {\n    const item = effectiveItems.value.find((i) => i.key === currentKey.value);\n    if (item && item.closable !== false) {\n      event.preventDefault();\n      emit('edit', currentKey.value, 'remove');\n    }\n    return;\n  }\n\n  if ([...nextKeys, ...prevKeys, 'Home', 'End'].includes(event.key)) {\n    event.preventDefault();\n    const enabledItems = effectiveItems.value.filter((i) => !i.disabled);\n    if (enabledItems.length === 0) return;\n\n    const currentIdx = enabledItems.findIndex((i) => i.key === currentKey.value);\n\n    let targetIdx: number;\n    if (nextKeys.includes(event.key)) {\n      targetIdx = (currentIdx + 1) % enabledItems.length;\n    } else if (prevKeys.includes(event.key)) {\n      targetIdx = (currentIdx - 1 + enabledItems.length) % enabledItems.length;\n    } else if (event.key === 'Home') {\n      targetIdx = 0;\n    } else {\n      targetIdx = enabledItems.length - 1;\n    }\n\n    const targetKey = enabledItems[targetIdx].key;\n    activateTab(targetKey);\n\n    nextTick(() => {\n      if (!tabListRef.value) return;\n      const targetEl = tabListRef.value.querySelector<HTMLElement>(`[data-tab-key=\"${targetKey}\"]`);\n      targetEl?.focus();\n    });\n  }\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive + content visibility\n// ─────────────────────────────────────────────\nconst renderedKeys = ref<Set<string>>(new Set([currentKey.value]));\n\nwatch(currentKey, (key) => {\n  renderedKeys.value.add(key);\n});\n\nfunction shouldUseKeepAlive(item: BTabItem): boolean {\n  if (item.destroyOnHidden) return false;\n  if (item.keepAlive !== undefined) return item.keepAlive;\n  if (destroyOnHidden) return false;\n  return keepAlive;\n}\n\nfunction shouldRender(item: BTabItem): boolean {\n  if (item.forceRender) return true;\n  if (shouldUseKeepAlive(item)) return true;\n  const itemDestroy = item.destroyOnHidden ?? destroyOnHidden;\n  if (itemDestroy) return item.key === currentKey.value;\n  return renderedKeys.value.has(item.key);\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive panel wrapper components\n// ─────────────────────────────────────────────\nconst panelWrappers = computed<Record<string, Component>>(() => {\n  const wrappers: Record<string, Component> = {};\n  for (const item of effectiveItems.value) {\n    if (!shouldUseKeepAlive(item)) continue;\n    wrappers[item.key] = defineComponent({\n      name: `BTabPanel_${item.key}`,\n      setup() {\n        return () => {\n          const pane = paneRegistry.value.get(item.key);\n          if (pane) {\n            return pane.renderContent();\n          }\n          return null;\n        };\n      },\n    });\n  }\n  return wrappers;\n});\n\nfunction getPaneContent(key: string): VNode[] {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderContent() ?? [];\n}\n\nfunction getPaneLabel(key: string): VNode[] | undefined {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderLabel?.();\n}\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-tabs',\n  `b-tabs--${type}`,\n  `b-tabs--${placement}`,\n  `b-tabs--${size}`,\n  { 'b-tabs--centered': centered },\n]);\n\nconst tabBarGutterStyle = computed(() =>\n  tabBarGutter !== undefined ? { gap: `${tabBarGutter}px` } : undefined,\n);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <!-- Tab bar -->\n    <div class=\"b-tabs__header\">\n      <div v-if=\"$slots.leftExtra\" class=\"b-tabs__extra b-tabs__extra--left\">\n        <slot name=\"leftExtra\" />\n      </div>\n\n      <div\n        ref=\"tabListRef\"\n        class=\"b-tabs__list\"\n        role=\"tablist\"\n        :aria-orientation=\"\n          placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal'\n        \"\n        :style=\"tabBarGutterStyle\"\n      >\n        <div\n          v-for=\"item in effectiveItems\"\n          :key=\"item.key\"\n          :data-tab-key=\"item.key\"\n          class=\"b-tabs__tab\"\n          :class=\"{\n            'b-tabs__tab--active': item.key === currentKey,\n            'b-tabs__tab--disabled': item.disabled,\n          }\"\n          role=\"tab\"\n          :aria-selected=\"item.key === currentKey\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :aria-controls=\"panelId(item.key)\"\n          :id=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          @click=\"!item.disabled && activateTab(item.key, $event)\"\n          @keydown=\"onKeydown\"\n        >\n          <span class=\"b-tabs__tab-label\">\n            <!-- Items mode: use label slot or item.label -->\n            <template v-if=\"isItemsMode\">\n              <slot name=\"label\" :item=\"item\" :active=\"item.key === currentKey\">\n                {{ item.label }}\n              </slot>\n            </template>\n            <!-- Pane mode: use pane's renderLabel or label string -->\n            <template v-else>\n              <component\n                v-if=\"getPaneLabel(item.key)\"\n                :is=\"() => h('span', getPaneLabel(item.key)!)\"\n              />\n              <template v-else>{{ item.label }}</template>\n            </template>\n          </span>\n          <span\n            v-if=\"type === 'editable-card' && item.closable !== false\"\n            class=\"b-tabs__tab-remove\"\n            aria-hidden=\"true\"\n            @click.stop=\"onRemove(item.key, $event)\"\n          >\n            <slot name=\"removeIcon\" :item=\"item\">\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" class=\"b-tabs__close-icon\">\n                <path\n                  d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\n                />\n              </svg>\n            </slot>\n          </span>\n        </div>\n\n        <!-- Ink bar (line type only) -->\n        <div\n          v-if=\"type === 'line'\"\n          class=\"b-tabs__ink-bar\"\n          aria-hidden=\"true\"\n          :style=\"inkBarStyle\"\n        />\n      </div>\n\n      <!-- Add button (outside tablist to avoid aria-required-children violation) -->\n      <button\n        v-if=\"type === 'editable-card' && !hideAdd\"\n        class=\"b-tabs__add\"\n        aria-label=\"Add tab\"\n        @click=\"onAdd\"\n      >\n        <slot name=\"addIcon\">\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"b-tabs__add-icon\">\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div v-if=\"$slots.rightExtra\" class=\"b-tabs__extra b-tabs__extra--right\">\n        <slot name=\"rightExtra\" />\n      </div>\n    </div>\n\n    <!-- Hidden slot area for BTabPane registration (pane mode only) -->\n    <div v-if=\"!isItemsMode\" v-show=\"false\" aria-hidden=\"true\" style=\"display: none\">\n      <slot />\n    </div>\n\n    <!-- Tab panels -->\n    <div class=\"b-tabs__content\">\n      <template v-for=\"item in effectiveItems\" :key=\"item.key\">\n        <!-- KeepAlive panels -->\n        <div\n          v-if=\"shouldUseKeepAlive(item)\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n          v-show=\"item.key === currentKey\"\n        >\n          <!-- Pane mode: KeepAlive caches wrapper component instances -->\n          <KeepAlive v-if=\"!isItemsMode\">\n            <component\n              v-if=\"item.key === currentKey\"\n              :is=\"panelWrappers[item.key] ?? (() => null)\"\n              :key=\"item.key\"\n            />\n          </KeepAlive>\n          <!-- Items mode: always render slot content; v-show on parent preserves state -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n        </div>\n\n        <!-- Standard panels (no KeepAlive) -->\n        <div\n          v-else-if=\"shouldRender(item)\"\n          v-show=\"item.key === currentKey\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n        >\n          <!-- Items mode: scoped slot -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n          <!-- Pane mode: render registered content -->\n          <component v-else :is=\"() => getPaneContent(item.key)\" />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTabs - Design tokens (scoped to .b-tabs)\n   ───────────────────────────────────────────── */\n.b-tabs {\n  --b-tabs-ink-bar-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-active-color: oklch(35% 0.2 260);\n  --b-tabs-item-color: oklch(30% 0.02 260 / 88%);\n  --b-tabs-item-hover-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-selected-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-disabled-color: oklch(30% 0.02 260 / 25%);\n  --b-tabs-title-font-size: 14px;\n  --b-tabs-title-font-size-lg: 16px;\n  --b-tabs-title-font-size-sm: 14px;\n  --b-tabs-card-bg: oklch(97% 0.003 260 / 50%);\n  --b-tabs-card-height: 40px;\n  --b-tabs-card-height-lg: 48px;\n  --b-tabs-card-height-sm: 32px;\n  --b-tabs-card-padding: 8px 16px;\n  --b-tabs-card-padding-lg: 11px 16px;\n  --b-tabs-card-padding-sm: 4px 8px;\n  --b-tabs-card-gutter: 2px;\n  --b-tabs-card-border-radius: 8px 8px 0 0;\n  --b-tabs-horizontal-item-gutter: 32px;\n  --b-tabs-horizontal-item-padding: 12px 0;\n  --b-tabs-horizontal-item-padding-lg: 16px 0;\n  --b-tabs-horizontal-item-padding-sm: 8px 0;\n  --b-tabs-horizontal-margin: 0 0 16px 0;\n  --b-tabs-vertical-item-margin: 16px 0 0 0;\n  --b-tabs-vertical-item-padding: 8px 24px;\n  --b-tabs-border-color: oklch(80% 0.005 260);\n  --b-tabs-content-min-height: 0;\n  --b-tabs-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n  --b-tabs-transition-duration: 200ms;\n\n  display: flex;\n  flex-direction: column;\n  font-size: var(--b-tabs-title-font-size);\n  line-height: 1.5;\n}\n\n/* ── Placement layouts ── */\n.b-tabs--left {\n  flex-direction: row;\n}\n\n.b-tabs--right {\n  flex-direction: row-reverse;\n}\n\n.b-tabs--bottom {\n  flex-direction: column-reverse;\n}\n\n/* ── Size variants ── */\n.b-tabs--large {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-lg);\n}\n\n.b-tabs--small {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Header\n   ───────────────────────────────────────────── */\n.b-tabs__header {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.b-tabs--top .b-tabs__header,\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n  margin: var(--b-tabs-horizontal-margin);\n}\n\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: none;\n  border-top: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--left .b-tabs__header,\n.b-tabs--right .b-tabs__header {\n  flex-direction: column;\n  align-items: stretch;\n  border-right: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--right .b-tabs__header {\n  border-right: none;\n  border-left: 1px solid var(--b-tabs-border-color);\n}\n\n/* Card type removes border from header */\n.b-tabs--card .b-tabs__header,\n.b-tabs--editable-card .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n}\n\n/* ─────────────────────────────────────────────\n   Tab list (roving tabindex container)\n   ───────────────────────────────────────────── */\n.b-tabs__list {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: var(--b-tabs-horizontal-item-gutter);\n}\n\n.b-tabs--centered .b-tabs__list {\n  justify-content: center;\n}\n\n.b-tabs--left .b-tabs__list,\n.b-tabs--right .b-tabs__list {\n  flex-direction: column;\n  gap: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Individual tab\n   ───────────────────────────────────────────── */\n.b-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  padding: var(--b-tabs-horizontal-item-padding);\n  border: none;\n  background: none;\n  color: var(--b-tabs-item-color);\n  font-size: inherit;\n  font-family: inherit;\n  cursor: pointer;\n  white-space: nowrap;\n  outline: none;\n  transition: color var(--b-tabs-transition-duration);\n  line-height: 1.5;\n}\n\n.b-tabs__tab:hover:not(.b-tabs__tab--disabled) {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__tab--active {\n  color: var(--b-tabs-item-selected-color);\n  font-weight: 500;\n}\n\n.b-tabs__tab--active:hover {\n  color: var(--b-tabs-item-active-color);\n}\n\n.b-tabs__tab--disabled {\n  color: var(--b-tabs-item-disabled-color);\n  cursor: not-allowed;\n}\n\n.b-tabs__tab:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n  border-radius: 4px;\n}\n\n/* Large size - tab padding */\n.b-tabs--large .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-lg);\n}\n\n/* Small size - tab padding */\n.b-tabs--small .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-sm);\n}\n\n/* Vertical tabs */\n.b-tabs--left .b-tabs__tab,\n.b-tabs--right .b-tabs__tab {\n  padding: var(--b-tabs-vertical-item-padding);\n  justify-content: flex-start;\n}\n\n.b-tabs--left .b-tabs__tab:not(:first-child),\n.b-tabs--right .b-tabs__tab:not(:first-child) {\n  margin: var(--b-tabs-vertical-item-margin);\n}\n\n/* ─────────────────────────────────────────────\n   Card-type tab\n   ───────────────────────────────────────────── */\n.b-tabs--card .b-tabs__list,\n.b-tabs--editable-card .b-tabs__list {\n  gap: var(--b-tabs-card-gutter);\n}\n\n.b-tabs--card .b-tabs__tab,\n.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n}\n\n.b-tabs--card .b-tabs__tab--active,\n.b-tabs--editable-card .b-tabs__tab--active {\n  background: white;\n  border-bottom-color: white;\n}\n\n.b-tabs--large.b-tabs--card .b-tabs__tab,\n.b-tabs--large.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-lg);\n  height: var(--b-tabs-card-height-lg);\n}\n\n.b-tabs--small.b-tabs--card .b-tabs__tab,\n.b-tabs--small.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-sm);\n  height: var(--b-tabs-card-height-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Ink bar (line type indicator)\n   ───────────────────────────────────────────── */\n.b-tabs__ink-bar {\n  position: absolute;\n  background: var(--b-tabs-ink-bar-color);\n  transition:\n    left var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    width var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    top var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    height var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);\n  pointer-events: none;\n}\n\n.b-tabs--top .b-tabs__ink-bar,\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: 0;\n  height: 2px;\n}\n\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: auto;\n  top: 0;\n}\n\n.b-tabs--left .b-tabs__ink-bar {\n  right: 0;\n  width: 2px;\n}\n\n.b-tabs--right .b-tabs__ink-bar {\n  left: 0;\n  width: 2px;\n}\n\n/* ─────────────────────────────────────────────\n   Close / Remove button\n   ───────────────────────────────────────────── */\n.b-tabs__tab-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.6;\n  transition:\n    opacity var(--b-tabs-transition-duration),\n    background var(--b-tabs-transition-duration);\n}\n\n.b-tabs__tab-remove:hover {\n  opacity: 1;\n  background: oklch(0% 0 0 / 8%);\n}\n\n.b-tabs__close-icon {\n  width: 12px;\n  height: 12px;\n}\n\n/* ─────────────────────────────────────────────\n   Add button\n   ───────────────────────────────────────────── */\n.b-tabs__add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n  cursor: pointer;\n  color: var(--b-tabs-item-color);\n  transition: color var(--b-tabs-transition-duration);\n}\n\n.b-tabs__add:hover {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__add:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n}\n\n.b-tabs__add-icon {\n  width: 16px;\n  height: 16px;\n}\n\n/* ─────────────────────────────────────────────\n   Extra content slots\n   ───────────────────────────────────────────── */\n.b-tabs__extra {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Content area\n   ───────────────────────────────────────────── */\n.b-tabs__content {\n  flex: 1;\n  min-height: var(--b-tabs-content-min-height);\n}\n\n.b-tabs__panel {\n  outline: none;\n}\n\n.b-tabs__panel--animated {\n  animation: b-tabs-fade-in var(--b-tabs-transition-duration) ease-in-out;\n}\n\n@keyframes b-tabs-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-tabs {\n  --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n  --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n  --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n  --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n  --b-tabs-border-color: oklch(35% 0.01 260);\n}\n\n[data-prefers-color='dark'] .b-tabs--card .b-tabs__tab--active,\n[data-prefers-color='dark'] .b-tabs--editable-card .b-tabs__tab--active {\n  background: oklch(20% 0.015 260);\n  border-bottom-color: oklch(20% 0.015 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tabs {\n    --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n    --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n    --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n    --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n    --b-tabs-border-color: oklch(35% 0.01 260);\n  }\n  [data-prefers-color='system'] .b-tabs--editable-card .b-tabs__tab--active {\n    background: oklch(20% 0.015 260);\n    border-bottom-color: oklch(20% 0.015 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tabs {\n    --b-tabs-transition-duration: 0ms;\n  }\n\n  .b-tabs__panel--animated {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/{design-system202.js → design-system237.js}

@@ -119,4 +119,4 @@ var _ = ["aria-hidden"], v = { class: "b-tag__content" }, y = ["data-icon"], b =
 //#endregion
 export { x as default };
 
-//# sourceMappingURL=design-system202.js.map
+//# sourceMappingURL=design-system237.js.map