@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system12.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system12.js","names":[],"sources":["../src/components/BAutoComplete/BAutoComplete.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, useCssVars as _useCssVars, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, mergeProps as _mergeProps, createElementVNode as _createElementVNode, withModifiers as _withModifiers, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from \"vue\"\n\nconst _hoisted_1 = [\"value\", \"placeholder\", \"disabled\", \"aria-expanded\", \"aria-controls\", \"aria-activedescendant\"]\nconst _hoisted_2 = [\"id\"]\nconst _hoisted_3 = { class: \"b:m-0 b:list-none b:p-1\" }\nconst _hoisted_4 = [\"id\", \"data-active\", \"aria-selected\", \"aria-disabled\", \"onMousedown\", \"onMouseenter\"]\n\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\nimport { BAutoCompleteStatus, BAutoCompleteVariant, type BAutoCompleteOption } from './types.ts';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  ...{ inheritAttrs: false },\n  __name: 'BAutoComplete',\n  props: /*@__PURE__*/_mergeModels({\n    options: { default: () => ([]) },\n    size: { default: () => (BCommonSize.Medium) },\n    variant: { default: () => (BAutoCompleteVariant.Outlined) },\n    disabled: { type: Boolean },\n    status: {},\n    placeholder: {},\n    defaultActiveFirstOption: { type: Boolean, default: true },\n    backfill: { type: Boolean, default: false },\n    allowClear: { type: Boolean, default: false },\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean },\n    notFoundContent: {},\n    popupMatchSelectWidth: { type: [Boolean, Number], default: true },\n    filterOption: { type: [Boolean, Function], default: true }\n  }, {\n    \"modelValue\": { default: '' },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\", \"select\", \"search\", \"openChange\", \"focus\", \"blur\", \"clear\", \"inputKeyDown\", \"popupScroll\"], [\"update:modelValue\"]),\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n_useCssVars(_ctx => ({\n  \"v17a1a164\": (anchorName.value)\n}))\n\n\n\nconst attrs = useAttrs();\n\n\n\nconst emit = __emit;\n\nconst model = _useModel<string>(__props, \"modelValue\");\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-auto-complete-anchor-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst inputValue = ref(model.value ?? '');\n\nconst filteredOptions = computed(() => {\n  if (!__props.filterOption) return __props.options;\n  if (typeof __props.filterOption === 'function') {\n    return __props.options.filter((opt) => __props.filterOption(inputValue.value, opt));\n  }\n  const query = inputValue.value.toLowerCase();\n  if (!query) return __props.options;\n  return __props.options.filter((opt) => {\n    const text = (opt.label ?? opt.value).toLowerCase();\n    return text.includes(query);\n  });\n});\n\nconst showDropdown = computed(() => {\n  if (filteredOptions.value.length === 0) return false;\n  return isOpen.value;\n});\n\nconst getOptionLabel = (opt: BAutoCompleteOption) => opt.label ?? opt.value;\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 && __props.defaultActiveFirstOption && filteredOptions.value.length > 0) {\n    activeIndex.value = 0;\n  } else if (!nowOpen) {\n    activeIndex.value = -1;\n  }\n};\n\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  inputValue.value = target.value;\n  model.value = target.value;\n  emit('change', target.value);\n  emit('search', target.value);\n  activeIndex.value = __props.defaultActiveFirstOption ? 0 : -1;\n  openMenu();\n};\n\nconst selectOption = (opt: BAutoCompleteOption) => {\n  if (opt.disabled) return;\n  inputValue.value = opt.value;\n  model.value = opt.value;\n  emit('select', opt.value, opt);\n  emit('change', opt.value);\n  closeMenu();\n  inputRef.value?.focus();\n};\n\nconst handleClear = () => {\n  inputValue.value = '';\n  model.value = '';\n  emit('change', '');\n  emit('clear');\n  inputRef.value?.focus();\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  emit('focus', e);\n  openMenu();\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  emit('blur', e);\n  closeMenu();\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 nextIdx = activeIndex.value + 1;\n      const opts = filteredOptions.value;\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          if (__props.backfill) {\n            inputValue.value = opts[idx].value;\n          }\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const prevIdx = activeIndex.value - 1;\n      const opts = filteredOptions.value;\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          if (__props.backfill) {\n            inputValue.value = opts[idx].value;\n          }\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      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      closeMenu();\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(model, (val) => {\n  if (val !== inputValue.value) {\n    inputValue.value = val ?? '';\n  }\n});\n\nwatch(\n  () => filteredOptions.value,\n  (opts) => {\n    if (opts.length === 0) {\n      closeMenu();\n    }\n  },\n);\n\nconst listboxId = computed(() => `b-auto-complete-listbox-${componentUID.value}`);\n\n__expose({\n  focus: () => inputRef.value?.focus(),\n  blur: () => inputRef.value?.blur(),\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    class: _normalizeClass([\"b-auto-complete b:relative b:inline-flex b:w-full b:items-center\", { 'b-auto-complete--disabled': __props.disabled }])\n  }, [\n    _createElementVNode(\"input\", _mergeProps({\n      ref_key: \"inputRef\",\n      ref: inputRef\n    }, _unref(attrs), {\n      value: inputValue.value,\n      class: [\"b-auto-complete__input b:box-border b:w-full b:transition-all b:outline-none b:placeholder:text-zinc-300\", [\n        {\n          'b:h-6 b:px-2 b:text-sm': __props.size === _unref(BCommonSize).Small,\n          'b:h-8 b:px-3 b:text-sm': __props.size === _unref(BCommonSize).Medium,\n          'b:h-10 b:px-3 b:text-base': __props.size === _unref(BCommonSize).Large,\n        },\n        {\n          'b:rounded-lg b:border-1 b:border-[var(--b-auto-complete-border-color)] b:hover:not-disabled:border-[var(--b-auto-complete-hover-border-color)] b:focus:not-disabled:border-[var(--b-auto-complete-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-auto-complete-active-outline-color)]':\n            __props.variant === _unref(BAutoCompleteVariant).Outlined,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-[var(--b-auto-complete-selector-bg)] b:focus:not-disabled:border-[var(--b-auto-complete-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-auto-complete-active-outline-color)]':\n            __props.variant === _unref(BAutoCompleteVariant).Filled,\n          'b:border-none b:bg-transparent': __props.variant === _unref(BAutoCompleteVariant).Borderless,\n        },\n        {\n          'b:border-red-500! b:hover:not-disabled:border-red-400!':\n            __props.status === _unref(BAutoCompleteStatus).Error,\n          'b:border-yellow-500! b:hover:not-disabled:border-yellow-400!':\n            __props.status === _unref(BAutoCompleteStatus).Warning,\n        },\n        {\n          'b:cursor-not-allowed b:opacity-40': __props.disabled,\n        },\n      ]],\n      placeholder: __props.placeholder,\n      disabled: __props.disabled,\n      role: \"combobox\",\n      autocomplete: \"off\",\n      \"aria-expanded\": showDropdown.value,\n      \"aria-controls\": showDropdown.value ? listboxId.value : undefined,\n      \"aria-activedescendant\": activeIndex.value >= 0 ? `${listboxId.value}-option-${activeIndex.value}` : undefined,\n      \"aria-autocomplete\": \"list\",\n      \"aria-haspopup\": \"listbox\",\n      onInput: handleInput,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeydown: handleKeyDown\n    }), null, 16, _hoisted_1),\n    (__props.allowClear && inputValue.value && !__props.disabled)\n      ? (_openBlock(), _createElementBlock(\"button\", {\n          key: 0,\n          type: \"button\",\n          class: \"b-auto-complete__clear b:absolute b:right-2 b:flex b:h-4 b:w-4 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-[var(--b-auto-complete-clear-bg)] b:text-xs b:text-zinc-400 b:hover:text-zinc-600\",\n          \"aria-label\": \"Clear input\",\n          tabindex: \"-1\",\n          onMousedown: _withModifiers(handleClear, [\"prevent\"])\n        }, \" ✕ \", 32))\n      : _createCommentVNode(\"\", true),\n    _createElementVNode(\"div\", {\n      ref_key: \"menuRef\",\n      ref: menuRef,\n      id: listboxId.value,\n      class: _normalizeClass([\"b-auto-complete__dropdown b:overflow-auto b:rounded-lg b:bg-white b:shadow-lg\", { 'b:w-[anchor-size(width)]': __props.popupMatchSelectWidth === true }]),\n      style: _normalizeStyle(\n        typeof __props.popupMatchSelectWidth === 'number'\n          ? { width: `${__props.popupMatchSelectWidth}px` }\n          : undefined\n      ),\n      popover: \"\",\n      role: \"listbox\",\n      onToggle: handleToggle,\n      onScroll: handlePopupScroll\n    }, [\n      _createElementVNode(\"ul\", _hoisted_3, [\n        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(filteredOptions.value, (opt, idx) => {\n          return (_openBlock(), _createElementBlock(\"li\", {\n            key: opt.value,\n            id: `${listboxId.value}-option-${idx}`,\n            class: _normalizeClass([\"b-auto-complete__option b:cursor-pointer b:rounded-md b:px-[var(--b-auto-complete-option-padding-x)] b:py-[var(--b-auto-complete-option-padding-y)] b:text-[length:var(--b-auto-complete-option-font-size)] b:leading-[var(--b-auto-complete-option-line-height)] b:transition-colors\", [\n            {\n              'b:bg-[var(--b-auto-complete-option-active-bg)]':\n                idx === activeIndex.value && !opt.disabled,\n              'b:bg-[var(--b-auto-complete-option-selected-bg)] b:font-[var(--b-auto-complete-option-selected-font-weight)] b:text-[color:var(--b-auto-complete-option-selected-color)]':\n                opt.value === model.value && idx !== activeIndex.value,\n              'b:cursor-not-allowed b:opacity-40': opt.disabled,\n              'b:hover:not-disabled:bg-[var(--b-auto-complete-option-active-bg)]':\n                !opt.disabled && idx !== activeIndex.value,\n            },\n          ]]),\n            \"data-active\": idx === activeIndex.value,\n            \"aria-selected\": opt.value === model.value,\n            \"aria-disabled\": opt.disabled ?? false,\n            role: \"option\",\n            onMousedown: _withModifiers(($event: any) => (selectOption(opt)), [\"prevent\"]),\n            onMouseenter: ($event: any) => (activeIndex.value = idx)\n          }, [\n            _renderSlot(_ctx.$slots, \"option\", {\n              option: opt,\n              index: idx\n            }, () => [\n              _createTextVNode(_toDisplayString(getOptionLabel(opt)), 1)\n            ], true)\n          ], 42, _hoisted_4))\n        }), 128))\n      ])\n    ], 46, _hoisted_2)\n  ], 2))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system12.js","names":[],"sources":["../src/components/BAutoComplete/BAutoComplete.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 { BAutoCompleteStatus, BAutoCompleteVariant, type BAutoCompleteOption } from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\nconst {\n  options = [],\n  size = BCommonSize.Medium,\n  variant = BAutoCompleteVariant.Outlined,\n  defaultActiveFirstOption = true,\n  backfill = false,\n  allowClear = false,\n  popupMatchSelectWidth = true,\n  placeholder,\n  filterOption = true,\n} = defineProps<{\n  /** Data source for autocomplete suggestions. */\n  options?: BAutoCompleteOption[];\n  /** Size of the input. */\n  size?: `${BCommonSize}`;\n  /** Visual variant. */\n  variant?: `${BAutoCompleteVariant}`;\n  /** Whether the component is disabled. */\n  disabled?: boolean;\n  /** Validation status. */\n  status?: `${BAutoCompleteStatus}`;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Whether to highlight the first option automatically. */\n  defaultActiveFirstOption?: boolean;\n  /** Whether to backfill input with the currently highlighted option value. */\n  backfill?: boolean;\n  /** Show clear button. */\n  allowClear?: boolean;\n  /** Controlled open state for dropdown. */\n  open?: boolean;\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Content shown when no results match. Set to `null` to hide dropdown when empty. */\n  notFoundContent?: string | null;\n  /** Whether the dropdown width matches the input width. */\n  popupMatchSelectWidth?: boolean | number;\n  /** Filter options by input value. `true` uses default filter, function for custom. */\n  filterOption?: boolean | ((inputValue: string, option: BAutoCompleteOption) => boolean);\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the selected value or input text changes. */\n  change: [value: string];\n  /** Fired when an option is selected from the dropdown. */\n  select: [value: string, option: BAutoCompleteOption];\n  /** Fired when searching (input text changes). */\n  search: [value: string];\n  /** Fired when dropdown visibility changes. */\n  openChange: [open: boolean];\n  /** Fired on input focus. */\n  focus: [event: FocusEvent];\n  /** Fired on input blur. */\n  blur: [event: FocusEvent];\n  /** Fired when the clear button is clicked. */\n  clear: [];\n  /** Fired on input keydown. */\n  inputKeyDown: [event: KeyboardEvent];\n  /** Fired on dropdown scroll. */\n  popupScroll: [event: Event];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-auto-complete-anchor-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst inputValue = ref(model.value ?? '');\n\nconst filteredOptions = computed(() => {\n  if (!filterOption) return options;\n  if (typeof filterOption === 'function') {\n    return options.filter((opt) => filterOption(inputValue.value, opt));\n  }\n  const query = inputValue.value.toLowerCase();\n  if (!query) return options;\n  return options.filter((opt) => {\n    const text = (opt.label ?? opt.value).toLowerCase();\n    return text.includes(query);\n  });\n});\n\nconst showDropdown = computed(() => {\n  if (filteredOptions.value.length === 0) return false;\n  return isOpen.value;\n});\n\nconst getOptionLabel = (opt: BAutoCompleteOption) => opt.label ?? opt.value;\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 && defaultActiveFirstOption && filteredOptions.value.length > 0) {\n    activeIndex.value = 0;\n  } else if (!nowOpen) {\n    activeIndex.value = -1;\n  }\n};\n\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  inputValue.value = target.value;\n  model.value = target.value;\n  emit('change', target.value);\n  emit('search', target.value);\n  activeIndex.value = defaultActiveFirstOption ? 0 : -1;\n  openMenu();\n};\n\nconst selectOption = (opt: BAutoCompleteOption) => {\n  if (opt.disabled) return;\n  inputValue.value = opt.value;\n  model.value = opt.value;\n  emit('select', opt.value, opt);\n  emit('change', opt.value);\n  closeMenu();\n  inputRef.value?.focus();\n};\n\nconst handleClear = () => {\n  inputValue.value = '';\n  model.value = '';\n  emit('change', '');\n  emit('clear');\n  inputRef.value?.focus();\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  emit('focus', e);\n  openMenu();\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  emit('blur', e);\n  closeMenu();\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 nextIdx = activeIndex.value + 1;\n      const opts = filteredOptions.value;\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          if (backfill) {\n            inputValue.value = opts[idx].value;\n          }\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const prevIdx = activeIndex.value - 1;\n      const opts = filteredOptions.value;\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          if (backfill) {\n            inputValue.value = opts[idx].value;\n          }\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      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      closeMenu();\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(model, (val) => {\n  if (val !== inputValue.value) {\n    inputValue.value = val ?? '';\n  }\n});\n\nwatch(\n  () => filteredOptions.value,\n  (opts) => {\n    if (opts.length === 0) {\n      closeMenu();\n    }\n  },\n);\n\nconst listboxId = computed(() => `b-auto-complete-listbox-${componentUID.value}`);\n\ndefineExpose({\n  focus: () => inputRef.value?.focus(),\n  blur: () => inputRef.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    class=\"b-auto-complete b:relative b:inline-flex b:w-full b:items-center\"\n    :class=\"{ 'b-auto-complete--disabled': disabled }\"\n  >\n    <input\n      ref=\"inputRef\"\n      v-bind=\"attrs\"\n      :value=\"inputValue\"\n      class=\"b-auto-complete__input b:box-border b:w-full b:transition-all b:outline-none b:placeholder:text-zinc-300\"\n      :class=\"[\n        {\n          'b:h-6 b:px-2 b:text-sm': size === BCommonSize.Small,\n          'b:h-8 b:px-3 b:text-sm': size === BCommonSize.Medium,\n          'b:h-10 b:px-3 b:text-base': size === BCommonSize.Large,\n        },\n        {\n          'b:rounded-lg b:border-1 b:border-[var(--b-auto-complete-border-color)] b:hover:not-disabled:border-[var(--b-auto-complete-hover-border-color)] b:focus:not-disabled:border-[var(--b-auto-complete-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-auto-complete-active-outline-color)]':\n            variant === BAutoCompleteVariant.Outlined,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-[var(--b-auto-complete-selector-bg)] b:focus:not-disabled:border-[var(--b-auto-complete-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-auto-complete-active-outline-color)]':\n            variant === BAutoCompleteVariant.Filled,\n          'b:border-none b:bg-transparent': variant === BAutoCompleteVariant.Borderless,\n        },\n        {\n          'b:border-red-500! b:hover:not-disabled:border-red-400!':\n            status === BAutoCompleteStatus.Error,\n          'b:border-yellow-500! b:hover:not-disabled:border-yellow-400!':\n            status === BAutoCompleteStatus.Warning,\n        },\n        {\n          'b:cursor-not-allowed b:opacity-40': disabled,\n        },\n      ]\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      :aria-expanded=\"showDropdown\"\n      :aria-controls=\"showDropdown ? listboxId : undefined\"\n      :aria-activedescendant=\"activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\"\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      @input=\"handleInput\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @keydown=\"handleKeyDown\"\n    />\n\n    <button\n      v-if=\"allowClear && inputValue && !disabled\"\n      type=\"button\"\n      class=\"b-auto-complete__clear b:absolute b:right-2 b:flex b:h-4 b:w-4 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-[var(--b-auto-complete-clear-bg)] b:text-xs b:text-zinc-400 b:hover:text-zinc-600\"\n      aria-label=\"Clear input\"\n      tabindex=\"-1\"\n      @mousedown.prevent=\"handleClear\"\n    >\n      &#x2715;\n    </button>\n\n    <div\n      ref=\"menuRef\"\n      :id=\"listboxId\"\n      class=\"b-auto-complete__dropdown b:overflow-auto b:rounded-lg b:bg-white 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      \"\n      popover\n      role=\"listbox\"\n      @toggle=\"handleToggle\"\n      @scroll=\"handlePopupScroll\"\n    >\n      <ul class=\"b:m-0 b:list-none b:p-1\">\n        <li\n          v-for=\"(opt, idx) in filteredOptions\"\n          :key=\"opt.value\"\n          :id=\"`${listboxId}-option-${idx}`\"\n          class=\"b-auto-complete__option b:cursor-pointer b:rounded-md b:px-[var(--b-auto-complete-option-padding-x)] b:py-[var(--b-auto-complete-option-padding-y)] b:text-[length:var(--b-auto-complete-option-font-size)] b:leading-[var(--b-auto-complete-option-line-height)] b:transition-colors\"\n          :class=\"[\n            {\n              'b:bg-[var(--b-auto-complete-option-active-bg)]':\n                idx === activeIndex && !opt.disabled,\n              'b:bg-[var(--b-auto-complete-option-selected-bg)] b:font-[var(--b-auto-complete-option-selected-font-weight)] b:text-[color:var(--b-auto-complete-option-selected-color)]':\n                opt.value === model && idx !== activeIndex,\n              'b:cursor-not-allowed b:opacity-40': opt.disabled,\n              'b:hover:not-disabled:bg-[var(--b-auto-complete-option-active-bg)]':\n                !opt.disabled && idx !== activeIndex,\n            },\n          ]\"\n          :data-active=\"idx === activeIndex\"\n          :aria-selected=\"opt.value === model\"\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\">\n            {{ getOptionLabel(opt) }}\n          </slot>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-auto-complete {\n  --b-auto-complete-active-border-color: #1677ff;\n  --b-auto-complete-active-outline-color: rgba(5, 145, 255, 0.1);\n  --b-auto-complete-hover-border-color: #4096ff;\n  --b-auto-complete-border-color: #d9d9d9;\n  --b-auto-complete-clear-bg: #ffffff;\n  --b-auto-complete-selector-bg: rgba(0, 0, 0, 0.04);\n  --b-auto-complete-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-auto-complete-option-font-size: 14px;\n  --b-auto-complete-option-height: 32px;\n  --b-auto-complete-option-line-height: 1.5714;\n  --b-auto-complete-option-padding-x: 12px;\n  --b-auto-complete-option-padding-y: 5px;\n  --b-auto-complete-option-selected-bg: #e6f4ff;\n  --b-auto-complete-option-selected-color: rgba(0, 0, 0, 0.88);\n  --b-auto-complete-option-selected-font-weight: 600;\n  --b-auto-complete-z-index-popup: 1050;\n}\n\n@media (prefers-color-scheme: dark) {\n  .b-auto-complete {\n    --b-auto-complete-active-border-color: #1668dc;\n    --b-auto-complete-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-auto-complete-hover-border-color: #3c89e8;\n    --b-auto-complete-border-color: #424242;\n    --b-auto-complete-clear-bg: #1f1f1f;\n    --b-auto-complete-selector-bg: rgba(255, 255, 255, 0.08);\n    --b-auto-complete-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-auto-complete-option-selected-bg: #111a2c;\n    --b-auto-complete-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n[data-prefers-color='dark'] .b-auto-complete {\n  --b-auto-complete-active-border-color: #1668dc;\n  --b-auto-complete-active-outline-color: rgba(22, 104, 220, 0.15);\n  --b-auto-complete-hover-border-color: #3c89e8;\n  --b-auto-complete-border-color: #424242;\n  --b-auto-complete-clear-bg: #1f1f1f;\n  --b-auto-complete-selector-bg: rgba(255, 255, 255, 0.08);\n  --b-auto-complete-option-active-bg: rgba(255, 255, 255, 0.08);\n  --b-auto-complete-option-selected-bg: #111a2c;\n  --b-auto-complete-option-selected-color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-auto-complete {\n    --b-auto-complete-active-border-color: #1668dc;\n    --b-auto-complete-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-auto-complete-hover-border-color: #3c89e8;\n    --b-auto-complete-border-color: #424242;\n    --b-auto-complete-clear-bg: #1f1f1f;\n    --b-auto-complete-selector-bg: rgba(255, 255, 255, 0.08);\n    --b-auto-complete-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-auto-complete-option-selected-bg: #111a2c;\n    --b-auto-complete-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n.b-auto-complete__input {\n  anchor-name: v-bind('anchorName');\n}\n\n.b-auto-complete__dropdown {\n  position: absolute;\n  margin-top: 4px;\n  z-index: var(--b-auto-complete-z-index-popup);\n  max-height: 256px;\n\n  position-anchor: v-bind('anchorName');\n  position-try-fallbacks: --b-ac-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-ac-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-auto-complete__dropdown {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system120.js

@@ -1,8 +1,166 @@
-import e from "./design-system118.js";
-/* empty css                 */
-//#region src/components/BMenu/BMenuDivider.vue
-var t = e;
+import { Fragment as e, computed as t, createElementBlock as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, renderList as u, renderSlot as d, watch as f } from "vue";
+//#region src/components/BMasonry/BMasonry.vue?vue&type=script&setup=true&lang.ts
+var p = ["data-masonry-key"], m = /* @__PURE__ */ r({
+	__name: "BMasonry",
+	props: {
+		columns: { default: 3 },
+		gutter: { default: 0 },
+		items: { default: () => [] },
+		fresh: {
+			type: Boolean,
+			default: !1
+		},
+		classNames: { type: [Object, Function] },
+		styles: { type: [Object, Function] }
+	},
+	emits: ["layoutChange"],
+	setup(r, { emit: m }) {
+		let h = m, g = {
+			xs: 0,
+			sm: 576,
+			md: 768,
+			lg: 992,
+			xl: 1200,
+			xxl: 1600
+		};
+		function _(e, t) {
+			if (typeof e == "number") return Math.max(1, e);
+			let n = Object.keys(g).sort((e, t) => g[t] - g[e]);
+			for (let r of n) if (t >= g[r] && e[r] !== void 0) return Math.max(1, e[r]);
+			let r = Object.keys(e).sort((e, t) => g[e] - g[t])[0];
+			return r ? Math.max(1, e[r]) : 1;
+		}
+		let v = l(null), y = l(0), b = null;
+		function x() {
+			v.value && (y.value = v.value.offsetWidth);
+		}
+		let S = l({}), C = null, w = l(/* @__PURE__ */ new Map());
+		function T(e, t) {
+			if (t) w.value.set(e, t), r.fresh && C && C.observe(t);
+			else {
+				let t = w.value.get(e);
+				t && C && C.unobserve(t), w.value.delete(e);
+				let n = { ...S.value };
+				delete n[e], S.value = n;
+			}
+		}
+		function E() {
+			!r.fresh || typeof ResizeObserver > "u" || (C = new ResizeObserver((e) => {
+				for (let t of e) {
+					let e = t.target.dataset.masonryKey;
+					if (e !== void 0) {
+						let n = t.contentRect.height;
+						S.value[e] !== n && (S.value = {
+							...S.value,
+							[e]: n
+						});
+					}
+				}
+			}), w.value.forEach((e) => C.observe(e)));
+		}
+		let D = t(() => _(r.columns, y.value)), O = t(() => {
+			let e = r.gutter;
+			if (Array.isArray(e)) return [_(e[0], y.value), _(e[1], y.value)];
+			let t = _(e, y.value);
+			return [t, t];
+		}), k = t(() => {
+			let e = D.value, t = Array.from({ length: e }, () => []), n = Array(e).fill(0), [, i] = O.value;
+			for (let a = 0; a < r.items.length; a++) {
+				let o = r.items[a], s;
+				s = o.column === void 0 ? n.indexOf(Math.min(...n)) : Math.max(0, Math.min(e - 1, o.column - 1)), t[s].push({
+					item: o,
+					originalIndex: a
+				});
+				let c = S.value[o.key] ?? o.height ?? 0;
+				n[s] += c + (t[s].length > 1 ? i : 0);
+			}
+			return t;
+		});
+		f(t(() => {
+			let e = D.value, t = {};
+			for (let e = 0; e < r.items.length; e++) {
+				let n = r.items[e], i = k.value.findIndex((e) => e.some((e) => e.item.key === n.key));
+				i >= 0 && (t[n.key] = i);
+			}
+			return {
+				columns: e,
+				columnMap: t
+			};
+		}), (e) => {
+			h("layoutChange", e);
+		}, { immediate: !0 });
+		function A(e, t) {
+			let n = ["b-masonry__item"];
+			if (!r.classNames) return n;
+			if (typeof r.classNames == "function") {
+				let i = r.classNames(e, t);
+				i && n.push(...Array.isArray(i) ? i : [i]);
+			} else if (typeof r.classNames.item == "function") {
+				let i = r.classNames.item(e, t);
+				i && n.push(...Array.isArray(i) ? i : [i]);
+			} else typeof r.classNames.item == "string" && n.push(r.classNames.item);
+			return n;
+		}
+		function j(e, t) {
+			return r.styles ? typeof r.styles == "function" ? r.styles(e, t) ?? {} : typeof r.styles.item == "function" ? r.styles.item(e, t) ?? {} : r.styles.item && typeof r.styles.item == "object" ? r.styles.item : {} : {};
+		}
+		function M(e) {
+			let t = ["b-masonry__column"];
+			return !r.classNames || typeof r.classNames == "function" || r.classNames.column && t.push(r.classNames.column), t;
+		}
+		function N(e) {
+			return !r.styles || typeof r.styles == "function" ? {} : r.styles.column ?? {};
+		}
+		let P = t(() => {
+			let e = ["b-masonry"];
+			return !r.classNames || typeof r.classNames == "function" || r.classNames.root && e.push(r.classNames.root), e;
+		}), F = t(() => {
+			let e = {
+				"--b-masonry-columns": String(D.value),
+				"--b-masonry-col-gap": `${O.value[0]}px`,
+				"--b-masonry-row-gap": `${O.value[1]}px`
+			};
+			if (r.styles && typeof r.styles == "object" && "root" in r.styles) {
+				let t = r.styles;
+				t.root && Object.assign(e, t.root);
+			}
+			return e;
+		});
+		return s(() => {
+			x(), typeof ResizeObserver < "u" ? (b = new ResizeObserver(() => x()), v.value && b.observe(v.value)) : window.addEventListener("resize", x), r.fresh && E();
+		}), f(() => r.fresh, (e) => {
+			e ? E() : (C?.disconnect(), C = null, S.value = {});
+		}), o(() => {
+			b?.disconnect(), C?.disconnect(), window.removeEventListener("resize", x);
+		}), (t, r) => (c(), n("div", {
+			ref_key: "rootEl",
+			ref: v,
+			class: i(P.value),
+			style: a(F.value),
+			role: "list",
+			"aria-label": "Masonry layout"
+		}, [(c(!0), n(e, null, u(k.value, (r, o) => (c(), n("div", {
+			key: o,
+			class: i(M(o)),
+			style: a(N(o)),
+			role: "presentation"
+		}, [(c(!0), n(e, null, u(r, ({ item: e, originalIndex: r }) => (c(), n("div", {
+			key: e.key,
+			ref_for: !0,
+			ref: (t) => T(e.key, t),
+			"data-masonry-key": e.key,
+			class: i(A(e, o)),
+			style: a(j(e, o)),
+			role: "listitem"
+		}, [t.$slots.item ? d(t.$slots, "item", {
+			key: 0,
+			item: e,
+			index: r,
+			column: o
+		}) : d(t.$slots, "default", { key: 1 })], 14, p))), 128))], 6))), 128))], 6));
+	}
+});
 //#endregion
-export { t as default };
+export { m as default };
 
 //# sourceMappingURL=design-system120.js.map

package/dist/design-system120.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system120.js","names":[],"sources":["../src/components/BMenu/BMenuDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst { dashed = false } = defineProps<{\n  /** Whether divider line is dashed. @default false */\n  dashed?: boolean;\n}>();\n</script>\n\n<template>\n  <li :class=\"['b-menu-divider', { 'b-menu-divider--dashed': dashed }]\" role=\"separator\" />\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuDivider\n   ───────────────────────────────────────────── */\n.b-menu-divider {\n  height: 1px;\n  margin: 4px 12px;\n  background: rgba(5, 5, 5, 0.06);\n  list-style: none;\n}\n\n.b-menu-divider--dashed {\n  background: none;\n  border-top: 1px dashed rgba(5, 5, 5, 0.06);\n}\n\n[data-prefers-color='dark'] .b-menu-divider,\n.b-menu--dark .b-menu-divider {\n  background: rgba(253, 253, 253, 0.12);\n}\n\n[data-prefers-color='dark'] .b-menu-divider--dashed,\n.b-menu--dark .b-menu-divider--dashed {\n  background: none;\n  border-top-color: rgba(253, 253, 253, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-menu-divider {\n    background: rgba(253, 253, 253, 0.12);\n  }\n\n  [data-prefers-color='system'] .b-menu-divider--dashed {\n    background: none;\n    border-top-color: rgba(253, 253, 253, 0.12);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system120.js","names":["$slots"],"sources":["../src/components/BMasonry/BMasonry.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport type {\n  BMasonryBreakpoint,\n  BMasonryClassNames,\n  BMasonryItem,\n  BMasonryLayoutChangePayload,\n  BMasonryResponsive,\n  BMasonryStyles,\n} from './types';\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nconst {\n  columns = 3,\n  // eslint-disable-next-line vue/require-valid-default-prop\n  gutter = 0,\n  items = [],\n  fresh = false,\n  classNames,\n  styles,\n} = defineProps<{\n  /**\n   * Number of columns. Accepts a fixed number or a breakpoint map.\n   * @example 3\n   * @example { xs: 1, sm: 2, md: 3, lg: 4 }\n   * @default 3\n   */\n  columns?: BMasonryResponsive;\n\n  /**\n   * Gap between items in pixels. Accepts a fixed value, a [colGap, rowGap] tuple,\n   * or a breakpoint map for responsive gaps.\n   * @example 16\n   * @example [16, 8]\n   * @example { xs: 8, md: 16 }\n   * @default 0\n   */\n  gutter?: BMasonryResponsive | [BMasonryResponsive, BMasonryResponsive];\n\n  /**\n   * Array of masonry items to render.\n   * @default []\n   */\n  items?: BMasonryItem[];\n\n  /**\n   * When true, observe every item's size so the layout re-flows when children resize.\n   * Requires ResizeObserver support; degrades gracefully when unavailable.\n   * @default false\n   */\n  fresh?: boolean;\n\n  /**\n   * Customize CSS classes on semantic DOM elements (`root`, `column`, `item`).\n   * Can be a plain object or a per-item function `(item, columnIndex) => classes`.\n   */\n  classNames?: BMasonryClassNames;\n\n  /**\n   * Customize inline styles on semantic DOM elements (`root`, `column`, `item`).\n   * Can be a plain object or a per-item function `(item, columnIndex) => styles`.\n   */\n  styles?: BMasonryStyles;\n}>();\n\n// ─── Emits ────────────────────────────────────────────────────────────────────\n\nconst emit = defineEmits<{\n  /**\n   * Fires after each layout recalculation with the resolved column count and\n   * the column assignment map (item key → 0-based column index).\n   */\n  layoutChange: [payload: BMasonryLayoutChangePayload];\n}>();\n\n// ─── Slots ────────────────────────────────────────────────────────────────────\n\ndefineSlots<{\n  /**\n   * Custom rendering for each item. Receives `{ item: BMasonryItem, index: number, column: number }`.\n   */\n  item?: (props: { item: BMasonryItem; index: number; column: number }) => unknown;\n\n  /**\n   * Default slot used when no `items` prop is provided — raw child nodes are\n   * distributed across columns automatically.\n   */\n  default?: (props: Record<string, never>) => unknown;\n}>();\n\n// ─── Responsive helpers ───────────────────────────────────────────────────────\n\nconst BREAKPOINTS: Record<BMasonryBreakpoint, number> = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nfunction resolveResponsive(value: BMasonryResponsive, width: number): number {\n  if (typeof value === 'number') return Math.max(1, value);\n\n  // Breakpoint map — pick the largest breakpoint that still fits\n  const keys = (Object.keys(BREAKPOINTS) as BMasonryBreakpoint[]).sort(\n    (a, b) => BREAKPOINTS[b] - BREAKPOINTS[a],\n  );\n\n  for (const bp of keys) {\n    if (width >= BREAKPOINTS[bp] && value[bp] !== undefined) {\n      return Math.max(1, value[bp]!);\n    }\n  }\n  // Fallback to smallest defined value\n  const smallest = (Object.keys(value) as BMasonryBreakpoint[]).sort(\n    (a, b) => BREAKPOINTS[a] - BREAKPOINTS[b],\n  )[0];\n  return smallest ? Math.max(1, value[smallest]!) : 1;\n}\n\n// ─── Container width tracking ─────────────────────────────────────────────────\n\nconst rootEl = ref<HTMLElement | null>(null);\nconst containerWidth = ref(0);\n\nlet containerObserver: ResizeObserver | null = null;\n\nfunction updateWidth() {\n  if (rootEl.value) {\n    containerWidth.value = rootEl.value.offsetWidth;\n  }\n}\n\n// ─── Item height tracking (fresh mode) ────────────────────────────────────────\n\nconst itemHeights = ref<Record<string | number, number>>({});\nlet itemObserver: ResizeObserver | null = null;\nconst itemEls = ref<Map<string | number, Element>>(new Map());\n\nfunction registerItemEl(key: string | number, el: Element | null) {\n  if (el) {\n    itemEls.value.set(key, el);\n    if (fresh && itemObserver) {\n      itemObserver.observe(el);\n    }\n  } else {\n    const old = itemEls.value.get(key);\n    if (old && itemObserver) itemObserver.unobserve(old);\n    itemEls.value.delete(key);\n    const next = { ...itemHeights.value };\n    delete next[key];\n    itemHeights.value = next;\n  }\n}\n\nfunction setupItemObserver() {\n  if (!fresh || typeof ResizeObserver === 'undefined') return;\n  itemObserver = new ResizeObserver((entries) => {\n    let changed = false;\n    for (const entry of entries) {\n      const el = entry.target as HTMLElement;\n      const key = el.dataset.masonryKey;\n      if (key !== undefined) {\n        const h = entry.contentRect.height;\n        if (itemHeights.value[key] !== h) {\n          itemHeights.value = { ...itemHeights.value, [key]: h };\n          changed = true;\n        }\n      }\n    }\n    if (changed) {\n      // trigger layout recompute (handled reactively via computed)\n    }\n  });\n  // Observe any already-mounted elements\n  itemEls.value.forEach((el) => itemObserver!.observe(el));\n}\n\n// ─── Core layout algorithm ────────────────────────────────────────────────────\n\nconst resolvedColumns = computed(() => resolveResponsive(columns, containerWidth.value));\n\nconst resolvedGutter = computed<[number, number]>(() => {\n  const g = gutter;\n  if (Array.isArray(g)) {\n    const colGap = resolveResponsive(g[0] as BMasonryResponsive, containerWidth.value);\n    const rowGap = resolveResponsive(g[1] as BMasonryResponsive, containerWidth.value);\n    return [colGap, rowGap];\n  }\n  const v = resolveResponsive(g as BMasonryResponsive, containerWidth.value);\n  return [v, v];\n});\n\n/** Distribute items across columns using the \"shortest column first\" strategy. */\nconst columnBuckets = computed<{ item: BMasonryItem; originalIndex: number }[][]>(() => {\n  const cols = resolvedColumns.value;\n  const buckets: { item: BMasonryItem; originalIndex: number }[][] = Array.from(\n    { length: cols },\n    () => [],\n  );\n  const heights = Array<number>(cols).fill(0);\n  const [, rowGap] = resolvedGutter.value;\n\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    let targetCol: number;\n\n    if (item.column !== undefined) {\n      // Pinned column (1-based → 0-based, clamped)\n      targetCol = Math.max(0, Math.min(cols - 1, item.column - 1));\n    } else {\n      // Shortest column\n      targetCol = heights.indexOf(Math.min(...heights));\n    }\n\n    buckets[targetCol].push({ item, originalIndex: i });\n    const h = itemHeights.value[item.key] ?? item.height ?? 0;\n    heights[targetCol] += h + (buckets[targetCol].length > 1 ? rowGap : 0);\n  }\n\n  return buckets;\n});\n\nconst layoutColumnMap = computed(() => {\n  const cols = resolvedColumns.value;\n  const map: Record<string | number, number> = {};\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    const bucket = columnBuckets.value.findIndex((b) =>\n      b.some((entry) => entry.item.key === item.key),\n    );\n    if (bucket >= 0) map[item.key] = bucket;\n  }\n  return { columns: cols, columnMap: map };\n});\n\nwatch(layoutColumnMap, (val) => {\n  emit('layoutChange', val);\n}, { immediate: true });\n\n// ─── CSS class/style helpers ──────────────────────────────────────────────────\n\nfunction getItemClasses(item: BMasonryItem, columnIndex: number) {\n  const base = ['b-masonry__item'];\n  if (!classNames) return base;\n\n  if (typeof classNames === 'function') {\n    const extra = classNames(item, columnIndex);\n    if (extra) base.push(...(Array.isArray(extra) ? extra : [extra as string]));\n  } else if (typeof classNames.item === 'function') {\n    const extra = classNames.item(item, columnIndex);\n    if (extra) base.push(...(Array.isArray(extra) ? extra : [extra as string]));\n  } else if (typeof classNames.item === 'string') {\n    base.push(classNames.item);\n  }\n  return base;\n}\n\nfunction getItemStyles(item: BMasonryItem, columnIndex: number): Record<string, string> {\n  if (!styles) return {};\n  if (typeof styles === 'function') return styles(item, columnIndex) ?? {};\n  if (typeof styles.item === 'function') return styles.item(item, columnIndex) ?? {};\n  if (styles.item && typeof styles.item === 'object') return styles.item as Record<string, string>;\n  return {};\n}\n\nfunction getColumnClasses(_colIndex: number): string[] {\n  const base = ['b-masonry__column'];\n  if (!classNames || typeof classNames === 'function') return base;\n  if (classNames.column) base.push(classNames.column);\n  return base;\n}\n\nfunction getColumnStyles(_colIndex: number): Record<string, string> {\n  if (!styles || typeof styles === 'function') return {};\n  return (styles.column as Record<string, string>) ?? {};\n}\n\nconst rootClasses = computed(() => {\n  const base = ['b-masonry'];\n  if (!classNames || typeof classNames === 'function') return base;\n  if (classNames.root) base.push(classNames.root);\n  return base;\n});\n\nconst rootStyles = computed(() => {\n  const base: Record<string, string> = {\n    '--b-masonry-columns': String(resolvedColumns.value),\n    '--b-masonry-col-gap': `${resolvedGutter.value[0]}px`,\n    '--b-masonry-row-gap': `${resolvedGutter.value[1]}px`,\n  };\n  if (styles && typeof styles === 'object' && !('root' in styles) === false) {\n    const s = styles as { root?: Record<string, string> };\n    if (s.root) Object.assign(base, s.root);\n  }\n  return base;\n});\n\n// ─── Lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(() => {\n  updateWidth();\n\n  if (typeof ResizeObserver !== 'undefined') {\n    containerObserver = new ResizeObserver(() => updateWidth());\n    if (rootEl.value) containerObserver.observe(rootEl.value);\n  } else {\n    // SSR / no ResizeObserver: listen to window resize\n    window.addEventListener('resize', updateWidth);\n  }\n\n  if (fresh) setupItemObserver();\n});\n\nwatch(\n  () => fresh,\n  (enabled) => {\n    if (enabled) {\n      setupItemObserver();\n    } else {\n      itemObserver?.disconnect();\n      itemObserver = null;\n      itemHeights.value = {};\n    }\n  },\n);\n\nonBeforeUnmount(() => {\n  containerObserver?.disconnect();\n  itemObserver?.disconnect();\n  window.removeEventListener('resize', updateWidth);\n});\n</script>\n\n<template>\n  <!-- role=\"list\" lets screen readers announce item count -->\n  <div\n    ref=\"rootEl\"\n    :class=\"rootClasses\"\n    :style=\"rootStyles\"\n    role=\"list\"\n    aria-label=\"Masonry layout\"\n  >\n    <!-- Column-based layout: each column is a flex column -->\n    <div\n      v-for=\"(bucket, colIdx) in columnBuckets\"\n      :key=\"colIdx\"\n      :class=\"getColumnClasses(colIdx)\"\n      :style=\"getColumnStyles(colIdx)\"\n      role=\"presentation\"\n    >\n      <div\n        v-for=\"{ item, originalIndex } in bucket\"\n        :key=\"item.key\"\n        :ref=\"(el) => registerItemEl(item.key, el as Element | null)\"\n        :data-masonry-key=\"item.key\"\n        :class=\"getItemClasses(item, colIdx)\"\n        :style=\"getItemStyles(item, colIdx)\"\n        role=\"listitem\"\n      >\n        <!-- Named item slot (prop-driven items) -->\n        <slot v-if=\"$slots.item\" name=\"item\" :item=\"item\" :index=\"originalIndex\" :column=\"colIdx\" />\n        <!-- Default slot fallback when using raw children (no items prop) -->\n        <template v-else>\n          <slot />\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────────────────────────────────────\n   BMasonry — CSS custom properties (scoped to component root)\n   ───────────────────────────────────────────────────────────────────────────── */\n.b-masonry {\n  /* Layout tokens */\n  --b-masonry-columns: 3;\n  --b-masonry-col-gap: 0px;\n  --b-masonry-row-gap: 0px;\n\n  /* Item tokens */\n  --b-masonry-item-transition-duration: 200ms;\n  --b-masonry-item-transition-timing: ease;\n  --b-masonry-item-border-radius: 0px;\n  --b-masonry-item-bg: transparent;\n\n  /* ── Layout ── */\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--b-masonry-col-gap);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ── Column ── */\n.b-masonry__column {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--b-masonry-row-gap);\n}\n\n/* ── Item ── */\n.b-masonry__item {\n  width: 100%;\n  box-sizing: border-box;\n  background: var(--b-masonry-item-bg);\n  border-radius: var(--b-masonry-item-border-radius);\n  transition:\n    transform var(--b-masonry-item-transition-duration) var(--b-masonry-item-transition-timing),\n    opacity var(--b-masonry-item-transition-duration) var(--b-masonry-item-transition-timing);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-masonry {\n  /* Tokens that shift in dark mode — override as needed by the consumer */\n  --b-masonry-item-bg: transparent;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-masonry {\n    /* Tokens that shift in dark mode — override as needed by the consumer */\n    --b-masonry-item-bg: transparent;\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-masonry {\n    --b-masonry-item-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system122.js

@@ -1,93 +1,8 @@
-import { BMenuContextKey as e, BMenuSubMenuContextKey as t } from "./design-system121.js";
-import { computed as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, inject as s, normalizeClass as c, normalizeStyle as l, onMounted as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m } from "vue";
-//#region src/components/BMenu/BMenuItem.vue?vue&type=script&setup=true&lang.ts
-var h = [
-	"role",
-	"tabindex",
-	"aria-disabled",
-	"aria-checked",
-	"title",
-	"data-menu-key"
-], g = {
-	key: 0,
-	class: "b-menu-item__icon",
-	"aria-hidden": "true"
-}, _ = {
-	key: 1,
-	class: "b-menu-item__label"
-}, v = {
-	key: 2,
-	class: "b-menu-item__extra"
-}, y = /* @__PURE__ */ o({
-	__name: "BMenuItem",
-	props: {
-		itemKey: {},
-		label: { default: "" },
-		icon: { default: () => void 0 },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		danger: {
-			type: Boolean,
-			default: !1
-		},
-		extra: { default: () => void 0 },
-		title: { default: () => void 0 }
-	},
-	setup(o) {
-		let y = s(e), b = s(t, null), x = n(() => (b?.level ?? 0) + 1), S = n(() => [...b?.keyPath ?? [], o.itemKey]);
-		u(() => {
-			y.registerKeyPath(o.itemKey, S.value);
-		});
-		let C = n(() => y.selectedKeys.value.includes(o.itemKey)), w = n(() => y.selectable.value ? y.multiple.value ? "menuitemcheckbox" : "menuitemradio" : "menuitem"), T = n(() => {
-			if (y.mode.value === "inline" && !y.inlineCollapsed.value) return `${x.value * y.inlineIndent.value}px`;
-		}), E = n(() => ["b-menu-item", {
-			"b-menu-item--selected": C.value,
-			"b-menu-item--disabled": o.disabled,
-			"b-menu-item--danger": o.danger,
-			"b-menu-item--collapsed": y.inlineCollapsed.value,
-			"b-menu-item--horizontal": y.mode.value === "horizontal"
-		}]);
-		function D(e) {
-			if (o.disabled) return;
-			let t = {
-				key: o.itemKey,
-				keyPath: S.value,
-				domEvent: e
-			};
-			y.onItemClick(t);
-		}
-		function O(e) {
-			if (!o.disabled && (e.key === "Enter" || e.key === " ")) {
-				e.preventDefault();
-				let t = {
-					key: o.itemKey,
-					keyPath: S.value,
-					domEvent: e
-				};
-				y.onItemClick(t);
-			}
-		}
-		return (e, t) => (d(), i("li", {
-			class: c(E.value),
-			style: l({ paddingInlineStart: T.value }),
-			role: w.value,
-			tabindex: o.disabled ? -1 : 0,
-			"aria-disabled": o.disabled || void 0,
-			"aria-checked": m(y).selectable.value ? C.value : void 0,
-			title: o.title ?? (m(y).inlineCollapsed.value ? o.label : void 0),
-			"data-menu-key": o.itemKey,
-			onClick: D,
-			onKeydown: O
-		}, [
-			o.icon || e.$slots.icon ? (d(), i("span", g, [f(e.$slots, "icon", {}, () => [a(p(o.icon), 1)])])) : r("", !0),
-			m(y).inlineCollapsed.value ? r("", !0) : (d(), i("span", _, [f(e.$slots, "default", {}, () => [a(p(o.label), 1)])])),
-			o.extra && !m(y).inlineCollapsed.value ? (d(), i("span", v, [f(e.$slots, "extra", {}, () => [a(p(o.extra), 1)])])) : r("", !0)
-		], 46, h));
-	}
-});
+import e from "./design-system120.js";
+/* empty css                 */
+//#region src/components/BMasonry/BMasonry.vue
+var t = e;
 //#endregion
-export { y as default };
+export { t as default };
 
 //# sourceMappingURL=design-system122.js.map

package/dist/design-system122.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system122.js","names":[],"sources":["../src/components/BMenu/BMenuItem.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from \"vue\"\n\nconst _hoisted_1 = [\"role\", \"tabindex\", \"aria-disabled\", \"aria-checked\", \"title\", \"data-menu-key\"]\nconst _hoisted_2 = {\n  key: 0,\n  class: \"b-menu-item__icon\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = {\n  key: 1,\n  class: \"b-menu-item__label\"\n}\nconst _hoisted_4 = {\n  key: 2,\n  class: \"b-menu-item__extra\"\n}\n\nimport { computed, inject, onMounted } from 'vue';\nimport {\n  BMenuContextKey,\n  BMenuSubMenuContextKey,\n  type BMenuClickInfo,\n  type BMenuContext,\n  type BMenuSubMenuContext,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BMenuItem',\n  props: {\n    itemKey: {},\n    label: { default: '' },\n    icon: { default: () => (undefined) },\n    disabled: { type: Boolean, default: false },\n    danger: { type: Boolean, default: false },\n    extra: { default: () => (undefined) },\n    title: { default: () => (undefined) }\n  },\n  setup(__props: any) {\n\n\n\n\n\n// ─────────────────────────────────────────────\n// Inject context\n// ─────────────────────────────────────────────\nconst menu = inject<BMenuContext>(BMenuContextKey)!;\nconst subMenuCtx = inject<BMenuSubMenuContext | null>(BMenuSubMenuContextKey, null);\n\nconst level = computed(() => (subMenuCtx?.level ?? 0) + 1);\nconst keyPath = computed(() => [...(subMenuCtx?.keyPath ?? []), __props.itemKey]);\n\n// Register key path with root menu\nonMounted(() => {\n  menu.registerKeyPath(__props.itemKey, keyPath.value);\n});\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst isSelected = computed(() => menu.selectedKeys.value.includes(__props.itemKey));\n\nconst itemRole = computed(() => {\n  if (!menu.selectable.value) return 'menuitem';\n  return menu.multiple.value ? 'menuitemcheckbox' : 'menuitemradio';\n});\n\nconst paddingLeft = computed(() => {\n  if (menu.mode.value !== 'inline') return undefined;\n  if (menu.inlineCollapsed.value) return undefined;\n  return `${level.value * menu.inlineIndent.value}px`;\n});\n\nconst itemClasses = computed(() => [\n  'b-menu-item',\n  {\n    'b-menu-item--selected': isSelected.value,\n    'b-menu-item--disabled': __props.disabled,\n    'b-menu-item--danger': __props.danger,\n    'b-menu-item--collapsed': menu.inlineCollapsed.value,\n    'b-menu-item--horizontal': menu.mode.value === 'horizontal',\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction handleClick(e: MouseEvent) {\n  if (__props.disabled) return;\n\n  const info: BMenuClickInfo = {\n    key: __props.itemKey,\n    keyPath: keyPath.value,\n    domEvent: e,\n  };\n  menu.onItemClick(info);\n}\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (__props.disabled) return;\n\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    const info: BMenuClickInfo = {\n      key: __props.itemKey,\n      keyPath: keyPath.value,\n      domEvent: e,\n    };\n    menu.onItemClick(info);\n  }\n}\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"li\", {\n    class: _normalizeClass(itemClasses.value),\n    style: _normalizeStyle({ paddingInlineStart: paddingLeft.value }),\n    role: itemRole.value,\n    tabindex: __props.disabled ? -1 : 0,\n    \"aria-disabled\": __props.disabled || undefined,\n    \"aria-checked\": _unref(menu).selectable.value ? isSelected.value : undefined,\n    title: __props.title ?? (_unref(menu).inlineCollapsed.value ? __props.label : undefined),\n    \"data-menu-key\": __props.itemKey,\n    onClick: handleClick,\n    onKeydown: handleKeydown\n  }, [\n    (__props.icon || _ctx.$slots.icon)\n      ? (_openBlock(), _createElementBlock(\"span\", _hoisted_2, [\n          _renderSlot(_ctx.$slots, \"icon\", {}, () => [\n            _createTextVNode(_toDisplayString(__props.icon), 1)\n          ])\n        ]))\n      : _createCommentVNode(\"\", true),\n    (!_unref(menu).inlineCollapsed.value)\n      ? (_openBlock(), _createElementBlock(\"span\", _hoisted_3, [\n          _renderSlot(_ctx.$slots, \"default\", {}, () => [\n            _createTextVNode(_toDisplayString(__props.label), 1)\n          ])\n        ]))\n      : _createCommentVNode(\"\", true),\n    (__props.extra && !_unref(menu).inlineCollapsed.value)\n      ? (_openBlock(), _createElementBlock(\"span\", _hoisted_4, [\n          _renderSlot(_ctx.$slots, \"extra\", {}, () => [\n            _createTextVNode(_toDisplayString(__props.extra), 1)\n          ])\n        ]))\n      : _createCommentVNode(\"\", true)\n  ], 46, _hoisted_1))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system122.js","names":[],"sources":["../src/components/BMasonry/BMasonry.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport type {\n  BMasonryBreakpoint,\n  BMasonryClassNames,\n  BMasonryItem,\n  BMasonryLayoutChangePayload,\n  BMasonryResponsive,\n  BMasonryStyles,\n} from './types';\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nconst {\n  columns = 3,\n  // eslint-disable-next-line vue/require-valid-default-prop\n  gutter = 0,\n  items = [],\n  fresh = false,\n  classNames,\n  styles,\n} = defineProps<{\n  /**\n   * Number of columns. Accepts a fixed number or a breakpoint map.\n   * @example 3\n   * @example { xs: 1, sm: 2, md: 3, lg: 4 }\n   * @default 3\n   */\n  columns?: BMasonryResponsive;\n\n  /**\n   * Gap between items in pixels. Accepts a fixed value, a [colGap, rowGap] tuple,\n   * or a breakpoint map for responsive gaps.\n   * @example 16\n   * @example [16, 8]\n   * @example { xs: 8, md: 16 }\n   * @default 0\n   */\n  gutter?: BMasonryResponsive | [BMasonryResponsive, BMasonryResponsive];\n\n  /**\n   * Array of masonry items to render.\n   * @default []\n   */\n  items?: BMasonryItem[];\n\n  /**\n   * When true, observe every item's size so the layout re-flows when children resize.\n   * Requires ResizeObserver support; degrades gracefully when unavailable.\n   * @default false\n   */\n  fresh?: boolean;\n\n  /**\n   * Customize CSS classes on semantic DOM elements (`root`, `column`, `item`).\n   * Can be a plain object or a per-item function `(item, columnIndex) => classes`.\n   */\n  classNames?: BMasonryClassNames;\n\n  /**\n   * Customize inline styles on semantic DOM elements (`root`, `column`, `item`).\n   * Can be a plain object or a per-item function `(item, columnIndex) => styles`.\n   */\n  styles?: BMasonryStyles;\n}>();\n\n// ─── Emits ────────────────────────────────────────────────────────────────────\n\nconst emit = defineEmits<{\n  /**\n   * Fires after each layout recalculation with the resolved column count and\n   * the column assignment map (item key → 0-based column index).\n   */\n  layoutChange: [payload: BMasonryLayoutChangePayload];\n}>();\n\n// ─── Slots ────────────────────────────────────────────────────────────────────\n\ndefineSlots<{\n  /**\n   * Custom rendering for each item. Receives `{ item: BMasonryItem, index: number, column: number }`.\n   */\n  item?: (props: { item: BMasonryItem; index: number; column: number }) => unknown;\n\n  /**\n   * Default slot used when no `items` prop is provided — raw child nodes are\n   * distributed across columns automatically.\n   */\n  default?: (props: Record<string, never>) => unknown;\n}>();\n\n// ─── Responsive helpers ───────────────────────────────────────────────────────\n\nconst BREAKPOINTS: Record<BMasonryBreakpoint, number> = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nfunction resolveResponsive(value: BMasonryResponsive, width: number): number {\n  if (typeof value === 'number') return Math.max(1, value);\n\n  // Breakpoint map — pick the largest breakpoint that still fits\n  const keys = (Object.keys(BREAKPOINTS) as BMasonryBreakpoint[]).sort(\n    (a, b) => BREAKPOINTS[b] - BREAKPOINTS[a],\n  );\n\n  for (const bp of keys) {\n    if (width >= BREAKPOINTS[bp] && value[bp] !== undefined) {\n      return Math.max(1, value[bp]!);\n    }\n  }\n  // Fallback to smallest defined value\n  const smallest = (Object.keys(value) as BMasonryBreakpoint[]).sort(\n    (a, b) => BREAKPOINTS[a] - BREAKPOINTS[b],\n  )[0];\n  return smallest ? Math.max(1, value[smallest]!) : 1;\n}\n\n// ─── Container width tracking ─────────────────────────────────────────────────\n\nconst rootEl = ref<HTMLElement | null>(null);\nconst containerWidth = ref(0);\n\nlet containerObserver: ResizeObserver | null = null;\n\nfunction updateWidth() {\n  if (rootEl.value) {\n    containerWidth.value = rootEl.value.offsetWidth;\n  }\n}\n\n// ─── Item height tracking (fresh mode) ────────────────────────────────────────\n\nconst itemHeights = ref<Record<string | number, number>>({});\nlet itemObserver: ResizeObserver | null = null;\nconst itemEls = ref<Map<string | number, Element>>(new Map());\n\nfunction registerItemEl(key: string | number, el: Element | null) {\n  if (el) {\n    itemEls.value.set(key, el);\n    if (fresh && itemObserver) {\n      itemObserver.observe(el);\n    }\n  } else {\n    const old = itemEls.value.get(key);\n    if (old && itemObserver) itemObserver.unobserve(old);\n    itemEls.value.delete(key);\n    const next = { ...itemHeights.value };\n    delete next[key];\n    itemHeights.value = next;\n  }\n}\n\nfunction setupItemObserver() {\n  if (!fresh || typeof ResizeObserver === 'undefined') return;\n  itemObserver = new ResizeObserver((entries) => {\n    let changed = false;\n    for (const entry of entries) {\n      const el = entry.target as HTMLElement;\n      const key = el.dataset.masonryKey;\n      if (key !== undefined) {\n        const h = entry.contentRect.height;\n        if (itemHeights.value[key] !== h) {\n          itemHeights.value = { ...itemHeights.value, [key]: h };\n          changed = true;\n        }\n      }\n    }\n    if (changed) {\n      // trigger layout recompute (handled reactively via computed)\n    }\n  });\n  // Observe any already-mounted elements\n  itemEls.value.forEach((el) => itemObserver!.observe(el));\n}\n\n// ─── Core layout algorithm ────────────────────────────────────────────────────\n\nconst resolvedColumns = computed(() => resolveResponsive(columns, containerWidth.value));\n\nconst resolvedGutter = computed<[number, number]>(() => {\n  const g = gutter;\n  if (Array.isArray(g)) {\n    const colGap = resolveResponsive(g[0] as BMasonryResponsive, containerWidth.value);\n    const rowGap = resolveResponsive(g[1] as BMasonryResponsive, containerWidth.value);\n    return [colGap, rowGap];\n  }\n  const v = resolveResponsive(g as BMasonryResponsive, containerWidth.value);\n  return [v, v];\n});\n\n/** Distribute items across columns using the \"shortest column first\" strategy. */\nconst columnBuckets = computed<{ item: BMasonryItem; originalIndex: number }[][]>(() => {\n  const cols = resolvedColumns.value;\n  const buckets: { item: BMasonryItem; originalIndex: number }[][] = Array.from(\n    { length: cols },\n    () => [],\n  );\n  const heights = Array<number>(cols).fill(0);\n  const [, rowGap] = resolvedGutter.value;\n\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    let targetCol: number;\n\n    if (item.column !== undefined) {\n      // Pinned column (1-based → 0-based, clamped)\n      targetCol = Math.max(0, Math.min(cols - 1, item.column - 1));\n    } else {\n      // Shortest column\n      targetCol = heights.indexOf(Math.min(...heights));\n    }\n\n    buckets[targetCol].push({ item, originalIndex: i });\n    const h = itemHeights.value[item.key] ?? item.height ?? 0;\n    heights[targetCol] += h + (buckets[targetCol].length > 1 ? rowGap : 0);\n  }\n\n  return buckets;\n});\n\nconst layoutColumnMap = computed(() => {\n  const cols = resolvedColumns.value;\n  const map: Record<string | number, number> = {};\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    const bucket = columnBuckets.value.findIndex((b) =>\n      b.some((entry) => entry.item.key === item.key),\n    );\n    if (bucket >= 0) map[item.key] = bucket;\n  }\n  return { columns: cols, columnMap: map };\n});\n\nwatch(layoutColumnMap, (val) => {\n  emit('layoutChange', val);\n}, { immediate: true });\n\n// ─── CSS class/style helpers ──────────────────────────────────────────────────\n\nfunction getItemClasses(item: BMasonryItem, columnIndex: number) {\n  const base = ['b-masonry__item'];\n  if (!classNames) return base;\n\n  if (typeof classNames === 'function') {\n    const extra = classNames(item, columnIndex);\n    if (extra) base.push(...(Array.isArray(extra) ? extra : [extra as string]));\n  } else if (typeof classNames.item === 'function') {\n    const extra = classNames.item(item, columnIndex);\n    if (extra) base.push(...(Array.isArray(extra) ? extra : [extra as string]));\n  } else if (typeof classNames.item === 'string') {\n    base.push(classNames.item);\n  }\n  return base;\n}\n\nfunction getItemStyles(item: BMasonryItem, columnIndex: number): Record<string, string> {\n  if (!styles) return {};\n  if (typeof styles === 'function') return styles(item, columnIndex) ?? {};\n  if (typeof styles.item === 'function') return styles.item(item, columnIndex) ?? {};\n  if (styles.item && typeof styles.item === 'object') return styles.item as Record<string, string>;\n  return {};\n}\n\nfunction getColumnClasses(_colIndex: number): string[] {\n  const base = ['b-masonry__column'];\n  if (!classNames || typeof classNames === 'function') return base;\n  if (classNames.column) base.push(classNames.column);\n  return base;\n}\n\nfunction getColumnStyles(_colIndex: number): Record<string, string> {\n  if (!styles || typeof styles === 'function') return {};\n  return (styles.column as Record<string, string>) ?? {};\n}\n\nconst rootClasses = computed(() => {\n  const base = ['b-masonry'];\n  if (!classNames || typeof classNames === 'function') return base;\n  if (classNames.root) base.push(classNames.root);\n  return base;\n});\n\nconst rootStyles = computed(() => {\n  const base: Record<string, string> = {\n    '--b-masonry-columns': String(resolvedColumns.value),\n    '--b-masonry-col-gap': `${resolvedGutter.value[0]}px`,\n    '--b-masonry-row-gap': `${resolvedGutter.value[1]}px`,\n  };\n  if (styles && typeof styles === 'object' && !('root' in styles) === false) {\n    const s = styles as { root?: Record<string, string> };\n    if (s.root) Object.assign(base, s.root);\n  }\n  return base;\n});\n\n// ─── Lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(() => {\n  updateWidth();\n\n  if (typeof ResizeObserver !== 'undefined') {\n    containerObserver = new ResizeObserver(() => updateWidth());\n    if (rootEl.value) containerObserver.observe(rootEl.value);\n  } else {\n    // SSR / no ResizeObserver: listen to window resize\n    window.addEventListener('resize', updateWidth);\n  }\n\n  if (fresh) setupItemObserver();\n});\n\nwatch(\n  () => fresh,\n  (enabled) => {\n    if (enabled) {\n      setupItemObserver();\n    } else {\n      itemObserver?.disconnect();\n      itemObserver = null;\n      itemHeights.value = {};\n    }\n  },\n);\n\nonBeforeUnmount(() => {\n  containerObserver?.disconnect();\n  itemObserver?.disconnect();\n  window.removeEventListener('resize', updateWidth);\n});\n</script>\n\n<template>\n  <!-- role=\"list\" lets screen readers announce item count -->\n  <div\n    ref=\"rootEl\"\n    :class=\"rootClasses\"\n    :style=\"rootStyles\"\n    role=\"list\"\n    aria-label=\"Masonry layout\"\n  >\n    <!-- Column-based layout: each column is a flex column -->\n    <div\n      v-for=\"(bucket, colIdx) in columnBuckets\"\n      :key=\"colIdx\"\n      :class=\"getColumnClasses(colIdx)\"\n      :style=\"getColumnStyles(colIdx)\"\n      role=\"presentation\"\n    >\n      <div\n        v-for=\"{ item, originalIndex } in bucket\"\n        :key=\"item.key\"\n        :ref=\"(el) => registerItemEl(item.key, el as Element | null)\"\n        :data-masonry-key=\"item.key\"\n        :class=\"getItemClasses(item, colIdx)\"\n        :style=\"getItemStyles(item, colIdx)\"\n        role=\"listitem\"\n      >\n        <!-- Named item slot (prop-driven items) -->\n        <slot v-if=\"$slots.item\" name=\"item\" :item=\"item\" :index=\"originalIndex\" :column=\"colIdx\" />\n        <!-- Default slot fallback when using raw children (no items prop) -->\n        <template v-else>\n          <slot />\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────────────────────────────────────\n   BMasonry — CSS custom properties (scoped to component root)\n   ───────────────────────────────────────────────────────────────────────────── */\n.b-masonry {\n  /* Layout tokens */\n  --b-masonry-columns: 3;\n  --b-masonry-col-gap: 0px;\n  --b-masonry-row-gap: 0px;\n\n  /* Item tokens */\n  --b-masonry-item-transition-duration: 200ms;\n  --b-masonry-item-transition-timing: ease;\n  --b-masonry-item-border-radius: 0px;\n  --b-masonry-item-bg: transparent;\n\n  /* ── Layout ── */\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--b-masonry-col-gap);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ── Column ── */\n.b-masonry__column {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--b-masonry-row-gap);\n}\n\n/* ── Item ── */\n.b-masonry__item {\n  width: 100%;\n  box-sizing: border-box;\n  background: var(--b-masonry-item-bg);\n  border-radius: var(--b-masonry-item-border-radius);\n  transition:\n    transform var(--b-masonry-item-transition-duration) var(--b-masonry-item-transition-timing),\n    opacity var(--b-masonry-item-transition-duration) var(--b-masonry-item-transition-timing);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-masonry {\n  /* Tokens that shift in dark mode — override as needed by the consumer */\n  --b-masonry-item-bg: transparent;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-masonry {\n    /* Tokens that shift in dark mode — override as needed by the consumer */\n    --b-masonry-item-bg: transparent;\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-masonry {\n    --b-masonry-item-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system123.js

@@ -0,0 +1,12 @@
+//#region src/components/BMentions/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Error = "error", e.Warning = "warning", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e;
+}({}), n = /* @__PURE__ */ function(e) {
+	return e.Top = "top", e.Bottom = "bottom", e;
+}({});
+//#endregion
+export { n as BMentionsPlacement, e as BMentionsStatus, t as BMentionsVariant };
+
+//# sourceMappingURL=design-system123.js.map

package/dist/design-system123.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system123.js","names":[],"sources":["../src/components/BMentions/types.ts"],"sourcesContent":["export interface BMentionsOption {\n  /** Display label for the mention suggestion. Falls back to `value` if omitted. */\n  label?: string;\n  /** The value inserted when this option is selected. */\n  value: string;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n}\n\nexport enum BMentionsStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BMentionsVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n}\n\nexport enum BMentionsPlacement {\n  Top = 'top',\n  Bottom = 'bottom',\n}\n"],"mappings":";AASA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,MAAA,OACA,EAAA,SAAA;KACD"}