@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system72.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system72.js","names":[],"sources":["../src/components/BDrawer/BDrawer.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useSlots as _useSlots, defineComponent as _defineComponent } from 'vue'\nimport { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = [\"aria-label\", \"aria-labelledby\"]\nconst _hoisted_2 = {\n  key: 0,\n  class: \"b-drawer__header\"\n}\nconst _hoisted_3 = { class: \"b-drawer__header-title-wrapper\" }\nconst _hoisted_4 = [\"id\"]\nconst _hoisted_5 = {\n  key: 0,\n  class: \"b-drawer__extra\"\n}\nconst _hoisted_6 = {\n  key: 1,\n  class: \"b-drawer__body\"\n}\nconst _hoisted_7 = {\n  key: 0,\n  class: \"b-drawer__loading\",\n  \"aria-live\": \"polite\"\n}\nconst _hoisted_8 = {\n  key: 2,\n  class: \"b-drawer__footer\"\n}\n\nimport type { BDrawerPlacement, BDrawerSize } from '@/types';\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BDrawer',\n  props: {\n    placement: { default: 'right' },\n    size: { default: 'default' },\n    title: { default: '' },\n    closable: { type: Boolean, default: true },\n    mask: { type: Boolean, default: true },\n    maskClosable: { type: Boolean, default: true },\n    keyboard: { type: Boolean, default: true },\n    destroyOnClose: { type: Boolean, default: false },\n    width: {},\n    height: {},\n    zIndex: { default: 1000 },\n    getContainer: {},\n    autoFocus: { type: Boolean, default: true },\n    modelValue: { type: Boolean, default: () => (undefined) },\n    forceRender: { type: Boolean, default: false },\n    extra: { default: '' },\n    footer: { default: '' },\n    loading: { type: Boolean, default: false },\n    ariaLabel: {}\n  },\n  emits: [\"close\", \"afterOpenChange\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst emit = __emit;\n\nconst slots = _useSlots();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst titleId = useId();\n\n/** Uncontrolled visibility. */\nconst internalOpen = ref(false);\n\n/** Effective visibility. */\nconst isOpen = computed(() => (__props.modelValue !== undefined ? __props.modelValue : internalOpen.value));\n\n/** Whether the drawer has ever been opened (for lazy rendering). */\nconst hasBeenOpened = ref(false);\n\n/** Whether the content should render. */\nconst shouldRender = computed(() => {\n  if (__props.forceRender) return true;\n  if (__props.destroyOnClose) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\n// Track when drawer opens at least once\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isHorizontal = computed(() => __props.placement === 'left' || __props.placement === 'right');\n\nconst sizeMap: Record<BDrawerSize, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst resolvedWidth = computed(() => {\n  if (__props.width !== undefined) return typeof __props.width === 'number' ? `${__props.width}px` : __props.width;\n  return isHorizontal.value ? `${sizeMap[__props.size]}px` : '100%';\n});\n\nconst resolvedHeight = computed(() => {\n  if (__props.height !== undefined) return typeof __props.height === 'number' ? `${__props.height}px` : __props.height;\n  return !isHorizontal.value ? `${sizeMap[__props.size]}px` : '100%';\n});\n\nconst hasTitle = computed(() => Boolean(__props.title || slots.title));\nconst hasExtra = computed(() => Boolean(__props.extra || slots.extra));\nconst hasFooter = computed(() => Boolean(__props.footer || slots.footer));\nconst hasHeader = computed(() => hasTitle.value || __props.closable || hasExtra.value);\n\nconst teleportTarget = computed(() => {\n  if (__props.getContainer) return __props.getContainer;\n  return 'body';\n});\n\nconst panelStyle = computed(() => ({\n  width: resolvedWidth.value,\n  height: resolvedHeight.value,\n  zIndex: __props.zIndex,\n}));\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nconst drawerRef = ref<HTMLElement | null>(null);\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nfunction trapFocus(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !drawerRef.value) return;\n\n  const focusableSelectors =\n    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n  const focusable = Array.from(drawerRef.value.querySelectorAll<HTMLElement>(focusableSelectors));\n\n  if (focusable.length === 0) {\n    event.preventDefault();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (event.shiftKey) {\n    if (document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nfunction focusFirst() {\n  if (!__props.autoFocus || !drawerRef.value) return;\n\n  nextTick(() => {\n    if (!drawerRef.value) return;\n    const focusableSelectors =\n      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n    const first = drawerRef.value.querySelector<HTMLElement>(focusableSelectors);\n    if (first) {\n      first.focus();\n    } else {\n      // Focus the panel itself as a fallback\n      drawerRef.value.focus();\n    }\n  });\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    nextTick(() => focusFirst());\n    document.body.style.overflow = 'hidden';\n  } else {\n    document.body.style.overflow = '';\n  }\n});\n\nonBeforeUnmount(() => {\n  document.body.style.overflow = '';\n});\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction requestClose(event: MouseEvent | KeyboardEvent) {\n  emit('close', event);\n  if (__props.modelValue !== undefined) {\n    emit('update:modelValue', false);\n  } else {\n    internalOpen.value = false;\n  }\n}\n\nfunction onMaskClick(event: MouseEvent) {\n  if (__props.maskClosable) {\n    requestClose(event);\n  }\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && __props.keyboard) {\n    event.stopPropagation();\n    requestClose(event);\n  }\n  trapFocus(event);\n}\n\nfunction onAfterEnter() {\n  emit('afterOpenChange', true);\n}\n\nfunction onAfterLeave() {\n  emit('afterOpenChange', false);\n  // Restore focus to the previously focused element\n  if (previouslyFocusedElement && typeof previouslyFocusedElement.focus === 'function') {\n    previouslyFocusedElement.focus();\n    previouslyFocusedElement = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\nfunction open() {\n  if (__props.modelValue !== undefined) {\n    emit('update:modelValue', true);\n  } else {\n    internalOpen.value = true;\n  }\n}\n\n__expose({ open });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(_Teleport, { to: teleportTarget.value }, [\n    _createVNode(_Transition, {\n      name: \"b-drawer\",\n      onAfterEnter: onAfterEnter,\n      onAfterLeave: onAfterLeave\n    }, {\n      default: _withCtx(() => [\n        (isOpen.value)\n          ? (_openBlock(), _createElementBlock(\"div\", {\n              key: 0,\n              class: _normalizeClass([\"b-drawer-root\", `b-drawer-root--${__props.placement}`]),\n              style: _normalizeStyle({ zIndex: __props.zIndex })\n            }, [\n              (__props.mask)\n                ? (_openBlock(), _createElementBlock(\"div\", {\n                    key: 0,\n                    class: \"b-drawer__mask\",\n                    \"aria-hidden\": \"true\",\n                    onClick: onMaskClick\n                  }))\n                : _createCommentVNode(\"\", true),\n              _createElementVNode(\"div\", {\n                ref_key: \"drawerRef\",\n                ref: drawerRef,\n                class: _normalizeClass([\"b-drawer\", [\n            `b-drawer--${__props.placement}`,\n            `b-drawer--${__props.size}`,\n            {\n              'b-drawer--has-header': hasHeader.value,\n              'b-drawer--has-footer': hasFooter.value,\n            },\n          ]]),\n                role: \"dialog\",\n                \"aria-modal\": \"true\",\n                \"aria-label\": !hasTitle.value ? __props.ariaLabel : undefined,\n                \"aria-labelledby\": hasTitle.value ? _unref(titleId) : undefined,\n                style: _normalizeStyle(panelStyle.value),\n                tabindex: \"-1\",\n                onKeydown: onKeydown\n              }, [\n                (hasHeader.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, [\n                      _createElementVNode(\"div\", _hoisted_3, [\n                        (__props.closable)\n                          ? (_openBlock(), _createElementBlock(\"button\", {\n                              key: 0,\n                              type: \"button\",\n                              class: \"b-drawer__close\",\n                              \"aria-label\": \"Close drawer\",\n                              onClick: requestClose\n                            }, [\n                              _renderSlot(_ctx.$slots, \"closeIcon\", {}, () => [\n                                _cache[0] || (_cache[0] = _createElementVNode(\"svg\", {\n                                  class: \"b-drawer__close-icon\",\n                                  viewBox: \"0 0 24 24\",\n                                  xmlns: \"http://www.w3.org/2000/svg\",\n                                  \"aria-hidden\": \"true\",\n                                  focusable: \"false\"\n                                }, [\n                                  _createElementVNode(\"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\" })\n                                ], -1))\n                              ])\n                            ]))\n                          : _createCommentVNode(\"\", true),\n                        (hasTitle.value)\n                          ? (_openBlock(), _createElementBlock(\"div\", {\n                              key: 1,\n                              id: _unref(titleId),\n                              class: \"b-drawer__title\"\n                            }, [\n                              _renderSlot(_ctx.$slots, \"title\", {}, () => [\n                                _createTextVNode(_toDisplayString(__props.title), 1)\n                              ])\n                            ], 8, _hoisted_4))\n                          : _createCommentVNode(\"\", true)\n                      ]),\n                      (hasExtra.value)\n                        ? (_openBlock(), _createElementBlock(\"div\", _hoisted_5, [\n                            _renderSlot(_ctx.$slots, \"extra\", {}, () => [\n                              _createTextVNode(_toDisplayString(__props.extra), 1)\n                            ])\n                          ]))\n                        : _createCommentVNode(\"\", true)\n                    ]))\n                  : _createCommentVNode(\"\", true),\n                (shouldRender.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", _hoisted_6, [\n                      (__props.loading)\n                        ? (_openBlock(), _createElementBlock(\"div\", _hoisted_7, [...(_cache[1] || (_cache[1] = [\n                            _createElementVNode(\"svg\", {\n                              class: \"b-drawer__spinner\",\n                              viewBox: \"0 0 24 24\",\n                              xmlns: \"http://www.w3.org/2000/svg\",\n                              \"aria-hidden\": \"true\",\n                              focusable: \"false\"\n                            }, [\n                              _createElementVNode(\"circle\", {\n                                cx: \"12\",\n                                cy: \"12\",\n                                r: \"10\",\n                                fill: \"none\",\n                                stroke: \"currentColor\",\n                                \"stroke-width\": \"3\",\n                                \"stroke-dasharray\": \"31.4 31.4\",\n                                \"stroke-linecap\": \"round\"\n                              })\n                            ], -1),\n                            _createElementVNode(\"span\", { class: \"b-drawer__loading-text\" }, \"Loading…\", -1)\n                          ]))]))\n                        : _renderSlot(_ctx.$slots, \"default\", { key: 1 })\n                    ]))\n                  : _createCommentVNode(\"\", true),\n                (hasFooter.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", _hoisted_8, [\n                      _renderSlot(_ctx.$slots, \"footer\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.footer), 1)\n                      ])\n                    ]))\n                  : _createCommentVNode(\"\", true)\n              ], 46, _hoisted_1)\n            ], 6))\n          : _createCommentVNode(\"\", true)\n      ]),\n      _: 3\n    })\n  ], 8, [\"to\"]))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system72.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":""}

package/dist/design-system73.js

@@ -0,0 +1,161 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, useSlots as h } from "vue";
+//#region src/components/BDescriptions/BDescriptions.vue?vue&type=script&setup=true&lang.ts
+var g = {
+	key: 0,
+	class: "b-descriptions__header"
+}, _ = {
+	key: 0,
+	class: "b-descriptions__title"
+}, v = {
+	key: 1,
+	class: "b-descriptions__extra"
+}, y = { class: "b-descriptions__body" }, b = {
+	key: 0,
+	class: "b-descriptions__table",
+	role: "presentation"
+}, x = ["colspan"], S = { class: "b-descriptions__row" }, C = ["colspan"], w = { class: "b-descriptions__row" }, T = ["colspan"], E = {
+	key: 1,
+	class: "b-descriptions__table",
+	role: "presentation"
+}, D = ["colspan"], O = { class: "b-descriptions__row" }, k = ["colspan"], A = { class: "b-descriptions__row" }, j = ["colspan"], M = /* @__PURE__ */ s({
+	__name: "BDescriptions",
+	props: {
+		bordered: {
+			type: Boolean,
+			default: !1
+		},
+		colon: {
+			type: Boolean,
+			default: !0
+		},
+		column: { default: 3 },
+		layout: { default: "horizontal" },
+		size: { default: "default" },
+		title: {},
+		extra: {},
+		items: {},
+		labelStyle: {},
+		contentStyle: {}
+	},
+	setup(s) {
+		let M = h(), N = t(() => !!(s.title || M.title || s.extra || M.extra)), P = t(() => ["b-descriptions", {
+			"b-descriptions--bordered": s.bordered,
+			"b-descriptions--vertical": s.layout === "vertical",
+			"b-descriptions--horizontal": s.layout === "horizontal",
+			"b-descriptions--middle": s.size === "middle",
+			"b-descriptions--small": s.size === "small",
+			"b-descriptions--colon": s.colon
+		}]), F = t(() => {
+			if (s.items && s.items.length > 0) return s.items.map((e) => ({
+				label: e.label,
+				children: e.children,
+				span: e.span ?? 1,
+				labelStyle: e.labelStyle,
+				contentStyle: e.contentStyle
+			}));
+			let t = M.default?.();
+			if (!t) return [];
+			let n = [];
+			function r(t) {
+				for (let i of t) {
+					if (i.type === e) {
+						Array.isArray(i.children) && r(i.children);
+						continue;
+					}
+					let t = i.props || {}, a = i.children, o = a?.label?.(), s = a?.default?.();
+					n.push({
+						label: t.label,
+						span: t.span ?? 1,
+						labelStyle: t.labelStyle,
+						contentStyle: t.contentStyle,
+						labelSlot: o ? Array.isArray(o) ? o : [o] : void 0,
+						contentSlot: s ? Array.isArray(s) ? s : [s] : void 0
+					});
+				}
+			}
+			return r(t), n;
+		}), I = t(() => {
+			let e = [], t = { items: [] }, n = 0;
+			for (let r = 0; r < F.value.length; r++) {
+				let i = F.value[r], a = r === F.value.length - 1, o = Math.min(i.span, s.column);
+				if (n + o > s.column && t.items.length > 0) {
+					let r = t.items[t.items.length - 1];
+					r.effectiveSpan += s.column - n, e.push(t), t = { items: [] }, n = 0;
+				}
+				a && (o = s.column - n), t.items.push({
+					...i,
+					effectiveSpan: o
+				}), n += o, n >= s.column && (e.push(t), t = { items: [] }, n = 0);
+			}
+			if (t.items.length > 0) {
+				let r = t.items[t.items.length - 1];
+				r.effectiveSpan += s.column - n, e.push(t);
+			}
+			return e;
+		});
+		function L(e) {
+			if (!(!s.labelStyle && !e.labelStyle)) return {
+				...s.labelStyle,
+				...e.labelStyle
+			};
+		}
+		function R(e) {
+			if (!(!s.contentStyle && !e.contentStyle)) return {
+				...s.contentStyle,
+				...e.contentStyle
+			};
+		}
+		return (t, h) => (u(), i("div", { class: c(P.value) }, [N.value ? (u(), i("div", g, [s.title || t.$slots.title ? (u(), i("div", _, [f(t.$slots, "title", {}, () => [o(m(s.title), 1)])])) : r("", !0), s.extra || t.$slots.extra ? (u(), i("div", v, [f(t.$slots, "extra", {}, () => [o(m(s.extra), 1)])])) : r("", !0)])) : r("", !0), a("div", y, [s.bordered ? (u(), i("table", b, [a("tbody", null, [s.layout === "horizontal" ? (u(!0), i(e, { key: 0 }, d(I.value, (t, r) => (u(), i("tr", {
+			key: r,
+			class: "b-descriptions__row"
+		}, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i(e, { key: r }, [a("th", {
+			class: "b-descriptions__item-label b-descriptions__item-label--bordered",
+			style: l(L(t))
+		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 4), a("td", {
+			class: "b-descriptions__item-content b-descriptions__item-content--bordered",
+			colspan: t.effectiveSpan * 2 - 1,
+			style: l(R(t))
+		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 12, x)], 64))), 128))]))), 128)) : (u(!0), i(e, { key: 1 }, d(I.value, (t, r) => (u(), i(e, { key: r }, [a("tr", S, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("th", {
+			key: "label-" + r,
+			class: "b-descriptions__item-label b-descriptions__item-label--bordered",
+			colspan: t.effectiveSpan,
+			style: l(L(t))
+		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 12, C))), 128))]), a("tr", w, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
+			key: "content-" + r,
+			class: "b-descriptions__item-content b-descriptions__item-content--bordered",
+			colspan: t.effectiveSpan,
+			style: l(R(t))
+		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 12, T))), 128))])], 64))), 128))])])) : (u(), i("table", E, [a("tbody", null, [s.layout === "horizontal" ? (u(!0), i(e, { key: 0 }, d(I.value, (t, r) => (u(), i("tr", {
+			key: r,
+			class: "b-descriptions__row"
+		}, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
+			key: r,
+			class: "b-descriptions__item",
+			colspan: t.effectiveSpan
+		}, [a("span", {
+			class: "b-descriptions__item-label",
+			style: l(L(t))
+		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 4), a("span", {
+			class: "b-descriptions__item-content",
+			style: l(R(t))
+		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 4)], 8, D))), 128))]))), 128)) : (u(!0), i(e, { key: 1 }, d(I.value, (t, r) => (u(), i(e, { key: r }, [a("tr", O, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
+			key: "label-" + r,
+			class: "b-descriptions__item",
+			colspan: t.effectiveSpan
+		}, [a("span", {
+			class: "b-descriptions__item-label",
+			style: l(L(t))
+		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 4)], 8, k))), 128))]), a("tr", A, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
+			key: "content-" + r,
+			class: "b-descriptions__item",
+			colspan: t.effectiveSpan
+		}, [a("span", {
+			class: "b-descriptions__item-content",
+			style: l(R(t))
+		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 4)], 8, j))), 128))])], 64))), 128))])]))])], 2));
+	}
+});
+//#endregion
+export { M as default };
+
+//# sourceMappingURL=design-system73.js.map

package/dist/design-system73.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system73.js","names":["$slots"],"sources":["../src/components/BDescriptions/BDescriptions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CSSProperties, VNode } from 'vue';\nimport { computed, Fragment, useSlots } from 'vue';\n\nimport type { BDescriptionsItem } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  bordered = false,\n  colon = true,\n  column = 3,\n  layout = 'horizontal',\n  size = 'default',\n  title,\n  extra,\n  items,\n  labelStyle,\n  contentStyle,\n} = defineProps<{\n  /** Whether to show border around the list. @default false */\n  bordered?: boolean;\n  /** Whether to show colon after the label. @default true */\n  colon?: boolean;\n  /** Number of columns per row. @default 3 */\n  column?: number;\n  /** Layout direction of description items. @default 'horizontal' */\n  layout?: 'horizontal' | 'vertical';\n  /** Size of the component. @default 'default' */\n  size?: 'default' | 'middle' | 'small';\n  /** Title of the descriptions block */\n  title?: string;\n  /** Extra content in the top-right corner */\n  extra?: string;\n  /** Description items data (alternative to slot-based usage) */\n  items?: BDescriptionsItem[];\n  /** Default style for all labels */\n  labelStyle?: CSSProperties;\n  /** Default style for all content cells */\n  contentStyle?: CSSProperties;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** BDescriptionsItem children */\n  default?: (props: Record<string, never>) => unknown;\n  /** Title area. Overrides the `title` prop */\n  title?: (props: Record<string, never>) => unknown;\n  /** Extra content area. Overrides the `extra` prop */\n  extra?: (props: Record<string, never>) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst hasHeader = computed(() => {\n  return !!(title || slots.title || extra || slots.extra);\n});\n\nconst rootClasses = computed(() => [\n  'b-descriptions',\n  {\n    'b-descriptions--bordered': bordered,\n    'b-descriptions--vertical': layout === 'vertical',\n    'b-descriptions--horizontal': layout === 'horizontal',\n    'b-descriptions--middle': size === 'middle',\n    'b-descriptions--small': size === 'small',\n    'b-descriptions--colon': colon,\n  },\n]);\n\n/**\n * Collect items from the `items` prop or from slot children (BDescriptionsItem VNodes).\n * Each resolved item has: label, children, span, labelStyle, contentStyle, labelSlot, contentSlot.\n */\ninterface ResolvedItem {\n  label?: string;\n  children?: string;\n  span: number;\n  labelStyle?: CSSProperties;\n  contentStyle?: CSSProperties;\n  /** VNode array for the label slot (from BDescriptionsItem slot usage) */\n  labelSlot?: VNode[];\n  /** VNode array for the content slot (from BDescriptionsItem default slot) */\n  contentSlot?: VNode[];\n}\n\nconst resolvedItems = computed<ResolvedItem[]>(() => {\n  // If items prop is provided, use it directly\n  if (items && items.length > 0) {\n    return items.map((item) => ({\n      label: item.label,\n      children: item.children,\n      span: item.span ?? 1,\n      labelStyle: item.labelStyle,\n      contentStyle: item.contentStyle,\n    }));\n  }\n\n  // Otherwise, extract from default slot VNodes (BDescriptionsItem instances)\n  const defaultSlot = slots.default?.();\n  if (!defaultSlot) return [];\n\n  const result: ResolvedItem[] = [];\n\n  function extractItems(vnodes: VNode[]) {\n    for (const vnode of vnodes) {\n      // Handle fragments (v-for, template wrappers)\n      if (vnode.type === Fragment) {\n        if (Array.isArray(vnode.children)) {\n          extractItems(vnode.children as VNode[]);\n        }\n        continue;\n      }\n\n      const props = (vnode.props || {}) as Record<string, unknown>;\n      const children = vnode.children as Record<\n        string,\n        (...args: unknown[]) => VNode | VNode[]\n      > | null;\n\n      const rawLabel = children?.label?.();\n      const rawContent = children?.default?.();\n\n      result.push({\n        label: props.label as string | undefined,\n        span: (props.span as number) ?? 1,\n        labelStyle: props.labelStyle as CSSProperties | undefined,\n        contentStyle: props.contentStyle as CSSProperties | undefined,\n        labelSlot: rawLabel ? (Array.isArray(rawLabel) ? rawLabel : [rawLabel]) : undefined,\n        contentSlot: rawContent\n          ? Array.isArray(rawContent)\n            ? rawContent\n            : [rawContent]\n          : undefined,\n      });\n    }\n  }\n\n  extractItems(defaultSlot);\n  return result;\n});\n\n/**\n * Organize items into rows based on the column count.\n * The last item in each row gets its span extended to fill the remaining columns.\n */\ninterface RowData {\n  items: Array<ResolvedItem & { effectiveSpan: number }>;\n}\n\nconst rows = computed<RowData[]>(() => {\n  const result: RowData[] = [];\n  let currentRow: RowData = { items: [] };\n  let colsUsed = 0;\n\n  for (let i = 0; i < resolvedItems.value.length; i++) {\n    const item = resolvedItems.value[i];\n    const isLast = i === resolvedItems.value.length - 1;\n    let span = Math.min(item.span, column);\n\n    // If this item would exceed the row, start a new row\n    if (colsUsed + span > column) {\n      if (currentRow.items.length > 0) {\n        // Fill remaining columns of the previous row\n        const lastInRow = currentRow.items[currentRow.items.length - 1];\n        lastInRow.effectiveSpan += column - colsUsed;\n        result.push(currentRow);\n        currentRow = { items: [] };\n        colsUsed = 0;\n      }\n    }\n\n    // If this is the last item, it takes up remaining space in the row\n    if (isLast) {\n      span = column - colsUsed;\n    }\n\n    currentRow.items.push({ ...item, effectiveSpan: span });\n    colsUsed += span;\n\n    if (colsUsed >= column) {\n      result.push(currentRow);\n      currentRow = { items: [] };\n      colsUsed = 0;\n    }\n  }\n\n  // Push any remaining items\n  if (currentRow.items.length > 0) {\n    const lastInRow = currentRow.items[currentRow.items.length - 1];\n    lastInRow.effectiveSpan += column - colsUsed;\n    result.push(currentRow);\n  }\n\n  return result;\n});\n\n/**\n * Merge global label/content styles with per-item styles.\n * Item-level styles override global styles.\n */\nfunction mergedLabelStyle(item: ResolvedItem): CSSProperties | undefined {\n  if (!labelStyle && !item.labelStyle) return undefined;\n  return { ...labelStyle, ...item.labelStyle };\n}\n\nfunction mergedContentStyle(item: ResolvedItem): CSSProperties | undefined {\n  if (!contentStyle && !item.contentStyle) return undefined;\n  return { ...contentStyle, ...item.contentStyle };\n}\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <!-- Header -->\n    <div v-if=\"hasHeader\" class=\"b-descriptions__header\">\n      <div v-if=\"title || $slots.title\" class=\"b-descriptions__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"extra || $slots.extra\" class=\"b-descriptions__extra\">\n        <slot name=\"extra\">{{ extra }}</slot>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"b-descriptions__body\">\n      <!-- Bordered: use a real <table> -->\n      <table v-if=\"bordered\" class=\"b-descriptions__table\" role=\"presentation\">\n        <tbody>\n          <!-- Horizontal layout with border -->\n          <template v-if=\"layout === 'horizontal'\">\n            <tr v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\" class=\"b-descriptions__row\">\n              <template v-for=\"(item, itemIndex) in row.items\" :key=\"itemIndex\">\n                <th\n                  class=\"b-descriptions__item-label b-descriptions__item-label--bordered\"\n                  :style=\"mergedLabelStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </th>\n                <td\n                  class=\"b-descriptions__item-content b-descriptions__item-content--bordered\"\n                  :colspan=\"item.effectiveSpan * 2 - 1\"\n                  :style=\"mergedContentStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </td>\n              </template>\n            </tr>\n          </template>\n\n          <!-- Vertical layout with border -->\n          <template v-else>\n            <template v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\">\n              <tr class=\"b-descriptions__row\">\n                <th\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'label-' + itemIndex\"\n                  class=\"b-descriptions__item-label b-descriptions__item-label--bordered\"\n                  :colspan=\"item.effectiveSpan\"\n                  :style=\"mergedLabelStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </th>\n              </tr>\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'content-' + itemIndex\"\n                  class=\"b-descriptions__item-content b-descriptions__item-content--bordered\"\n                  :colspan=\"item.effectiveSpan\"\n                  :style=\"mergedContentStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </td>\n              </tr>\n            </template>\n          </template>\n        </tbody>\n      </table>\n\n      <!-- Non-bordered: use a description list -->\n      <table v-else class=\"b-descriptions__table\" role=\"presentation\">\n        <tbody>\n          <!-- Horizontal layout (default) -->\n          <template v-if=\"layout === 'horizontal'\">\n            <tr v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\" class=\"b-descriptions__row\">\n              <td\n                v-for=\"(item, itemIndex) in row.items\"\n                :key=\"itemIndex\"\n                class=\"b-descriptions__item\"\n                :colspan=\"item.effectiveSpan\"\n              >\n                <span class=\"b-descriptions__item-label\" :style=\"mergedLabelStyle(item)\">\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </span>\n                <span class=\"b-descriptions__item-content\" :style=\"mergedContentStyle(item)\">\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </span>\n              </td>\n            </tr>\n          </template>\n\n          <!-- Vertical layout -->\n          <template v-else>\n            <template v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\">\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'label-' + itemIndex\"\n                  class=\"b-descriptions__item\"\n                  :colspan=\"item.effectiveSpan\"\n                >\n                  <span class=\"b-descriptions__item-label\" :style=\"mergedLabelStyle(item)\">\n                    <component\n                      v-if=\"item.labelSlot && item.labelSlot.length\"\n                      :is=\"() => item.labelSlot\"\n                    />\n                    <template v-else>{{ item.label }}</template>\n                  </span>\n                </td>\n              </tr>\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'content-' + itemIndex\"\n                  class=\"b-descriptions__item\"\n                  :colspan=\"item.effectiveSpan\"\n                >\n                  <span class=\"b-descriptions__item-content\" :style=\"mergedContentStyle(item)\">\n                    <component\n                      v-if=\"item.contentSlot && item.contentSlot.length\"\n                      :is=\"() => item.contentSlot\"\n                    />\n                    <template v-else>{{ item.children }}</template>\n                  </span>\n                </td>\n              </tr>\n            </template>\n          </template>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BDescriptions - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-descriptions {\n  /* Surface */\n  --b-descriptions-bg: oklch(100% 0 0);\n  --b-descriptions-color: oklch(20% 0.02 260);\n  --b-descriptions-border-color: oklch(88% 0.01 260);\n  --b-descriptions-border-radius: 8px;\n  --b-descriptions-transition-duration: 200ms;\n\n  /* Title */\n  --b-descriptions-title-color: oklch(20% 0.02 260);\n  --b-descriptions-title-font-size: 16px;\n  --b-descriptions-title-font-weight: 600;\n  --b-descriptions-title-margin-bottom: 20px;\n\n  /* Extra */\n  --b-descriptions-extra-color: oklch(45% 0.02 260);\n  --b-descriptions-extra-font-size: 14px;\n\n  /* Label */\n  --b-descriptions-label-color: oklch(40% 0.02 260);\n  --b-descriptions-label-bg: oklch(97% 0.005 260);\n  --b-descriptions-label-font-weight: 400;\n\n  /* Content */\n  --b-descriptions-content-color: oklch(20% 0.02 260);\n\n  /* Item spacing */\n  --b-descriptions-item-padding-bottom: 16px;\n  --b-descriptions-item-padding-end: 16px;\n\n  /* Colon */\n  --b-descriptions-colon-margin-left: 2px;\n  --b-descriptions-colon-margin-right: 8px;\n\n  /* Bordered cell padding */\n  --b-descriptions-cell-padding: 16px 24px;\n  --b-descriptions-cell-padding-middle: 12px 20px;\n  --b-descriptions-cell-padding-small: 8px 16px;\n\n  /* Layout */\n  color: var(--b-descriptions-color);\n  font-size: 14px;\n  line-height: 1.5715;\n  box-sizing: border-box;\n}\n\n/* ── Header ── */\n.b-descriptions__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--b-descriptions-title-margin-bottom);\n  gap: 16px;\n}\n\n.b-descriptions__title {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--b-descriptions-title-color);\n  font-size: var(--b-descriptions-title-font-size);\n  font-weight: var(--b-descriptions-title-font-weight);\n  line-height: 1.5;\n}\n\n.b-descriptions__extra {\n  flex: none;\n  color: var(--b-descriptions-extra-color);\n  font-size: var(--b-descriptions-extra-font-size);\n}\n\n/* ── Body ── */\n.b-descriptions__body {\n  width: 100%;\n  overflow: hidden;\n}\n\n/* ── Table ── */\n.b-descriptions__table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ── Bordered table ── */\n.b-descriptions--bordered .b-descriptions__table {\n  border: 1px solid var(--b-descriptions-border-color);\n  border-radius: var(--b-descriptions-border-radius);\n  overflow: hidden;\n}\n\n.b-descriptions--bordered .b-descriptions__row > th,\n.b-descriptions--bordered .b-descriptions__row > td {\n  border-inline-end: 1px solid var(--b-descriptions-border-color);\n  border-bottom: 1px solid var(--b-descriptions-border-color);\n}\n\n.b-descriptions--bordered .b-descriptions__row > th:last-child,\n.b-descriptions--bordered .b-descriptions__row > td:last-child {\n  border-inline-end: none;\n}\n\n.b-descriptions--bordered .b-descriptions__row:last-child > th,\n.b-descriptions--bordered .b-descriptions__row:last-child > td {\n  border-bottom: none;\n}\n\n.b-descriptions--bordered .b-descriptions__item-label--bordered {\n  padding: var(--b-descriptions-cell-padding);\n  background: var(--b-descriptions-label-bg);\n  color: var(--b-descriptions-label-color);\n  font-weight: var(--b-descriptions-label-font-weight);\n  white-space: nowrap;\n}\n\n.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding);\n  color: var(--b-descriptions-content-color);\n}\n\n/* ── Non-bordered items ── */\n.b-descriptions__item {\n  padding-bottom: var(--b-descriptions-item-padding-bottom);\n  vertical-align: top;\n}\n\n.b-descriptions__item .b-descriptions__item-label {\n  color: var(--b-descriptions-label-color);\n  font-weight: var(--b-descriptions-label-font-weight);\n  display: inline-block;\n}\n\n.b-descriptions__item .b-descriptions__item-content {\n  color: var(--b-descriptions-content-color);\n  display: inline-block;\n}\n\n/* ── Colon ── */\n.b-descriptions--colon:not(.b-descriptions--vertical)\n  .b-descriptions__item\n  .b-descriptions__item-label::after {\n  content: ':';\n  position: relative;\n  margin-inline-start: var(--b-descriptions-colon-margin-left);\n  margin-inline-end: var(--b-descriptions-colon-margin-right);\n}\n\n.b-descriptions--colon.b-descriptions--bordered .b-descriptions__item-label--bordered::after {\n  content: none;\n}\n\n/* ── Vertical layout ── */\n.b-descriptions--vertical .b-descriptions__item .b-descriptions__item-label {\n  display: block;\n  padding-bottom: 4px;\n}\n\n.b-descriptions--vertical .b-descriptions__item .b-descriptions__item-content {\n  display: block;\n}\n\n/* ── Size: middle ── */\n.b-descriptions--middle .b-descriptions__item {\n  padding-bottom: 12px;\n}\n\n.b-descriptions--middle.b-descriptions--bordered .b-descriptions__item-label--bordered,\n.b-descriptions--middle.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding-middle);\n}\n\n/* ── Size: small ── */\n.b-descriptions--small .b-descriptions__item {\n  padding-bottom: 8px;\n}\n\n.b-descriptions--small.b-descriptions--bordered .b-descriptions__item-label--bordered,\n.b-descriptions--small.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding-small);\n}\n\n.b-descriptions--small .b-descriptions__title {\n  font-size: 14px;\n}\n\n.b-descriptions--middle .b-descriptions__title {\n  font-size: 15px;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-descriptions {\n  --b-descriptions-bg: oklch(20% 0.02 260);\n  --b-descriptions-color: oklch(88% 0.01 260);\n  --b-descriptions-border-color: oklch(35% 0.02 260);\n  --b-descriptions-title-color: oklch(92% 0.01 260);\n  --b-descriptions-extra-color: oklch(65% 0.01 260);\n  --b-descriptions-label-color: oklch(65% 0.01 260);\n  --b-descriptions-label-bg: oklch(25% 0.02 260);\n  --b-descriptions-content-color: oklch(88% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-descriptions {\n    --b-descriptions-bg: oklch(20% 0.02 260);\n    --b-descriptions-color: oklch(88% 0.01 260);\n    --b-descriptions-border-color: oklch(35% 0.02 260);\n    --b-descriptions-title-color: oklch(92% 0.01 260);\n    --b-descriptions-extra-color: oklch(65% 0.01 260);\n    --b-descriptions-label-color: oklch(65% 0.01 260);\n    --b-descriptions-label-bg: oklch(25% 0.02 260);\n    --b-descriptions-content-color: oklch(88% 0.01 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-descriptions {\n    --b-descriptions-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system75.js

@@ -1,10 +1,8 @@
-//#region src/components/BDropdown/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Hover = "hover", e.Click = "click", e.ContextMenu = "contextMenu", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Bottom = "bottom", e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.Top = "top", e.TopLeft = "topLeft", e.TopRight = "topRight", e;
-}({});
+import e from "./design-system73.js";
+/* empty css                */
+//#region src/components/BDescriptions/BDescriptions.vue
+var t = e;
 //#endregion
-export { t as BDropdownPlacement, e as BDropdownTrigger };
+export { t as default };
 
 //# sourceMappingURL=design-system75.js.map

package/dist/design-system75.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system75.js","names":[],"sources":["../src/components/BDropdown/types.ts"],"sourcesContent":["export enum BDropdownTrigger {\n  Hover = 'hover',\n  Click = 'click',\n  ContextMenu = 'contextMenu',\n}\n\nexport enum BDropdownPlacement {\n  Bottom = 'bottom',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  Top = 'top',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n}\n\nexport interface BDropdownMenuItem {\n  /** Unique key for the menu item. */\n  key: string | number;\n  /** Display label text. */\n  label: string;\n  /** Icon name to show before the label. */\n  icon?: string;\n  /** Whether this item is disabled. */\n  disabled?: boolean;\n  /** Whether this item is a danger/destructive action. */\n  danger?: boolean;\n  /** Nested children for sub-menus. */\n  children?: BDropdownMenuItem[];\n  /** If set to 'divider', renders a separator line. */\n  type?: 'divider' | 'group';\n  /** Group title when type is 'group'. */\n  title?: string;\n}\n\nexport interface BDropdownMenuProps {\n  /** Array of menu items to render. */\n  items: BDropdownMenuItem[];\n  /** Currently selected keys. */\n  selectedKeys?: (string | number)[];\n  /** Whether the menu is selectable. */\n  selectable?: boolean;\n  /** Allow multiple selection. */\n  multiple?: boolean;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,QAAA,SACA,EAAA,cAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,MAAA,OACA,EAAA,UAAA,WACA,EAAA,WAAA;KACD"}
+{"version":3,"file":"design-system75.js","names":[],"sources":["../src/components/BDescriptions/BDescriptions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CSSProperties, VNode } from 'vue';\nimport { computed, Fragment, useSlots } from 'vue';\n\nimport type { BDescriptionsItem } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  bordered = false,\n  colon = true,\n  column = 3,\n  layout = 'horizontal',\n  size = 'default',\n  title,\n  extra,\n  items,\n  labelStyle,\n  contentStyle,\n} = defineProps<{\n  /** Whether to show border around the list. @default false */\n  bordered?: boolean;\n  /** Whether to show colon after the label. @default true */\n  colon?: boolean;\n  /** Number of columns per row. @default 3 */\n  column?: number;\n  /** Layout direction of description items. @default 'horizontal' */\n  layout?: 'horizontal' | 'vertical';\n  /** Size of the component. @default 'default' */\n  size?: 'default' | 'middle' | 'small';\n  /** Title of the descriptions block */\n  title?: string;\n  /** Extra content in the top-right corner */\n  extra?: string;\n  /** Description items data (alternative to slot-based usage) */\n  items?: BDescriptionsItem[];\n  /** Default style for all labels */\n  labelStyle?: CSSProperties;\n  /** Default style for all content cells */\n  contentStyle?: CSSProperties;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** BDescriptionsItem children */\n  default?: (props: Record<string, never>) => unknown;\n  /** Title area. Overrides the `title` prop */\n  title?: (props: Record<string, never>) => unknown;\n  /** Extra content area. Overrides the `extra` prop */\n  extra?: (props: Record<string, never>) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst hasHeader = computed(() => {\n  return !!(title || slots.title || extra || slots.extra);\n});\n\nconst rootClasses = computed(() => [\n  'b-descriptions',\n  {\n    'b-descriptions--bordered': bordered,\n    'b-descriptions--vertical': layout === 'vertical',\n    'b-descriptions--horizontal': layout === 'horizontal',\n    'b-descriptions--middle': size === 'middle',\n    'b-descriptions--small': size === 'small',\n    'b-descriptions--colon': colon,\n  },\n]);\n\n/**\n * Collect items from the `items` prop or from slot children (BDescriptionsItem VNodes).\n * Each resolved item has: label, children, span, labelStyle, contentStyle, labelSlot, contentSlot.\n */\ninterface ResolvedItem {\n  label?: string;\n  children?: string;\n  span: number;\n  labelStyle?: CSSProperties;\n  contentStyle?: CSSProperties;\n  /** VNode array for the label slot (from BDescriptionsItem slot usage) */\n  labelSlot?: VNode[];\n  /** VNode array for the content slot (from BDescriptionsItem default slot) */\n  contentSlot?: VNode[];\n}\n\nconst resolvedItems = computed<ResolvedItem[]>(() => {\n  // If items prop is provided, use it directly\n  if (items && items.length > 0) {\n    return items.map((item) => ({\n      label: item.label,\n      children: item.children,\n      span: item.span ?? 1,\n      labelStyle: item.labelStyle,\n      contentStyle: item.contentStyle,\n    }));\n  }\n\n  // Otherwise, extract from default slot VNodes (BDescriptionsItem instances)\n  const defaultSlot = slots.default?.();\n  if (!defaultSlot) return [];\n\n  const result: ResolvedItem[] = [];\n\n  function extractItems(vnodes: VNode[]) {\n    for (const vnode of vnodes) {\n      // Handle fragments (v-for, template wrappers)\n      if (vnode.type === Fragment) {\n        if (Array.isArray(vnode.children)) {\n          extractItems(vnode.children as VNode[]);\n        }\n        continue;\n      }\n\n      const props = (vnode.props || {}) as Record<string, unknown>;\n      const children = vnode.children as Record<\n        string,\n        (...args: unknown[]) => VNode | VNode[]\n      > | null;\n\n      const rawLabel = children?.label?.();\n      const rawContent = children?.default?.();\n\n      result.push({\n        label: props.label as string | undefined,\n        span: (props.span as number) ?? 1,\n        labelStyle: props.labelStyle as CSSProperties | undefined,\n        contentStyle: props.contentStyle as CSSProperties | undefined,\n        labelSlot: rawLabel ? (Array.isArray(rawLabel) ? rawLabel : [rawLabel]) : undefined,\n        contentSlot: rawContent\n          ? Array.isArray(rawContent)\n            ? rawContent\n            : [rawContent]\n          : undefined,\n      });\n    }\n  }\n\n  extractItems(defaultSlot);\n  return result;\n});\n\n/**\n * Organize items into rows based on the column count.\n * The last item in each row gets its span extended to fill the remaining columns.\n */\ninterface RowData {\n  items: Array<ResolvedItem & { effectiveSpan: number }>;\n}\n\nconst rows = computed<RowData[]>(() => {\n  const result: RowData[] = [];\n  let currentRow: RowData = { items: [] };\n  let colsUsed = 0;\n\n  for (let i = 0; i < resolvedItems.value.length; i++) {\n    const item = resolvedItems.value[i];\n    const isLast = i === resolvedItems.value.length - 1;\n    let span = Math.min(item.span, column);\n\n    // If this item would exceed the row, start a new row\n    if (colsUsed + span > column) {\n      if (currentRow.items.length > 0) {\n        // Fill remaining columns of the previous row\n        const lastInRow = currentRow.items[currentRow.items.length - 1];\n        lastInRow.effectiveSpan += column - colsUsed;\n        result.push(currentRow);\n        currentRow = { items: [] };\n        colsUsed = 0;\n      }\n    }\n\n    // If this is the last item, it takes up remaining space in the row\n    if (isLast) {\n      span = column - colsUsed;\n    }\n\n    currentRow.items.push({ ...item, effectiveSpan: span });\n    colsUsed += span;\n\n    if (colsUsed >= column) {\n      result.push(currentRow);\n      currentRow = { items: [] };\n      colsUsed = 0;\n    }\n  }\n\n  // Push any remaining items\n  if (currentRow.items.length > 0) {\n    const lastInRow = currentRow.items[currentRow.items.length - 1];\n    lastInRow.effectiveSpan += column - colsUsed;\n    result.push(currentRow);\n  }\n\n  return result;\n});\n\n/**\n * Merge global label/content styles with per-item styles.\n * Item-level styles override global styles.\n */\nfunction mergedLabelStyle(item: ResolvedItem): CSSProperties | undefined {\n  if (!labelStyle && !item.labelStyle) return undefined;\n  return { ...labelStyle, ...item.labelStyle };\n}\n\nfunction mergedContentStyle(item: ResolvedItem): CSSProperties | undefined {\n  if (!contentStyle && !item.contentStyle) return undefined;\n  return { ...contentStyle, ...item.contentStyle };\n}\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <!-- Header -->\n    <div v-if=\"hasHeader\" class=\"b-descriptions__header\">\n      <div v-if=\"title || $slots.title\" class=\"b-descriptions__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"extra || $slots.extra\" class=\"b-descriptions__extra\">\n        <slot name=\"extra\">{{ extra }}</slot>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"b-descriptions__body\">\n      <!-- Bordered: use a real <table> -->\n      <table v-if=\"bordered\" class=\"b-descriptions__table\" role=\"presentation\">\n        <tbody>\n          <!-- Horizontal layout with border -->\n          <template v-if=\"layout === 'horizontal'\">\n            <tr v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\" class=\"b-descriptions__row\">\n              <template v-for=\"(item, itemIndex) in row.items\" :key=\"itemIndex\">\n                <th\n                  class=\"b-descriptions__item-label b-descriptions__item-label--bordered\"\n                  :style=\"mergedLabelStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </th>\n                <td\n                  class=\"b-descriptions__item-content b-descriptions__item-content--bordered\"\n                  :colspan=\"item.effectiveSpan * 2 - 1\"\n                  :style=\"mergedContentStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </td>\n              </template>\n            </tr>\n          </template>\n\n          <!-- Vertical layout with border -->\n          <template v-else>\n            <template v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\">\n              <tr class=\"b-descriptions__row\">\n                <th\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'label-' + itemIndex\"\n                  class=\"b-descriptions__item-label b-descriptions__item-label--bordered\"\n                  :colspan=\"item.effectiveSpan\"\n                  :style=\"mergedLabelStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </th>\n              </tr>\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'content-' + itemIndex\"\n                  class=\"b-descriptions__item-content b-descriptions__item-content--bordered\"\n                  :colspan=\"item.effectiveSpan\"\n                  :style=\"mergedContentStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </td>\n              </tr>\n            </template>\n          </template>\n        </tbody>\n      </table>\n\n      <!-- Non-bordered: use a description list -->\n      <table v-else class=\"b-descriptions__table\" role=\"presentation\">\n        <tbody>\n          <!-- Horizontal layout (default) -->\n          <template v-if=\"layout === 'horizontal'\">\n            <tr v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\" class=\"b-descriptions__row\">\n              <td\n                v-for=\"(item, itemIndex) in row.items\"\n                :key=\"itemIndex\"\n                class=\"b-descriptions__item\"\n                :colspan=\"item.effectiveSpan\"\n              >\n                <span class=\"b-descriptions__item-label\" :style=\"mergedLabelStyle(item)\">\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </span>\n                <span class=\"b-descriptions__item-content\" :style=\"mergedContentStyle(item)\">\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </span>\n              </td>\n            </tr>\n          </template>\n\n          <!-- Vertical layout -->\n          <template v-else>\n            <template v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\">\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'label-' + itemIndex\"\n                  class=\"b-descriptions__item\"\n                  :colspan=\"item.effectiveSpan\"\n                >\n                  <span class=\"b-descriptions__item-label\" :style=\"mergedLabelStyle(item)\">\n                    <component\n                      v-if=\"item.labelSlot && item.labelSlot.length\"\n                      :is=\"() => item.labelSlot\"\n                    />\n                    <template v-else>{{ item.label }}</template>\n                  </span>\n                </td>\n              </tr>\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'content-' + itemIndex\"\n                  class=\"b-descriptions__item\"\n                  :colspan=\"item.effectiveSpan\"\n                >\n                  <span class=\"b-descriptions__item-content\" :style=\"mergedContentStyle(item)\">\n                    <component\n                      v-if=\"item.contentSlot && item.contentSlot.length\"\n                      :is=\"() => item.contentSlot\"\n                    />\n                    <template v-else>{{ item.children }}</template>\n                  </span>\n                </td>\n              </tr>\n            </template>\n          </template>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BDescriptions - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-descriptions {\n  /* Surface */\n  --b-descriptions-bg: oklch(100% 0 0);\n  --b-descriptions-color: oklch(20% 0.02 260);\n  --b-descriptions-border-color: oklch(88% 0.01 260);\n  --b-descriptions-border-radius: 8px;\n  --b-descriptions-transition-duration: 200ms;\n\n  /* Title */\n  --b-descriptions-title-color: oklch(20% 0.02 260);\n  --b-descriptions-title-font-size: 16px;\n  --b-descriptions-title-font-weight: 600;\n  --b-descriptions-title-margin-bottom: 20px;\n\n  /* Extra */\n  --b-descriptions-extra-color: oklch(45% 0.02 260);\n  --b-descriptions-extra-font-size: 14px;\n\n  /* Label */\n  --b-descriptions-label-color: oklch(40% 0.02 260);\n  --b-descriptions-label-bg: oklch(97% 0.005 260);\n  --b-descriptions-label-font-weight: 400;\n\n  /* Content */\n  --b-descriptions-content-color: oklch(20% 0.02 260);\n\n  /* Item spacing */\n  --b-descriptions-item-padding-bottom: 16px;\n  --b-descriptions-item-padding-end: 16px;\n\n  /* Colon */\n  --b-descriptions-colon-margin-left: 2px;\n  --b-descriptions-colon-margin-right: 8px;\n\n  /* Bordered cell padding */\n  --b-descriptions-cell-padding: 16px 24px;\n  --b-descriptions-cell-padding-middle: 12px 20px;\n  --b-descriptions-cell-padding-small: 8px 16px;\n\n  /* Layout */\n  color: var(--b-descriptions-color);\n  font-size: 14px;\n  line-height: 1.5715;\n  box-sizing: border-box;\n}\n\n/* ── Header ── */\n.b-descriptions__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--b-descriptions-title-margin-bottom);\n  gap: 16px;\n}\n\n.b-descriptions__title {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--b-descriptions-title-color);\n  font-size: var(--b-descriptions-title-font-size);\n  font-weight: var(--b-descriptions-title-font-weight);\n  line-height: 1.5;\n}\n\n.b-descriptions__extra {\n  flex: none;\n  color: var(--b-descriptions-extra-color);\n  font-size: var(--b-descriptions-extra-font-size);\n}\n\n/* ── Body ── */\n.b-descriptions__body {\n  width: 100%;\n  overflow: hidden;\n}\n\n/* ── Table ── */\n.b-descriptions__table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ── Bordered table ── */\n.b-descriptions--bordered .b-descriptions__table {\n  border: 1px solid var(--b-descriptions-border-color);\n  border-radius: var(--b-descriptions-border-radius);\n  overflow: hidden;\n}\n\n.b-descriptions--bordered .b-descriptions__row > th,\n.b-descriptions--bordered .b-descriptions__row > td {\n  border-inline-end: 1px solid var(--b-descriptions-border-color);\n  border-bottom: 1px solid var(--b-descriptions-border-color);\n}\n\n.b-descriptions--bordered .b-descriptions__row > th:last-child,\n.b-descriptions--bordered .b-descriptions__row > td:last-child {\n  border-inline-end: none;\n}\n\n.b-descriptions--bordered .b-descriptions__row:last-child > th,\n.b-descriptions--bordered .b-descriptions__row:last-child > td {\n  border-bottom: none;\n}\n\n.b-descriptions--bordered .b-descriptions__item-label--bordered {\n  padding: var(--b-descriptions-cell-padding);\n  background: var(--b-descriptions-label-bg);\n  color: var(--b-descriptions-label-color);\n  font-weight: var(--b-descriptions-label-font-weight);\n  white-space: nowrap;\n}\n\n.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding);\n  color: var(--b-descriptions-content-color);\n}\n\n/* ── Non-bordered items ── */\n.b-descriptions__item {\n  padding-bottom: var(--b-descriptions-item-padding-bottom);\n  vertical-align: top;\n}\n\n.b-descriptions__item .b-descriptions__item-label {\n  color: var(--b-descriptions-label-color);\n  font-weight: var(--b-descriptions-label-font-weight);\n  display: inline-block;\n}\n\n.b-descriptions__item .b-descriptions__item-content {\n  color: var(--b-descriptions-content-color);\n  display: inline-block;\n}\n\n/* ── Colon ── */\n.b-descriptions--colon:not(.b-descriptions--vertical)\n  .b-descriptions__item\n  .b-descriptions__item-label::after {\n  content: ':';\n  position: relative;\n  margin-inline-start: var(--b-descriptions-colon-margin-left);\n  margin-inline-end: var(--b-descriptions-colon-margin-right);\n}\n\n.b-descriptions--colon.b-descriptions--bordered .b-descriptions__item-label--bordered::after {\n  content: none;\n}\n\n/* ── Vertical layout ── */\n.b-descriptions--vertical .b-descriptions__item .b-descriptions__item-label {\n  display: block;\n  padding-bottom: 4px;\n}\n\n.b-descriptions--vertical .b-descriptions__item .b-descriptions__item-content {\n  display: block;\n}\n\n/* ── Size: middle ── */\n.b-descriptions--middle .b-descriptions__item {\n  padding-bottom: 12px;\n}\n\n.b-descriptions--middle.b-descriptions--bordered .b-descriptions__item-label--bordered,\n.b-descriptions--middle.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding-middle);\n}\n\n/* ── Size: small ── */\n.b-descriptions--small .b-descriptions__item {\n  padding-bottom: 8px;\n}\n\n.b-descriptions--small.b-descriptions--bordered .b-descriptions__item-label--bordered,\n.b-descriptions--small.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding-small);\n}\n\n.b-descriptions--small .b-descriptions__title {\n  font-size: 14px;\n}\n\n.b-descriptions--middle .b-descriptions__title {\n  font-size: 15px;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-descriptions {\n  --b-descriptions-bg: oklch(20% 0.02 260);\n  --b-descriptions-color: oklch(88% 0.01 260);\n  --b-descriptions-border-color: oklch(35% 0.02 260);\n  --b-descriptions-title-color: oklch(92% 0.01 260);\n  --b-descriptions-extra-color: oklch(65% 0.01 260);\n  --b-descriptions-label-color: oklch(65% 0.01 260);\n  --b-descriptions-label-bg: oklch(25% 0.02 260);\n  --b-descriptions-content-color: oklch(88% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-descriptions {\n    --b-descriptions-bg: oklch(20% 0.02 260);\n    --b-descriptions-color: oklch(88% 0.01 260);\n    --b-descriptions-border-color: oklch(35% 0.02 260);\n    --b-descriptions-title-color: oklch(92% 0.01 260);\n    --b-descriptions-extra-color: oklch(65% 0.01 260);\n    --b-descriptions-label-color: oklch(65% 0.01 260);\n    --b-descriptions-label-bg: oklch(25% 0.02 260);\n    --b-descriptions-content-color: oklch(88% 0.01 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-descriptions {\n    --b-descriptions-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}