@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system129.js

@@ -1,8 +1,216 @@
-import e from "./design-system127.js";
-/* empty css                 */
-//#region src/components/BMenu/BMenuDivider.vue
-var t = e;
+import { BCommonSize as e } from "./design-system3.js";
+import { useComponentId as t } from "./design-system10.js";
+import { Fragment as n, computed as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, nextTick as ee, normalizeClass as c, openBlock as l, ref as u, renderList as d, toDisplayString as f, useAttrs as p, useModel as m, watch as h } from "vue";
+//#region src/components/BListbox/BListbox.vue?vue&type=script&setup=true&lang.ts
+var g = [
+	"id",
+	"tabindex",
+	"aria-label",
+	"aria-multiselectable",
+	"aria-disabled",
+	"aria-activedescendant"
+], _ = {
+	key: 0,
+	role: "presentation",
+	class: "b-listbox__group"
+}, v = {
+	class: "b-listbox__group-label",
+	"aria-hidden": !0
+}, y = ["aria-label"], b = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onMouseenter"
+], te = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onMouseenter"
+], x = /* @__PURE__ */ o({
+	__name: "BListbox",
+	props: /* @__PURE__ */ s({
+		options: {},
+		multiple: { type: Boolean },
+		disabled: { type: Boolean },
+		size: {},
+		valueKey: {},
+		labelKey: {},
+		id: {}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ s(["change"], ["update:modelValue"]),
+	setup(o, { expose: s, emit: x }) {
+		let S = o, C = x, w = m(o, "modelValue"), T = r(() => S.options ?? []), E = r(() => S.multiple ?? !1), D = r(() => S.disabled ?? !1), O = r(() => S.size ?? e.Medium), k = r(() => S.valueKey ?? "value"), A = r(() => S.labelKey ?? "label"), { componentUID: j } = t(), M = r(() => S.id ?? `b-listbox-${j.value}`), N = (e) => `${M.value}-option-${e}`, P = u(null), F = u(-1), I = u(""), L = null, R = (e) => {
+			let t = e[k.value];
+			return t === void 0 ? e.value : t;
+		}, z = (e) => {
+			let t = e[A.value];
+			return typeof t == "string" && t.length > 0 ? t : e.label;
+		}, B = (e) => {
+			let t = R(e);
+			return E.value ? Array.isArray(w.value) && w.value.includes(t) : w.value === t;
+		}, V = (e) => e ? !!e.disabled || D.value : !0, H = r(() => {
+			let e = [], t = null;
+			return T.value.forEach((n, r) => {
+				let i = {
+					type: "option",
+					option: n,
+					index: r,
+					group: n.group
+				};
+				n.group ? ((!t || t.group !== n.group) && (t = {
+					type: "group",
+					group: n.group,
+					rows: []
+				}, e.push(t)), t.rows.push(i)) : (t = null, e.push(i));
+			}), e;
+		}), U = (e) => {
+			let t = T.value[e];
+			if (!t || V(t)) return;
+			let n = R(t);
+			if (E.value) {
+				let e = Array.isArray(w.value) ? [...w.value] : [], t = e.indexOf(n);
+				t === -1 ? e.push(n) : e.splice(t, 1), w.value = e, C("change", e);
+			} else w.value = n, C("change", n);
+		}, W = (e, t) => {
+			let n = T.value;
+			if (n.length === 0) return -1;
+			let r = e;
+			for (let e = 0; e < n.length; e++) if (r = (r + t + n.length) % n.length, !V(n[r])) return r;
+			return -1;
+		}, G = () => {
+			let e = T.value;
+			for (let t = 0; t < e.length; t++) if (!V(e[t])) return t;
+			return -1;
+		}, K = () => {
+			let e = T.value;
+			for (let t = e.length - 1; t >= 0; t--) if (!V(e[t])) return t;
+			return -1;
+		}, q = () => {
+			let e = T.value;
+			(F.value === -1 || V(e[F.value])) && (F.value = G());
+		}, J = async () => {
+			if (await ee(), F.value < 0 || !P.value) return;
+			let e = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape : (e) => e.replace(/[^a-zA-Z0-9_-]/g, "\\$&"), t = P.value.querySelector(`#${e(N(F.value))}`);
+			if (t && typeof t.scrollIntoView == "function") try {
+				t.scrollIntoView({ block: "nearest" });
+			} catch {}
+		}, Y = (e) => {
+			L && clearTimeout(L), I.value += e.toLowerCase(), L = setTimeout(() => {
+				I.value = "";
+			}, 500);
+			let t = T.value, n = I.value, r = F.value === -1 ? 0 : F.value + (n.length === 1 ? 1 : 0);
+			for (let e = 0; e < t.length; e++) {
+				let i = (r + e) % t.length, a = t[i];
+				if (!V(a) && z(a).toLowerCase().startsWith(n)) {
+					F.value = i, J();
+					return;
+				}
+			}
+		}, X = (e) => {
+			if (!D.value && T.value.length !== 0) switch (e.key) {
+				case "ArrowDown": {
+					e.preventDefault();
+					let t = W(F.value === -1 ? -1 : F.value, 1);
+					t !== -1 && (F.value = t), J();
+					break;
+				}
+				case "ArrowUp": {
+					e.preventDefault();
+					let t = W(F.value === -1 ? 0 : F.value, -1);
+					t !== -1 && (F.value = t), J();
+					break;
+				}
+				case "Home":
+					e.preventDefault(), F.value = G(), J();
+					break;
+				case "End":
+					e.preventDefault(), F.value = K(), J();
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault(), q(), F.value !== -1 && U(F.value);
+					break;
+				default: e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), Y(e.key));
+			}
+		}, Z = (e) => {
+			D.value || V(T.value[e]) || (F.value = e, U(e));
+		}, Q = (e) => {
+			D.value || V(T.value[e]) || (F.value = e);
+		}, ne = () => {
+			if (F.value === -1) {
+				let e = T.value.findIndex((e) => B(e) && !V(e));
+				F.value = e === -1 ? G() : e;
+			}
+		};
+		s({
+			focus: () => {
+				P.value?.focus();
+			},
+			focusOption: (e) => {
+				let t = T.value.findIndex((t) => R(t) === e);
+				t !== -1 && !V(T.value[t]) && (F.value = t, P.value?.focus(), J());
+			}
+		}), h(() => T.value.length, (e) => {
+			F.value >= e && (F.value = -1);
+		});
+		let re = r(() => F.value >= 0 ? N(F.value) : void 0), $ = p(), ie = r(() => {
+			if (!($["aria-label"] || $["aria-labelledby"])) return "Options";
+		});
+		return (e, t) => (l(), i("ul", {
+			id: M.value,
+			ref_key: "listboxRef",
+			ref: P,
+			role: "listbox",
+			class: c(["b-listbox", [`b-listbox--${O.value}`, {
+				"b-listbox--disabled": D.value,
+				"b-listbox--multiple": E.value
+			}]]),
+			tabindex: D.value ? -1 : 0,
+			"aria-label": ie.value,
+			"aria-multiselectable": E.value || void 0,
+			"aria-disabled": D.value || void 0,
+			"aria-activedescendant": re.value,
+			onKeydown: X,
+			onFocus: ne
+		}, [(l(!0), i(n, null, d(H.value, (e, t) => (l(), i(n, { key: t }, [e.type === "group" ? (l(), i("li", _, [a("span", v, f(e.group), 1), a("ul", {
+			role: "group",
+			"aria-label": e.group,
+			class: "b-listbox__group-list"
+		}, [(l(!0), i(n, null, d(e.rows, (e) => (l(), i("li", {
+			id: N(e.index),
+			key: e.index,
+			role: "option",
+			class: c(["b-listbox__option", {
+				"b-listbox__option--selected": B(e.option),
+				"b-listbox__option--active": F.value === e.index,
+				"b-listbox__option--disabled": V(e.option)
+			}]),
+			"aria-selected": B(e.option),
+			"aria-disabled": V(e.option) || void 0,
+			onClick: (t) => Z(e.index),
+			onMouseenter: (t) => Q(e.index)
+		}, f(z(e.option)), 43, b))), 128))], 8, y)])) : (l(), i("li", {
+			id: N(e.index),
+			key: `opt-${e.index}`,
+			role: "option",
+			class: c(["b-listbox__option", {
+				"b-listbox__option--selected": B(e.option),
+				"b-listbox__option--active": F.value === e.index,
+				"b-listbox__option--disabled": V(e.option)
+			}]),
+			"aria-selected": B(e.option),
+			"aria-disabled": V(e.option) || void 0,
+			onClick: (t) => Z(e.index),
+			onMouseenter: (t) => Q(e.index)
+		}, f(z(e.option)), 43, te))], 64))), 128))], 42, g));
+	}
+});
 //#endregion
-export { t as default };
+export { x as default };
 
 //# sourceMappingURL=design-system129.js.map

package/dist/design-system129.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system129.js","names":[],"sources":["../src/components/BMenu/BMenuDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst { dashed = false } = defineProps<{\n  /** Whether divider line is dashed. @default false */\n  dashed?: boolean;\n}>();\n</script>\n\n<template>\n  <li :class=\"['b-menu-divider', { 'b-menu-divider--dashed': dashed }]\" role=\"separator\" />\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuDivider\n   ───────────────────────────────────────────── */\n.b-menu-divider {\n  height: 1px;\n  margin: 4px 12px;\n  background: rgba(5, 5, 5, 0.06);\n  list-style: none;\n}\n\n.b-menu-divider--dashed {\n  background: none;\n  border-top: 1px dashed rgba(5, 5, 5, 0.06);\n}\n\n[data-prefers-color='dark'] .b-menu-divider,\n.b-menu--dark .b-menu-divider {\n  background: rgba(253, 253, 253, 0.12);\n}\n\n[data-prefers-color='dark'] .b-menu-divider--dashed,\n.b-menu--dark .b-menu-divider--dashed {\n  background: none;\n  border-top-color: rgba(253, 253, 253, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-menu-divider {\n    background: rgba(253, 253, 253, 0.12);\n  }\n\n  [data-prefers-color='system'] .b-menu-divider--dashed {\n    background: none;\n    border-top-color: rgba(253, 253, 253, 0.12);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system129.js","names":[],"sources":["../src/components/BListbox/BListbox.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\n\nexport interface BListboxOption<V> {\n  /** Display label for the option. */\n  label: string;\n  /** Value associated with the option. */\n  value: V;\n  /** Whether the option is disabled and skipped by keyboard navigation. */\n  disabled?: boolean;\n  /** Optional group label — adjacent options sharing the same group are wrapped together. */\n  group?: string;\n}\n\nconst props = defineProps<{\n  /** Array of selectable options. */\n  options?: BListboxOption<T>[];\n  /** Whether multiple options can be selected at once. */\n  multiple?: boolean;\n  /** Disables the entire listbox — no keyboard nav, no selection. */\n  disabled?: boolean;\n  /** Visual size preset. */\n  size?: `${BCommonSize}`;\n  /** Property name on each option that holds the value. Defaults to `'value'`. */\n  valueKey?: string;\n  /** Property name on each option that holds the label. Defaults to `'label'`. */\n  labelKey?: string;\n  /** Optional id for the root listbox element. Auto-generated if omitted. */\n  id?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted whenever the selection changes. Single value or array depending on `multiple`. */\n  change: [value: T | T[]];\n}>();\n\nconst model = defineModel<T | T[] | null>({ default: null });\n\n// ─── Reactive accessors with defaults ───\nconst optionList = computed<BListboxOption<T>[]>(() => props.options ?? []);\nconst isMultiple = computed(() => props.multiple ?? false);\nconst isDisabled = computed(() => props.disabled ?? false);\nconst sizeClass = computed(() => props.size ?? BCommonSize.Medium);\nconst valueKeyName = computed(() => props.valueKey ?? 'value');\nconst labelKeyName = computed(() => props.labelKey ?? 'label');\n\nconst { componentUID } = useComponentId();\nconst listboxId = computed(() => props.id ?? `b-listbox-${componentUID.value}`);\nconst optionId = (index: number) => `${listboxId.value}-option-${index}`;\n\nconst listboxRef = ref<HTMLUListElement | null>(null);\nconst activeIndex = ref<number>(-1);\n\n// Type-ahead buffer\nconst typeAheadBuffer = ref('');\nlet typeAheadTimer: ReturnType<typeof setTimeout> | null = null;\n\n// ─────────────────────────────────────────────\n// Helpers\n// ─────────────────────────────────────────────\nconst getOptionValue = (opt: BListboxOption<T>): T => {\n  const key = valueKeyName.value;\n  const fromKey = (opt as unknown as Record<string, T>)[key];\n  return fromKey !== undefined ? fromKey : opt.value;\n};\n\nconst getOptionLabel = (opt: BListboxOption<T>): string => {\n  const key = labelKeyName.value;\n  const raw = (opt as unknown as Record<string, unknown>)[key];\n  if (typeof raw === 'string' && raw.length > 0) return raw;\n  return opt.label;\n};\n\nconst isOptionSelected = (opt: BListboxOption<T>): boolean => {\n  const v = getOptionValue(opt);\n  if (isMultiple.value) {\n    return Array.isArray(model.value) && model.value.includes(v);\n  }\n  return model.value === v;\n};\n\nconst isOptionDisabled = (opt: BListboxOption<T> | undefined): boolean => {\n  if (!opt) return true;\n  return !!opt.disabled || isDisabled.value;\n};\n\n// ─────────────────────────────────────────────\n// Grouped rendering structure\n// ─────────────────────────────────────────────\ninterface RenderRow {\n  type: 'option';\n  option: BListboxOption<T>;\n  index: number;\n  group?: string;\n}\ninterface RenderGroup {\n  type: 'group';\n  group: string;\n  rows: RenderRow[];\n}\ntype RenderItem = RenderGroup | RenderRow;\n\nconst renderItems = computed<RenderItem[]>(() => {\n  const result: RenderItem[] = [];\n  let currentGroup: RenderGroup | null = null;\n  optionList.value.forEach((opt, index) => {\n    const row: RenderRow = { type: 'option', option: opt, index, group: opt.group };\n    if (opt.group) {\n      if (!currentGroup || currentGroup.group !== opt.group) {\n        currentGroup = { type: 'group', group: opt.group, rows: [] };\n        result.push(currentGroup);\n      }\n      currentGroup.rows.push(row);\n    } else {\n      currentGroup = null;\n      result.push(row);\n    }\n  });\n  return result;\n});\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nconst selectIndex = (index: number) => {\n  const opt = optionList.value[index];\n  if (!opt || isOptionDisabled(opt)) return;\n  const v = getOptionValue(opt);\n\n  if (isMultiple.value) {\n    const current = Array.isArray(model.value) ? [...model.value] : [];\n    const i = current.indexOf(v);\n    if (i === -1) {\n      current.push(v);\n    } else {\n      current.splice(i, 1);\n    }\n    model.value = current;\n    emit('change', current);\n  } else {\n    model.value = v;\n    emit('change', v);\n  }\n};\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nconst findNextEnabled = (from: number, dir: 1 | -1): number => {\n  const list = optionList.value;\n  if (list.length === 0) return -1;\n  let i = from;\n  for (let n = 0; n < list.length; n++) {\n    i = (i + dir + list.length) % list.length;\n    if (!isOptionDisabled(list[i])) return i;\n  }\n  return -1;\n};\n\nconst findFirstEnabled = (): number => {\n  const list = optionList.value;\n  for (let i = 0; i < list.length; i++) {\n    if (!isOptionDisabled(list[i])) return i;\n  }\n  return -1;\n};\n\nconst findLastEnabled = (): number => {\n  const list = optionList.value;\n  for (let i = list.length - 1; i >= 0; i--) {\n    if (!isOptionDisabled(list[i])) return i;\n  }\n  return -1;\n};\n\nconst ensureActiveIndex = () => {\n  const list = optionList.value;\n  if (activeIndex.value === -1 || isOptionDisabled(list[activeIndex.value])) {\n    activeIndex.value = findFirstEnabled();\n  }\n};\n\nconst scrollActiveIntoView = async () => {\n  await nextTick();\n  if (activeIndex.value < 0) return;\n  if (!listboxRef.value) return;\n  const escape = typeof CSS !== 'undefined' && typeof CSS.escape === 'function'\n    ? CSS.escape\n    : (s: string) => s.replace(/[^a-zA-Z0-9_-]/g, '\\\\$&');\n  const el = listboxRef.value.querySelector<HTMLElement>(`#${escape(optionId(activeIndex.value))}`);\n  // jsdom and some embedded environments don't implement scrollIntoView — guard so a\n  // missing method (or a freak runtime error inside it) never propagates as an unhandled rejection.\n  if (el && typeof el.scrollIntoView === 'function') {\n    try {\n      el.scrollIntoView({ block: 'nearest' });\n    } catch {\n      /* no-op — non-critical UX nicety */\n    }\n  }\n};\n\nconst handleTypeAhead = (char: string) => {\n  if (typeAheadTimer) clearTimeout(typeAheadTimer);\n  typeAheadBuffer.value += char.toLowerCase();\n  typeAheadTimer = setTimeout(() => {\n    typeAheadBuffer.value = '';\n  }, 500);\n\n  const list = optionList.value;\n  const buf = typeAheadBuffer.value;\n  // For the first char of a new buffer, search starting AFTER the current active index;\n  // for continued buffers, re-evaluate from the active index so the prefix still matches.\n  const start = activeIndex.value === -1 ? 0 : activeIndex.value + (buf.length === 1 ? 1 : 0);\n  for (let n = 0; n < list.length; n++) {\n    const i = (start + n) % list.length;\n    const opt = list[i];\n    if (isOptionDisabled(opt)) continue;\n    const lbl = getOptionLabel(opt).toLowerCase();\n    if (lbl.startsWith(buf)) {\n      activeIndex.value = i;\n      void scrollActiveIntoView();\n      return;\n    }\n  }\n};\n\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (isDisabled.value) return;\n  if (optionList.value.length === 0) return;\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      const from = activeIndex.value === -1 ? -1 : activeIndex.value;\n      const next = findNextEnabled(from, 1);\n      if (next !== -1) activeIndex.value = next;\n      void scrollActiveIntoView();\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      const from = activeIndex.value === -1 ? 0 : activeIndex.value;\n      const next = findNextEnabled(from, -1);\n      if (next !== -1) activeIndex.value = next;\n      void scrollActiveIntoView();\n      break;\n    }\n    case 'Home': {\n      e.preventDefault();\n      activeIndex.value = findFirstEnabled();\n      void scrollActiveIntoView();\n      break;\n    }\n    case 'End': {\n      e.preventDefault();\n      activeIndex.value = findLastEnabled();\n      void scrollActiveIntoView();\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      e.preventDefault();\n      ensureActiveIndex();\n      if (activeIndex.value !== -1) selectIndex(activeIndex.value);\n      break;\n    }\n    default: {\n      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n        e.preventDefault();\n        handleTypeAhead(e.key);\n      }\n    }\n  }\n};\n\n// ─────────────────────────────────────────────\n// Mouse interaction\n// ─────────────────────────────────────────────\nconst handleOptionClick = (index: number) => {\n  if (isDisabled.value) return;\n  if (isOptionDisabled(optionList.value[index])) return;\n  activeIndex.value = index;\n  selectIndex(index);\n};\n\nconst handleOptionMouseEnter = (index: number) => {\n  if (isDisabled.value) return;\n  if (isOptionDisabled(optionList.value[index])) return;\n  activeIndex.value = index;\n};\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nconst handleFocus = () => {\n  if (activeIndex.value === -1) {\n    const selectedIdx = optionList.value.findIndex(\n      (o) => isOptionSelected(o) && !isOptionDisabled(o),\n    );\n    activeIndex.value = selectedIdx !== -1 ? selectedIdx : findFirstEnabled();\n  }\n};\n\nconst focus = () => {\n  listboxRef.value?.focus();\n};\n\nconst focusOption = (value: T) => {\n  const idx = optionList.value.findIndex((o) => getOptionValue(o) === value);\n  if (idx !== -1 && !isOptionDisabled(optionList.value[idx])) {\n    activeIndex.value = idx;\n    listboxRef.value?.focus();\n    void scrollActiveIntoView();\n  }\n};\n\ndefineExpose({ focus, focusOption });\n\n// Reset active index if it becomes invalid after option list changes.\nwatch(\n  () => optionList.value.length,\n  (len) => {\n    if (activeIndex.value >= len) activeIndex.value = -1;\n  },\n);\n\n// Computed aria-activedescendant id\nconst activeDescendantId = computed(() =>\n  activeIndex.value >= 0 ? optionId(activeIndex.value) : undefined,\n);\n\n/**\n * `role=\"listbox\"` requires an accessible name. Default to a generic \"Options\"\n * label; consumers override via fallthrough `aria-label` / `aria-labelledby`.\n */\nconst attrs = useAttrs();\nconst fallbackAriaLabel = computed(() => {\n  if (attrs['aria-label'] || attrs['aria-labelledby']) return undefined;\n  return 'Options';\n});\n</script>\n\n<template>\n  <ul\n    :id=\"listboxId\"\n    ref=\"listboxRef\"\n    role=\"listbox\"\n    class=\"b-listbox\"\n    :class=\"[\n      `b-listbox--${sizeClass}`,\n      {\n        'b-listbox--disabled': isDisabled,\n        'b-listbox--multiple': isMultiple,\n      },\n    ]\"\n    :tabindex=\"isDisabled ? -1 : 0\"\n    :aria-label=\"fallbackAriaLabel\"\n    :aria-multiselectable=\"isMultiple || undefined\"\n    :aria-disabled=\"isDisabled || undefined\"\n    :aria-activedescendant=\"activeDescendantId\"\n    @keydown=\"handleKeydown\"\n    @focus=\"handleFocus\"\n  >\n    <template v-for=\"(item, idx) in renderItems\" :key=\"idx\">\n      <!-- Group wrapper -->\n      <li v-if=\"item.type === 'group'\" role=\"presentation\" class=\"b-listbox__group\">\n        <span class=\"b-listbox__group-label\" :aria-hidden=\"true\">{{ item.group }}</span>\n        <ul role=\"group\" :aria-label=\"item.group\" class=\"b-listbox__group-list\">\n          <li\n            v-for=\"row in item.rows\"\n            :id=\"optionId(row.index)\"\n            :key=\"row.index\"\n            role=\"option\"\n            class=\"b-listbox__option\"\n            :class=\"{\n              'b-listbox__option--selected': isOptionSelected(row.option),\n              'b-listbox__option--active': activeIndex === row.index,\n              'b-listbox__option--disabled': isOptionDisabled(row.option),\n            }\"\n            :aria-selected=\"isOptionSelected(row.option)\"\n            :aria-disabled=\"isOptionDisabled(row.option) || undefined\"\n            @click=\"handleOptionClick(row.index)\"\n            @mouseenter=\"handleOptionMouseEnter(row.index)\"\n          >\n            {{ getOptionLabel(row.option) }}\n          </li>\n        </ul>\n      </li>\n\n      <!-- Plain option -->\n      <li\n        v-else\n        :id=\"optionId(item.index)\"\n        :key=\"`opt-${item.index}`\"\n        role=\"option\"\n        class=\"b-listbox__option\"\n        :class=\"{\n          'b-listbox__option--selected': isOptionSelected(item.option),\n          'b-listbox__option--active': activeIndex === item.index,\n          'b-listbox__option--disabled': isOptionDisabled(item.option),\n        }\"\n        :aria-selected=\"isOptionSelected(item.option)\"\n        :aria-disabled=\"isOptionDisabled(item.option) || undefined\"\n        @click=\"handleOptionClick(item.index)\"\n        @mouseenter=\"handleOptionMouseEnter(item.index)\"\n      >\n        {{ getOptionLabel(item.option) }}\n      </li>\n    </template>\n  </ul>\n</template>\n\n<style>\n.b-listbox {\n  /* Component tokens — defined on the component root, never on :root */\n  --b-listbox-bg: #ffffff;\n  --b-listbox-fg: rgba(0, 0, 0, 0.88);\n  --b-listbox-border-color: #d9d9d9;\n  --b-listbox-radius: 6px;\n  --b-listbox-option-padding-x: 12px;\n  --b-listbox-option-padding-y: 6px;\n  --b-listbox-option-bg-hover: rgba(0, 0, 0, 0.04);\n  --b-listbox-option-bg-active: rgba(0, 0, 0, 0.06);\n  --b-listbox-option-bg-selected: oklch(95% 0.04 240);\n  --b-listbox-option-fg-selected: oklch(45% 0.18 258);\n  --b-listbox-font-size: 14px;\n  --b-listbox-group-label-color: rgba(0, 0, 0, 0.65);\n  --b-listbox-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-listbox-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.2);\n  --b-listbox-transition-duration: 150ms;\n\n  list-style: none;\n  margin: 0;\n  padding: 4px 0;\n  background: var(--b-listbox-bg);\n  color: var(--b-listbox-fg);\n  border: 1px solid var(--b-listbox-border-color);\n  border-radius: var(--b-listbox-radius);\n  font-size: var(--b-listbox-font-size);\n  outline: none;\n  max-height: 320px;\n  overflow-y: auto;\n  user-select: none;\n}\n\n.b-listbox--sm {\n  --b-listbox-font-size: 13px;\n  --b-listbox-option-padding-x: 10px;\n  --b-listbox-option-padding-y: 4px;\n}\n\n.b-listbox--lg {\n  --b-listbox-font-size: 16px;\n  --b-listbox-option-padding-x: 14px;\n  --b-listbox-option-padding-y: 8px;\n}\n\n.b-listbox:focus-visible {\n  box-shadow: var(--b-listbox-focus-ring);\n}\n\n.b-listbox--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* ── Option ── */\n.b-listbox__option {\n  padding: var(--b-listbox-option-padding-y) var(--b-listbox-option-padding-x);\n  cursor: pointer;\n  display: block;\n  line-height: 1.5;\n  transition:\n    background-color var(--b-listbox-transition-duration) ease,\n    color var(--b-listbox-transition-duration) ease;\n}\n\n.b-listbox__option--active {\n  background-color: var(--b-listbox-option-bg-active);\n}\n\n.b-listbox__option--selected {\n  background-color: var(--b-listbox-option-bg-selected);\n  color: var(--b-listbox-option-fg-selected);\n  font-weight: 500;\n}\n\n.b-listbox__option--disabled {\n  cursor: not-allowed;\n  color: var(--b-listbox-disabled-color);\n  background-color: transparent;\n}\n\n.b-listbox__option:not(.b-listbox__option--disabled):hover {\n  background-color: var(--b-listbox-option-bg-hover);\n}\n\n/* ── Group ── */\n.b-listbox__group {\n  display: block;\n  padding: 0;\n}\n\n.b-listbox__group-label {\n  display: block;\n  padding: 6px var(--b-listbox-option-padding-x) 4px;\n  color: var(--b-listbox-group-label-color);\n  font-size: 0.85em;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.b-listbox__group-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-listbox {\n  --b-listbox-bg: #141414;\n  --b-listbox-fg: rgba(255, 255, 255, 0.88);\n  --b-listbox-border-color: #424242;\n  --b-listbox-option-bg-hover: rgba(255, 255, 255, 0.08);\n  --b-listbox-option-bg-active: rgba(255, 255, 255, 0.12);\n  --b-listbox-option-bg-selected: oklch(28% 0.08 258);\n  --b-listbox-option-fg-selected: oklch(80% 0.14 258);\n  --b-listbox-group-label-color: rgba(255, 255, 255, 0.45);\n  --b-listbox-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-listbox-focus-ring: 0 0 0 2px rgba(22, 104, 220, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-listbox {\n    --b-listbox-bg: #141414;\n    --b-listbox-fg: rgba(255, 255, 255, 0.88);\n    --b-listbox-border-color: #424242;\n    --b-listbox-option-bg-hover: rgba(255, 255, 255, 0.08);\n    --b-listbox-option-bg-active: rgba(255, 255, 255, 0.12);\n    --b-listbox-option-bg-selected: oklch(28% 0.08 258);\n    --b-listbox-option-fg-selected: oklch(80% 0.14 258);\n    --b-listbox-group-label-color: rgba(255, 255, 255, 0.45);\n    --b-listbox-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-listbox-focus-ring: 0 0 0 2px rgba(22, 104, 220, 0.3);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-listbox__option {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system131.js

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

package/dist/design-system131.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system131.js","names":["$slots"],"sources":["../src/components/BMenu/BMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted } from 'vue';\nimport {\n  BMenuContextKey,\n  BMenuSubMenuContextKey,\n  type BMenuClickInfo,\n  type BMenuContext,\n  type BMenuSubMenuContext,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  itemKey,\n  label = '',\n  icon = undefined,\n  disabled = false,\n  danger = false,\n  extra = undefined,\n  title = undefined,\n} = defineProps<{\n  /** Unique key identifying this menu item. */\n  itemKey: string;\n  /** Display label text. */\n  label?: string;\n  /** Icon name rendered before the label. */\n  icon?: string;\n  /** Whether the item is disabled. @default false */\n  disabled?: boolean;\n  /** Display with danger (red) styling. @default false */\n  danger?: boolean;\n  /** Extra content at the right side. */\n  extra?: string;\n  /** Tooltip title when collapsed. */\n  title?: string;\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n  icon?(): unknown;\n  extra?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Inject context\n// ─────────────────────────────────────────────\nconst menu = inject<BMenuContext>(BMenuContextKey)!;\nconst subMenuCtx = inject<BMenuSubMenuContext | null>(BMenuSubMenuContextKey, null);\n\nconst level = computed(() => (subMenuCtx?.level ?? 0) + 1);\nconst keyPath = computed(() => [...(subMenuCtx?.keyPath ?? []), itemKey]);\n\n// Register key path with root menu\nonMounted(() => {\n  menu.registerKeyPath(itemKey, keyPath.value);\n});\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst isSelected = computed(() => menu.selectedKeys.value.includes(itemKey));\n\nconst itemRole = computed(() => {\n  if (!menu.selectable.value) return 'menuitem';\n  return menu.multiple.value ? 'menuitemcheckbox' : 'menuitemradio';\n});\n\nconst paddingLeft = computed(() => {\n  if (menu.mode.value !== 'inline') return undefined;\n  if (menu.inlineCollapsed.value) return undefined;\n  return `${level.value * menu.inlineIndent.value}px`;\n});\n\nconst itemClasses = computed(() => [\n  'b-menu-item',\n  {\n    'b-menu-item--selected': isSelected.value,\n    'b-menu-item--disabled': disabled,\n    'b-menu-item--danger': danger,\n    'b-menu-item--collapsed': menu.inlineCollapsed.value,\n    'b-menu-item--horizontal': menu.mode.value === 'horizontal',\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction handleClick(e: MouseEvent) {\n  if (disabled) return;\n\n  const info: BMenuClickInfo = {\n    key: itemKey,\n    keyPath: keyPath.value,\n    domEvent: e,\n  };\n  menu.onItemClick(info);\n}\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (disabled) return;\n\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    const info: BMenuClickInfo = {\n      key: itemKey,\n      keyPath: keyPath.value,\n      domEvent: e,\n    };\n    menu.onItemClick(info);\n  }\n}\n</script>\n\n<template>\n  <li\n    :class=\"itemClasses\"\n    :style=\"{ paddingInlineStart: paddingLeft }\"\n    :role=\"itemRole\"\n    :tabindex=\"disabled ? -1 : 0\"\n    :aria-disabled=\"disabled || undefined\"\n    :aria-checked=\"menu.selectable.value ? isSelected : undefined\"\n    :title=\"title ?? (menu.inlineCollapsed.value ? label : undefined)\"\n    :data-menu-key=\"itemKey\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <span v-if=\"icon || $slots.icon\" class=\"b-menu-item__icon\" aria-hidden=\"true\">\n      <slot name=\"icon\">{{ icon }}</slot>\n    </span>\n    <span v-if=\"!menu.inlineCollapsed.value\" class=\"b-menu-item__label\">\n      <slot>{{ label }}</slot>\n    </span>\n    <span v-if=\"extra && !menu.inlineCollapsed.value\" class=\"b-menu-item__extra\">\n      <slot name=\"extra\">{{ extra }}</slot>\n    </span>\n  </li>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuItem\n   ───────────────────────────────────────────── */\n.b-menu-item {\n  display: flex;\n  align-items: center;\n  height: var(--b-menu-item-height);\n  margin-block: var(--b-menu-item-margin-block);\n  margin-inline: var(--b-menu-item-margin-inline);\n  padding-inline: var(--b-menu-item-padding-inline);\n  border-radius: var(--b-menu-item-border-radius);\n  color: var(--b-menu-item-color);\n  cursor: pointer;\n  user-select: none;\n  list-style: none;\n  outline: none;\n  position: relative;\n  transition:\n    background var(--b-menu-transition-duration),\n    color var(--b-menu-transition-duration),\n    padding var(--b-menu-transition-duration);\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.b-menu-item:hover:not(.b-menu-item--disabled) {\n  background: var(--b-menu-item-hover-bg);\n  color: var(--b-menu-item-hover-color);\n}\n\n.b-menu-item:focus-visible {\n  outline: 2px solid #1677ff;\n  outline-offset: -2px;\n}\n\n/* ── Selected ── */\n.b-menu-item--selected {\n  background: var(--b-menu-item-selected-bg);\n  color: var(--b-menu-item-selected-color);\n  font-weight: 500;\n}\n\n/* ── Disabled ── */\n.b-menu-item--disabled {\n  color: var(--b-menu-item-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ── Danger ── */\n.b-menu-item--danger {\n  color: var(--b-menu-danger-item-color);\n}\n\n.b-menu-item--danger:hover:not(.b-menu-item--disabled) {\n  color: var(--b-menu-danger-item-hover-color);\n  background: var(--b-menu-danger-item-active-bg);\n}\n\n.b-menu-item--danger.b-menu-item--selected {\n  background: var(--b-menu-danger-item-selected-bg);\n  color: var(--b-menu-danger-item-selected-color);\n}\n\n/* ── Collapsed ── */\n.b-menu-item--collapsed {\n  justify-content: center;\n  padding-inline: 0;\n}\n\n.b-menu-item--collapsed .b-menu-item__icon {\n  font-size: var(--b-menu-collapsed-icon-size);\n  margin-inline-end: 0;\n}\n\n/* ── Horizontal mode ── */\n.b-menu-item--horizontal {\n  margin-block: 0;\n  border-radius: var(--b-menu-horizontal-item-border-radius);\n  height: auto;\n  line-height: var(--b-menu-horizontal-line-height);\n  position: relative;\n}\n\n.b-menu-item--horizontal::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: var(--b-menu-item-padding-inline);\n  right: var(--b-menu-item-padding-inline);\n  height: var(--b-menu-active-bar-height);\n  background: transparent;\n  transition: background var(--b-menu-transition-duration);\n}\n\n.b-menu-item--horizontal:hover:not(.b-menu-item--disabled) {\n  background: var(--b-menu-horizontal-item-hover-bg);\n  color: var(--b-menu-horizontal-item-hover-color);\n}\n\n.b-menu-item--horizontal.b-menu-item--selected {\n  background: var(--b-menu-horizontal-item-selected-bg);\n  color: var(--b-menu-horizontal-item-selected-color);\n}\n\n.b-menu-item--horizontal.b-menu-item--selected::after {\n  background: var(--b-menu-horizontal-item-selected-color);\n}\n\n/* ─────────────────────────────────────────────\n   Icon & Label\n   ───────────────────────────────────────────── */\n.b-menu-item__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: var(--b-menu-icon-size);\n  margin-inline-end: var(--b-menu-icon-margin-inline-end);\n}\n\n.b-menu-item__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.b-menu-item__extra {\n  margin-inline-start: auto;\n  padding-inline-start: 8px;\n  color: var(--b-menu-group-title-color);\n  font-size: 12px;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-menu-item {\n    transition: none;\n  }\n\n  .b-menu-item--horizontal::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CA,IAAM,IAAO,EAAqB,EAAgB,EAC5C,IAAa,EAAmC,GAAwB,KAAK,EAE7E,IAAQ,SAAgB,GAAY,SAAS,KAAK,EAAE,EACpD,IAAU,QAAe,CAAC,GAAI,GAAY,WAAW,EAAE,EAAG,EAAA,QAAQ,CAAC;AAGzE,UAAgB;AACd,KAAK,gBAAgB,EAAA,SAAS,EAAQ,MAAM;IAC5C;EAKF,IAAM,IAAa,QAAe,EAAK,aAAa,MAAM,SAAS,EAAA,QAAQ,CAAC,EAEtE,IAAW,QACV,EAAK,WAAW,QACd,EAAK,SAAS,QAAQ,qBAAqB,kBADf,WAEnC,EAEI,IAAc,QAAe;AAC7B,SAAK,KAAK,UAAU,YACpB,GAAK,gBAAgB,MACzB,QAAO,GAAG,EAAM,QAAQ,EAAK,aAAa,MAAM;IAChD,EAEI,IAAc,QAAe,CACjC,eACA;GACE,yBAAyB,EAAW;GACpC,yBAAyB,EAAA;GACzB,uBAAuB,EAAA;GACvB,0BAA0B,EAAK,gBAAgB;GAC/C,2BAA2B,EAAK,KAAK,UAAU;GAChD,CACF,CAAC;EAKF,SAAS,EAAY,GAAe;AAClC,OAAI,EAAA,SAAU;GAEd,IAAM,IAAuB;IAC3B,KAAK,EAAA;IACL,SAAS,EAAQ;IACjB,UAAU;IACX;AACD,KAAK,YAAY,EAAK;;EAGxB,SAAS,EAAc,GAAkB;AACnC,UAAA,aAEA,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAAK;AACtC,MAAE,gBAAgB;IAClB,IAAM,IAAuB;KAC3B,KAAK,EAAA;KACL,SAAS,EAAQ;KACjB,UAAU;KACX;AACD,MAAK,YAAY,EAAK;;;yBAMxB,EAqBK,MAAA;GApBF,OAAK,EAAE,EAAA,MAAW;GAClB,OAAK,EAAA,EAAA,oBAAwB,EAAA,OAAW,CAAA;GACxC,MAAM,EAAA;GACN,UAAU,EAAA,WAAQ,KAAA;GAClB,iBAAe,EAAA,YAAY,KAAA;GAC3B,gBAAc,EAAA,EAAI,CAAC,WAAW,QAAQ,EAAA,QAAa,KAAA;GACnD,OAAO,EAAA,UAAU,EAAA,EAAI,CAAC,gBAAgB,QAAQ,EAAA,QAAQ,KAAA;GACtD,iBAAe,EAAA;GACf,SAAO;GACP,WAAS;;GAEE,EAAA,QAAQA,EAAAA,OAAO,QAAA,GAAA,EAA3B,EAEO,QAFP,GAEO,CADL,EAAmC,EAAA,QAAA,QAAA,EAAA,QAAA,CAAA,EAAA,EAAd,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAEd,EAAA,EAAI,CAAC,gBAAgB,QAClB,EAAA,IAAA,GAAA,IADkB,GAAA,EAAlC,EAEO,QAFP,GAEO,CADL,EAAwB,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;GAEJ,EAAA,SAAK,CAAK,EAAA,EAAI,CAAC,gBAAgB,SAAA,GAAA,EAA3C,EAEO,QAFP,GAEO,CADL,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"design-system131.js","names":[],"sources":["../src/components/BListbox/BListbox.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\n\nexport interface BListboxOption<V> {\n  /** Display label for the option. */\n  label: string;\n  /** Value associated with the option. */\n  value: V;\n  /** Whether the option is disabled and skipped by keyboard navigation. */\n  disabled?: boolean;\n  /** Optional group label — adjacent options sharing the same group are wrapped together. */\n  group?: string;\n}\n\nconst props = defineProps<{\n  /** Array of selectable options. */\n  options?: BListboxOption<T>[];\n  /** Whether multiple options can be selected at once. */\n  multiple?: boolean;\n  /** Disables the entire listbox — no keyboard nav, no selection. */\n  disabled?: boolean;\n  /** Visual size preset. */\n  size?: `${BCommonSize}`;\n  /** Property name on each option that holds the value. Defaults to `'value'`. */\n  valueKey?: string;\n  /** Property name on each option that holds the label. Defaults to `'label'`. */\n  labelKey?: string;\n  /** Optional id for the root listbox element. Auto-generated if omitted. */\n  id?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted whenever the selection changes. Single value or array depending on `multiple`. */\n  change: [value: T | T[]];\n}>();\n\nconst model = defineModel<T | T[] | null>({ default: null });\n\n// ─── Reactive accessors with defaults ───\nconst optionList = computed<BListboxOption<T>[]>(() => props.options ?? []);\nconst isMultiple = computed(() => props.multiple ?? false);\nconst isDisabled = computed(() => props.disabled ?? false);\nconst sizeClass = computed(() => props.size ?? BCommonSize.Medium);\nconst valueKeyName = computed(() => props.valueKey ?? 'value');\nconst labelKeyName = computed(() => props.labelKey ?? 'label');\n\nconst { componentUID } = useComponentId();\nconst listboxId = computed(() => props.id ?? `b-listbox-${componentUID.value}`);\nconst optionId = (index: number) => `${listboxId.value}-option-${index}`;\n\nconst listboxRef = ref<HTMLUListElement | null>(null);\nconst activeIndex = ref<number>(-1);\n\n// Type-ahead buffer\nconst typeAheadBuffer = ref('');\nlet typeAheadTimer: ReturnType<typeof setTimeout> | null = null;\n\n// ─────────────────────────────────────────────\n// Helpers\n// ─────────────────────────────────────────────\nconst getOptionValue = (opt: BListboxOption<T>): T => {\n  const key = valueKeyName.value;\n  const fromKey = (opt as unknown as Record<string, T>)[key];\n  return fromKey !== undefined ? fromKey : opt.value;\n};\n\nconst getOptionLabel = (opt: BListboxOption<T>): string => {\n  const key = labelKeyName.value;\n  const raw = (opt as unknown as Record<string, unknown>)[key];\n  if (typeof raw === 'string' && raw.length > 0) return raw;\n  return opt.label;\n};\n\nconst isOptionSelected = (opt: BListboxOption<T>): boolean => {\n  const v = getOptionValue(opt);\n  if (isMultiple.value) {\n    return Array.isArray(model.value) && model.value.includes(v);\n  }\n  return model.value === v;\n};\n\nconst isOptionDisabled = (opt: BListboxOption<T> | undefined): boolean => {\n  if (!opt) return true;\n  return !!opt.disabled || isDisabled.value;\n};\n\n// ─────────────────────────────────────────────\n// Grouped rendering structure\n// ─────────────────────────────────────────────\ninterface RenderRow {\n  type: 'option';\n  option: BListboxOption<T>;\n  index: number;\n  group?: string;\n}\ninterface RenderGroup {\n  type: 'group';\n  group: string;\n  rows: RenderRow[];\n}\ntype RenderItem = RenderGroup | RenderRow;\n\nconst renderItems = computed<RenderItem[]>(() => {\n  const result: RenderItem[] = [];\n  let currentGroup: RenderGroup | null = null;\n  optionList.value.forEach((opt, index) => {\n    const row: RenderRow = { type: 'option', option: opt, index, group: opt.group };\n    if (opt.group) {\n      if (!currentGroup || currentGroup.group !== opt.group) {\n        currentGroup = { type: 'group', group: opt.group, rows: [] };\n        result.push(currentGroup);\n      }\n      currentGroup.rows.push(row);\n    } else {\n      currentGroup = null;\n      result.push(row);\n    }\n  });\n  return result;\n});\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nconst selectIndex = (index: number) => {\n  const opt = optionList.value[index];\n  if (!opt || isOptionDisabled(opt)) return;\n  const v = getOptionValue(opt);\n\n  if (isMultiple.value) {\n    const current = Array.isArray(model.value) ? [...model.value] : [];\n    const i = current.indexOf(v);\n    if (i === -1) {\n      current.push(v);\n    } else {\n      current.splice(i, 1);\n    }\n    model.value = current;\n    emit('change', current);\n  } else {\n    model.value = v;\n    emit('change', v);\n  }\n};\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nconst findNextEnabled = (from: number, dir: 1 | -1): number => {\n  const list = optionList.value;\n  if (list.length === 0) return -1;\n  let i = from;\n  for (let n = 0; n < list.length; n++) {\n    i = (i + dir + list.length) % list.length;\n    if (!isOptionDisabled(list[i])) return i;\n  }\n  return -1;\n};\n\nconst findFirstEnabled = (): number => {\n  const list = optionList.value;\n  for (let i = 0; i < list.length; i++) {\n    if (!isOptionDisabled(list[i])) return i;\n  }\n  return -1;\n};\n\nconst findLastEnabled = (): number => {\n  const list = optionList.value;\n  for (let i = list.length - 1; i >= 0; i--) {\n    if (!isOptionDisabled(list[i])) return i;\n  }\n  return -1;\n};\n\nconst ensureActiveIndex = () => {\n  const list = optionList.value;\n  if (activeIndex.value === -1 || isOptionDisabled(list[activeIndex.value])) {\n    activeIndex.value = findFirstEnabled();\n  }\n};\n\nconst scrollActiveIntoView = async () => {\n  await nextTick();\n  if (activeIndex.value < 0) return;\n  if (!listboxRef.value) return;\n  const escape = typeof CSS !== 'undefined' && typeof CSS.escape === 'function'\n    ? CSS.escape\n    : (s: string) => s.replace(/[^a-zA-Z0-9_-]/g, '\\\\$&');\n  const el = listboxRef.value.querySelector<HTMLElement>(`#${escape(optionId(activeIndex.value))}`);\n  // jsdom and some embedded environments don't implement scrollIntoView — guard so a\n  // missing method (or a freak runtime error inside it) never propagates as an unhandled rejection.\n  if (el && typeof el.scrollIntoView === 'function') {\n    try {\n      el.scrollIntoView({ block: 'nearest' });\n    } catch {\n      /* no-op — non-critical UX nicety */\n    }\n  }\n};\n\nconst handleTypeAhead = (char: string) => {\n  if (typeAheadTimer) clearTimeout(typeAheadTimer);\n  typeAheadBuffer.value += char.toLowerCase();\n  typeAheadTimer = setTimeout(() => {\n    typeAheadBuffer.value = '';\n  }, 500);\n\n  const list = optionList.value;\n  const buf = typeAheadBuffer.value;\n  // For the first char of a new buffer, search starting AFTER the current active index;\n  // for continued buffers, re-evaluate from the active index so the prefix still matches.\n  const start = activeIndex.value === -1 ? 0 : activeIndex.value + (buf.length === 1 ? 1 : 0);\n  for (let n = 0; n < list.length; n++) {\n    const i = (start + n) % list.length;\n    const opt = list[i];\n    if (isOptionDisabled(opt)) continue;\n    const lbl = getOptionLabel(opt).toLowerCase();\n    if (lbl.startsWith(buf)) {\n      activeIndex.value = i;\n      void scrollActiveIntoView();\n      return;\n    }\n  }\n};\n\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (isDisabled.value) return;\n  if (optionList.value.length === 0) return;\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      const from = activeIndex.value === -1 ? -1 : activeIndex.value;\n      const next = findNextEnabled(from, 1);\n      if (next !== -1) activeIndex.value = next;\n      void scrollActiveIntoView();\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      const from = activeIndex.value === -1 ? 0 : activeIndex.value;\n      const next = findNextEnabled(from, -1);\n      if (next !== -1) activeIndex.value = next;\n      void scrollActiveIntoView();\n      break;\n    }\n    case 'Home': {\n      e.preventDefault();\n      activeIndex.value = findFirstEnabled();\n      void scrollActiveIntoView();\n      break;\n    }\n    case 'End': {\n      e.preventDefault();\n      activeIndex.value = findLastEnabled();\n      void scrollActiveIntoView();\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      e.preventDefault();\n      ensureActiveIndex();\n      if (activeIndex.value !== -1) selectIndex(activeIndex.value);\n      break;\n    }\n    default: {\n      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n        e.preventDefault();\n        handleTypeAhead(e.key);\n      }\n    }\n  }\n};\n\n// ─────────────────────────────────────────────\n// Mouse interaction\n// ─────────────────────────────────────────────\nconst handleOptionClick = (index: number) => {\n  if (isDisabled.value) return;\n  if (isOptionDisabled(optionList.value[index])) return;\n  activeIndex.value = index;\n  selectIndex(index);\n};\n\nconst handleOptionMouseEnter = (index: number) => {\n  if (isDisabled.value) return;\n  if (isOptionDisabled(optionList.value[index])) return;\n  activeIndex.value = index;\n};\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nconst handleFocus = () => {\n  if (activeIndex.value === -1) {\n    const selectedIdx = optionList.value.findIndex(\n      (o) => isOptionSelected(o) && !isOptionDisabled(o),\n    );\n    activeIndex.value = selectedIdx !== -1 ? selectedIdx : findFirstEnabled();\n  }\n};\n\nconst focus = () => {\n  listboxRef.value?.focus();\n};\n\nconst focusOption = (value: T) => {\n  const idx = optionList.value.findIndex((o) => getOptionValue(o) === value);\n  if (idx !== -1 && !isOptionDisabled(optionList.value[idx])) {\n    activeIndex.value = idx;\n    listboxRef.value?.focus();\n    void scrollActiveIntoView();\n  }\n};\n\ndefineExpose({ focus, focusOption });\n\n// Reset active index if it becomes invalid after option list changes.\nwatch(\n  () => optionList.value.length,\n  (len) => {\n    if (activeIndex.value >= len) activeIndex.value = -1;\n  },\n);\n\n// Computed aria-activedescendant id\nconst activeDescendantId = computed(() =>\n  activeIndex.value >= 0 ? optionId(activeIndex.value) : undefined,\n);\n\n/**\n * `role=\"listbox\"` requires an accessible name. Default to a generic \"Options\"\n * label; consumers override via fallthrough `aria-label` / `aria-labelledby`.\n */\nconst attrs = useAttrs();\nconst fallbackAriaLabel = computed(() => {\n  if (attrs['aria-label'] || attrs['aria-labelledby']) return undefined;\n  return 'Options';\n});\n</script>\n\n<template>\n  <ul\n    :id=\"listboxId\"\n    ref=\"listboxRef\"\n    role=\"listbox\"\n    class=\"b-listbox\"\n    :class=\"[\n      `b-listbox--${sizeClass}`,\n      {\n        'b-listbox--disabled': isDisabled,\n        'b-listbox--multiple': isMultiple,\n      },\n    ]\"\n    :tabindex=\"isDisabled ? -1 : 0\"\n    :aria-label=\"fallbackAriaLabel\"\n    :aria-multiselectable=\"isMultiple || undefined\"\n    :aria-disabled=\"isDisabled || undefined\"\n    :aria-activedescendant=\"activeDescendantId\"\n    @keydown=\"handleKeydown\"\n    @focus=\"handleFocus\"\n  >\n    <template v-for=\"(item, idx) in renderItems\" :key=\"idx\">\n      <!-- Group wrapper -->\n      <li v-if=\"item.type === 'group'\" role=\"presentation\" class=\"b-listbox__group\">\n        <span class=\"b-listbox__group-label\" :aria-hidden=\"true\">{{ item.group }}</span>\n        <ul role=\"group\" :aria-label=\"item.group\" class=\"b-listbox__group-list\">\n          <li\n            v-for=\"row in item.rows\"\n            :id=\"optionId(row.index)\"\n            :key=\"row.index\"\n            role=\"option\"\n            class=\"b-listbox__option\"\n            :class=\"{\n              'b-listbox__option--selected': isOptionSelected(row.option),\n              'b-listbox__option--active': activeIndex === row.index,\n              'b-listbox__option--disabled': isOptionDisabled(row.option),\n            }\"\n            :aria-selected=\"isOptionSelected(row.option)\"\n            :aria-disabled=\"isOptionDisabled(row.option) || undefined\"\n            @click=\"handleOptionClick(row.index)\"\n            @mouseenter=\"handleOptionMouseEnter(row.index)\"\n          >\n            {{ getOptionLabel(row.option) }}\n          </li>\n        </ul>\n      </li>\n\n      <!-- Plain option -->\n      <li\n        v-else\n        :id=\"optionId(item.index)\"\n        :key=\"`opt-${item.index}`\"\n        role=\"option\"\n        class=\"b-listbox__option\"\n        :class=\"{\n          'b-listbox__option--selected': isOptionSelected(item.option),\n          'b-listbox__option--active': activeIndex === item.index,\n          'b-listbox__option--disabled': isOptionDisabled(item.option),\n        }\"\n        :aria-selected=\"isOptionSelected(item.option)\"\n        :aria-disabled=\"isOptionDisabled(item.option) || undefined\"\n        @click=\"handleOptionClick(item.index)\"\n        @mouseenter=\"handleOptionMouseEnter(item.index)\"\n      >\n        {{ getOptionLabel(item.option) }}\n      </li>\n    </template>\n  </ul>\n</template>\n\n<style>\n.b-listbox {\n  /* Component tokens — defined on the component root, never on :root */\n  --b-listbox-bg: #ffffff;\n  --b-listbox-fg: rgba(0, 0, 0, 0.88);\n  --b-listbox-border-color: #d9d9d9;\n  --b-listbox-radius: 6px;\n  --b-listbox-option-padding-x: 12px;\n  --b-listbox-option-padding-y: 6px;\n  --b-listbox-option-bg-hover: rgba(0, 0, 0, 0.04);\n  --b-listbox-option-bg-active: rgba(0, 0, 0, 0.06);\n  --b-listbox-option-bg-selected: oklch(95% 0.04 240);\n  --b-listbox-option-fg-selected: oklch(45% 0.18 258);\n  --b-listbox-font-size: 14px;\n  --b-listbox-group-label-color: rgba(0, 0, 0, 0.65);\n  --b-listbox-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-listbox-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.2);\n  --b-listbox-transition-duration: 150ms;\n\n  list-style: none;\n  margin: 0;\n  padding: 4px 0;\n  background: var(--b-listbox-bg);\n  color: var(--b-listbox-fg);\n  border: 1px solid var(--b-listbox-border-color);\n  border-radius: var(--b-listbox-radius);\n  font-size: var(--b-listbox-font-size);\n  outline: none;\n  max-height: 320px;\n  overflow-y: auto;\n  user-select: none;\n}\n\n.b-listbox--sm {\n  --b-listbox-font-size: 13px;\n  --b-listbox-option-padding-x: 10px;\n  --b-listbox-option-padding-y: 4px;\n}\n\n.b-listbox--lg {\n  --b-listbox-font-size: 16px;\n  --b-listbox-option-padding-x: 14px;\n  --b-listbox-option-padding-y: 8px;\n}\n\n.b-listbox:focus-visible {\n  box-shadow: var(--b-listbox-focus-ring);\n}\n\n.b-listbox--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* ── Option ── */\n.b-listbox__option {\n  padding: var(--b-listbox-option-padding-y) var(--b-listbox-option-padding-x);\n  cursor: pointer;\n  display: block;\n  line-height: 1.5;\n  transition:\n    background-color var(--b-listbox-transition-duration) ease,\n    color var(--b-listbox-transition-duration) ease;\n}\n\n.b-listbox__option--active {\n  background-color: var(--b-listbox-option-bg-active);\n}\n\n.b-listbox__option--selected {\n  background-color: var(--b-listbox-option-bg-selected);\n  color: var(--b-listbox-option-fg-selected);\n  font-weight: 500;\n}\n\n.b-listbox__option--disabled {\n  cursor: not-allowed;\n  color: var(--b-listbox-disabled-color);\n  background-color: transparent;\n}\n\n.b-listbox__option:not(.b-listbox__option--disabled):hover {\n  background-color: var(--b-listbox-option-bg-hover);\n}\n\n/* ── Group ── */\n.b-listbox__group {\n  display: block;\n  padding: 0;\n}\n\n.b-listbox__group-label {\n  display: block;\n  padding: 6px var(--b-listbox-option-padding-x) 4px;\n  color: var(--b-listbox-group-label-color);\n  font-size: 0.85em;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.b-listbox__group-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-listbox {\n  --b-listbox-bg: #141414;\n  --b-listbox-fg: rgba(255, 255, 255, 0.88);\n  --b-listbox-border-color: #424242;\n  --b-listbox-option-bg-hover: rgba(255, 255, 255, 0.08);\n  --b-listbox-option-bg-active: rgba(255, 255, 255, 0.12);\n  --b-listbox-option-bg-selected: oklch(28% 0.08 258);\n  --b-listbox-option-fg-selected: oklch(80% 0.14 258);\n  --b-listbox-group-label-color: rgba(255, 255, 255, 0.45);\n  --b-listbox-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-listbox-focus-ring: 0 0 0 2px rgba(22, 104, 220, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-listbox {\n    --b-listbox-bg: #141414;\n    --b-listbox-fg: rgba(255, 255, 255, 0.88);\n    --b-listbox-border-color: #424242;\n    --b-listbox-option-bg-hover: rgba(255, 255, 255, 0.08);\n    --b-listbox-option-bg-active: rgba(255, 255, 255, 0.12);\n    --b-listbox-option-bg-selected: oklch(28% 0.08 258);\n    --b-listbox-option-fg-selected: oklch(80% 0.14 258);\n    --b-listbox-group-label-color: rgba(255, 255, 255, 0.45);\n    --b-listbox-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-listbox-focus-ring: 0 0 0 2px rgba(22, 104, 220, 0.3);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-listbox__option {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system132.js

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