@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/{design-system63.js.map → design-system70.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system63.js","names":[],"sources":["../src/components/BDatePicker/BDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, ref, watch } from 'vue';\n\nimport {\n  BDatePickerPlacement,\n  BDatePickerSize,\n  BDatePickerStatus,\n  BDatePickerType,\n  BDatePickerVariant,\n  type BDatePickerDisabledDateInfo,\n  type BDatePickerPreset,\n} from './types';\n\nconst {\n  picker = BDatePickerType.Date,\n  size = BDatePickerSize.Medium,\n  variant = BDatePickerVariant.Outlined,\n  placeholder,\n  disabled = false,\n  inputReadOnly = false,\n  allowClear = true,\n  showNow = true,\n  showWeek = false,\n  format,\n  locale,\n  placement: _placement = BDatePickerPlacement.BottomLeft,\n  status,\n  presets,\n  disabledDate,\n  minDate,\n  maxDate,\n  defaultOpen = false,\n  defaultValue,\n  defaultPickerValue,\n  open,\n} = defineProps<{\n  /** Picker type: date, week, month, quarter, year */\n  picker?: `${BDatePickerType}`;\n  /** Size of the input */\n  size?: `${BDatePickerSize}`;\n  /** Visual variant */\n  variant?: `${BDatePickerVariant}`;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Make input read-only */\n  inputReadOnly?: boolean;\n  /** Show clear button */\n  allowClear?: boolean;\n  /** Show \"Today\" / \"Now\" button */\n  showNow?: boolean;\n  /** Show week number column (date picker) */\n  showWeek?: boolean;\n  /** Date format string (e.g. 'YYYY-MM-DD', 'DD/MM/YYYY', 'MM-DD-YYYY') */\n  format?: string;\n  /** BCP 47 locale tag for formatting and calendar labels (e.g. 'en-US', 'vi-VN', 'de-DE') */\n  locale?: string;\n  /** Popup placement */\n  placement?: `${BDatePickerPlacement}`;\n  /** Validation status */\n  status?: `${BDatePickerStatus}`;\n  /** Preset quick-select values */\n  presets?: BDatePickerPreset[];\n  /** Function to determine if a date is disabled */\n  disabledDate?: (current: Date, info: BDatePickerDisabledDateInfo) => boolean;\n  /** Minimum selectable date */\n  minDate?: Date;\n  /** Maximum selectable date */\n  maxDate?: Date;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Default value (uncontrolled) */\n  defaultValue?: Date;\n  /** Default panel date */\n  defaultPickerValue?: Date;\n  /** Controlled open state */\n  open?: boolean;\n}>();\n\nconst model = defineModel<Date | null>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [date: Date | null, dateString: string];\n  openChange: [open: boolean];\n  panelChange: [date: Date, mode: string];\n  ok: [];\n}>();\n\ndefineExpose({\n  focus: () => inputEl.value?.focus(),\n  blur: () => inputEl.value?.blur(),\n});\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-date-picker-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// State\n// ─────────────────────────────────────────────\nconst inputEl = ref<HTMLInputElement | null>(null);\nconst panelEl = ref<HTMLElement | null>(null);\nconst isOpen = ref(defaultOpen);\nconst internalValue = ref<Date | null>(defaultValue ?? null);\nconst panelDate = ref<Date>(defaultPickerValue ?? defaultValue ?? new Date());\nconst panelMode = ref<string>(picker);\nconst hoveredDate = ref<Date | null>(null);\n\nconst selectedDate = computed({\n  get: () => model.value ?? internalValue.value,\n  set: (val) => {\n    internalValue.value = val;\n    model.value = val;\n  },\n});\n\nconst isPanelOpen = ref(open !== undefined ? !!open : defaultOpen);\n\n// ─────────────────────────────────────────────\n// Formatting & Locale\n// ─────────────────────────────────────────────\nconst resolvedLocale = computed(() => {\n  const tag = locale || navigator?.language || 'en-US';\n  try {\n    Intl.DateTimeFormat(tag);\n    return tag;\n  } catch {\n    return 'en-US';\n  }\n});\n\nconst defaultFormats: Record<string, string> = {\n  date: 'YYYY-MM-DD',\n  week: 'YYYY-[W]wo',\n  month: 'YYYY-MM',\n  quarter: 'YYYY-[Q]Q',\n  year: 'YYYY',\n};\n\nconst activeFormat = computed(() => format ?? defaultFormats[picker] ?? 'YYYY-MM-DD');\n\nfunction pad(n: number, len = 2): string {\n  return String(n).padStart(len, '0');\n}\n\nfunction getWeekNumber(d: Date): number {\n  const copy = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));\n  copy.setUTCDate(copy.getUTCDate() + 4 - (copy.getUTCDay() || 7));\n  const yearStart = new Date(Date.UTC(copy.getUTCFullYear(), 0, 1));\n  return Math.ceil(((copy.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);\n}\n\nfunction formatDate(date: Date | null): string {\n  if (!date) return '';\n  const y = date.getFullYear();\n  const m = date.getMonth() + 1;\n  const d = date.getDate();\n\n  let fmt = activeFormat.value;\n\n  // Escape sequences: text inside [] is literal\n  const DELIM = '￰';\n  const literals: string[] = [];\n  fmt = fmt.replace(/\\[([^\\]]*)\\]/g, (_, text) => {\n    literals.push(text);\n    return `${DELIM}${literals.length - 1}${DELIM}`;\n  });\n\n  // Token replacement (longest tokens first to avoid partial matches)\n  fmt = fmt.replace('YYYY', String(y));\n  fmt = fmt.replace('YY', String(y).slice(-2));\n  fmt = fmt.replace('MM', pad(m));\n  fmt = fmt.replace('M', String(m));\n  fmt = fmt.replace('DD', pad(d));\n  fmt = fmt.replace('D', String(d));\n  fmt = fmt.replace('wo', String(getWeekNumber(date)));\n  fmt = fmt.replace('Q', String(Math.ceil(m / 3)));\n\n  // Restore literals\n  fmt = fmt.replace(new RegExp(`${DELIM}(\\\\d+)${DELIM}`, 'g'), (_, idx) => literals[Number(idx)]);\n\n  return fmt;\n}\n\nfunction parseInput(value: string): Date | null {\n  if (!value) return null;\n\n  // Try parsing based on current format pattern\n  const fmt = activeFormat.value;\n  const parsed = parseByFormat(value, fmt);\n  if (parsed) return parsed;\n\n  // Fallback: ISO format\n  const iso = value.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n  if (iso) {\n    const date = new Date(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]));\n    if (!isNaN(date.getTime())) return date;\n  }\n\n  // Fallback: native Date parsing\n  const date = new Date(value);\n  return isNaN(date.getTime()) ? null : date;\n}\n\nfunction parseByFormat(value: string, fmt: string): Date | null {\n  let regex = fmt.replace(/\\[([^\\]]*)\\]/g, (_, text) => escapeRegex(text));\n  const groups: { token: string; pos: number }[] = [];\n\n  const tokenMap: [string, string][] = [\n    ['YYYY', '(\\\\d{4})'],\n    ['YY', '(\\\\d{2})'],\n    ['MM', '(\\\\d{2})'],\n    ['M', '(\\\\d{1,2})'],\n    ['DD', '(\\\\d{2})'],\n    ['D', '(\\\\d{1,2})'],\n  ];\n\n  for (const [token, pattern] of tokenMap) {\n    const idx = regex.indexOf(token);\n    if (idx !== -1) {\n      regex = regex.replace(token, pattern);\n      groups.push({ token, pos: idx });\n    }\n  }\n\n  groups.sort((a, b) => a.pos - b.pos);\n\n  regex = regex.replace('wo', '\\\\d{1,2}');\n  regex = regex.replace('Q', '\\\\d');\n\n  try {\n    const match = value.match(new RegExp(`^${regex}$`));\n    if (!match) return null;\n\n    let year = new Date().getFullYear();\n    let month = 1;\n    let day = 1;\n\n    groups.forEach(({ token }, i) => {\n      const val = Number(match[i + 1]);\n      switch (token) {\n        case 'YYYY':\n          year = val;\n          break;\n        case 'YY':\n          year = 2000 + val;\n          break;\n        case 'MM':\n        case 'M':\n          month = val;\n          break;\n        case 'DD':\n        case 'D':\n          day = val;\n          break;\n      }\n    });\n\n    const date = new Date(year, month - 1, day);\n    if (isNaN(date.getTime())) return null;\n    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)\n      return null;\n    return date;\n  } catch {\n    return null;\n  }\n}\n\nfunction escapeRegex(str: string): string {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nconst displayValue = computed(() => formatDate(selectedDate.value));\n\n// ─────────────────────────────────────────────\n// Locale-aware calendar labels\n// ─────────────────────────────────────────────\nconst weekdayLabels = computed(() => {\n  const loc = resolvedLocale.value;\n  const labels: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    // Jan 7, 2024 is a Sunday — offset by i to get Sun..Sat\n    const day = new Date(2024, 0, 7 + i);\n    labels.push(day.toLocaleDateString(loc, { weekday: 'short' }).slice(0, 2));\n  }\n  return labels;\n});\n\nconst monthLabels = computed(() => {\n  const loc = resolvedLocale.value;\n  return Array.from({ length: 12 }, (_, i) =>\n    new Date(2024, i, 1).toLocaleDateString(loc, { month: 'short' }),\n  );\n});\n\nconst todayLabel = computed(() => {\n  const loc = resolvedLocale.value;\n  // Use Intl to get localized \"Today\" - fallback to English\n  try {\n    const rtf = new Intl.RelativeTimeFormat(loc, { numeric: 'auto' });\n    const parts = rtf.formatToParts(0, 'day');\n    const value = parts.find((p) => p.type === 'literal')?.value;\n    if (value && value.trim()) return value.trim().charAt(0).toUpperCase() + value.trim().slice(1);\n  } catch {\n    /* fallback */\n  }\n  return 'Today';\n});\n\n// ─────────────────────────────────────────────\n// Calendar data generation\n// ─────────────────────────────────────────────\nconst calendarDates = computed(() => {\n  const year = panelDate.value.getFullYear();\n  const month = panelDate.value.getMonth();\n  const firstDay = new Date(year, month, 1);\n  const startDay = firstDay.getDay();\n  const dates: { date: Date; current: boolean }[] = [];\n\n  for (let i = startDay - 1; i >= 0; i--) {\n    dates.push({ date: new Date(year, month, -i), current: false });\n  }\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n  for (let i = 1; i <= daysInMonth; i++) {\n    dates.push({ date: new Date(year, month, i), current: true });\n  }\n  const remaining = 42 - dates.length;\n  for (let i = 1; i <= remaining; i++) {\n    dates.push({ date: new Date(year, month + 1, i), current: false });\n  }\n  return dates;\n});\n\nconst calendarMonths = computed(() => {\n  return monthLabels.value.map((label, idx) => ({\n    label,\n    month: idx,\n    year: panelDate.value.getFullYear(),\n  }));\n});\n\nconst calendarYears = computed(() => {\n  const year = panelDate.value.getFullYear();\n  const decadeStart = Math.floor(year / 10) * 10;\n  const years: { year: number; current: boolean }[] = [];\n  for (let i = decadeStart - 1; i <= decadeStart + 10; i++) {\n    years.push({ year: i, current: i >= decadeStart && i < decadeStart + 10 });\n  }\n  return years;\n});\n\nconst calendarQuarters = computed(() => {\n  const year = panelDate.value.getFullYear();\n  return [1, 2, 3, 4].map((q) => ({ quarter: q, year, label: `Q${q}` }));\n});\n\nconst panelHeading = computed(() => {\n  const y = panelDate.value.getFullYear();\n  const m = panelDate.value.getMonth();\n  if (panelMode.value === 'date' || panelMode.value === 'week') {\n    return `${monthLabels.value[m]} ${y}`;\n  }\n  if (panelMode.value === 'month' || panelMode.value === 'quarter') {\n    return `${y}`;\n  }\n  if (panelMode.value === 'year') {\n    const decadeStart = Math.floor(y / 10) * 10;\n    return `${decadeStart} - ${decadeStart + 9}`;\n  }\n  return `${y}`;\n});\n\n// ─────────────────────────────────────────────\n// Date checks\n// ─────────────────────────────────────────────\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isToday(d: Date): boolean {\n  return isSameDay(d, new Date());\n}\n\nfunction isSelected(d: Date): boolean {\n  return selectedDate.value ? isSameDay(d, selectedDate.value) : false;\n}\n\nfunction isDateDisabled(d: Date): boolean {\n  if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()))\n    return true;\n  if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()))\n    return true;\n  if (disabledDate) return disabledDate(d, { type: picker as `${BDatePickerType}` });\n  return false;\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  inputEl.value?.focus();\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) {\n    closePanel();\n  } else {\n    openPanel();\n  }\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) {\n    emit('openChange', false);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Selection handlers\n// ─────────────────────────────────────────────\nfunction selectDate(d: Date) {\n  if (isDateDisabled(d)) return;\n  selectedDate.value = d;\n  panelDate.value = new Date(d);\n  emit('change', d, formatDate(d));\n  closePanel();\n}\n\nfunction selectMonth(month: number) {\n  if (picker === BDatePickerType.Month) {\n    const d = new Date(panelDate.value.getFullYear(), month, 1);\n    selectedDate.value = d;\n    emit('change', d, formatDate(d));\n    closePanel();\n  } else {\n    panelDate.value = new Date(panelDate.value.getFullYear(), month, 1);\n    panelMode.value = 'date';\n    emit('panelChange', panelDate.value, 'date');\n  }\n}\n\nfunction selectYear(year: number) {\n  if (picker === BDatePickerType.Year) {\n    const d = new Date(year, 0, 1);\n    selectedDate.value = d;\n    emit('change', d, formatDate(d));\n    closePanel();\n  } else {\n    panelDate.value = new Date(year, panelDate.value.getMonth(), 1);\n    panelMode.value = picker === BDatePickerType.Month ? 'month' : 'date';\n    emit('panelChange', panelDate.value, panelMode.value);\n  }\n}\n\nfunction selectQuarter(quarter: number) {\n  const d = new Date(panelDate.value.getFullYear(), (quarter - 1) * 3, 1);\n  selectedDate.value = d;\n  emit('change', d, formatDate(d));\n  closePanel();\n}\n\nfunction selectToday() {\n  const today = new Date();\n  today.setHours(0, 0, 0, 0);\n  selectDate(today);\n}\n\nfunction selectPreset(preset: BDatePickerPreset) {\n  const val = typeof preset.value === 'function' ? preset.value() : preset.value;\n  selectDate(val);\n}\n\nfunction clearValue(e: Event) {\n  e.stopPropagation();\n  selectedDate.value = null;\n  emit('change', null, '');\n}\n\n// ─────────────────────────────────────────────\n// Navigation\n// ─────────────────────────────────────────────\nfunction prevMonth() {\n  panelDate.value = new Date(panelDate.value.getFullYear(), panelDate.value.getMonth() - 1, 1);\n}\n\nfunction nextMonth() {\n  panelDate.value = new Date(panelDate.value.getFullYear(), panelDate.value.getMonth() + 1, 1);\n}\n\nfunction prevYear() {\n  panelDate.value = new Date(panelDate.value.getFullYear() - 1, panelDate.value.getMonth(), 1);\n}\n\nfunction nextYear() {\n  panelDate.value = new Date(panelDate.value.getFullYear() + 1, panelDate.value.getMonth(), 1);\n}\n\nfunction prevDecade() {\n  panelDate.value = new Date(panelDate.value.getFullYear() - 10, panelDate.value.getMonth(), 1);\n}\n\nfunction nextDecade() {\n  panelDate.value = new Date(panelDate.value.getFullYear() + 10, panelDate.value.getMonth(), 1);\n}\n\nfunction switchPanelMode(mode: string) {\n  panelMode.value = mode;\n  emit('panelChange', panelDate.value, mode);\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nconst inputText = ref('');\n\nfunction handleInputChange(e: Event) {\n  const value = (e.target as HTMLInputElement).value;\n  inputText.value = value;\n}\n\nfunction handleInputBlur() {\n  if (inputText.value) {\n    const parsed = parseInput(inputText.value);\n    if (parsed && !isDateDisabled(parsed)) {\n      selectedDate.value = parsed;\n      panelDate.value = new Date(parsed);\n      emit('change', parsed, formatDate(parsed));\n    }\n  }\n  inputText.value = '';\n}\n\nfunction handleInputKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter') {\n    if (!isPanelOpen.value) {\n      openPanel();\n    } else {\n      handleInputBlur();\n      closePanel();\n    }\n  } else if (e.key === 'Escape') {\n    closePanel();\n  } else if (e.key === 'ArrowDown' && !isPanelOpen.value) {\n    openPanel();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation in panel\n// ─────────────────────────────────────────────\nfunction handlePanelKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    closePanel();\n    return;\n  }\n\n  if (panelMode.value === 'date' || panelMode.value === 'week') {\n    handleDateKeydown(e);\n  } else if (panelMode.value === 'month') {\n    handleMonthKeydown(e);\n  } else if (panelMode.value === 'year') {\n    handleYearKeydown(e);\n  }\n}\n\nfunction handleDateKeydown(e: KeyboardEvent) {\n  const pd = new Date(panelDate.value);\n  let moved = false;\n\n  switch (e.key) {\n    case 'ArrowLeft':\n      pd.setDate(pd.getDate() - 1);\n      moved = true;\n      break;\n    case 'ArrowRight':\n      pd.setDate(pd.getDate() + 1);\n      moved = true;\n      break;\n    case 'ArrowUp':\n      pd.setDate(pd.getDate() - 7);\n      moved = true;\n      break;\n    case 'ArrowDown':\n      pd.setDate(pd.getDate() + 7);\n      moved = true;\n      break;\n    case 'Enter':\n    case ' ':\n      e.preventDefault();\n      selectDate(panelDate.value);\n      return;\n    case 'PageUp':\n      if (e.shiftKey) {\n        prevYear();\n      } else {\n        prevMonth();\n      }\n      e.preventDefault();\n      return;\n    case 'PageDown':\n      if (e.shiftKey) {\n        nextYear();\n      } else {\n        nextMonth();\n      }\n      e.preventDefault();\n      return;\n  }\n\n  if (moved) {\n    e.preventDefault();\n    panelDate.value = pd;\n  }\n}\n\nfunction handleMonthKeydown(e: KeyboardEvent) {\n  const currentMonth = panelDate.value.getMonth();\n  let newMonth = currentMonth;\n\n  switch (e.key) {\n    case 'ArrowLeft':\n      newMonth = currentMonth - 1;\n      break;\n    case 'ArrowRight':\n      newMonth = currentMonth + 1;\n      break;\n    case 'ArrowUp':\n      newMonth = currentMonth - 3;\n      break;\n    case 'ArrowDown':\n      newMonth = currentMonth + 3;\n      break;\n    case 'Enter':\n    case ' ':\n      e.preventDefault();\n      selectMonth(currentMonth);\n      return;\n    default:\n      return;\n  }\n\n  e.preventDefault();\n  if (newMonth < 0) {\n    panelDate.value = new Date(panelDate.value.getFullYear() - 1, 12 + newMonth, 1);\n  } else if (newMonth > 11) {\n    panelDate.value = new Date(panelDate.value.getFullYear() + 1, newMonth - 12, 1);\n  } else {\n    panelDate.value = new Date(panelDate.value.getFullYear(), newMonth, 1);\n  }\n}\n\nfunction handleYearKeydown(e: KeyboardEvent) {\n  const currentYear = panelDate.value.getFullYear();\n  let newYear = currentYear;\n\n  switch (e.key) {\n    case 'ArrowLeft':\n      newYear = currentYear - 1;\n      break;\n    case 'ArrowRight':\n      newYear = currentYear + 1;\n      break;\n    case 'ArrowUp':\n      newYear = currentYear - 3;\n      break;\n    case 'ArrowDown':\n      newYear = currentYear + 3;\n      break;\n    case 'Enter':\n    case ' ':\n      e.preventDefault();\n      selectYear(currentYear);\n      return;\n    default:\n      return;\n  }\n\n  e.preventDefault();\n  panelDate.value = new Date(newYear, panelDate.value.getMonth(), 1);\n}\n\n// ─────────────────────────────────────────────\n// Computed panel mode checks\n// ─────────────────────────────────────────────\nconst showDateGrid = computed(() => panelMode.value === 'date' || panelMode.value === 'week');\nconst showMonthGrid = computed(() => panelMode.value === 'month');\nconst showYearGrid = computed(() => panelMode.value === 'year');\nconst showQuarterGrid = computed(() => panelMode.value === 'quarter');\n\n// ─────────────────────────────────────────────\n// Placeholder\n// ─────────────────────────────────────────────\nconst effectivePlaceholder = computed(() => {\n  if (placeholder) return placeholder;\n  const map: Record<string, string> = {\n    date: 'Select date',\n    week: 'Select week',\n    month: 'Select month',\n    quarter: 'Select quarter',\n    year: 'Select year',\n  };\n  return map[picker] ?? 'Select date';\n});\n\n// ─────────────────────────────────────────────\n// Watch for controlled open\n// ─────────────────────────────────────────────\nwatch(\n  () => open,\n  (val) => {\n    if (val !== undefined) {\n      isPanelOpen.value = val;\n      isOpen.value = val;\n      if (val) {\n        panelEl.value?.showPopover?.();\n      } else {\n        panelEl.value?.hidePopover?.();\n      }\n    }\n  },\n);\n\nwatch(isPanelOpen, (val) => {\n  if (val) {\n    panelMode.value = picker;\n    if (selectedDate.value) {\n      panelDate.value = new Date(selectedDate.value);\n    }\n  }\n});\n</script>\n\n<template>\n  <div\n    class=\"b-date-picker\"\n    :class=\"[\n      `b-date-picker--${size}`,\n      `b-date-picker--${variant}`,\n      {\n        'b-date-picker--disabled': disabled,\n        'b-date-picker--focused': isPanelOpen,\n        'b-date-picker--clearable': allowClear && !!selectedDate && !disabled,\n        'b-date-picker--error': status === BDatePickerStatus.Error,\n        'b-date-picker--warning': status === BDatePickerStatus.Warning,\n      },\n    ]\"\n  >\n    <!-- Input trigger -->\n    <div class=\"b-date-picker__input-wrap\" @click=\"togglePanel\">\n      <input\n        ref=\"inputEl\"\n        class=\"b-date-picker__input\"\n        type=\"text\"\n        :value=\"inputText || displayValue\"\n        :placeholder=\"effectivePlaceholder\"\n        :disabled=\"disabled\"\n        :readonly=\"inputReadOnly\"\n        :aria-expanded=\"isPanelOpen\"\n        aria-haspopup=\"dialog\"\n        :aria-controls=\"isPanelOpen ? `b-date-picker-panel-${componentUID}` : undefined\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        @input=\"handleInputChange\"\n        @blur=\"handleInputBlur\"\n        @keydown=\"handleInputKeydown\"\n      />\n\n      <!-- Clear button -->\n      <button\n        v-if=\"allowClear && selectedDate && !disabled\"\n        class=\"b-date-picker__clear\"\n        type=\"button\"\n        aria-label=\"Clear date\"\n        tabindex=\"-1\"\n        @click=\"clearValue\"\n      >\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path\n            d=\"M8 1a7 7 0 110 14A7 7 0 018 1zm2.828 4.172a.5.5 0 00-.707 0L8 7.293 5.879 5.172a.5.5 0 10-.707.707L7.293 8l-2.121 2.121a.5.5 0 10.707.707L8 8.707l2.121 2.121a.5.5 0 10.707-.707L8.707 8l2.121-2.121a.5.5 0 000-.707z\"\n          />\n        </svg>\n      </button>\n\n      <!-- Suffix icon -->\n      <span class=\"b-date-picker__suffix\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n          <path\n            d=\"M4.5 1a.5.5 0 01.5.5V2h6v-.5a.5.5 0 011 0V2h1.5A1.5 1.5 0 0115 3.5v10a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 011 13.5v-10A1.5 1.5 0 012.5 2H4v-.5a.5.5 0 01.5-.5zM14 6H2v7.5a.5.5 0 00.5.5h11a.5.5 0 00.5-.5V6zm-1.5-3H12v.5a.5.5 0 01-1 0V3H5v.5a.5.5 0 01-1 0V3H2.5a.5.5 0 00-.5.5V5h12V3.5a.5.5 0 00-.5-.5z\"\n          />\n        </svg>\n      </span>\n    </div>\n\n    <!-- Panel (Popover API) -->\n    <div\n      :id=\"`b-date-picker-panel-${componentUID}`\"\n      ref=\"panelEl\"\n      class=\"b-date-picker__panel\"\n      popover\n      role=\"dialog\"\n      :aria-label=\"`${picker} picker`\"\n      :aria-modal=\"true\"\n      @toggle=\"handlePopoverToggle\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <div class=\"b-date-picker__panel-inner\">\n        <!-- Presets sidebar -->\n        <div v-if=\"presets && presets.length\" class=\"b-date-picker__presets\">\n          <button\n            v-for=\"preset in presets\"\n            :key=\"preset.label\"\n            class=\"b-date-picker__preset-btn\"\n            type=\"button\"\n            @click=\"selectPreset(preset)\"\n          >\n            {{ preset.label }}\n          </button>\n        </div>\n\n        <div class=\"b-date-picker__panel-main\">\n          <!-- Header -->\n          <div class=\"b-date-picker__header\">\n            <button\n              v-if=\"showDateGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Previous year\"\n              @click=\"prevYear\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M9.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L4.707 8l4.647-4.646z\"\n                />\n                <path\n                  d=\"M12.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L7.707 8l4.647-4.646z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showYearGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Previous decade\"\n              @click=\"prevDecade\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M9.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L4.707 8l4.647-4.646z\"\n                />\n                <path\n                  d=\"M12.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L7.707 8l4.647-4.646z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showDateGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Previous month\"\n              @click=\"prevMonth\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L5.707 8l4.647-4.646z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showMonthGrid || showQuarterGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Previous year\"\n              @click=\"prevYear\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L5.707 8l4.647-4.646z\"\n                />\n              </svg>\n            </button>\n\n            <!-- Heading -->\n            <button\n              class=\"b-date-picker__heading\"\n              type=\"button\"\n              :aria-label=\"`Current view: ${panelHeading}`\"\n              @click=\"\n                switchPanelMode(\n                  panelMode === 'date' || panelMode === 'week'\n                    ? 'month'\n                    : panelMode === 'month' || panelMode === 'quarter'\n                      ? 'year'\n                      : 'year',\n                )\n              \"\n            >\n              {{ panelHeading }}\n            </button>\n\n            <button\n              v-if=\"showDateGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Next month\"\n              @click=\"nextMonth\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showMonthGrid || showQuarterGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Next year\"\n              @click=\"nextYear\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showDateGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Next year\"\n              @click=\"nextYear\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z\"\n                />\n                <path\n                  d=\"M2.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L7.293 8 2.646 3.354z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showYearGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Next decade\"\n              @click=\"nextDecade\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z\"\n                />\n                <path\n                  d=\"M2.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L7.293 8 2.646 3.354z\"\n                />\n              </svg>\n            </button>\n          </div>\n\n          <!-- Date grid -->\n          <div v-if=\"showDateGrid\" class=\"b-date-picker__body\" role=\"grid\" aria-label=\"Calendar\">\n            <div class=\"b-date-picker__weekdays\" role=\"row\">\n              <div\n                v-if=\"showWeek\"\n                class=\"b-date-picker__weekday b-date-picker__week-number-header\"\n                role=\"columnheader\"\n                aria-label=\"Week\"\n              >\n                #\n              </div>\n              <div\n                v-for=\"day in weekdayLabels\"\n                :key=\"day\"\n                class=\"b-date-picker__weekday\"\n                role=\"columnheader\"\n                :aria-label=\"day\"\n              >\n                {{ day }}\n              </div>\n            </div>\n\n            <div v-for=\"(row, rowIdx) in 6\" :key=\"rowIdx\" class=\"b-date-picker__row\" role=\"row\">\n              <div v-if=\"showWeek\" class=\"b-date-picker__cell b-date-picker__week-number\">\n                {{ getWeekNumber(calendarDates[rowIdx * 7].date) }}\n              </div>\n              <button\n                v-for=\"(cell, colIdx) in calendarDates.slice(rowIdx * 7, rowIdx * 7 + 7)\"\n                :key=\"colIdx\"\n                class=\"b-date-picker__cell\"\n                :class=\"{\n                  'b-date-picker__cell--other': !cell.current,\n                  'b-date-picker__cell--today': isToday(cell.date),\n                  'b-date-picker__cell--selected': isSelected(cell.date),\n                  'b-date-picker__cell--disabled': isDateDisabled(cell.date),\n                  'b-date-picker__cell--hovered': hoveredDate && isSameDay(cell.date, hoveredDate),\n                }\"\n                type=\"button\"\n                :aria-label=\"`${cell.date.getFullYear()}-${String(cell.date.getMonth() + 1).padStart(2, '0')}-${String(cell.date.getDate()).padStart(2, '0')}`\"\n                :aria-selected=\"isSelected(cell.date)\"\n                :aria-disabled=\"isDateDisabled(cell.date)\"\n                :disabled=\"isDateDisabled(cell.date)\"\n                :tabindex=\"isSameDay(cell.date, panelDate) ? 0 : -1\"\n                @click=\"selectDate(cell.date)\"\n                @mouseenter=\"hoveredDate = cell.date\"\n                @mouseleave=\"hoveredDate = null\"\n              >\n                {{ cell.date.getDate() }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Month grid -->\n          <div\n            v-if=\"showMonthGrid\"\n            class=\"b-date-picker__body b-date-picker__grid-3x4\"\n            role=\"grid\"\n            aria-label=\"Month selection\"\n          >\n            <button\n              v-for=\"item in calendarMonths\"\n              :key=\"item.month\"\n              class=\"b-date-picker__cell b-date-picker__cell--large\"\n              :class=\"{\n                'b-date-picker__cell--selected':\n                  selectedDate &&\n                  selectedDate.getFullYear() === item.year &&\n                  selectedDate.getMonth() === item.month,\n                'b-date-picker__cell--current':\n                  new Date().getMonth() === item.month && new Date().getFullYear() === item.year,\n              }\"\n              type=\"button\"\n              :aria-label=\"item.label\"\n              :aria-selected=\"\n                selectedDate?.getMonth() === item.month && selectedDate?.getFullYear() === item.year\n              \"\n              @click=\"selectMonth(item.month)\"\n            >\n              {{ item.label }}\n            </button>\n          </div>\n\n          <!-- Year grid -->\n          <div\n            v-if=\"showYearGrid\"\n            class=\"b-date-picker__body b-date-picker__grid-3x4\"\n            role=\"grid\"\n            aria-label=\"Year selection\"\n          >\n            <button\n              v-for=\"item in calendarYears\"\n              :key=\"item.year\"\n              class=\"b-date-picker__cell b-date-picker__cell--large\"\n              :class=\"{\n                'b-date-picker__cell--other': !item.current,\n                'b-date-picker__cell--selected':\n                  selectedDate && selectedDate.getFullYear() === item.year,\n                'b-date-picker__cell--current': new Date().getFullYear() === item.year,\n              }\"\n              type=\"button\"\n              :aria-label=\"String(item.year)\"\n              :aria-selected=\"selectedDate?.getFullYear() === item.year\"\n              @click=\"selectYear(item.year)\"\n            >\n              {{ item.year }}\n            </button>\n          </div>\n\n          <!-- Quarter grid -->\n          <div\n            v-if=\"showQuarterGrid\"\n            class=\"b-date-picker__body b-date-picker__grid-2x2\"\n            role=\"grid\"\n            aria-label=\"Quarter selection\"\n          >\n            <button\n              v-for=\"item in calendarQuarters\"\n              :key=\"item.quarter\"\n              class=\"b-date-picker__cell b-date-picker__cell--large\"\n              :class=\"{\n                'b-date-picker__cell--selected':\n                  selectedDate &&\n                  Math.ceil((selectedDate.getMonth() + 1) / 3) === item.quarter &&\n                  selectedDate.getFullYear() === item.year,\n              }\"\n              type=\"button\"\n              :aria-label=\"`Quarter ${item.quarter}`\"\n              @click=\"selectQuarter(item.quarter)\"\n            >\n              {{ item.label }}\n            </button>\n          </div>\n\n          <!-- Footer -->\n          <div\n            v-if=\"showNow && (panelMode === 'date' || panelMode === 'week')\"\n            class=\"b-date-picker__footer\"\n          >\n            <button class=\"b-date-picker__today-btn\" type=\"button\" @click=\"selectToday\">\n              {{ todayLabel }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-date-picker {\n  --b-date-picker-active-bg: #ffffff;\n  --b-date-picker-active-border-color: #1677ff;\n  --b-date-picker-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-date-picker-hover-bg: #ffffff;\n  --b-date-picker-hover-border-color: #4096ff;\n  --b-date-picker-cell-active-with-range-bg: #e6f4ff;\n  --b-date-picker-cell-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-date-picker-cell-height: 24px;\n  --b-date-picker-cell-width: 36px;\n  --b-date-picker-cell-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-date-picker-cell-hover-with-range-bg: #c8dfff;\n  --b-date-picker-cell-range-border-color: #82b4f9;\n  --b-date-picker-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-date-picker-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-date-picker-input-font-size: 14px;\n  --b-date-picker-input-font-size-lg: 16px;\n  --b-date-picker-input-font-size-sm: 12px;\n  --b-date-picker-padding-block: 4px;\n  --b-date-picker-padding-block-lg: 7px;\n  --b-date-picker-padding-block-sm: 0px;\n  --b-date-picker-padding-inline: 11px;\n  --b-date-picker-padding-inline-lg: 11px;\n  --b-date-picker-padding-inline-sm: 7px;\n  --b-date-picker-presets-width: 120px;\n  --b-date-picker-presets-max-width: 200px;\n  --b-date-picker-text-height: 40px;\n  --b-date-picker-without-time-cell-height: 66px;\n  --b-date-picker-z-index-popup: 1050;\n  --b-date-picker-bg: #ffffff;\n  --b-date-picker-border-color: #d9d9d9;\n  --b-date-picker-border-radius: 6px;\n  --b-date-picker-text-color: rgba(0, 0, 0, 0.88);\n  --b-date-picker-text-color-secondary: rgba(0, 0, 0, 0.45);\n  --b-date-picker-text-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-date-picker-panel-bg: #ffffff;\n  --b-date-picker-panel-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-date-picker-selected-bg: #1677ff;\n  --b-date-picker-selected-color: #ffffff;\n  --b-date-picker-today-border-color: #1677ff;\n  --b-date-picker-transition-duration: 200ms;\n\n  position: relative;\n  display: inline-flex;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: var(--b-date-picker-input-font-size);\n  color: var(--b-date-picker-text-color);\n}\n\n.b-date-picker--sm .b-date-picker__input-wrap {\n  height: 24px;\n  padding: var(--b-date-picker-padding-block-sm) var(--b-date-picker-padding-inline-sm);\n  font-size: var(--b-date-picker-input-font-size-sm);\n}\n.b-date-picker--md .b-date-picker__input-wrap {\n  height: 32px;\n  padding: var(--b-date-picker-padding-block) var(--b-date-picker-padding-inline);\n  font-size: var(--b-date-picker-input-font-size);\n}\n.b-date-picker--lg .b-date-picker__input-wrap {\n  height: 40px;\n  padding: var(--b-date-picker-padding-block-lg) var(--b-date-picker-padding-inline-lg);\n  font-size: var(--b-date-picker-input-font-size-lg);\n}\n\n.b-date-picker__input-wrap {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  min-width: 120px;\n  background: var(--b-date-picker-bg);\n  border: 1px solid var(--b-date-picker-border-color);\n  border-radius: var(--b-date-picker-border-radius);\n  cursor: pointer;\n  transition:\n    border-color var(--b-date-picker-transition-duration),\n    box-shadow var(--b-date-picker-transition-duration);\n  anchor-name: v-bind('anchorName');\n}\n\n.b-date-picker__input-wrap:hover:not(.b-date-picker--disabled .b-date-picker__input-wrap) {\n  border-color: var(--b-date-picker-hover-border-color);\n  background: var(--b-date-picker-hover-bg);\n}\n\n.b-date-picker--focused .b-date-picker__input-wrap {\n  border-color: var(--b-date-picker-active-border-color);\n  box-shadow: var(--b-date-picker-active-shadow);\n  background: var(--b-date-picker-active-bg);\n}\n\n.b-date-picker--filled .b-date-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: transparent;\n}\n.b-date-picker--filled.b-date-picker--focused .b-date-picker__input-wrap {\n  background: var(--b-date-picker-active-bg);\n  border-color: var(--b-date-picker-active-border-color);\n}\n\n.b-date-picker--borderless .b-date-picker__input-wrap {\n  border-color: transparent;\n  box-shadow: none;\n}\n.b-date-picker--borderless.b-date-picker--focused .b-date-picker__input-wrap {\n  box-shadow: none;\n}\n\n.b-date-picker--underlined .b-date-picker__input-wrap {\n  border-radius: 0;\n  border: none;\n  border-bottom: 1px solid var(--b-date-picker-border-color);\n}\n.b-date-picker--underlined.b-date-picker--focused .b-date-picker__input-wrap {\n  border-bottom-color: var(--b-date-picker-active-border-color);\n  box-shadow: none;\n}\n\n.b-date-picker--error .b-date-picker__input-wrap {\n  border-color: #ff4d4f;\n}\n.b-date-picker--error.b-date-picker--focused .b-date-picker__input-wrap {\n  box-shadow: var(--b-date-picker-error-active-shadow);\n}\n.b-date-picker--warning .b-date-picker__input-wrap {\n  border-color: #faad14;\n}\n.b-date-picker--warning.b-date-picker--focused .b-date-picker__input-wrap {\n  box-shadow: var(--b-date-picker-warning-active-shadow);\n}\n\n.b-date-picker--disabled .b-date-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.b-date-picker__input {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: inherit;\n  cursor: inherit;\n  min-width: 0;\n}\n.b-date-picker__input::placeholder {\n  color: var(--b-date-picker-text-color-secondary);\n}\n\n.b-date-picker__suffix {\n  display: flex;\n  align-items: center;\n  color: var(--b-date-picker-text-color-secondary);\n  flex-shrink: 0;\n}\n.b-date-picker__suffix svg {\n  width: 14px;\n  height: 14px;\n}\n\n.b-date-picker__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--b-date-picker-text-color-secondary);\n  cursor: pointer;\n  padding: 0;\n  opacity: 0;\n  transition: opacity var(--b-date-picker-transition-duration);\n}\n.b-date-picker__clear svg {\n  width: 14px;\n  height: 14px;\n}\n.b-date-picker--clearable:hover .b-date-picker__clear {\n  opacity: 1;\n}\n.b-date-picker--clearable:hover .b-date-picker__suffix {\n  opacity: 0;\n}\n.b-date-picker--clearable:not(:hover) .b-date-picker__suffix {\n  opacity: 1;\n}\n\n.b-date-picker__panel {\n  position: absolute;\n  margin: 0;\n  border: none;\n  padding: 0;\n  background: transparent;\n  overflow: visible;\n  z-index: var(--b-date-picker-z-index-popup);\n\n  position-anchor: v-bind('anchorName');\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin-top: 4px;\n\n  opacity: 0;\n  transform: translateY(-4px);\n  transition:\n    opacity var(--b-date-picker-transition-duration),\n    transform var(--b-date-picker-transition-duration),\n    display var(--b-date-picker-transition-duration);\n  transition-behavior: allow-discrete;\n}\n\n.b-date-picker__panel:popover-open {\n  opacity: 1;\n  transform: translateY(0);\n\n  @starting-style {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n.b-date-picker__panel-inner {\n  display: flex;\n  background: var(--b-date-picker-panel-bg);\n  border-radius: var(--b-date-picker-border-radius);\n  box-shadow: var(--b-date-picker-panel-shadow);\n}\n\n.b-date-picker__presets {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 8px;\n  border-right: 1px solid rgba(0, 0, 0, 0.06);\n  min-width: var(--b-date-picker-presets-width);\n  max-width: var(--b-date-picker-presets-max-width);\n}\n.b-date-picker__preset-btn {\n  padding: 4px 8px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--b-date-picker-text-color);\n  white-space: nowrap;\n  transition: background var(--b-date-picker-transition-duration);\n}\n.b-date-picker__preset-btn:hover {\n  background: var(--b-date-picker-cell-hover-bg);\n}\n\n.b-date-picker__panel-main {\n  padding: 8px;\n  min-width: 280px;\n}\n\n.b-date-picker__header {\n  display: flex;\n  align-items: center;\n  padding: 0 4px 8px;\n}\n.b-date-picker__nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  cursor: pointer;\n  color: var(--b-date-picker-text-color-secondary);\n  transition:\n    color var(--b-date-picker-transition-duration),\n    background var(--b-date-picker-transition-duration);\n}\n.b-date-picker__nav-btn:hover {\n  color: var(--b-date-picker-text-color);\n  background: var(--b-date-picker-cell-hover-bg);\n}\n.b-date-picker__nav-btn svg {\n  width: 12px;\n  height: 12px;\n}\n.b-date-picker__heading {\n  flex: 1;\n  text-align: center;\n  border: none;\n  background: transparent;\n  font-weight: 600;\n  font-size: 14px;\n  cursor: pointer;\n  color: var(--b-date-picker-text-color);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-date-picker-transition-duration);\n}\n.b-date-picker__heading:hover {\n  background: var(--b-date-picker-cell-hover-bg);\n}\n\n.b-date-picker__body {\n  border-top: 1px solid rgba(0, 0, 0, 0.06);\n  padding-top: 4px;\n}\n\n.b-date-picker__weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n}\n.b-date-picker__weekdays:has(.b-date-picker__week-number-header) {\n  grid-template-columns: 32px repeat(7, 1fr);\n}\n.b-date-picker__weekday {\n  padding: 4px 0;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--b-date-picker-text-color-secondary);\n}\n.b-date-picker__week-number-header {\n  color: var(--b-date-picker-text-color-disabled);\n}\n\n.b-date-picker__row {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n}\n.b-date-picker__row:has(.b-date-picker__week-number) {\n  grid-template-columns: 32px repeat(7, 1fr);\n}\n.b-date-picker__week-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  color: var(--b-date-picker-text-color-disabled);\n}\n\n.b-date-picker__cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-date-picker-cell-width);\n  height: var(--b-date-picker-cell-height);\n  margin: 2px auto;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  font-size: 14px;\n  cursor: pointer;\n  color: var(--b-date-picker-text-color);\n  transition:\n    background var(--b-date-picker-transition-duration),\n    color var(--b-date-picker-transition-duration);\n}\n.b-date-picker__cell:hover:not(:disabled) {\n  background: var(--b-date-picker-cell-hover-bg);\n}\n.b-date-picker__cell--other {\n  color: var(--b-date-picker-text-color-disabled);\n}\n.b-date-picker__cell--today {\n  border: 1px solid var(--b-date-picker-today-border-color);\n}\n.b-date-picker__cell--selected {\n  background: var(--b-date-picker-selected-bg) !important;\n  color: var(--b-date-picker-selected-color) !important;\n}\n.b-date-picker__cell--disabled {\n  color: var(--b-date-picker-text-color-disabled);\n  background: var(--b-date-picker-cell-bg-disabled);\n  cursor: not-allowed;\n}\n.b-date-picker__cell--current {\n  border: 1px solid var(--b-date-picker-today-border-color);\n}\n.b-date-picker__cell--large {\n  width: auto;\n  height: var(--b-date-picker-without-time-cell-height);\n  padding: 8px 12px;\n}\n\n.b-date-picker__grid-3x4 {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 4px;\n}\n.b-date-picker__grid-2x2 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 8px;\n}\n\n.b-date-picker__footer {\n  display: flex;\n  justify-content: center;\n  padding-top: 8px;\n  border-top: 1px solid rgba(0, 0, 0, 0.06);\n  margin-top: 4px;\n}\n.b-date-picker__today-btn {\n  border: none;\n  background: transparent;\n  color: var(--b-date-picker-active-border-color);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-date-picker-transition-duration);\n}\n.b-date-picker__today-btn:hover {\n  background: var(--b-date-picker-cell-hover-bg);\n}\n\n[data-prefers-color='dark'] .b-date-picker {\n  --b-date-picker-bg: #141414;\n  --b-date-picker-panel-bg: #1f1f1f;\n  --b-date-picker-border-color: #424242;\n  --b-date-picker-text-color: rgba(255, 255, 255, 0.88);\n  --b-date-picker-text-color-secondary: rgba(255, 255, 255, 0.45);\n  --b-date-picker-text-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-date-picker-hover-border-color: #3c89e8;\n  --b-date-picker-active-border-color: #1668dc;\n  --b-date-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-date-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-date-picker-cell-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-date-picker-selected-bg: #1668dc;\n  --b-date-picker-today-border-color: #1668dc;\n  --b-date-picker-panel-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-date-picker-hover-bg: #141414;\n  --b-date-picker-active-bg: #141414;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-date-picker {\n    --b-date-picker-bg: #141414;\n    --b-date-picker-panel-bg: #1f1f1f;\n    --b-date-picker-border-color: #424242;\n    --b-date-picker-text-color: rgba(255, 255, 255, 0.88);\n    --b-date-picker-text-color-secondary: rgba(255, 255, 255, 0.45);\n    --b-date-picker-text-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-date-picker-hover-border-color: #3c89e8;\n    --b-date-picker-active-border-color: #1668dc;\n    --b-date-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-date-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-date-picker-cell-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-date-picker-selected-bg: #1668dc;\n    --b-date-picker-today-border-color: #1668dc;\n    --b-date-picker-panel-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-date-picker-hover-bg: #141414;\n    --b-date-picker-active-bg: #141414;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-date-picker,\n  .b-date-picker__panel,\n  .b-date-picker__cell,\n  .b-date-picker__input-wrap,\n  .b-date-picker__clear,\n  .b-date-picker__nav-btn,\n  .b-date-picker__heading,\n  .b-date-picker__preset-btn,\n  .b-date-picker__today-btn {\n    transition-duration: 0ms !important;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system70.js","names":[],"sources":["../src/components/BDatePicker/BDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, ref, watch } from 'vue';\n\nimport {\n  BDatePickerPlacement,\n  BDatePickerSize,\n  BDatePickerStatus,\n  BDatePickerType,\n  BDatePickerVariant,\n  type BDatePickerDisabledDateInfo,\n  type BDatePickerPreset,\n} from './types';\n\nconst {\n  picker = BDatePickerType.Date,\n  size = BDatePickerSize.Medium,\n  variant = BDatePickerVariant.Outlined,\n  placeholder,\n  disabled = false,\n  inputReadOnly = false,\n  allowClear = true,\n  showNow = true,\n  showWeek = false,\n  format,\n  locale,\n  placement: _placement = BDatePickerPlacement.BottomLeft,\n  status,\n  presets,\n  disabledDate,\n  minDate,\n  maxDate,\n  defaultOpen = false,\n  defaultValue,\n  defaultPickerValue,\n  open,\n} = defineProps<{\n  /** Picker type: date, week, month, quarter, year */\n  picker?: `${BDatePickerType}`;\n  /** Size of the input */\n  size?: `${BDatePickerSize}`;\n  /** Visual variant */\n  variant?: `${BDatePickerVariant}`;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Make input read-only */\n  inputReadOnly?: boolean;\n  /** Show clear button */\n  allowClear?: boolean;\n  /** Show \"Today\" / \"Now\" button */\n  showNow?: boolean;\n  /** Show week number column (date picker) */\n  showWeek?: boolean;\n  /** Date format string (e.g. 'YYYY-MM-DD', 'DD/MM/YYYY', 'MM-DD-YYYY') */\n  format?: string;\n  /** BCP 47 locale tag for formatting and calendar labels (e.g. 'en-US', 'vi-VN', 'de-DE') */\n  locale?: string;\n  /** Popup placement */\n  placement?: `${BDatePickerPlacement}`;\n  /** Validation status */\n  status?: `${BDatePickerStatus}`;\n  /** Preset quick-select values */\n  presets?: BDatePickerPreset[];\n  /** Function to determine if a date is disabled */\n  disabledDate?: (current: Date, info: BDatePickerDisabledDateInfo) => boolean;\n  /** Minimum selectable date */\n  minDate?: Date;\n  /** Maximum selectable date */\n  maxDate?: Date;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Default value (uncontrolled) */\n  defaultValue?: Date;\n  /** Default panel date */\n  defaultPickerValue?: Date;\n  /** Controlled open state */\n  open?: boolean;\n}>();\n\nconst model = defineModel<Date | null>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [date: Date | null, dateString: string];\n  openChange: [open: boolean];\n  panelChange: [date: Date, mode: string];\n  ok: [];\n}>();\n\ndefineExpose({\n  focus: () => inputEl.value?.focus(),\n  blur: () => inputEl.value?.blur(),\n});\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-date-picker-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// State\n// ─────────────────────────────────────────────\nconst inputEl = ref<HTMLInputElement | null>(null);\nconst panelEl = ref<HTMLElement | null>(null);\nconst isOpen = ref(defaultOpen);\nconst internalValue = ref<Date | null>(defaultValue ?? null);\nconst panelDate = ref<Date>(defaultPickerValue ?? defaultValue ?? new Date());\nconst panelMode = ref<string>(picker);\nconst hoveredDate = ref<Date | null>(null);\n\nconst selectedDate = computed({\n  get: () => model.value ?? internalValue.value,\n  set: (val) => {\n    internalValue.value = val;\n    model.value = val;\n  },\n});\n\nconst isPanelOpen = ref(open !== undefined ? !!open : defaultOpen);\n\n// ─────────────────────────────────────────────\n// Formatting & Locale\n// ─────────────────────────────────────────────\nconst resolvedLocale = computed(() => {\n  const tag = locale || navigator?.language || 'en-US';\n  try {\n    Intl.DateTimeFormat(tag);\n    return tag;\n  } catch {\n    return 'en-US';\n  }\n});\n\nconst defaultFormats: Record<string, string> = {\n  date: 'YYYY-MM-DD',\n  week: 'YYYY-[W]wo',\n  month: 'YYYY-MM',\n  quarter: 'YYYY-[Q]Q',\n  year: 'YYYY',\n};\n\nconst activeFormat = computed(() => format ?? defaultFormats[picker] ?? 'YYYY-MM-DD');\n\nfunction pad(n: number, len = 2): string {\n  return String(n).padStart(len, '0');\n}\n\nfunction getWeekNumber(d: Date): number {\n  const copy = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));\n  copy.setUTCDate(copy.getUTCDate() + 4 - (copy.getUTCDay() || 7));\n  const yearStart = new Date(Date.UTC(copy.getUTCFullYear(), 0, 1));\n  return Math.ceil(((copy.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);\n}\n\nfunction formatDate(date: Date | null): string {\n  if (!date) return '';\n  const y = date.getFullYear();\n  const m = date.getMonth() + 1;\n  const d = date.getDate();\n\n  let fmt = activeFormat.value;\n\n  // Escape sequences: text inside [] is literal\n  const DELIM = '￰';\n  const literals: string[] = [];\n  fmt = fmt.replace(/\\[([^\\]]*)\\]/g, (_, text) => {\n    literals.push(text);\n    return `${DELIM}${literals.length - 1}${DELIM}`;\n  });\n\n  // Token replacement (longest tokens first to avoid partial matches)\n  fmt = fmt.replace('YYYY', String(y));\n  fmt = fmt.replace('YY', String(y).slice(-2));\n  fmt = fmt.replace('MM', pad(m));\n  fmt = fmt.replace('M', String(m));\n  fmt = fmt.replace('DD', pad(d));\n  fmt = fmt.replace('D', String(d));\n  fmt = fmt.replace('wo', String(getWeekNumber(date)));\n  fmt = fmt.replace('Q', String(Math.ceil(m / 3)));\n\n  // Restore literals\n  fmt = fmt.replace(new RegExp(`${DELIM}(\\\\d+)${DELIM}`, 'g'), (_, idx) => literals[Number(idx)]);\n\n  return fmt;\n}\n\nfunction parseInput(value: string): Date | null {\n  if (!value) return null;\n\n  // Try parsing based on current format pattern\n  const fmt = activeFormat.value;\n  const parsed = parseByFormat(value, fmt);\n  if (parsed) return parsed;\n\n  // Fallback: ISO format\n  const iso = value.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n  if (iso) {\n    const date = new Date(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]));\n    if (!isNaN(date.getTime())) return date;\n  }\n\n  // Fallback: native Date parsing\n  const date = new Date(value);\n  return isNaN(date.getTime()) ? null : date;\n}\n\nfunction parseByFormat(value: string, fmt: string): Date | null {\n  let regex = fmt.replace(/\\[([^\\]]*)\\]/g, (_, text) => escapeRegex(text));\n  const groups: { token: string; pos: number }[] = [];\n\n  const tokenMap: [string, string][] = [\n    ['YYYY', '(\\\\d{4})'],\n    ['YY', '(\\\\d{2})'],\n    ['MM', '(\\\\d{2})'],\n    ['M', '(\\\\d{1,2})'],\n    ['DD', '(\\\\d{2})'],\n    ['D', '(\\\\d{1,2})'],\n  ];\n\n  for (const [token, pattern] of tokenMap) {\n    const idx = regex.indexOf(token);\n    if (idx !== -1) {\n      regex = regex.replace(token, pattern);\n      groups.push({ token, pos: idx });\n    }\n  }\n\n  groups.sort((a, b) => a.pos - b.pos);\n\n  regex = regex.replace('wo', '\\\\d{1,2}');\n  regex = regex.replace('Q', '\\\\d');\n\n  try {\n    const match = value.match(new RegExp(`^${regex}$`));\n    if (!match) return null;\n\n    let year = new Date().getFullYear();\n    let month = 1;\n    let day = 1;\n\n    groups.forEach(({ token }, i) => {\n      const val = Number(match[i + 1]);\n      switch (token) {\n        case 'YYYY':\n          year = val;\n          break;\n        case 'YY':\n          year = 2000 + val;\n          break;\n        case 'MM':\n        case 'M':\n          month = val;\n          break;\n        case 'DD':\n        case 'D':\n          day = val;\n          break;\n      }\n    });\n\n    const date = new Date(year, month - 1, day);\n    if (isNaN(date.getTime())) return null;\n    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)\n      return null;\n    return date;\n  } catch {\n    return null;\n  }\n}\n\nfunction escapeRegex(str: string): string {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nconst displayValue = computed(() => formatDate(selectedDate.value));\n\n// ─────────────────────────────────────────────\n// Locale-aware calendar labels\n// ─────────────────────────────────────────────\nconst weekdayLabels = computed(() => {\n  const loc = resolvedLocale.value;\n  const labels: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    // Jan 7, 2024 is a Sunday — offset by i to get Sun..Sat\n    const day = new Date(2024, 0, 7 + i);\n    labels.push(day.toLocaleDateString(loc, { weekday: 'short' }).slice(0, 2));\n  }\n  return labels;\n});\n\nconst monthLabels = computed(() => {\n  const loc = resolvedLocale.value;\n  return Array.from({ length: 12 }, (_, i) =>\n    new Date(2024, i, 1).toLocaleDateString(loc, { month: 'short' }),\n  );\n});\n\nconst todayLabel = computed(() => {\n  const loc = resolvedLocale.value;\n  // Use Intl to get localized \"Today\" - fallback to English\n  try {\n    const rtf = new Intl.RelativeTimeFormat(loc, { numeric: 'auto' });\n    const parts = rtf.formatToParts(0, 'day');\n    const value = parts.find((p) => p.type === 'literal')?.value;\n    if (value && value.trim()) return value.trim().charAt(0).toUpperCase() + value.trim().slice(1);\n  } catch {\n    /* fallback */\n  }\n  return 'Today';\n});\n\n// ─────────────────────────────────────────────\n// Calendar data generation\n// ─────────────────────────────────────────────\nconst calendarDates = computed(() => {\n  const year = panelDate.value.getFullYear();\n  const month = panelDate.value.getMonth();\n  const firstDay = new Date(year, month, 1);\n  const startDay = firstDay.getDay();\n  const dates: { date: Date; current: boolean }[] = [];\n\n  for (let i = startDay - 1; i >= 0; i--) {\n    dates.push({ date: new Date(year, month, -i), current: false });\n  }\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n  for (let i = 1; i <= daysInMonth; i++) {\n    dates.push({ date: new Date(year, month, i), current: true });\n  }\n  const remaining = 42 - dates.length;\n  for (let i = 1; i <= remaining; i++) {\n    dates.push({ date: new Date(year, month + 1, i), current: false });\n  }\n  return dates;\n});\n\nconst calendarMonths = computed(() => {\n  return monthLabels.value.map((label, idx) => ({\n    label,\n    month: idx,\n    year: panelDate.value.getFullYear(),\n  }));\n});\n\nconst calendarYears = computed(() => {\n  const year = panelDate.value.getFullYear();\n  const decadeStart = Math.floor(year / 10) * 10;\n  const years: { year: number; current: boolean }[] = [];\n  for (let i = decadeStart - 1; i <= decadeStart + 10; i++) {\n    years.push({ year: i, current: i >= decadeStart && i < decadeStart + 10 });\n  }\n  return years;\n});\n\nconst calendarQuarters = computed(() => {\n  const year = panelDate.value.getFullYear();\n  return [1, 2, 3, 4].map((q) => ({ quarter: q, year, label: `Q${q}` }));\n});\n\nconst panelHeading = computed(() => {\n  const y = panelDate.value.getFullYear();\n  const m = panelDate.value.getMonth();\n  if (panelMode.value === 'date' || panelMode.value === 'week') {\n    return `${monthLabels.value[m]} ${y}`;\n  }\n  if (panelMode.value === 'month' || panelMode.value === 'quarter') {\n    return `${y}`;\n  }\n  if (panelMode.value === 'year') {\n    const decadeStart = Math.floor(y / 10) * 10;\n    return `${decadeStart} - ${decadeStart + 9}`;\n  }\n  return `${y}`;\n});\n\n// ─────────────────────────────────────────────\n// Date checks\n// ─────────────────────────────────────────────\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isToday(d: Date): boolean {\n  return isSameDay(d, new Date());\n}\n\nfunction isSelected(d: Date): boolean {\n  return selectedDate.value ? isSameDay(d, selectedDate.value) : false;\n}\n\nfunction isDateDisabled(d: Date): boolean {\n  if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()))\n    return true;\n  if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()))\n    return true;\n  if (disabledDate) return disabledDate(d, { type: picker as `${BDatePickerType}` });\n  return false;\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  inputEl.value?.focus();\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) {\n    closePanel();\n  } else {\n    openPanel();\n  }\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) {\n    emit('openChange', false);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Selection handlers\n// ─────────────────────────────────────────────\nfunction selectDate(d: Date) {\n  if (isDateDisabled(d)) return;\n  selectedDate.value = d;\n  panelDate.value = new Date(d);\n  emit('change', d, formatDate(d));\n  closePanel();\n}\n\nfunction selectMonth(month: number) {\n  if (picker === BDatePickerType.Month) {\n    const d = new Date(panelDate.value.getFullYear(), month, 1);\n    selectedDate.value = d;\n    emit('change', d, formatDate(d));\n    closePanel();\n  } else {\n    panelDate.value = new Date(panelDate.value.getFullYear(), month, 1);\n    panelMode.value = 'date';\n    emit('panelChange', panelDate.value, 'date');\n  }\n}\n\nfunction selectYear(year: number) {\n  if (picker === BDatePickerType.Year) {\n    const d = new Date(year, 0, 1);\n    selectedDate.value = d;\n    emit('change', d, formatDate(d));\n    closePanel();\n  } else {\n    panelDate.value = new Date(year, panelDate.value.getMonth(), 1);\n    panelMode.value = picker === BDatePickerType.Month ? 'month' : 'date';\n    emit('panelChange', panelDate.value, panelMode.value);\n  }\n}\n\nfunction selectQuarter(quarter: number) {\n  const d = new Date(panelDate.value.getFullYear(), (quarter - 1) * 3, 1);\n  selectedDate.value = d;\n  emit('change', d, formatDate(d));\n  closePanel();\n}\n\nfunction selectToday() {\n  const today = new Date();\n  today.setHours(0, 0, 0, 0);\n  selectDate(today);\n}\n\nfunction selectPreset(preset: BDatePickerPreset) {\n  const val = typeof preset.value === 'function' ? preset.value() : preset.value;\n  selectDate(val);\n}\n\nfunction clearValue(e: Event) {\n  e.stopPropagation();\n  selectedDate.value = null;\n  emit('change', null, '');\n}\n\n// ─────────────────────────────────────────────\n// Navigation\n// ─────────────────────────────────────────────\nfunction prevMonth() {\n  panelDate.value = new Date(panelDate.value.getFullYear(), panelDate.value.getMonth() - 1, 1);\n}\n\nfunction nextMonth() {\n  panelDate.value = new Date(panelDate.value.getFullYear(), panelDate.value.getMonth() + 1, 1);\n}\n\nfunction prevYear() {\n  panelDate.value = new Date(panelDate.value.getFullYear() - 1, panelDate.value.getMonth(), 1);\n}\n\nfunction nextYear() {\n  panelDate.value = new Date(panelDate.value.getFullYear() + 1, panelDate.value.getMonth(), 1);\n}\n\nfunction prevDecade() {\n  panelDate.value = new Date(panelDate.value.getFullYear() - 10, panelDate.value.getMonth(), 1);\n}\n\nfunction nextDecade() {\n  panelDate.value = new Date(panelDate.value.getFullYear() + 10, panelDate.value.getMonth(), 1);\n}\n\nfunction switchPanelMode(mode: string) {\n  panelMode.value = mode;\n  emit('panelChange', panelDate.value, mode);\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nconst inputText = ref('');\n\nfunction handleInputChange(e: Event) {\n  const value = (e.target as HTMLInputElement).value;\n  inputText.value = value;\n}\n\nfunction handleInputBlur() {\n  if (inputText.value) {\n    const parsed = parseInput(inputText.value);\n    if (parsed && !isDateDisabled(parsed)) {\n      selectedDate.value = parsed;\n      panelDate.value = new Date(parsed);\n      emit('change', parsed, formatDate(parsed));\n    }\n  }\n  inputText.value = '';\n}\n\nfunction handleInputKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter') {\n    if (!isPanelOpen.value) {\n      openPanel();\n    } else {\n      handleInputBlur();\n      closePanel();\n    }\n  } else if (e.key === 'Escape') {\n    closePanel();\n  } else if (e.key === 'ArrowDown' && !isPanelOpen.value) {\n    openPanel();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation in panel\n// ─────────────────────────────────────────────\nfunction handlePanelKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    closePanel();\n    return;\n  }\n\n  if (panelMode.value === 'date' || panelMode.value === 'week') {\n    handleDateKeydown(e);\n  } else if (panelMode.value === 'month') {\n    handleMonthKeydown(e);\n  } else if (panelMode.value === 'year') {\n    handleYearKeydown(e);\n  }\n}\n\nfunction handleDateKeydown(e: KeyboardEvent) {\n  const pd = new Date(panelDate.value);\n  let moved = false;\n\n  switch (e.key) {\n    case 'ArrowLeft':\n      pd.setDate(pd.getDate() - 1);\n      moved = true;\n      break;\n    case 'ArrowRight':\n      pd.setDate(pd.getDate() + 1);\n      moved = true;\n      break;\n    case 'ArrowUp':\n      pd.setDate(pd.getDate() - 7);\n      moved = true;\n      break;\n    case 'ArrowDown':\n      pd.setDate(pd.getDate() + 7);\n      moved = true;\n      break;\n    case 'Enter':\n    case ' ':\n      e.preventDefault();\n      selectDate(panelDate.value);\n      return;\n    case 'PageUp':\n      if (e.shiftKey) {\n        prevYear();\n      } else {\n        prevMonth();\n      }\n      e.preventDefault();\n      return;\n    case 'PageDown':\n      if (e.shiftKey) {\n        nextYear();\n      } else {\n        nextMonth();\n      }\n      e.preventDefault();\n      return;\n  }\n\n  if (moved) {\n    e.preventDefault();\n    panelDate.value = pd;\n  }\n}\n\nfunction handleMonthKeydown(e: KeyboardEvent) {\n  const currentMonth = panelDate.value.getMonth();\n  let newMonth = currentMonth;\n\n  switch (e.key) {\n    case 'ArrowLeft':\n      newMonth = currentMonth - 1;\n      break;\n    case 'ArrowRight':\n      newMonth = currentMonth + 1;\n      break;\n    case 'ArrowUp':\n      newMonth = currentMonth - 3;\n      break;\n    case 'ArrowDown':\n      newMonth = currentMonth + 3;\n      break;\n    case 'Enter':\n    case ' ':\n      e.preventDefault();\n      selectMonth(currentMonth);\n      return;\n    default:\n      return;\n  }\n\n  e.preventDefault();\n  if (newMonth < 0) {\n    panelDate.value = new Date(panelDate.value.getFullYear() - 1, 12 + newMonth, 1);\n  } else if (newMonth > 11) {\n    panelDate.value = new Date(panelDate.value.getFullYear() + 1, newMonth - 12, 1);\n  } else {\n    panelDate.value = new Date(panelDate.value.getFullYear(), newMonth, 1);\n  }\n}\n\nfunction handleYearKeydown(e: KeyboardEvent) {\n  const currentYear = panelDate.value.getFullYear();\n  let newYear = currentYear;\n\n  switch (e.key) {\n    case 'ArrowLeft':\n      newYear = currentYear - 1;\n      break;\n    case 'ArrowRight':\n      newYear = currentYear + 1;\n      break;\n    case 'ArrowUp':\n      newYear = currentYear - 3;\n      break;\n    case 'ArrowDown':\n      newYear = currentYear + 3;\n      break;\n    case 'Enter':\n    case ' ':\n      e.preventDefault();\n      selectYear(currentYear);\n      return;\n    default:\n      return;\n  }\n\n  e.preventDefault();\n  panelDate.value = new Date(newYear, panelDate.value.getMonth(), 1);\n}\n\n// ─────────────────────────────────────────────\n// Computed panel mode checks\n// ─────────────────────────────────────────────\nconst showDateGrid = computed(() => panelMode.value === 'date' || panelMode.value === 'week');\nconst showMonthGrid = computed(() => panelMode.value === 'month');\nconst showYearGrid = computed(() => panelMode.value === 'year');\nconst showQuarterGrid = computed(() => panelMode.value === 'quarter');\n\n// ─────────────────────────────────────────────\n// Placeholder\n// ─────────────────────────────────────────────\nconst effectivePlaceholder = computed(() => {\n  if (placeholder) return placeholder;\n  const map: Record<string, string> = {\n    date: 'Select date',\n    week: 'Select week',\n    month: 'Select month',\n    quarter: 'Select quarter',\n    year: 'Select year',\n  };\n  return map[picker] ?? 'Select date';\n});\n\n// ─────────────────────────────────────────────\n// Watch for controlled open\n// ─────────────────────────────────────────────\nwatch(\n  () => open,\n  (val) => {\n    if (val !== undefined) {\n      isPanelOpen.value = val;\n      isOpen.value = val;\n      if (val) {\n        panelEl.value?.showPopover?.();\n      } else {\n        panelEl.value?.hidePopover?.();\n      }\n    }\n  },\n);\n\nwatch(isPanelOpen, (val) => {\n  if (val) {\n    panelMode.value = picker;\n    if (selectedDate.value) {\n      panelDate.value = new Date(selectedDate.value);\n    }\n  }\n});\n</script>\n\n<template>\n  <div\n    class=\"b-date-picker\"\n    :class=\"[\n      `b-date-picker--${size}`,\n      `b-date-picker--${variant}`,\n      {\n        'b-date-picker--disabled': disabled,\n        'b-date-picker--focused': isPanelOpen,\n        'b-date-picker--clearable': allowClear && !!selectedDate && !disabled,\n        'b-date-picker--error': status === BDatePickerStatus.Error,\n        'b-date-picker--warning': status === BDatePickerStatus.Warning,\n      },\n    ]\"\n  >\n    <!-- Input trigger -->\n    <div class=\"b-date-picker__input-wrap\" @click=\"togglePanel\">\n      <input\n        ref=\"inputEl\"\n        class=\"b-date-picker__input\"\n        type=\"text\"\n        :value=\"inputText || displayValue\"\n        :placeholder=\"effectivePlaceholder\"\n        :disabled=\"disabled\"\n        :readonly=\"inputReadOnly\"\n        :aria-expanded=\"isPanelOpen\"\n        aria-haspopup=\"dialog\"\n        :aria-controls=\"isPanelOpen ? `b-date-picker-panel-${componentUID}` : undefined\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        @input=\"handleInputChange\"\n        @blur=\"handleInputBlur\"\n        @keydown=\"handleInputKeydown\"\n      />\n\n      <!-- Clear button -->\n      <button\n        v-if=\"allowClear && selectedDate && !disabled\"\n        class=\"b-date-picker__clear\"\n        type=\"button\"\n        aria-label=\"Clear date\"\n        tabindex=\"-1\"\n        @click=\"clearValue\"\n      >\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path\n            d=\"M8 1a7 7 0 110 14A7 7 0 018 1zm2.828 4.172a.5.5 0 00-.707 0L8 7.293 5.879 5.172a.5.5 0 10-.707.707L7.293 8l-2.121 2.121a.5.5 0 10.707.707L8 8.707l2.121 2.121a.5.5 0 10.707-.707L8.707 8l2.121-2.121a.5.5 0 000-.707z\"\n          />\n        </svg>\n      </button>\n\n      <!-- Suffix icon -->\n      <span class=\"b-date-picker__suffix\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n          <path\n            d=\"M4.5 1a.5.5 0 01.5.5V2h6v-.5a.5.5 0 011 0V2h1.5A1.5 1.5 0 0115 3.5v10a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 011 13.5v-10A1.5 1.5 0 012.5 2H4v-.5a.5.5 0 01.5-.5zM14 6H2v7.5a.5.5 0 00.5.5h11a.5.5 0 00.5-.5V6zm-1.5-3H12v.5a.5.5 0 01-1 0V3H5v.5a.5.5 0 01-1 0V3H2.5a.5.5 0 00-.5.5V5h12V3.5a.5.5 0 00-.5-.5z\"\n          />\n        </svg>\n      </span>\n    </div>\n\n    <!-- Panel (Popover API) -->\n    <div\n      :id=\"`b-date-picker-panel-${componentUID}`\"\n      ref=\"panelEl\"\n      class=\"b-date-picker__panel\"\n      popover\n      role=\"dialog\"\n      :aria-label=\"`${picker} picker`\"\n      :aria-modal=\"true\"\n      @toggle=\"handlePopoverToggle\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <div class=\"b-date-picker__panel-inner\">\n        <!-- Presets sidebar -->\n        <div v-if=\"presets && presets.length\" class=\"b-date-picker__presets\">\n          <button\n            v-for=\"preset in presets\"\n            :key=\"preset.label\"\n            class=\"b-date-picker__preset-btn\"\n            type=\"button\"\n            @click=\"selectPreset(preset)\"\n          >\n            {{ preset.label }}\n          </button>\n        </div>\n\n        <div class=\"b-date-picker__panel-main\">\n          <!-- Header -->\n          <div class=\"b-date-picker__header\">\n            <button\n              v-if=\"showDateGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Previous year\"\n              @click=\"prevYear\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M9.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L4.707 8l4.647-4.646z\"\n                />\n                <path\n                  d=\"M12.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L7.707 8l4.647-4.646z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showYearGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Previous decade\"\n              @click=\"prevDecade\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M9.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L4.707 8l4.647-4.646z\"\n                />\n                <path\n                  d=\"M12.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L7.707 8l4.647-4.646z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showDateGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Previous month\"\n              @click=\"prevMonth\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L5.707 8l4.647-4.646z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showMonthGrid || showQuarterGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Previous year\"\n              @click=\"prevYear\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L5.707 8l4.647-4.646z\"\n                />\n              </svg>\n            </button>\n\n            <!-- Heading -->\n            <button\n              class=\"b-date-picker__heading\"\n              type=\"button\"\n              :aria-label=\"`Current view: ${panelHeading}`\"\n              @click=\"\n                switchPanelMode(\n                  panelMode === 'date' || panelMode === 'week'\n                    ? 'month'\n                    : panelMode === 'month' || panelMode === 'quarter'\n                      ? 'year'\n                      : 'year',\n                )\n              \"\n            >\n              {{ panelHeading }}\n            </button>\n\n            <button\n              v-if=\"showDateGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Next month\"\n              @click=\"nextMonth\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showMonthGrid || showQuarterGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Next year\"\n              @click=\"nextYear\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showDateGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Next year\"\n              @click=\"nextYear\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z\"\n                />\n                <path\n                  d=\"M2.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L7.293 8 2.646 3.354z\"\n                />\n              </svg>\n            </button>\n            <button\n              v-if=\"showYearGrid\"\n              class=\"b-date-picker__nav-btn\"\n              type=\"button\"\n              aria-label=\"Next decade\"\n              @click=\"nextDecade\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z\"\n                />\n                <path\n                  d=\"M2.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L7.293 8 2.646 3.354z\"\n                />\n              </svg>\n            </button>\n          </div>\n\n          <!-- Date grid -->\n          <div v-if=\"showDateGrid\" class=\"b-date-picker__body\" role=\"grid\" aria-label=\"Calendar\">\n            <div class=\"b-date-picker__weekdays\" role=\"row\">\n              <div\n                v-if=\"showWeek\"\n                class=\"b-date-picker__weekday b-date-picker__week-number-header\"\n                role=\"columnheader\"\n                aria-label=\"Week\"\n              >\n                #\n              </div>\n              <div\n                v-for=\"day in weekdayLabels\"\n                :key=\"day\"\n                class=\"b-date-picker__weekday\"\n                role=\"columnheader\"\n                :aria-label=\"day\"\n              >\n                {{ day }}\n              </div>\n            </div>\n\n            <div v-for=\"(row, rowIdx) in 6\" :key=\"rowIdx\" class=\"b-date-picker__row\" role=\"row\">\n              <div v-if=\"showWeek\" class=\"b-date-picker__cell b-date-picker__week-number\">\n                {{ getWeekNumber(calendarDates[rowIdx * 7].date) }}\n              </div>\n              <button\n                v-for=\"(cell, colIdx) in calendarDates.slice(rowIdx * 7, rowIdx * 7 + 7)\"\n                :key=\"colIdx\"\n                class=\"b-date-picker__cell\"\n                :class=\"{\n                  'b-date-picker__cell--other': !cell.current,\n                  'b-date-picker__cell--today': isToday(cell.date),\n                  'b-date-picker__cell--selected': isSelected(cell.date),\n                  'b-date-picker__cell--disabled': isDateDisabled(cell.date),\n                  'b-date-picker__cell--hovered': hoveredDate && isSameDay(cell.date, hoveredDate),\n                }\"\n                type=\"button\"\n                :aria-label=\"`${cell.date.getFullYear()}-${String(cell.date.getMonth() + 1).padStart(2, '0')}-${String(cell.date.getDate()).padStart(2, '0')}`\"\n                :aria-selected=\"isSelected(cell.date)\"\n                :aria-disabled=\"isDateDisabled(cell.date)\"\n                :disabled=\"isDateDisabled(cell.date)\"\n                :tabindex=\"isSameDay(cell.date, panelDate) ? 0 : -1\"\n                @click=\"selectDate(cell.date)\"\n                @mouseenter=\"hoveredDate = cell.date\"\n                @mouseleave=\"hoveredDate = null\"\n              >\n                {{ cell.date.getDate() }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Month grid -->\n          <div\n            v-if=\"showMonthGrid\"\n            class=\"b-date-picker__body b-date-picker__grid-3x4\"\n            role=\"grid\"\n            aria-label=\"Month selection\"\n          >\n            <button\n              v-for=\"item in calendarMonths\"\n              :key=\"item.month\"\n              class=\"b-date-picker__cell b-date-picker__cell--large\"\n              :class=\"{\n                'b-date-picker__cell--selected':\n                  selectedDate &&\n                  selectedDate.getFullYear() === item.year &&\n                  selectedDate.getMonth() === item.month,\n                'b-date-picker__cell--current':\n                  new Date().getMonth() === item.month && new Date().getFullYear() === item.year,\n              }\"\n              type=\"button\"\n              :aria-label=\"item.label\"\n              :aria-selected=\"\n                selectedDate?.getMonth() === item.month && selectedDate?.getFullYear() === item.year\n              \"\n              @click=\"selectMonth(item.month)\"\n            >\n              {{ item.label }}\n            </button>\n          </div>\n\n          <!-- Year grid -->\n          <div\n            v-if=\"showYearGrid\"\n            class=\"b-date-picker__body b-date-picker__grid-3x4\"\n            role=\"grid\"\n            aria-label=\"Year selection\"\n          >\n            <button\n              v-for=\"item in calendarYears\"\n              :key=\"item.year\"\n              class=\"b-date-picker__cell b-date-picker__cell--large\"\n              :class=\"{\n                'b-date-picker__cell--other': !item.current,\n                'b-date-picker__cell--selected':\n                  selectedDate && selectedDate.getFullYear() === item.year,\n                'b-date-picker__cell--current': new Date().getFullYear() === item.year,\n              }\"\n              type=\"button\"\n              :aria-label=\"String(item.year)\"\n              :aria-selected=\"selectedDate?.getFullYear() === item.year\"\n              @click=\"selectYear(item.year)\"\n            >\n              {{ item.year }}\n            </button>\n          </div>\n\n          <!-- Quarter grid -->\n          <div\n            v-if=\"showQuarterGrid\"\n            class=\"b-date-picker__body b-date-picker__grid-2x2\"\n            role=\"grid\"\n            aria-label=\"Quarter selection\"\n          >\n            <button\n              v-for=\"item in calendarQuarters\"\n              :key=\"item.quarter\"\n              class=\"b-date-picker__cell b-date-picker__cell--large\"\n              :class=\"{\n                'b-date-picker__cell--selected':\n                  selectedDate &&\n                  Math.ceil((selectedDate.getMonth() + 1) / 3) === item.quarter &&\n                  selectedDate.getFullYear() === item.year,\n              }\"\n              type=\"button\"\n              :aria-label=\"`Quarter ${item.quarter}`\"\n              @click=\"selectQuarter(item.quarter)\"\n            >\n              {{ item.label }}\n            </button>\n          </div>\n\n          <!-- Footer -->\n          <div\n            v-if=\"showNow && (panelMode === 'date' || panelMode === 'week')\"\n            class=\"b-date-picker__footer\"\n          >\n            <button class=\"b-date-picker__today-btn\" type=\"button\" @click=\"selectToday\">\n              {{ todayLabel }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-date-picker {\n  --b-date-picker-active-bg: #ffffff;\n  --b-date-picker-active-border-color: #1677ff;\n  --b-date-picker-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-date-picker-hover-bg: #ffffff;\n  --b-date-picker-hover-border-color: #4096ff;\n  --b-date-picker-cell-active-with-range-bg: #e6f4ff;\n  --b-date-picker-cell-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-date-picker-cell-height: 24px;\n  --b-date-picker-cell-width: 36px;\n  --b-date-picker-cell-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-date-picker-cell-hover-with-range-bg: #c8dfff;\n  --b-date-picker-cell-range-border-color: #82b4f9;\n  --b-date-picker-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-date-picker-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-date-picker-input-font-size: 14px;\n  --b-date-picker-input-font-size-lg: 16px;\n  --b-date-picker-input-font-size-sm: 12px;\n  --b-date-picker-padding-block: 4px;\n  --b-date-picker-padding-block-lg: 7px;\n  --b-date-picker-padding-block-sm: 0px;\n  --b-date-picker-padding-inline: 11px;\n  --b-date-picker-padding-inline-lg: 11px;\n  --b-date-picker-padding-inline-sm: 7px;\n  --b-date-picker-presets-width: 120px;\n  --b-date-picker-presets-max-width: 200px;\n  --b-date-picker-text-height: 40px;\n  --b-date-picker-without-time-cell-height: 66px;\n  --b-date-picker-z-index-popup: 1050;\n  --b-date-picker-bg: #ffffff;\n  --b-date-picker-border-color: #d9d9d9;\n  --b-date-picker-border-radius: 6px;\n  --b-date-picker-text-color: rgba(0, 0, 0, 0.88);\n  --b-date-picker-text-color-secondary: rgba(0, 0, 0, 0.45);\n  --b-date-picker-text-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-date-picker-panel-bg: #ffffff;\n  --b-date-picker-panel-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-date-picker-selected-bg: #1677ff;\n  --b-date-picker-selected-color: #ffffff;\n  --b-date-picker-today-border-color: #1677ff;\n  --b-date-picker-transition-duration: 200ms;\n\n  position: relative;\n  display: inline-flex;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: var(--b-date-picker-input-font-size);\n  color: var(--b-date-picker-text-color);\n}\n\n.b-date-picker--sm .b-date-picker__input-wrap {\n  height: 24px;\n  padding: var(--b-date-picker-padding-block-sm) var(--b-date-picker-padding-inline-sm);\n  font-size: var(--b-date-picker-input-font-size-sm);\n}\n.b-date-picker--md .b-date-picker__input-wrap {\n  height: 32px;\n  padding: var(--b-date-picker-padding-block) var(--b-date-picker-padding-inline);\n  font-size: var(--b-date-picker-input-font-size);\n}\n.b-date-picker--lg .b-date-picker__input-wrap {\n  height: 40px;\n  padding: var(--b-date-picker-padding-block-lg) var(--b-date-picker-padding-inline-lg);\n  font-size: var(--b-date-picker-input-font-size-lg);\n}\n\n.b-date-picker__input-wrap {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  min-width: 120px;\n  background: var(--b-date-picker-bg);\n  border: 1px solid var(--b-date-picker-border-color);\n  border-radius: var(--b-date-picker-border-radius);\n  cursor: pointer;\n  transition:\n    border-color var(--b-date-picker-transition-duration),\n    box-shadow var(--b-date-picker-transition-duration);\n  anchor-name: v-bind('anchorName');\n}\n\n.b-date-picker__input-wrap:hover:not(.b-date-picker--disabled .b-date-picker__input-wrap) {\n  border-color: var(--b-date-picker-hover-border-color);\n  background: var(--b-date-picker-hover-bg);\n}\n\n.b-date-picker--focused .b-date-picker__input-wrap {\n  border-color: var(--b-date-picker-active-border-color);\n  box-shadow: var(--b-date-picker-active-shadow);\n  background: var(--b-date-picker-active-bg);\n}\n\n.b-date-picker--filled .b-date-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: transparent;\n}\n.b-date-picker--filled.b-date-picker--focused .b-date-picker__input-wrap {\n  background: var(--b-date-picker-active-bg);\n  border-color: var(--b-date-picker-active-border-color);\n}\n\n.b-date-picker--borderless .b-date-picker__input-wrap {\n  border-color: transparent;\n  box-shadow: none;\n}\n.b-date-picker--borderless.b-date-picker--focused .b-date-picker__input-wrap {\n  box-shadow: none;\n}\n\n.b-date-picker--underlined .b-date-picker__input-wrap {\n  border-radius: 0;\n  border: none;\n  border-bottom: 1px solid var(--b-date-picker-border-color);\n}\n.b-date-picker--underlined.b-date-picker--focused .b-date-picker__input-wrap {\n  border-bottom-color: var(--b-date-picker-active-border-color);\n  box-shadow: none;\n}\n\n.b-date-picker--error .b-date-picker__input-wrap {\n  border-color: #ff4d4f;\n}\n.b-date-picker--error.b-date-picker--focused .b-date-picker__input-wrap {\n  box-shadow: var(--b-date-picker-error-active-shadow);\n}\n.b-date-picker--warning .b-date-picker__input-wrap {\n  border-color: #faad14;\n}\n.b-date-picker--warning.b-date-picker--focused .b-date-picker__input-wrap {\n  box-shadow: var(--b-date-picker-warning-active-shadow);\n}\n\n.b-date-picker--disabled .b-date-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.b-date-picker__input {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: inherit;\n  cursor: inherit;\n  min-width: 0;\n}\n.b-date-picker__input::placeholder {\n  color: var(--b-date-picker-text-color-secondary);\n}\n\n.b-date-picker__suffix {\n  display: flex;\n  align-items: center;\n  color: var(--b-date-picker-text-color-secondary);\n  flex-shrink: 0;\n}\n.b-date-picker__suffix svg {\n  width: 14px;\n  height: 14px;\n}\n\n.b-date-picker__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--b-date-picker-text-color-secondary);\n  cursor: pointer;\n  padding: 0;\n  opacity: 0;\n  transition: opacity var(--b-date-picker-transition-duration);\n}\n.b-date-picker__clear svg {\n  width: 14px;\n  height: 14px;\n}\n.b-date-picker--clearable:hover .b-date-picker__clear {\n  opacity: 1;\n}\n.b-date-picker--clearable:hover .b-date-picker__suffix {\n  opacity: 0;\n}\n.b-date-picker--clearable:not(:hover) .b-date-picker__suffix {\n  opacity: 1;\n}\n\n.b-date-picker__panel {\n  position: absolute;\n  margin: 0;\n  border: none;\n  padding: 0;\n  background: transparent;\n  overflow: visible;\n  z-index: var(--b-date-picker-z-index-popup);\n\n  position-anchor: v-bind('anchorName');\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin-top: 4px;\n\n  opacity: 0;\n  transform: translateY(-4px);\n  transition:\n    opacity var(--b-date-picker-transition-duration),\n    transform var(--b-date-picker-transition-duration),\n    display var(--b-date-picker-transition-duration);\n  transition-behavior: allow-discrete;\n}\n\n.b-date-picker__panel:popover-open {\n  opacity: 1;\n  transform: translateY(0);\n\n  @starting-style {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n.b-date-picker__panel-inner {\n  display: flex;\n  background: var(--b-date-picker-panel-bg);\n  border-radius: var(--b-date-picker-border-radius);\n  box-shadow: var(--b-date-picker-panel-shadow);\n}\n\n.b-date-picker__presets {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 8px;\n  border-right: 1px solid rgba(0, 0, 0, 0.06);\n  min-width: var(--b-date-picker-presets-width);\n  max-width: var(--b-date-picker-presets-max-width);\n}\n.b-date-picker__preset-btn {\n  padding: 4px 8px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--b-date-picker-text-color);\n  white-space: nowrap;\n  transition: background var(--b-date-picker-transition-duration);\n}\n.b-date-picker__preset-btn:hover {\n  background: var(--b-date-picker-cell-hover-bg);\n}\n\n.b-date-picker__panel-main {\n  padding: 8px;\n  min-width: 280px;\n}\n\n.b-date-picker__header {\n  display: flex;\n  align-items: center;\n  padding: 0 4px 8px;\n}\n.b-date-picker__nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  cursor: pointer;\n  color: var(--b-date-picker-text-color-secondary);\n  transition:\n    color var(--b-date-picker-transition-duration),\n    background var(--b-date-picker-transition-duration);\n}\n.b-date-picker__nav-btn:hover {\n  color: var(--b-date-picker-text-color);\n  background: var(--b-date-picker-cell-hover-bg);\n}\n.b-date-picker__nav-btn svg {\n  width: 12px;\n  height: 12px;\n}\n.b-date-picker__heading {\n  flex: 1;\n  text-align: center;\n  border: none;\n  background: transparent;\n  font-weight: 600;\n  font-size: 14px;\n  cursor: pointer;\n  color: var(--b-date-picker-text-color);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-date-picker-transition-duration);\n}\n.b-date-picker__heading:hover {\n  background: var(--b-date-picker-cell-hover-bg);\n}\n\n.b-date-picker__body {\n  border-top: 1px solid rgba(0, 0, 0, 0.06);\n  padding-top: 4px;\n}\n\n.b-date-picker__weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n}\n.b-date-picker__weekdays:has(.b-date-picker__week-number-header) {\n  grid-template-columns: 32px repeat(7, 1fr);\n}\n.b-date-picker__weekday {\n  padding: 4px 0;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--b-date-picker-text-color-secondary);\n}\n.b-date-picker__week-number-header {\n  color: var(--b-date-picker-text-color-disabled);\n}\n\n.b-date-picker__row {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n}\n.b-date-picker__row:has(.b-date-picker__week-number) {\n  grid-template-columns: 32px repeat(7, 1fr);\n}\n.b-date-picker__week-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  color: var(--b-date-picker-text-color-disabled);\n}\n\n.b-date-picker__cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-date-picker-cell-width);\n  height: var(--b-date-picker-cell-height);\n  margin: 2px auto;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  font-size: 14px;\n  cursor: pointer;\n  color: var(--b-date-picker-text-color);\n  transition:\n    background var(--b-date-picker-transition-duration),\n    color var(--b-date-picker-transition-duration);\n}\n.b-date-picker__cell:hover:not(:disabled) {\n  background: var(--b-date-picker-cell-hover-bg);\n}\n.b-date-picker__cell--other {\n  color: var(--b-date-picker-text-color-disabled);\n}\n.b-date-picker__cell--today {\n  border: 1px solid var(--b-date-picker-today-border-color);\n}\n.b-date-picker__cell--selected {\n  background: var(--b-date-picker-selected-bg) !important;\n  color: var(--b-date-picker-selected-color) !important;\n}\n.b-date-picker__cell--disabled {\n  color: var(--b-date-picker-text-color-disabled);\n  background: var(--b-date-picker-cell-bg-disabled);\n  cursor: not-allowed;\n}\n.b-date-picker__cell--current {\n  border: 1px solid var(--b-date-picker-today-border-color);\n}\n.b-date-picker__cell--large {\n  width: auto;\n  height: var(--b-date-picker-without-time-cell-height);\n  padding: 8px 12px;\n}\n\n.b-date-picker__grid-3x4 {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 4px;\n}\n.b-date-picker__grid-2x2 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 8px;\n}\n\n.b-date-picker__footer {\n  display: flex;\n  justify-content: center;\n  padding-top: 8px;\n  border-top: 1px solid rgba(0, 0, 0, 0.06);\n  margin-top: 4px;\n}\n.b-date-picker__today-btn {\n  border: none;\n  background: transparent;\n  color: var(--b-date-picker-active-border-color);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-date-picker-transition-duration);\n}\n.b-date-picker__today-btn:hover {\n  background: var(--b-date-picker-cell-hover-bg);\n}\n\n[data-prefers-color='dark'] .b-date-picker {\n  --b-date-picker-bg: #141414;\n  --b-date-picker-panel-bg: #1f1f1f;\n  --b-date-picker-border-color: #424242;\n  --b-date-picker-text-color: rgba(255, 255, 255, 0.88);\n  --b-date-picker-text-color-secondary: rgba(255, 255, 255, 0.45);\n  --b-date-picker-text-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-date-picker-hover-border-color: #3c89e8;\n  --b-date-picker-active-border-color: #1668dc;\n  --b-date-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-date-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-date-picker-cell-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-date-picker-selected-bg: #1668dc;\n  --b-date-picker-today-border-color: #1668dc;\n  --b-date-picker-panel-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-date-picker-hover-bg: #141414;\n  --b-date-picker-active-bg: #141414;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-date-picker {\n    --b-date-picker-bg: #141414;\n    --b-date-picker-panel-bg: #1f1f1f;\n    --b-date-picker-border-color: #424242;\n    --b-date-picker-text-color: rgba(255, 255, 255, 0.88);\n    --b-date-picker-text-color-secondary: rgba(255, 255, 255, 0.45);\n    --b-date-picker-text-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-date-picker-hover-border-color: #3c89e8;\n    --b-date-picker-active-border-color: #1668dc;\n    --b-date-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-date-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-date-picker-cell-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-date-picker-selected-bg: #1668dc;\n    --b-date-picker-today-border-color: #1668dc;\n    --b-date-picker-panel-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-date-picker-hover-bg: #141414;\n    --b-date-picker-active-bg: #141414;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-date-picker,\n  .b-date-picker__panel,\n  .b-date-picker__cell,\n  .b-date-picker__input-wrap,\n  .b-date-picker__clear,\n  .b-date-picker__nav-btn,\n  .b-date-picker__heading,\n  .b-date-picker__preset-btn,\n  .b-date-picker__today-btn {\n    transition-duration: 0ms !important;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system72.js

@@ -1,202 +1,8 @@
-import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useSlots as ee, watch as b, withCtx as x } from "vue";
-//#region src/components/BDrawer/BDrawer.vue?vue&type=script&setup=true&lang.ts
-var S = ["aria-label", "aria-labelledby"], C = {
-	key: 0,
-	class: "b-drawer__header"
-}, w = { class: "b-drawer__header-title-wrapper" }, T = ["id"], E = {
-	key: 0,
-	class: "b-drawer__extra"
-}, D = {
-	key: 1,
-	class: "b-drawer__body"
-}, O = {
-	key: 0,
-	class: "b-drawer__loading",
-	"aria-live": "polite"
-}, k = {
-	key: 2,
-	class: "b-drawer__footer"
-}, A = /* @__PURE__ */ l({
-	__name: "BDrawer",
-	props: {
-		placement: { default: "right" },
-		size: { default: "default" },
-		title: { default: "" },
-		closable: {
-			type: Boolean,
-			default: !0
-		},
-		mask: {
-			type: Boolean,
-			default: !0
-		},
-		maskClosable: {
-			type: Boolean,
-			default: !0
-		},
-		keyboard: {
-			type: Boolean,
-			default: !0
-		},
-		destroyOnClose: {
-			type: Boolean,
-			default: !1
-		},
-		width: {},
-		height: {},
-		zIndex: { default: 1e3 },
-		getContainer: {},
-		autoFocus: {
-			type: Boolean,
-			default: !0
-		},
-		modelValue: {
-			type: Boolean,
-			default: () => void 0
-		},
-		forceRender: {
-			type: Boolean,
-			default: !1
-		},
-		extra: { default: "" },
-		footer: { default: "" },
-		loading: {
-			type: Boolean,
-			default: !1
-		},
-		ariaLabel: {}
-	},
-	emits: [
-		"close",
-		"afterOpenChange",
-		"update:modelValue"
-	],
-	setup(l, { expose: A, emit: j }) {
-		let M = j, N = ee(), P = y(), F = h(!1), I = n(() => l.modelValue === void 0 ? F.value : l.modelValue), L = h(!1), R = n(() => l.forceRender ? !0 : l.destroyOnClose ? I.value : L.value || I.value);
-		b(I, (e) => {
-			e && (L.value = !0);
-		});
-		let z = n(() => l.placement === "left" || l.placement === "right"), B = {
-			default: 378,
-			large: 736
-		}, V = n(() => l.width === void 0 ? z.value ? `${B[l.size]}px` : "100%" : typeof l.width == "number" ? `${l.width}px` : l.width), H = n(() => l.height === void 0 ? z.value ? "100%" : `${B[l.size]}px` : typeof l.height == "number" ? `${l.height}px` : l.height), U = n(() => !!(l.title || N.title)), W = n(() => !!(l.extra || N.extra)), G = n(() => !!(l.footer || N.footer)), K = n(() => U.value || l.closable || W.value), q = n(() => l.getContainer ? l.getContainer : "body"), J = n(() => ({
-			width: V.value,
-			height: H.value,
-			zIndex: l.zIndex
-		})), Y = h(null), X = null;
-		function Z(e) {
-			if (e.key !== "Tab" || !Y.value) return;
-			let t = Array.from(Y.value.querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"));
-			if (t.length === 0) {
-				e.preventDefault();
-				return;
-			}
-			let n = t[0], r = t[t.length - 1];
-			e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
-		}
-		function Q() {
-			!l.autoFocus || !Y.value || u(() => {
-				if (!Y.value) return;
-				let e = Y.value.querySelector("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])");
-				e ? e.focus() : Y.value.focus();
-			});
-		}
-		b(I, (e) => {
-			e ? (X = document.activeElement, u(() => Q()), document.body.style.overflow = "hidden") : document.body.style.overflow = "";
-		}), p(() => {
-			document.body.style.overflow = "";
-		});
-		function $(e) {
-			M("close", e), l.modelValue === void 0 ? F.value = !1 : M("update:modelValue", !1);
-		}
-		function te(e) {
-			l.maskClosable && $(e);
-		}
-		function ne(e) {
-			e.key === "Escape" && l.keyboard && (e.stopPropagation(), $(e)), Z(e);
-		}
-		function re() {
-			M("afterOpenChange", !0);
-		}
-		function ie() {
-			M("afterOpenChange", !1), X && typeof X.focus == "function" && (X.focus(), X = null);
-		}
-		function ae() {
-			l.modelValue === void 0 ? F.value = !0 : M("update:modelValue", !0);
-		}
-		return A({ open: ae }), (n, u) => (m(), r(e, { to: q.value }, [c(t, {
-			name: "b-drawer",
-			onAfterEnter: re,
-			onAfterLeave: ie
-		}, {
-			default: x(() => [I.value ? (m(), a("div", {
-				key: 0,
-				class: d(["b-drawer-root", `b-drawer-root--${l.placement}`]),
-				style: f({ zIndex: l.zIndex })
-			}, [l.mask ? (m(), a("div", {
-				key: 0,
-				class: "b-drawer__mask",
-				"aria-hidden": "true",
-				onClick: te
-			})) : i("", !0), o("div", {
-				ref_key: "drawerRef",
-				ref: Y,
-				class: d(["b-drawer", [
-					`b-drawer--${l.placement}`,
-					`b-drawer--${l.size}`,
-					{
-						"b-drawer--has-header": K.value,
-						"b-drawer--has-footer": G.value
-					}
-				]]),
-				role: "dialog",
-				"aria-modal": "true",
-				"aria-label": U.value ? void 0 : l.ariaLabel,
-				"aria-labelledby": U.value ? v(P) : void 0,
-				style: f(J.value),
-				tabindex: "-1",
-				onKeydown: ne
-			}, [
-				K.value ? (m(), a("div", C, [o("div", w, [l.closable ? (m(), a("button", {
-					key: 0,
-					type: "button",
-					class: "b-drawer__close",
-					"aria-label": "Close drawer",
-					onClick: $
-				}, [g(n.$slots, "closeIcon", {}, () => [u[0] ||= o("svg", {
-					class: "b-drawer__close-icon",
-					viewBox: "0 0 24 24",
-					xmlns: "http://www.w3.org/2000/svg",
-					"aria-hidden": "true",
-					focusable: "false"
-				}, [o("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })], -1)])])) : i("", !0), U.value ? (m(), a("div", {
-					key: 1,
-					id: v(P),
-					class: "b-drawer__title"
-				}, [g(n.$slots, "title", {}, () => [s(_(l.title), 1)])], 8, T)) : i("", !0)]), W.value ? (m(), a("div", E, [g(n.$slots, "extra", {}, () => [s(_(l.extra), 1)])])) : i("", !0)])) : i("", !0),
-				R.value ? (m(), a("div", D, [l.loading ? (m(), a("div", O, [...u[1] ||= [o("svg", {
-					class: "b-drawer__spinner",
-					viewBox: "0 0 24 24",
-					xmlns: "http://www.w3.org/2000/svg",
-					"aria-hidden": "true",
-					focusable: "false"
-				}, [o("circle", {
-					cx: "12",
-					cy: "12",
-					r: "10",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "3",
-					"stroke-dasharray": "31.4 31.4",
-					"stroke-linecap": "round"
-				})], -1), o("span", { class: "b-drawer__loading-text" }, "Loading…", -1)]])) : g(n.$slots, "default", { key: 1 })])) : i("", !0),
-				G.value ? (m(), a("div", k, [g(n.$slots, "footer", {}, () => [s(_(l.footer), 1)])])) : i("", !0)
-			], 46, S)], 6)) : i("", !0)]),
-			_: 3
-		})], 8, ["to"]));
-	}
-});
+import e from "./design-system70.js";
+/* empty css                */
+//#region src/components/BDatePicker/BDatePicker.vue
+var t = e;
 //#endregion
-export { A as default };
+export { t as default };
 
 //# sourceMappingURL=design-system72.js.map