@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system42.js

@@ -1,8 +1,29 @@
-import e from "./design-system40.js";
-/* empty css                */
-//#region src/components/BCascader/BCascader.vue
-var t = e;
+import { createCommentVNode as e, createElementBlock as t, createTextVNode as n, defineComponent as r, openBlock as i, renderSlot as a, toDisplayString as o, unref as s, useSlots as c } from "vue";
+//#region src/components/BCard/BCardMeta.vue?vue&type=script&setup=true&lang.ts
+var l = { class: "b-card-meta" }, u = {
+	key: 0,
+	class: "b-card-meta__avatar"
+}, d = {
+	key: 1,
+	class: "b-card-meta__detail"
+}, f = {
+	key: 0,
+	class: "b-card-meta__title"
+}, p = {
+	key: 1,
+	class: "b-card-meta__description"
+}, m = /* @__PURE__ */ r({
+	__name: "BCardMeta",
+	props: {
+		title: {},
+		description: {}
+	},
+	setup(r) {
+		let m = c();
+		return (c, h) => (i(), t("div", l, [s(m).avatar ? (i(), t("div", u, [a(c.$slots, "avatar")])) : e("", !0), r.title || s(m).title || r.description || s(m).description ? (i(), t("div", d, [r.title || s(m).title ? (i(), t("div", f, [a(c.$slots, "title", {}, () => [n(o(r.title), 1)])])) : e("", !0), r.description || s(m).description ? (i(), t("div", p, [a(c.$slots, "description", {}, () => [n(o(r.description), 1)])])) : e("", !0)])) : e("", !0)]));
+	}
+});
 //#endregion
-export { t as default };
+export { m as default };
 
 //# sourceMappingURL=design-system42.js.map

package/dist/design-system42.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system42.js","names":[],"sources":["../src/components/BCascader/BCascader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nimport type {\n  BCascaderFieldNames,\n  BCascaderOption,\n  BCascaderShowSearchConfig,\n  BCascaderValueType,\n} from './types.ts';\nimport {\n  BCascaderExpandTrigger,\n  BCascaderPlacement,\n  BCascaderSize,\n  BCascaderStatus,\n} from './types.ts';\n\nconst {\n  options = [],\n  placeholder = 'Please select',\n  disabled = false,\n  allowClear = true,\n  expandTrigger = BCascaderExpandTrigger.Click,\n  placement = BCascaderPlacement.BottomLeft,\n  size = BCascaderSize.Medium,\n  changeOnSelect = false,\n  showSearch = false,\n  multiple = false,\n  maxTagCount,\n  fieldNames,\n  notFoundContent = 'No data',\n  status,\n  open = undefined,\n} = defineProps<{\n  /** The cascade option data. */\n  options?: BCascaderOption[];\n  /** Input placeholder text. */\n  placeholder?: string;\n  /** Whether the cascader is disabled. */\n  disabled?: boolean;\n  /** Whether to show clear button. */\n  allowClear?: boolean;\n  /** Expand behavior: click or hover. */\n  expandTrigger?: `${BCascaderExpandTrigger}`;\n  /** Popup placement. */\n  placement?: `${BCascaderPlacement}`;\n  /** Size of the input. */\n  size?: `${BCascaderSize}`;\n  /** Fire change on each level selection, not just leaf. */\n  changeOnSelect?: boolean;\n  /** Enable search mode. Boolean or config object. */\n  showSearch?: boolean | BCascaderShowSearchConfig;\n  /** Whether to support multiple selection. */\n  multiple?: boolean;\n  /** Max tag count in multiple mode. */\n  maxTagCount?: number;\n  /** Custom field name mapping. */\n  fieldNames?: BCascaderFieldNames;\n  /** Content shown when no match found. */\n  notFoundContent?: string;\n  /** Validation status. */\n  status?: `${BCascaderStatus}`;\n  /** Controlled open state. */\n  open?: boolean;\n}>();\n\nconst model = defineModel<BCascaderValueType | BCascaderValueType[]>();\n\nconst emit = defineEmits<{\n  /** Fired when selection changes. */\n  (\n    e: 'change',\n    value: BCascaderValueType | BCascaderValueType[],\n    selectedOptions: BCascaderOption[][],\n  ): void;\n  /** Fired when popup visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** Fired when search input changes. */\n  (e: 'search', value: string): void;\n}>();\n\ndefineSlots<{\n  /** Custom display render for selected value. */\n  displayRender?(props: { labels: string[]; selectedOptions: BCascaderOption[] }): unknown;\n  /** Custom suffix icon. */\n  suffixIcon?(): unknown;\n  /** Custom expand icon for menus. */\n  expandIcon?(): unknown;\n  /** Custom not-found content. */\n  notFoundContent?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Field name resolution\n// ─────────────────────────────────────────────\nconst labelField = computed(() => fieldNames?.label ?? 'label');\nconst valueField = computed(() => fieldNames?.value ?? 'value');\nconst childrenField = computed(() => fieldNames?.children ?? 'children');\n\nfunction getLabel(option: BCascaderOption): string {\n  return (option as unknown as Record<string, unknown>)[labelField.value] as string;\n}\n\nfunction getValue(option: BCascaderOption): string | number {\n  return (option as unknown as Record<string, unknown>)[valueField.value] as string | number;\n}\n\nfunction getChildren(option: BCascaderOption): BCascaderOption[] | undefined {\n  return (option as unknown as Record<string, unknown>)[childrenField.value] as\n    | BCascaderOption[]\n    | undefined;\n}\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst popupId = computed(() => `b-cascader-popup-${componentUID.value}`);\n\nconst popoverRef = ref<HTMLDivElement | null>(null);\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst triggerRef = ref<HTMLDivElement | null>(null);\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (open !== undefined ? open : internalOpen.value));\n\nconst searchValue = ref('');\nconst activeColumns = ref<BCascaderOption[][]>([options]);\nconst selectedPath = ref<BCascaderOption[]>([]);\nconst focusedIndices = ref<number[]>([]);\n\n// Multiple mode selections\nconst multipleSelections = ref<BCascaderValueType[]>([]);\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nfunction setOpen(val: boolean) {\n  if (open !== undefined) {\n    // controlled mode - just emit\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\nfunction doOpen() {\n  if (disabled) return;\n  previouslyFocusedElement = document.activeElement as HTMLElement | null;\n  setOpen(true);\n}\n\nfunction doClose() {\n  setOpen(false);\n  if (previouslyFocusedElement) {\n    nextTick(() => previouslyFocusedElement?.focus());\n  }\n}\n\nfunction toggleOpen() {\n  if (disabled) return;\n  if (isOpen.value) {\n    doClose();\n  } else {\n    doOpen();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Option resolution\n// ─────────────────────────────────────────────\nfunction findOptionPath(\n  value: BCascaderValueType,\n  opts: BCascaderOption[] = options,\n): BCascaderOption[] {\n  for (const opt of opts) {\n    if (getValue(opt) === value[0]) {\n      if (value.length === 1) return [opt];\n      const children = getChildren(opt);\n      if (children) {\n        const childPath = findOptionPath(value.slice(1), children);\n        if (childPath.length > 0) return [opt, ...childPath];\n      }\n      return [opt];\n    }\n  }\n  return [];\n}\n\nfunction initFromModel() {\n  if (!model.value) {\n    selectedPath.value = [];\n    multipleSelections.value = [];\n    return;\n  }\n\n  if (multiple) {\n    const values = model.value as BCascaderValueType[];\n    multipleSelections.value = values;\n  } else {\n    const value = model.value as BCascaderValueType;\n    if (value.length > 0) {\n      selectedPath.value = findOptionPath(value);\n      rebuildColumns(selectedPath.value);\n    }\n  }\n}\n\nfunction rebuildColumns(path: BCascaderOption[]) {\n  const cols: BCascaderOption[][] = [options];\n  for (const opt of path) {\n    const children = getChildren(opt);\n    if (children && children.length > 0) {\n      cols.push(children);\n    }\n  }\n  activeColumns.value = cols;\n}\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nfunction selectOption(option: BCascaderOption, columnIndex: number) {\n  if (option.disabled) return;\n\n  const newPath = selectedPath.value.slice(0, columnIndex);\n  newPath.push(option);\n  selectedPath.value = newPath;\n\n  const children = getChildren(option);\n  const isLeaf = option.isLeaf !== undefined ? option.isLeaf : !children || children.length === 0;\n\n  // Rebuild columns\n  const cols = activeColumns.value.slice(0, columnIndex + 1);\n  if (children && children.length > 0) {\n    cols.push(children);\n  }\n  activeColumns.value = cols;\n\n  // Update focused indices\n  focusedIndices.value = newPath.map((opt, i) => {\n    const col = activeColumns.value[i];\n    return col ? col.findIndex((o) => getValue(o) === getValue(opt)) : 0;\n  });\n\n  if (isLeaf || changeOnSelect) {\n    const pathValues = newPath.map((o) => getValue(o)) as BCascaderValueType;\n\n    if (multiple) {\n      const exists = multipleSelections.value.findIndex(\n        (v) => JSON.stringify(v) === JSON.stringify(pathValues),\n      );\n      if (exists >= 0) {\n        multipleSelections.value.splice(exists, 1);\n      } else {\n        multipleSelections.value.push(pathValues);\n      }\n      model.value = [...multipleSelections.value];\n      emit(\n        'change',\n        model.value,\n        multipleSelections.value.map((v) => findOptionPath(v)),\n      );\n    } else {\n      model.value = pathValues;\n      emit('change', pathValues, [newPath]);\n      if (isLeaf) {\n        doClose();\n      }\n    }\n  }\n}\n\nfunction expandOnHover(option: BCascaderOption, columnIndex: number) {\n  if (option.disabled) return;\n  if (expandTrigger !== BCascaderExpandTrigger.Hover) return;\n\n  const children = getChildren(option);\n  if (!children || children.length === 0) return;\n\n  const newPath = selectedPath.value.slice(0, columnIndex);\n  newPath.push(option);\n  selectedPath.value = newPath;\n\n  const cols = activeColumns.value.slice(0, columnIndex + 1);\n  cols.push(children);\n  activeColumns.value = cols;\n}\n\n// ─────────────────────────────────────────────\n// Display value\n// ─────────────────────────────────────────────\nconst displayLabels = computed<string[]>(() => {\n  if (multiple) return [];\n  if (!model.value || (model.value as BCascaderValueType).length === 0) return [];\n  const path = findOptionPath(model.value as BCascaderValueType);\n  return path.map((o) => getLabel(o));\n});\n\nconst displayText = computed(() => displayLabels.value.join(' / '));\n\nconst multipleTags = computed(() => {\n  if (!multiple) return [];\n  return multipleSelections.value.map((val) => {\n    const path = findOptionPath(val);\n    return {\n      value: val,\n      label: path.map((o) => getLabel(o)).join(' / '),\n    };\n  });\n});\n\nconst visibleTags = computed(() => {\n  if (maxTagCount === undefined) return multipleTags.value;\n  return multipleTags.value.slice(0, maxTagCount);\n});\n\nconst hiddenTagCount = computed(() => {\n  if (maxTagCount === undefined) return 0;\n  return Math.max(0, multipleTags.value.length - maxTagCount);\n});\n\n// ─────────────────────────────────────────────\n// Search\n// ─────────────────────────────────────────────\nconst searchEnabled = computed(() => !!showSearch);\n\nfunction getAllPaths(\n  opts: BCascaderOption[] = options,\n  currentPath: BCascaderOption[] = [],\n): BCascaderOption[][] {\n  const result: BCascaderOption[][] = [];\n  for (const opt of opts) {\n    const path = [...currentPath, opt];\n    const children = getChildren(opt);\n    if (children && children.length > 0) {\n      result.push(...getAllPaths(children, path));\n    } else {\n      result.push(path);\n    }\n  }\n  return result;\n}\n\nconst filteredPaths = computed(() => {\n  if (!searchValue.value) return [];\n\n  const allPaths = getAllPaths();\n  const config = typeof showSearch === 'object' ? showSearch : {};\n  const filterFn =\n    config.filter ??\n    ((input: string, path: BCascaderOption[]) =>\n      path.some((opt) => getLabel(opt).toLowerCase().includes(input.toLowerCase())));\n\n  let results = allPaths.filter((path) => filterFn(searchValue.value, path));\n  const limit = config.limit ?? 50;\n  results = results.slice(0, limit);\n  return results;\n});\n\nfunction onSearchInput(event: Event) {\n  const target = event.target as HTMLInputElement;\n  searchValue.value = target.value;\n  emit('search', searchValue.value);\n  if (!isOpen.value) doOpen();\n}\n\nfunction selectSearchResult(path: BCascaderOption[]) {\n  const pathValues = path.map((o) => getValue(o)) as BCascaderValueType;\n\n  if (multiple) {\n    const exists = multipleSelections.value.findIndex(\n      (v) => JSON.stringify(v) === JSON.stringify(pathValues),\n    );\n    if (exists >= 0) {\n      multipleSelections.value.splice(exists, 1);\n    } else {\n      multipleSelections.value.push(pathValues);\n    }\n    model.value = [...multipleSelections.value];\n    emit(\n      'change',\n      model.value,\n      multipleSelections.value.map((v) => findOptionPath(v)),\n    );\n  } else {\n    selectedPath.value = path;\n    model.value = pathValues;\n    emit('change', pathValues, [path]);\n    searchValue.value = '';\n    doClose();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Clear\n// ─────────────────────────────────────────────\nfunction onClear(event: Event) {\n  event.stopPropagation();\n  selectedPath.value = [];\n  activeColumns.value = [options];\n  focusedIndices.value = [];\n  searchValue.value = '';\n\n  if (multiple) {\n    multipleSelections.value = [];\n    model.value = [];\n    emit('change', [], []);\n  } else {\n    model.value = [];\n    emit('change', [], []);\n  }\n}\n\nfunction removeTag(val: BCascaderValueType, event: Event) {\n  event.stopPropagation();\n  const idx = multipleSelections.value.findIndex((v) => JSON.stringify(v) === JSON.stringify(val));\n  if (idx >= 0) {\n    multipleSelections.value.splice(idx, 1);\n    model.value = [...multipleSelections.value];\n    emit(\n      'change',\n      model.value,\n      multipleSelections.value.map((v) => findOptionPath(v)),\n    );\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onTriggerKeydown(event: KeyboardEvent) {\n  if (disabled) return;\n\n  switch (event.key) {\n    case 'Enter':\n    case ' ':\n      if (!searchEnabled.value || event.key === 'Enter') {\n        event.preventDefault();\n        toggleOpen();\n      }\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      if (!isOpen.value) doOpen();\n      nextTick(() => focusFirstOption());\n      break;\n    case 'Escape':\n      if (isOpen.value) {\n        event.preventDefault();\n        doClose();\n      }\n      break;\n  }\n}\n\nfunction onMenuKeydown(event: KeyboardEvent) {\n  const col = activeColumns.value.length - 1;\n  const currentIdx = focusedIndices.value[col] ?? 0;\n  const items = activeColumns.value[col] ?? [];\n\n  switch (event.key) {\n    case 'ArrowDown': {\n      event.preventDefault();\n      const next = currentIdx < items.length - 1 ? currentIdx + 1 : 0;\n      focusedIndices.value = [...focusedIndices.value.slice(0, col), next];\n      focusOptionAt(col, next);\n      break;\n    }\n    case 'ArrowUp': {\n      event.preventDefault();\n      const prev = currentIdx > 0 ? currentIdx - 1 : items.length - 1;\n      focusedIndices.value = [...focusedIndices.value.slice(0, col), prev];\n      focusOptionAt(col, prev);\n      break;\n    }\n    case 'ArrowRight': {\n      event.preventDefault();\n      const option = items[currentIdx];\n      if (option) {\n        const children = getChildren(option);\n        if (children && children.length > 0) {\n          selectOption(option, col);\n          nextTick(() => {\n            focusedIndices.value = [...focusedIndices.value, 0];\n            focusOptionAt(col + 1, 0);\n          });\n        }\n      }\n      break;\n    }\n    case 'ArrowLeft': {\n      event.preventDefault();\n      if (col > 0) {\n        activeColumns.value = activeColumns.value.slice(0, col);\n        selectedPath.value = selectedPath.value.slice(0, col - 1);\n        focusedIndices.value = focusedIndices.value.slice(0, col);\n        nextTick(() => focusOptionAt(col - 1, focusedIndices.value[col - 1] ?? 0));\n      }\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      const option = items[currentIdx];\n      if (option) selectOption(option, col);\n      break;\n    }\n    case 'Escape':\n      event.preventDefault();\n      doClose();\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndices.value = [...focusedIndices.value.slice(0, col), 0];\n      focusOptionAt(col, 0);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndices.value = [...focusedIndices.value.slice(0, col), items.length - 1];\n      focusOptionAt(col, items.length - 1);\n      break;\n  }\n}\n\nfunction focusFirstOption() {\n  focusedIndices.value = [0];\n  focusOptionAt(0, 0);\n}\n\nfunction focusOptionAt(col: number, idx: number) {\n  nextTick(() => {\n    const menuEl = popoverRef.value?.querySelectorAll('.b-cascader__menu')[col];\n    if (!menuEl) return;\n    const items = menuEl.querySelectorAll<HTMLElement>(\n      '.b-cascader__option:not([aria-disabled=\"true\"])',\n    );\n    items[idx]?.focus();\n  });\n}\n\n// ─────────────────────────────────────────────\n// Click outside\n// ─────────────────────────────────────────────\nfunction onDocumentClick(event: MouseEvent) {\n  if (!isOpen.value) return;\n  const target = event.target as Node;\n  if (triggerRef.value?.contains(target)) return;\n  if (popoverRef.value?.contains(target)) return;\n  doClose();\n}\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonMounted(() => {\n  initFromModel();\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('click', onDocumentClick, true);\n});\n\nwatch(isOpen, (val) => {\n  if (val) {\n    nextTick(() => document.addEventListener('click', onDocumentClick, true));\n  } else {\n    document.removeEventListener('click', onDocumentClick, true);\n    searchValue.value = '';\n  }\n});\n\nwatch(\n  () => open,\n  (val) => {\n    if (val === undefined) return;\n    if (val) doOpen();\n    else doClose();\n  },\n);\n\nwatch(model, () => {\n  initFromModel();\n});\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BCascaderPlacement.BottomLeft]: 'bottom-left',\n    [BCascaderPlacement.BottomRight]: 'bottom-right',\n    [BCascaderPlacement.TopLeft]: 'top-left',\n    [BCascaderPlacement.TopRight]: 'top-right',\n  };\n  return map[placement] ?? 'bottom-left';\n});\n\nconst sizeClass = computed(() => `b-cascader--${size}`);\n\nconst statusClass = computed(() => (status ? `b-cascader--${status}` : ''));\n\nconst hasValue = computed(() => {\n  if (multiple) return multipleSelections.value.length > 0;\n  return model.value && (model.value as BCascaderValueType).length > 0;\n});\n\nconst isSearching = computed(() => searchEnabled.value && searchValue.value.length > 0);\n\n// ─────────────────────────────────────────────\n// Check helpers for multiple mode\n// ─────────────────────────────────────────────\nfunction isOptionSelected(option: BCascaderOption, columnIndex: number): boolean {\n  if (!multiple) {\n    return (\n      selectedPath.value[columnIndex] !== undefined &&\n      getValue(selectedPath.value[columnIndex]) === getValue(option)\n    );\n  }\n  // In multiple mode, check if any selection passes through this option at this column\n  return multipleSelections.value.some((val) => val[columnIndex] === getValue(option));\n}\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ focus: () => inputRef.value?.focus(), blur: () => inputRef.value?.blur() });\n</script>\n\n<template>\n  <div\n    ref=\"triggerRef\"\n    :class=\"[\n      'b-cascader',\n      sizeClass,\n      statusClass,\n      {\n        'b-cascader--open': isOpen,\n        'b-cascader--disabled': disabled,\n        'b-cascader--multiple': multiple,\n        'b-cascader--focused': isOpen,\n      },\n    ]\"\n    @click=\"toggleOpen\"\n    @keydown=\"onTriggerKeydown\"\n  >\n    <!-- Multiple tags -->\n    <div v-if=\"multiple\" class=\"b-cascader__selections\">\n      <span v-for=\"tag in visibleTags\" :key=\"JSON.stringify(tag.value)\" class=\"b-cascader__tag\">\n        <span class=\"b-cascader__tag-text\">{{ tag.label }}</span>\n        <span\n          class=\"b-cascader__tag-remove\"\n          role=\"button\"\n          aria-label=\"Remove\"\n          @click=\"removeTag(tag.value, $event)\"\n        ></span>\n      </span>\n      <span v-if=\"hiddenTagCount > 0\" class=\"b-cascader__tag b-cascader__tag--count\">\n        + {{ hiddenTagCount }}\n      </span>\n\n      <!-- Search input in multiple mode -->\n      <input\n        v-if=\"searchEnabled\"\n        ref=\"inputRef\"\n        class=\"b-cascader__search-input\"\n        type=\"text\"\n        :value=\"searchValue\"\n        :placeholder=\"!hasValue ? placeholder : ''\"\n        :disabled=\"disabled\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-autocomplete=\"list\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"isOpen ? popupId : undefined\"\n        @input=\"onSearchInput\"\n        @click.stop\n      />\n      <span v-if=\"!hasValue && !searchEnabled\" class=\"b-cascader__placeholder\">{{\n        placeholder\n      }}</span>\n    </div>\n\n    <!-- Single mode -->\n    <template v-else>\n      <input\n        v-if=\"searchEnabled\"\n        ref=\"inputRef\"\n        :class=\"['b-cascader__input', { 'b-cascader__input--active': isOpen }]\"\n        type=\"text\"\n        :value=\"isOpen ? searchValue : displayText\"\n        :placeholder=\"hasValue ? displayText : placeholder\"\n        :disabled=\"disabled\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-autocomplete=\"list\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"isOpen ? popupId : undefined\"\n        @input=\"onSearchInput\"\n        @click.stop\n      />\n      <span\n        v-else\n        class=\"b-cascader__value-display\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        :aria-expanded=\"isOpen\"\n        :aria-label=\"hasValue ? displayText : placeholder\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-controls=\"isOpen ? popupId : undefined\"\n      >\n        <slot\n          name=\"displayRender\"\n          v-if=\"hasValue\"\n          :labels=\"displayLabels\"\n          :selected-options=\"selectedPath\"\n        >\n          {{ displayText }}\n        </slot>\n        <span v-if=\"!hasValue\" class=\"b-cascader__placeholder\">{{ placeholder }}</span>\n      </span>\n    </template>\n\n    <!-- Clear button -->\n    <span\n      v-if=\"allowClear && hasValue && !disabled\"\n      class=\"b-cascader__clear\"\n      role=\"button\"\n      aria-label=\"Clear\"\n      @click=\"onClear\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" 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 00.707.707L8 8.707l2.121 2.121a.5.5 0 00.707-.707L8.707 8l2.121-2.121a.5.5 0 000-.707z\"\n        />\n      </svg>\n    </span>\n\n    <!-- Suffix icon -->\n    <span class=\"b-cascader__suffix\" aria-hidden=\"true\">\n      <slot name=\"suffixIcon\">\n        <svg\n          class=\"b-cascader__arrow\"\n          viewBox=\"0 0 16 16\"\n          width=\"12\"\n          height=\"12\"\n          fill=\"currentColor\"\n        >\n          <path\n            d=\"M4.427 5.427a.75.75 0 011.06-.073L8 7.585l2.513-2.231a.75.75 0 01.987 1.132l-3 2.666a.75.75 0 01-.987 0l-3-2.666a.75.75 0 01-.086-1.06z\"\n          />\n        </svg>\n      </slot>\n    </span>\n\n    <!-- Dropdown popup -->\n    <div\n      :id=\"popupId\"\n      ref=\"popoverRef\"\n      :class=\"['b-cascader__popup', placementClass, { 'b-cascader__popup--open': isOpen }]\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-label=\"Cascader options\"\n      @click.stop\n      @keydown=\"onMenuKeydown\"\n    >\n      <!-- Search results -->\n      <div v-if=\"isSearching\" class=\"b-cascader__search-panel\" role=\"listbox\">\n        <template v-if=\"filteredPaths.length > 0\">\n          <div\n            v-for=\"(path, idx) in filteredPaths\"\n            :key=\"idx\"\n            class=\"b-cascader__search-item\"\n            role=\"option\"\n            tabindex=\"0\"\n            :aria-selected=\"false\"\n            @click=\"selectSearchResult(path)\"\n            @keydown.enter.prevent=\"selectSearchResult(path)\"\n          >\n            <span v-for=\"(opt, i) in path\" :key=\"getValue(opt)\">\n              <span>{{ getLabel(opt) }}</span>\n              <span v-if=\"i < path.length - 1\" class=\"b-cascader__search-separator\"> / </span>\n            </span>\n          </div>\n        </template>\n        <div v-else class=\"b-cascader__empty\">\n          <slot name=\"notFoundContent\">{{ notFoundContent }}</slot>\n        </div>\n      </div>\n\n      <!-- Cascading menus -->\n      <div v-else class=\"b-cascader__menus\">\n        <ul\n          v-for=\"(column, colIdx) in activeColumns\"\n          :key=\"colIdx\"\n          class=\"b-cascader__menu\"\n          role=\"listbox\"\n          :aria-label=\"`Level ${colIdx + 1}`\"\n        >\n          <li\n            v-for=\"option in column\"\n            :key=\"getValue(option)\"\n            :class=\"[\n              'b-cascader__option',\n              {\n                'b-cascader__option--selected': isOptionSelected(option, colIdx),\n                'b-cascader__option--disabled': option.disabled,\n                'b-cascader__option--expanded':\n                  selectedPath[colIdx] && getValue(selectedPath[colIdx]) === getValue(option),\n              },\n            ]\"\n            role=\"option\"\n            :tabindex=\"option.disabled ? -1 : 0\"\n            :aria-selected=\"isOptionSelected(option, colIdx)\"\n            :aria-disabled=\"option.disabled || undefined\"\n            @click.stop=\"selectOption(option, colIdx)\"\n            @mouseenter=\"expandOnHover(option, colIdx)\"\n            @keydown.enter.prevent=\"selectOption(option, colIdx)\"\n          >\n            <span v-if=\"multiple\" class=\"b-cascader__checkbox\" aria-hidden=\"true\">\n              <span\n                :class=\"[\n                  'b-cascader__checkbox-inner',\n                  { 'b-cascader__checkbox-inner--checked': isOptionSelected(option, colIdx) },\n                ]\"\n              />\n            </span>\n            <span class=\"b-cascader__option-label\">{{ getLabel(option) }}</span>\n            <span\n              v-if=\"getChildren(option) && getChildren(option)!.length > 0\"\n              class=\"b-cascader__option-expand\"\n              aria-hidden=\"true\"\n            >\n              <slot name=\"expandIcon\">\n                <svg viewBox=\"0 0 16 16\" width=\"10\" height=\"10\" fill=\"currentColor\">\n                  <path\n                    d=\"M6.427 4.427a.75.75 0 011.146.96l-.073.087L5.768 8l1.732 2.527a.75.75 0 01-.96 1.146l-.087-.073-2.25-3.28a.75.75 0 01-.007-.98l.08-.093 2.25-2.82zm3 0a.75.75 0 011.146.96l-.073.087L8.768 8l1.732 2.527a.75.75 0 01-.96 1.146l-.087-.073-2.25-3.28a.75.75 0 01-.007-.98l.08-.093 2.25-2.82z\"\n                    transform=\"rotate(180 8 8)\"\n                  />\n                </svg>\n              </slot>\n            </span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (Design Tokens)\n   ──────────────────────────────────────────── */\n.b-cascader {\n  --b-cascader-control-width: 184px;\n  --b-cascader-control-item-width: 111px;\n  --b-cascader-dropdown-height: 180px;\n  --b-cascader-menu-padding: 4px;\n  --b-cascader-option-padding: 5px 12px;\n  --b-cascader-option-selected-bg: #e6f4ff;\n  --b-cascader-option-selected-color: rgba(0, 0, 0, 0.88);\n  --b-cascader-option-selected-font-weight: 600;\n\n  --b-cascader-bg: #fff;\n  --b-cascader-color: rgba(0, 0, 0, 0.88);\n  --b-cascader-border-color: #d9d9d9;\n  --b-cascader-border-radius: 6px;\n  --b-cascader-font-size: 14px;\n  --b-cascader-line-height: 1.5714;\n  --b-cascader-height: 32px;\n  --b-cascader-padding-x: 11px;\n  --b-cascader-placeholder-color: rgba(0, 0, 0, 0.55);\n  --b-cascader-hover-border-color: #4096ff;\n  --b-cascader-focus-border-color: #1677ff;\n  --b-cascader-focus-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-cascader-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-cascader-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-cascader-clear-color: rgba(0, 0, 0, 0.25);\n  --b-cascader-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-cascader-arrow-color: rgba(0, 0, 0, 0.25);\n  --b-cascader-popup-bg: #fff;\n  --b-cascader-popup-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-cascader-popup-border-radius: 8px;\n  --b-cascader-popup-z-index: 1050;\n  --b-cascader-option-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-cascader-option-active-bg: rgba(0, 0, 0, 0.06);\n  --b-cascader-option-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-cascader-option-border-radius: 4px;\n  --b-cascader-tag-bg: rgba(0, 0, 0, 0.06);\n  --b-cascader-tag-color: rgba(0, 0, 0, 0.88);\n  --b-cascader-tag-border-radius: 4px;\n  --b-cascader-transition-duration: 200ms;\n  --b-cascader-error-border-color: #ff4d4f;\n  --b-cascader-error-focus-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-cascader-warning-border-color: #faad14;\n  --b-cascader-warning-focus-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-cascader-menu-border-color: rgba(5, 5, 5, 0.06);\n  --b-cascader-checkbox-size: 16px;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-cascader {\n  --b-cascader-bg: #1f1f1f;\n  --b-cascader-color: rgba(255, 255, 255, 0.85);\n  --b-cascader-border-color: #424242;\n  --b-cascader-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-cascader-hover-border-color: #4096ff;\n  --b-cascader-focus-border-color: #1677ff;\n  --b-cascader-focus-shadow: 0 0 0 2px rgba(5, 145, 255, 0.15);\n  --b-cascader-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-cascader-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-cascader-clear-color: rgba(255, 255, 255, 0.25);\n  --b-cascader-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-cascader-arrow-color: rgba(255, 255, 255, 0.25);\n  --b-cascader-popup-bg: #1f1f1f;\n  --b-cascader-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-cascader-option-selected-bg: rgba(22, 119, 255, 0.15);\n  --b-cascader-option-selected-color: rgba(255, 255, 255, 0.85);\n  --b-cascader-option-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-cascader-option-active-bg: rgba(255, 255, 255, 0.12);\n  --b-cascader-option-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-cascader-tag-bg: rgba(255, 255, 255, 0.1);\n  --b-cascader-tag-color: rgba(255, 255, 255, 0.85);\n  --b-cascader-menu-border-color: rgba(253, 253, 253, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-cascader {\n    --b-cascader-bg: #1f1f1f;\n    --b-cascader-color: rgba(255, 255, 255, 0.85);\n    --b-cascader-border-color: #424242;\n    --b-cascader-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-cascader-hover-border-color: #4096ff;\n    --b-cascader-focus-border-color: #1677ff;\n    --b-cascader-focus-shadow: 0 0 0 2px rgba(5, 145, 255, 0.15);\n    --b-cascader-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-cascader-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-cascader-clear-color: rgba(255, 255, 255, 0.25);\n    --b-cascader-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-cascader-arrow-color: rgba(255, 255, 255, 0.25);\n    --b-cascader-popup-bg: #1f1f1f;\n    --b-cascader-popup-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-cascader-option-selected-bg: rgba(22, 119, 255, 0.15);\n    --b-cascader-option-selected-color: rgba(255, 255, 255, 0.85);\n    --b-cascader-option-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-cascader-option-active-bg: rgba(255, 255, 255, 0.12);\n    --b-cascader-option-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-cascader-tag-bg: rgba(255, 255, 255, 0.1);\n    --b-cascader-tag-color: rgba(255, 255, 255, 0.85);\n    --b-cascader-menu-border-color: rgba(253, 253, 253, 0.12);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Main trigger container\n   ───────────────────────────────────────────── */\n.b-cascader {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  min-width: var(--b-cascader-control-width);\n  height: var(--b-cascader-height);\n  padding: 0 var(--b-cascader-padding-x);\n  background: var(--b-cascader-bg);\n  color: var(--b-cascader-color);\n  font-size: var(--b-cascader-font-size);\n  line-height: var(--b-cascader-line-height);\n  border: 1px solid var(--b-cascader-border-color);\n  border-radius: var(--b-cascader-border-radius);\n  cursor: pointer;\n  user-select: none;\n  transition:\n    border-color var(--b-cascader-transition-duration),\n    box-shadow var(--b-cascader-transition-duration);\n  box-sizing: border-box;\n\n  &:hover:not(.b-cascader--disabled) {\n    border-color: var(--b-cascader-hover-border-color);\n  }\n\n  &:hover:not(.b-cascader--disabled) .b-cascader__clear {\n    opacity: 1;\n  }\n}\n\n.b-cascader--focused:not(.b-cascader--disabled) {\n  border-color: var(--b-cascader-focus-border-color);\n  box-shadow: var(--b-cascader-focus-shadow);\n}\n\n.b-cascader--disabled {\n  background: var(--b-cascader-disabled-bg);\n  color: var(--b-cascader-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ── Sizes ── */\n.b-cascader--sm {\n  --b-cascader-height: 24px;\n  --b-cascader-font-size: 12px;\n  --b-cascader-padding-x: 7px;\n}\n\n.b-cascader--lg {\n  --b-cascader-height: 40px;\n  --b-cascader-font-size: 16px;\n  --b-cascader-padding-x: 15px;\n}\n\n/* ── Status ── */\n.b-cascader--error {\n  --b-cascader-border-color: var(--b-cascader-error-border-color);\n  --b-cascader-hover-border-color: var(--b-cascader-error-border-color);\n  --b-cascader-focus-border-color: var(--b-cascader-error-border-color);\n  --b-cascader-focus-shadow: var(--b-cascader-error-focus-shadow);\n}\n\n.b-cascader--warning {\n  --b-cascader-border-color: var(--b-cascader-warning-border-color);\n  --b-cascader-hover-border-color: var(--b-cascader-warning-border-color);\n  --b-cascader-focus-border-color: var(--b-cascader-warning-border-color);\n  --b-cascader-focus-shadow: var(--b-cascader-warning-focus-shadow);\n}\n\n/* ── Multiple ── */\n.b-cascader--multiple {\n  height: auto;\n  min-height: var(--b-cascader-height);\n  flex-wrap: wrap;\n  padding: 1px var(--b-cascader-padding-x) 1px 4px;\n  gap: 4px;\n}\n\n/* ─────────────────────────────────────────────\n   Selections (multiple mode)\n   ───────────────────────────────────────────── */\n.b-cascader__selections {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px;\n  flex: 1;\n  min-width: 0;\n}\n\n.b-cascader__tag {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  padding: 0 4px 0 8px;\n  background: var(--b-cascader-tag-bg);\n  color: var(--b-cascader-tag-color);\n  border-radius: var(--b-cascader-tag-border-radius);\n  font-size: 12px;\n  line-height: 22px;\n  height: 22px;\n}\n\n.b-cascader__tag--count {\n  padding: 0 8px;\n}\n\n.b-cascader__tag-text {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.b-cascader__tag-remove {\n  margin-left: 2px;\n  width: 14px;\n  height: 14px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  transition: opacity 150ms;\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    width: 8px;\n    height: 1.5px;\n    background: rgba(0, 0, 0, 0.45);\n    border-radius: 1px;\n    transition: background 150ms;\n  }\n\n  &::before {\n    transform: rotate(45deg);\n  }\n\n  &::after {\n    transform: rotate(-45deg);\n  }\n\n  &:hover::before,\n  &:hover::after {\n    background: rgba(0, 0, 0, 0.88);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Input / Display\n   ───────────────────────────────────────────── */\n.b-cascader__input,\n.b-cascader__search-input {\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  flex: 1;\n  min-width: 40px;\n  width: 100%;\n  cursor: pointer;\n  padding: 0;\n\n  &::placeholder {\n    color: var(--b-cascader-placeholder-color);\n  }\n}\n\n.b-cascader__search-input {\n  max-width: 100%;\n  cursor: text;\n}\n\n.b-cascader__input--active {\n  cursor: text;\n}\n\n.b-cascader__value-display {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.b-cascader__placeholder {\n  color: var(--b-cascader-placeholder-color);\n}\n\n/* ─────────────────────────────────────────────\n   Clear button\n   ───────────────────────────────────────────── */\n.b-cascader__clear {\n  display: inline-flex;\n  align-items: center;\n  color: var(--b-cascader-clear-color);\n  cursor: pointer;\n  opacity: 0;\n  transition:\n    opacity 150ms,\n    color 150ms;\n  margin-left: 4px;\n  flex-shrink: 0;\n\n  &:hover {\n    color: var(--b-cascader-clear-hover-color);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Suffix / Arrow icon\n   ───────────────────────────────────────────── */\n.b-cascader__suffix {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  color: var(--b-cascader-arrow-color);\n  flex-shrink: 0;\n}\n\n.b-cascader__arrow {\n  transition: transform var(--b-cascader-transition-duration);\n}\n\n.b-cascader--open .b-cascader__arrow {\n  transform: rotate(180deg);\n}\n\n/* ─────────────────────────────────────────────\n   Popup\n   ───────────────────────────────────────────── */\n.b-cascader__popup {\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: hidden;\n  z-index: var(--b-cascader-popup-z-index);\n  box-sizing: border-box;\n  pointer-events: none;\n  opacity: 0;\n  height: 0;\n\n  transition: opacity var(--b-cascader-transition-duration);\n}\n\n.b-cascader__popup--open {\n  overflow: visible;\n  pointer-events: auto;\n  opacity: 1;\n  height: auto;\n}\n\n/* ── Placements ── */\n.b-cascader__popup.bottom-left {\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n}\n.b-cascader__popup.bottom-right {\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n}\n.b-cascader__popup.top-left {\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 4px;\n}\n.b-cascader__popup.top-right {\n  bottom: 100%;\n  right: 0;\n  margin-bottom: 4px;\n}\n\n/* ─────────────────────────────────────────────\n   Cascading menus container\n   ───────────────────────────────────────────── */\n.b-cascader__menus {\n  display: flex;\n  background: var(--b-cascader-popup-bg);\n  border-radius: var(--b-cascader-popup-border-radius);\n  box-shadow: var(--b-cascader-popup-shadow);\n  overflow: hidden;\n}\n\n.b-cascader__menu {\n  list-style: none;\n  margin: 0;\n  padding: var(--b-cascader-menu-padding);\n  min-width: var(--b-cascader-control-item-width);\n  max-height: var(--b-cascader-dropdown-height);\n  overflow: auto;\n  border-right: 1px solid var(--b-cascader-menu-border-color);\n\n  &:last-child {\n    border-right: none;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Option items\n   ───────────────────────────────────────────── */\n.b-cascader__option {\n  display: flex;\n  align-items: center;\n  padding: var(--b-cascader-option-padding);\n  border-radius: var(--b-cascader-option-border-radius);\n  cursor: pointer;\n  outline: none;\n  transition: background-color 150ms;\n  user-select: none;\n  gap: 8px;\n\n  &:hover,\n  &:focus-visible {\n    background: var(--b-cascader-option-hover-bg);\n  }\n\n  &:active {\n    background: var(--b-cascader-option-active-bg);\n  }\n\n  &--selected {\n    background: var(--b-cascader-option-selected-bg);\n    color: var(--b-cascader-option-selected-color);\n    font-weight: var(--b-cascader-option-selected-font-weight);\n  }\n\n  &--disabled {\n    color: var(--b-cascader-option-disabled-color);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  &--expanded {\n    background: var(--b-cascader-option-hover-bg);\n  }\n}\n\n.b-cascader__option-label {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.b-cascader__option-expand {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.45;\n}\n\n/* ─────────────────────────────────────────────\n   Checkbox (multiple mode)\n   ───────────────────────────────────────────── */\n.b-cascader__checkbox {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.b-cascader__checkbox-inner {\n  width: var(--b-cascader-checkbox-size);\n  height: var(--b-cascader-checkbox-size);\n  border: 1px solid var(--b-cascader-border-color);\n  border-radius: 3px;\n  position: relative;\n  transition: all 150ms;\n}\n\n.b-cascader__checkbox-inner--checked {\n  background: #1677ff;\n  border-color: #1677ff;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 45%;\n    left: 50%;\n    width: 5px;\n    height: 9px;\n    border: 2px solid #fff;\n    border-top: 0;\n    border-left: 0;\n    transform: translate(-50%, -50%) rotate(45deg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Search panel\n   ───────────────────────────────────────────── */\n.b-cascader__search-panel {\n  background: var(--b-cascader-popup-bg);\n  border-radius: var(--b-cascader-popup-border-radius);\n  box-shadow: var(--b-cascader-popup-shadow);\n  max-height: var(--b-cascader-dropdown-height);\n  overflow: auto;\n  padding: var(--b-cascader-menu-padding);\n  min-width: var(--b-cascader-control-width);\n}\n\n.b-cascader__search-item {\n  padding: var(--b-cascader-option-padding);\n  border-radius: var(--b-cascader-option-border-radius);\n  cursor: pointer;\n  outline: none;\n  transition: background-color 150ms;\n\n  &:hover,\n  &:focus-visible {\n    background: var(--b-cascader-option-hover-bg);\n  }\n}\n\n.b-cascader__search-separator {\n  opacity: 0.45;\n}\n\n.b-cascader__empty {\n  padding: 16px;\n  text-align: center;\n  color: var(--b-cascader-placeholder-color);\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-cascader,\n  .b-cascader__popup,\n  .b-cascader__arrow,\n  .b-cascader__option,\n  .b-cascader__clear {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system42.js","names":[],"sources":["../src/components/BCard/BCardMeta.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useSlots } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst { title, description } = defineProps<{\n  /** Title of the meta section */\n  title?: string;\n  /** Description text below the title */\n  description?: string;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Avatar or icon to the left of the meta content */\n  avatar?: (props: Record<string, never>) => unknown;\n  /** Custom title content. Overrides the `title` prop */\n  title?: (props: Record<string, never>) => unknown;\n  /** Custom description content. Overrides the `description` prop */\n  description?: (props: Record<string, never>) => unknown;\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n  <div class=\"b-card-meta\">\n    <div v-if=\"slots.avatar\" class=\"b-card-meta__avatar\">\n      <slot name=\"avatar\" />\n    </div>\n    <div\n      v-if=\"title || slots.title || description || slots.description\"\n      class=\"b-card-meta__detail\"\n    >\n      <div v-if=\"title || slots.title\" class=\"b-card-meta__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"description || slots.description\" class=\"b-card-meta__description\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-card-meta {\n  --b-card-meta-title-font-size: 16px;\n  --b-card-meta-title-font-weight: 500;\n  --b-card-meta-title-color: oklch(20% 0.02 260);\n  --b-card-meta-description-font-size: 14px;\n  --b-card-meta-description-color: oklch(45% 0.02 260);\n  --b-card-meta-avatar-margin-right: 16px;\n\n  display: flex;\n  align-items: flex-start;\n}\n\n.b-card-meta__avatar {\n  flex: none;\n  margin-right: var(--b-card-meta-avatar-margin-right);\n}\n\n.b-card-meta__detail {\n  flex: 1;\n  overflow: hidden;\n}\n\n.b-card-meta__title {\n  font-size: var(--b-card-meta-title-font-size);\n  font-weight: var(--b-card-meta-title-font-weight);\n  color: var(--b-card-meta-title-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.b-card-meta__description {\n  font-size: var(--b-card-meta-description-font-size);\n  color: var(--b-card-meta-description-color);\n  margin-top: 4px;\n  line-height: 1.5;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-card-meta {\n  --b-card-meta-title-color: oklch(92% 0.01 260);\n  --b-card-meta-description-color: oklch(65% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-card-meta {\n    --b-card-meta-title-color: oklch(92% 0.01 260);\n    --b-card-meta-description-color: oklch(65% 0.01 260);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAyBA,IAAM,IAAQ,GAAU;yBAItB,EAeM,OAfN,GAeM,CAdO,EAAA,EAAK,CAAC,UAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,EAGhB,EAAA,SAAS,EAAA,EAAK,CAAC,SAAS,EAAA,eAAe,EAAA,EAAK,CAAC,eAAA,GAAA,EADrD,EAUM,OAVN,GAUM,CANO,EAAA,SAAS,EAAA,EAAK,CAAC,SAAA,GAAA,EAA1B,EAEM,OAFN,GAEM,CADJ,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,EAElB,EAAA,eAAe,EAAA,EAAK,CAAC,eAAA,GAAA,EAAhC,EAEM,OAFN,GAEM,CADJ,EAAiD,EAAA,QAAA,eAAA,EAAA,QAAA,CAAA,EAAA,EAArB,EAAA,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/design-system44.js

@@ -1,74 +1,8 @@
-import { useComponentId as e } from "./design-system10.js";
-import { B_CHECKBOX_GROUP_KEY as t } from "./design-system43.js";
-import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, inject as s, mergeModels as c, normalizeClass as l, onMounted as u, openBlock as d, ref as f, renderSlot as p, useModel as m, watch as h } from "vue";
-//#region src/components/BCheckbox/BCheckbox.vue?vue&type=script&setup=true&lang.ts
-var g = ["for"], _ = [
-	"id",
-	"checked",
-	"disabled",
-	"name",
-	"value"
-], v = {
-	key: 0,
-	class: "b-checkbox__label"
-}, y = /* @__PURE__ */ o({
-	__name: "BCheckbox",
-	props: /* @__PURE__ */ c({
-		id: { default: "" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		indeterminate: {
-			type: Boolean,
-			default: !1
-		},
-		value: { default: "" },
-		name: { default: "" }
-	}, {
-		modelValue: {
-			type: Boolean,
-			default: !1
-		},
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ c(["change"], ["update:modelValue"]),
-	setup(o, { emit: c }) {
-		let y = m(o, "modelValue"), b = c, x = s(t, null), S = n(() => o.disabled || x?.disabled.value || !1), C = n(() => o.name || x?.name.value || ""), w = n(() => x ? x.modelValue.value.includes(o.value) : y.value), { componentUID: T } = e(), E = n(() => o.id || `b-checkbox-${T.value}`), D = f(null);
-		function O() {
-			D.value && (D.value.indeterminate = o.indeterminate);
-		}
-		u(O), h(() => o.indeterminate, O);
-		function k(e) {
-			if (S.value) return;
-			let t = e.target.checked;
-			x ? x.toggleValue(o.value) : y.value = t, b("change", t, e);
-		}
-		return (e, t) => (d(), i("label", {
-			class: l(["b-checkbox b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none", { "b-checkbox--disabled b:cursor-not-allowed b:opacity-50": S.value }]),
-			for: E.value
-		}, [a("span", { class: l(["b-checkbox__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center", {
-			"b-checkbox__indicator--checked": w.value,
-			"b-checkbox__indicator--indeterminate": o.indeterminate,
-			"b-checkbox__indicator--disabled": S.value
-		}]) }, [a("input", {
-			id: E.value,
-			ref_key: "inputRef",
-			ref: D,
-			type: "checkbox",
-			class: "b-checkbox__input",
-			checked: w.value,
-			disabled: S.value,
-			name: C.value,
-			value: o.value,
-			onChange: k
-		}, null, 40, _), t[0] ||= a("span", {
-			class: "b-checkbox__inner",
-			"aria-hidden": "true"
-		}, null, -1)], 2), e.$slots.default ? (d(), i("span", v, [p(e.$slots, "default", {}, void 0, !0)])) : r("", !0)], 10, g));
-	}
-});
+import e from "./design-system42.js";
+/* empty css                */
+//#region src/components/BCard/BCardMeta.vue
+var t = e;
 //#endregion
-export { y as default };
+export { t as default };
 
 //# sourceMappingURL=design-system44.js.map

package/dist/design-system44.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system44.js","names":[],"sources":["../src/components/BCheckbox/BCheckbox.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = [\"for\"]\nconst _hoisted_2 = [\"id\", \"checked\", \"disabled\", \"name\", \"value\"]\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-checkbox__label\"\n}\n\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, inject, onMounted, ref, watch } from 'vue';\nimport { B_CHECKBOX_GROUP_KEY, type BCheckboxGroupContext } from './types';\n\n//#region Props\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BCheckbox',\n  props: /*@__PURE__*/_mergeModels({\n    id: { default: '' },\n    disabled: { type: Boolean, default: false },\n    indeterminate: { type: Boolean, default: false },\n    value: { default: '' },\n    name: { default: '' }\n  }, {\n    \"modelValue\": { type: Boolean, ...{ default: false } },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\"], [\"update:modelValue\"]),\n  setup(__props: any, { emit: __emit }) {\n\n\n\n/**\n * The checked state of the checkbox.\n * Supports boolean (single) or array (group) binding.\n */\nconst model = _useModel<boolean>(__props, \"modelValue\");\n\nconst emit = __emit;\n//#endregion\n\n//#region Group integration\nconst group = inject<BCheckboxGroupContext | null>(B_CHECKBOX_GROUP_KEY, null);\n\nconst isDisabled = computed(() => __props.disabled || group?.disabled.value || false);\nconst inputName = computed(() => __props.name || group?.name.value || '');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value.includes(__props.value);\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => __props.id || `b-checkbox-${componentUID.value}`);\n//#endregion\n\n//#region Indeterminate DOM property\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nfunction syncIndeterminate() {\n  if (inputRef.value) {\n    inputRef.value.indeterminate = __props.indeterminate;\n  }\n}\n\nonMounted(syncIndeterminate);\nwatch(() => __props.indeterminate, syncIndeterminate);\n//#endregion\n\n//#region Handlers\nfunction handleChange(event: Event) {\n  if (isDisabled.value) return;\n\n  const target = event.target as HTMLInputElement;\n  const checked = target.checked;\n\n  if (group) {\n    group.toggleValue(__props.value);\n  } else {\n    model.value = checked;\n  }\n  emit('change', checked, event);\n}\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"label\", {\n    class: _normalizeClass([\"b-checkbox b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none\", { 'b-checkbox--disabled b:cursor-not-allowed b:opacity-50': isDisabled.value }]),\n    for: inputId.value\n  }, [\n    _createElementVNode(\"span\", {\n      class: _normalizeClass([\"b-checkbox__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center\", {\n        'b-checkbox__indicator--checked': isChecked.value,\n        'b-checkbox__indicator--indeterminate': __props.indeterminate,\n        'b-checkbox__indicator--disabled': isDisabled.value,\n      }])\n    }, [\n      _createElementVNode(\"input\", {\n        id: inputId.value,\n        ref_key: \"inputRef\",\n        ref: inputRef,\n        type: \"checkbox\",\n        class: \"b-checkbox__input\",\n        checked: isChecked.value,\n        disabled: isDisabled.value,\n        name: inputName.value,\n        value: __props.value,\n        onChange: handleChange\n      }, null, 40, _hoisted_2),\n      _cache[0] || (_cache[0] = _createElementVNode(\"span\", {\n        class: \"b-checkbox__inner\",\n        \"aria-hidden\": \"true\"\n      }, null, -1))\n    ], 2),\n    (_ctx.$slots.default)\n      ? (_openBlock(), _createElementBlock(\"span\", _hoisted_3, [\n          _renderSlot(_ctx.$slots, \"default\", {}, undefined, true)\n        ]))\n      : _createCommentVNode(\"\", true)\n  ], 10, _hoisted_1))\n}\n}\n\n})"],"mappings":";;;;AAGA,IAAM,IAAa,CAAC,MAAM,EACpB,IAAa;CAAC;CAAM;CAAW;CAAY;CAAQ;CAAQ,EAC3D,IAAa;CACjB,KAAK;CACL,OAAO;CACR,EAQD,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAoB,kBAAa;EAC/B,IAAI,EAAE,SAAS,IAAI;EACnB,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,eAAe;GAAE,MAAM;GAAS,SAAS;GAAO;EAChD,OAAO,EAAE,SAAS,IAAI;EACtB,MAAM,EAAE,SAAS,IAAI;EACtB,EAAE;EACD,YAAc;GAAE,MAAM;GAAc,SAAS;GAAS;EACtD,gBAAkB,EAAE;EACrB,CAAC;CACF,OAAoB,kBAAa,CAAC,SAAS,EAAE,CAAC,oBAAoB,CAAC;CACnE,MAAM,GAAc,EAAE,MAAM,KAAU;EAQxC,IAAM,IAAQ,EAAmB,GAAS,aAAa,EAEjD,IAAO,GAIP,IAAQ,EAAqC,GAAsB,KAAK,EAExE,IAAa,QAAe,EAAQ,YAAY,GAAO,SAAS,SAAS,GAAM,EAC/E,IAAY,QAAe,EAAQ,QAAQ,GAAO,KAAK,SAAS,GAAG,EAEnE,IAAY,QACZ,IACK,EAAM,WAAW,MAAM,SAAS,EAAQ,MAAM,GAEhD,EAAM,MACb,EAII,EAAE,oBAAiB,GAAgB,EACnC,IAAU,QAAe,EAAQ,MAAM,cAAc,EAAa,QAAQ,EAI1E,IAAW,EAA6B,KAAK;EAEnD,SAAS,IAAoB;AAC3B,GAAI,EAAS,UACX,EAAS,MAAM,gBAAgB,EAAQ;;AAK3C,EADA,EAAU,EAAkB,EAC5B,QAAY,EAAQ,eAAe,EAAkB;EAIrD,SAAS,EAAa,GAAc;AAClC,OAAI,EAAW,MAAO;GAGtB,IAAM,IADS,EAAM,OACE;AAOvB,GALI,IACF,EAAM,YAAY,EAAQ,MAAM,GAEhC,EAAM,QAAQ,GAEhB,EAAK,UAAU,GAAS,EAAM;;AAIhC,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,SAAS;GACjD,OAAO,EAAgB,CAAC,iGAAiG,EAAE,0DAA0D,EAAW,OAAO,CAAC,CAAC;GACzM,KAAK,EAAQ;GACd,EAAE,CACD,EAAoB,QAAQ,EAC1B,OAAO,EAAgB,CAAC,6FAA6F;GACnH,kCAAkC,EAAU;GAC5C,wCAAwC,EAAQ;GAChD,mCAAmC,EAAW;GAC/C,CAAC,CAAC,EACJ,EAAE,CACD,EAAoB,SAAS;GAC3B,IAAI,EAAQ;GACZ,SAAS;GACT,KAAK;GACL,MAAM;GACN,OAAO;GACP,SAAS,EAAU;GACnB,UAAU,EAAW;GACrB,MAAM,EAAU;GAChB,OAAO,EAAQ;GACf,UAAU;GACX,EAAE,MAAM,IAAI,EAAW,EACxB,AAAc,EAAO,OAAK,EAAoB,QAAQ;GACpD,OAAO;GACP,eAAe;GAChB,EAAE,MAAM,GAAG,CACb,EAAE,EAAE,EACJ,EAAK,OAAO,WACR,GAAY,EAAE,EAAoB,QAAQ,GAAY,CACrD,EAAY,EAAK,QAAQ,WAAW,EAAE,EAAE,KAAA,GAAW,GAAK,CACzD,CAAC,IACF,EAAoB,IAAI,GAAK,CAClC,EAAE,IAAI,EAAW;;CAInB,CAAA"}
+{"version":3,"file":"design-system44.js","names":[],"sources":["../src/components/BCard/BCardMeta.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useSlots } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst { title, description } = defineProps<{\n  /** Title of the meta section */\n  title?: string;\n  /** Description text below the title */\n  description?: string;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Avatar or icon to the left of the meta content */\n  avatar?: (props: Record<string, never>) => unknown;\n  /** Custom title content. Overrides the `title` prop */\n  title?: (props: Record<string, never>) => unknown;\n  /** Custom description content. Overrides the `description` prop */\n  description?: (props: Record<string, never>) => unknown;\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n  <div class=\"b-card-meta\">\n    <div v-if=\"slots.avatar\" class=\"b-card-meta__avatar\">\n      <slot name=\"avatar\" />\n    </div>\n    <div\n      v-if=\"title || slots.title || description || slots.description\"\n      class=\"b-card-meta__detail\"\n    >\n      <div v-if=\"title || slots.title\" class=\"b-card-meta__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"description || slots.description\" class=\"b-card-meta__description\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-card-meta {\n  --b-card-meta-title-font-size: 16px;\n  --b-card-meta-title-font-weight: 500;\n  --b-card-meta-title-color: oklch(20% 0.02 260);\n  --b-card-meta-description-font-size: 14px;\n  --b-card-meta-description-color: oklch(45% 0.02 260);\n  --b-card-meta-avatar-margin-right: 16px;\n\n  display: flex;\n  align-items: flex-start;\n}\n\n.b-card-meta__avatar {\n  flex: none;\n  margin-right: var(--b-card-meta-avatar-margin-right);\n}\n\n.b-card-meta__detail {\n  flex: 1;\n  overflow: hidden;\n}\n\n.b-card-meta__title {\n  font-size: var(--b-card-meta-title-font-size);\n  font-weight: var(--b-card-meta-title-font-weight);\n  color: var(--b-card-meta-title-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.b-card-meta__description {\n  font-size: var(--b-card-meta-description-font-size);\n  color: var(--b-card-meta-description-color);\n  margin-top: 4px;\n  line-height: 1.5;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-card-meta {\n  --b-card-meta-title-color: oklch(92% 0.01 260);\n  --b-card-meta-description-color: oklch(65% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-card-meta {\n    --b-card-meta-title-color: oklch(92% 0.01 260);\n    --b-card-meta-description-color: oklch(65% 0.01 260);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system45.js

@@ -0,0 +1,353 @@
+import { Comment as e, Fragment as t, Text as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as ee, defineComponent as s, h as c, normalizeClass as l, normalizeStyle as te, onBeforeUnmount as ne, onMounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as re, useId as ie, useSlots as g, watch as _, withCtx as v } from "vue";
+//#region src/components/BCarousel/BCarousel.vue?vue&type=script&setup=true&lang.ts
+var y = ["aria-label"], b = ["disabled", "aria-disabled"], x = ["disabled", "aria-disabled"], S = {
+	class: "b-carousel__sr-only",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+}, ae = ["aria-label"], oe = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"aria-label",
+	"tabindex",
+	"onClick"
+], C = /* @__PURE__ */ s({
+	__name: "BCarousel",
+	props: {
+		modelValue: {},
+		defaultActiveIndex: { default: 0 },
+		arrows: {
+			type: Boolean,
+			default: !1
+		},
+		autoplay: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		autoplaySpeed: { default: 3e3 },
+		adaptiveHeight: {
+			type: Boolean,
+			default: !1
+		},
+		dotPlacement: { default: "bottom" },
+		dots: {
+			type: Boolean,
+			default: !0
+		},
+		dotsClassName: {},
+		draggable: {
+			type: Boolean,
+			default: !1
+		},
+		fade: {
+			type: Boolean,
+			default: !1
+		},
+		effect: {},
+		infinite: {
+			type: Boolean,
+			default: !0
+		},
+		speed: { default: 500 },
+		easing: { default: "linear" },
+		waitForAnimate: {
+			type: Boolean,
+			default: !1
+		},
+		pauseOnHover: {
+			type: Boolean,
+			default: !0
+		},
+		ariaLabel: { default: "Carousel" }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"afterChange",
+		"beforeChange"
+	],
+	setup(C, { expose: w, emit: se }) {
+		let T = se, ce = g();
+		function E(r = []) {
+			let i = [];
+			for (let a of r) a && a.type !== e && (a.type === n && typeof a.children == "string" && a.children.trim() === "" || (a.type === t ? i.push(...E(a.children)) : i.push(a)));
+			return i;
+		}
+		let D = f(E(ce.default?.() ?? []).length), O = s({
+			name: "BCarouselTrack",
+			inheritAttrs: !1,
+			props: {
+				activeIndex: {
+					type: Number,
+					required: !0
+				},
+				total: {
+					type: Number,
+					required: !0
+				},
+				slideId: {
+					type: Function,
+					required: !0
+				},
+				trackStyle: {
+					type: Object,
+					default: void 0
+				}
+			},
+			setup(e, { slots: t }) {
+				return () => {
+					let n = E(t.default?.());
+					return n.length !== D.value && Promise.resolve().then(() => {
+						D.value = n.length;
+					}), c("div", {
+						class: "b-carousel__track",
+						style: e.trackStyle
+					}, n.map((t, r) => c("div", {
+						id: e.slideId(r),
+						class: ["b-carousel__slide", { "b-carousel__slide--active": r === e.activeIndex }],
+						role: "group",
+						"aria-roledescription": "slide",
+						"aria-label": `${r + 1} of ${n.length}`,
+						"aria-hidden": r === e.activeIndex ? void 0 : "true",
+						inert: r === e.activeIndex ? void 0 : ""
+					}, [t])));
+				};
+			}
+		}), k = r(() => C.effect ?? (C.fade ? "fade" : "scrollx")), A = r(() => C.modelValue !== void 0), j = f(Math.max(0, Math.min(C.defaultActiveIndex, Math.max(0, D.value - 1)))), M = r(() => A.value ? C.modelValue : j.value);
+		_(D, (e) => {
+			e !== 0 && j.value >= e && (j.value = e - 1);
+		}), _(() => C.modelValue, (e) => {
+			e !== void 0 && e !== j.value && (j.value = e);
+		});
+		let N = ie(), P = (e) => `${N}-slide-${e}`, F = (e) => `${N}-dot-${e}`, I = f(!1), L = null;
+		function R() {
+			I.value = !0, L && clearTimeout(L), L = setTimeout(() => {
+				I.value = !1, L = null;
+			}, C.speed);
+		}
+		function z(e, t = !1) {
+			if (D.value === 0 || C.waitForAnimate && I.value) return;
+			let n = e;
+			n = C.infinite ? (e % D.value + D.value) % D.value : Math.max(0, Math.min(e, D.value - 1));
+			let r = M.value;
+			if (n === r) return;
+			T("beforeChange", r, n), A.value || (j.value = n), T("update:modelValue", n), t || R();
+			let i = () => {
+				T("change", n), T("afterChange", n);
+			};
+			t ? i() : setTimeout(i, C.speed);
+		}
+		function B(e, t = !1) {
+			z(e, t);
+		}
+		function V() {
+			z(M.value + 1);
+		}
+		function H() {
+			z(M.value - 1);
+		}
+		w({
+			goTo: B,
+			next: V,
+			prev: H
+		});
+		let U = r(() => typeof C.autoplay == "object" ? !0 : !!C.autoplay), W = r(() => typeof C.autoplay == "object" && C.autoplay !== null && C.autoplay.dotDuration === !0), G = null, K = f(!1);
+		function q() {
+			G &&= (clearTimeout(G), null);
+		}
+		function J() {
+			q(), !(!U.value || K.value || D.value <= 1) && (!C.infinite && M.value >= D.value - 1 || (G = setTimeout(() => {
+				V();
+			}, C.autoplaySpeed)));
+		}
+		_([
+			U,
+			K,
+			M,
+			D
+		], () => {
+			typeof window > "u" || J();
+		}, { flush: "post" }), u(() => {
+			J();
+		}), ne(() => {
+			q(), L && clearTimeout(L);
+		});
+		function le() {
+			C.pauseOnHover && U.value && (K.value = !0);
+		}
+		function ue() {
+			C.pauseOnHover && U.value && (K.value = !1);
+		}
+		let Y = f({
+			active: !1,
+			startX: 0,
+			deltaX: 0,
+			width: 0,
+			pointerId: null
+		}), X = f(null);
+		function de(e) {
+			if (!C.draggable || D.value <= 1 || e.button !== 0 && e.pointerType === "mouse") return;
+			let t = X.value;
+			if (t) {
+				Y.value = {
+					active: !0,
+					startX: e.clientX,
+					deltaX: 0,
+					width: t.clientWidth || 1,
+					pointerId: e.pointerId
+				};
+				try {
+					t.setPointerCapture(e.pointerId);
+				} catch {}
+			}
+		}
+		function fe(e) {
+			Y.value.active && (Y.value.pointerId !== null && e.pointerId !== Y.value.pointerId || (Y.value.deltaX = e.clientX - Y.value.startX));
+		}
+		function Z(e) {
+			if (!Y.value.active) return;
+			let { deltaX: t, width: n } = Y.value, r = Math.max(40, n * .15);
+			t <= -r ? V() : t >= r && H(), Y.value = {
+				active: !1,
+				startX: 0,
+				deltaX: 0,
+				width: 0,
+				pointerId: null
+			};
+			let i = X.value;
+			if (i) try {
+				i.releasePointerCapture(e.pointerId);
+			} catch {}
+		}
+		function pe(e) {
+			if (D.value !== 0) switch (e.key) {
+				case "ArrowRight":
+					e.preventDefault(), V();
+					break;
+				case "ArrowLeft":
+					e.preventDefault(), H();
+					break;
+				case "Home":
+					e.preventDefault(), B(0);
+					break;
+				case "End":
+					e.preventDefault(), B(D.value - 1);
+					break;
+			}
+		}
+		let me = r(() => k.value === "scrollx"), he = r(() => {
+			if (me.value) return {
+				transform: `translate3d(${-(M.value * 100) + (Y.value.active && Y.value.width > 0 ? Y.value.deltaX / Y.value.width * 100 : 0)}%, 0, 0)`,
+				transitionDuration: Y.value.active ? "0ms" : "var(--b-carousel-speed)",
+				transitionTimingFunction: "var(--b-carousel-easing)"
+			};
+		}), ge = r(() => ({
+			"--b-carousel-speed": `${C.speed}ms`,
+			"--b-carousel-easing": C.easing,
+			"--b-carousel-autoplay-duration": `${C.autoplaySpeed}ms`
+		})), _e = r(() => [
+			"b-carousel",
+			`b-carousel--effect-${k.value}`,
+			`b-carousel--dots-${C.dotPlacement}`,
+			{
+				"b-carousel--arrows": C.arrows,
+				"b-carousel--draggable": C.draggable,
+				"b-carousel--adaptive-height": C.adaptiveHeight,
+				"b-carousel--no-dots": !C.dots,
+				"b-carousel--dragging": Y.value.active
+			}
+		]), Q = r(() => C.infinite || M.value > 0), $ = r(() => C.infinite || M.value < D.value - 1);
+		return (e, n) => (d(), a("section", {
+			class: l(_e.value),
+			style: te(ge.value),
+			role: "region",
+			"aria-label": C.ariaLabel,
+			"aria-roledescription": "carousel",
+			onMouseenter: le,
+			onMouseleave: ue
+		}, [
+			o("div", {
+				ref_key: "viewportRef",
+				ref: X,
+				class: "b-carousel__viewport",
+				onPointerdown: de,
+				onPointermove: fe,
+				onPointerup: Z,
+				onPointercancel: Z
+			}, [ee(re(O), {
+				"active-index": M.value,
+				total: D.value,
+				"slide-id": P,
+				"track-style": he.value
+			}, {
+				default: v(() => [m(e.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"active-index",
+				"total",
+				"track-style"
+			])], 544),
+			C.arrows && D.value > 1 ? (d(), a(t, { key: 0 }, [o("button", {
+				type: "button",
+				class: "b-carousel__arrow b-carousel__arrow--prev",
+				disabled: !Q.value,
+				"aria-disabled": !Q.value || void 0,
+				"aria-label": "Previous slide",
+				onClick: H
+			}, [m(e.$slots, "prevArrow", {}, () => [n[0] ||= o("svg", {
+				class: "b-carousel__arrow-icon",
+				viewBox: "0 0 16 16",
+				fill: "currentColor",
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [o("path", { d: "M10.354 3.646a.5.5 0 0 1 0 .708L6.707 8l3.647 3.646a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0z" })], -1)])], 8, b), o("button", {
+				type: "button",
+				class: "b-carousel__arrow b-carousel__arrow--next",
+				disabled: !$.value,
+				"aria-disabled": !$.value || void 0,
+				"aria-label": "Next slide",
+				onClick: V
+			}, [m(e.$slots, "nextArrow", {}, () => [n[1] ||= o("svg", {
+				class: "b-carousel__arrow-icon",
+				viewBox: "0 0 16 16",
+				fill: "currentColor",
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [o("path", { d: "M5.646 3.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L9.293 8 5.646 4.354a.5.5 0 0 1 0-.708z" })], -1)])], 8, x)], 64)) : i("", !0),
+			o("div", S, " Slide " + h(M.value + 1) + " of " + h(D.value), 1),
+			C.dots && D.value > 1 ? (d(), a("div", {
+				key: 1,
+				class: l(["b-carousel__dots", C.dotsClassName]),
+				role: "tablist",
+				"aria-label": `${C.ariaLabel} pagination`,
+				onKeydown: pe
+			}, [(d(!0), a(t, null, p(D.value, (t) => (d(), a("div", {
+				key: t - 1,
+				class: "b-carousel__dot-wrapper"
+			}, [o("button", {
+				type: "button",
+				id: F(t - 1),
+				class: l(["b-carousel__dot", {
+					"b-carousel__dot--active": t - 1 === M.value,
+					"b-carousel__dot--progress": W.value && t - 1 === M.value && !K.value
+				}]),
+				role: "tab",
+				"aria-selected": t - 1 === M.value,
+				"aria-controls": P(t - 1),
+				"aria-label": `Go to slide ${t}`,
+				tabindex: t - 1 === M.value ? 0 : -1,
+				onClick: (e) => B(t - 1)
+			}, [m(e.$slots, "dot", {
+				index: t - 1,
+				active: t - 1 === M.value
+			}, () => [n[2] ||= o("span", {
+				class: "b-carousel__dot-inner",
+				"aria-hidden": "true"
+			}, null, -1)])], 10, oe)]))), 128))], 42, ae)) : i("", !0)
+		], 46, y));
+	}
+});
+//#endregion
+export { C as default };
+
+//# sourceMappingURL=design-system45.js.map