@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system180.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system180.js","names":[],"sources":["../src/components/BSpin/BSpin.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useSlots as _useSlots, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock, Fragment as _Fragment, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_2 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = [\"id\"]\nconst _hoisted_4 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_5 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_6 = [\"id\"]\nconst _hoisted_7 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_8 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_9 = [\"id\"]\nconst _hoisted_10 = [\"aria-busy\", \"inert\"]\n\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSpin',\n  props: {\n    spinning: { type: Boolean, default: true },\n    size: { default: () => (BSpinSize.Default) },\n    tip: { default: '' },\n    delay: { default: 0 },\n    fullscreen: { type: Boolean, default: false }\n  },\n  setup(__props: any) {\n\n\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = _useSlots();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && __props.delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, __props.delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(__props.spinning);\n\nwatch(() => __props.spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(__props.tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${__props.size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': __props.fullscreen,\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (__props.fullscreen)\n    ? (_openBlock(), _createBlock(_Teleport, {\n        key: 0,\n        to: \"body\"\n      }, [\n        _createVNode(_Transition, { name: \"b-spin-fade\" }, {\n          default: _withCtx(() => [\n            (shouldShow.value)\n              ? (_openBlock(), _createElementBlock(\"div\", {\n                  key: 0,\n                  class: _normalizeClass([\"b-spin b-spin--fullscreen\", [`b-spin--${__props.size}`, { 'b-spin--spinning': shouldShow.value, 'b-spin--has-tip': hasTip.value }]]),\n                  role: \"status\",\n                  \"aria-label\": hasTip.value ? undefined : 'Loading',\n                  \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n                }, [\n                  _createElementVNode(\"div\", _hoisted_2, [\n                    _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                      _cache[0] || (_cache[0] = _createElementVNode(\"span\", { class: \"b-spin__dot\" }, [\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" })\n                      ], -1))\n                    ])\n                  ]),\n                  (hasTip.value)\n                    ? (_openBlock(), _createElementBlock(\"div\", {\n                        key: 0,\n                        id: _unref(tipId),\n                        class: \"b-spin__tip\"\n                      }, [\n                        _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                          _createTextVNode(_toDisplayString(__props.tip), 1)\n                        ])\n                      ], 8, _hoisted_3))\n                    : _createCommentVNode(\"\", true)\n                ], 10, _hoisted_1))\n              : _createCommentVNode(\"\", true)\n          ]),\n          _: 3\n        })\n      ]))\n    : (!isNested.value)\n      ? (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [\n          (shouldShow.value)\n            ? (_openBlock(), _createElementBlock(\"div\", {\n                key: 0,\n                class: _normalizeClass(rootClasses.value),\n                role: \"status\",\n                \"aria-label\": hasTip.value ? undefined : 'Loading',\n                \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n              }, [\n                _createElementVNode(\"div\", _hoisted_5, [\n                  _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                    _cache[1] || (_cache[1] = _createStaticVNode(\"<span class=\\\"b-spin__dot\\\"><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i></span>\", 1))\n                  ])\n                ]),\n                (hasTip.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", {\n                      key: 0,\n                      id: _unref(tipId),\n                      class: \"b-spin__tip\"\n                    }, [\n                      _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.tip), 1)\n                      ])\n                    ], 8, _hoisted_6))\n                  : _createCommentVNode(\"\", true)\n              ], 10, _hoisted_4))\n            : _createCommentVNode(\"\", true)\n        ], 64))\n      : (_openBlock(), _createElementBlock(\"div\", {\n          key: 2,\n          class: _normalizeClass(rootClasses.value)\n        }, [\n          (shouldShow.value)\n            ? (_openBlock(), _createElementBlock(\"div\", {\n                key: 0,\n                class: \"b-spin__overlay-container\",\n                role: \"status\",\n                \"aria-label\": hasTip.value ? undefined : 'Loading',\n                \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n              }, [\n                _createElementVNode(\"div\", _hoisted_8, [\n                  _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                    _cache[2] || (_cache[2] = _createStaticVNode(\"<span class=\\\"b-spin__dot\\\"><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i></span>\", 1))\n                  ])\n                ]),\n                (hasTip.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", {\n                      key: 0,\n                      id: _unref(tipId),\n                      class: \"b-spin__tip\"\n                    }, [\n                      _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.tip), 1)\n                      ])\n                    ], 8, _hoisted_9))\n                  : _createCommentVNode(\"\", true)\n              ], 8, _hoisted_7))\n            : _createCommentVNode(\"\", true),\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-spin__content\", { 'b-spin__content--blurred': shouldShow.value }]),\n            \"aria-busy\": shouldShow.value,\n            inert: shouldShow.value\n          }, [\n            _renderSlot(_ctx.$slots, \"default\")\n          ], 10, _hoisted_10)\n        ], 2))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system180.js","names":[],"sources":["../src/components/BSelect/BSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\nimport {\n  BSelectMode,\n  BSelectPlacement,\n  BSelectStatus,\n  BSelectVariant,\n  type BSelectFieldNames,\n  type BSelectOption,\n} from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\nconst {\n  options = [],\n  size = BCommonSize.Medium,\n  variant = BSelectVariant.Outlined,\n  defaultActiveFirstOption = true,\n  allowClear = false,\n  popupMatchSelectWidth = true,\n  showSearch = false,\n  listHeight = 256,\n  loading = false,\n  maxTagCount,\n  maxCount,\n  placement: _placement = BSelectPlacement.BottomLeft,\n  filterOption = true,\n  notFoundContent = 'No data',\n  fieldNames,\n  placeholder,\n  mode,\n  tokenSeparators,\n  disabled,\n  status,\n  open,\n} = defineProps<{\n  /** Data source options array. */\n  options?: BSelectOption[];\n  /** Size of the selector. */\n  size?: `${BCommonSize}`;\n  /** Visual variant. */\n  variant?: `${BSelectVariant}`;\n  /** Whether the component is disabled. */\n  disabled?: boolean;\n  /** Validation status. */\n  status?: `${BSelectStatus}`;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Selection mode: multiple or tags. */\n  mode?: `${BSelectMode}`;\n  /** Whether to activate the first option by default. */\n  defaultActiveFirstOption?: boolean;\n  /** Show clear button. */\n  allowClear?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether to show search input. Automatically true in multiple/tags mode. */\n  showSearch?: boolean;\n  /** Whether dropdown width matches selector width. */\n  popupMatchSelectWidth?: boolean | number;\n  /** Max height of popup list in px. */\n  listHeight?: number;\n  /** Loading state. */\n  loading?: boolean;\n  /** Max tag count visible (multiple/tags mode). */\n  maxTagCount?: number | 'responsive';\n  /** Max selected items (multiple/tags mode). */\n  maxCount?: number;\n  /** Dropdown placement. */\n  placement?: `${BSelectPlacement}`;\n  /** Content shown when no options match. Set to null to hide. */\n  notFoundContent?: string | null;\n  /** Customize field names mapping. */\n  fieldNames?: BSelectFieldNames;\n  /** Filter options by input. true uses default, function for custom. */\n  filterOption?: boolean | ((inputValue: string, option: BSelectOption) => boolean);\n  /** Separators for tags mode to auto-tokenize. */\n  tokenSeparators?: string[];\n  /** Whether the selected option label is included in value. */\n  labelInValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when value changes. */\n  change: [value: string | number | (string | number)[], option: BSelectOption | BSelectOption[]];\n  /** Fired when an option is selected. */\n  select: [value: string | number, option: BSelectOption];\n  /** Fired when an option is deselected (multiple/tags). */\n  deselect: [value: string | number, option: BSelectOption];\n  /** Fired on focus. */\n  focus: [event: FocusEvent];\n  /** Fired on blur. */\n  blur: [event: FocusEvent];\n  /** Fired when clear button is clicked. */\n  clear: [];\n  /** Fired when dropdown opens/closes. */\n  openChange: [open: boolean];\n  /** Fired when searching (multiple/tags mode). */\n  search: [value: string];\n  /** Fired on dropdown scroll. */\n  popupScroll: [event: Event];\n  /** Fired on input keydown. */\n  inputKeyDown: [event: KeyboardEvent];\n}>();\n\nconst model = defineModel<string | number | (string | number)[] | null | undefined>();\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-select-anchor-${componentUID.value}`);\nconst listboxId = computed(() => `b-select-listbox-${componentUID.value}`);\n\nconst selectorRef = ref<HTMLElement | null>(null);\nconst searchInputRef = ref<HTMLInputElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst searchValue = ref('');\n\nconst labelField = computed(() => fieldNames?.label ?? 'label');\nconst valueField = computed(() => fieldNames?.value ?? 'value');\nconst optionsField = computed(() => fieldNames?.options ?? 'options');\n\nconst isSearchable = computed(() => {\n  if (mode === BSelectMode.Multiple || mode === BSelectMode.Tags) return true;\n  return showSearch;\n});\n\nconst getOptionLabel = (opt: BSelectOption): string => {\n  const record = opt as unknown as Record<string, unknown>;\n  const label = record[labelField.value];\n  const value = record[valueField.value];\n  return String(label ?? value ?? '');\n};\n\nconst getOptionValue = (opt: BSelectOption): string | number => {\n  const record = opt as unknown as Record<string, unknown>;\n  return record[valueField.value] as string | number;\n};\n\nconst flatOptions = computed((): BSelectOption[] => {\n  const result: BSelectOption[] = [];\n  for (const opt of options) {\n    const record = opt as unknown as Record<string, unknown>;\n    const nested = record[optionsField.value] as BSelectOption[] | undefined;\n    if (nested && Array.isArray(nested)) {\n      for (const child of nested) {\n        result.push(child);\n      }\n    } else {\n      result.push(opt);\n    }\n  }\n  return result;\n});\n\nconst filteredOptions = computed((): BSelectOption[] => {\n  if (!searchValue.value || !isSearchable.value) return flatOptions.value;\n  if (filterOption === false) return flatOptions.value;\n  if (typeof filterOption === 'function') {\n    return flatOptions.value.filter((opt) => filterOption(searchValue.value, opt));\n  }\n  const query = searchValue.value.toLowerCase();\n  return flatOptions.value.filter((opt) => {\n    return getOptionLabel(opt).toLowerCase().includes(query);\n  });\n});\n\nconst selectedValues = computed((): (string | number)[] => {\n  if (model.value == null) return [];\n  if (Array.isArray(model.value)) return model.value;\n  return [model.value];\n});\n\nconst selectedOptions = computed((): BSelectOption[] => {\n  return selectedValues.value\n    .map((v) => flatOptions.value.find((opt) => getOptionValue(opt) === v))\n    .filter(Boolean) as BSelectOption[];\n});\n\nconst displayLabel = computed((): string => {\n  if (isMultipleMode.value) return '';\n  if (selectedOptions.value.length === 0) return '';\n  return getOptionLabel(selectedOptions.value[0]);\n});\n\nconst isMultipleMode = computed(() => {\n  return mode === BSelectMode.Multiple || mode === BSelectMode.Tags;\n});\n\nconst visibleTags = computed(() => {\n  if (maxTagCount == null || maxTagCount === 'responsive') return selectedOptions.value;\n  return selectedOptions.value.slice(0, maxTagCount as number);\n});\n\nconst hiddenTagCount = computed(() => {\n  if (maxTagCount == null || maxTagCount === 'responsive') return 0;\n  return Math.max(0, selectedOptions.value.length - (maxTagCount as number));\n});\n\nconst isOptionSelected = (opt: BSelectOption): boolean => {\n  return selectedValues.value.includes(getOptionValue(opt));\n};\n\nconst openMenu = () => {\n  if (isOpen.value) return;\n  menuRef.value?.showPopover();\n};\n\nconst closeMenu = () => {\n  if (!isOpen.value) return;\n  menuRef.value?.hidePopover();\n};\n\nconst handleToggle = ({ newState }: ToggleEvent) => {\n  const nowOpen = newState === 'open';\n  isOpen.value = nowOpen;\n  emit('openChange', nowOpen);\n  if (nowOpen) {\n    if (defaultActiveFirstOption && filteredOptions.value.length > 0) {\n      activeIndex.value = 0;\n    }\n    nextTick(() => {\n      if (isSearchable.value) {\n        searchInputRef.value?.focus();\n      }\n    });\n  } else {\n    activeIndex.value = -1;\n    searchValue.value = '';\n  }\n};\n\nconst selectSingleOption = (opt: BSelectOption) => {\n  if (opt.disabled) return;\n  const val = getOptionValue(opt);\n  model.value = val;\n  emit('select', val, opt);\n  emit('change', val, opt);\n  closeMenu();\n  nextTick(() => selectorRef.value?.focus());\n};\n\nconst selectMultipleOption = (opt: BSelectOption) => {\n  if (opt.disabled) return;\n  const val = getOptionValue(opt);\n  const current = selectedValues.value.slice();\n\n  if (current.includes(val)) {\n    const next = current.filter((v) => v !== val);\n    model.value = next;\n    emit('deselect', val, opt);\n    emit(\n      'change',\n      next,\n      next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n    );\n  } else {\n    if (maxCount != null && current.length >= maxCount) return;\n    const next = [...current, val];\n    model.value = next;\n    emit('select', val, opt);\n    emit(\n      'change',\n      next,\n      next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n    );\n  }\n  searchValue.value = '';\n  nextTick(() => searchInputRef.value?.focus());\n};\n\nconst selectOption = (opt: BSelectOption) => {\n  if (isMultipleMode.value) {\n    selectMultipleOption(opt);\n  } else {\n    selectSingleOption(opt);\n  }\n};\n\nconst removeTag = (val: string | number) => {\n  const opt = flatOptions.value.find((o) => getOptionValue(o) === val);\n  const next = selectedValues.value.filter((v) => v !== val);\n  model.value = next;\n  if (opt) emit('deselect', val, opt);\n  emit(\n    'change',\n    next,\n    next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n  );\n};\n\nconst handleClear = (e: Event) => {\n  e.stopPropagation();\n  if (isMultipleMode.value) {\n    model.value = [];\n  } else {\n    model.value = undefined;\n  }\n  searchValue.value = '';\n  emit('clear');\n  emit(\n    'change',\n    isMultipleMode.value ? [] : (undefined as unknown as string),\n    [] as unknown as BSelectOption,\n  );\n};\n\nconst handleSelectorClick = () => {\n  if (disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst handleSelectorFocus = (e: FocusEvent) => {\n  emit('focus', e);\n};\n\nconst handleSelectorBlur = (e: FocusEvent) => {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  if (selectorRef.value?.contains(related)) return;\n  emit('blur', e);\n  closeMenu();\n};\n\nconst handleSearchInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  searchValue.value = target.value;\n  emit('search', target.value);\n\n  if (mode === BSelectMode.Tags && tokenSeparators) {\n    const separators = tokenSeparators;\n    for (const sep of separators) {\n      if (target.value.includes(sep)) {\n        const parts = target.value.split(\n          new RegExp(\n            `[${separators.map((s) => s.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')).join('')}]`,\n          ),\n        );\n        for (const part of parts) {\n          const trimmed = part.trim();\n          if (trimmed && !selectedValues.value.includes(trimmed)) {\n            const existing = flatOptions.value.find(\n              (o) => getOptionValue(o) === trimmed || getOptionLabel(o) === trimmed,\n            );\n            if (existing) {\n              selectMultipleOption(existing);\n            } else {\n              const current = selectedValues.value.slice();\n              const next = [...current, trimmed];\n              model.value = next;\n              emit('select', trimmed, { value: trimmed, label: trimmed });\n              emit(\n                'change',\n                next,\n                next.map(\n                  (v) =>\n                    flatOptions.value.find((o) => getOptionValue(o) === v) ?? {\n                      value: v,\n                      label: String(v),\n                    },\n                ),\n              );\n            }\n          }\n        }\n        searchValue.value = '';\n        break;\n      }\n    }\n  }\n\n  if (!isOpen.value) openMenu();\n  activeIndex.value = defaultActiveFirstOption ? 0 : -1;\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  emit('inputKeyDown', e);\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const opts = filteredOptions.value;\n      const nextIdx = activeIndex.value + 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (nextIdx + i) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const opts = filteredOptions.value;\n      const prevIdx = activeIndex.value - 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (((prevIdx - i) % opts.length) + opts.length) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'Enter': {\n      e.preventDefault();\n      if (isOpen.value && activeIndex.value >= 0) {\n        const opt = filteredOptions.value[activeIndex.value];\n        if (opt && !opt.disabled) {\n          selectOption(opt);\n        }\n      } else if (!isOpen.value) {\n        openMenu();\n      }\n      break;\n    }\n    case ' ': {\n      if (!isSearchable.value || !searchValue.value) {\n        e.preventDefault();\n        if (!isOpen.value) {\n          openMenu();\n        } else if (activeIndex.value >= 0) {\n          const opt = filteredOptions.value[activeIndex.value];\n          if (opt && !opt.disabled) {\n            selectOption(opt);\n          }\n        }\n      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      closeMenu();\n      selectorRef.value?.focus();\n      break;\n    }\n    case 'Backspace': {\n      if (isMultipleMode.value && !searchValue.value && selectedValues.value.length > 0) {\n        const lastVal = selectedValues.value[selectedValues.value.length - 1];\n        removeTag(lastVal);\n      }\n      break;\n    }\n    case 'Tab': {\n      if (isOpen.value) {\n        closeMenu();\n      }\n      break;\n    }\n  }\n};\n\nconst handlePopupScroll = (e: Event) => {\n  emit('popupScroll', e);\n};\n\nconst scrollActiveIntoView = () => {\n  nextTick(() => {\n    const active = menuRef.value?.querySelector('[data-active=\"true\"]');\n    active?.scrollIntoView({ block: 'nearest' });\n  });\n};\n\nwatch(activeIndex, scrollActiveIntoView);\n\nwatch(\n  () => open,\n  (val) => {\n    if (val === true && !isOpen.value) openMenu();\n    else if (val === false && isOpen.value) closeMenu();\n  },\n);\n\nconst showClear = computed(() => {\n  if (!allowClear || disabled) return false;\n  if (isMultipleMode.value) return selectedValues.value.length > 0;\n  return model.value != null && model.value !== '';\n});\n\ndefineExpose({\n  focus: () => selectorRef.value?.focus(),\n  blur: () => selectorRef.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    class=\"b-select b:relative b:inline-flex b:w-full\"\n    :class=\"{ 'b-select--disabled': disabled }\"\n  >\n    <!-- Selector trigger -->\n    <div\n      ref=\"selectorRef\"\n      v-bind=\"attrs\"\n      class=\"b-select__selector b:box-border b:flex b:w-full b:cursor-pointer b:items-center b:gap-1 b:transition-all b:outline-none\"\n      :class=\"[\n        {\n          'b:min-h-6 b:px-2 b:text-sm': size === BCommonSize.Small,\n          'b:min-h-8 b:px-3 b:text-sm': size === BCommonSize.Medium,\n          'b:min-h-10 b:px-3 b:text-base': size === BCommonSize.Large,\n        },\n        {\n          'b:rounded-lg b:border-1 b:border-[var(--b-select-border-color)] b:bg-[var(--b-select-selector-bg)] b:hover:not-disabled:border-[var(--b-select-hover-border-color)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]':\n            variant === BSelectVariant.Outlined,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-[var(--b-select-filled-bg)] b:hover:not-disabled:bg-[var(--b-select-filled-bg)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:bg-[var(--b-select-selector-bg)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]':\n            variant === BSelectVariant.Filled,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-transparent':\n            variant === BSelectVariant.Borderless,\n        },\n        {\n          'b:border-red-500! b:hover:not-disabled:border-red-400! b:focus:not-disabled:border-red-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]!':\n            status === BSelectStatus.Error,\n          'b:border-yellow-500! b:hover:not-disabled:border-yellow-400! b:focus:not-disabled:border-yellow-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,215,5,0.1)]!':\n            status === BSelectStatus.Warning,\n        },\n        {\n          'b:cursor-not-allowed b:opacity-40': disabled,\n        },\n        {\n          'b-select__selector--open': isOpen,\n        },\n      ]\"\n      :tabindex=\"disabled ? -1 : 0\"\n      role=\"combobox\"\n      :aria-expanded=\"isOpen\"\n      :aria-controls=\"isOpen ? listboxId : undefined\"\n      :aria-activedescendant=\"isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\"\n      aria-haspopup=\"listbox\"\n      :aria-label=\"placeholder ?? 'Select'\"\n      :aria-disabled=\"disabled ?? false\"\n      @click=\"handleSelectorClick\"\n      @focus=\"handleSelectorFocus\"\n      @blur=\"handleSelectorBlur\"\n      @keydown=\"handleKeyDown\"\n    >\n      <!-- Multiple mode: tags -->\n      <template v-if=\"isMultipleMode\">\n        <span\n          v-for=\"opt in visibleTags\"\n          :key=\"getOptionValue(opt)\"\n          class=\"b-select__tag b:inline-flex b:max-w-full b:items-center b:gap-0.5 b:rounded b:border-1 b:border-[var(--b-select-multiple-item-border-color)] b:bg-[var(--b-select-multiple-item-bg)] b:leading-none\"\n          :class=\"[\n            {\n              'b:h-4 b:px-1 b:text-xs': size === BCommonSize.Small,\n              'b:h-6 b:px-1.5 b:text-xs': size === BCommonSize.Medium,\n              'b:h-8 b:px-2 b:text-sm': size === BCommonSize.Large,\n            },\n          ]\"\n        >\n          <span class=\"b:truncate\">{{ getOptionLabel(opt) }}</span>\n          <button\n            type=\"button\"\n            class=\"b-select__tag-close b:ml-0.5 b:flex b:h-3.5 b:w-3.5 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-transparent b:text-[10px] b:text-zinc-400 b:hover:bg-zinc-200 b:hover:text-zinc-600\"\n            :aria-label=\"`Remove ${getOptionLabel(opt)}`\"\n            tabindex=\"-1\"\n            @click.stop=\"removeTag(getOptionValue(opt))\"\n            @mousedown.prevent\n          >\n            <svg aria-hidden=\"true\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"><path d=\"M1 1l6 6M7 1L1 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n          </button>\n        </span>\n        <span\n          v-if=\"hiddenTagCount > 0\"\n          class=\"b-select__tag b-select__tag--count b:relative b:z-1 b:inline-flex b:shrink-0 b:items-center b:rounded b:bg-[var(--b-select-multiple-count-bg)] b:px-1.5 b:text-xs b:leading-none b:text-[var(--b-select-multiple-count-color)]\"\n          :class=\"[\n            {\n              'b:h-4': size === BCommonSize.Small,\n              'b:h-6': size === BCommonSize.Medium,\n              'b:h-8': size === BCommonSize.Large,\n            },\n          ]\"\n        >\n          +{{ hiddenTagCount }}\n        </span>\n        <input\n          ref=\"searchInputRef\"\n          class=\"b-select__search b:min-w-4 b:flex-1 b:border-none b:bg-transparent b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]\"\n          :value=\"searchValue\"\n          :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n          :disabled=\"disabled\"\n          :aria-label=\"placeholder ?? 'Search options'\"\n          autocomplete=\"off\"\n          @input=\"handleSearchInput\"\n          @keydown=\"handleKeyDown\"\n          @focus=\"handleSelectorFocus\"\n          @blur=\"handleSelectorBlur\"\n        />\n      </template>\n\n      <!-- Single mode -->\n      <template v-else>\n        <span\n          v-if=\"displayLabel && !searchValue\"\n          class=\"b-select__value b:flex-1 b:truncate b:text-[color:var(--b-select-color)]\"\n        >\n          <slot name=\"selectedLabel\" :option=\"selectedOptions[0]\">\n            {{ displayLabel }}\n          </slot>\n        </span>\n        <span\n          v-else-if=\"!searchValue && !displayLabel\"\n          class=\"b-select__placeholder b:flex-1 b:truncate b:text-[var(--b-select-placeholder-color)]\"\n        >\n          {{ placeholder }}\n        </span>\n        <input\n          v-if=\"isSearchable\"\n          ref=\"searchInputRef\"\n          class=\"b-select__search b:absolute b:inset-0 b:w-full b:border-none b:bg-transparent b:px-3 b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]\"\n          :class=\"{ 'b:opacity-0': !isOpen }\"\n          :value=\"searchValue\"\n          :disabled=\"disabled\"\n          :aria-label=\"placeholder ?? 'Search options'\"\n          autocomplete=\"off\"\n          tabindex=\"-1\"\n          @input=\"handleSearchInput\"\n          @keydown=\"handleKeyDown\"\n        />\n      </template>\n\n      <!-- Clear button -->\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"b-select__clear b:z-1 b:flex b:h-4 b:w-4 b:shrink-0 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-[var(--b-select-clear-bg)] b:text-xs b:text-zinc-400 b:hover:text-zinc-600\"\n        aria-label=\"Clear selection\"\n        tabindex=\"-1\"\n        @click=\"handleClear\"\n        @mousedown.prevent\n      >\n        <svg aria-hidden=\"true\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"><path d=\"M1 1l6 6M7 1L1 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n      </button>\n\n      <!-- Suffix arrow -->\n      <span\n        class=\"b-select__arrow b:ml-auto b:flex b:shrink-0 b:items-center b:text-zinc-400 b:transition-transform b:duration-200\"\n        :class=\"{ 'b:rotate-180': isOpen }\"\n        aria-hidden=\"true\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n          <path\n            d=\"M2.5 4.5L6 8L9.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n\n      <!-- Loading spinner -->\n      <span\n        v-if=\"loading\"\n        class=\"b-select__loading b:ml-1 b:flex b:shrink-0 b:animate-spin b:items-center b:text-zinc-400\"\n        aria-hidden=\"true\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n          <circle\n            cx=\"7\"\n            cy=\"7\"\n            r=\"5.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-dasharray=\"24\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </span>\n    </div>\n\n    <!-- Dropdown popup -->\n    <div\n      ref=\"menuRef\"\n      :id=\"listboxId\"\n      class=\"b-select__dropdown b:overflow-auto b:rounded-lg b:bg-[var(--b-select-selector-bg)] b:shadow-lg\"\n      :class=\"{ 'b:w-[anchor-size(width)]': popupMatchSelectWidth === true }\"\n      :style=\"[\n        typeof popupMatchSelectWidth === 'number'\n          ? { width: `${popupMatchSelectWidth}px` }\n          : undefined,\n        { maxHeight: `${listHeight}px` },\n      ]\"\n      popover\n      role=\"listbox\"\n      :aria-multiselectable=\"isMultipleMode || undefined\"\n      :aria-label=\"placeholder ?? 'Options'\"\n      @toggle=\"handleToggle\"\n      @scroll=\"handlePopupScroll\"\n    >\n      <!-- Options -->\n      <div v-if=\"filteredOptions.length > 0\" class=\"b:p-1\">\n        <template v-for=\"(opt, idx) in filteredOptions\" :key=\"getOptionValue(opt)\">\n          <div\n            :id=\"`${listboxId}-option-${idx}`\"\n            class=\"b-select__option b:cursor-pointer b:rounded-md b:px-[var(--b-select-option-padding-x)] b:py-[var(--b-select-option-padding-y)] b:text-[length:var(--b-select-option-font-size)] b:leading-[var(--b-select-option-line-height)] b:transition-colors\"\n            :class=\"[\n              {\n                'b:bg-[var(--b-select-option-active-bg)]': idx === activeIndex && !opt.disabled,\n                'b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)] b:text-[color:var(--b-select-option-selected-color)]':\n                  isOptionSelected(opt) && idx !== activeIndex,\n                'b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)]':\n                  isOptionSelected(opt) && idx === activeIndex,\n                'b:cursor-not-allowed b:opacity-40': opt.disabled,\n                'b:hover:bg-[var(--b-select-option-active-bg)]':\n                  !opt.disabled && idx !== activeIndex && !isOptionSelected(opt),\n              },\n            ]\"\n            :data-active=\"idx === activeIndex\"\n            :aria-selected=\"isOptionSelected(opt)\"\n            :aria-disabled=\"opt.disabled ?? false\"\n            role=\"option\"\n            @mousedown.prevent=\"selectOption(opt)\"\n            @mouseenter=\"activeIndex = idx\"\n          >\n            <slot name=\"option\" :option=\"opt\" :index=\"idx\" :selected=\"isOptionSelected(opt)\">\n              <span class=\"b:flex b:items-center b:justify-between\">\n                <span>{{ getOptionLabel(opt) }}</span>\n                <svg\n                  v-if=\"isMultipleMode && isOptionSelected(opt)\"\n                  class=\"b:ml-2 b:h-3 b:w-3 b:text-[var(--b-select-active-border-color)]\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M2 6L5 9L10 3\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </slot>\n          </div>\n        </template>\n      </div>\n\n      <!-- Not found content -->\n      <div\n        v-else-if=\"notFoundContent !== null\"\n        class=\"b-select__empty b:px-4 b:py-6 b:text-center b:text-sm b:text-zinc-400\"\n      >\n        {{ notFoundContent }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-select {\n  --b-select-active-border-color: #1677ff;\n  --b-select-active-outline-color: rgba(5, 145, 255, 0.1);\n  --b-select-hover-border-color: #4096ff;\n  --b-select-border-color: #d9d9d9;\n  --b-select-color: rgba(0, 0, 0, 0.88);\n  --b-select-placeholder-color: #606870;\n  --b-select-clear-bg: #ffffff;\n  --b-select-selector-bg: #ffffff;\n  --b-select-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-select-multiple-item-bg: rgba(0, 0, 0, 0.06);\n  --b-select-multiple-count-bg: #f0f0f0;\n  --b-select-multiple-count-color: #1f1f1f;\n  --b-select-multiple-item-border-color: transparent;\n  --b-select-multiple-item-border-color-disabled: transparent;\n  --b-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-select-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-select-option-font-size: 14px;\n  --b-select-option-height: 32px;\n  --b-select-option-line-height: 1.5714;\n  --b-select-option-padding-x: 12px;\n  --b-select-option-padding-y: 5px;\n  --b-select-option-selected-bg: #e6f4ff;\n  --b-select-option-selected-color: rgba(0, 0, 0, 0.88);\n  --b-select-option-selected-font-weight: 600;\n  --b-select-z-index-popup: 1050;\n}\n\n@media (prefers-color-scheme: dark) {\n  .b-select {\n    --b-select-active-border-color: #1668dc;\n    --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-select-hover-border-color: #3c89e8;\n    --b-select-border-color: #424242;\n    --b-select-color: rgba(255, 255, 255, 0.88);\n    --b-select-placeholder-color: #9ca3af;\n    --b-select-clear-bg: #1f1f1f;\n    --b-select-selector-bg: #1f1f1f;\n    --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n    --b-select-multiple-count-bg: #353535;\n    --b-select-multiple-count-color: #e0e0e0;\n    --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-select-option-selected-bg: #111a2c;\n    --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n[data-prefers-color='light'] .b-select {\n  --b-select-active-border-color: #1677ff;\n  --b-select-active-outline-color: rgba(5, 145, 255, 0.1);\n  --b-select-hover-border-color: #4096ff;\n  --b-select-border-color: #d9d9d9;\n  --b-select-color: rgba(0, 0, 0, 0.88);\n  --b-select-placeholder-color: #606870;\n  --b-select-clear-bg: #ffffff;\n  --b-select-selector-bg: #ffffff;\n  --b-select-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-select-multiple-item-bg: rgba(0, 0, 0, 0.06);\n  --b-select-multiple-count-bg: #f0f0f0;\n  --b-select-multiple-count-color: #1f1f1f;\n  --b-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-select-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-select-option-selected-bg: #e6f4ff;\n  --b-select-option-selected-color: rgba(0, 0, 0, 0.88);\n}\n\n[data-prefers-color='dark'] .b-select {\n  --b-select-active-border-color: #1668dc;\n  --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n  --b-select-hover-border-color: #3c89e8;\n  --b-select-border-color: #424242;\n  --b-select-color: rgba(255, 255, 255, 0.88);\n  --b-select-placeholder-color: #9ca3af;\n  --b-select-clear-bg: #1f1f1f;\n  --b-select-selector-bg: #1f1f1f;\n  --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n  --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n  --b-select-option-selected-bg: #111a2c;\n  --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-select {\n    --b-select-active-border-color: #1668dc;\n    --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-select-hover-border-color: #3c89e8;\n    --b-select-border-color: #424242;\n    --b-select-color: rgba(255, 255, 255, 0.88);\n    --b-select-placeholder-color: #9ca3af;\n    --b-select-clear-bg: #1f1f1f;\n    --b-select-selector-bg: #1f1f1f;\n    --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n    --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-select-option-selected-bg: #111a2c;\n    --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n.b-select__selector {\n  anchor-name: v-bind('anchorName');\n}\n\n.b-select__dropdown {\n  position: absolute;\n  margin-top: 4px;\n  z-index: var(--b-select-z-index-popup);\n\n  position-anchor: v-bind('anchorName');\n  position-try-fallbacks: --b-select-top;\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n\n  transition:\n    display 0.2s,\n    opacity 0.2s;\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n}\n\n@position-try --b-select-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-select__dropdown {\n    transition: none;\n  }\n\n  .b-select__arrow {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system182.js

@@ -1,8 +1,9 @@
-import e from "./design-system180.js";
+import e from "./design-system14.js";
+import t from "./design-system180.js";
 /* empty css                 */
-//#region src/components/BSpin/BSpin.vue
-var t = e;
+//#region src/components/BSelect/BSelect.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-9a851cf3"]]);
 //#endregion
-export { t as default };
+export { n as default };
 
 //# sourceMappingURL=design-system182.js.map

package/dist/design-system182.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system182.js","names":[],"sources":["../src/components/BSpin/BSpin.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  spinning = true,\n  size = BSpinSize.Default,\n  tip = '',\n  delay = 0,\n  fullscreen = false,\n} = defineProps<{\n  /**\n   * Whether the Spin indicator is active.\n   * @default true\n   */\n  spinning?: boolean;\n  /**\n   * Size of the spinner - small, default, or large.\n   * @default 'default'\n   */\n  size?: `${BSpinSize}`;\n  /**\n   * Descriptive text displayed below the spinning indicator.\n   */\n  tip?: string;\n  /**\n   * Delay in milliseconds before the spinner shows after `spinning` becomes true.\n   * Prevents flicker for fast operations. Does not apply to hiding.\n   * @default 0\n   */\n  delay?: number;\n  /**\n   * Display as fullscreen overlay (fixed, covers the entire viewport).\n   * @default false\n   */\n  fullscreen?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Content to wrap with a spinning overlay. */\n  default?(): unknown;\n  /** Custom spinner indicator (replaces the default dots). */\n  indicator?(): unknown;\n  /** Custom tip content (replaces the `tip` prop text). */\n  tip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(spinning);\n\nwatch(() => spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': fullscreen,\n  },\n]);\n</script>\n\n<template>\n  <!-- Fullscreen mode: uses Teleport to <body> -->\n  <Teleport v-if=\"fullscreen\" to=\"body\">\n    <Transition name=\"b-spin-fade\">\n      <div\n        v-if=\"shouldShow\"\n        class=\"b-spin b-spin--fullscreen\"\n        :class=\"[`b-spin--${size}`, { 'b-spin--spinning': shouldShow, 'b-spin--has-tip': hasTip }]\"\n        role=\"status\"\n        :aria-label=\"hasTip ? undefined : 'Loading'\"\n        :aria-describedby=\"hasTip ? tipId : undefined\"\n      >\n        <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\">\n            <span class=\"b-spin__dot\">\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n            </span>\n          </slot>\n        </div>\n        <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n          <slot name=\"tip\">{{ tip }}</slot>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n\n  <!-- Standalone (no children) -->\n  <template v-else-if=\"!isNested\">\n    <div\n      v-if=\"shouldShow\"\n      :class=\"rootClasses\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n  </template>\n\n  <!-- Nested (wraps children) -->\n  <div v-else :class=\"rootClasses\">\n    <div\n      v-if=\"shouldShow\"\n      class=\"b-spin__overlay-container\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n    <div\n      class=\"b-spin__content\"\n      :class=\"{ 'b-spin__content--blurred': shouldShow }\"\n      :aria-busy=\"shouldShow\"\n      :inert=\"shouldShow\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-spin {\n  /* Dot sizes per variant */\n  --b-spin-dot-size-small: 14px;\n  --b-spin-dot-size-default: 20px;\n  --b-spin-dot-size-large: 32px;\n\n  /* Dot colour */\n  --b-spin-dot-color: oklch(50% 0.169 237.323); /* primary – darkened for AA contrast */\n\n  /* Tip text */\n  --b-spin-tip-color: oklch(50% 0.169 237.323);\n  --b-spin-tip-font-size: 0.875rem;\n\n  /* Overlay */\n  --b-spin-overlay-bg: oklch(100% 0 0 / 0.6);\n  --b-spin-content-blur: 0.5px;\n\n  /* Fullscreen */\n  --b-spin-fullscreen-bg: oklch(100% 0 0 / 0.75);\n\n  /* Animation */\n  --b-spin-animation-duration: 1.2s;\n  --b-spin-transition-duration: 300ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-spin {\n  --b-spin-dot-color: oklch(72% 0.14 237);\n  --b-spin-tip-color: oklch(72% 0.14 237);\n  --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n  --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-spin {\n    --b-spin-dot-color: oklch(72% 0.14 237);\n    --b-spin-tip-color: oklch(72% 0.14 237);\n    --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n    --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-spin {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n/* Nested wrapper needs relative positioning for overlay */\n.b-spin--nested {\n  position: relative;\n  display: block;\n}\n\n/* ── Overlay container (nested mode) ── */\n.b-spin__overlay-container {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-overlay-bg);\n  border-radius: inherit;\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n/* ── Content (nested) ── */\n.b-spin__content {\n  transition:\n    opacity var(--b-spin-transition-duration) ease,\n    filter var(--b-spin-transition-duration) ease;\n}\n\n.b-spin__content--blurred {\n  opacity: 0.5;\n  filter: blur(var(--b-spin-content-blur));\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ── Fullscreen ── */\n.b-spin--fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 1070;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-fullscreen-bg);\n}\n\n/* ── Dot indicator ── */\n.b-spin__indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.b-spin__dot {\n  position: relative;\n  display: inline-block;\n  font-size: var(--b-spin-dot-size-default);\n  width: 1em;\n  height: 1em;\n  animation: b-spin-rotate var(--b-spin-animation-duration) linear infinite;\n}\n\n.b-spin--small .b-spin__dot {\n  font-size: var(--b-spin-dot-size-small);\n}\n\n.b-spin--large .b-spin__dot {\n  font-size: var(--b-spin-dot-size-large);\n}\n\n.b-spin__dot-item {\n  position: absolute;\n  display: block;\n  width: calc(1em * 0.45);\n  height: calc(1em * 0.45);\n  background-color: var(--b-spin-dot-color);\n  border-radius: 50%;\n  opacity: 0.3;\n  animation: b-spin-bounce var(--b-spin-animation-duration) ease-in-out infinite;\n  transform: scale(0.75);\n}\n\n.b-spin__dot-item:nth-child(1) {\n  top: 0;\n  left: 0;\n}\n\n.b-spin__dot-item:nth-child(2) {\n  top: 0;\n  right: 0;\n  animation-delay: 0.4s;\n}\n\n.b-spin__dot-item:nth-child(3) {\n  right: 0;\n  bottom: 0;\n  animation-delay: 0.8s;\n}\n\n.b-spin__dot-item:nth-child(4) {\n  bottom: 0;\n  left: 0;\n  animation-delay: 1.2s;\n}\n\n/* ── Tip ── */\n.b-spin__tip {\n  color: var(--b-spin-tip-color);\n  font-size: var(--b-spin-tip-font-size);\n  text-align: center;\n}\n\n/* ─────────────────────────────────────────────\n   Keyframes\n   ───────────────────────────────────────────── */\n@keyframes b-spin-rotate {\n  to {\n    transform: rotate(405deg);\n  }\n}\n\n@keyframes b-spin-bounce {\n  0%,\n  100% {\n    opacity: 0.3;\n    transform: scale(0.75);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Fade transition (fullscreen)\n   ───────────────────────────────────────────── */\n.b-spin-fade-enter-active,\n.b-spin-fade-leave-active {\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n.b-spin-fade-enter-from,\n.b-spin-fade-leave-to {\n  opacity: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-spin__dot {\n    animation: none;\n  }\n\n  .b-spin__dot-item {\n    animation: none;\n    opacity: 0.8;\n    transform: scale(1);\n  }\n\n  .b-spin-fade-enter-active,\n  .b-spin-fade-leave-active {\n    transition: none;\n  }\n\n  .b-spin__content {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system182.js","names":[],"sources":["../src/components/BSelect/BSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\nimport {\n  BSelectMode,\n  BSelectPlacement,\n  BSelectStatus,\n  BSelectVariant,\n  type BSelectFieldNames,\n  type BSelectOption,\n} from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\nconst {\n  options = [],\n  size = BCommonSize.Medium,\n  variant = BSelectVariant.Outlined,\n  defaultActiveFirstOption = true,\n  allowClear = false,\n  popupMatchSelectWidth = true,\n  showSearch = false,\n  listHeight = 256,\n  loading = false,\n  maxTagCount,\n  maxCount,\n  placement: _placement = BSelectPlacement.BottomLeft,\n  filterOption = true,\n  notFoundContent = 'No data',\n  fieldNames,\n  placeholder,\n  mode,\n  tokenSeparators,\n  disabled,\n  status,\n  open,\n} = defineProps<{\n  /** Data source options array. */\n  options?: BSelectOption[];\n  /** Size of the selector. */\n  size?: `${BCommonSize}`;\n  /** Visual variant. */\n  variant?: `${BSelectVariant}`;\n  /** Whether the component is disabled. */\n  disabled?: boolean;\n  /** Validation status. */\n  status?: `${BSelectStatus}`;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Selection mode: multiple or tags. */\n  mode?: `${BSelectMode}`;\n  /** Whether to activate the first option by default. */\n  defaultActiveFirstOption?: boolean;\n  /** Show clear button. */\n  allowClear?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether to show search input. Automatically true in multiple/tags mode. */\n  showSearch?: boolean;\n  /** Whether dropdown width matches selector width. */\n  popupMatchSelectWidth?: boolean | number;\n  /** Max height of popup list in px. */\n  listHeight?: number;\n  /** Loading state. */\n  loading?: boolean;\n  /** Max tag count visible (multiple/tags mode). */\n  maxTagCount?: number | 'responsive';\n  /** Max selected items (multiple/tags mode). */\n  maxCount?: number;\n  /** Dropdown placement. */\n  placement?: `${BSelectPlacement}`;\n  /** Content shown when no options match. Set to null to hide. */\n  notFoundContent?: string | null;\n  /** Customize field names mapping. */\n  fieldNames?: BSelectFieldNames;\n  /** Filter options by input. true uses default, function for custom. */\n  filterOption?: boolean | ((inputValue: string, option: BSelectOption) => boolean);\n  /** Separators for tags mode to auto-tokenize. */\n  tokenSeparators?: string[];\n  /** Whether the selected option label is included in value. */\n  labelInValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when value changes. */\n  change: [value: string | number | (string | number)[], option: BSelectOption | BSelectOption[]];\n  /** Fired when an option is selected. */\n  select: [value: string | number, option: BSelectOption];\n  /** Fired when an option is deselected (multiple/tags). */\n  deselect: [value: string | number, option: BSelectOption];\n  /** Fired on focus. */\n  focus: [event: FocusEvent];\n  /** Fired on blur. */\n  blur: [event: FocusEvent];\n  /** Fired when clear button is clicked. */\n  clear: [];\n  /** Fired when dropdown opens/closes. */\n  openChange: [open: boolean];\n  /** Fired when searching (multiple/tags mode). */\n  search: [value: string];\n  /** Fired on dropdown scroll. */\n  popupScroll: [event: Event];\n  /** Fired on input keydown. */\n  inputKeyDown: [event: KeyboardEvent];\n}>();\n\nconst model = defineModel<string | number | (string | number)[] | null | undefined>();\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-select-anchor-${componentUID.value}`);\nconst listboxId = computed(() => `b-select-listbox-${componentUID.value}`);\n\nconst selectorRef = ref<HTMLElement | null>(null);\nconst searchInputRef = ref<HTMLInputElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst searchValue = ref('');\n\nconst labelField = computed(() => fieldNames?.label ?? 'label');\nconst valueField = computed(() => fieldNames?.value ?? 'value');\nconst optionsField = computed(() => fieldNames?.options ?? 'options');\n\nconst isSearchable = computed(() => {\n  if (mode === BSelectMode.Multiple || mode === BSelectMode.Tags) return true;\n  return showSearch;\n});\n\nconst getOptionLabel = (opt: BSelectOption): string => {\n  const record = opt as unknown as Record<string, unknown>;\n  const label = record[labelField.value];\n  const value = record[valueField.value];\n  return String(label ?? value ?? '');\n};\n\nconst getOptionValue = (opt: BSelectOption): string | number => {\n  const record = opt as unknown as Record<string, unknown>;\n  return record[valueField.value] as string | number;\n};\n\nconst flatOptions = computed((): BSelectOption[] => {\n  const result: BSelectOption[] = [];\n  for (const opt of options) {\n    const record = opt as unknown as Record<string, unknown>;\n    const nested = record[optionsField.value] as BSelectOption[] | undefined;\n    if (nested && Array.isArray(nested)) {\n      for (const child of nested) {\n        result.push(child);\n      }\n    } else {\n      result.push(opt);\n    }\n  }\n  return result;\n});\n\nconst filteredOptions = computed((): BSelectOption[] => {\n  if (!searchValue.value || !isSearchable.value) return flatOptions.value;\n  if (filterOption === false) return flatOptions.value;\n  if (typeof filterOption === 'function') {\n    return flatOptions.value.filter((opt) => filterOption(searchValue.value, opt));\n  }\n  const query = searchValue.value.toLowerCase();\n  return flatOptions.value.filter((opt) => {\n    return getOptionLabel(opt).toLowerCase().includes(query);\n  });\n});\n\nconst selectedValues = computed((): (string | number)[] => {\n  if (model.value == null) return [];\n  if (Array.isArray(model.value)) return model.value;\n  return [model.value];\n});\n\nconst selectedOptions = computed((): BSelectOption[] => {\n  return selectedValues.value\n    .map((v) => flatOptions.value.find((opt) => getOptionValue(opt) === v))\n    .filter(Boolean) as BSelectOption[];\n});\n\nconst displayLabel = computed((): string => {\n  if (isMultipleMode.value) return '';\n  if (selectedOptions.value.length === 0) return '';\n  return getOptionLabel(selectedOptions.value[0]);\n});\n\nconst isMultipleMode = computed(() => {\n  return mode === BSelectMode.Multiple || mode === BSelectMode.Tags;\n});\n\nconst visibleTags = computed(() => {\n  if (maxTagCount == null || maxTagCount === 'responsive') return selectedOptions.value;\n  return selectedOptions.value.slice(0, maxTagCount as number);\n});\n\nconst hiddenTagCount = computed(() => {\n  if (maxTagCount == null || maxTagCount === 'responsive') return 0;\n  return Math.max(0, selectedOptions.value.length - (maxTagCount as number));\n});\n\nconst isOptionSelected = (opt: BSelectOption): boolean => {\n  return selectedValues.value.includes(getOptionValue(opt));\n};\n\nconst openMenu = () => {\n  if (isOpen.value) return;\n  menuRef.value?.showPopover();\n};\n\nconst closeMenu = () => {\n  if (!isOpen.value) return;\n  menuRef.value?.hidePopover();\n};\n\nconst handleToggle = ({ newState }: ToggleEvent) => {\n  const nowOpen = newState === 'open';\n  isOpen.value = nowOpen;\n  emit('openChange', nowOpen);\n  if (nowOpen) {\n    if (defaultActiveFirstOption && filteredOptions.value.length > 0) {\n      activeIndex.value = 0;\n    }\n    nextTick(() => {\n      if (isSearchable.value) {\n        searchInputRef.value?.focus();\n      }\n    });\n  } else {\n    activeIndex.value = -1;\n    searchValue.value = '';\n  }\n};\n\nconst selectSingleOption = (opt: BSelectOption) => {\n  if (opt.disabled) return;\n  const val = getOptionValue(opt);\n  model.value = val;\n  emit('select', val, opt);\n  emit('change', val, opt);\n  closeMenu();\n  nextTick(() => selectorRef.value?.focus());\n};\n\nconst selectMultipleOption = (opt: BSelectOption) => {\n  if (opt.disabled) return;\n  const val = getOptionValue(opt);\n  const current = selectedValues.value.slice();\n\n  if (current.includes(val)) {\n    const next = current.filter((v) => v !== val);\n    model.value = next;\n    emit('deselect', val, opt);\n    emit(\n      'change',\n      next,\n      next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n    );\n  } else {\n    if (maxCount != null && current.length >= maxCount) return;\n    const next = [...current, val];\n    model.value = next;\n    emit('select', val, opt);\n    emit(\n      'change',\n      next,\n      next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n    );\n  }\n  searchValue.value = '';\n  nextTick(() => searchInputRef.value?.focus());\n};\n\nconst selectOption = (opt: BSelectOption) => {\n  if (isMultipleMode.value) {\n    selectMultipleOption(opt);\n  } else {\n    selectSingleOption(opt);\n  }\n};\n\nconst removeTag = (val: string | number) => {\n  const opt = flatOptions.value.find((o) => getOptionValue(o) === val);\n  const next = selectedValues.value.filter((v) => v !== val);\n  model.value = next;\n  if (opt) emit('deselect', val, opt);\n  emit(\n    'change',\n    next,\n    next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n  );\n};\n\nconst handleClear = (e: Event) => {\n  e.stopPropagation();\n  if (isMultipleMode.value) {\n    model.value = [];\n  } else {\n    model.value = undefined;\n  }\n  searchValue.value = '';\n  emit('clear');\n  emit(\n    'change',\n    isMultipleMode.value ? [] : (undefined as unknown as string),\n    [] as unknown as BSelectOption,\n  );\n};\n\nconst handleSelectorClick = () => {\n  if (disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst handleSelectorFocus = (e: FocusEvent) => {\n  emit('focus', e);\n};\n\nconst handleSelectorBlur = (e: FocusEvent) => {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  if (selectorRef.value?.contains(related)) return;\n  emit('blur', e);\n  closeMenu();\n};\n\nconst handleSearchInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  searchValue.value = target.value;\n  emit('search', target.value);\n\n  if (mode === BSelectMode.Tags && tokenSeparators) {\n    const separators = tokenSeparators;\n    for (const sep of separators) {\n      if (target.value.includes(sep)) {\n        const parts = target.value.split(\n          new RegExp(\n            `[${separators.map((s) => s.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')).join('')}]`,\n          ),\n        );\n        for (const part of parts) {\n          const trimmed = part.trim();\n          if (trimmed && !selectedValues.value.includes(trimmed)) {\n            const existing = flatOptions.value.find(\n              (o) => getOptionValue(o) === trimmed || getOptionLabel(o) === trimmed,\n            );\n            if (existing) {\n              selectMultipleOption(existing);\n            } else {\n              const current = selectedValues.value.slice();\n              const next = [...current, trimmed];\n              model.value = next;\n              emit('select', trimmed, { value: trimmed, label: trimmed });\n              emit(\n                'change',\n                next,\n                next.map(\n                  (v) =>\n                    flatOptions.value.find((o) => getOptionValue(o) === v) ?? {\n                      value: v,\n                      label: String(v),\n                    },\n                ),\n              );\n            }\n          }\n        }\n        searchValue.value = '';\n        break;\n      }\n    }\n  }\n\n  if (!isOpen.value) openMenu();\n  activeIndex.value = defaultActiveFirstOption ? 0 : -1;\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  emit('inputKeyDown', e);\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const opts = filteredOptions.value;\n      const nextIdx = activeIndex.value + 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (nextIdx + i) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const opts = filteredOptions.value;\n      const prevIdx = activeIndex.value - 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (((prevIdx - i) % opts.length) + opts.length) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'Enter': {\n      e.preventDefault();\n      if (isOpen.value && activeIndex.value >= 0) {\n        const opt = filteredOptions.value[activeIndex.value];\n        if (opt && !opt.disabled) {\n          selectOption(opt);\n        }\n      } else if (!isOpen.value) {\n        openMenu();\n      }\n      break;\n    }\n    case ' ': {\n      if (!isSearchable.value || !searchValue.value) {\n        e.preventDefault();\n        if (!isOpen.value) {\n          openMenu();\n        } else if (activeIndex.value >= 0) {\n          const opt = filteredOptions.value[activeIndex.value];\n          if (opt && !opt.disabled) {\n            selectOption(opt);\n          }\n        }\n      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      closeMenu();\n      selectorRef.value?.focus();\n      break;\n    }\n    case 'Backspace': {\n      if (isMultipleMode.value && !searchValue.value && selectedValues.value.length > 0) {\n        const lastVal = selectedValues.value[selectedValues.value.length - 1];\n        removeTag(lastVal);\n      }\n      break;\n    }\n    case 'Tab': {\n      if (isOpen.value) {\n        closeMenu();\n      }\n      break;\n    }\n  }\n};\n\nconst handlePopupScroll = (e: Event) => {\n  emit('popupScroll', e);\n};\n\nconst scrollActiveIntoView = () => {\n  nextTick(() => {\n    const active = menuRef.value?.querySelector('[data-active=\"true\"]');\n    active?.scrollIntoView({ block: 'nearest' });\n  });\n};\n\nwatch(activeIndex, scrollActiveIntoView);\n\nwatch(\n  () => open,\n  (val) => {\n    if (val === true && !isOpen.value) openMenu();\n    else if (val === false && isOpen.value) closeMenu();\n  },\n);\n\nconst showClear = computed(() => {\n  if (!allowClear || disabled) return false;\n  if (isMultipleMode.value) return selectedValues.value.length > 0;\n  return model.value != null && model.value !== '';\n});\n\ndefineExpose({\n  focus: () => selectorRef.value?.focus(),\n  blur: () => selectorRef.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    class=\"b-select b:relative b:inline-flex b:w-full\"\n    :class=\"{ 'b-select--disabled': disabled }\"\n  >\n    <!-- Selector trigger -->\n    <div\n      ref=\"selectorRef\"\n      v-bind=\"attrs\"\n      class=\"b-select__selector b:box-border b:flex b:w-full b:cursor-pointer b:items-center b:gap-1 b:transition-all b:outline-none\"\n      :class=\"[\n        {\n          'b:min-h-6 b:px-2 b:text-sm': size === BCommonSize.Small,\n          'b:min-h-8 b:px-3 b:text-sm': size === BCommonSize.Medium,\n          'b:min-h-10 b:px-3 b:text-base': size === BCommonSize.Large,\n        },\n        {\n          'b:rounded-lg b:border-1 b:border-[var(--b-select-border-color)] b:bg-[var(--b-select-selector-bg)] b:hover:not-disabled:border-[var(--b-select-hover-border-color)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]':\n            variant === BSelectVariant.Outlined,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-[var(--b-select-filled-bg)] b:hover:not-disabled:bg-[var(--b-select-filled-bg)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:bg-[var(--b-select-selector-bg)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]':\n            variant === BSelectVariant.Filled,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-transparent':\n            variant === BSelectVariant.Borderless,\n        },\n        {\n          'b:border-red-500! b:hover:not-disabled:border-red-400! b:focus:not-disabled:border-red-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]!':\n            status === BSelectStatus.Error,\n          'b:border-yellow-500! b:hover:not-disabled:border-yellow-400! b:focus:not-disabled:border-yellow-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,215,5,0.1)]!':\n            status === BSelectStatus.Warning,\n        },\n        {\n          'b:cursor-not-allowed b:opacity-40': disabled,\n        },\n        {\n          'b-select__selector--open': isOpen,\n        },\n      ]\"\n      :tabindex=\"disabled ? -1 : 0\"\n      role=\"combobox\"\n      :aria-expanded=\"isOpen\"\n      :aria-controls=\"isOpen ? listboxId : undefined\"\n      :aria-activedescendant=\"isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\"\n      aria-haspopup=\"listbox\"\n      :aria-label=\"placeholder ?? 'Select'\"\n      :aria-disabled=\"disabled ?? false\"\n      @click=\"handleSelectorClick\"\n      @focus=\"handleSelectorFocus\"\n      @blur=\"handleSelectorBlur\"\n      @keydown=\"handleKeyDown\"\n    >\n      <!-- Multiple mode: tags -->\n      <template v-if=\"isMultipleMode\">\n        <span\n          v-for=\"opt in visibleTags\"\n          :key=\"getOptionValue(opt)\"\n          class=\"b-select__tag b:inline-flex b:max-w-full b:items-center b:gap-0.5 b:rounded b:border-1 b:border-[var(--b-select-multiple-item-border-color)] b:bg-[var(--b-select-multiple-item-bg)] b:leading-none\"\n          :class=\"[\n            {\n              'b:h-4 b:px-1 b:text-xs': size === BCommonSize.Small,\n              'b:h-6 b:px-1.5 b:text-xs': size === BCommonSize.Medium,\n              'b:h-8 b:px-2 b:text-sm': size === BCommonSize.Large,\n            },\n          ]\"\n        >\n          <span class=\"b:truncate\">{{ getOptionLabel(opt) }}</span>\n          <button\n            type=\"button\"\n            class=\"b-select__tag-close b:ml-0.5 b:flex b:h-3.5 b:w-3.5 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-transparent b:text-[10px] b:text-zinc-400 b:hover:bg-zinc-200 b:hover:text-zinc-600\"\n            :aria-label=\"`Remove ${getOptionLabel(opt)}`\"\n            tabindex=\"-1\"\n            @click.stop=\"removeTag(getOptionValue(opt))\"\n            @mousedown.prevent\n          >\n            <svg aria-hidden=\"true\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"><path d=\"M1 1l6 6M7 1L1 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n          </button>\n        </span>\n        <span\n          v-if=\"hiddenTagCount > 0\"\n          class=\"b-select__tag b-select__tag--count b:relative b:z-1 b:inline-flex b:shrink-0 b:items-center b:rounded b:bg-[var(--b-select-multiple-count-bg)] b:px-1.5 b:text-xs b:leading-none b:text-[var(--b-select-multiple-count-color)]\"\n          :class=\"[\n            {\n              'b:h-4': size === BCommonSize.Small,\n              'b:h-6': size === BCommonSize.Medium,\n              'b:h-8': size === BCommonSize.Large,\n            },\n          ]\"\n        >\n          +{{ hiddenTagCount }}\n        </span>\n        <input\n          ref=\"searchInputRef\"\n          class=\"b-select__search b:min-w-4 b:flex-1 b:border-none b:bg-transparent b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]\"\n          :value=\"searchValue\"\n          :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n          :disabled=\"disabled\"\n          :aria-label=\"placeholder ?? 'Search options'\"\n          autocomplete=\"off\"\n          @input=\"handleSearchInput\"\n          @keydown=\"handleKeyDown\"\n          @focus=\"handleSelectorFocus\"\n          @blur=\"handleSelectorBlur\"\n        />\n      </template>\n\n      <!-- Single mode -->\n      <template v-else>\n        <span\n          v-if=\"displayLabel && !searchValue\"\n          class=\"b-select__value b:flex-1 b:truncate b:text-[color:var(--b-select-color)]\"\n        >\n          <slot name=\"selectedLabel\" :option=\"selectedOptions[0]\">\n            {{ displayLabel }}\n          </slot>\n        </span>\n        <span\n          v-else-if=\"!searchValue && !displayLabel\"\n          class=\"b-select__placeholder b:flex-1 b:truncate b:text-[var(--b-select-placeholder-color)]\"\n        >\n          {{ placeholder }}\n        </span>\n        <input\n          v-if=\"isSearchable\"\n          ref=\"searchInputRef\"\n          class=\"b-select__search b:absolute b:inset-0 b:w-full b:border-none b:bg-transparent b:px-3 b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]\"\n          :class=\"{ 'b:opacity-0': !isOpen }\"\n          :value=\"searchValue\"\n          :disabled=\"disabled\"\n          :aria-label=\"placeholder ?? 'Search options'\"\n          autocomplete=\"off\"\n          tabindex=\"-1\"\n          @input=\"handleSearchInput\"\n          @keydown=\"handleKeyDown\"\n        />\n      </template>\n\n      <!-- Clear button -->\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"b-select__clear b:z-1 b:flex b:h-4 b:w-4 b:shrink-0 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-[var(--b-select-clear-bg)] b:text-xs b:text-zinc-400 b:hover:text-zinc-600\"\n        aria-label=\"Clear selection\"\n        tabindex=\"-1\"\n        @click=\"handleClear\"\n        @mousedown.prevent\n      >\n        <svg aria-hidden=\"true\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"><path d=\"M1 1l6 6M7 1L1 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n      </button>\n\n      <!-- Suffix arrow -->\n      <span\n        class=\"b-select__arrow b:ml-auto b:flex b:shrink-0 b:items-center b:text-zinc-400 b:transition-transform b:duration-200\"\n        :class=\"{ 'b:rotate-180': isOpen }\"\n        aria-hidden=\"true\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n          <path\n            d=\"M2.5 4.5L6 8L9.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n\n      <!-- Loading spinner -->\n      <span\n        v-if=\"loading\"\n        class=\"b-select__loading b:ml-1 b:flex b:shrink-0 b:animate-spin b:items-center b:text-zinc-400\"\n        aria-hidden=\"true\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n          <circle\n            cx=\"7\"\n            cy=\"7\"\n            r=\"5.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-dasharray=\"24\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </span>\n    </div>\n\n    <!-- Dropdown popup -->\n    <div\n      ref=\"menuRef\"\n      :id=\"listboxId\"\n      class=\"b-select__dropdown b:overflow-auto b:rounded-lg b:bg-[var(--b-select-selector-bg)] b:shadow-lg\"\n      :class=\"{ 'b:w-[anchor-size(width)]': popupMatchSelectWidth === true }\"\n      :style=\"[\n        typeof popupMatchSelectWidth === 'number'\n          ? { width: `${popupMatchSelectWidth}px` }\n          : undefined,\n        { maxHeight: `${listHeight}px` },\n      ]\"\n      popover\n      role=\"listbox\"\n      :aria-multiselectable=\"isMultipleMode || undefined\"\n      :aria-label=\"placeholder ?? 'Options'\"\n      @toggle=\"handleToggle\"\n      @scroll=\"handlePopupScroll\"\n    >\n      <!-- Options -->\n      <div v-if=\"filteredOptions.length > 0\" class=\"b:p-1\">\n        <template v-for=\"(opt, idx) in filteredOptions\" :key=\"getOptionValue(opt)\">\n          <div\n            :id=\"`${listboxId}-option-${idx}`\"\n            class=\"b-select__option b:cursor-pointer b:rounded-md b:px-[var(--b-select-option-padding-x)] b:py-[var(--b-select-option-padding-y)] b:text-[length:var(--b-select-option-font-size)] b:leading-[var(--b-select-option-line-height)] b:transition-colors\"\n            :class=\"[\n              {\n                'b:bg-[var(--b-select-option-active-bg)]': idx === activeIndex && !opt.disabled,\n                'b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)] b:text-[color:var(--b-select-option-selected-color)]':\n                  isOptionSelected(opt) && idx !== activeIndex,\n                'b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)]':\n                  isOptionSelected(opt) && idx === activeIndex,\n                'b:cursor-not-allowed b:opacity-40': opt.disabled,\n                'b:hover:bg-[var(--b-select-option-active-bg)]':\n                  !opt.disabled && idx !== activeIndex && !isOptionSelected(opt),\n              },\n            ]\"\n            :data-active=\"idx === activeIndex\"\n            :aria-selected=\"isOptionSelected(opt)\"\n            :aria-disabled=\"opt.disabled ?? false\"\n            role=\"option\"\n            @mousedown.prevent=\"selectOption(opt)\"\n            @mouseenter=\"activeIndex = idx\"\n          >\n            <slot name=\"option\" :option=\"opt\" :index=\"idx\" :selected=\"isOptionSelected(opt)\">\n              <span class=\"b:flex b:items-center b:justify-between\">\n                <span>{{ getOptionLabel(opt) }}</span>\n                <svg\n                  v-if=\"isMultipleMode && isOptionSelected(opt)\"\n                  class=\"b:ml-2 b:h-3 b:w-3 b:text-[var(--b-select-active-border-color)]\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M2 6L5 9L10 3\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </slot>\n          </div>\n        </template>\n      </div>\n\n      <!-- Not found content -->\n      <div\n        v-else-if=\"notFoundContent !== null\"\n        class=\"b-select__empty b:px-4 b:py-6 b:text-center b:text-sm b:text-zinc-400\"\n      >\n        {{ notFoundContent }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-select {\n  --b-select-active-border-color: #1677ff;\n  --b-select-active-outline-color: rgba(5, 145, 255, 0.1);\n  --b-select-hover-border-color: #4096ff;\n  --b-select-border-color: #d9d9d9;\n  --b-select-color: rgba(0, 0, 0, 0.88);\n  --b-select-placeholder-color: #606870;\n  --b-select-clear-bg: #ffffff;\n  --b-select-selector-bg: #ffffff;\n  --b-select-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-select-multiple-item-bg: rgba(0, 0, 0, 0.06);\n  --b-select-multiple-count-bg: #f0f0f0;\n  --b-select-multiple-count-color: #1f1f1f;\n  --b-select-multiple-item-border-color: transparent;\n  --b-select-multiple-item-border-color-disabled: transparent;\n  --b-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-select-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-select-option-font-size: 14px;\n  --b-select-option-height: 32px;\n  --b-select-option-line-height: 1.5714;\n  --b-select-option-padding-x: 12px;\n  --b-select-option-padding-y: 5px;\n  --b-select-option-selected-bg: #e6f4ff;\n  --b-select-option-selected-color: rgba(0, 0, 0, 0.88);\n  --b-select-option-selected-font-weight: 600;\n  --b-select-z-index-popup: 1050;\n}\n\n@media (prefers-color-scheme: dark) {\n  .b-select {\n    --b-select-active-border-color: #1668dc;\n    --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-select-hover-border-color: #3c89e8;\n    --b-select-border-color: #424242;\n    --b-select-color: rgba(255, 255, 255, 0.88);\n    --b-select-placeholder-color: #9ca3af;\n    --b-select-clear-bg: #1f1f1f;\n    --b-select-selector-bg: #1f1f1f;\n    --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n    --b-select-multiple-count-bg: #353535;\n    --b-select-multiple-count-color: #e0e0e0;\n    --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-select-option-selected-bg: #111a2c;\n    --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n[data-prefers-color='light'] .b-select {\n  --b-select-active-border-color: #1677ff;\n  --b-select-active-outline-color: rgba(5, 145, 255, 0.1);\n  --b-select-hover-border-color: #4096ff;\n  --b-select-border-color: #d9d9d9;\n  --b-select-color: rgba(0, 0, 0, 0.88);\n  --b-select-placeholder-color: #606870;\n  --b-select-clear-bg: #ffffff;\n  --b-select-selector-bg: #ffffff;\n  --b-select-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-select-multiple-item-bg: rgba(0, 0, 0, 0.06);\n  --b-select-multiple-count-bg: #f0f0f0;\n  --b-select-multiple-count-color: #1f1f1f;\n  --b-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-select-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-select-option-selected-bg: #e6f4ff;\n  --b-select-option-selected-color: rgba(0, 0, 0, 0.88);\n}\n\n[data-prefers-color='dark'] .b-select {\n  --b-select-active-border-color: #1668dc;\n  --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n  --b-select-hover-border-color: #3c89e8;\n  --b-select-border-color: #424242;\n  --b-select-color: rgba(255, 255, 255, 0.88);\n  --b-select-placeholder-color: #9ca3af;\n  --b-select-clear-bg: #1f1f1f;\n  --b-select-selector-bg: #1f1f1f;\n  --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n  --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n  --b-select-option-selected-bg: #111a2c;\n  --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-select {\n    --b-select-active-border-color: #1668dc;\n    --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-select-hover-border-color: #3c89e8;\n    --b-select-border-color: #424242;\n    --b-select-color: rgba(255, 255, 255, 0.88);\n    --b-select-placeholder-color: #9ca3af;\n    --b-select-clear-bg: #1f1f1f;\n    --b-select-selector-bg: #1f1f1f;\n    --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n    --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-select-option-selected-bg: #111a2c;\n    --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n.b-select__selector {\n  anchor-name: v-bind('anchorName');\n}\n\n.b-select__dropdown {\n  position: absolute;\n  margin-top: 4px;\n  z-index: var(--b-select-z-index-popup);\n\n  position-anchor: v-bind('anchorName');\n  position-try-fallbacks: --b-select-top;\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n\n  transition:\n    display 0.2s,\n    opacity 0.2s;\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n}\n\n@position-try --b-select-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-select__dropdown {\n    transition: none;\n  }\n\n  .b-select__arrow {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system183.js

@@ -1,111 +1,38 @@
-import { BCommonSize as e, BIconSize as t, BStepsDirection as n, BStepsLabelPlacement as r, BStepsStatus as i, BStepsType as a } from "./design-system3.js";
-import o from "./design-system27.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderList as v, toDisplayString as y, toRefs as b, unref as x, useModel as S } from "vue";
-//#region src/components/BSteps/BSteps.vue?vue&type=script&setup=true&lang.ts
-var C = ["data-status"], w = [
-	"role",
-	"tabindex",
-	"aria-disabled",
-	"aria-current",
-	"onClick",
-	"onKeydown"
-], T = { class: "b:flex b:items-center b:gap-x-2" }, E = {
-	key: 0,
-	"aria-hidden": "true",
-	class: "b-steps__tail"
-}, D = /* @__PURE__ */ p({
-	__name: "BSteps",
-	props: /* @__PURE__ */ m({
-		items: { default: () => [] },
-		status: { default: i.Process },
-		direction: { default: n.Horizontal },
-		size: { default: e.Medium },
-		labelPlacement: { default: r.Horizontal },
-		type: { default: a.Default }
-	}, {
-		modelValue: { default: 0 },
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ m(["change"], ["update:modelValue"]),
-	setup(p, { emit: m }) {
-		let { items: D, status: O, direction: k, size: A, labelPlacement: j, type: M } = b(p), N = S(p, "modelValue"), P = m, F = c(() => A.value === e.Small ? e.Small : e.Medium), I = c(() => F.value === e.Small ? t.Small : t.Medium), L = c(() => ({
-			"--b-steps-icon-size": F.value === e.Small ? "1.5rem" : "2rem",
-			"--b-steps-gap": F.value === e.Small ? "0.5rem" : "0.75rem"
-		})), R = c(() => F.value === e.Small ? "b:text-sm" : "b:text-base"), z = c(() => F.value === e.Small ? "b:text-xs" : "b:text-sm"), B = c(() => M.value === a.Navigation), V = (e, t) => e.status ? e.status : t === N.value ? O.value || i.Process : t < N.value ? i.Finish : i.Wait, H = (e) => {
-			switch (e) {
-				case i.Finish:
-				case i.Process: return "var(--b-color-primary)";
-				case i.Error: return "var(--b-color-failure)";
-				case i.Wait:
-				default: return "var(--b-color-zinc-200)";
-			}
-		}, U = (e, t) => {
-			!B.value || e.disabled || (N.value = t, P("change", t));
-		}, W = (e, t, n) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), U(t, n));
-		}, G = (e) => ({
-			"b:border-secondary b:bg-white b:text-secondary": e === i.Wait,
-			"b:border-primary b:bg-primary b:text-white": e === i.Process,
-			"b:border-primary b:bg-white b:text-primary": e === i.Finish,
-			"b:border-failure b:bg-white b:text-failure": e === i.Error
-		}), K = (e) => ({
-			"b:text-black-base": e === i.Process || e === i.Finish,
-			"b:text-failure": e === i.Error,
-			"b:text-black/65": e === i.Wait
-		}), q = (e) => ({
-			"b:text-black/65": e !== i.Error,
-			"b:text-failure": e === i.Error
-		});
-		return (t, c) => (_(), d("ol", {
-			class: h(["b-steps", [{
-				"b-steps--horizontal": x(k) === x(n).Horizontal,
-				"b-steps--vertical": x(k) === x(n).Vertical,
-				"b-steps--label-vertical": x(k) === x(n).Horizontal && x(j) === x(r).Vertical,
-				"b-steps--navigation": x(M) === x(a).Navigation,
-				"b-steps--inline": x(M) === x(a).Inline
-			}]]),
-			style: g(L.value)
-		}, [(_(!0), d(s, null, v(x(D), (t, a) => (_(), d("li", {
-			key: `${t.title}-${a}`,
-			class: h(["b-steps__item", [{ "b:opacity-50": t.disabled }, { "b-steps__item--clickable": B.value && !t.disabled }]]),
-			"data-status": V(t, a),
-			style: g({ "--b-steps-tail-color": H(V(t, a)) })
-		}, [f("div", {
-			class: "b-steps__item-inner",
-			role: B.value && !t.disabled ? "button" : void 0,
-			tabindex: B.value && !t.disabled ? 0 : void 0,
-			"aria-disabled": t.disabled ? "true" : void 0,
-			"aria-current": a === N.value ? "step" : void 0,
-			onClick: (e) => U(t, a),
-			onKeydown: (e) => W(e, t, a)
-		}, [f("div", { class: h(["b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border", [G(V(t, a)), {
-			"b:h-6 b:w-6": F.value === x(e).Small,
-			"b:h-8 b:w-8": F.value === x(e).Medium
-		}]]) }, [t.icon ? (_(), l(o, {
-			key: 0,
-			icon: t.icon,
-			size: I.value
-		}, null, 8, ["icon", "size"])) : V(t, a) === x(i).Finish ? (_(), l(o, {
-			key: 1,
-			icon: "check",
-			size: I.value
-		}, null, 8, ["size"])) : V(t, a) === x(i).Error ? (_(), l(o, {
-			key: 2,
-			icon: "xmark",
-			size: I.value
-		}, null, 8, ["size"])) : (_(), d("span", {
-			key: 3,
-			class: h(R.value)
-		}, y(a + 1), 3))], 2), f("div", { class: h(["b-steps__content b:flex b:flex-col b:gap-y-1", [{ "b:items-center b:text-center": x(k) === x(n).Horizontal && x(j) === x(r).Vertical }]]) }, [f("div", T, [f("span", { class: h(["b:font-medium", [R.value, K(V(t, a))]]) }, y(t.title), 3), t.subTitle ? (_(), d("span", {
-			key: 0,
-			class: h(["b:text-xs b:text-black/65", K(V(t, a))])
-		}, y(t.subTitle), 3)) : u("", !0)]), t.description ? (_(), d("p", {
-			key: 0,
-			class: h(["b:leading-snug", [z.value, q(V(t, a))]])
-		}, y(t.description), 3)) : u("", !0)], 2)], 40, w), x(k) === x(n).Horizontal && a < x(D).length - 1 ? (_(), d("span", E)) : u("", !0)], 14, C))), 128))], 6));
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a } from "vue";
+//#region src/components/BSkeleton/BSkeletonAvatar.vue?vue&type=script&setup=true&lang.ts
+var o = /* @__PURE__ */ n({
+	__name: "BSkeletonAvatar",
+	props: {
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		shape: { default: "circle" },
+		size: { default: "default" }
+	},
+	setup(n) {
+		let o = e(() => {
+			if (typeof n.size == "number") return {
+				width: `${n.size}px`,
+				height: `${n.size}px`,
+				lineHeight: `${n.size}px`
+			};
+		}), s = e(() => [
+			"b-skeleton-element",
+			"b-skeleton-avatar",
+			`b-skeleton-avatar--${n.shape}`,
+			typeof n.size == "string" ? `b-skeleton-avatar--${n.size}` : null,
+			{ "b-skeleton-element--active": n.active }
+		]);
+		return (e, n) => (a(), t("span", {
+			class: r(s.value),
+			style: i(o.value),
+			role: "presentation",
+			"aria-hidden": "true"
+		}, null, 6));
 	}
 });
 //#endregion
-export { D as default };
+export { o as default };
 
 //# sourceMappingURL=design-system183.js.map

package/dist/design-system183.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system183.js","names":[],"sources":["../src/components/BSteps/BSteps.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle } from \"vue\"\n\nconst _hoisted_1 = [\"data-status\"]\nconst _hoisted_2 = [\"role\", \"tabindex\", \"aria-disabled\", \"aria-current\", \"onClick\", \"onKeydown\"]\nconst _hoisted_3 = { class: \"b:flex b:items-center b:gap-x-2\" }\nconst _hoisted_4 = {\n  key: 0,\n  \"aria-hidden\": \"true\",\n  class: \"b-steps__tail\"\n}\n\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport {\n  BCommonSize,\n  BIconSize,\n  BStepsDirection,\n  BStepsLabelPlacement,\n  BStepsStatus,\n  BStepsType,\n  type BStepItem,\n} from '@/types.ts';\nimport { computed, toRefs } from 'vue';\n\nexport interface BStepsProps {\n  /**\n   * The step items to render.\n   */\n  items?: BStepItem[];\n  /**\n   * Status applied to the current step if not overridden by the item.\n   */\n  status?: `${BStepsStatus}`;\n  /**\n   * Layout direction.\n   */\n  direction?: `${BStepsDirection}`;\n  /**\n   * Size of the step icons and text.\n   */\n  size?: `${BCommonSize}`;\n  /**\n   * Placement of labels for horizontal steps.\n   */\n  labelPlacement?: `${BStepsLabelPlacement}`;\n  /**\n   * Step type styling.\n   */\n  type?: `${BStepsType}`;\n}\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSteps',\n  props: /*@__PURE__*/_mergeModels({\n    items: { default: () => [] },\n    status: { default: BStepsStatus.Process },\n    direction: { default: BStepsDirection.Horizontal },\n    size: { default: BCommonSize.Medium },\n    labelPlacement: { default: BStepsLabelPlacement.Horizontal },\n    type: { default: BStepsType.Default }\n  }, {\n    \"modelValue\": { default: 0 },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\"], [\"update:modelValue\"]),\n  setup(__props: any, { emit: __emit }) {\n\nconst props = __props;\nconst { items, status, direction, size, labelPlacement, type } = toRefs(props);\nconst model = _useModel<number>(__props, \"modelValue\");\n\nconst emit = __emit;\n\nconst normalizedSize = computed(() =>\n  size.value === BCommonSize.Small ? BCommonSize.Small : BCommonSize.Medium,\n);\nconst iconSize = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? BIconSize.Small : BIconSize.Medium,\n);\n\nconst rootStyle = computed(() => ({\n  '--b-steps-icon-size': normalizedSize.value === BCommonSize.Small ? '1.5rem' : '2rem',\n  '--b-steps-gap': normalizedSize.value === BCommonSize.Small ? '0.5rem' : '0.75rem',\n}));\n\nconst titleSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-sm' : 'b:text-base',\n);\nconst descriptionSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-xs' : 'b:text-sm',\n);\n\nconst isClickable = computed(() => type.value === BStepsType.Navigation);\n\nconst getStepStatus = (item: BStepItem, index: number) => {\n  if (item.status) {\n    return item.status;\n  }\n  if (index === model.value) {\n    return status.value || BStepsStatus.Process;\n  }\n  if (index < model.value) {\n    return BStepsStatus.Finish;\n  }\n  return BStepsStatus.Wait;\n};\n\nconst getTailColor = (status: `${BStepsStatus}`) => {\n  switch (status) {\n    case BStepsStatus.Finish:\n    case BStepsStatus.Process:\n      return 'var(--b-color-primary)';\n    case BStepsStatus.Error:\n      return 'var(--b-color-failure)';\n    case BStepsStatus.Wait:\n    default:\n      return 'var(--b-color-zinc-200)';\n  }\n};\n\nconst onStepClick = (item: BStepItem, index: number) => {\n  if (!isClickable.value || item.disabled) {\n    return;\n  }\n  model.value = index;\n  emit('change', index);\n};\n\nconst onStepKeydown = (event: KeyboardEvent, item: BStepItem, index: number) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onStepClick(item, index);\n  }\n};\n\nconst iconClass = (status: `${BStepsStatus}`) => ({\n  'b:border-secondary b:bg-white b:text-secondary': status === BStepsStatus.Wait,\n  'b:border-primary b:bg-primary b:text-white': status === BStepsStatus.Process,\n  'b:border-primary b:bg-white b:text-primary': status === BStepsStatus.Finish,\n  'b:border-failure b:bg-white b:text-failure': status === BStepsStatus.Error,\n});\nconst titleClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black-base': status === BStepsStatus.Process || status === BStepsStatus.Finish,\n  'b:text-failure': status === BStepsStatus.Error,\n  'b:text-black/65': status === BStepsStatus.Wait,\n});\nconst descriptionClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black/65': status !== BStepsStatus.Error,\n  'b:text-failure': status === BStepsStatus.Error,\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"ol\", {\n    class: _normalizeClass([\"b-steps\", [\n      {\n        'b-steps--horizontal': _unref(direction) === _unref(BStepsDirection).Horizontal,\n        'b-steps--vertical': _unref(direction) === _unref(BStepsDirection).Vertical,\n        'b-steps--label-vertical':\n          _unref(direction) === _unref(BStepsDirection).Horizontal &&\n          _unref(labelPlacement) === _unref(BStepsLabelPlacement).Vertical,\n        'b-steps--navigation': _unref(type) === _unref(BStepsType).Navigation,\n        'b-steps--inline': _unref(type) === _unref(BStepsType).Inline,\n      },\n    ]]),\n    style: _normalizeStyle(rootStyle.value)\n  }, [\n    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_unref(items), (item, index) => {\n      return (_openBlock(), _createElementBlock(\"li\", {\n        key: `${item.title}-${index}`,\n        class: _normalizeClass([\"b-steps__item\", [\n        { 'b:opacity-50': item.disabled },\n        { 'b-steps__item--clickable': isClickable.value && !item.disabled },\n      ]]),\n        \"data-status\": getStepStatus(item, index),\n        style: _normalizeStyle({ '--b-steps-tail-color': getTailColor(getStepStatus(item, index)) })\n      }, [\n        _createElementVNode(\"div\", {\n          class: \"b-steps__item-inner\",\n          role: isClickable.value && !item.disabled ? 'button' : undefined,\n          tabindex: isClickable.value && !item.disabled ? 0 : undefined,\n          \"aria-disabled\": item.disabled ? 'true' : undefined,\n          \"aria-current\": index === model.value ? 'step' : undefined,\n          onClick: ($event: any) => (onStepClick(item, index)),\n          onKeydown: ($event: any) => (onStepKeydown($event, item, index))\n        }, [\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border\", [\n            iconClass(getStepStatus(item, index)),\n            {\n              'b:h-6 b:w-6': normalizedSize.value === _unref(BCommonSize).Small,\n              'b:h-8 b:w-8': normalizedSize.value === _unref(BCommonSize).Medium,\n            },\n          ]])\n          }, [\n            (item.icon)\n              ? (_openBlock(), _createBlock(BIcon, {\n                  key: 0,\n                  icon: item.icon,\n                  size: iconSize.value\n                }, null, 8, [\"icon\", \"size\"]))\n              : (getStepStatus(item, index) === _unref(BStepsStatus).Finish)\n                ? (_openBlock(), _createBlock(BIcon, {\n                    key: 1,\n                    icon: \"check\",\n                    size: iconSize.value\n                  }, null, 8, [\"size\"]))\n                : (getStepStatus(item, index) === _unref(BStepsStatus).Error)\n                  ? (_openBlock(), _createBlock(BIcon, {\n                      key: 2,\n                      icon: \"xmark\",\n                      size: iconSize.value\n                    }, null, 8, [\"size\"]))\n                  : (_openBlock(), _createElementBlock(\"span\", {\n                      key: 3,\n                      class: _normalizeClass(titleSizeClass.value)\n                    }, _toDisplayString(index + 1), 3))\n          ], 2),\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-steps__content b:flex b:flex-col b:gap-y-1\", [\n            {\n              'b:items-center b:text-center':\n                _unref(direction) === _unref(BStepsDirection).Horizontal &&\n                _unref(labelPlacement) === _unref(BStepsLabelPlacement).Vertical,\n            },\n          ]])\n          }, [\n            _createElementVNode(\"div\", _hoisted_3, [\n              _createElementVNode(\"span\", {\n                class: _normalizeClass([\"b:font-medium\", [titleSizeClass.value, titleClass(getStepStatus(item, index))]])\n              }, _toDisplayString(item.title), 3),\n              (item.subTitle)\n                ? (_openBlock(), _createElementBlock(\"span\", {\n                    key: 0,\n                    class: _normalizeClass([\"b:text-xs b:text-black/65\", titleClass(getStepStatus(item, index))])\n                  }, _toDisplayString(item.subTitle), 3))\n                : _createCommentVNode(\"\", true)\n            ]),\n            (item.description)\n              ? (_openBlock(), _createElementBlock(\"p\", {\n                  key: 0,\n                  class: _normalizeClass([\"b:leading-snug\", [descriptionSizeClass.value, descriptionClass(getStepStatus(item, index))]])\n                }, _toDisplayString(item.description), 3))\n              : _createCommentVNode(\"\", true)\n          ], 2)\n        ], 40, _hoisted_2),\n        (_unref(direction) === _unref(BStepsDirection).Horizontal && index < _unref(items).length - 1)\n          ? (_openBlock(), _createElementBlock(\"span\", _hoisted_4))\n          : _createCommentVNode(\"\", true)\n      ], 14, _hoisted_1))\n    }), 128))\n  ], 6))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system183.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonAvatarShape, BSkeletonAvatarSize } from './types';\n\nconst {\n  active = false,\n  shape = 'circle',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Avatar shape. @default 'circle' */\n  shape?: BSkeletonAvatarShape;\n  /** Avatar size: preset string or pixel number. @default 'default' */\n  size?: BSkeletonAvatarSize;\n}>();\n\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (typeof size === 'number') {\n    return { width: `${size}px`, height: `${size}px`, lineHeight: `${size}px` };\n  }\n  return undefined;\n});\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-avatar',\n  `b-skeleton-avatar--${shape}`,\n  typeof size === 'string' ? `b-skeleton-avatar--${size}` : null,\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" :style=\"sizeStyle\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-avatar {\n  display: inline-block;\n  vertical-align: top;\n  width: var(--b-skeleton-avatar-size-default);\n  height: var(--b-skeleton-avatar-size-default);\n  background: var(--b-skeleton-gradient-from-color);\n}\n\n.b-skeleton-avatar--small {\n  width: var(--b-skeleton-avatar-size-small);\n  height: var(--b-skeleton-avatar-size-small);\n}\n\n.b-skeleton-avatar--large {\n  width: var(--b-skeleton-avatar-size-large);\n  height: var(--b-skeleton-avatar-size-large);\n}\n\n.b-skeleton-avatar--circle {\n  border-radius: 50%;\n}\n\n.b-skeleton-avatar--square {\n  border-radius: var(--b-skeleton-border-radius);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAiBA,IAAM,IAAY,QAAmD;AACnE,OAAI,OAAO,EAAA,QAAS,SAClB,QAAO;IAAE,OAAO,GAAG,EAAA,KAAK;IAAK,QAAQ,GAAG,EAAA,KAAK;IAAK,YAAY,GAAG,EAAA,KAAK;IAAK;IAG7E,EAEI,IAAU,QAAe;GAC7B;GACA;GACA,sBAAsB,EAAA;GACtB,OAAO,EAAA,QAAS,WAAW,sBAAsB,EAAA,SAAS;GAC1D,EAAE,8BAA8B,EAAA,QAAQ;GACzC,CAAC;yBAIA,EAAmF,QAAA;GAA5E,OAAK,EAAE,EAAA,MAAO;GAAG,OAAK,EAAE,EAAA,MAAS;GAAE,MAAK;GAAe,eAAY"}

package/dist/design-system185.js

@@ -1,9 +1,8 @@
-import e from "./design-system14.js";
-import t from "./design-system183.js";
+import e from "./design-system183.js";
 /* empty css                 */
-//#region src/components/BSteps/BSteps.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-75d0dd09"]]);
+//#region src/components/BSkeleton/BSkeletonAvatar.vue
+var t = e;
 //#endregion
-export { n as default };
+export { t as default };
 
 //# sourceMappingURL=design-system185.js.map

package/dist/design-system185.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system185.js","names":[],"sources":["../src/components/BSteps/BSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport {\n  BCommonSize,\n  BIconSize,\n  BStepsDirection,\n  BStepsLabelPlacement,\n  BStepsStatus,\n  BStepsType,\n  type BStepItem,\n} from '@/types.ts';\nimport { computed, toRefs } from 'vue';\n\nexport interface BStepsProps {\n  /**\n   * The step items to render.\n   */\n  items?: BStepItem[];\n  /**\n   * Status applied to the current step if not overridden by the item.\n   */\n  status?: `${BStepsStatus}`;\n  /**\n   * Layout direction.\n   */\n  direction?: `${BStepsDirection}`;\n  /**\n   * Size of the step icons and text.\n   */\n  size?: `${BCommonSize}`;\n  /**\n   * Placement of labels for horizontal steps.\n   */\n  labelPlacement?: `${BStepsLabelPlacement}`;\n  /**\n   * Step type styling.\n   */\n  type?: `${BStepsType}`;\n}\n\nconst props = withDefaults(defineProps<BStepsProps>(), {\n  items: () => [],\n  status: BStepsStatus.Process,\n  direction: BStepsDirection.Horizontal,\n  size: BCommonSize.Medium,\n  labelPlacement: BStepsLabelPlacement.Horizontal,\n  type: BStepsType.Default,\n});\nconst { items, status, direction, size, labelPlacement, type } = toRefs(props);\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the current step changes via user interaction.\n   */\n  change: [value: number];\n}>();\n\nconst normalizedSize = computed(() =>\n  size.value === BCommonSize.Small ? BCommonSize.Small : BCommonSize.Medium,\n);\nconst iconSize = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? BIconSize.Small : BIconSize.Medium,\n);\n\nconst rootStyle = computed(() => ({\n  '--b-steps-icon-size': normalizedSize.value === BCommonSize.Small ? '1.5rem' : '2rem',\n  '--b-steps-gap': normalizedSize.value === BCommonSize.Small ? '0.5rem' : '0.75rem',\n}));\n\nconst titleSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-sm' : 'b:text-base',\n);\nconst descriptionSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-xs' : 'b:text-sm',\n);\n\nconst isClickable = computed(() => type.value === BStepsType.Navigation);\n\nconst getStepStatus = (item: BStepItem, index: number) => {\n  if (item.status) {\n    return item.status;\n  }\n  if (index === model.value) {\n    return status.value || BStepsStatus.Process;\n  }\n  if (index < model.value) {\n    return BStepsStatus.Finish;\n  }\n  return BStepsStatus.Wait;\n};\n\nconst getTailColor = (status: `${BStepsStatus}`) => {\n  switch (status) {\n    case BStepsStatus.Finish:\n    case BStepsStatus.Process:\n      return 'var(--b-color-primary)';\n    case BStepsStatus.Error:\n      return 'var(--b-color-failure)';\n    case BStepsStatus.Wait:\n    default:\n      return 'var(--b-color-zinc-200)';\n  }\n};\n\nconst onStepClick = (item: BStepItem, index: number) => {\n  if (!isClickable.value || item.disabled) {\n    return;\n  }\n  model.value = index;\n  emit('change', index);\n};\n\nconst onStepKeydown = (event: KeyboardEvent, item: BStepItem, index: number) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onStepClick(item, index);\n  }\n};\n\nconst iconClass = (status: `${BStepsStatus}`) => ({\n  'b:border-secondary b:bg-white b:text-secondary': status === BStepsStatus.Wait,\n  'b:border-primary b:bg-primary b:text-white': status === BStepsStatus.Process,\n  'b:border-primary b:bg-white b:text-primary': status === BStepsStatus.Finish,\n  'b:border-failure b:bg-white b:text-failure': status === BStepsStatus.Error,\n});\nconst titleClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black-base': status === BStepsStatus.Process || status === BStepsStatus.Finish,\n  'b:text-failure': status === BStepsStatus.Error,\n  'b:text-black/65': status === BStepsStatus.Wait,\n});\nconst descriptionClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black/65': status !== BStepsStatus.Error,\n  'b:text-failure': status === BStepsStatus.Error,\n});\n</script>\n\n<template>\n  <ol\n    class=\"b-steps\"\n    :class=\"[\n      {\n        'b-steps--horizontal': direction === BStepsDirection.Horizontal,\n        'b-steps--vertical': direction === BStepsDirection.Vertical,\n        'b-steps--label-vertical':\n          direction === BStepsDirection.Horizontal &&\n          labelPlacement === BStepsLabelPlacement.Vertical,\n        'b-steps--navigation': type === BStepsType.Navigation,\n        'b-steps--inline': type === BStepsType.Inline,\n      },\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <li\n      v-for=\"(item, index) in items\"\n      :key=\"`${item.title}-${index}`\"\n      class=\"b-steps__item\"\n      :class=\"[\n        { 'b:opacity-50': item.disabled },\n        { 'b-steps__item--clickable': isClickable && !item.disabled },\n      ]\"\n      :data-status=\"getStepStatus(item, index)\"\n      :style=\"{ '--b-steps-tail-color': getTailColor(getStepStatus(item, index)) }\"\n    >\n      <div\n        class=\"b-steps__item-inner\"\n        :role=\"isClickable && !item.disabled ? 'button' : undefined\"\n        :tabindex=\"isClickable && !item.disabled ? 0 : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-current=\"index === model ? 'step' : undefined\"\n        @click=\"onStepClick(item, index)\"\n        @keydown=\"onStepKeydown($event, item, index)\"\n      >\n        <div\n          class=\"b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border\"\n          :class=\"[\n            iconClass(getStepStatus(item, index)),\n            {\n              'b:h-6 b:w-6': normalizedSize === BCommonSize.Small,\n              'b:h-8 b:w-8': normalizedSize === BCommonSize.Medium,\n            },\n          ]\"\n        >\n          <template v-if=\"item.icon\">\n            <BIcon :icon=\"item.icon\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Finish\">\n            <BIcon icon=\"check\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Error\">\n            <BIcon icon=\"xmark\" :size=\"iconSize\" />\n          </template>\n          <template v-else>\n            <span :class=\"titleSizeClass\">{{ index + 1 }}</span>\n          </template>\n        </div>\n\n        <div\n          class=\"b-steps__content b:flex b:flex-col b:gap-y-1\"\n          :class=\"[\n            {\n              'b:items-center b:text-center':\n                direction === BStepsDirection.Horizontal &&\n                labelPlacement === BStepsLabelPlacement.Vertical,\n            },\n          ]\"\n        >\n          <div class=\"b:flex b:items-center b:gap-x-2\">\n            <span\n              class=\"b:font-medium\"\n              :class=\"[titleSizeClass, titleClass(getStepStatus(item, index))]\"\n            >\n              {{ item.title }}\n            </span>\n            <span\n              v-if=\"item.subTitle\"\n              class=\"b:text-xs b:text-black/65\"\n              :class=\"titleClass(getStepStatus(item, index))\"\n            >\n              {{ item.subTitle }}\n            </span>\n          </div>\n          <p\n            v-if=\"item.description\"\n            class=\"b:leading-snug\"\n            :class=\"[descriptionSizeClass, descriptionClass(getStepStatus(item, index))]\"\n          >\n            {{ item.description }}\n          </p>\n        </div>\n      </div>\n      <span\n        v-if=\"direction === BStepsDirection.Horizontal && index < items.length - 1\"\n        aria-hidden=\"true\"\n        class=\"b-steps__tail\"\n      />\n    </li>\n  </ol>\n</template>\n\n<style scoped>\n.b-steps {\n  display: flex;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical {\n  flex-direction: column;\n}\n\n.b-steps__item {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n.b-steps__item-inner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.b-steps__icon {\n  flex-shrink: 0;\n}\n\n.b-steps__content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.b-steps--label-vertical .b-steps__item-inner {\n  flex-direction: column;\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__item-inner {\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__content {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--inline .b-steps__content p {\n  display: none;\n}\n\n.b-steps__item--clickable .b-steps__item-inner {\n  cursor: pointer;\n}\n\n.b-steps--horizontal .b-steps__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item {\n  padding-bottom: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item::after {\n  content: '';\n  position: absolute;\n  top: calc(var(--b-steps-icon-size) + var(--b-steps-gap));\n  left: calc(var(--b-steps-icon-size) / 2);\n  bottom: 0;\n  width: 1px;\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--vertical .b-steps__item:last-child::after {\n  display: none;\n}\n\n.b-steps__tail {\n  flex: 1 1 0;\n  min-width: 1.5rem;\n  height: 1px;\n  margin-top: calc(var(--b-steps-icon-size) / 2);\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--navigation .b-steps__item--clickable .b-steps__content {\n  transition: color 0.2s ease;\n}\n\n.b-steps--navigation .b-steps__item--clickable:hover .b-steps__content {\n  color: var(--b-color-primary);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system185.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonAvatarShape, BSkeletonAvatarSize } from './types';\n\nconst {\n  active = false,\n  shape = 'circle',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Avatar shape. @default 'circle' */\n  shape?: BSkeletonAvatarShape;\n  /** Avatar size: preset string or pixel number. @default 'default' */\n  size?: BSkeletonAvatarSize;\n}>();\n\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (typeof size === 'number') {\n    return { width: `${size}px`, height: `${size}px`, lineHeight: `${size}px` };\n  }\n  return undefined;\n});\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-avatar',\n  `b-skeleton-avatar--${shape}`,\n  typeof size === 'string' ? `b-skeleton-avatar--${size}` : null,\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" :style=\"sizeStyle\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-avatar {\n  display: inline-block;\n  vertical-align: top;\n  width: var(--b-skeleton-avatar-size-default);\n  height: var(--b-skeleton-avatar-size-default);\n  background: var(--b-skeleton-gradient-from-color);\n}\n\n.b-skeleton-avatar--small {\n  width: var(--b-skeleton-avatar-size-small);\n  height: var(--b-skeleton-avatar-size-small);\n}\n\n.b-skeleton-avatar--large {\n  width: var(--b-skeleton-avatar-size-large);\n  height: var(--b-skeleton-avatar-size-large);\n}\n\n.b-skeleton-avatar--circle {\n  border-radius: 50%;\n}\n\n.b-skeleton-avatar--square {\n  border-radius: var(--b-skeleton-border-radius);\n}\n</style>\n"],"mappings":""}