@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system176.js

@@ -1,9 +1,118 @@
-import e from "./design-system14.js";
-import t from "./design-system174.js";
-/* empty css                 */
-//#region src/components/BSelect/BSelect.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-9a851cf3"]]);
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, nextTick as s, normalizeClass as c, normalizeStyle as l, onMounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, watch as g } from "vue";
+//#region src/components/BSegmented/BSegmented.vue?vue&type=script&setup=true&lang.ts
+var _ = ["aria-disabled"], v = [
+	"aria-label",
+	"aria-checked",
+	"aria-disabled",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+], y = { class: "b-segmented__item-inner" }, b = {
+	key: 0,
+	class: "b-segmented__item-icon",
+	"aria-hidden": "true"
+}, x = { class: "b-segmented__item-label" }, S = /* @__PURE__ */ o({
+	__name: "BSegmented",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		options: { default: () => [] },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "default" },
+		block: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(o, { emit: S }) {
+		let C = S, w = t(() => o.options.map((e) => typeof e == "string" || typeof e == "number" ? {
+			label: String(e),
+			value: e,
+			disabled: !1
+		} : {
+			label: String(e.label ?? e.value),
+			value: e.value,
+			disabled: e.disabled ?? !1,
+			icon: e.icon
+		})), T = t(() => o.modelValue !== void 0), E = f(o.modelValue ?? o.defaultValue ?? w.value[0]?.value);
+		g(() => o.modelValue, (e) => {
+			e !== void 0 && (E.value = e);
+		}), g(w, (e) => {
+			E.value === void 0 && e.length > 0 && (E.value = e[0].value);
+		});
+		let D = t(() => T.value ? o.modelValue : E.value), O = f(null), k = f(null);
+		function A(e) {
+			if (!O.value) return;
+			let t = O.value.querySelectorAll(".b-segmented__item")[e];
+			if (!t) return;
+			let n = O.value.getBoundingClientRect().left, { left: r, width: i } = t.getBoundingClientRect();
+			k.value = {
+				transform: `translateX(${r - n}px)`,
+				width: `${i}px`
+			};
+		}
+		let j = t(() => w.value.findIndex((e) => e.value === D.value));
+		g(j, async (e) => {
+			e < 0 || (await s(), A(e));
+		}, { immediate: !1 }), u(() => {
+			j.value >= 0 && A(j.value);
+		});
+		function M(e) {
+			o.disabled || e.disabled || e.value !== D.value && (T.value || (E.value = e.value), C("update:modelValue", e.value), C("change", e.value));
+		}
+		function N(e, t) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), M(t)), (e.key === "ArrowRight" || e.key === "ArrowDown") && (e.preventDefault(), P(1)), (e.key === "ArrowLeft" || e.key === "ArrowUp") && (e.preventDefault(), P(-1));
+		}
+		function P(e) {
+			if (!O.value) return;
+			let t = Array.from(O.value.querySelectorAll(".b-segmented__item:not([aria-disabled=\"true\"])")), n = document.activeElement, r = t.indexOf(n);
+			if (r < 0) {
+				t[0]?.focus();
+				return;
+			}
+			t[(r + e + t.length) % t.length]?.focus();
+		}
+		let F = t(() => ["b-segmented", {
+			"b-segmented--disabled": o.disabled,
+			"b-segmented--block": o.block,
+			"b-segmented--small": o.size === "small",
+			"b-segmented--large": o.size === "large"
+		}]);
+		return (t, s) => (d(), r("div", {
+			ref_key: "rootRef",
+			ref: O,
+			class: c(F.value),
+			role: "group",
+			"aria-disabled": o.disabled ? "true" : void 0
+		}, [k.value ? (d(), r("div", {
+			key: 0,
+			class: "b-segmented__thumb",
+			"aria-hidden": "true",
+			style: l({
+				transform: k.value.transform,
+				width: k.value.width
+			})
+		}, null, 4)) : n("", !0), (d(!0), r(e, null, p(w.value, (e) => (d(), r("div", {
+			key: String(e.value),
+			class: c(["b-segmented__item", {
+				"b-segmented__item--selected": e.value === D.value,
+				"b-segmented__item--disabled": e.disabled || o.disabled
+			}]),
+			role: "radio",
+			"aria-label": e.label,
+			"aria-checked": e.value === D.value,
+			"aria-disabled": e.disabled || o.disabled ? "true" : void 0,
+			tabindex: o.disabled || e.disabled ? -1 : e.value === D.value ? 0 : -1,
+			onClick: (t) => M(e),
+			onKeydown: (t) => N(t, e)
+		}, [i("div", y, [e.icon ? (d(), r("span", b, h(e.icon), 1)) : n("", !0), i("span", x, [m(t.$slots, "label", { option: e }, () => [a(h(e.label), 1)])])])], 42, v))), 128))], 10, _));
+	}
+});
 //#endregion
-export { n as default };
+export { S as default };
 
 //# sourceMappingURL=design-system176.js.map

package/dist/design-system176.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system176.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":""}
+{"version":3,"file":"design-system176.js","names":[],"sources":["../src/components/BSegmented/BSegmented.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\n\nimport type { BSegmentedOption, BSegmentedRawOption } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  modelValue,\n  defaultValue,\n  options = [],\n  disabled = false,\n  size = 'default',\n  block = false,\n} = defineProps<{\n  /**\n   * Currently selected value (controlled / two-way binding via v-model).\n   * When provided, the component is in controlled mode.\n   */\n  modelValue?: string | number;\n  /**\n   * Initial selected value for uncontrolled mode.\n   * Ignored when `modelValue` is set.\n   * @default first option value\n   */\n  defaultValue?: string | number;\n  /** Segmented options. Accepts strings, numbers, or option objects. */\n  options?: BSegmentedRawOption[];\n  /** Whether the whole control is disabled. @default false */\n  disabled?: boolean;\n  /** Size of the component. @default 'default' */\n  size?: 'small' | 'default' | 'large';\n  /** Whether the segmented fills the full width of its container. @default false */\n  block?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the selected value changes. */\n  (e: 'update:modelValue', value: string | number): void;\n  /** Fires when the selected value changes (mirrors `update:modelValue`). */\n  (e: 'change', value: string | number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom label renderer for each option. Receives the resolved option object. */\n  label?: (props: { option: BSegmentedOption }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Normalise options\n// ─────────────────────────────────────────────\nconst normalizedOptions = computed<BSegmentedOption[]>(() =>\n  options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt, disabled: false };\n    }\n    return {\n      label: String(opt.label ?? opt.value),\n      value: opt.value,\n      disabled: opt.disabled ?? false,\n      icon: opt.icon,\n    };\n  }),\n);\n\n// ─────────────────────────────────────────────\n// Internal selection state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => modelValue !== undefined);\n\nconst internalValue = ref<string | number | undefined>(\n  modelValue ?? defaultValue ?? normalizedOptions.value[0]?.value,\n);\n\n// Sync controlled value → internal\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val !== undefined) internalValue.value = val;\n  },\n);\n\n// Sync first option as default when options change and nothing is selected\nwatch(normalizedOptions, (opts) => {\n  if (internalValue.value === undefined && opts.length > 0) {\n    internalValue.value = opts[0].value;\n  }\n});\n\nconst selectedValue = computed(() => (isControlled.value ? modelValue : internalValue.value));\n\n// ─────────────────────────────────────────────\n// Thumb (animated indicator) positioning\n// ─────────────────────────────────────────────\nconst rootRef = ref<HTMLElement | null>(null);\nconst thumbStyle = ref<{ transform: string; width: string } | null>(null);\n\nfunction updateThumb(index: number) {\n  if (!rootRef.value) return;\n  const items = rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item');\n  const target = items[index];\n  if (!target) return;\n\n  const containerLeft = rootRef.value.getBoundingClientRect().left;\n  const { left, width } = target.getBoundingClientRect();\n  thumbStyle.value = {\n    transform: `translateX(${left - containerLeft}px)`,\n    width: `${width}px`,\n  };\n}\n\nconst selectedIndex = computed(() =>\n  normalizedOptions.value.findIndex((o) => o.value === selectedValue.value),\n);\n\nwatch(\n  selectedIndex,\n  async (idx) => {\n    if (idx < 0) return;\n    await nextTick();\n    updateThumb(idx);\n  },\n  { immediate: false },\n);\n\nonMounted(() => {\n  if (selectedIndex.value >= 0) updateThumb(selectedIndex.value);\n});\n\n// ─────────────────────────────────────────────\n// Selection logic\n// ─────────────────────────────────────────────\nfunction select(opt: BSegmentedOption) {\n  if (disabled || opt.disabled) return;\n  if (opt.value === selectedValue.value) return;\n\n  if (!isControlled.value) {\n    internalValue.value = opt.value;\n  }\n  emit('update:modelValue', opt.value);\n  emit('change', opt.value);\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent, opt: BSegmentedOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    select(opt);\n  }\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusNext(1);\n  }\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    focusNext(-1);\n  }\n}\n\nfunction focusNext(direction: 1 | -1) {\n  if (!rootRef.value) return;\n  const items = Array.from(\n    rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item:not([aria-disabled=\"true\"])'),\n  );\n  const activeEl = document.activeElement as HTMLElement;\n  const currentIdx = items.indexOf(activeEl);\n  if (currentIdx < 0) {\n    items[0]?.focus();\n    return;\n  }\n  const next = (currentIdx + direction + items.length) % items.length;\n  items[next]?.focus();\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-segmented',\n  {\n    'b-segmented--disabled': disabled,\n    'b-segmented--block': block,\n    'b-segmented--small': size === 'small',\n    'b-segmented--large': size === 'large',\n  },\n]);\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    role=\"group\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n  >\n    <!-- Animated thumb - positioned via JS -->\n    <div\n      v-if=\"thumbStyle\"\n      class=\"b-segmented__thumb\"\n      aria-hidden=\"true\"\n      :style=\"{ transform: thumbStyle.transform, width: thumbStyle.width }\"\n    />\n\n    <!-- Items -->\n    <div\n      v-for=\"opt in normalizedOptions\"\n      :key=\"String(opt.value)\"\n      class=\"b-segmented__item\"\n      :class=\"{\n        'b-segmented__item--selected': opt.value === selectedValue,\n        'b-segmented__item--disabled': opt.disabled || disabled,\n      }\"\n      role=\"radio\"\n      :aria-label=\"opt.label\"\n      :aria-checked=\"opt.value === selectedValue\"\n      :aria-disabled=\"opt.disabled || disabled ? 'true' : undefined\"\n      :tabindex=\"disabled || opt.disabled ? -1 : opt.value === selectedValue ? 0 : -1\"\n      @click=\"select(opt)\"\n      @keydown=\"onKeydown($event, opt)\"\n    >\n      <div class=\"b-segmented__item-inner\">\n        <!-- Icon -->\n        <span v-if=\"opt.icon\" class=\"b-segmented__item-icon\" aria-hidden=\"true\">{{\n          opt.icon\n        }}</span>\n\n        <!-- Label - slot or prop -->\n        <span class=\"b-segmented__item-label\">\n          <slot name=\"label\" :option=\"opt\">{{ opt.label }}</slot>\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BSegmented - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-segmented {\n  /* Surface */\n  --b-segmented-bg: oklch(95% 0.003 260);\n  --b-segmented-border-radius: 8px;\n  --b-segmented-padding: 2px;\n\n  /* Item */\n  --b-segmented-item-color: oklch(40% 0.02 260);\n  --b-segmented-item-hover-color: oklch(20% 0.02 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 50%);\n  --b-segmented-item-padding: 0 11px;\n  --b-segmented-item-border-radius: 6px;\n\n  /* Selected thumb */\n  --b-segmented-thumb-bg: oklch(100% 0 0);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 10%), 0 0 0 1px oklch(0% 0 0 / 6%);\n  --b-segmented-thumb-transition:\n    transform 200ms cubic-bezier(0.34, 0.69, 0.1, 1), width 200ms cubic-bezier(0.34, 0.69, 0.1, 1);\n\n  /* Selected text */\n  --b-segmented-selected-color: oklch(20% 0.02 260);\n  --b-segmented-selected-font-weight: 500;\n\n  /* Disabled */\n  --b-segmented-disabled-opacity: 0.4;\n  --b-segmented-disabled-cursor: not-allowed;\n\n  /* Height variants */\n  --b-segmented-height: 32px;\n\n  /* Focus ring */\n  --b-segmented-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n\n  /* Transition */\n  --b-segmented-transition-duration: 200ms;\n\n  /* ── Layout ── */\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  background: var(--b-segmented-bg);\n  border-radius: var(--b-segmented-border-radius);\n  padding: var(--b-segmented-padding);\n  box-sizing: border-box;\n  user-select: none;\n  height: var(--b-segmented-height);\n  font-size: 14px;\n  line-height: 1;\n}\n\n/* ── Block (full width) ── */\n.b-segmented--block {\n  display: flex;\n  width: 100%;\n}\n\n.b-segmented--block .b-segmented__item {\n  flex: 1;\n}\n\n/* ── Size variants ── */\n.b-segmented--small {\n  --b-segmented-height: 24px;\n  --b-segmented-item-padding: 0 7px;\n  font-size: 12px;\n}\n\n.b-segmented--large {\n  --b-segmented-height: 40px;\n  --b-segmented-item-padding: 0 15px;\n  font-size: 16px;\n}\n\n/* ── Thumb (sliding indicator) ── */\n.b-segmented__thumb {\n  position: absolute;\n  top: var(--b-segmented-padding);\n  left: 0;\n  height: calc(100% - var(--b-segmented-padding) * 2);\n  background: var(--b-segmented-thumb-bg);\n  border-radius: var(--b-segmented-item-border-radius);\n  box-shadow: var(--b-segmented-thumb-shadow);\n  transition: var(--b-segmented-thumb-transition);\n  pointer-events: none;\n  will-change: transform, width;\n}\n\n/* ── Item ── */\n.b-segmented__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--b-segmented-height) - var(--b-segmented-padding) * 2);\n  padding: var(--b-segmented-item-padding);\n  border-radius: var(--b-segmented-item-border-radius);\n  color: var(--b-segmented-item-color);\n  cursor: pointer;\n  transition:\n    color var(--b-segmented-transition-duration),\n    background var(--b-segmented-transition-duration);\n  white-space: nowrap;\n  outline: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n.b-segmented__item:hover:not(.b-segmented__item--selected):not(.b-segmented__item--disabled) {\n  color: var(--b-segmented-item-hover-color);\n  background: var(--b-segmented-item-hover-bg);\n}\n\n.b-segmented__item:focus-visible {\n  box-shadow: var(--b-segmented-focus-ring);\n}\n\n/* ── Selected item ── */\n.b-segmented__item--selected {\n  color: var(--b-segmented-selected-color);\n  font-weight: var(--b-segmented-selected-font-weight);\n}\n\n/* ── Disabled ── */\n.b-segmented--disabled,\n.b-segmented__item--disabled {\n  opacity: var(--b-segmented-disabled-opacity);\n  cursor: var(--b-segmented-disabled-cursor);\n  pointer-events: none;\n}\n\n/* Re-enable pointer events on items when only the item is disabled (not whole control) */\n.b-segmented:not(.b-segmented--disabled) .b-segmented__item--disabled {\n  pointer-events: auto;\n  cursor: var(--b-segmented-disabled-cursor);\n}\n\n/* ── Inner wrapper (icon + label) ── */\n.b-segmented__item-inner {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  line-height: 1;\n}\n\n.b-segmented__item-icon {\n  display: flex;\n  align-items: center;\n  font-size: 1em;\n  flex-shrink: 0;\n}\n\n.b-segmented__item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-segmented {\n  --b-segmented-bg: oklch(22% 0.02 260);\n  --b-segmented-item-color: oklch(72% 0.01 260);\n  --b-segmented-item-hover-color: oklch(92% 0.005 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n  --b-segmented-thumb-bg: oklch(30% 0.02 260);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n  --b-segmented-selected-color: oklch(95% 0.005 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-segmented {\n    --b-segmented-bg: oklch(22% 0.02 260);\n    --b-segmented-item-color: oklch(72% 0.01 260);\n    --b-segmented-item-hover-color: oklch(92% 0.005 260);\n    --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n    --b-segmented-thumb-bg: oklch(30% 0.02 260);\n    --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n    --b-segmented-selected-color: oklch(95% 0.005 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-segmented {\n    --b-segmented-thumb-transition: none;\n    --b-segmented-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,IAAM,IAAO,GAkBP,IAAoB,QACxB,EAAA,QAAQ,KAAK,MACP,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACrC;GAAE,OAAO,OAAO,EAAI;GAAE,OAAO;GAAK,UAAU;GAAO,GAErD;GACL,OAAO,OAAO,EAAI,SAAS,EAAI,MAAM;GACrC,OAAO,EAAI;GACX,UAAU,EAAI,YAAY;GAC1B,MAAM,EAAI;GACX,CACD,CACH,EAKK,IAAe,QAAe,EAAA,eAAe,KAAA,EAAU,EAEvD,IAAgB,EACpB,EAAA,cAAc,EAAA,gBAAgB,EAAkB,MAAM,IAAI,MAC3D;AAWD,EARA,QACQ,EAAA,aACL,MAAQ;AACP,GAAI,MAAQ,KAAA,MAAW,EAAc,QAAQ;IAEhD,EAGD,EAAM,IAAoB,MAAS;AACjC,GAAI,EAAc,UAAU,KAAA,KAAa,EAAK,SAAS,MACrD,EAAc,QAAQ,EAAK,GAAG;IAEhC;EAEF,IAAM,IAAgB,QAAgB,EAAa,QAAQ,EAAA,aAAa,EAAc,MAAO,EAKvF,IAAU,EAAwB,KAAK,EACvC,IAAa,EAAiD,KAAK;EAEzE,SAAS,EAAY,GAAe;AAClC,OAAI,CAAC,EAAQ,MAAO;GAEpB,IAAM,IADQ,EAAQ,MAAM,iBAA8B,qBAAqB,CAC1D;AACrB,OAAI,CAAC,EAAQ;GAEb,IAAM,IAAgB,EAAQ,MAAM,uBAAuB,CAAC,MACtD,EAAE,SAAM,aAAU,EAAO,uBAAuB;AACtD,KAAW,QAAQ;IACjB,WAAW,cAAc,IAAO,EAAc;IAC9C,OAAO,GAAG,EAAM;IACjB;;EAGH,IAAM,IAAgB,QACpB,EAAkB,MAAM,WAAW,MAAM,EAAE,UAAU,EAAc,MAAM,CAC1E;AAYD,EAVA,EACE,GACA,OAAO,MAAQ;AACT,OAAM,MACV,MAAM,GAAU,EAChB,EAAY,EAAI;KAElB,EAAE,WAAW,IAAO,CACrB,EAED,QAAgB;AACd,GAAI,EAAc,SAAS,KAAG,EAAY,EAAc,MAAM;IAC9D;EAKF,SAAS,EAAO,GAAuB;AACjC,KAAA,YAAY,EAAI,YAChB,EAAI,UAAU,EAAc,UAE3B,EAAa,UAChB,EAAc,QAAQ,EAAI,QAE5B,EAAK,qBAAqB,EAAI,MAAM,EACpC,EAAK,UAAU,EAAI,MAAM;;EAM3B,SAAS,EAAU,GAAsB,GAAuB;AAS9D,IARI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,EAAO,EAAI,IAET,EAAM,QAAQ,gBAAgB,EAAM,QAAQ,iBAC9C,EAAM,gBAAgB,EACtB,EAAU,EAAE,IAEV,EAAM,QAAQ,eAAe,EAAM,QAAQ,eAC7C,EAAM,gBAAgB,EACtB,EAAU,GAAG;;EAIjB,SAAS,EAAU,GAAmB;AACpC,OAAI,CAAC,EAAQ,MAAO;GACpB,IAAM,IAAQ,MAAM,KAClB,EAAQ,MAAM,iBAA8B,mDAAiD,CAC9F,EACK,IAAW,SAAS,eACpB,IAAa,EAAM,QAAQ,EAAS;AAC1C,OAAI,IAAa,GAAG;AAClB,MAAM,IAAI,OAAO;AACjB;;AAGF,MADc,IAAa,IAAY,EAAM,UAAU,EAAM,SAChD,OAAO;;EAMtB,IAAM,IAAc,QAAe,CACjC,eACA;GACE,yBAAyB,EAAA;GACzB,sBAAsB,EAAA;GACtB,sBAAsB,EAAA,SAAS;GAC/B,sBAAsB,EAAA,SAAS;GAChC,CACF,CAAC;yBAIA,EA2CM,OAAA;YA1CA;GAAJ,KAAI;GACH,OAAK,EAAE,EAAA,MAAW;GACnB,MAAK;GACJ,iBAAe,EAAA,WAAQ,SAAY,KAAA;MAI5B,EAAA,SAAA,GAAA,EADR,EAKE,OAAA;;GAHA,OAAM;GACN,eAAY;GACX,OAAK,EAAA;IAAA,WAAe,EAAA,MAAW;IAAS,OAAS,EAAA,MAAW;IAAK,CAAA;oCAIpE,EA2BM,GAAA,MAAA,EA1BU,EAAA,QAAP,YADT,EA2BM,OAAA;GAzBH,KAAK,OAAO,EAAI,MAAK;GACtB,OAAK,EAAA,CAAC,qBAAmB;mCACwB,EAAI,UAAU,EAAA;mCAAsD,EAAI,YAAY,EAAA;;GAIrI,MAAK;GACJ,cAAY,EAAI;GAChB,gBAAc,EAAI,UAAU,EAAA;GAC5B,iBAAe,EAAI,YAAY,EAAA,WAAQ,SAAY,KAAA;GACnD,UAAU,EAAA,YAAY,EAAI,WAAQ,KAAQ,EAAI,UAAU,EAAA,QAAa,IAAA;GACrE,UAAK,MAAE,EAAO,EAAG;GACjB,YAAO,MAAE,EAAU,GAAQ,EAAG;MAE/B,EAUM,OAVN,GAUM,CARQ,EAAI,QAAA,GAAA,EAAhB,EAES,QAFT,GAES,EADP,EAAI,KAAI,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAIV,EAEO,QAFP,GAEO,CADL,EAAuD,EAAA,QAAA,SAAA,EAAnC,QAAQ,GAAG,QAAwB,CAAA,EAAA,EAAnB,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA"}

package/dist/design-system178.js

@@ -0,0 +1,8 @@
+import e from "./design-system176.js";
+/* empty css                 */
+//#region src/components/BSegmented/BSegmented.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=design-system178.js.map

package/dist/design-system178.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system178.js","names":[],"sources":["../src/components/BSegmented/BSegmented.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\n\nimport type { BSegmentedOption, BSegmentedRawOption } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  modelValue,\n  defaultValue,\n  options = [],\n  disabled = false,\n  size = 'default',\n  block = false,\n} = defineProps<{\n  /**\n   * Currently selected value (controlled / two-way binding via v-model).\n   * When provided, the component is in controlled mode.\n   */\n  modelValue?: string | number;\n  /**\n   * Initial selected value for uncontrolled mode.\n   * Ignored when `modelValue` is set.\n   * @default first option value\n   */\n  defaultValue?: string | number;\n  /** Segmented options. Accepts strings, numbers, or option objects. */\n  options?: BSegmentedRawOption[];\n  /** Whether the whole control is disabled. @default false */\n  disabled?: boolean;\n  /** Size of the component. @default 'default' */\n  size?: 'small' | 'default' | 'large';\n  /** Whether the segmented fills the full width of its container. @default false */\n  block?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the selected value changes. */\n  (e: 'update:modelValue', value: string | number): void;\n  /** Fires when the selected value changes (mirrors `update:modelValue`). */\n  (e: 'change', value: string | number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom label renderer for each option. Receives the resolved option object. */\n  label?: (props: { option: BSegmentedOption }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Normalise options\n// ─────────────────────────────────────────────\nconst normalizedOptions = computed<BSegmentedOption[]>(() =>\n  options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt, disabled: false };\n    }\n    return {\n      label: String(opt.label ?? opt.value),\n      value: opt.value,\n      disabled: opt.disabled ?? false,\n      icon: opt.icon,\n    };\n  }),\n);\n\n// ─────────────────────────────────────────────\n// Internal selection state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => modelValue !== undefined);\n\nconst internalValue = ref<string | number | undefined>(\n  modelValue ?? defaultValue ?? normalizedOptions.value[0]?.value,\n);\n\n// Sync controlled value → internal\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val !== undefined) internalValue.value = val;\n  },\n);\n\n// Sync first option as default when options change and nothing is selected\nwatch(normalizedOptions, (opts) => {\n  if (internalValue.value === undefined && opts.length > 0) {\n    internalValue.value = opts[0].value;\n  }\n});\n\nconst selectedValue = computed(() => (isControlled.value ? modelValue : internalValue.value));\n\n// ─────────────────────────────────────────────\n// Thumb (animated indicator) positioning\n// ─────────────────────────────────────────────\nconst rootRef = ref<HTMLElement | null>(null);\nconst thumbStyle = ref<{ transform: string; width: string } | null>(null);\n\nfunction updateThumb(index: number) {\n  if (!rootRef.value) return;\n  const items = rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item');\n  const target = items[index];\n  if (!target) return;\n\n  const containerLeft = rootRef.value.getBoundingClientRect().left;\n  const { left, width } = target.getBoundingClientRect();\n  thumbStyle.value = {\n    transform: `translateX(${left - containerLeft}px)`,\n    width: `${width}px`,\n  };\n}\n\nconst selectedIndex = computed(() =>\n  normalizedOptions.value.findIndex((o) => o.value === selectedValue.value),\n);\n\nwatch(\n  selectedIndex,\n  async (idx) => {\n    if (idx < 0) return;\n    await nextTick();\n    updateThumb(idx);\n  },\n  { immediate: false },\n);\n\nonMounted(() => {\n  if (selectedIndex.value >= 0) updateThumb(selectedIndex.value);\n});\n\n// ─────────────────────────────────────────────\n// Selection logic\n// ─────────────────────────────────────────────\nfunction select(opt: BSegmentedOption) {\n  if (disabled || opt.disabled) return;\n  if (opt.value === selectedValue.value) return;\n\n  if (!isControlled.value) {\n    internalValue.value = opt.value;\n  }\n  emit('update:modelValue', opt.value);\n  emit('change', opt.value);\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent, opt: BSegmentedOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    select(opt);\n  }\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusNext(1);\n  }\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    focusNext(-1);\n  }\n}\n\nfunction focusNext(direction: 1 | -1) {\n  if (!rootRef.value) return;\n  const items = Array.from(\n    rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item:not([aria-disabled=\"true\"])'),\n  );\n  const activeEl = document.activeElement as HTMLElement;\n  const currentIdx = items.indexOf(activeEl);\n  if (currentIdx < 0) {\n    items[0]?.focus();\n    return;\n  }\n  const next = (currentIdx + direction + items.length) % items.length;\n  items[next]?.focus();\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-segmented',\n  {\n    'b-segmented--disabled': disabled,\n    'b-segmented--block': block,\n    'b-segmented--small': size === 'small',\n    'b-segmented--large': size === 'large',\n  },\n]);\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    role=\"group\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n  >\n    <!-- Animated thumb - positioned via JS -->\n    <div\n      v-if=\"thumbStyle\"\n      class=\"b-segmented__thumb\"\n      aria-hidden=\"true\"\n      :style=\"{ transform: thumbStyle.transform, width: thumbStyle.width }\"\n    />\n\n    <!-- Items -->\n    <div\n      v-for=\"opt in normalizedOptions\"\n      :key=\"String(opt.value)\"\n      class=\"b-segmented__item\"\n      :class=\"{\n        'b-segmented__item--selected': opt.value === selectedValue,\n        'b-segmented__item--disabled': opt.disabled || disabled,\n      }\"\n      role=\"radio\"\n      :aria-label=\"opt.label\"\n      :aria-checked=\"opt.value === selectedValue\"\n      :aria-disabled=\"opt.disabled || disabled ? 'true' : undefined\"\n      :tabindex=\"disabled || opt.disabled ? -1 : opt.value === selectedValue ? 0 : -1\"\n      @click=\"select(opt)\"\n      @keydown=\"onKeydown($event, opt)\"\n    >\n      <div class=\"b-segmented__item-inner\">\n        <!-- Icon -->\n        <span v-if=\"opt.icon\" class=\"b-segmented__item-icon\" aria-hidden=\"true\">{{\n          opt.icon\n        }}</span>\n\n        <!-- Label - slot or prop -->\n        <span class=\"b-segmented__item-label\">\n          <slot name=\"label\" :option=\"opt\">{{ opt.label }}</slot>\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BSegmented - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-segmented {\n  /* Surface */\n  --b-segmented-bg: oklch(95% 0.003 260);\n  --b-segmented-border-radius: 8px;\n  --b-segmented-padding: 2px;\n\n  /* Item */\n  --b-segmented-item-color: oklch(40% 0.02 260);\n  --b-segmented-item-hover-color: oklch(20% 0.02 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 50%);\n  --b-segmented-item-padding: 0 11px;\n  --b-segmented-item-border-radius: 6px;\n\n  /* Selected thumb */\n  --b-segmented-thumb-bg: oklch(100% 0 0);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 10%), 0 0 0 1px oklch(0% 0 0 / 6%);\n  --b-segmented-thumb-transition:\n    transform 200ms cubic-bezier(0.34, 0.69, 0.1, 1), width 200ms cubic-bezier(0.34, 0.69, 0.1, 1);\n\n  /* Selected text */\n  --b-segmented-selected-color: oklch(20% 0.02 260);\n  --b-segmented-selected-font-weight: 500;\n\n  /* Disabled */\n  --b-segmented-disabled-opacity: 0.4;\n  --b-segmented-disabled-cursor: not-allowed;\n\n  /* Height variants */\n  --b-segmented-height: 32px;\n\n  /* Focus ring */\n  --b-segmented-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n\n  /* Transition */\n  --b-segmented-transition-duration: 200ms;\n\n  /* ── Layout ── */\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  background: var(--b-segmented-bg);\n  border-radius: var(--b-segmented-border-radius);\n  padding: var(--b-segmented-padding);\n  box-sizing: border-box;\n  user-select: none;\n  height: var(--b-segmented-height);\n  font-size: 14px;\n  line-height: 1;\n}\n\n/* ── Block (full width) ── */\n.b-segmented--block {\n  display: flex;\n  width: 100%;\n}\n\n.b-segmented--block .b-segmented__item {\n  flex: 1;\n}\n\n/* ── Size variants ── */\n.b-segmented--small {\n  --b-segmented-height: 24px;\n  --b-segmented-item-padding: 0 7px;\n  font-size: 12px;\n}\n\n.b-segmented--large {\n  --b-segmented-height: 40px;\n  --b-segmented-item-padding: 0 15px;\n  font-size: 16px;\n}\n\n/* ── Thumb (sliding indicator) ── */\n.b-segmented__thumb {\n  position: absolute;\n  top: var(--b-segmented-padding);\n  left: 0;\n  height: calc(100% - var(--b-segmented-padding) * 2);\n  background: var(--b-segmented-thumb-bg);\n  border-radius: var(--b-segmented-item-border-radius);\n  box-shadow: var(--b-segmented-thumb-shadow);\n  transition: var(--b-segmented-thumb-transition);\n  pointer-events: none;\n  will-change: transform, width;\n}\n\n/* ── Item ── */\n.b-segmented__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--b-segmented-height) - var(--b-segmented-padding) * 2);\n  padding: var(--b-segmented-item-padding);\n  border-radius: var(--b-segmented-item-border-radius);\n  color: var(--b-segmented-item-color);\n  cursor: pointer;\n  transition:\n    color var(--b-segmented-transition-duration),\n    background var(--b-segmented-transition-duration);\n  white-space: nowrap;\n  outline: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n.b-segmented__item:hover:not(.b-segmented__item--selected):not(.b-segmented__item--disabled) {\n  color: var(--b-segmented-item-hover-color);\n  background: var(--b-segmented-item-hover-bg);\n}\n\n.b-segmented__item:focus-visible {\n  box-shadow: var(--b-segmented-focus-ring);\n}\n\n/* ── Selected item ── */\n.b-segmented__item--selected {\n  color: var(--b-segmented-selected-color);\n  font-weight: var(--b-segmented-selected-font-weight);\n}\n\n/* ── Disabled ── */\n.b-segmented--disabled,\n.b-segmented__item--disabled {\n  opacity: var(--b-segmented-disabled-opacity);\n  cursor: var(--b-segmented-disabled-cursor);\n  pointer-events: none;\n}\n\n/* Re-enable pointer events on items when only the item is disabled (not whole control) */\n.b-segmented:not(.b-segmented--disabled) .b-segmented__item--disabled {\n  pointer-events: auto;\n  cursor: var(--b-segmented-disabled-cursor);\n}\n\n/* ── Inner wrapper (icon + label) ── */\n.b-segmented__item-inner {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  line-height: 1;\n}\n\n.b-segmented__item-icon {\n  display: flex;\n  align-items: center;\n  font-size: 1em;\n  flex-shrink: 0;\n}\n\n.b-segmented__item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-segmented {\n  --b-segmented-bg: oklch(22% 0.02 260);\n  --b-segmented-item-color: oklch(72% 0.01 260);\n  --b-segmented-item-hover-color: oklch(92% 0.005 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n  --b-segmented-thumb-bg: oklch(30% 0.02 260);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n  --b-segmented-selected-color: oklch(95% 0.005 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-segmented {\n    --b-segmented-bg: oklch(22% 0.02 260);\n    --b-segmented-item-color: oklch(72% 0.01 260);\n    --b-segmented-item-hover-color: oklch(92% 0.005 260);\n    --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n    --b-segmented-thumb-bg: oklch(30% 0.02 260);\n    --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n    --b-segmented-selected-color: oklch(95% 0.005 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-segmented {\n    --b-segmented-thumb-transition: none;\n    --b-segmented-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system179.js

@@ -1,8 +1,14 @@
-import e from "./design-system177.js";
-/* empty css                 */
-//#region src/components/BSkeleton/BSkeletonAvatar.vue
-var t = e;
+//#region src/components/BSelect/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Multiple = "multiple", e.Tags = "tags", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e;
+}({}), n = /* @__PURE__ */ function(e) {
+	return e.Error = "error", e.Warning = "warning", e;
+}({}), r = /* @__PURE__ */ function(e) {
+	return e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.TopLeft = "topLeft", e.TopRight = "topRight", e;
+}({});
 //#endregion
-export { t as default };
+export { e as BSelectMode, r as BSelectPlacement, n as BSelectStatus, t as BSelectVariant };
 
 //# sourceMappingURL=design-system179.js.map

package/dist/design-system179.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system179.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":""}
+{"version":3,"file":"design-system179.js","names":[],"sources":["../src/components/BSelect/types.ts"],"sourcesContent":["export interface BSelectOption {\n  /** Display label for the option. Falls back to `value` if omitted. */\n  label?: string;\n  /** The value submitted when this option is selected. */\n  value: string | number;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n  /** Grouping: nested options under this group label. */\n  options?: BSelectOption[];\n}\n\nexport enum BSelectMode {\n  Multiple = 'multiple',\n  Tags = 'tags',\n}\n\nexport enum BSelectVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n}\n\nexport enum BSelectStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BSelectPlacement {\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n}\n\nexport interface BSelectFieldNames {\n  label?: string;\n  value?: string;\n  options?: string;\n  groupLabel?: string;\n}\n"],"mappings":";AAWA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,OAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,UAAA,WACA,EAAA,WAAA;KACD"}