@7pmlabs/design-system 1.0.9 → 1.0.11

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/BSlider/BSlider.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/BSlider/BSlider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false });\n\nimport { computed, onBeforeUnmount, ref, useAttrs } from 'vue';\nimport type { BSliderMarks, BSliderRange, BSliderTooltip } from './types.ts';\n\nconst attrs = useAttrs();\n\n//#region Props\nconst {\n  disabled = false,\n  dots = false,\n  included = true,\n  keyboard = true,\n  max = 100,\n  min = 0,\n  range = false,\n  reverse = false,\n  step = 1,\n  vertical = false,\n  tooltip = {},\n  marks,\n} = defineProps<{\n  /** Whether the slider is disabled. */\n  disabled?: boolean;\n  /** Whether only dots can be selected (step snap). */\n  dots?: boolean;\n  /** Whether the track between handles is filled. */\n  included?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Maximum value. */\n  max?: number;\n  /** Minimum value. */\n  min?: number;\n  /** Whether range mode is enabled (dual handles). Can also be an object with draggableTrack. */\n  range?: boolean | BSliderRange;\n  /** Whether the slider is reversed. */\n  reverse?: boolean;\n  /** Step granularity. null means only marks are selectable. */\n  step?: number | null;\n  /** Whether the slider is vertical. */\n  vertical?: boolean;\n  /** Tooltip configuration. */\n  tooltip?: BSliderTooltip;\n  /** Tick marks on the slider. Keys are percentages (0–100 mapped to min–max). */\n  marks?: BSliderMarks;\n}>();\n\nconst model = defineModel<number | [number, number]>({ default: 0 });\n\nconst emit = defineEmits<{\n  change: [value: number | [number, number]];\n  changeComplete: [value: number | [number, number]];\n}>();\n//#endregion\n\n//#region Internal state\nconst railRef = ref<HTMLElement | null>(null);\nconst rootRef = ref<HTMLElement | null>(null);\n\nconst dragging = ref<null | 'lower' | 'upper' | 'track'>(null);\nconst hovered = ref(false);\nconst focusedHandle = ref<'lower' | 'upper' | null>(null);\nconst tooltipVisible = ref<{ lower: boolean; upper: boolean }>({ lower: false, upper: false });\n\nconst trackDragStartValue = ref<[number, number] | null>(null);\nconst trackDragStartPos = ref(0);\n//#endregion\n\n//#region Computed values\nconst isRange = computed(() => range !== false);\nconst draggableTrack = computed(() => typeof range === 'object' && range.draggableTrack);\n\nconst lowerValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[0];\n  }\n  return min;\n});\n\nconst upperValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[1];\n  }\n  return model.value as number;\n});\n\nfunction valueToPercent(value: number): number {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction percentToValue(percent: number): number {\n  const raw = min + (percent / 100) * (max - min);\n  return snapToStep(raw);\n}\n\nfunction snapToStep(value: number): number {\n  if (step === null) {\n    if (!marks) return clamp(value);\n    const markValues = Object.keys(marks).map(Number);\n    let closest = markValues[0] ?? min;\n    let closestDist = Math.abs(value - closest);\n    for (const mv of markValues) {\n      const dist = Math.abs(value - mv);\n      if (dist < closestDist) {\n        closest = mv;\n        closestDist = dist;\n      }\n    }\n    return clamp(closest);\n  }\n  const stepped = Math.round((value - min) / step) * step + min;\n  return clamp(stepped);\n}\n\nfunction clamp(value: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nconst lowerPercent = computed(() => valueToPercent(lowerValue.value));\nconst upperPercent = computed(() => valueToPercent(upperValue.value));\n\nconst trackStyle = computed(() => {\n  const start = isRange.value ? lowerPercent.value : 0;\n  const length = isRange.value\n    ? upperPercent.value - lowerPercent.value\n    : upperPercent.value;\n\n  if (vertical) {\n    return reverse\n      ? { top: `${100 - start - length}%`, height: `${length}%` }\n      : { bottom: `${100 - start - length}%`, height: `${length}%` };\n  }\n  return reverse\n    ? { right: `${start}%`, width: `${length}%` }\n    : { left: `${start}%`, width: `${length}%` };\n});\n\nconst lowerHandleStyle = computed(() => {\n  const pct = lowerPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst upperHandleStyle = computed(() => {\n  const pct = upperPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst markList = computed(() => {\n  if (!marks) return [];\n  return Object.entries(marks).map(([key, val]) => {\n    const numKey = Number(key);\n    const percent = valueToPercent(numKey);\n    const isActive =\n      included &&\n      (isRange.value\n        ? numKey >= lowerValue.value && numKey <= upperValue.value\n        : numKey <= upperValue.value);\n    const label = typeof val === 'string' ? val : val.label;\n    const style = typeof val === 'object' ? val.style : undefined;\n    return { value: numKey, percent, isActive, label, style };\n  });\n});\n\nconst dotList = computed(() => {\n  if (!dots || step === null) return [];\n  const result: { value: number; percent: number; isActive: boolean }[] = [];\n  for (let v = min; v <= max; v += step) {\n    const percent = valueToPercent(v);\n    const isActive =\n      included &&\n      (isRange.value\n        ? v >= lowerValue.value && v <= upperValue.value\n        : v <= upperValue.value);\n    result.push({ value: v, percent, isActive });\n  }\n  return result;\n});\n\nfunction formatTooltip(value: number): string | null {\n  if (tooltip.formatter === null) return null;\n  if (tooltip.formatter) return tooltip.formatter(value);\n  return String(value);\n}\n\nconst lowerTooltipText = computed(() => formatTooltip(lowerValue.value));\nconst upperTooltipText = computed(() => formatTooltip(upperValue.value));\n\nconst showLowerTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.lower || dragging.value === 'lower' || dragging.value === 'track';\n});\n\nconst showUpperTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.upper || dragging.value === 'upper' || dragging.value === 'track';\n});\n//#endregion\n\n//#region Event handlers\nfunction getPercentFromEvent(event: MouseEvent | TouchEvent): number {\n  if (!railRef.value) return 0;\n  const rect = railRef.value.getBoundingClientRect();\n  let clientPos: number;\n  let size: number;\n\n  if ('touches' in event) {\n    clientPos = vertical ? event.touches[0].clientY : event.touches[0].clientX;\n  } else {\n    clientPos = vertical ? event.clientY : event.clientX;\n  }\n\n  if (vertical) {\n    size = rect.height;\n    const offset = clientPos - rect.top;\n    return reverse ? (offset / size) * 100 : ((size - offset) / size) * 100;\n  } else {\n    size = rect.width;\n    const offset = clientPos - rect.left;\n    return reverse ? ((size - offset) / size) * 100 : (offset / size) * 100;\n  }\n}\n\nfunction getCloserHandle(percent: number): 'lower' | 'upper' {\n  if (!isRange.value) return 'upper';\n  const distToLower = Math.abs(percent - lowerPercent.value);\n  const distToUpper = Math.abs(percent - upperPercent.value);\n  if (distToLower < distToUpper) return 'lower';\n  if (distToUpper < distToLower) return 'upper';\n  return percent < lowerPercent.value ? 'lower' : 'upper';\n}\n\nfunction updateValue(handle: 'lower' | 'upper', newValue: number) {\n  if (isRange.value) {\n    const current = model.value as [number, number];\n    let updated: [number, number];\n    if (handle === 'lower') {\n      updated = [Math.min(newValue, current[1]), current[1]];\n    } else {\n      updated = [current[0], Math.max(newValue, current[0])];\n    }\n    model.value = updated;\n    emit('change', updated);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleRailClick(event: MouseEvent) {\n  if (disabled) return;\n  if ((event.target as HTMLElement).closest('.b-slider__handle')) return;\n\n  const percent = getPercentFromEvent(event);\n  const value = percentToValue(percent);\n  const handle = getCloserHandle(percent);\n\n  if (draggableTrack.value && isRange.value) {\n    const lp = lowerPercent.value;\n    const up = upperPercent.value;\n    if (percent >= lp && percent <= up) return;\n  }\n\n  updateValue(handle, value);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleDragStart(handle: 'lower' | 'upper' | 'track', event: MouseEvent | TouchEvent) {\n  if (disabled) return;\n  event.preventDefault();\n  dragging.value = handle;\n\n  if (handle === 'track' && isRange.value) {\n    trackDragStartValue.value = [...(model.value as [number, number])] as [number, number];\n    trackDragStartPos.value = getPercentFromEvent(event);\n  }\n\n  document.addEventListener('mousemove', handleDragMove);\n  document.addEventListener('mouseup', handleDragEnd);\n  document.addEventListener('touchmove', handleDragMove);\n  document.addEventListener('touchend', handleDragEnd);\n}\n\nfunction handleDragMove(event: MouseEvent | TouchEvent) {\n  if (!dragging.value || disabled) return;\n  const percent = getPercentFromEvent(event);\n\n  if (dragging.value === 'track' && trackDragStartValue.value) {\n    const delta = percent - trackDragStartPos.value;\n    const startLower = trackDragStartValue.value[0];\n    const startUpper = trackDragStartValue.value[1];\n    const lowerPct = valueToPercent(startLower) + delta;\n    const upperPct = valueToPercent(startUpper) + delta;\n\n    const newLower = percentToValue(lowerPct);\n    const newUpper = percentToValue(upperPct);\n\n    if (newLower >= min && newUpper <= max) {\n      model.value = [newLower, newUpper];\n      emit('change', [newLower, newUpper]);\n    }\n    return;\n  }\n\n  const value = percentToValue(percent);\n  updateValue(dragging.value as 'lower' | 'upper', value);\n}\n\nfunction handleDragEnd() {\n  if (dragging.value) {\n    emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n  }\n  dragging.value = null;\n  trackDragStartValue.value = null;\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n}\n\nfunction handleKeyDown(event: KeyboardEvent, handle: 'lower' | 'upper') {\n  if (disabled || !keyboard) return;\n  const effectiveStep = step ?? 1;\n  let delta = 0;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      delta = effectiveStep;\n      break;\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      delta = -effectiveStep;\n      break;\n    case 'Home':\n      delta = min - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    case 'End':\n      delta = max - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    default:\n      return;\n  }\n\n  event.preventDefault();\n  const currentVal = handle === 'lower' ? lowerValue.value : upperValue.value;\n  const newValue = snapToStep(currentVal + delta);\n  updateValue(handle, newValue);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleHandleFocus(handle: 'lower' | 'upper') {\n  focusedHandle.value = handle;\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleBlur(handle: 'lower' | 'upper') {\n  focusedHandle.value = null;\n  tooltipVisible.value[handle] = false;\n}\n\nfunction handleHandleMouseEnter(handle: 'lower' | 'upper') {\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleMouseLeave(handle: 'lower' | 'upper') {\n  if (focusedHandle.value !== handle && dragging.value !== handle) {\n    tooltipVisible.value[handle] = false;\n  }\n}\n\nfunction handleMouseEnter() {\n  hovered.value = true;\n}\n\nfunction handleMouseLeave() {\n  hovered.value = false;\n}\n\nfunction handleTrackMouseDown(event: MouseEvent) {\n  if (disabled || !draggableTrack.value) return;\n  handleDragStart('track', event);\n}\n//#endregion\n\n//#region Expose\nfunction focus() {\n  const el = rootRef.value?.querySelector('.b-slider__handle') as HTMLElement | null;\n  el?.focus();\n}\n\nfunction blur() {\n  const el = rootRef.value?.querySelector('.b-slider__handle:focus') as HTMLElement | null;\n  el?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Cleanup\nonBeforeUnmount(() => {\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-slider\"\n    :class=\"[\n      {\n        'b-slider--vertical': vertical,\n        'b-slider--disabled': disabled,\n        'b-slider--with-marks': !!marks,\n        'b-slider--reverse': reverse,\n        'b-slider--hovered': hovered,\n      },\n    ]\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <!-- Rail -->\n    <div\n      ref=\"railRef\"\n      class=\"b-slider__rail\"\n      @mousedown=\"handleRailClick\"\n    >\n      <!-- Track -->\n      <div\n        v-if=\"included\"\n        class=\"b-slider__track\"\n        :style=\"trackStyle\"\n        @mousedown.stop=\"handleTrackMouseDown\"\n      />\n\n      <!-- Dots -->\n      <span\n        v-for=\"dot in dotList\"\n        :key=\"`dot-${dot.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': dot.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - dot.percent}%` } : { bottom: `${100 - dot.percent}%` })\n          : (reverse ? { right: `${dot.percent}%` } : { left: `${dot.percent}%` })\n        \"\n      />\n\n      <!-- Marks -->\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-dot-${mark.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': mark.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n          : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n        \"\n      />\n\n      <!-- Lower handle (range only) -->\n      <div\n        v-if=\"isRange\"\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'lower' || focusedHandle === 'lower',\n        }\"\n        :style=\"lowerHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"min\"\n        :aria-valuemax=\"upperValue\"\n        :aria-valuenow=\"lowerValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) ? `${attrs['aria-label']} - minimum` : 'Minimum'\"\n        @mousedown=\"(e) => handleDragStart('lower', e)\"\n        @touchstart=\"(e) => handleDragStart('lower', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'lower')\"\n        @focus=\"handleHandleFocus('lower')\"\n        @blur=\"handleHandleBlur('lower')\"\n        @mouseenter=\"handleHandleMouseEnter('lower')\"\n        @mouseleave=\"handleHandleMouseLeave('lower')\"\n      >\n        <div\n          v-if=\"lowerTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showLowerTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ lowerTooltipText }}\n        </div>\n      </div>\n\n      <!-- Upper handle (always) -->\n      <div\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'upper' || focusedHandle === 'upper',\n        }\"\n        :style=\"upperHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"isRange ? lowerValue : min\"\n        :aria-valuemax=\"max\"\n        :aria-valuenow=\"upperValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) || (isRange ? 'Maximum' : 'Slider')\"\n        @mousedown=\"(e) => handleDragStart('upper', e)\"\n        @touchstart=\"(e) => handleDragStart('upper', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'upper')\"\n        @focus=\"handleHandleFocus('upper')\"\n        @blur=\"handleHandleBlur('upper')\"\n        @mouseenter=\"handleHandleMouseEnter('upper')\"\n        @mouseleave=\"handleHandleMouseLeave('upper')\"\n      >\n        <div\n          v-if=\"upperTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showUpperTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ upperTooltipText }}\n        </div>\n      </div>\n    </div>\n\n    <!-- Mark labels -->\n    <div v-if=\"marks\" class=\"b-slider__marks\">\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-label-${mark.value}`\"\n        class=\"b-slider__mark-text\"\n        :class=\"{ 'b-slider__mark-text--active': mark.isActive }\"\n        :style=\"{\n          ...(vertical\n            ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n            : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n          ),\n          ...mark.style,\n        }\"\n      >\n        {{ mark.label }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-slider {\n  --b-slider-rail-bg: rgba(0, 0, 0, 0.04);\n  --b-slider-rail-hover-bg: rgba(0, 0, 0, 0.06);\n  --b-slider-rail-size: 4px;\n  --b-slider-track-bg: #91caff;\n  --b-slider-track-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-slider-track-hover-bg: #69b1ff;\n  --b-slider-handle-color: #91caff;\n  --b-slider-handle-color-disabled: #bfbfbf;\n  --b-slider-handle-active-color: #1677ff;\n  --b-slider-handle-active-outline-color: rgba(22, 119, 255, 0.2);\n  --b-slider-handle-line-width: 2px;\n  --b-slider-handle-line-width-hover: 2.5px;\n  --b-slider-handle-size: 10px;\n  --b-slider-handle-size-hover: 12px;\n  --b-slider-dot-border-color: #f0f0f0;\n  --b-slider-dot-active-border-color: #91caff;\n  --b-slider-dot-size: 8px;\n  --b-slider-control-size: 10px;\n\n  position: relative;\n  box-sizing: border-box;\n  padding: 4px 0;\n  cursor: pointer;\n  touch-action: none;\n}\n\n.b-slider--vertical {\n  display: inline-block;\n  height: 100%;\n  min-height: 200px;\n  padding: 0 4px;\n}\n\n.b-slider--disabled {\n  cursor: not-allowed;\n}\n\n/* Rail */\n.b-slider__rail {\n  position: relative;\n  width: 100%;\n  height: var(--b-slider-rail-size);\n  background-color: var(--b-slider-rail-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__rail {\n  background-color: var(--b-slider-rail-hover-bg);\n}\n\n.b-slider--vertical .b-slider__rail {\n  width: var(--b-slider-rail-size);\n  height: 100%;\n}\n\n/* Track */\n.b-slider__track {\n  position: absolute;\n  height: 100%;\n  background-color: var(--b-slider-track-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__track {\n  background-color: var(--b-slider-track-hover-bg);\n}\n\n.b-slider--disabled .b-slider__track {\n  background-color: var(--b-slider-track-bg-disabled);\n}\n\n.b-slider--vertical .b-slider__track {\n  width: 100%;\n  height: auto;\n}\n\n/* Handle */\n.b-slider__handle {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  background-color: #fff;\n  border: var(--b-slider-handle-line-width) solid var(--b-slider-handle-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  cursor: grab;\n  outline: none;\n  transition:\n    width 0.2s,\n    height 0.2s,\n    border-color 0.2s,\n    border-width 0.2s,\n    box-shadow 0.2s;\n  touch-action: none;\n  z-index: 1;\n}\n\n.b-slider--vertical .b-slider__handle {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__handle:hover,\n.b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n}\n\n.b-slider__handle--active {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n  cursor: grabbing;\n}\n\n.b-slider__handle:focus-visible {\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n}\n\n.b-slider--disabled .b-slider__handle {\n  border-color: var(--b-slider-handle-color-disabled);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n.b-slider--disabled .b-slider__handle:hover,\n.b-slider--disabled .b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  border-width: var(--b-slider-handle-line-width);\n  border-color: var(--b-slider-handle-color-disabled);\n  box-shadow: none;\n}\n\n/* Tooltip */\n.b-slider__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%) scale(0.8);\n  padding: 4px 8px;\n  background-color: rgba(0, 0, 0, 0.85);\n  color: #fff;\n  font-size: 12px;\n  line-height: 1.4;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity 0.2s,\n    transform 0.2s;\n}\n\n.b-slider__tooltip--visible {\n  opacity: 1;\n  transform: translateX(-50%) scale(1);\n}\n\n.b-slider--vertical .b-slider__tooltip {\n  bottom: auto;\n  left: calc(100% + 8px);\n  top: 50%;\n  transform: translateY(-50%) scale(0.8);\n}\n\n.b-slider--vertical .b-slider__tooltip--visible {\n  transform: translateY(-50%) scale(1);\n}\n\n/* Dots */\n.b-slider__dot {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-dot-size);\n  height: var(--b-slider-dot-size);\n  background-color: #fff;\n  border: 2px solid var(--b-slider-dot-border-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.b-slider--vertical .b-slider__dot {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__dot--active {\n  border-color: var(--b-slider-dot-active-border-color);\n}\n\n/* Marks */\n.b-slider__marks {\n  position: relative;\n}\n\n.b-slider--vertical .b-slider__marks {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 3;\n  pointer-events: none;\n}\n\n.b-slider__mark-text {\n  position: absolute;\n  top: 8px;\n  transform: translateX(-50%);\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.65);\n  white-space: nowrap;\n  user-select: none;\n}\n\n.b-slider--vertical .b-slider__mark-text {\n  top: auto;\n  left: 20px;\n  transform: translateY(50%);\n}\n\n.b-slider__mark-text--active {\n  color: rgba(0, 0, 0, 0.88);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-slider {\n  --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n  --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n  --b-slider-track-bg: #177ddc;\n  --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-slider-track-hover-bg: #3c9ae8;\n  --b-slider-handle-color: #177ddc;\n  --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-slider-handle-active-color: #3c9ae8;\n  --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n  --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n  --b-slider-dot-active-border-color: #177ddc;\n}\n\n[data-prefers-color='dark'] .b-slider__tooltip {\n  background-color: rgba(255, 255, 255, 0.9);\n  color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__handle {\n  background-color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text--active {\n  color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-slider {\n    --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n    --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n    --b-slider-track-bg: #177ddc;\n    --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-slider-track-hover-bg: #3c9ae8;\n    --b-slider-handle-color: #177ddc;\n    --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-slider-handle-active-color: #3c9ae8;\n    --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n    --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n    --b-slider-dot-active-border-color: #177ddc;\n  }\n  [data-prefers-color='system'] .b-slider__tooltip {\n    background-color: rgba(255, 255, 255, 0.9);\n    color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__handle {\n    background-color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__mark-text {\n    color: rgba(255, 255, 255, 0.65);\n  }\n  [data-prefers-color='system'] .b-slider__mark-text--active {\n    color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-slider__handle,\n  .b-slider__track,\n  .b-slider__rail,\n  .b-slider__tooltip {\n    transition: none;\n  }\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"}