@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system180.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system180.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, renderList as _renderList, Fragment as _Fragment, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, renderSlot as _renderSlot } from \"vue\"\n\nconst _hoisted_1 = {\n  key: 0,\n  class: \"b-skeleton__header\"\n}\nconst _hoisted_2 = { class: \"b-skeleton__content\" }\nconst _hoisted_3 = {\n  key: 1,\n  class: \"b-skeleton__paragraph\",\n  \"aria-hidden\": \"true\"\n}\n\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSkeleton',\n  props: {\n    active: { type: Boolean, default: false },\n    avatar: { type: [Boolean, Object], default: false },\n    loading: { type: Boolean, default: true },\n    paragraph: { type: [Boolean, Object], default: true },\n    round: { type: Boolean, default: false },\n    title: { type: [Boolean, Object], default: true }\n  },\n  setup(__props: any) {\n\n\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\n\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => __props.avatar !== false && __props.avatar != null);\nconst showTitle = computed(() => __props.title !== false && __props.title != null);\nconst showParagraph = computed(() => __props.paragraph !== false && __props.paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof __props.avatar === 'object' && __props.avatar !== null ? __props.avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof __props.title === 'object' && __props.title !== null ? __props.title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof __props.paragraph === 'object' && __props.paragraph !== null ? __props.paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': __props.active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': __props.round,\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (__props.loading)\n    ? (_openBlock(), _createElementBlock(\"div\", {\n        key: 0,\n        class: _normalizeClass(rootClasses.value),\n        role: \"status\",\n        \"aria-live\": \"polite\",\n        \"aria-label\": \"Loading\"\n      }, [\n        (showAvatar.value)\n          ? (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n              _createVNode(BSkeletonAvatar, {\n                active: __props.active || avatarConfig.value.active,\n                shape: avatarConfig.value.shape,\n                size: avatarConfig.value.size\n              }, null, 8, [\"active\", \"shape\", \"size\"])\n            ]))\n          : _createCommentVNode(\"\", true),\n        _createElementVNode(\"div\", _hoisted_2, [\n          (showTitle.value)\n            ? (_openBlock(), _createElementBlock(\"h3\", {\n                key: 0,\n                class: \"b-skeleton__title\",\n                style: _normalizeStyle(titleWidth.value ? { width: titleWidth.value } : undefined),\n                \"aria-hidden\": \"true\"\n              }, null, 4))\n            : _createCommentVNode(\"\", true),\n          (showParagraph.value)\n            ? (_openBlock(), _createElementBlock(\"ul\", _hoisted_3, [\n                (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(paragraphRowWidths.value, (w, i) => {\n                  return (_openBlock(), _createElementBlock(\"li\", {\n                    key: i,\n                    class: \"b-skeleton__paragraph-row\",\n                    style: _normalizeStyle(w ? { width: w } : undefined)\n                  }, null, 4))\n                }), 128))\n              ]))\n            : _createCommentVNode(\"\", true)\n        ])\n      ], 2))\n    : _renderSlot(_ctx.$slots, \"default\", { key: 1 })\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,IAAM,IAAQ,IAAU,EAyElB,IAAO,GAuBP,IAAQ,GAAqE,GAAA,aAAE,EAE/E,EAAE,oBAAiB,GAAgB,EACnC,KAAa,QAAe,qBAAqB,EAAa,QAAQ,EACtE,IAAY,QAAe,oBAAoB,EAAa,QAAQ,EAEpE,IAAc,EAAwB,KAAK,EAC3C,IAAiB,EAA6B,KAAK,EACnD,IAAU,EAAwB,KAAK,EACvC,IAAS,EAAI,GAAM,EACnB,IAAc,EAAI,GAAG,EACrB,IAAc,EAAI,GAAG,EAErB,KAAa,QAAe,EAAA,YAAY,SAAS,QAAQ,EACzD,IAAa,QAAe,EAAA,YAAY,SAAS,QAAQ,EACzD,KAAe,QAAe,EAAA,YAAY,WAAW,UAAU,EAE/D,IAAe,QACf,EAAA,SAAS,EAAY,YAAY,EAAA,SAAS,EAAY,OAAa,KAChE,EAAA,WACP,EAEI,KAAkB,MAA+B;GACrD,IAAM,IAAS,GACT,IAAQ,EAAO,GAAW,QAC1B,IAAQ,EAAO,EAAW;AAChC,UAAO,OAAO,KAAS,KAAS,GAAG;KAG/B,KAAkB,MACP,EACD,EAAW,QAGrB,IAAc,QAAgC;GAClD,IAAM,IAA0B,EAAE;AAClC,QAAK,IAAM,KAAO,EAAA,SAAS;IAEzB,IAAM,IADS,EACO,GAAa;AACnC,QAAI,KAAU,MAAM,QAAQ,EAAO,CACjC,MAAK,IAAM,KAAS,EAClB,GAAO,KAAK,EAAM;QAGpB,GAAO,KAAK,EAAI;;AAGpB,UAAO;IACP,EAEI,IAAkB,QAAgC;AAEtD,OADI,CAAC,EAAY,SAAS,CAAC,EAAa,SACpC,EAAA,iBAAiB,GAAO,QAAO,EAAY;AAC/C,OAAI,OAAO,EAAA,gBAAiB,WAC1B,QAAO,EAAY,MAAM,QAAQ,MAAQ,EAAA,aAAa,EAAY,OAAO,EAAI,CAAC;GAEhF,IAAM,IAAQ,EAAY,MAAM,aAAa;AAC7C,UAAO,EAAY,MAAM,QAAQ,MACxB,EAAe,EAAI,CAAC,aAAa,CAAC,SAAS,EAAM,CACxD;IACF,EAEI,IAAiB,QACjB,EAAM,SAAS,OAAa,EAAE,GAC9B,MAAM,QAAQ,EAAM,MAAM,GAAS,EAAM,QACtC,CAAC,EAAM,MAAM,CACpB,EAEI,IAAkB,QACf,EAAe,MACnB,KAAK,MAAM,EAAY,MAAM,MAAM,MAAQ,EAAe,EAAI,KAAK,EAAE,CAAA,CACrE,OAAO,QAAQ,CAClB,EAEI,IAAe,QACf,EAAe,SACf,EAAgB,MAAM,WAAW,IAAU,KACxC,EAAe,EAAgB,MAAM,GAAG,CAC/C,EAEI,IAAiB,QACd,EAAA,SAAS,EAAY,YAAY,EAAA,SAAS,EAAY,KAC7D,EAEI,KAAc,QACd,EAAA,eAAe,QAAQ,EAAA,gBAAgB,eAAqB,EAAgB,QACzE,EAAgB,MAAM,MAAM,GAAG,EAAA,YAAsB,CAC5D,EAEI,IAAiB,QACjB,EAAA,eAAe,QAAQ,EAAA,gBAAgB,eAAqB,IACzD,KAAK,IAAI,GAAG,EAAgB,MAAM,SAAU,EAAA,YAAuB,CAC1E,EAEI,KAAoB,MACjB,EAAe,MAAM,SAAS,EAAe,EAAI,CAAC,EAGrD,UAAiB;AACjB,KAAO,SACX,EAAQ,OAAO,aAAa;KAGxB,UAAkB;AACjB,KAAO,SACZ,EAAQ,OAAO,aAAa;KAGxB,MAAgB,EAAE,kBAA4B;GAClD,IAAM,IAAU,MAAa;AAG7B,GAFA,EAAO,QAAQ,GACf,EAAK,cAAc,EAAQ,EACvB,KACE,EAAA,4BAA4B,EAAgB,MAAM,SAAS,MAC7D,EAAY,QAAQ,IAEtB,QAAe;AACb,IAAI,EAAa,SACf,EAAe,OAAO,OAAO;KAE/B,KAEF,EAAY,QAAQ,IACpB,EAAY,QAAQ;KAIlB,MAAsB,MAAuB;AACjD,OAAI,EAAI,SAAU;GAClB,IAAM,IAAM,EAAe,EAAI;AAK/B,GAJA,EAAM,QAAQ,GACd,EAAK,UAAU,GAAK,EAAI,EACxB,EAAK,UAAU,GAAK,EAAI,EACxB,GAAW,EACX,QAAe,EAAY,OAAO,OAAO,CAAC;KAGtC,KAAwB,MAAuB;AACnD,OAAI,EAAI,SAAU;GAClB,IAAM,IAAM,EAAe,EAAI,EACzB,IAAU,EAAe,MAAM,OAAO;AAE5C,OAAI,EAAQ,SAAS,EAAI,EAAE;IACzB,IAAM,IAAO,EAAQ,QAAQ,MAAM,MAAM,EAAI;AAG7C,IAFA,EAAM,QAAQ,GACd,EAAK,YAAY,GAAK,EAAI,EAC1B,EACE,UACA,GACA,EAAK,KAAK,MAAM,EAAY,MAAM,MAAM,MAAM,EAAe,EAAE,KAAK,EAAE,CAAE,CAAC,OAAO,QAAQ,CACzF;UACI;AACL,QAAI,EAAA,YAAY,QAAQ,EAAQ,UAAU,EAAA,SAAU;IACpD,IAAM,IAAO,CAAC,GAAG,GAAS,EAAI;AAG9B,IAFA,EAAM,QAAQ,GACd,EAAK,UAAU,GAAK,EAAI,EACxB,EACE,UACA,GACA,EAAK,KAAK,MAAM,EAAY,MAAM,MAAM,MAAM,EAAe,EAAE,KAAK,EAAE,CAAE,CAAC,OAAO,QAAQ,CACzF;;AAGH,GADA,EAAY,QAAQ,IACpB,QAAe,EAAe,OAAO,OAAO,CAAC;KAGzC,KAAgB,MAAuB;AAC3C,GAAI,EAAe,QACjB,EAAqB,EAAI,GAEzB,GAAmB,EAAI;KAIrB,KAAa,MAAyB;GAC1C,IAAM,IAAM,EAAY,MAAM,MAAM,MAAM,EAAe,EAAE,KAAK,EAAI,EAC9D,IAAO,EAAe,MAAM,QAAQ,MAAM,MAAM,EAAI;AAG1D,GAFA,EAAM,QAAQ,GACV,KAAK,EAAK,YAAY,GAAK,EAAI,EACnC,EACE,UACA,GACA,EAAK,KAAK,MAAM,EAAY,MAAM,MAAM,MAAM,EAAe,EAAE,KAAK,EAAE,CAAE,CAAC,OAAO,QAAQ,CACzF;KAGG,MAAe,MAAa;AAShC,GARA,EAAE,iBAAiB,EACf,EAAe,QACjB,EAAM,QAAQ,EAAE,GAEhB,EAAM,QAAQ,KAAA,GAEhB,EAAY,QAAQ,IACpB,EAAK,QAAQ,EACb,EACE,UACA,EAAe,QAAQ,EAAE,GAAI,KAAA,GAC7B,EAAE,CACH;KAGG,WAA4B;AAC5B,KAAA,aACA,EAAO,QACT,GAAW,GAEX,GAAU;KAIR,KAAuB,MAAkB;AAC7C,KAAK,SAAS,EAAE;KAGZ,KAAsB,MAAkB;GAC5C,IAAM,IAAU,EAAE;AACd,KAAQ,OAAO,SAAS,EAAQ,IAChC,EAAY,OAAO,SAAS,EAAQ,KACxC,EAAK,QAAQ,EAAE,EACf,GAAW;KAGP,MAAqB,MAAa;GACtC,IAAM,IAAS,EAAE;AAIjB,OAHA,EAAY,QAAQ,EAAO,OAC3B,EAAK,UAAU,EAAO,MAAM,EAExB,EAAA,SAAS,EAAY,QAAQ,EAAA,iBAAiB;IAChD,IAAM,IAAa,EAAA;AACnB,SAAK,IAAM,KAAO,EAChB,KAAI,EAAO,MAAM,SAAS,EAAI,EAAE;KAC9B,IAAM,IAAQ,EAAO,MAAM,MACrB,OACF,IAAI,EAAW,KAAK,MAAM,EAAE,QAAQ,uBAAuB,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,GAC9E,CACF;AACD,UAAK,IAAM,KAAQ,GAAO;MACxB,IAAM,IAAU,EAAK,MAAM;AAC3B,UAAI,KAAW,CAAC,EAAe,MAAM,SAAS,EAAQ,EAAE;OACtD,IAAM,IAAW,EAAY,MAAM,MAChC,MAAM,EAAe,EAAE,KAAK,KAAW,EAAe,EAAE,KAAK,EAC/D;AACD,WAAI,EACF,GAAqB,EAAS;YACzB;QAEL,IAAM,IAAO,CAAC,GADE,EAAe,MAAM,OAAO,EAClB,EAAQ;AAGlC,QAFA,EAAM,QAAQ,GACd,EAAK,UAAU,GAAS;SAAE,OAAO;SAAS,OAAO;SAAS,CAAC,EAC3D,EACE,UACA,GACA,EAAK,KACF,MACC,EAAY,MAAM,MAAM,MAAM,EAAe,EAAE,KAAK,EAAE,IAAI;SACxD,OAAO;SACP,OAAO,OAAO,EAAE;SACjB,CACJ,CACF;;;;AAIP,OAAY,QAAQ;AACpB;;;AAMN,GADK,EAAO,SAAO,GAAU,EAC7B,EAAY,QAAQ,EAAA,2BAA2B,IAAI;KAG/C,KAAiB,MAAqB;AAG1C,WAFA,EAAK,gBAAgB,EAAE,EAEf,EAAE,KAAV;IACE,KAAK,aAAa;AAEhB,SADA,EAAE,gBAAgB,EACd,CAAC,EAAO,OAAO;AACjB,SAAU;AACV;;KAEF,IAAM,IAAO,EAAgB,OACvB,IAAU,EAAY,QAAQ;AACpC,UAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,KAAK;MACpC,IAAM,KAAO,IAAU,KAAK,EAAK;AACjC,UAAI,CAAC,EAAK,GAAK,UAAU;AACvB,SAAY,QAAQ;AACpB;;;AAGJ;;IAEF,KAAK,WAAW;AAEd,SADA,EAAE,gBAAgB,EACd,CAAC,EAAO,OAAO;AACjB,SAAU;AACV;;KAEF,IAAM,IAAO,EAAgB,OACvB,IAAU,EAAY,QAAQ;AACpC,UAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,KAAK;MACpC,IAAM,MAAS,IAAU,KAAK,EAAK,SAAU,EAAK,UAAU,EAAK;AACjE,UAAI,CAAC,EAAK,GAAK,UAAU;AACvB,SAAY,QAAQ;AACpB;;;AAGJ;;IAEF,KAAK;AAEH,SADA,EAAE,gBAAgB,EACd,EAAO,SAAS,EAAY,SAAS,GAAG;MAC1C,IAAM,IAAM,EAAgB,MAAM,EAAY;AAC9C,MAAI,KAAO,CAAC,EAAI,YACd,EAAa,EAAI;YAET,EAAO,SACjB,GAAU;AAEZ;IAEF,KAAK;AACH,SAAI,CAAC,EAAa,SAAS,CAAC,EAAY,OAEtC;UADA,EAAE,gBAAgB,EACd,CAAC,EAAO,MACV,IAAU;eACD,EAAY,SAAS,GAAG;OACjC,IAAM,IAAM,EAAgB,MAAM,EAAY;AAC9C,OAAI,KAAO,CAAC,EAAI,YACd,EAAa,EAAI;;;AAIvB;IAEF,KAAK;AAGH,KAFA,EAAE,gBAAgB,EAClB,GAAW,EACX,EAAY,OAAO,OAAO;AAC1B;IAEF,KAAK;AACH,SAAI,EAAe,SAAS,CAAC,EAAY,SAAS,EAAe,MAAM,SAAS,GAAG;MACjF,IAAM,IAAU,EAAe,MAAM,EAAe,MAAM,SAAS;AACnE,QAAU,EAAQ;;AAEpB;IAEF,KAAK;AACH,KAAI,EAAO,SACT,GAAW;AAEb;;KAKA,MAAqB,MAAa;AACtC,KAAK,eAAe,EAAE;;AAYxB,EAFA,EAAM,SAP6B;AACjC,WAAe;AAEb,KADe,EAAQ,OAAO,cAAc,yBAAuB,GAC3D,eAAe,EAAE,OAAO,WAAW,CAAC;KAC5C;IAGoC,EAExC,QACQ,EAAA,OACL,MAAQ;AACP,GAAI,MAAQ,MAAQ,CAAC,EAAO,QAAO,GAAU,GACpC,MAAQ,MAAS,EAAO,SAAO,GAAW;IAEtD;EAED,IAAM,KAAY,QACZ,CAAC,EAAA,cAAc,EAAA,WAAiB,KAChC,EAAe,QAAc,EAAe,MAAM,SAAS,IACxD,EAAM,SAAS,QAAQ,EAAM,UAAU,GAC9C;SAEF,EAAa;GACX,aAAa,EAAY,OAAO,OAAO;GACvC,YAAY,EAAY,OAAO,MAAM;GACtC,CAAC,kBAIA,EAoQM,OAAA,EAnQJ,OAAK,EAAA,CAAC,8CAA4C,EAAA,sBAClB,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,CAGxC,EAiLM,OAjLN,GAiLM;YAhLA;GAAJ,KAAI;KACI,EAAA,EAAK,EAAA;GACb,OAAK,CAAC,2HAAyH;;mCACnE,EAAA,SAAS,EAAA,EAAW,CAAC;mCAA+C,EAAA,SAAS,EAAA,EAAW,CAAC;sCAAmD,EAAA,SAAS,EAAA,EAAW,CAAC;;;2TAAwW,EAAA,YAAY,EAAA,EAAc,CAAC;+UAA0W,EAAA,YAAY,EAAA,EAAc,CAAC;sEAA+F,EAAA,YAAY,EAAA,EAAc,CAAC;;;iKAAmN,EAAA,WAAW,EAAA,EAAa,CAAC;0KAAkM,EAAA,WAAW,EAAA,EAAa,CAAC;;2CAA6E,EAAA,UAAA;kCAAqE,EAAA,OAAA;;GA2BvrD,UAAU,EAAA,WAAQ,KAAA;GACnB,MAAK;GACJ,iBAAe,EAAA;GACf,iBAAe,EAAA,QAAS,EAAA,QAAY,KAAA;GACpC,yBAAuB,EAAA,SAAU,EAAA,SAAW,IAAA,GAAW,EAAA,MAAS,UAAW,EAAA,UAAgB,KAAA;GAC5F,iBAAc;GACb,cAAY,EAAA,eAAW;GACvB,iBAAe,EAAA,YAAQ;GACvB,SAAO;GACP,SAAO;GACP,QAAM;GACN,WAAS;;GAGM,EAAA,SAAA,GAAA,EAAhB,EAmDW,GAAA,EAAA,KAAA,GAAA,EAAA;YAlDT,EAuBO,GAAA,MAAA,EAtBS,GAAA,QAAP,YADT,EAuBO,QAAA;KArBJ,KAAK,EAAe,EAAG;KACxB,OAAK,EAAA,CAAC,uMAAqM,CAAA;gCAC3I,EAAA,SAAS,EAAA,EAAW,CAAC;kCAAiD,EAAA,SAAS,EAAA,EAAW,CAAC;gCAAgD,EAAA,SAAS,EAAA,EAAW,CAAC;;QAQhO,EAAyD,QAAzD,IAAyD,EAA7B,EAAe,EAAG,CAAA,EAAA,EAAA,EAC9C,EASS,UAAA;KARP,MAAK;KACL,OAAM;KACL,cAAU,UAAY,EAAe,EAAG;KACzC,UAAS;KACR,SAAK,GAAA,MAAO,EAAU,EAAe,EAAG,CAAA,EAAA,CAAA,OAAA,CAAA;KACxC,aAAS,AAAA,EAAA,OAAA,QAAV,IAAkB,CAAA,UAAA,CAAA;qBAElB,EAA6K,OAAA;KAAxK,eAAY;KAAO,OAAM;KAAI,QAAO;KAAI,SAAQ;KAAU,MAAK;QAAO,EAA4F,QAAA;KAAtF,GAAE;KAAmB,QAAO;KAAe,gBAAa;KAAM,kBAAe;;IAI1J,EAAA,QAAc,KAAA,GAAA,EADtB,EAYO,QAAA;;KAVL,OAAK,EAAA,CAAC,kOAAgO,CAAA;eACvL,EAAA,SAAS,EAAA,EAAW,CAAC;eAA8B,EAAA,SAAS,EAAA,EAAW,CAAC;eAA+B,EAAA,SAAS,EAAA,EAAW,CAAC;;OAO5K,OACE,EAAG,EAAA,MAAc,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAEpB,EAYE,SAAA;cAXI;KAAJ,KAAI;KACJ,OAAM;KACL,OAAO,EAAA;KACP,aAAa,EAAA,MAAe,WAAM,IAAS,EAAA,cAAc,KAAA;KACzD,UAAU,EAAA;KACV,cAAY,EAAA,eAAW;KACxB,cAAa;KACZ,SAAO;KACP,WAAS;KACT,SAAO;KACP,QAAM;;mBAKX,EA4BW,GAAA,EAAA,KAAA,GAAA,EAAA,CA1BD,EAAA,SAAY,CAAK,EAAA,SAAA,GAAA,EADzB,EAOO,QAPP,IAOO,CAHL,EAEO,EAAA,QAAA,iBAAA,EAFqB,QAAQ,EAAA,MAAe,IAAA,QAE5C,CAAA,GAAA,EADF,EAAA,MAAY,EAAA,EAAA,CAAA,EAAA,GAAA,CAAA,CAAA,IAAA,CAIL,EAAA,SAAW,CAAK,EAAA,SAAA,GAAA,EAD9B,EAKO,QALP,IAKO,EADF,EAAA,YAAW,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAGR,EAAA,SAAA,GAAA,EADR,EAYE,SAAA;;aAVI;IAAJ,KAAI;IACJ,OAAK,EAAA,CAAC,wKAAsK,EAAA,eAAA,CAClJ,EAAA,OAAM,CAAA,CAAA;IAC/B,OAAO,EAAA;IACP,UAAU,EAAA;IACV,cAAY,EAAA,eAAW;IACxB,cAAa;IACb,UAAS;IACR,SAAO;IACP,WAAS;;GAMN,GAAA,SAAA,GAAA,EADR,EAUS,UAAA;;IARP,MAAK;IACL,OAAM;IACN,cAAW;IACX,UAAS;IACR,SAAO;IACP,aAAS,AAAA,EAAA,OAAA,QAAV,IAAkB,CAAA,UAAA,CAAA;oBAElB,EAA6K,OAAA;IAAxK,eAAY;IAAO,OAAM;IAAI,QAAO;IAAI,SAAQ;IAAU,MAAK;OAAO,EAA4F,QAAA;IAAtF,GAAE;IAAmB,QAAO;IAAe,gBAAa;IAAM,kBAAe;;GAIhK,EAcO,QAAA;IAbL,OAAK,EAAA,CAAC,oHAAkH,EAAA,gBAC9F,EAAA,OAAM,CAAA,CAAA;IAChC,eAAY;oBAEZ,EAQM,OAAA;IARD,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;OACnD,EAME,QAAA;IALA,GAAE;IACF,QAAO;IACP,gBAAa;IACb,kBAAe;IACf,mBAAgB;;GAOd,EAAA,WAAA,GAAA,EADR,EAgBO,QAhBP,IAgBO,CAAA,GAAA,AAAA,EAAA,OAAA,CAXL,EAUM,OAAA;IAVD,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;OACnD,EAQE,UAAA;IAPA,IAAG;IACH,IAAG;IACH,GAAE;IACF,QAAO;IACP,gBAAa;IACb,oBAAiB;IACjB,kBAAe;;cAOvB,EA0EM,OAAA;YAzEA;GAAJ,KAAI;GACH,IAAI,EAAA;GACL,OAAK,EAAA,CAAC,kGAAgG,EAAA,4BAChE,EAAA,0BAAqB,IAAA,CAAA,CAAA;GAC1D,OAAK,GAAA,CAAA,OAAmB,EAAA,yBAAqB,WAAA,EAAA,OAAA,GAAsC,EAAA,sBAAqB,KAAA,GAAmB,KAAA,GAAA,EAAA,WAAA,GAAmC,EAAA,WAAU,KAAA,CAAA,CAAA;GAMzK,SAAA;GACA,MAAK;GACJ,wBAAsB,EAAA,SAAkB,KAAA;GACxC,cAAY,EAAA,eAAW;GACvB,UAAQ;GACR,UAAQ;MAGE,EAAA,MAAgB,SAAM,KAAA,GAAA,EAAjC,EA8CM,OA9CN,IA8CM,EAAA,EAAA,GAAA,EA7CJ,EA4CW,GAAA,MAAA,EA5CoB,EAAA,QAAb,GAAK,YACrB,EA0CM,OAAA;QA3C8C,EAAe,EAAG;GAEnE,IAAE,GAAK,EAAA,MAAS,UAAW;GAC5B,OAAK,EAAA,CAAC,sPAAoP,CAAA;+CACrK,MAAQ,EAAA,SAAW,CAAK,EAAI;2JAAmM,EAAiB,EAAG,IAAK,MAAQ,EAAA;sGAAiJ,EAAiB,EAAG,IAAK,MAAQ,EAAA;yCAAkE,EAAI;sDAA8F,EAAI,YAAY,MAAQ,EAAA,SAAW,CAAK,EAAiB,EAAG;;GAYtuB,eAAa,MAAQ,EAAA;GACrB,iBAAe,EAAiB,EAAG;GACnC,iBAAe,EAAI,YAAQ;GAC5B,MAAK;GACJ,aAAS,GAAA,MAAU,EAAa,EAAG,EAAA,CAAA,UAAA,CAAA;GACnC,eAAU,MAAE,EAAA,QAAc;MAE3B,EAmBO,EAAA,QAAA,UAAA;GAnBc,QAAQ;GAAM,OAAO;GAAM,UAAU,EAAiB,EAAG;WAmBvE,CAlBL,EAiBO,QAjBP,IAiBO,CAhBL,EAAsC,QAAA,MAAA,EAA7B,EAAe,EAAG,CAAA,EAAA,EAAA,EAEnB,EAAA,SAAkB,EAAiB,EAAG,IAAA,GAAA,EAD9C,EAcM,OAdN,IAcM,CAAA,GAAA,AAAA,EAAA,OAAA,CAPJ,EAME,QAAA;GALA,GAAE;GACF,QAAO;GACP,gBAAa;GACb,kBAAe;GACf,mBAAgB;+DAWjB,EAAA,oBAAe,OAGR,EAAA,IAAA,GAAA,IAHQ,GAAA,EAD5B,EAKM,OALN,IAKM,EADD,EAAA,gBAAe,EAAA,EAAA,EAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA"}

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/BSkeleton/BSkeleton.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/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: 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,38 +1,38 @@
-import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
-//#region src/components/BSkeleton/BSkeletonButton.vue?vue&type=script&setup=true&lang.ts
-var a = /* @__PURE__ */ n({
-	__name: "BSkeletonButton",
+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
 		},
-		block: {
-			type: Boolean,
-			default: !1
-		},
-		shape: { default: "default" },
+		shape: { default: "circle" },
 		size: { default: "default" }
 	},
 	setup(n) {
-		let a = e(() => [
+		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-button",
-			`b-skeleton-button--${n.shape}`,
-			`b-skeleton-button--${n.size}`,
-			{
-				"b-skeleton-button--block": n.block,
-				"b-skeleton-element--active": n.active
-			}
+			"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) => (i(), t("span", {
-			class: r(a.value),
+		return (e, n) => (a(), t("span", {
+			class: r(s.value),
+			style: i(o.value),
 			role: "presentation",
 			"aria-hidden": "true"
-		}, null, 2));
+		}, null, 6));
 	}
 });
 //#endregion
-export { a 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/BSkeleton/BSkeletonButton.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSkeletonButton',\n  props: {\n    active: { type: Boolean, default: false },\n    block: { type: Boolean, default: false },\n    shape: { default: 'default' },\n    size: { default: 'default' }\n  },\n  setup(__props: any) {\n\n\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${__props.shape}`,\n  `b-skeleton-button--${__props.size}`,\n  {\n    'b-skeleton-button--block': __props.block,\n    'b-skeleton-element--active': __props.active,\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"span\", {\n    class: _normalizeClass(classes.value),\n    role: \"presentation\",\n    \"aria-hidden\": \"true\"\n  }, null, 2))\n}\n}\n\n})"],"mappings":";;AAOA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,QAAQ;GAAE,MAAM;GAAS,SAAS;GAAO;EACzC,OAAO;GAAE,MAAM;GAAS,SAAS;GAAO;EACxC,OAAO,EAAE,SAAS,WAAW;EAC7B,MAAM,EAAE,SAAS,WAAW;EAC7B;CACD,MAAM,GAAc;EAItB,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,sBAAsB,EAAQ;GAC9B,sBAAsB,EAAQ;GAC9B;IACE,4BAA4B,EAAQ;IACpC,8BAA8B,EAAQ;IACvC;GACF,CAAC;AAEF,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,QAAQ;GAChD,OAAO,EAAgB,EAAQ,MAAM;GACrC,MAAM;GACN,eAAe;GAChB,EAAE,MAAM,EAAE;;CAIZ,CAAA"}
+{"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,6 +1,6 @@
 import e from "./design-system183.js";
 /* empty css                 */
-//#region src/components/BSkeleton/BSkeletonButton.vue
+//#region src/components/BSkeleton/BSkeletonAvatar.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system185.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system185.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  shape = 'default',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Button shape. @default 'default' */\n  shape?: BSkeletonButtonShape;\n  /** Button size. @default 'default' */\n  size?: BSkeletonButtonSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${shape}`,\n  `b-skeleton-button--${size}`,\n  {\n    'b-skeleton-button--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-button {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-button-min-width, 64px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-button--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 48px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 80px;\n}\n\n.b-skeleton-button--round {\n  border-radius: 100px;\n}\n\n.b-skeleton-button--circle {\n  width: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-control-height, 32px);\n  border-radius: 50%;\n}\n.b-skeleton-button--circle.b-skeleton-button--small {\n  width: var(--b-skeleton-control-height-sm, 24px);\n  min-width: var(--b-skeleton-control-height-sm, 24px);\n}\n.b-skeleton-button--circle.b-skeleton-button--large {\n  width: var(--b-skeleton-control-height-lg, 40px);\n  min-width: var(--b-skeleton-control-height-lg, 40px);\n}\n\n.b-skeleton-button--square {\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--block {\n  display: block;\n  width: 100%;\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":""}

package/dist/design-system186.js

@@ -1,31 +1,91 @@
-import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a } from "vue";
-//#region src/components/BSkeleton/BSkeletonImage.vue?vue&type=script&setup=true&lang.ts
-var o = /* @__PURE__ */ r({
-	__name: "BSkeletonImage",
-	props: { active: {
-		type: Boolean,
-		default: !1
-	} },
-	setup(r) {
-		let o = e(() => [
-			"b-skeleton-element",
-			"b-skeleton-image",
-			{ "b-skeleton-element--active": r.active }
-		]);
-		return (e, r) => (a(), t("div", {
-			class: i(o.value),
-			role: "presentation",
+import e from "./design-system185.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f } from "vue";
+//#region src/components/BSkeleton/BSkeleton.vue?vue&type=script&setup=true&lang.ts
+var p = {
+	key: 0,
+	class: "b-skeleton__header"
+}, m = { class: "b-skeleton__content" }, h = {
+	key: 1,
+	class: "b-skeleton__paragraph",
+	"aria-hidden": "true"
+}, g = /* @__PURE__ */ s({
+	__name: "BSkeleton",
+	props: {
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		avatar: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !0
+		},
+		paragraph: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		round: {
+			type: Boolean,
+			default: !1
+		},
+		title: {
+			type: [Boolean, Object],
+			default: !0
+		}
+	},
+	setup(s) {
+		let g = n(() => s.avatar !== !1 && s.avatar != null), _ = n(() => s.title !== !1 && s.title != null), v = n(() => s.paragraph !== !1 && s.paragraph != null), y = n(() => typeof s.avatar == "object" && s.avatar !== null ? s.avatar : {}), b = n(() => typeof s.title == "object" && s.title !== null ? s.title : {}), x = n(() => typeof s.paragraph == "object" && s.paragraph !== null ? s.paragraph : {}), S = n(() => T(b.value.width)), C = n(() => {
+			let e = x.value.rows;
+			return typeof e == "number" && e > 0 ? Math.floor(e) : 3;
+		}), w = n(() => {
+			let e = x.value.width, t = C.value, n = [];
+			for (let r = 0; r < t; r += 1) if (Array.isArray(e)) {
+				let t = e[r];
+				n.push(T(t) ?? "");
+			} else if (r === t - 1) {
+				let t = T(e);
+				n.push(t ?? "61%");
+			} else n.push("");
+			return n;
+		});
+		function T(e) {
+			if (e != null) return typeof e == "number" ? `${e}px` : e;
+		}
+		let E = n(() => ["b-skeleton", {
+			"b-skeleton--active": s.active,
+			"b-skeleton--with-avatar": g.value,
+			"b-skeleton--round": s.round
+		}]);
+		return (n, b) => s.loading ? (u(), i("div", {
+			key: 0,
+			class: c(E.value),
+			role: "status",
+			"aria-live": "polite",
+			"aria-label": "Loading"
+		}, [g.value ? (u(), i("div", p, [o(e, {
+			active: s.active || y.value.active,
+			shape: y.value.shape,
+			size: y.value.size
+		}, null, 8, [
+			"active",
+			"shape",
+			"size"
+		])])) : r("", !0), a("div", m, [_.value ? (u(), i("h3", {
+			key: 0,
+			class: "b-skeleton__title",
+			style: l(S.value ? { width: S.value } : void 0),
 			"aria-hidden": "true"
-		}, [...r[0] ||= [n("svg", {
-			class: "b-skeleton-image__svg",
-			viewBox: "0 0 1098 1024",
-			xmlns: "http://www.w3.org/2000/svg",
-			"aria-hidden": "true",
-			focusable: "false"
-		}, [n("path", { d: "M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z" })], -1)]], 2));
+		}, null, 4)) : r("", !0), v.value ? (u(), i("ul", h, [(u(!0), i(t, null, d(w.value, (e, t) => (u(), i("li", {
+			key: t,
+			class: "b-skeleton__paragraph-row",
+			style: l(e ? { width: e } : void 0)
+		}, null, 4))), 128))])) : r("", !0)])], 2)) : f(n.$slots, "default", { key: 1 });
 	}
 });
 //#endregion
-export { o as default };
+export { g as default };
 
 //# sourceMappingURL=design-system186.js.map

package/dist/design-system186.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system186.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nimport { computed } from 'vue';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSkeletonImage',\n  props: {\n    active: { type: Boolean, default: false }\n  },\n  setup(__props: any) {\n\n\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': __props.active },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    class: _normalizeClass(classes.value),\n    role: \"presentation\",\n    \"aria-hidden\": \"true\"\n  }, [...(_cache[0] || (_cache[0] = [\n    _createElementVNode(\"svg\", {\n      class: \"b-skeleton-image__svg\",\n      viewBox: \"0 0 1098 1024\",\n      xmlns: \"http://www.w3.org/2000/svg\",\n      \"aria-hidden\": \"true\",\n      focusable: \"false\"\n    }, [\n      _createElementVNode(\"path\", { d: \"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\" })\n    ], -1)\n  ]))], 2))\n}\n}\n\n})"],"mappings":";;AAMA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO,EACL,QAAQ;EAAE,MAAM;EAAS,SAAS;EAAO,EAC1C;CACD,MAAM,GAAc;EAItB,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,EAAE,8BAA8B,EAAQ,QAAQ;GACjD,CAAC;AAEF,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,OAAO;GAC/C,OAAO,EAAgB,EAAQ,MAAM;GACrC,MAAM;GACN,eAAe;GAChB,EAAE,CAAC,GAAI,AAAc,EAAO,OAAK,CAChC,EAAoB,OAAO;GACzB,OAAO;GACP,SAAS;GACT,OAAO;GACP,eAAe;GACf,WAAW;GACZ,EAAE,CACD,EAAoB,QAAQ,EAAE,GAAG,m3BAAm3B,CAAC,CACt5B,EAAE,GAAG,CACP,CAAG,EAAE,EAAE;;CAIT,CAAA"}
+{"version":3,"file":"design-system186.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAa,QAAe,EAAA,WAAW,MAAS,EAAA,UAAU,KAAK,EAC/D,IAAY,QAAe,EAAA,UAAU,MAAS,EAAA,SAAS,KAAK,EAC5D,IAAgB,QAAe,EAAA,cAAc,MAAS,EAAA,aAAa,KAAK,EAExE,IAAe,QACnB,OAAO,EAAA,UAAW,YAAY,EAAA,WAAW,OAAO,EAAA,SAAS,EAAE,CAC5D,EAEK,IAAc,QAClB,OAAO,EAAA,SAAU,YAAY,EAAA,UAAU,OAAO,EAAA,QAAQ,EAAE,CACzD,EAEK,IAAkB,QACtB,OAAO,EAAA,aAAc,YAAY,EAAA,cAAc,OAAO,EAAA,YAAY,EAAE,CACrE,EAEK,IAAa,QAAe,EAAe,EAAY,MAAM,MAAM,CAAC,EAEpE,IAAgB,QAAe;GACnC,IAAM,IAAI,EAAgB,MAAM;AAChC,UAAO,OAAO,KAAM,YAAY,IAAI,IAAI,KAAK,MAAM,EAAE,GAAG;IACxD,EAEI,IAAqB,QAAyB;GAClD,IAAM,IAAS,EAAgB,MAAM,OAC/B,IAAO,EAAc,OACrB,IAAgB,EAAE;AACxB,QAAK,IAAI,IAAI,GAAG,IAAI,GAAM,KAAK,EAC7B,KAAI,MAAM,QAAQ,EAAO,EAAE;IACzB,IAAM,IAAI,EAAO;AACjB,MAAI,KAAK,EAAe,EAAE,IAAI,GAAG;cACxB,MAAM,IAAO,GAAG;IAEzB,IAAM,IAAI,EAAe,EAAO;AAChC,MAAI,KAAK,KAAK,MAAM;SAEpB,GAAI,KAAK,GAAG;AAGhB,UAAO;IACP;EAEF,SAAS,EAAe,GAAoD;AACtE,YAAK,KAET,QADI,OAAO,KAAM,WAAiB,GAAG,EAAE,MAChC;;EAGT,IAAM,IAAc,QAAe,CACjC,cACA;GACE,sBAAsB,EAAA;GACtB,2BAA2B,EAAW;GACtC,qBAAqB,EAAA;GACtB,CACF,CAAC;mBAIW,EAAA,WAAA,GAAA,EAAX,EA0BM,OAAA;;GA1Be,OAAK,EAAE,EAAA,MAAW;GAAE,MAAK;GAAS,aAAU;GAAS,cAAW;MACxE,EAAA,SAAA,GAAA,EAAX,EAMM,OANN,GAMM,CALJ,EAIE,GAAA;GAHC,QAAQ,EAAA,UAAU,EAAA,MAAa;GAC/B,OAAO,EAAA,MAAa;GACpB,MAAM,EAAA,MAAa;;;;;qBAIxB,EAgBM,OAhBN,GAgBM,CAdI,EAAA,SAAA,GAAA,EADR,EAKE,MAAA;;GAHA,OAAM;GACL,OAAK,EAAE,EAAA,QAAU,EAAA,OAAY,EAAA,OAAU,GAAK,KAAA,EAAS;GACtD,eAAY;4BAGJ,EAAA,SAAA,GAAA,EAAV,EAOK,MAPL,GAOK,EAAA,EAAA,GAAA,EANH,EAKE,GAAA,MAAA,EAJiB,EAAA,QAAT,GAAG,YADb,EAKE,MAAA;GAHC,KAAK;GACN,OAAM;GACL,OAAK,EAAE,IAAC,EAAA,OAAY,GAAC,GAAK,KAAA,EAAS;gDAO1C,EAAQ,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA"}

package/dist/design-system188.js

@@ -1,6 +1,6 @@
 import e from "./design-system186.js";
 /* empty css                 */
-//#region src/components/BSkeleton/BSkeletonImage.vue
+//#region src/components/BSkeleton/BSkeleton.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system188.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system188.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <svg\n      class=\"b-skeleton-image__svg\"\n      viewBox=\"0 0 1098 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style>\n.b-skeleton-image {\n  display: inline-flex;\n  vertical-align: top;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-skeleton-image-size, 96px);\n  height: var(--b-skeleton-image-size, 96px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-image__svg {\n  width: 48px;\n  height: 48px;\n  fill: oklch(75% 0 0);\n}\n\n[data-prefers-color='dark'] .b-skeleton-image__svg {\n  fill: oklch(50% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton-image__svg {\n    fill: oklch(50% 0 0);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system188.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}