@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system51.js.map

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

package/dist/design-system52.js

@@ -1,8 +1,6 @@
-import e from "./design-system50.js";
-/* empty css                */
-//#region src/components/BCollapse/BCollapse.vue
-var t = e;
+//#region src/components/BCheckbox/types.ts
+var e = Symbol("BCheckboxGroup");
 //#endregion
-export { t as default };
+export { e as B_CHECKBOX_GROUP_KEY };
 
 //# sourceMappingURL=design-system52.js.map

package/dist/design-system52.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system52.js","names":[],"sources":["../src/components/BCollapse/BCollapse.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * BCollapse is the group/container component (AntD Collapse equivalent).\n * It manages active keys and provides context to BCollapsePanel children.\n *\n * This is the same component as BCollapseGroup, exported under both names\n * for flexibility. Use BCollapse + BCollapsePanel in new code.\n */\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  BCollapseGroupContextKey,\n  type BCollapseCollapsible,\n  type BCollapseExpandIconPosition,\n  type BCollapseGroupContext,\n  type BCollapseSize,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Currently active panel key(s). Use with v-model for controlled mode. */\n    modelValue?: (string | number)[];\n    /** Initial active panel key(s) for uncontrolled mode. */\n    defaultActiveKey?: (string | number)[];\n    /** Accordion mode - only one panel open at a time. */\n    accordion?: boolean;\n    /** Show border around the collapse. @default true */\n    bordered?: boolean;\n    /** Group-level collapsible trigger: 'header' | 'icon' | 'disabled'. */\n    collapsible?: BCollapseCollapsible;\n    /** Destroy (unmount) inactive panel content. @default false */\n    destroyInactivePanel?: boolean;\n    /** Position of the expand icon. @default 'start' */\n    expandIconPosition?: BCollapseExpandIconPosition;\n    /** Ghost mode - borderless with transparent background. @default false */\n    ghost?: boolean;\n    /** Size of the collapse. @default 'default' */\n    size?: BCollapseSize;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultActiveKey: () => [],\n    accordion: false,\n    bordered: true,\n    collapsible: undefined,\n    destroyInactivePanel: false,\n    expandIconPosition: 'start',\n    ghost: false,\n    size: 'default',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [keys: (string | number)[]];\n  change: [keys: (string | number)[]];\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Active keys state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => props.modelValue !== undefined);\nconst internalKeys = ref<(string | number)[]>([...props.defaultActiveKey]);\n\nconst activeKeys = computed(() =>\n  isControlled.value ? (props.modelValue ?? []) : internalKeys.value,\n);\n\nfunction setActiveKeys(keys: (string | number)[]) {\n  if (!isControlled.value) {\n    internalKeys.value = keys;\n  }\n  emit('update:modelValue', keys);\n  emit('change', keys);\n}\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    if (val !== undefined) {\n      internalKeys.value = [...val];\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Context for child panels\n// ─────────────────────────────────────────────\nfunction isActive(key: string | number): boolean {\n  return activeKeys.value.includes(key);\n}\n\nfunction toggle(key: string | number) {\n  const keys = [...activeKeys.value];\n  const idx = keys.indexOf(key);\n\n  if (props.accordion) {\n    setActiveKeys(idx >= 0 ? [] : [key]);\n  } else {\n    if (idx >= 0) {\n      keys.splice(idx, 1);\n    } else {\n      keys.push(key);\n    }\n    setActiveKeys(keys);\n  }\n}\n\nconst context: BCollapseGroupContext = {\n  isActive,\n  toggle,\n  collapsible: computed(() => props.collapsible),\n  expandIconPosition: computed(() => props.expandIconPosition),\n  bordered: computed(() => props.bordered),\n  ghost: computed(() => props.ghost),\n  size: computed(() => props.size),\n};\n\nprovide(BCollapseGroupContextKey, context);\n</script>\n\n<template>\n  <div\n    class=\"b-collapse\"\n    :class=\"{\n      'b-collapse--bordered': bordered,\n      'b-collapse--borderless': !bordered,\n      'b-collapse--ghost': ghost,\n      'b-collapse--small': size === 'small',\n    }\"\n    role=\"presentation\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BCollapse (Group) styles\n   ───────────────────────────────────────────── */\n.b-collapse {\n  --b-collapse-border-color: oklch(88% 0 0);\n  --b-collapse-border-radius: 8px;\n}\n\n[data-prefers-color='dark'] .b-collapse {\n  --b-collapse-border-color: oklch(32% 0.005 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-collapse {\n    --b-collapse-border-color: oklch(32% 0.005 260);\n  }\n}\n\n.b-collapse {\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n/* ── Bordered (default) ─────────────────────── */\n.b-collapse--bordered {\n  border: 1px solid var(--b-collapse-border-color);\n  border-radius: var(--b-collapse-border-radius);\n  overflow: hidden;\n}\n\n/* ── Borderless ─────────────────────────────── */\n.b-collapse--borderless {\n  background: transparent;\n}\n\n.b-collapse--borderless .b-collapse-panel {\n  border-bottom: 1px solid var(--b-collapse-border-color);\n}\n\n.b-collapse--borderless .b-collapse-panel:last-child {\n  border-bottom: none;\n}\n\n.b-collapse--borderless .b-collapse-panel__body {\n  background: transparent;\n}\n\n/* ── Ghost mode ─────────────────────────────── */\n.b-collapse--ghost {\n  border: none;\n  background: transparent;\n}\n\n.b-collapse--ghost .b-collapse-panel {\n  border-bottom: none;\n  margin-bottom: 8px;\n}\n\n.b-collapse--ghost .b-collapse-panel:last-child {\n  margin-bottom: 0;\n}\n\n.b-collapse--ghost .b-collapse-panel__header {\n  border-radius: var(--b-collapse-border-radius);\n}\n\n.b-collapse--ghost .b-collapse-panel__body {\n  background: transparent;\n  border-top: none;\n}\n\n/* ── Small size ─────────────────────────────── */\n.b-collapse--small .b-collapse-panel__header {\n  padding: 8px 12px;\n  font-size: 13px;\n}\n\n.b-collapse--small .b-collapse-panel__body {\n  padding: 12px;\n  font-size: 13px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system52.js","names":[],"sources":["../src/components/BCheckbox/types.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue';\n\nexport interface BCheckboxOption {\n  /** Display label for the checkbox */\n  label: string;\n  /** Value associated with this checkbox */\n  value: string | number;\n  /** Whether this specific checkbox is disabled */\n  disabled?: boolean;\n}\n\nexport interface BCheckboxGroupContext {\n  modelValue: Ref<Array<string | number>>;\n  disabled: Ref<boolean>;\n  name: Ref<string>;\n  toggleValue: (val: string | number) => void;\n}\n\nexport const B_CHECKBOX_GROUP_KEY: InjectionKey<BCheckboxGroupContext> = Symbol('BCheckboxGroup');\n"],"mappings":";AAkBA,IAAa,IAA4D,OAAO,iBAAiB"}

package/dist/design-system53.js

@@ -1,101 +1,74 @@
-import e from "./design-system27.js";
-import { BCollapseGroupContextKey as t } from "./design-system49.js";
-import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, normalizeClass as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useId as g, watch as _ } from "vue";
-//#region src/components/BCollapse/BCollapsePanel.vue?vue&type=script&setup=true&lang.ts
-var v = [
+import { useComponentId as e } from "./design-system10.js";
+import { B_CHECKBOX_GROUP_KEY as t } from "./design-system52.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",
-	"tabindex",
-	"aria-expanded",
-	"aria-controls",
-	"aria-disabled"
-], y = { class: "b-collapse-panel__header-text" }, b = {
-	key: 1,
-	class: "b-collapse-panel__extra"
-}, x = [
-	"id",
-	"aria-labelledby",
-	"aria-hidden"
-], S = {
+	"checked",
+	"disabled",
+	"name",
+	"value"
+], v = {
 	key: 0,
-	class: "b-collapse-panel__content"
-}, C = { class: "b-collapse-panel__body" }, w = /* @__PURE__ */ c({
-	__name: "BCollapsePanel",
-	props: {
-		panelKey: {},
-		header: { default: "" },
+	class: "b-checkbox__label"
+}, y = /* @__PURE__ */ o({
+	__name: "BCheckbox",
+	props: /* @__PURE__ */ c({
+		id: { default: "" },
 		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		collapsible: {},
-		showArrow: {
+		indeterminate: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		forceRender: {
+		value: { default: "" },
+		name: { default: "" }
+	}, {
+		modelValue: {
 			type: Boolean,
 			default: !1
 		},
-		extra: {}
-	},
-	setup(c) {
-		let w = l(t, null), T = f(!1), E = n(() => w ? w.isActive(c.panelKey) : T.value), D = n(() => c.disabled ? "disabled" : c.collapsible ?? w?.collapsible.value), O = n(() => D.value === "disabled"), k = n(() => w?.expandIconPosition.value ?? "start"), A = f(c.forceRender || E.value);
-		_(E, (e) => {
-			e && (A.value = !0);
-		});
-		let j = g(), M = g();
-		function N() {
-			O.value || (w ? w.toggle(c.panelKey) : T.value = !T.value);
-		}
-		function P() {
-			D.value !== "icon" && N();
-		}
-		function F(e) {
-			D.value === "icon" && (e.stopPropagation(), N());
+		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);
 		}
-		function I(e) {
-			O.value || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), N());
+		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 (t, n) => (d(), i("div", { class: u(["b-collapse-panel", {
-			"b-collapse-panel--active": E.value,
-			"b-collapse-panel--disabled": O.value
-		}]) }, [a("div", {
-			id: h(j),
-			class: u(["b-collapse-panel__header", {
-				"b-collapse-panel__header--icon-end": k.value === "end",
-				"b-collapse-panel__header--clickable": !O.value && D.value !== "icon",
-				"b-collapse-panel__header--icon-clickable": !O.value && D.value === "icon"
-			}]),
-			role: "button",
-			tabindex: O.value ? -1 : 0,
-			"aria-expanded": E.value,
-			"aria-controls": h(M),
-			"aria-disabled": O.value,
-			onClick: P,
-			onKeydown: I
-		}, [
-			c.showArrow ? (d(), i("span", {
-				key: 0,
-				class: u(["b-collapse-panel__arrow", { "b-collapse-panel__arrow--active": E.value }]),
-				"aria-hidden": "true",
-				onClick: F
-			}, [p(t.$slots, "expandIcon", { isActive: E.value }, () => [s(e, {
-				icon: "chevron-right",
-				size: "sm",
-				class: "b-collapse-panel__arrow-icon"
-			})])], 2)) : r("", !0),
-			a("span", y, [p(t.$slots, "header", {}, () => [o(m(c.header), 1)])]),
-			c.extra || t.$slots.extra ? (d(), i("span", b, [p(t.$slots, "extra", {}, () => [o(m(c.extra), 1)])])) : r("", !0)
-		], 42, v), a("div", {
-			id: h(M),
-			class: u(["b-collapse-panel__content-wrapper", { "b-collapse-panel__content-wrapper--active": E.value }]),
-			role: "region",
-			"aria-labelledby": h(j),
-			"aria-hidden": !E.value
-		}, [E.value || A.value || c.forceRender ? (d(), i("div", S, [a("div", C, [p(t.$slots, "default")])])) : r("", !0)], 10, x)], 2));
+		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));
 	}
 });
 //#endregion
-export { w as default };
+export { y as default };
 
 //# sourceMappingURL=design-system53.js.map

package/dist/design-system53.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system53.js","names":[],"sources":["../src/components/BCollapse/BCollapsePanel.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode } from \"vue\"\n\nconst _hoisted_1 = [\"id\", \"tabindex\", \"aria-expanded\", \"aria-controls\", \"aria-disabled\"]\nconst _hoisted_2 = { class: \"b-collapse-panel__header-text\" }\nconst _hoisted_3 = {\n  key: 1,\n  class: \"b-collapse-panel__extra\"\n}\nconst _hoisted_4 = [\"id\", \"aria-labelledby\", \"aria-hidden\"]\nconst _hoisted_5 = {\n  key: 0,\n  class: \"b-collapse-panel__content\"\n}\nconst _hoisted_6 = { class: \"b-collapse-panel__body\" }\n\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { computed, inject, ref, useId, watch } from 'vue';\nimport {\n  BCollapseGroupContextKey,\n  type BCollapseCollapsible,\n  type BCollapseGroupContext,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BCollapsePanel',\n  props: {\n    panelKey: {},\n    header: { default: '' },\n    disabled: { type: Boolean, default: false },\n    collapsible: {},\n    showArrow: { type: Boolean, default: true },\n    forceRender: { type: Boolean, default: false },\n    extra: {}\n  },\n  setup(__props: any) {\n\n\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\n\n\n// ─────────────────────────────────────────────\n// Inject group context (if nested in BCollapseGroup)\n// ─────────────────────────────────────────────\nconst group = inject<BCollapseGroupContext | null>(BCollapseGroupContextKey, null);\n\n// ─────────────────────────────────────────────\n// Standalone mode (no group parent)\n// ─────────────────────────────────────────────\nconst standaloneOpen = ref(false);\n\nconst isActive = computed(() => {\n  if (group) {\n    return group.isActive(__props.panelKey);\n  }\n  return standaloneOpen.value;\n});\n\nconst resolvedCollapsible = computed<BCollapseCollapsible | undefined>(() => {\n  if (__props.disabled) return 'disabled';\n  return __props.collapsible ?? group?.collapsible.value;\n});\n\nconst isDisabled = computed(() => resolvedCollapsible.value === 'disabled');\n\nconst expandIconPosition = computed(() => group?.expandIconPosition.value ?? 'start');\n\nconst hasRendered = ref(__props.forceRender || isActive.value);\n\nwatch(isActive, (val) => {\n  if (val) hasRendered.value = true;\n});\n\n// ─────────────────────────────────────────────\n// IDs for a11y\n// ─────────────────────────────────────────────\nconst headerId = useId();\nconst contentId = useId();\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction toggle() {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.toggle(__props.panelKey);\n  } else {\n    standaloneOpen.value = !standaloneOpen.value;\n  }\n}\n\nfunction handleHeaderClick() {\n  if (resolvedCollapsible.value === 'icon') return;\n  toggle();\n}\n\nfunction handleIconClick(e: MouseEvent) {\n  if (resolvedCollapsible.value === 'icon') {\n    e.stopPropagation();\n    toggle();\n  }\n}\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    toggle();\n  }\n}\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    class: _normalizeClass([\"b-collapse-panel\", {\n      'b-collapse-panel--active': isActive.value,\n      'b-collapse-panel--disabled': isDisabled.value,\n    }])\n  }, [\n    _createElementVNode(\"div\", {\n      id: _unref(headerId),\n      class: _normalizeClass([\"b-collapse-panel__header\", {\n        'b-collapse-panel__header--icon-end': expandIconPosition.value === 'end',\n        'b-collapse-panel__header--clickable': !isDisabled.value && resolvedCollapsible.value !== 'icon',\n        'b-collapse-panel__header--icon-clickable': !isDisabled.value && resolvedCollapsible.value === 'icon',\n      }]),\n      role: \"button\",\n      tabindex: isDisabled.value ? -1 : 0,\n      \"aria-expanded\": isActive.value,\n      \"aria-controls\": _unref(contentId),\n      \"aria-disabled\": isDisabled.value,\n      onClick: handleHeaderClick,\n      onKeydown: handleKeydown\n    }, [\n      (__props.showArrow)\n        ? (_openBlock(), _createElementBlock(\"span\", {\n            key: 0,\n            class: _normalizeClass([\"b-collapse-panel__arrow\", { 'b-collapse-panel__arrow--active': isActive.value }]),\n            \"aria-hidden\": \"true\",\n            onClick: handleIconClick\n          }, [\n            _renderSlot(_ctx.$slots, \"expandIcon\", { isActive: isActive.value }, () => [\n              _createVNode(BIcon, {\n                icon: \"chevron-right\",\n                size: \"sm\",\n                class: \"b-collapse-panel__arrow-icon\"\n              })\n            ])\n          ], 2))\n        : _createCommentVNode(\"\", true),\n      _createElementVNode(\"span\", _hoisted_2, [\n        _renderSlot(_ctx.$slots, \"header\", {}, () => [\n          _createTextVNode(_toDisplayString(__props.header), 1)\n        ])\n      ]),\n      (__props.extra || _ctx.$slots.extra)\n        ? (_openBlock(), _createElementBlock(\"span\", _hoisted_3, [\n            _renderSlot(_ctx.$slots, \"extra\", {}, () => [\n              _createTextVNode(_toDisplayString(__props.extra), 1)\n            ])\n          ]))\n        : _createCommentVNode(\"\", true)\n    ], 42, _hoisted_1),\n    _createElementVNode(\"div\", {\n      id: _unref(contentId),\n      class: _normalizeClass([\"b-collapse-panel__content-wrapper\", { 'b-collapse-panel__content-wrapper--active': isActive.value }]),\n      role: \"region\",\n      \"aria-labelledby\": _unref(headerId),\n      \"aria-hidden\": !isActive.value\n    }, [\n      (isActive.value || hasRendered.value || __props.forceRender)\n        ? (_openBlock(), _createElementBlock(\"div\", _hoisted_5, [\n            _createElementVNode(\"div\", _hoisted_6, [\n              _renderSlot(_ctx.$slots, \"default\")\n            ])\n          ]))\n        : _createCommentVNode(\"\", true)\n    ], 10, _hoisted_4)\n  ], 2))\n}\n}\n\n})"],"mappings":";;;;AAGA,IAAM,IAAa;CAAC;CAAM;CAAY;CAAiB;CAAiB;CAAgB,EAClF,IAAa,EAAE,OAAO,iCAAiC,EACvD,IAAa;CACjB,KAAK;CACL,OAAO;CACR,EACK,IAAa;CAAC;CAAM;CAAmB;CAAc,EACrD,IAAa;CACjB,KAAK;CACL,OAAO;CACR,EACK,IAAa,EAAE,OAAO,0BAA0B,EActD,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,UAAU,EAAE;EACZ,QAAQ,EAAE,SAAS,IAAI;EACvB,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,aAAa,EAAE;EACf,WAAW;GAAE,MAAM;GAAS,SAAS;GAAM;EAC3C,aAAa;GAAE,MAAM;GAAS,SAAS;GAAO;EAC9C,OAAO,EAAE;EACV;CACD,MAAM,GAAc;EAYtB,IAAM,IAAQ,EAAqC,GAA0B,KAAK,EAK5E,IAAiB,EAAI,GAAM,EAE3B,IAAW,QACX,IACK,EAAM,SAAS,EAAQ,SAAS,GAElC,EAAe,MACtB,EAEI,IAAsB,QACtB,EAAQ,WAAiB,aACtB,EAAQ,eAAe,GAAO,YAAY,MACjD,EAEI,IAAa,QAAe,EAAoB,UAAU,WAAW,EAErE,IAAqB,QAAe,GAAO,mBAAmB,SAAS,QAAQ,EAE/E,IAAc,EAAI,EAAQ,eAAe,EAAS,MAAM;AAE9D,IAAM,IAAW,MAAQ;AACvB,GAAI,MAAK,EAAY,QAAQ;IAC7B;EAKF,IAAM,IAAW,GAAO,EAClB,IAAY,GAAO;EAKzB,SAAS,IAAS;AACZ,KAAW,UAEX,IACF,EAAM,OAAO,EAAQ,SAAS,GAE9B,EAAe,QAAQ,CAAC,EAAe;;EAI3C,SAAS,IAAoB;AACvB,KAAoB,UAAU,UAClC,GAAQ;;EAGV,SAAS,EAAgB,GAAe;AACtC,GAAI,EAAoB,UAAU,WAChC,EAAE,iBAAiB,EACnB,GAAQ;;EAIZ,SAAS,EAAc,GAAkB;AACnC,KAAW,UAEX,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,GAAQ;;AAIZ,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,OAAO,EAC/C,OAAO,EAAgB,CAAC,oBAAoB;GAC1C,4BAA4B,EAAS;GACrC,8BAA8B,EAAW;GAC1C,CAAC,CAAC,EACJ,EAAE,CACD,EAAoB,OAAO;GACzB,IAAI,EAAO,EAAS;GACpB,OAAO,EAAgB,CAAC,4BAA4B;IAClD,sCAAsC,EAAmB,UAAU;IACnE,uCAAuC,CAAC,EAAW,SAAS,EAAoB,UAAU;IAC1F,4CAA4C,CAAC,EAAW,SAAS,EAAoB,UAAU;IAChG,CAAC,CAAC;GACH,MAAM;GACN,UAAU,EAAW,QAAQ,KAAK;GAClC,iBAAiB,EAAS;GAC1B,iBAAiB,EAAO,EAAU;GAClC,iBAAiB,EAAW;GAC5B,SAAS;GACT,WAAW;GACZ,EAAE;GACA,EAAQ,aACJ,GAAY,EAAE,EAAoB,QAAQ;IACzC,KAAK;IACL,OAAO,EAAgB,CAAC,2BAA2B,EAAE,mCAAmC,EAAS,OAAO,CAAC,CAAC;IAC1G,eAAe;IACf,SAAS;IACV,EAAE,CACD,EAAY,EAAK,QAAQ,cAAc,EAAE,UAAU,EAAS,OAAO,QAAQ,CACzE,EAAa,GAAO;IAClB,MAAM;IACN,MAAM;IACN,OAAO;IACR,CAAC,CACH,CAAC,CACH,EAAE,EAAE,IACL,EAAoB,IAAI,GAAK;GACjC,EAAoB,QAAQ,GAAY,CACtC,EAAY,EAAK,QAAQ,UAAU,EAAE,QAAQ,CAC3C,EAAiB,EAAiB,EAAQ,OAAO,EAAE,EAAE,CACtD,CAAC,CACH,CAAC;GACD,EAAQ,SAAS,EAAK,OAAO,SACzB,GAAY,EAAE,EAAoB,QAAQ,GAAY,CACrD,EAAY,EAAK,QAAQ,SAAS,EAAE,QAAQ,CAC1C,EAAiB,EAAiB,EAAQ,MAAM,EAAE,EAAE,CACrD,CAAC,CACH,CAAC,IACF,EAAoB,IAAI,GAAK;GAClC,EAAE,IAAI,EAAW,EAClB,EAAoB,OAAO;GACzB,IAAI,EAAO,EAAU;GACrB,OAAO,EAAgB,CAAC,qCAAqC,EAAE,6CAA6C,EAAS,OAAO,CAAC,CAAC;GAC9H,MAAM;GACN,mBAAmB,EAAO,EAAS;GACnC,eAAe,CAAC,EAAS;GAC1B,EAAE,CACA,EAAS,SAAS,EAAY,SAAS,EAAQ,eAC3C,GAAY,EAAE,EAAoB,OAAO,GAAY,CACpD,EAAoB,OAAO,GAAY,CACrC,EAAY,EAAK,QAAQ,UAAU,CACpC,CAAC,CACH,CAAC,IACF,EAAoB,IAAI,GAAK,CAClC,EAAE,IAAI,EAAW,CACnB,EAAE,EAAE;;CAIN,CAAA"}
+{"version":3,"file":"design-system53.js","names":["$slots"],"sources":["../src/components/BCheckbox/BCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\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\nconst {\n  id = '',\n  disabled = false,\n  indeterminate = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the checkbox input. */\n  id?: string;\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /** Indeterminate checked state (visual \"minus\" mark). */\n  indeterminate?: boolean;\n  /** Value when used inside BCheckboxGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the checkbox.\n * Supports boolean (single) or array (group) binding.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BCheckboxGroupContext | null>(B_CHECKBOX_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value.includes(value);\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => 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 = indeterminate;\n  }\n}\n\nonMounted(syncIndeterminate);\nwatch(() => 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(value);\n  } else {\n    model.value = checked;\n  }\n  emit('change', checked, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-checkbox b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none\"\n    :class=\"{ 'b-checkbox--disabled b:cursor-not-allowed b:opacity-50': isDisabled }\"\n    :for=\"inputId\"\n  >\n    <span\n      class=\"b-checkbox__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center\"\n      :class=\"{\n        'b-checkbox__indicator--checked': isChecked,\n        'b-checkbox__indicator--indeterminate': indeterminate,\n        'b-checkbox__indicator--disabled': isDisabled,\n      }\"\n    >\n      <input\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        type=\"checkbox\"\n        class=\"b-checkbox__input\"\n        :checked=\"isChecked\"\n        :disabled=\"isDisabled\"\n        :name=\"inputName\"\n        :value=\"value\"\n        @change=\"handleChange\"\n      />\n      <span class=\"b-checkbox__inner\" aria-hidden=\"true\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"b-checkbox__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-checkbox {\n  --b-checkbox-size: 16px;\n  --b-checkbox-color-primary: #1677ff;\n  --b-checkbox-color-primary-hover: #4096ff;\n  --b-checkbox-color-border: #d9d9d9;\n  --b-checkbox-color-bg-container: #ffffff;\n  --b-checkbox-color-bg-container-disabled: rgba(0, 0, 0, 0.04);\n  --b-checkbox-color-text-disabled: rgba(0, 0, 0, 0.25);\n  --b-checkbox-color-border-disabled: #d9d9d9;\n  --b-checkbox-border-radius: 4px;\n  --b-checkbox-border-width: 1px;\n  --b-checkbox-font-size: 14px;\n  --b-checkbox-line-height: 1.5714;\n  --b-checkbox-check-color: #fff;\n  --b-checkbox-transition-duration: 0.2s;\n}\n\n[data-prefers-color='dark'] .b-checkbox {\n  --b-checkbox-color-primary: #3c89e8;\n  --b-checkbox-color-primary-hover: #65a9f3;\n  --b-checkbox-color-border: #424242;\n  --b-checkbox-color-bg-container: #141414;\n  --b-checkbox-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n  --b-checkbox-color-text-disabled: rgba(255, 255, 255, 0.25);\n  --b-checkbox-color-border-disabled: #424242;\n  --b-checkbox-check-color: #fff;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-checkbox {\n    --b-checkbox-color-primary: #3c89e8;\n    --b-checkbox-color-primary-hover: #65a9f3;\n    --b-checkbox-color-border: #424242;\n    --b-checkbox-color-bg-container: #141414;\n    --b-checkbox-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n    --b-checkbox-color-text-disabled: rgba(255, 255, 255, 0.25);\n    --b-checkbox-color-border-disabled: #424242;\n    --b-checkbox-check-color: #fff;\n  }\n}\n\n.b-checkbox__label {\n  font-size: var(--b-checkbox-font-size);\n  line-height: var(--b-checkbox-line-height);\n  color: inherit;\n}\n\n.b-checkbox--disabled .b-checkbox__label {\n  color: var(--b-checkbox-color-text-disabled);\n}\n\n.b-checkbox__indicator {\n  width: var(--b-checkbox-size);\n  height: var(--b-checkbox-size);\n}\n\n.b-checkbox__inner {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--b-checkbox-border-radius);\n  border: var(--b-checkbox-border-width) solid var(--b-checkbox-color-border);\n  background-color: var(--b-checkbox-color-bg-container);\n  transition:\n    background-color var(--b-checkbox-transition-duration) ease-in-out,\n    border-color var(--b-checkbox-transition-duration) ease-in-out;\n}\n\n/* Hover state */\n.b-checkbox:not(.b-checkbox--disabled):hover .b-checkbox__inner {\n  border-color: var(--b-checkbox-color-primary-hover);\n}\n\n/* Checked state */\n.b-checkbox__indicator--checked .b-checkbox__inner {\n  background-color: var(--b-checkbox-color-primary);\n  border-color: var(--b-checkbox-color-primary);\n}\n\n.b-checkbox__indicator--checked .b-checkbox__inner::after {\n  content: '';\n  position: absolute;\n  display: block;\n  left: 4.5px;\n  top: 1.5px;\n  width: 5px;\n  height: 9px;\n  border: 2px solid var(--b-checkbox-check-color);\n  border-top: 0;\n  border-left: 0;\n  transform: rotate(45deg);\n  opacity: 1;\n  transition: opacity var(--b-checkbox-transition-duration) ease-in-out;\n}\n\n/* Indeterminate state */\n.b-checkbox__indicator--indeterminate .b-checkbox__inner {\n  background-color: var(--b-checkbox-color-primary);\n  border-color: var(--b-checkbox-color-primary);\n}\n\n.b-checkbox__indicator--indeterminate .b-checkbox__inner::after {\n  content: '';\n  position: absolute;\n  display: block;\n  left: 3px;\n  top: 50%;\n  width: 8px;\n  height: 2px;\n  background-color: var(--b-checkbox-check-color);\n  transform: translateY(-50%);\n  border-radius: 1px;\n}\n\n/* Disabled state */\n.b-checkbox__indicator--disabled .b-checkbox__inner {\n  background-color: var(--b-checkbox-color-bg-container-disabled);\n  border-color: var(--b-checkbox-color-border-disabled);\n}\n\n.b-checkbox__indicator--disabled.b-checkbox__indicator--checked .b-checkbox__inner,\n.b-checkbox__indicator--disabled.b-checkbox__indicator--indeterminate .b-checkbox__inner {\n  background-color: var(--b-checkbox-color-bg-container-disabled);\n  border-color: var(--b-checkbox-color-border-disabled);\n}\n\n.b-checkbox__indicator--disabled.b-checkbox__indicator--checked .b-checkbox__inner::after {\n  border-color: var(--b-checkbox-color-text-disabled);\n}\n\n.b-checkbox__indicator--disabled.b-checkbox__indicator--indeterminate .b-checkbox__inner::after {\n  background-color: var(--b-checkbox-color-text-disabled);\n}\n\n.b-checkbox__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-checkbox--disabled .b-checkbox__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-checkbox__input:focus-visible + .b-checkbox__inner {\n  outline: 2px solid var(--b-checkbox-color-primary);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-checkbox__inner,\n  .b-checkbox__inner::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,IAAM,IAAQ,EAAoB,GAAA,aAAoB,EAEhD,IAAO,GAMP,IAAQ,EAAqC,GAAsB,KAAK,EAExE,IAAa,QAAe,EAAA,YAAY,GAAO,SAAS,SAAS,GAAM,EACvE,IAAY,QAAe,EAAA,QAAQ,GAAO,KAAK,SAAS,GAAG,EAE3D,IAAY,QACZ,IACK,EAAM,WAAW,MAAM,SAAS,EAAA,MAAM,GAExC,EAAM,MACb,EAII,EAAE,oBAAiB,GAAgB,EACnC,IAAU,QAAe,EAAA,MAAM,cAAc,EAAa,QAAQ,EAIlE,IAAW,EAA6B,KAAK;EAEnD,SAAS,IAAoB;AAC3B,GAAI,EAAS,UACX,EAAS,MAAM,gBAAgB,EAAA;;AAKnC,EADA,EAAU,EAAkB,EAC5B,QAAY,EAAA,eAAe,EAAkB;EAI7C,SAAS,EAAa,GAAc;AAClC,OAAI,EAAW,MAAO;GAGtB,IAAM,IADS,EAAM,OACE;AAOvB,GALI,IACF,EAAM,YAAY,EAAA,MAAM,GAExB,EAAM,QAAQ,GAEhB,EAAK,UAAU,GAAS,EAAM;;yBAM9B,EA6BQ,SAAA;GA5BN,OAAK,EAAA,CAAC,iGAA+F,EAAA,0DACjC,EAAA,OAAU,CAAA,CAAA;GAC7E,KAAK,EAAA;MAEN,EAoBO,QAAA,EAnBL,OAAK,EAAA,CAAC,6FAA2F;qCAC7C,EAAA;2CAA2D,EAAA;sCAA0D,EAAA;UAMzK,EAUE,SAAA;GATC,IAAI,EAAA;YACD;GAAJ,KAAI;GACJ,MAAK;GACL,OAAM;GACL,SAAS,EAAA;GACT,UAAU,EAAA;GACV,MAAM,EAAA;GACN,OAAO,EAAA;GACP,UAAQ;4BAEX,EAAqD,QAAA;GAA/C,OAAM;GAAoB,eAAY;qBAElCA,EAAAA,OAAO,WAAA,GAAA,EAAnB,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA"}

package/dist/design-system55.js

@@ -1,8 +1,9 @@
-import e from "./design-system53.js";
+import e from "./design-system14.js";
+import t from "./design-system53.js";
 /* empty css                */
-//#region src/components/BCollapse/BCollapsePanel.vue
-var t = e;
+//#region src/components/BCheckbox/BCheckbox.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-6a298bae"]]);
 //#endregion
-export { t as default };
+export { n as default };
 
 //# sourceMappingURL=design-system55.js.map

package/dist/design-system55.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system55.js","names":[],"sources":["../src/components/BCollapse/BCollapsePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { computed, inject, ref, useId, watch } from 'vue';\nimport {\n  BCollapseGroupContextKey,\n  type BCollapseCollapsible,\n  type BCollapseGroupContext,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  panelKey,\n  header = '',\n  disabled = false,\n  collapsible,\n  showArrow = true,\n  forceRender = false,\n  extra,\n} = defineProps<{\n  /** Unique key identifying this panel within the group. */\n  panelKey: string | number;\n  /** Title text displayed in the header. */\n  header?: string;\n  /** Disables the panel (overrides collapsible). */\n  disabled?: boolean;\n  /** Panel-level collapsible trigger override: 'header' | 'icon' | 'disabled'. */\n  collapsible?: BCollapseCollapsible;\n  /** Whether to show the expand arrow icon. @default true */\n  showArrow?: boolean;\n  /** Forces panel content to render even when collapsed. @default false */\n  forceRender?: boolean;\n  /** Extra content rendered at the end of the header. */\n  extra?: string;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Panel body content. */\n  default?(): unknown;\n  /** Custom header content (replaces header prop text). */\n  header?(): unknown;\n  /** Custom expand icon. Receives { isActive: boolean }. */\n  expandIcon?(props: { isActive: boolean }): unknown;\n  /** Extra content at the end of the header. */\n  extra?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Inject group context (if nested in BCollapseGroup)\n// ─────────────────────────────────────────────\nconst group = inject<BCollapseGroupContext | null>(BCollapseGroupContextKey, null);\n\n// ─────────────────────────────────────────────\n// Standalone mode (no group parent)\n// ─────────────────────────────────────────────\nconst standaloneOpen = ref(false);\n\nconst isActive = computed(() => {\n  if (group) {\n    return group.isActive(panelKey);\n  }\n  return standaloneOpen.value;\n});\n\nconst resolvedCollapsible = computed<BCollapseCollapsible | undefined>(() => {\n  if (disabled) return 'disabled';\n  return collapsible ?? group?.collapsible.value;\n});\n\nconst isDisabled = computed(() => resolvedCollapsible.value === 'disabled');\n\nconst expandIconPosition = computed(() => group?.expandIconPosition.value ?? 'start');\n\nconst hasRendered = ref(forceRender || isActive.value);\n\nwatch(isActive, (val) => {\n  if (val) hasRendered.value = true;\n});\n\n// ─────────────────────────────────────────────\n// IDs for a11y\n// ─────────────────────────────────────────────\nconst headerId = useId();\nconst contentId = useId();\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction toggle() {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.toggle(panelKey);\n  } else {\n    standaloneOpen.value = !standaloneOpen.value;\n  }\n}\n\nfunction handleHeaderClick() {\n  if (resolvedCollapsible.value === 'icon') return;\n  toggle();\n}\n\nfunction handleIconClick(e: MouseEvent) {\n  if (resolvedCollapsible.value === 'icon') {\n    e.stopPropagation();\n    toggle();\n  }\n}\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    toggle();\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"b-collapse-panel\"\n    :class=\"{\n      'b-collapse-panel--active': isActive,\n      'b-collapse-panel--disabled': isDisabled,\n    }\"\n  >\n    <!-- Header -->\n    <div\n      :id=\"headerId\"\n      class=\"b-collapse-panel__header\"\n      :class=\"{\n        'b-collapse-panel__header--icon-end': expandIconPosition === 'end',\n        'b-collapse-panel__header--clickable': !isDisabled && resolvedCollapsible !== 'icon',\n        'b-collapse-panel__header--icon-clickable': !isDisabled && resolvedCollapsible === 'icon',\n      }\"\n      role=\"button\"\n      :tabindex=\"isDisabled ? -1 : 0\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"contentId\"\n      :aria-disabled=\"isDisabled\"\n      @click=\"handleHeaderClick\"\n      @keydown=\"handleKeydown\"\n    >\n      <!-- Expand icon -->\n      <span\n        v-if=\"showArrow\"\n        class=\"b-collapse-panel__arrow\"\n        :class=\"{ 'b-collapse-panel__arrow--active': isActive }\"\n        aria-hidden=\"true\"\n        @click=\"handleIconClick\"\n      >\n        <slot name=\"expandIcon\" :is-active=\"isActive\">\n          <BIcon icon=\"chevron-right\" size=\"sm\" class=\"b-collapse-panel__arrow-icon\" />\n        </slot>\n      </span>\n\n      <!-- Header text / slot -->\n      <span class=\"b-collapse-panel__header-text\">\n        <slot name=\"header\">{{ header }}</slot>\n      </span>\n\n      <!-- Extra -->\n      <span v-if=\"extra || $slots.extra\" class=\"b-collapse-panel__extra\">\n        <slot name=\"extra\">{{ extra }}</slot>\n      </span>\n    </div>\n\n    <!-- Content -->\n    <div\n      :id=\"contentId\"\n      class=\"b-collapse-panel__content-wrapper\"\n      :class=\"{ 'b-collapse-panel__content-wrapper--active': isActive }\"\n      role=\"region\"\n      :aria-labelledby=\"headerId\"\n      :aria-hidden=\"!isActive\"\n    >\n      <div v-if=\"isActive || hasRendered || forceRender\" class=\"b-collapse-panel__content\">\n        <div class=\"b-collapse-panel__body\">\n          <slot />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ───────────────────────────────────────────── */\n.b-collapse-panel {\n  --b-collapse-header-padding: 12px 16px;\n  --b-collapse-header-bg: oklch(97% 0 0);\n  --b-collapse-header-color: oklch(15% 0 0);\n  --b-collapse-header-font-size: 14px;\n  --b-collapse-header-font-weight: 500;\n  --b-collapse-header-line-height: 1.5;\n  --b-collapse-content-padding: 16px;\n  --b-collapse-content-bg: oklch(100% 0 0);\n  --b-collapse-content-color: oklch(27% 0.01 260);\n  --b-collapse-border-color: oklch(88% 0 0);\n  --b-collapse-border-radius: 8px;\n  --b-collapse-arrow-size: 12px;\n  --b-collapse-arrow-color: oklch(45% 0 0);\n  --b-collapse-extra-color: oklch(45% 0 0);\n  --b-collapse-disabled-color: oklch(63% 0 0);\n  --b-collapse-disabled-bg: oklch(96% 0 0);\n  --b-collapse-transition-duration: 300ms;\n}\n\n/* ── Dark mode ──────────────────────────────── */\n[data-prefers-color='dark'] .b-collapse-panel {\n  --b-collapse-header-bg: oklch(22% 0.005 260);\n  --b-collapse-header-color: oklch(90% 0 0);\n  --b-collapse-content-bg: oklch(18% 0.005 260);\n  --b-collapse-content-color: oklch(80% 0.01 260);\n  --b-collapse-border-color: oklch(32% 0.005 260);\n  --b-collapse-arrow-color: oklch(65% 0 0);\n  --b-collapse-extra-color: oklch(65% 0 0);\n  --b-collapse-disabled-color: oklch(45% 0 0);\n  --b-collapse-disabled-bg: oklch(20% 0.005 260);\n}\n\n/* ─────────────────────────────────────────────\n   Panel layout\n   ───────────────────────────────────────────── */\n.b-collapse-panel {\n  border-bottom: 1px solid var(--b-collapse-border-color);\n}\n\n.b-collapse-panel:first-child .b-collapse-panel__header {\n  border-radius: var(--b-collapse-border-radius) var(--b-collapse-border-radius) 0 0;\n}\n\n.b-collapse-panel:last-child {\n  border-bottom: none;\n}\n\n.b-collapse-panel:last-child:not(.b-collapse-panel--active) .b-collapse-panel__header {\n  border-radius: 0 0 var(--b-collapse-border-radius) var(--b-collapse-border-radius);\n}\n\n/* ─────────────────────────────────────────────\n   Header\n   ───────────────────────────────────────────── */\n.b-collapse-panel__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: var(--b-collapse-header-padding);\n  background: var(--b-collapse-header-bg);\n  color: var(--b-collapse-header-color);\n  font-size: var(--b-collapse-header-font-size);\n  font-weight: var(--b-collapse-header-font-weight);\n  line-height: var(--b-collapse-header-line-height);\n  cursor: default;\n  user-select: none;\n  border: none;\n  outline: none;\n  position: relative;\n  transition: background-color var(--b-collapse-transition-duration) ease;\n}\n\n.b-collapse-panel__header--clickable {\n  cursor: pointer;\n}\n\n.b-collapse-panel__header--clickable:hover {\n  background: oklch(95% 0 0);\n}\n\n[data-prefers-color='dark'] .b-collapse-panel__header--clickable:hover {\n  background: oklch(25% 0.005 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-collapse-panel {\n    --b-collapse-header-bg: oklch(22% 0.005 260);\n    --b-collapse-header-color: oklch(90% 0 0);\n    --b-collapse-content-bg: oklch(18% 0.005 260);\n    --b-collapse-content-color: oklch(80% 0.01 260);\n    --b-collapse-border-color: oklch(32% 0.005 260);\n    --b-collapse-arrow-color: oklch(65% 0 0);\n    --b-collapse-extra-color: oklch(65% 0 0);\n    --b-collapse-disabled-color: oklch(45% 0 0);\n    --b-collapse-disabled-bg: oklch(20% 0.005 260);\n  }\n  [data-prefers-color='system'] .b-collapse-panel__header--clickable:hover {\n    background: oklch(25% 0.005 260);\n  }\n}\n\n.b-collapse-panel__header--icon-clickable {\n  cursor: default;\n}\n\n.b-collapse-panel__header:focus-visible {\n  outline: 2px solid oklch(54.6% 0.245 262.881);\n  outline-offset: -2px;\n  z-index: 1;\n}\n\n.b-collapse-panel__header--icon-end {\n  flex-direction: row-reverse;\n}\n\n.b-collapse-panel__header--icon-end .b-collapse-panel__arrow {\n  order: 1;\n  margin-left: auto;\n}\n\n.b-collapse-panel__header--icon-end .b-collapse-panel__extra {\n  order: 0;\n  margin-left: auto;\n  margin-right: 8px;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-collapse-panel__arrow {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--b-collapse-arrow-color);\n  transition: transform var(--b-collapse-transition-duration) ease;\n}\n\n.b-collapse-panel__arrow--active {\n  transform: rotate(90deg);\n}\n\n.b-collapse-panel__header--icon-clickable .b-collapse-panel__arrow {\n  cursor: pointer;\n}\n\n.b-collapse-panel__arrow-icon {\n  font-size: var(--b-collapse-arrow-size);\n}\n\n/* ─────────────────────────────────────────────\n   Header text & extra\n   ───────────────────────────────────────────── */\n.b-collapse-panel__header-text {\n  flex: 1;\n  min-width: 0;\n}\n\n.b-collapse-panel__extra {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: var(--b-collapse-extra-color);\n  font-weight: 400;\n}\n\n/* ─────────────────────────────────────────────\n   Disabled state\n   ───────────────────────────────────────────── */\n.b-collapse-panel--disabled .b-collapse-panel__header {\n  color: var(--b-collapse-disabled-color);\n  background: var(--b-collapse-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-collapse-panel--disabled .b-collapse-panel__arrow {\n  color: var(--b-collapse-disabled-color);\n}\n\n/* ─────────────────────────────────────────────\n   Content (animated with grid)\n   ───────────────────────────────────────────── */\n.b-collapse-panel__content-wrapper {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--b-collapse-transition-duration) ease;\n  overflow: hidden;\n}\n\n.b-collapse-panel__content-wrapper--active {\n  grid-template-rows: 1fr;\n}\n\n.b-collapse-panel__content {\n  min-height: 0;\n  overflow: hidden;\n}\n\n.b-collapse-panel__body {\n  padding: var(--b-collapse-content-padding);\n  background: var(--b-collapse-content-bg);\n  color: var(--b-collapse-content-color);\n  border-top: 1px solid var(--b-collapse-border-color);\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-collapse-panel__content-wrapper {\n    transition: none;\n  }\n\n  .b-collapse-panel__arrow {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system55.js","names":[],"sources":["../src/components/BCheckbox/BCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\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\nconst {\n  id = '',\n  disabled = false,\n  indeterminate = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the checkbox input. */\n  id?: string;\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /** Indeterminate checked state (visual \"minus\" mark). */\n  indeterminate?: boolean;\n  /** Value when used inside BCheckboxGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the checkbox.\n * Supports boolean (single) or array (group) binding.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BCheckboxGroupContext | null>(B_CHECKBOX_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value.includes(value);\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => 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 = indeterminate;\n  }\n}\n\nonMounted(syncIndeterminate);\nwatch(() => 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(value);\n  } else {\n    model.value = checked;\n  }\n  emit('change', checked, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-checkbox b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none\"\n    :class=\"{ 'b-checkbox--disabled b:cursor-not-allowed b:opacity-50': isDisabled }\"\n    :for=\"inputId\"\n  >\n    <span\n      class=\"b-checkbox__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center\"\n      :class=\"{\n        'b-checkbox__indicator--checked': isChecked,\n        'b-checkbox__indicator--indeterminate': indeterminate,\n        'b-checkbox__indicator--disabled': isDisabled,\n      }\"\n    >\n      <input\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        type=\"checkbox\"\n        class=\"b-checkbox__input\"\n        :checked=\"isChecked\"\n        :disabled=\"isDisabled\"\n        :name=\"inputName\"\n        :value=\"value\"\n        @change=\"handleChange\"\n      />\n      <span class=\"b-checkbox__inner\" aria-hidden=\"true\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"b-checkbox__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-checkbox {\n  --b-checkbox-size: 16px;\n  --b-checkbox-color-primary: #1677ff;\n  --b-checkbox-color-primary-hover: #4096ff;\n  --b-checkbox-color-border: #d9d9d9;\n  --b-checkbox-color-bg-container: #ffffff;\n  --b-checkbox-color-bg-container-disabled: rgba(0, 0, 0, 0.04);\n  --b-checkbox-color-text-disabled: rgba(0, 0, 0, 0.25);\n  --b-checkbox-color-border-disabled: #d9d9d9;\n  --b-checkbox-border-radius: 4px;\n  --b-checkbox-border-width: 1px;\n  --b-checkbox-font-size: 14px;\n  --b-checkbox-line-height: 1.5714;\n  --b-checkbox-check-color: #fff;\n  --b-checkbox-transition-duration: 0.2s;\n}\n\n[data-prefers-color='dark'] .b-checkbox {\n  --b-checkbox-color-primary: #3c89e8;\n  --b-checkbox-color-primary-hover: #65a9f3;\n  --b-checkbox-color-border: #424242;\n  --b-checkbox-color-bg-container: #141414;\n  --b-checkbox-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n  --b-checkbox-color-text-disabled: rgba(255, 255, 255, 0.25);\n  --b-checkbox-color-border-disabled: #424242;\n  --b-checkbox-check-color: #fff;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-checkbox {\n    --b-checkbox-color-primary: #3c89e8;\n    --b-checkbox-color-primary-hover: #65a9f3;\n    --b-checkbox-color-border: #424242;\n    --b-checkbox-color-bg-container: #141414;\n    --b-checkbox-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n    --b-checkbox-color-text-disabled: rgba(255, 255, 255, 0.25);\n    --b-checkbox-color-border-disabled: #424242;\n    --b-checkbox-check-color: #fff;\n  }\n}\n\n.b-checkbox__label {\n  font-size: var(--b-checkbox-font-size);\n  line-height: var(--b-checkbox-line-height);\n  color: inherit;\n}\n\n.b-checkbox--disabled .b-checkbox__label {\n  color: var(--b-checkbox-color-text-disabled);\n}\n\n.b-checkbox__indicator {\n  width: var(--b-checkbox-size);\n  height: var(--b-checkbox-size);\n}\n\n.b-checkbox__inner {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--b-checkbox-border-radius);\n  border: var(--b-checkbox-border-width) solid var(--b-checkbox-color-border);\n  background-color: var(--b-checkbox-color-bg-container);\n  transition:\n    background-color var(--b-checkbox-transition-duration) ease-in-out,\n    border-color var(--b-checkbox-transition-duration) ease-in-out;\n}\n\n/* Hover state */\n.b-checkbox:not(.b-checkbox--disabled):hover .b-checkbox__inner {\n  border-color: var(--b-checkbox-color-primary-hover);\n}\n\n/* Checked state */\n.b-checkbox__indicator--checked .b-checkbox__inner {\n  background-color: var(--b-checkbox-color-primary);\n  border-color: var(--b-checkbox-color-primary);\n}\n\n.b-checkbox__indicator--checked .b-checkbox__inner::after {\n  content: '';\n  position: absolute;\n  display: block;\n  left: 4.5px;\n  top: 1.5px;\n  width: 5px;\n  height: 9px;\n  border: 2px solid var(--b-checkbox-check-color);\n  border-top: 0;\n  border-left: 0;\n  transform: rotate(45deg);\n  opacity: 1;\n  transition: opacity var(--b-checkbox-transition-duration) ease-in-out;\n}\n\n/* Indeterminate state */\n.b-checkbox__indicator--indeterminate .b-checkbox__inner {\n  background-color: var(--b-checkbox-color-primary);\n  border-color: var(--b-checkbox-color-primary);\n}\n\n.b-checkbox__indicator--indeterminate .b-checkbox__inner::after {\n  content: '';\n  position: absolute;\n  display: block;\n  left: 3px;\n  top: 50%;\n  width: 8px;\n  height: 2px;\n  background-color: var(--b-checkbox-check-color);\n  transform: translateY(-50%);\n  border-radius: 1px;\n}\n\n/* Disabled state */\n.b-checkbox__indicator--disabled .b-checkbox__inner {\n  background-color: var(--b-checkbox-color-bg-container-disabled);\n  border-color: var(--b-checkbox-color-border-disabled);\n}\n\n.b-checkbox__indicator--disabled.b-checkbox__indicator--checked .b-checkbox__inner,\n.b-checkbox__indicator--disabled.b-checkbox__indicator--indeterminate .b-checkbox__inner {\n  background-color: var(--b-checkbox-color-bg-container-disabled);\n  border-color: var(--b-checkbox-color-border-disabled);\n}\n\n.b-checkbox__indicator--disabled.b-checkbox__indicator--checked .b-checkbox__inner::after {\n  border-color: var(--b-checkbox-color-text-disabled);\n}\n\n.b-checkbox__indicator--disabled.b-checkbox__indicator--indeterminate .b-checkbox__inner::after {\n  background-color: var(--b-checkbox-color-text-disabled);\n}\n\n.b-checkbox__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-checkbox--disabled .b-checkbox__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-checkbox__input:focus-visible + .b-checkbox__inner {\n  outline: 2px solid var(--b-checkbox-color-primary);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-checkbox__inner,\n  .b-checkbox__inner::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system56.js

@@ -1,14 +1,53 @@
-//#region src/components/BColorPicker/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Hex = "hex", e.Rgb = "rgb", e.Hsl = "hsl", e.Hsb = "hsb", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Small = "sm", e.Medium = "md", e.Large = "lg", e;
-}({}), n = /* @__PURE__ */ function(e) {
-	return e.Click = "click", e.Hover = "hover", e;
-}({}), r = /* @__PURE__ */ function(e) {
-	return e.TopLeft = "top-left", e.TopCenter = "top-center", e.TopRight = "top-right", e.BottomLeft = "bottom-left", e.BottomCenter = "bottom-center", e.BottomRight = "bottom-right", e;
-}({});
+import { B_CHECKBOX_GROUP_KEY as e } from "./design-system52.js";
+import t from "./design-system55.js";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createTextVNode as o, defineComponent as s, mergeModels as c, openBlock as l, provide as u, reactive as d, renderList as f, renderSlot as p, toDisplayString as m, toRefs as h, useModel as g, withCtx as _ } from "vue";
+//#region src/components/BCheckbox/BCheckboxGroup.vue?vue&type=script&setup=true&lang.ts
+var v = {
+	class: "b-checkbox-group b:inline-flex b:flex-wrap b:gap-2",
+	role: "group"
+}, y = /* @__PURE__ */ s({
+	__name: "BCheckboxGroup",
+	props: /* @__PURE__ */ c({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		name: { default: "" },
+		options: { default: () => void 0 }
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ c(["change"], ["update:modelValue"]),
+	setup(s, { emit: c }) {
+		let y = g(s, "modelValue"), b = c, x = r(() => s.options ? s.options.map((e) => typeof e == "string" || typeof e == "number" ? {
+			label: String(e),
+			value: e
+		} : e) : []);
+		function S(e) {
+			let t = [...y.value], n = t.indexOf(e);
+			n === -1 ? t.push(e) : t.splice(n, 1), y.value = t, b("change", t);
+		}
+		let { disabled: C, name: w } = h(d({
+			disabled: s.disabled,
+			name: s.name
+		}));
+		return u(e, {
+			modelValue: r(() => y.value),
+			disabled: C,
+			name: w,
+			toggleValue: S
+		}), (e, r) => (l(), a("div", v, [x.value.length > 0 ? (l(!0), a(n, { key: 0 }, f(x.value, (e) => (l(), i(t, {
+			key: e.value,
+			value: e.value,
+			disabled: e.disabled
+		}, {
+			default: _(() => [o(m(e.label), 1)]),
+			_: 2
+		}, 1032, ["value", "disabled"]))), 128)) : p(e.$slots, "default", { key: 1 })]));
+	}
+});
 //#endregion
-export { e as BColorPickerFormat, r as BColorPickerPlacement, t as BColorPickerSize, n as BColorPickerTrigger };
+export { y as default };
 
 //# sourceMappingURL=design-system56.js.map

package/dist/design-system56.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system56.js","names":[],"sources":["../src/components/BColorPicker/types.ts"],"sourcesContent":["export enum BColorPickerFormat {\n  Hex = 'hex',\n  Rgb = 'rgb',\n  Hsl = 'hsl',\n  Hsb = 'hsb',\n}\n\nexport enum BColorPickerSize {\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n}\n\nexport enum BColorPickerTrigger {\n  Click = 'click',\n  Hover = 'hover',\n}\n\nexport enum BColorPickerPlacement {\n  TopLeft = 'top-left',\n  TopCenter = 'top-center',\n  TopRight = 'top-right',\n  BottomLeft = 'bottom-left',\n  BottomCenter = 'bottom-center',\n  BottomRight = 'bottom-right',\n}\n\nexport interface BColorPickerPreset {\n  label: string;\n  colors: string[];\n  defaultOpen?: boolean;\n}\n\nexport interface BColorHsb {\n  h: number;\n  s: number;\n  b: number;\n  a: number;\n}\n\nexport interface BColorRgb {\n  r: number;\n  g: number;\n  b: number;\n  a: number;\n}\n\nexport interface BColorHsl {\n  h: number;\n  s: number;\n  l: number;\n  a: number;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,MAAA,OACA,EAAA,MAAA,OACA,EAAA,MAAA,OACA,EAAA,MAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,MACA,EAAA,SAAA,MACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,YACA,EAAA,YAAA,cACA,EAAA,WAAA,aACA,EAAA,aAAA,eACA,EAAA,eAAA,iBACA,EAAA,cAAA;KACD"}
+{"version":3,"file":"design-system56.js","names":[],"sources":["../src/components/BCheckbox/BCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, provide, reactive, toRefs } from 'vue';\nimport BCheckbox from './BCheckbox.vue';\nimport { B_CHECKBOX_GROUP_KEY, type BCheckboxOption } from './types';\n\n//#region Props\nconst {\n  disabled = false,\n  name = '',\n  options = undefined,\n} = defineProps<{\n  /** Disable all checkboxes in the group. */\n  disabled?: boolean;\n  /** The name property of all child input elements. */\n  name?: string;\n  /** Shorthand options to render checkboxes from an array. */\n  options?: BCheckboxOption[] | string[] | number[];\n}>();\n\n/**\n * Array of currently selected values.\n */\nconst model = defineModel<Array<string | number>>({ default: () => [] });\n\nconst emit = defineEmits<{\n  change: [checkedValues: Array<string | number>];\n}>();\n//#endregion\n\n//#region Normalize options\nconst normalizedOptions = computed<BCheckboxOption[]>(() => {\n  if (!options) return [];\n  return options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt };\n    }\n    return opt;\n  });\n});\n//#endregion\n\n//#region Group context\nfunction toggleValue(val: string | number) {\n  const current = [...model.value];\n  const index = current.indexOf(val);\n  if (index === -1) {\n    current.push(val);\n  } else {\n    current.splice(index, 1);\n  }\n  model.value = current;\n  emit('change', current);\n}\n\nconst props = reactive({ disabled, name });\nconst { disabled: disabledRef, name: nameRef } = toRefs(props);\n\nprovide(B_CHECKBOX_GROUP_KEY, {\n  modelValue: computed(() => model.value),\n  disabled: disabledRef,\n  name: nameRef,\n  toggleValue,\n});\n//#endregion\n</script>\n\n<template>\n  <div class=\"b-checkbox-group b:inline-flex b:flex-wrap b:gap-2\" role=\"group\">\n    <template v-if=\"normalizedOptions.length > 0\">\n      <BCheckbox\n        v-for=\"opt in normalizedOptions\"\n        :key=\"opt.value\"\n        :value=\"opt.value\"\n        :disabled=\"opt.disabled\"\n      >\n        {{ opt.label }}\n      </BCheckbox>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAsBA,IAAM,IAAQ,EAAmC,GAAA,aAAuB,EAElE,IAAO,GAMP,IAAoB,QACnB,EAAA,UACE,EAAA,QAAQ,KAAK,MACd,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACrC;GAAE,OAAO,OAAO,EAAI;GAAE,OAAO;GAAK,GAEpC,EACP,GANmB,EAAE,CAOvB;EAIF,SAAS,EAAY,GAAsB;GACzC,IAAM,IAAU,CAAC,GAAG,EAAM,MAAM,EAC1B,IAAQ,EAAQ,QAAQ,EAAI;AAOlC,GANI,MAAU,KACZ,EAAQ,KAAK,EAAI,GAEjB,EAAQ,OAAO,GAAO,EAAE,EAE1B,EAAM,QAAQ,GACd,EAAK,UAAU,EAAQ;;EAIzB,IAAM,EAAE,UAAU,GAAa,MAAM,MAAY,EADnC,EAAS;GAAE,UAAO,EAAA;GAAG,MAAG,EAAA;GAAG,CAAC,CACoB;SAE9D,EAAQ,GAAsB;GAC5B,YAAY,QAAe,EAAM,MAAM;GACvC,UAAU;GACV,MAAM;GACN;GACD,CAAC,kBAKA,EAYM,OAZN,GAYM,CAXY,EAAA,MAAkB,SAAM,KAAA,EAAA,GAAA,EACtC,EAOY,GAAA,EAAA,KAAA,GAAA,EAAA,EANI,EAAA,QAAP,YADT,EAOY,GAAA;GALT,KAAK,EAAI;GACT,OAAO,EAAI;GACX,UAAU,EAAI;;oBAEA,CAAA,EAAA,EAAZ,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;6CAGhB,EAAe,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}