@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system76.js

@@ -1,276 +1,32 @@
-import { useComponentId as e } from "./design-system10.js";
-import { BDropdownPlacement as t, BDropdownTrigger as n } from "./design-system75.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as ee, onMounted as te, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as ne, useId as re, watch as _ } from "vue";
-//#region src/components/BDropdown/BDropdown.vue?vue&type=script&setup=true&lang.ts
-var ie = {
-	key: 0,
-	class: "b-dropdown__indicator",
-	"aria-hidden": "true"
-}, ae = ["aria-labelledby"], v = {
-	key: 0,
-	class: "b-dropdown__content"
-}, y = {
-	key: 0,
-	class: "b-dropdown__divider",
-	role: "separator"
-}, oe = ["aria-label"], se = { class: "b-dropdown__group-title" }, ce = [
-	"tabindex",
-	"aria-disabled",
-	"onClick"
-], le = {
-	key: 0,
-	class: "b-dropdown__item-icon",
-	"aria-hidden": "true"
-}, ue = { class: "b-dropdown__item-label" }, de = [
-	"tabindex",
-	"aria-disabled",
-	"onClick"
-], fe = {
-	key: 0,
-	class: "b-dropdown__item-icon",
-	"aria-hidden": "true"
-}, b = { class: "b-dropdown__item-label" }, x = "[role=\"menuitem\"]:not([aria-disabled=\"true\"])", S = /* @__PURE__ */ c({
-	__name: "BDropdown",
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createTextVNode as r, defineComponent as i, normalizeStyle as a, openBlock as o, renderSlot as s, toDisplayString as c, useSlots as l } from "vue";
+//#region src/components/BDescriptions/BDescriptionsItem.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "b-descriptions-item" }, d = /* @__PURE__ */ i({
+	__name: "BDescriptionsItem",
 	props: {
-		trigger: { default: () => n.Hover },
-		placement: { default: () => t.BottomLeft },
-		arrow: {
-			type: Boolean,
-			default: !1
-		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		destroyOnHidden: {
-			type: Boolean,
-			default: !1
-		},
-		mouseEnterDelay: { default: 100 },
-		mouseLeaveDelay: { default: 100 },
-		menu: {},
-		modelValue: {
-			type: Boolean,
-			default: () => void 0
-		}
+		label: {},
+		span: { default: 1 },
+		labelStyle: {},
+		contentStyle: {}
 	},
-	emits: [
-		"openChange",
-		"update:modelValue",
-		"menuClick"
-	],
-	setup(c, { expose: S, emit: pe }) {
-		let C = pe, { componentUID: me } = e(), w = re(), he = `${w}-menu`, T = p(!1), E = i(() => c.modelValue === void 0 ? T.value : c.modelValue), ge = i(() => c.destroyOnHidden ? E.value : !0), D = null, O = null;
-		function k() {
-			D &&= (clearTimeout(D), null), O &&= (clearTimeout(O), null);
-		}
-		function A(e = 0) {
-			c.disabled || (k(), !E.value && (e > 0 ? D = setTimeout(() => M(), e) : M()));
-		}
-		function j(e = 0) {
-			k(), E.value && (e > 0 ? O = setTimeout(() => N(), e) : N());
-		}
-		function M() {
-			I.value?.showPopover();
-		}
-		function N() {
-			I.value?.hidePopover();
-		}
-		function P(e) {
-			c.modelValue === void 0 ? T.value = e : C("update:modelValue", e), C("openChange", e);
-		}
-		let F = ({ newState: e }) => {
-			P(e === "open");
-		}, I = p(null), L = p(null), R = null, z = p(-1);
-		function B() {
-			return I.value ? Array.from(I.value.querySelectorAll(x)) : [];
-		}
-		function V(e) {
-			let t = B();
-			if (t.length === 0) return;
-			let n = Math.max(0, Math.min(e, t.length - 1));
-			z.value = n, t[n]?.focus();
-		}
-		function H() {
-			l(() => V(0));
-		}
-		function U() {
-			l(() => {
-				V(B().length - 1);
-			});
-		}
-		_(E, (e) => {
-			e ? (R = document.activeElement, H()) : (z.value = -1, R && l(() => R?.focus()));
-		});
-		function W(e) {
-			e.disabled || (C("menuClick", {
-				key: e.key,
-				item: e
-			}), j());
-		}
-		function G() {
-			c.disabled || (E.value ? j() : A());
-		}
-		function K(e) {
-			c.disabled || (e.preventDefault(), E.value ? j() : A());
-		}
-		function q() {
-			c.disabled || A(c.mouseEnterDelay);
-		}
-		function J() {
-			j(c.mouseLeaveDelay);
-		}
-		function Y(e) {
-			if (!c.disabled) switch (e.key) {
-				case "Enter":
-				case " ":
-				case "ArrowDown":
-					e.preventDefault(), E.value ? H() : (A(), l(() => H()));
-					break;
-				case "ArrowUp":
-					e.preventDefault(), E.value ? U() : (A(), l(() => U()));
-					break;
-				case "Escape":
-					E.value && (e.preventDefault(), j());
-					break;
-			}
-		}
-		function _e(e) {
-			let t = B(), n = t.indexOf(document.activeElement);
-			switch (e.key) {
-				case "ArrowDown":
-					e.preventDefault(), V(n < t.length - 1 ? n + 1 : 0);
-					break;
-				case "ArrowUp":
-					e.preventDefault(), V(n > 0 ? n - 1 : t.length - 1);
-					break;
-				case "Home":
-					e.preventDefault(), V(0);
-					break;
-				case "End":
-					e.preventDefault(), V(t.length - 1);
-					break;
-				case "Enter":
-				case " ":
-					e.preventDefault(), document.activeElement && document.activeElement.click();
-					break;
-				case "Escape":
-					e.preventDefault(), j();
-					break;
-				case "Tab":
-					j();
-					break;
-			}
-		}
-		function ve() {
-			c.trigger === n.Hover && k();
-		}
-		function ye() {
-			c.trigger === n.Hover && j(c.mouseLeaveDelay);
-		}
-		function X(e) {
-			if (!E.value) return;
-			let t = e.target;
-			L.value?.contains(t) || I.value?.contains(t) || j();
-		}
-		function Z() {
-			let e = L.value;
-			if (e) switch (e.addEventListener("keydown", Y), c.trigger) {
-				case n.Click:
-					e.addEventListener("click", G);
-					break;
-				case n.ContextMenu:
-					e.addEventListener("contextmenu", K);
-					break;
-				case n.Hover:
-				default:
-					e.addEventListener("mouseenter", q), e.addEventListener("mouseleave", J);
-					break;
-			}
-		}
-		function Q() {
-			let e = L.value;
-			e && (e.removeEventListener("keydown", Y), e.removeEventListener("click", G), e.removeEventListener("contextmenu", K), e.removeEventListener("mouseenter", q), e.removeEventListener("mouseleave", J));
-		}
-		te(() => {
-			Z();
-		}), ee(() => {
-			Q(), document.removeEventListener("click", X, !0), k();
-		}), _(E, (e) => {
-			e ? document.addEventListener("click", X, !0) : document.removeEventListener("click", X, !0);
-		}), _(() => c.trigger, () => {
-			Q(), Z();
-		}), _(() => c.modelValue, (e) => {
-			e !== void 0 && (e ? I.value?.showPopover() : I.value?.hidePopover());
-		});
-		let $ = i(() => `--b-dropdown-anchor-${me.value}`), be = i(() => ({
-			[t.Bottom]: "bottom-center",
-			[t.BottomLeft]: "bottom-left",
-			[t.BottomRight]: "bottom-right",
-			[t.Top]: "top-center",
-			[t.TopLeft]: "top-left",
-			[t.TopRight]: "top-right"
-		})[c.placement] ?? "bottom-left"), xe = i(() => c.menu?.items ?? []), Se = i(() => ({
-			id: w,
-			"aria-haspopup": "menu",
-			"aria-expanded": E.value,
-			"aria-disabled": c.disabled || void 0
-		}));
-		return S({
-			open: M,
-			close: N
-		}), (e, t) => (f(), o(r, null, [s("div", {
-			ref_key: "toggleRef",
-			ref: L,
-			class: u(["b-dropdown__toggle", { "b-dropdown__toggle--open": E.value }]),
-			style: d({ anchorName: $.value })
-		}, [h(e.$slots, "default", { triggerProps: Se.value }), c.arrow ? (f(), o("span", ie)) : a("", !0)], 6), s("div", {
-			ref_key: "popoverRef",
-			ref: I,
-			popover: "manual",
-			class: u(["b-dropdown", be.value]),
-			style: d({ positionAnchor: $.value }),
-			id: he,
-			role: "menu",
-			"aria-labelledby": ne(w),
-			tabindex: "-1",
-			onToggle: F,
-			onKeydown: _e,
-			onMouseenter: ve,
-			onMouseleave: ye
-		}, [ge.value ? (f(), o("div", v, [h(e.$slots, "overlay", {}, () => [(f(!0), o(r, null, m(xe.value, (e) => (f(), o(r, { key: e.key }, [e.type === "divider" ? (f(), o("div", y)) : e.type === "group" ? (f(), o("div", {
-			key: 1,
-			class: "b-dropdown__group",
-			role: "group",
-			"aria-label": e.title
-		}, [s("div", se, g(e.title), 1), (f(!0), o(r, null, m(e.children, (e) => (f(), o("div", {
-			key: e.key,
-			class: u([
-				"b-dropdown__item",
-				{ "b-dropdown__item--disabled": e.disabled },
-				{ "b-dropdown__item--danger": e.danger },
-				{ "b-dropdown__item--selected": c.menu?.selectedKeys?.includes(e.key) }
-			]),
-			role: "menuitem",
-			tabindex: e.disabled ? -1 : 0,
-			"aria-disabled": e.disabled || void 0,
-			onClick: (t) => W(e)
-		}, [e.icon ? (f(), o("span", le, g(e.icon), 1)) : a("", !0), s("span", ue, g(e.label), 1)], 10, ce))), 128))], 8, oe)) : (f(), o("div", {
-			key: 2,
-			class: u([
-				"b-dropdown__item",
-				{ "b-dropdown__item--disabled": e.disabled },
-				{ "b-dropdown__item--danger": e.danger },
-				{ "b-dropdown__item--selected": c.menu?.selectedKeys?.includes(e.key) }
-			]),
-			role: "menuitem",
-			tabindex: e.disabled ? -1 : 0,
-			"aria-disabled": e.disabled || void 0,
-			onClick: (t) => W(e)
-		}, [e.icon ? (f(), o("span", fe, g(e.icon), 1)) : a("", !0), s("span", b, g(e.label), 1)], 10, de))], 64))), 128))])])) : a("", !0)], 46, ae)], 64));
+	setup(i, { expose: d }) {
+		let f = l();
+		return d({
+			label: i.label,
+			span: i.span,
+			labelStyle: i.labelStyle,
+			contentStyle: i.contentStyle,
+			slots: f
+		}), (l, d) => (o(), t("div", u, [i.label || l.$slots.label ? (o(), t("span", {
+			key: 0,
+			class: "b-descriptions-item__label",
+			style: a(i.labelStyle)
+		}, [s(l.$slots, "label", {}, () => [r(c(i.label), 1)])], 4)) : e("", !0), n("span", {
+			class: "b-descriptions-item__content",
+			style: a(i.contentStyle)
+		}, [s(l.$slots, "default")], 4)]));
 	}
 });
 //#endregion
-export { S as default };
+export { d as default };
 
 //# sourceMappingURL=design-system76.js.map

package/dist/design-system76.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system76.js","names":[],"sources":["../src/components/BDropdown/BDropdown.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString } from \"vue\"\n\nconst _hoisted_1 = {\n  key: 0,\n  class: \"b-dropdown__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_2 = [\"aria-labelledby\"]\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-dropdown__content\"\n}\nconst _hoisted_4 = {\n  key: 0,\n  class: \"b-dropdown__divider\",\n  role: \"separator\"\n}\nconst _hoisted_5 = [\"aria-label\"]\nconst _hoisted_6 = { class: \"b-dropdown__group-title\" }\nconst _hoisted_7 = [\"tabindex\", \"aria-disabled\", \"onClick\"]\nconst _hoisted_8 = {\n  key: 0,\n  class: \"b-dropdown__item-icon\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_9 = { class: \"b-dropdown__item-label\" }\nconst _hoisted_10 = [\"tabindex\", \"aria-disabled\", \"onClick\"]\nconst _hoisted_11 = {\n  key: 0,\n  class: \"b-dropdown__item-icon\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_12 = { class: \"b-dropdown__item-label\" }\n\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\nimport type { BDropdownMenuItem, BDropdownMenuProps } from './types.ts';\nimport { BDropdownPlacement, BDropdownTrigger } from './types.ts';\n\nconst focusableSelector = '[role=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BDropdown',\n  props: {\n    trigger: { default: () => (BDropdownTrigger.Hover) },\n    placement: { default: () => (BDropdownPlacement.BottomLeft) },\n    arrow: { type: Boolean, default: false },\n    disabled: { type: Boolean, default: false },\n    destroyOnHidden: { type: Boolean, default: false },\n    mouseEnterDelay: { default: 100 },\n    mouseLeaveDelay: { default: 100 },\n    menu: {},\n    modelValue: { type: Boolean, default: () => (undefined) }\n  },\n  emits: [\"openChange\", \"update:modelValue\", \"menuClick\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst dropdownId = useId();\nconst menuId = `${dropdownId}-menu`;\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (__props.modelValue !== undefined ? __props.modelValue : internalOpen.value));\n\nconst shouldRender = computed(() => {\n  if (__props.destroyOnHidden) return isOpen.value;\n  return true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  if (__props.disabled) return;\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  popoverRef.value?.showPopover();\n}\n\nfunction doClose() {\n  popoverRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (__props.modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst popoverRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\nconst focusedIndex = ref(-1);\n\nfunction getFocusableItems(): HTMLElement[] {\n  if (!popoverRef.value) return [];\n  return Array.from(popoverRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n}\n\nfunction focusItem(index: number) {\n  const items = getFocusableItems();\n  if (items.length === 0) return;\n  const clamped = Math.max(0, Math.min(index, items.length - 1));\n  focusedIndex.value = clamped;\n  items[clamped]?.focus();\n}\n\nfunction focusFirst() {\n  nextTick(() => focusItem(0));\n}\n\nfunction focusLast() {\n  nextTick(() => {\n    const items = getFocusableItems();\n    focusItem(items.length - 1);\n  });\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    focusFirst();\n  } else {\n    focusedIndex.value = -1;\n    if (previouslyFocusedElement) {\n      nextTick(() => previouslyFocusedElement?.focus());\n    }\n  }\n});\n\n// ─────────────────────────────────────────────\n// Menu item click\n// ─────────────────────────────────────────────\nfunction onItemClick(item: BDropdownMenuItem) {\n  if (item.disabled) return;\n  emit('menuClick', { key: item.key, item });\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (__props.disabled) return;\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onContextMenu(event: MouseEvent) {\n  if (__props.disabled) return;\n  event.preventDefault();\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  if (__props.disabled) return;\n  requestOpen(__props.mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(__props.mouseLeaveDelay);\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent) {\n  if (__props.disabled) return;\n\n  switch (event.key) {\n    case 'Enter':\n    case ' ':\n    case 'ArrowDown':\n      event.preventDefault();\n      if (!isOpen.value) {\n        requestOpen();\n        nextTick(() => focusFirst());\n      } else {\n        focusFirst();\n      }\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      if (!isOpen.value) {\n        requestOpen();\n        nextTick(() => focusLast());\n      } else {\n        focusLast();\n      }\n      break;\n    case 'Escape':\n      if (isOpen.value) {\n        event.preventDefault();\n        requestClose();\n      }\n      break;\n  }\n}\n\nfunction onMenuKeydown(event: KeyboardEvent) {\n  const items = getFocusableItems();\n  const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      focusItem(currentIndex < items.length - 1 ? currentIndex + 1 : 0);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      focusItem(currentIndex > 0 ? currentIndex - 1 : items.length - 1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusItem(0);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusItem(items.length - 1);\n      break;\n    case 'Enter':\n    case ' ':\n      event.preventDefault();\n      if (document.activeElement) {\n        (document.activeElement as HTMLElement).click();\n      }\n      break;\n    case 'Escape':\n      event.preventDefault();\n      requestClose();\n      break;\n    case 'Tab':\n      requestClose();\n      break;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Popover hover (keep open when hovering content)\n// ─────────────────────────────────────────────\nfunction onPopoverMouseEnter() {\n  if (__props.trigger === BDropdownTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onPopoverMouseLeave() {\n  if (__props.trigger === BDropdownTrigger.Hover) {\n    requestClose(__props.mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside handler\n// ─────────────────────────────────────────────\nfunction onDocumentClick(event: MouseEvent) {\n  if (!isOpen.value) return;\n  const target = event.target as Node;\n  if (toggleRef.value?.contains(target)) return;\n  if (popoverRef.value?.contains(target)) return;\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.addEventListener('keydown', onTriggerKeydown);\n\n  switch (__props.trigger) {\n    case BDropdownTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BDropdownTrigger.ContextMenu:\n      el.addEventListener('contextmenu', onContextMenu);\n      break;\n    case BDropdownTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onTriggerKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('contextmenu', onContextMenu);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  document.removeEventListener('click', onDocumentClick, true);\n  clearTimers();\n});\n\nwatch(isOpen, (val) => {\n  if (val) {\n    document.addEventListener('click', onDocumentClick, true);\n  } else {\n    document.removeEventListener('click', onDocumentClick, true);\n  }\n});\n\nwatch(\n  () => __props.trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\nwatch(\n  () => __props.modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      popoverRef.value?.showPopover();\n    } else {\n      popoverRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-dropdown-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BDropdownPlacement.Bottom]: 'bottom-center',\n    [BDropdownPlacement.BottomLeft]: 'bottom-left',\n    [BDropdownPlacement.BottomRight]: 'bottom-right',\n    [BDropdownPlacement.Top]: 'top-center',\n    [BDropdownPlacement.TopLeft]: 'top-left',\n    [BDropdownPlacement.TopRight]: 'top-right',\n  };\n  return map[__props.placement] ?? 'bottom-left';\n});\n\nconst menuItems = computed(() => __props.menu?.items ?? []);\n\nconst triggerProps = computed(() => ({\n  id: dropdownId,\n  'aria-haspopup': 'menu' as const,\n  'aria-expanded': isOpen.value,\n  'aria-disabled': __props.disabled || undefined,\n}));\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\n__expose({ open: doOpen, close: doClose });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(_Fragment, null, [\n    _createElementVNode(\"div\", {\n      ref_key: \"toggleRef\",\n      ref: toggleRef,\n      class: _normalizeClass(['b-dropdown__toggle', { 'b-dropdown__toggle--open': isOpen.value }]),\n      style: _normalizeStyle({ anchorName: anchorName.value })\n    }, [\n      _renderSlot(_ctx.$slots, \"default\", { triggerProps: triggerProps.value }),\n      (__props.arrow)\n        ? (_openBlock(), _createElementBlock(\"span\", _hoisted_1))\n        : _createCommentVNode(\"\", true)\n    ], 6),\n    _createElementVNode(\"div\", {\n      ref_key: \"popoverRef\",\n      ref: popoverRef,\n      popover: \"manual\",\n      class: _normalizeClass(['b-dropdown', placementClass.value]),\n      style: _normalizeStyle({ positionAnchor: anchorName.value }),\n      id: menuId,\n      role: \"menu\",\n      \"aria-labelledby\": _unref(dropdownId),\n      tabindex: \"-1\",\n      onToggle: onPopoverToggle,\n      onKeydown: onMenuKeydown,\n      onMouseenter: onPopoverMouseEnter,\n      onMouseleave: onPopoverMouseLeave\n    }, [\n      (shouldRender.value)\n        ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n            _renderSlot(_ctx.$slots, \"overlay\", {}, () => [\n              (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(menuItems.value, (item) => {\n                return (_openBlock(), _createElementBlock(_Fragment, {\n                  key: item.key\n                }, [\n                  (item.type === 'divider')\n                    ? (_openBlock(), _createElementBlock(\"div\", _hoisted_4))\n                    : (item.type === 'group')\n                      ? (_openBlock(), _createElementBlock(\"div\", {\n                          key: 1,\n                          class: \"b-dropdown__group\",\n                          role: \"group\",\n                          \"aria-label\": item.title\n                        }, [\n                          _createElementVNode(\"div\", _hoisted_6, _toDisplayString(item.title), 1),\n                          (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(item.children, (child) => {\n                            return (_openBlock(), _createElementBlock(\"div\", {\n                              key: child.key,\n                              class: _normalizeClass([\n                  'b-dropdown__item',\n                  { 'b-dropdown__item--disabled': child.disabled },\n                  { 'b-dropdown__item--danger': child.danger },\n                  { 'b-dropdown__item--selected': __props.menu?.selectedKeys?.includes(child.key) },\n                ]),\n                              role: \"menuitem\",\n                              tabindex: child.disabled ? -1 : 0,\n                              \"aria-disabled\": child.disabled || undefined,\n                              onClick: ($event: any) => (onItemClick(child))\n                            }, [\n                              (child.icon)\n                                ? (_openBlock(), _createElementBlock(\"span\", _hoisted_8, _toDisplayString(child.icon), 1))\n                                : _createCommentVNode(\"\", true),\n                              _createElementVNode(\"span\", _hoisted_9, _toDisplayString(child.label), 1)\n                            ], 10, _hoisted_7))\n                          }), 128))\n                        ], 8, _hoisted_5))\n                      : (_openBlock(), _createElementBlock(\"div\", {\n                          key: 2,\n                          class: _normalizeClass([\n                'b-dropdown__item',\n                { 'b-dropdown__item--disabled': item.disabled },\n                { 'b-dropdown__item--danger': item.danger },\n                { 'b-dropdown__item--selected': __props.menu?.selectedKeys?.includes(item.key) },\n              ]),\n                          role: \"menuitem\",\n                          tabindex: item.disabled ? -1 : 0,\n                          \"aria-disabled\": item.disabled || undefined,\n                          onClick: ($event: any) => (onItemClick(item))\n                        }, [\n                          (item.icon)\n                            ? (_openBlock(), _createElementBlock(\"span\", _hoisted_11, _toDisplayString(item.icon), 1))\n                            : _createCommentVNode(\"\", true),\n                          _createElementVNode(\"span\", _hoisted_12, _toDisplayString(item.label), 1)\n                        ], 10, _hoisted_10))\n                ], 64))\n              }), 128))\n            ])\n          ]))\n        : _createCommentVNode(\"\", true)\n    ], 46, _hoisted_2)\n  ], 64))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system76.js","names":["$slots"],"sources":["../src/components/BDescriptions/BDescriptionsItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CSSProperties } from 'vue';\nimport { useSlots } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  label,\n  span = 1,\n  labelStyle,\n  contentStyle,\n} = defineProps<{\n  /** Label text displayed for this item. Can be overridden by the `label` slot. */\n  label?: string;\n  /** Number of columns this item spans. @default 1 */\n  span?: number;\n  /** Inline style applied to the label cell. */\n  labelStyle?: CSSProperties;\n  /** Inline style applied to the content cell. */\n  contentStyle?: CSSProperties;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the description item */\n  default?: (props: Record<string, never>) => unknown;\n  /** Custom label content. Overrides the `label` prop */\n  label?: (props: Record<string, never>) => unknown;\n}>();\n\nconst slots = useSlots();\n\n// Expose props for parent to read\ndefineExpose({ label, span, labelStyle, contentStyle, slots });\n</script>\n\n<template>\n  <!--\n    BDescriptionsItem is a data-only component.\n    It does not render its own markup; BDescriptions reads its props/slots\n    and renders them in a table/list structure.\n    This template is used as a fallback if the item is rendered standalone.\n  -->\n  <div class=\"b-descriptions-item\">\n    <span v-if=\"label || $slots.label\" class=\"b-descriptions-item__label\" :style=\"labelStyle\">\n      <slot name=\"label\">{{ label }}</slot>\n    </span>\n    <span class=\"b-descriptions-item__content\" :style=\"contentStyle\">\n      <slot />\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAiCA,IAAM,IAAQ,GAAU;SAGxB,EAAa;GAAE,OAAI,EAAA;GAAG,MAAG,EAAA;GAAG,YAAS,EAAA;GAAG,cAAW,EAAA;GAAG;GAAO,CAAC,kBAU5D,EAOM,OAPN,GAOM,CANQ,EAAA,SAASA,EAAAA,OAAO,SAAA,GAAA,EAA5B,EAEO,QAAA;;GAF4B,OAAM;GAA8B,OAAK,EAAE,EAAA,WAAU;MACtF,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAE7B,EAEO,QAAA;GAFD,OAAM;GAAgC,OAAK,EAAE,EAAA,aAAY;MAC7D,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/design-system77.js

@@ -0,0 +1,7 @@
+import e from "./design-system76.js";
+//#region src/components/BDescriptions/BDescriptionsItem.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=design-system77.js.map

package/dist/design-system77.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system77.js","names":[],"sources":["../src/components/BDescriptions/BDescriptionsItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CSSProperties } from 'vue';\nimport { useSlots } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  label,\n  span = 1,\n  labelStyle,\n  contentStyle,\n} = defineProps<{\n  /** Label text displayed for this item. Can be overridden by the `label` slot. */\n  label?: string;\n  /** Number of columns this item spans. @default 1 */\n  span?: number;\n  /** Inline style applied to the label cell. */\n  labelStyle?: CSSProperties;\n  /** Inline style applied to the content cell. */\n  contentStyle?: CSSProperties;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the description item */\n  default?: (props: Record<string, never>) => unknown;\n  /** Custom label content. Overrides the `label` prop */\n  label?: (props: Record<string, never>) => unknown;\n}>();\n\nconst slots = useSlots();\n\n// Expose props for parent to read\ndefineExpose({ label, span, labelStyle, contentStyle, slots });\n</script>\n\n<template>\n  <!--\n    BDescriptionsItem is a data-only component.\n    It does not render its own markup; BDescriptions reads its props/slots\n    and renders them in a table/list structure.\n    This template is used as a fallback if the item is rendered standalone.\n  -->\n  <div class=\"b-descriptions-item\">\n    <span v-if=\"label || $slots.label\" class=\"b-descriptions-item__label\" :style=\"labelStyle\">\n      <slot name=\"label\">{{ label }}</slot>\n    </span>\n    <span class=\"b-descriptions-item__content\" :style=\"contentStyle\">\n      <slot />\n    </span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/design-system78.js

@@ -1,8 +1,52 @@
-import e from "./design-system76.js";
-/* empty css                */
-//#region src/components/BDropdown/BDropdown.vue
-var t = e;
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, useSlots as s } from "vue";
+//#region src/components/BDivider/BDivider.vue?vue&type=script&setup=true&lang.ts
+var c = { class: "b-divider__content" }, l = /* @__PURE__ */ r({
+	__name: "BDivider",
+	props: {
+		orientation: { default: "horizontal" },
+		variant: { default: "solid" },
+		dashed: {
+			type: Boolean,
+			default: !1
+		},
+		plain: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "large" },
+		titlePlacement: { default: "center" }
+	},
+	setup(r) {
+		let l = s(), u = e(() => r.orientation === "vertical"), d = e(() => r.orientation === "horizontal"), f = e(() => !!l.default), p = e(() => r.dashed && r.variant === "solid" ? "dashed" : r.variant), m = e(() => [
+			"b-divider",
+			`b-divider--${r.orientation}`,
+			`b-divider--${p.value}`,
+			`b-divider--size-${r.size}`,
+			{
+				"b-divider--with-text": f.value && d.value,
+				[`b-divider--text-${r.titlePlacement}`]: f.value && d.value,
+				"b-divider--plain": r.plain
+			}
+		]);
+		return (e, r) => u.value ? (a(), t("span", {
+			key: 0,
+			class: i(m.value),
+			role: "separator",
+			"aria-orientation": "vertical"
+		}, null, 2)) : d.value && !f.value ? (a(), t("div", {
+			key: 1,
+			class: i(m.value),
+			role: "separator",
+			"aria-orientation": "horizontal"
+		}, null, 2)) : (a(), t("div", {
+			key: 2,
+			class: i(m.value),
+			role: "separator",
+			"aria-orientation": "horizontal"
+		}, [n("span", c, [o(e.$slots, "default")])], 2));
+	}
+});
 //#endregion
-export { t as default };
+export { l as default };
 
 //# sourceMappingURL=design-system78.js.map

package/dist/design-system78.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system78.js","names":[],"sources":["../src/components/BDropdown/BDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\nimport type { BDropdownMenuItem, BDropdownMenuProps } from './types.ts';\nimport { BDropdownPlacement, BDropdownTrigger } from './types.ts';\n\nconst {\n  trigger = BDropdownTrigger.Hover,\n  placement = BDropdownPlacement.BottomLeft,\n  arrow = false,\n  disabled = false,\n  destroyOnHidden = false,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  menu,\n  modelValue = undefined,\n} = defineProps<{\n  /** The trigger mode which executes the dropdown action. */\n  trigger?: `${BDropdownTrigger}`;\n  /** Placement of popup menu. */\n  placement?: `${BDropdownPlacement}`;\n  /** Whether to show the dropdown chevron indicator next to the trigger. */\n  arrow?: boolean;\n  /** Whether the dropdown menu is disabled. */\n  disabled?: boolean;\n  /** Whether to destroy popup on hide. */\n  destroyOnHidden?: boolean;\n  /** Delay in ms before showing on mouseenter (hover trigger only). */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave (hover trigger only). */\n  mouseLeaveDelay?: number;\n  /** Menu configuration: items, selectable, multiple, selectedKeys. */\n  menu?: BDropdownMenuProps;\n  /** Controlled open state - bind with `v-model:open`. */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the dropdown visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model:open support. */\n  (e: 'update:modelValue', value: boolean): void;\n  /** Emitted when a menu item is clicked. */\n  (e: 'menuClick', info: { key: string | number; item: BDropdownMenuItem }): void;\n}>();\n\ndefineSlots<{\n  /** The trigger element. Receives `triggerProps` to bind ARIA attributes. */\n  default?(props: { triggerProps: Record<string, unknown> }): unknown;\n  /** Custom overlay content (replaces default menu rendering). */\n  overlay?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst dropdownId = useId();\nconst menuId = `${dropdownId}-menu`;\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst shouldRender = computed(() => {\n  if (destroyOnHidden) return isOpen.value;\n  return true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  if (disabled) return;\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  popoverRef.value?.showPopover();\n}\n\nfunction doClose() {\n  popoverRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst popoverRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\nconst focusedIndex = ref(-1);\n\nconst focusableSelector = '[role=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\nfunction getFocusableItems(): HTMLElement[] {\n  if (!popoverRef.value) return [];\n  return Array.from(popoverRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n}\n\nfunction focusItem(index: number) {\n  const items = getFocusableItems();\n  if (items.length === 0) return;\n  const clamped = Math.max(0, Math.min(index, items.length - 1));\n  focusedIndex.value = clamped;\n  items[clamped]?.focus();\n}\n\nfunction focusFirst() {\n  nextTick(() => focusItem(0));\n}\n\nfunction focusLast() {\n  nextTick(() => {\n    const items = getFocusableItems();\n    focusItem(items.length - 1);\n  });\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    focusFirst();\n  } else {\n    focusedIndex.value = -1;\n    if (previouslyFocusedElement) {\n      nextTick(() => previouslyFocusedElement?.focus());\n    }\n  }\n});\n\n// ─────────────────────────────────────────────\n// Menu item click\n// ─────────────────────────────────────────────\nfunction onItemClick(item: BDropdownMenuItem) {\n  if (item.disabled) return;\n  emit('menuClick', { key: item.key, item });\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (disabled) return;\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onContextMenu(event: MouseEvent) {\n  if (disabled) return;\n  event.preventDefault();\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  if (disabled) return;\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent) {\n  if (disabled) return;\n\n  switch (event.key) {\n    case 'Enter':\n    case ' ':\n    case 'ArrowDown':\n      event.preventDefault();\n      if (!isOpen.value) {\n        requestOpen();\n        nextTick(() => focusFirst());\n      } else {\n        focusFirst();\n      }\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      if (!isOpen.value) {\n        requestOpen();\n        nextTick(() => focusLast());\n      } else {\n        focusLast();\n      }\n      break;\n    case 'Escape':\n      if (isOpen.value) {\n        event.preventDefault();\n        requestClose();\n      }\n      break;\n  }\n}\n\nfunction onMenuKeydown(event: KeyboardEvent) {\n  const items = getFocusableItems();\n  const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      focusItem(currentIndex < items.length - 1 ? currentIndex + 1 : 0);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      focusItem(currentIndex > 0 ? currentIndex - 1 : items.length - 1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusItem(0);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusItem(items.length - 1);\n      break;\n    case 'Enter':\n    case ' ':\n      event.preventDefault();\n      if (document.activeElement) {\n        (document.activeElement as HTMLElement).click();\n      }\n      break;\n    case 'Escape':\n      event.preventDefault();\n      requestClose();\n      break;\n    case 'Tab':\n      requestClose();\n      break;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Popover hover (keep open when hovering content)\n// ─────────────────────────────────────────────\nfunction onPopoverMouseEnter() {\n  if (trigger === BDropdownTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onPopoverMouseLeave() {\n  if (trigger === BDropdownTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside handler\n// ─────────────────────────────────────────────\nfunction onDocumentClick(event: MouseEvent) {\n  if (!isOpen.value) return;\n  const target = event.target as Node;\n  if (toggleRef.value?.contains(target)) return;\n  if (popoverRef.value?.contains(target)) return;\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.addEventListener('keydown', onTriggerKeydown);\n\n  switch (trigger) {\n    case BDropdownTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BDropdownTrigger.ContextMenu:\n      el.addEventListener('contextmenu', onContextMenu);\n      break;\n    case BDropdownTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onTriggerKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('contextmenu', onContextMenu);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  document.removeEventListener('click', onDocumentClick, true);\n  clearTimers();\n});\n\nwatch(isOpen, (val) => {\n  if (val) {\n    document.addEventListener('click', onDocumentClick, true);\n  } else {\n    document.removeEventListener('click', onDocumentClick, true);\n  }\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      popoverRef.value?.showPopover();\n    } else {\n      popoverRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-dropdown-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BDropdownPlacement.Bottom]: 'bottom-center',\n    [BDropdownPlacement.BottomLeft]: 'bottom-left',\n    [BDropdownPlacement.BottomRight]: 'bottom-right',\n    [BDropdownPlacement.Top]: 'top-center',\n    [BDropdownPlacement.TopLeft]: 'top-left',\n    [BDropdownPlacement.TopRight]: 'top-right',\n  };\n  return map[placement] ?? 'bottom-left';\n});\n\nconst menuItems = computed(() => menu?.items ?? []);\n\nconst triggerProps = computed(() => ({\n  id: dropdownId,\n  'aria-haspopup': 'menu' as const,\n  'aria-expanded': isOpen.value,\n  'aria-disabled': disabled || undefined,\n}));\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div\n    ref=\"toggleRef\"\n    :class=\"['b-dropdown__toggle', { 'b-dropdown__toggle--open': isOpen }]\"\n    :style=\"{ anchorName: anchorName }\"\n  >\n    <slot :trigger-props=\"triggerProps\" />\n    <span v-if=\"arrow\" class=\"b-dropdown__indicator\" aria-hidden=\"true\" />\n  </div>\n\n  <div\n    ref=\"popoverRef\"\n    popover=\"manual\"\n    :class=\"['b-dropdown', placementClass]\"\n    :style=\"{ positionAnchor: anchorName }\"\n    :id=\"menuId\"\n    role=\"menu\"\n    :aria-labelledby=\"dropdownId\"\n    tabindex=\"-1\"\n    @toggle=\"onPopoverToggle\"\n    @keydown=\"onMenuKeydown\"\n    @mouseenter=\"onPopoverMouseEnter\"\n    @mouseleave=\"onPopoverMouseLeave\"\n  >\n    <template v-if=\"shouldRender\">\n      <div class=\"b-dropdown__content\">\n        <slot name=\"overlay\">\n          <template v-for=\"item in menuItems\" :key=\"item.key\">\n            <div v-if=\"item.type === 'divider'\" class=\"b-dropdown__divider\" role=\"separator\" />\n            <div\n              v-else-if=\"item.type === 'group'\"\n              class=\"b-dropdown__group\"\n              role=\"group\"\n              :aria-label=\"item.title\"\n            >\n              <div class=\"b-dropdown__group-title\">{{ item.title }}</div>\n              <div\n                v-for=\"child in item.children\"\n                :key=\"child.key\"\n                :class=\"[\n                  'b-dropdown__item',\n                  { 'b-dropdown__item--disabled': child.disabled },\n                  { 'b-dropdown__item--danger': child.danger },\n                  { 'b-dropdown__item--selected': menu?.selectedKeys?.includes(child.key) },\n                ]\"\n                role=\"menuitem\"\n                :tabindex=\"child.disabled ? -1 : 0\"\n                :aria-disabled=\"child.disabled || undefined\"\n                @click=\"onItemClick(child)\"\n              >\n                <span v-if=\"child.icon\" class=\"b-dropdown__item-icon\" aria-hidden=\"true\">{{\n                  child.icon\n                }}</span>\n                <span class=\"b-dropdown__item-label\">{{ child.label }}</span>\n              </div>\n            </div>\n            <div\n              v-else\n              :class=\"[\n                'b-dropdown__item',\n                { 'b-dropdown__item--disabled': item.disabled },\n                { 'b-dropdown__item--danger': item.danger },\n                { 'b-dropdown__item--selected': menu?.selectedKeys?.includes(item.key) },\n              ]\"\n              role=\"menuitem\"\n              :tabindex=\"item.disabled ? -1 : 0\"\n              :aria-disabled=\"item.disabled || undefined\"\n              @click=\"onItemClick(item)\"\n            >\n              <span v-if=\"item.icon\" class=\"b-dropdown__item-icon\" aria-hidden=\"true\">{{\n                item.icon\n              }}</span>\n              <span class=\"b-dropdown__item-label\">{{ item.label }}</span>\n            </div>\n          </template>\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-dropdown {\n  --b-dropdown-z-index: 1050;\n  --b-dropdown-bg: #fff;\n  --b-dropdown-color: rgba(0, 0, 0, 0.88);\n  --b-dropdown-border-radius: 8px;\n  --b-dropdown-padding-block: 4px;\n  --b-dropdown-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-dropdown-font-size: 14px;\n  --b-dropdown-line-height: 1.5714;\n  --b-dropdown-min-width: 120px;\n  --b-dropdown-max-width: 320px;\n  --b-dropdown-gap: 4px;\n  --b-dropdown-transition-duration: 200ms;\n\n  --b-dropdown-item-padding-x: 12px;\n  --b-dropdown-item-padding-y: 5px;\n  --b-dropdown-item-border-radius: 4px;\n  --b-dropdown-item-color: rgba(0, 0, 0, 0.88);\n  --b-dropdown-item-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-dropdown-item-active-bg: rgba(0, 0, 0, 0.06);\n  --b-dropdown-item-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-dropdown-item-danger-color: #ff4d4f;\n  --b-dropdown-item-danger-hover-bg: #fff2f0;\n  --b-dropdown-item-selected-bg: #e6f4ff;\n  --b-dropdown-item-selected-color: #1677ff;\n  --b-dropdown-item-icon-margin-right: 8px;\n  --b-dropdown-item-icon-size: 14px;\n\n  --b-dropdown-divider-color: rgba(5, 5, 5, 0.06);\n  --b-dropdown-divider-margin: 4px 0;\n\n  --b-dropdown-group-title-color: rgba(0, 0, 0, 0.45);\n  --b-dropdown-group-title-font-size: 12px;\n  --b-dropdown-group-title-padding: 5px 12px;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-dropdown {\n  --b-dropdown-bg: #1f1f1f;\n  --b-dropdown-color: rgba(255, 255, 255, 0.85);\n  --b-dropdown-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-dropdown-item-color: rgba(255, 255, 255, 0.85);\n  --b-dropdown-item-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-dropdown-item-active-bg: rgba(255, 255, 255, 0.12);\n  --b-dropdown-item-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-dropdown-item-danger-color: #ff7875;\n  --b-dropdown-item-danger-hover-bg: rgba(255, 77, 79, 0.12);\n  --b-dropdown-item-selected-bg: rgba(22, 119, 255, 0.15);\n  --b-dropdown-item-selected-color: #4096ff;\n  --b-dropdown-divider-color: rgba(253, 253, 253, 0.12);\n  --b-dropdown-group-title-color: rgba(255, 255, 255, 0.45);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-dropdown {\n    --b-dropdown-bg: #1f1f1f;\n    --b-dropdown-color: rgba(255, 255, 255, 0.85);\n    --b-dropdown-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-dropdown-item-color: rgba(255, 255, 255, 0.85);\n    --b-dropdown-item-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-dropdown-item-active-bg: rgba(255, 255, 255, 0.12);\n    --b-dropdown-item-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-dropdown-item-danger-color: #ff7875;\n    --b-dropdown-item-danger-hover-bg: rgba(255, 77, 79, 0.12);\n    --b-dropdown-item-selected-bg: rgba(22, 119, 255, 0.15);\n    --b-dropdown-item-selected-color: #4096ff;\n    --b-dropdown-divider-color: rgba(253, 253, 253, 0.12);\n    --b-dropdown-group-title-color: rgba(255, 255, 255, 0.45);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-dropdown__toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  cursor: pointer;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Chevron indicator (CSS-only)\n   ───────────────────────────────────────────── */\n.b-dropdown__indicator {\n  display: inline-block;\n  width: 0.625em;\n  height: 0.625em;\n  border-right: 1.5px solid currentColor;\n  border-bottom: 1.5px solid currentColor;\n  transform: rotate(45deg) translateY(-2px);\n  transition: transform 200ms;\n  opacity: 0.65;\n  flex-shrink: 0;\n}\n\n.b-dropdown__toggle--open .b-dropdown__indicator {\n  transform: rotate(-135deg) translateY(-1px);\n}\n\n/* ─────────────────────────────────────────────\n   Dropdown popover\n   ───────────────────────────────────────────── */\n.b-dropdown {\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  z-index: var(--b-dropdown-z-index);\n  min-width: var(--b-dropdown-min-width);\n  max-width: var(--b-dropdown-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  transition:\n    display var(--b-dropdown-transition-duration),\n    opacity var(--b-dropdown-transition-duration);\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  /* ── Placement: Bottom ── */\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-dropdown-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-dropdown-gap);\n  }\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-dropdown-gap);\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-dropdown-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-dropdown-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-dropdown-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Content wrapper\n   ───────────────────────────────────────────── */\n.b-dropdown__content {\n  background: var(--b-dropdown-bg);\n  color: var(--b-dropdown-color);\n  font-size: var(--b-dropdown-font-size);\n  line-height: var(--b-dropdown-line-height);\n  padding: var(--b-dropdown-padding-block) 0;\n  border-radius: var(--b-dropdown-border-radius);\n  box-shadow: var(--b-dropdown-shadow);\n  overflow: hidden auto;\n  max-height: 60vh;\n}\n\n/* ─────────────────────────────────────────────\n   Menu items\n   ───────────────────────────────────────────── */\n.b-dropdown__item {\n  display: flex;\n  align-items: center;\n  padding: var(--b-dropdown-item-padding-y) var(--b-dropdown-item-padding-x);\n  margin: 0 4px;\n  border-radius: var(--b-dropdown-item-border-radius);\n  color: var(--b-dropdown-item-color);\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  transition: background-color 150ms;\n\n  &:hover,\n  &:focus-visible {\n    background: var(--b-dropdown-item-hover-bg);\n  }\n\n  &:active {\n    background: var(--b-dropdown-item-active-bg);\n  }\n\n  &--disabled {\n    color: var(--b-dropdown-item-disabled-color);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  &--danger {\n    color: var(--b-dropdown-item-danger-color);\n\n    &:hover,\n    &:focus-visible {\n      background: var(--b-dropdown-item-danger-hover-bg);\n    }\n  }\n\n  &--selected {\n    background: var(--b-dropdown-item-selected-bg);\n    color: var(--b-dropdown-item-selected-color);\n  }\n}\n\n.b-dropdown__item-icon {\n  margin-right: var(--b-dropdown-item-icon-margin-right);\n  font-size: var(--b-dropdown-item-icon-size);\n  display: inline-flex;\n  align-items: center;\n}\n\n.b-dropdown__item-label {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─────────────────────────────────────────────\n   Divider\n   ───────────────────────────────────────────── */\n.b-dropdown__divider {\n  height: 1px;\n  margin: var(--b-dropdown-divider-margin);\n  background: var(--b-dropdown-divider-color);\n}\n\n/* ─────────────────────────────────────────────\n   Group\n   ───────────────────────────────────────────── */\n.b-dropdown__group-title {\n  padding: var(--b-dropdown-group-title-padding);\n  color: var(--b-dropdown-group-title-color);\n  font-size: var(--b-dropdown-group-title-font-size);\n  font-weight: 500;\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks\n   ───────────────────────────────────────────── */\n@position-try --b-dropdown-bottom {\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin-top: var(--b-dropdown-gap);\n}\n\n@position-try --b-dropdown-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n  margin-bottom: var(--b-dropdown-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-dropdown {\n    transition-duration: 0ms;\n  }\n\n  .b-dropdown__item {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system78.js","names":[],"sources":["../src/components/BDivider/BDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type {\n  BDividerOrientation,\n  BDividerSize,\n  BDividerTitlePlacement,\n  BDividerVariant,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  orientation = 'horizontal',\n  variant = 'solid',\n  dashed = false,\n  plain = true,\n  size = 'large',\n  titlePlacement = 'center',\n} = defineProps<{\n  /**\n   * Line direction.\n   * - `'horizontal'` - a full-width horizontal rule (default)\n   * - `'vertical'`   - an inline vertical separator\n   * @default 'horizontal'\n   */\n  orientation?: BDividerOrientation;\n  /**\n   * Line style.\n   * - `'solid'`  - continuous line (default)\n   * - `'dashed'` - dashed line\n   * - `'dotted'` - dotted line\n   * @default 'solid'\n   */\n  variant?: BDividerVariant;\n  /**\n   * Shorthand for `variant=\"dashed\"`. Overridden when `variant` is also set.\n   * Kept for AntD API compatibility.\n   * @default false\n   * @deprecated Prefer `variant` prop\n   */\n  dashed?: boolean;\n  /**\n   * Render the text in plain (normal weight) style rather than bold.\n   * Only meaningful for horizontal dividers with content.\n   * @default true\n   */\n  plain?: boolean;\n  /**\n   * Vertical spacing around horizontal dividers (ignored for vertical orientation).\n   * - `'small'`  - tighter margin\n   * - `'medium'` - medium margin\n   * - `'large'`  - standard Ant Design margin (default)\n   * @default 'large'\n   */\n  size?: BDividerSize;\n  /**\n   * Horizontal position of the title text inside a horizontal divider.\n   * - `'start'`  - align text to the leading edge\n   * - `'center'` - centre the text (default)\n   * - `'end'`    - align text to the trailing edge\n   * @default 'center'\n   */\n  titlePlacement?: BDividerTitlePlacement;\n}>();\n\nconst slots = defineSlots<{\n  /** Optional title or content placed inside the divider line. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst isVertical = computed(() => orientation === 'vertical');\nconst isHorizontal = computed(() => orientation === 'horizontal');\n\n/** Whether there is slot content to render. */\nconst hasContent = computed(() => Boolean(slots.default));\n\n/**\n * Resolve the effective line style.\n * `dashed` prop is a legacy alias for `variant=\"dashed\"`.\n */\nconst effectiveVariant = computed<BDividerVariant>(() => {\n  if (dashed && variant === 'solid') return 'dashed';\n  return variant;\n});\n\nconst rootClass = computed(() => [\n  'b-divider',\n  `b-divider--${orientation}`,\n  `b-divider--${effectiveVariant.value}`,\n  `b-divider--size-${size}`,\n  {\n    'b-divider--with-text': hasContent.value && isHorizontal.value,\n    [`b-divider--text-${titlePlacement}`]: hasContent.value && isHorizontal.value,\n    'b-divider--plain': plain,\n  },\n]);\n</script>\n\n<template>\n  <!--\n    Vertical divider: a presentational inline separator.\n    role=\"separator\" with aria-orientation covers both horizontal and vertical.\n  -->\n  <span v-if=\"isVertical\" :class=\"rootClass\" role=\"separator\" aria-orientation=\"vertical\" />\n\n  <!--\n    Horizontal divider WITHOUT content.\n    <div role=\"separator\"> is used instead of <hr> because axe-core evaluates\n    <hr> (which carries implicit role=\"separator\") for text-colour contrast by\n    reading its CSS `color` property. A <div role=\"separator\"> with no text\n    content is exempt from that check (WCAG SC 1.4.3 applies only to text).\n  -->\n  <div\n    v-else-if=\"isHorizontal && !hasContent\"\n    :class=\"rootClass\"\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  />\n\n  <!--\n    Horizontal divider WITH content: <div role=\"separator\"> wrapping the text.\n    <hr> cannot contain children, so we fall back to a div.\n  -->\n  <div v-else :class=\"rootClass\" role=\"separator\" aria-orientation=\"horizontal\">\n    <span class=\"b-divider__content\">\n      <slot />\n    </span>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (design tokens)\n   Scoped to .b-divider — never on :root\n   ──────────────────────────────────────────── */\n.b-divider {\n  /* AntD token: textPaddingInline → horizontal padding around inner text */\n  --b-divider-text-padding-inline: 1em;\n\n  /* AntD token: orientationMargin → fraction of width from the near edge for start/end text */\n  --b-divider-orientation-margin: 0.05;\n\n  /* AntD token: verticalMarginInline → horizontal margin on vertical dividers */\n  --b-divider-vertical-margin-inline: 8px;\n\n  /* Colour */\n  --b-divider-color: oklch(88% 0.01 264); /* neutral border */\n  --b-divider-text-color: oklch(32% 0.02 264);\n\n  /* Typography */\n  --b-divider-font-size: 1rem;\n  --b-divider-font-weight-text: 500; /* \"with-text\" non-plain heading weight */\n\n  /* Size (margin-block for horizontal) */\n  --b-divider-margin-block-large: 1.5rem; /* size=large  (AntD default) */\n  --b-divider-margin-block-medium: 0.75rem; /* size=medium */\n  --b-divider-margin-block-small: 0.25rem; /* size=small  */\n\n  /* Line geometry */\n  --b-divider-line-width: 1px;\n}\n\n/* ── Dark mode ───────────────────────────────────────────────────────────\n   Use only the attribute selector, consistent with every other component\n   in this system (BAlert, BCard, etc.). The @media (prefers-color-scheme)\n   query is deliberately omitted: Storybook controls the theme by toggling\n   [data-prefers-color='dark'] on <html>. A media-query override would fire\n   based on the OS/test-runner's colour scheme regardless of the canvas\n   setting, producing light text (#c7cedb) on a white canvas — failing\n   WCAG 1.4.3 contrast in automated a11y checks.\n   ──────────────────────────────────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-divider {\n  --b-divider-color: oklch(35% 0.02 264);\n  --b-divider-text-color: oklch(85% 0.02 264);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-divider {\n    --b-divider-color: oklch(35% 0.02 264);\n    --b-divider-text-color: oklch(85% 0.02 264);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal — <div role=separator> (no text) or <div role=separator> (with text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal {\n  display: block;\n  clear: both;\n  width: 100%;\n  margin-block: var(--b-divider-margin-block-large);\n  border: none;\n  border-block-start: var(--b-divider-line-width) var(--b-divider-color);\n  /* default style is overridden by variant classes below */\n  border-block-start-style: solid;\n  box-sizing: border-box;\n}\n\n/* Size variants (horizontal only) */\n.b-divider--horizontal.b-divider--size-small {\n  margin-block: var(--b-divider-margin-block-small);\n}\n.b-divider--horizontal.b-divider--size-medium {\n  margin-block: var(--b-divider-margin-block-medium);\n}\n.b-divider--horizontal.b-divider--size-large {\n  margin-block: var(--b-divider-margin-block-large);\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal WITH text\n   ───────────────────────────────────────────── */\n.b-divider--with-text {\n  display: flex;\n  align-items: center;\n  border-block-start-style: none; /* lines rendered via ::before / ::after */\n  white-space: nowrap;\n  font-size: var(--b-divider-font-size);\n  color: var(--b-divider-text-color);\n  font-weight: var(--b-divider-font-weight-text);\n}\n\n/* Plain text: normal weight */\n.b-divider--with-text.b-divider--plain {\n  font-weight: normal;\n}\n\n/* Lines flanking the text */\n.b-divider--with-text::before,\n.b-divider--with-text::after {\n  content: '';\n  flex: 1;\n  border-block-start: var(--b-divider-line-width) solid var(--b-divider-color);\n}\n\n/* variant overrides for ::before / ::after */\n.b-divider--dashed.b-divider--with-text::before,\n.b-divider--dashed.b-divider--with-text::after {\n  border-block-start-style: dashed;\n}\n.b-divider--dotted.b-divider--with-text::before,\n.b-divider--dotted.b-divider--with-text::after {\n  border-block-start-style: dotted;\n}\n\n/* Text placement — start: push text to left edge */\n.b-divider--text-start::before {\n  /* orientationMargin is a unitless fraction (0.05 = 5% of width) */\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-start::after {\n  flex: 1;\n}\n\n/* Text placement — end: push text to right edge */\n.b-divider--text-end::after {\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-end::before {\n  flex: 1;\n}\n\n/* Text placement — center (default): equal halves */\n.b-divider--text-center::before,\n.b-divider--text-center::after {\n  flex: 1;\n}\n\n.b-divider__content {\n  padding-inline: var(--b-divider-text-padding-inline);\n  /* prevent the text itself from shrinking below its natural width */\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Line-style variants (horizontal no-text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dashed {\n  border-block-start-style: dashed;\n}\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dotted {\n  border-block-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Vertical divider\n   ───────────────────────────────────────────── */\n.b-divider--vertical {\n  display: inline-block;\n  /* explicit height is not set — inherits from line-height of surrounding text */\n  height: 0.9em;\n  border-inline-start: var(--b-divider-line-width) solid var(--b-divider-color);\n  border-block-start: none;\n  vertical-align: middle;\n  margin-inline: var(--b-divider-vertical-margin-inline);\n}\n\n.b-divider--vertical.b-divider--dashed {\n  border-inline-start-style: dashed;\n}\n.b-divider--vertical.b-divider--dotted {\n  border-inline-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   (dividers have no animations, but guard is here for completeness)\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-divider {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAkEA,IAAM,IAAQ,GAGV,EAKE,IAAa,QAAe,EAAA,gBAAgB,WAAW,EACvD,IAAe,QAAe,EAAA,gBAAgB,aAAa,EAG3D,IAAa,QAAe,EAAQ,EAAM,QAAS,EAMnD,IAAmB,QACnB,EAAA,UAAU,EAAA,YAAY,UAAgB,WACnC,EAAA,QACP,EAEI,IAAY,QAAe;GAC/B;GACA,cAAc,EAAA;GACd,cAAc,EAAiB;GAC/B,mBAAmB,EAAA;GACnB;IACE,wBAAwB,EAAW,SAAS,EAAa;KACxD,mBAAmB,EAAA,mBAAmB,EAAW,SAAS,EAAa;IACxE,oBAAoB,EAAA;IACrB;GACF,CAAC;mBAQY,EAAA,SAAA,GAAA,EAAZ,EAA0F,QAAA;;GAAjE,OAAK,EAAE,EAAA,MAAS;GAAE,MAAK;GAAY,oBAAiB;iBAUhE,EAAA,SAAY,CAAK,EAAA,SAAA,GAAA,EAD9B,EAKE,OAAA;;GAHC,OAAK,EAAE,EAAA,MAAS;GACjB,MAAK;GACL,oBAAiB;uBAOnB,EAIM,OAAA;;GAJO,OAAK,EAAE,EAAA,MAAS;GAAE,MAAK;GAAY,oBAAiB;MAC/D,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/{design-system71.js → design-system80.js}

@@ -1,8 +1,8 @@
-import e from "./design-system69.js";
+import e from "./design-system78.js";
 /* empty css                */
 //#region src/components/BDivider/BDivider.vue
 var t = e;
 //#endregion
 export { t as default };
 
-//# sourceMappingURL=design-system71.js.map
+//# sourceMappingURL=design-system80.js.map

package/dist/{design-system71.js.map → design-system80.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system71.js","names":[],"sources":["../src/components/BDivider/BDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type {\n  BDividerOrientation,\n  BDividerSize,\n  BDividerTitlePlacement,\n  BDividerVariant,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  orientation = 'horizontal',\n  variant = 'solid',\n  dashed = false,\n  plain = true,\n  size = 'large',\n  titlePlacement = 'center',\n} = defineProps<{\n  /**\n   * Line direction.\n   * - `'horizontal'` - a full-width horizontal rule (default)\n   * - `'vertical'`   - an inline vertical separator\n   * @default 'horizontal'\n   */\n  orientation?: BDividerOrientation;\n  /**\n   * Line style.\n   * - `'solid'`  - continuous line (default)\n   * - `'dashed'` - dashed line\n   * - `'dotted'` - dotted line\n   * @default 'solid'\n   */\n  variant?: BDividerVariant;\n  /**\n   * Shorthand for `variant=\"dashed\"`. Overridden when `variant` is also set.\n   * Kept for AntD API compatibility.\n   * @default false\n   * @deprecated Prefer `variant` prop\n   */\n  dashed?: boolean;\n  /**\n   * Render the text in plain (normal weight) style rather than bold.\n   * Only meaningful for horizontal dividers with content.\n   * @default true\n   */\n  plain?: boolean;\n  /**\n   * Vertical spacing around horizontal dividers (ignored for vertical orientation).\n   * - `'small'`  - tighter margin\n   * - `'medium'` - medium margin\n   * - `'large'`  - standard Ant Design margin (default)\n   * @default 'large'\n   */\n  size?: BDividerSize;\n  /**\n   * Horizontal position of the title text inside a horizontal divider.\n   * - `'start'`  - align text to the leading edge\n   * - `'center'` - centre the text (default)\n   * - `'end'`    - align text to the trailing edge\n   * @default 'center'\n   */\n  titlePlacement?: BDividerTitlePlacement;\n}>();\n\nconst slots = defineSlots<{\n  /** Optional title or content placed inside the divider line. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst isVertical = computed(() => orientation === 'vertical');\nconst isHorizontal = computed(() => orientation === 'horizontal');\n\n/** Whether there is slot content to render. */\nconst hasContent = computed(() => Boolean(slots.default));\n\n/**\n * Resolve the effective line style.\n * `dashed` prop is a legacy alias for `variant=\"dashed\"`.\n */\nconst effectiveVariant = computed<BDividerVariant>(() => {\n  if (dashed && variant === 'solid') return 'dashed';\n  return variant;\n});\n\nconst rootClass = computed(() => [\n  'b-divider',\n  `b-divider--${orientation}`,\n  `b-divider--${effectiveVariant.value}`,\n  `b-divider--size-${size}`,\n  {\n    'b-divider--with-text': hasContent.value && isHorizontal.value,\n    [`b-divider--text-${titlePlacement}`]: hasContent.value && isHorizontal.value,\n    'b-divider--plain': plain,\n  },\n]);\n</script>\n\n<template>\n  <!--\n    Vertical divider: a presentational inline separator.\n    role=\"separator\" with aria-orientation covers both horizontal and vertical.\n  -->\n  <span v-if=\"isVertical\" :class=\"rootClass\" role=\"separator\" aria-orientation=\"vertical\" />\n\n  <!--\n    Horizontal divider WITHOUT content.\n    <div role=\"separator\"> is used instead of <hr> because axe-core evaluates\n    <hr> (which carries implicit role=\"separator\") for text-colour contrast by\n    reading its CSS `color` property. A <div role=\"separator\"> with no text\n    content is exempt from that check (WCAG SC 1.4.3 applies only to text).\n  -->\n  <div\n    v-else-if=\"isHorizontal && !hasContent\"\n    :class=\"rootClass\"\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  />\n\n  <!--\n    Horizontal divider WITH content: <div role=\"separator\"> wrapping the text.\n    <hr> cannot contain children, so we fall back to a div.\n  -->\n  <div v-else :class=\"rootClass\" role=\"separator\" aria-orientation=\"horizontal\">\n    <span class=\"b-divider__content\">\n      <slot />\n    </span>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (design tokens)\n   Scoped to .b-divider — never on :root\n   ──────────────────────────────────────────── */\n.b-divider {\n  /* AntD token: textPaddingInline → horizontal padding around inner text */\n  --b-divider-text-padding-inline: 1em;\n\n  /* AntD token: orientationMargin → fraction of width from the near edge for start/end text */\n  --b-divider-orientation-margin: 0.05;\n\n  /* AntD token: verticalMarginInline → horizontal margin on vertical dividers */\n  --b-divider-vertical-margin-inline: 8px;\n\n  /* Colour */\n  --b-divider-color: oklch(88% 0.01 264); /* neutral border */\n  --b-divider-text-color: oklch(32% 0.02 264);\n\n  /* Typography */\n  --b-divider-font-size: 1rem;\n  --b-divider-font-weight-text: 500; /* \"with-text\" non-plain heading weight */\n\n  /* Size (margin-block for horizontal) */\n  --b-divider-margin-block-large: 1.5rem; /* size=large  (AntD default) */\n  --b-divider-margin-block-medium: 0.75rem; /* size=medium */\n  --b-divider-margin-block-small: 0.25rem; /* size=small  */\n\n  /* Line geometry */\n  --b-divider-line-width: 1px;\n}\n\n/* ── Dark mode ───────────────────────────────────────────────────────────\n   Use only the attribute selector, consistent with every other component\n   in this system (BAlert, BCard, etc.). The @media (prefers-color-scheme)\n   query is deliberately omitted: Storybook controls the theme by toggling\n   [data-prefers-color='dark'] on <html>. A media-query override would fire\n   based on the OS/test-runner's colour scheme regardless of the canvas\n   setting, producing light text (#c7cedb) on a white canvas — failing\n   WCAG 1.4.3 contrast in automated a11y checks.\n   ──────────────────────────────────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-divider {\n  --b-divider-color: oklch(35% 0.02 264);\n  --b-divider-text-color: oklch(85% 0.02 264);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-divider {\n    --b-divider-color: oklch(35% 0.02 264);\n    --b-divider-text-color: oklch(85% 0.02 264);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal — <div role=separator> (no text) or <div role=separator> (with text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal {\n  display: block;\n  clear: both;\n  width: 100%;\n  margin-block: var(--b-divider-margin-block-large);\n  border: none;\n  border-block-start: var(--b-divider-line-width) var(--b-divider-color);\n  /* default style is overridden by variant classes below */\n  border-block-start-style: solid;\n  box-sizing: border-box;\n}\n\n/* Size variants (horizontal only) */\n.b-divider--horizontal.b-divider--size-small {\n  margin-block: var(--b-divider-margin-block-small);\n}\n.b-divider--horizontal.b-divider--size-medium {\n  margin-block: var(--b-divider-margin-block-medium);\n}\n.b-divider--horizontal.b-divider--size-large {\n  margin-block: var(--b-divider-margin-block-large);\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal WITH text\n   ───────────────────────────────────────────── */\n.b-divider--with-text {\n  display: flex;\n  align-items: center;\n  border-block-start-style: none; /* lines rendered via ::before / ::after */\n  white-space: nowrap;\n  font-size: var(--b-divider-font-size);\n  color: var(--b-divider-text-color);\n  font-weight: var(--b-divider-font-weight-text);\n}\n\n/* Plain text: normal weight */\n.b-divider--with-text.b-divider--plain {\n  font-weight: normal;\n}\n\n/* Lines flanking the text */\n.b-divider--with-text::before,\n.b-divider--with-text::after {\n  content: '';\n  flex: 1;\n  border-block-start: var(--b-divider-line-width) solid var(--b-divider-color);\n}\n\n/* variant overrides for ::before / ::after */\n.b-divider--dashed.b-divider--with-text::before,\n.b-divider--dashed.b-divider--with-text::after {\n  border-block-start-style: dashed;\n}\n.b-divider--dotted.b-divider--with-text::before,\n.b-divider--dotted.b-divider--with-text::after {\n  border-block-start-style: dotted;\n}\n\n/* Text placement — start: push text to left edge */\n.b-divider--text-start::before {\n  /* orientationMargin is a unitless fraction (0.05 = 5% of width) */\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-start::after {\n  flex: 1;\n}\n\n/* Text placement — end: push text to right edge */\n.b-divider--text-end::after {\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-end::before {\n  flex: 1;\n}\n\n/* Text placement — center (default): equal halves */\n.b-divider--text-center::before,\n.b-divider--text-center::after {\n  flex: 1;\n}\n\n.b-divider__content {\n  padding-inline: var(--b-divider-text-padding-inline);\n  /* prevent the text itself from shrinking below its natural width */\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Line-style variants (horizontal no-text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dashed {\n  border-block-start-style: dashed;\n}\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dotted {\n  border-block-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Vertical divider\n   ───────────────────────────────────────────── */\n.b-divider--vertical {\n  display: inline-block;\n  /* explicit height is not set — inherits from line-height of surrounding text */\n  height: 0.9em;\n  border-inline-start: var(--b-divider-line-width) solid var(--b-divider-color);\n  border-block-start: none;\n  vertical-align: middle;\n  margin-inline: var(--b-divider-vertical-margin-inline);\n}\n\n.b-divider--vertical.b-divider--dashed {\n  border-inline-start-style: dashed;\n}\n.b-divider--vertical.b-divider--dotted {\n  border-inline-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   (dividers have no animations, but guard is here for completeness)\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-divider {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system80.js","names":[],"sources":["../src/components/BDivider/BDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type {\n  BDividerOrientation,\n  BDividerSize,\n  BDividerTitlePlacement,\n  BDividerVariant,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  orientation = 'horizontal',\n  variant = 'solid',\n  dashed = false,\n  plain = true,\n  size = 'large',\n  titlePlacement = 'center',\n} = defineProps<{\n  /**\n   * Line direction.\n   * - `'horizontal'` - a full-width horizontal rule (default)\n   * - `'vertical'`   - an inline vertical separator\n   * @default 'horizontal'\n   */\n  orientation?: BDividerOrientation;\n  /**\n   * Line style.\n   * - `'solid'`  - continuous line (default)\n   * - `'dashed'` - dashed line\n   * - `'dotted'` - dotted line\n   * @default 'solid'\n   */\n  variant?: BDividerVariant;\n  /**\n   * Shorthand for `variant=\"dashed\"`. Overridden when `variant` is also set.\n   * Kept for AntD API compatibility.\n   * @default false\n   * @deprecated Prefer `variant` prop\n   */\n  dashed?: boolean;\n  /**\n   * Render the text in plain (normal weight) style rather than bold.\n   * Only meaningful for horizontal dividers with content.\n   * @default true\n   */\n  plain?: boolean;\n  /**\n   * Vertical spacing around horizontal dividers (ignored for vertical orientation).\n   * - `'small'`  - tighter margin\n   * - `'medium'` - medium margin\n   * - `'large'`  - standard Ant Design margin (default)\n   * @default 'large'\n   */\n  size?: BDividerSize;\n  /**\n   * Horizontal position of the title text inside a horizontal divider.\n   * - `'start'`  - align text to the leading edge\n   * - `'center'` - centre the text (default)\n   * - `'end'`    - align text to the trailing edge\n   * @default 'center'\n   */\n  titlePlacement?: BDividerTitlePlacement;\n}>();\n\nconst slots = defineSlots<{\n  /** Optional title or content placed inside the divider line. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst isVertical = computed(() => orientation === 'vertical');\nconst isHorizontal = computed(() => orientation === 'horizontal');\n\n/** Whether there is slot content to render. */\nconst hasContent = computed(() => Boolean(slots.default));\n\n/**\n * Resolve the effective line style.\n * `dashed` prop is a legacy alias for `variant=\"dashed\"`.\n */\nconst effectiveVariant = computed<BDividerVariant>(() => {\n  if (dashed && variant === 'solid') return 'dashed';\n  return variant;\n});\n\nconst rootClass = computed(() => [\n  'b-divider',\n  `b-divider--${orientation}`,\n  `b-divider--${effectiveVariant.value}`,\n  `b-divider--size-${size}`,\n  {\n    'b-divider--with-text': hasContent.value && isHorizontal.value,\n    [`b-divider--text-${titlePlacement}`]: hasContent.value && isHorizontal.value,\n    'b-divider--plain': plain,\n  },\n]);\n</script>\n\n<template>\n  <!--\n    Vertical divider: a presentational inline separator.\n    role=\"separator\" with aria-orientation covers both horizontal and vertical.\n  -->\n  <span v-if=\"isVertical\" :class=\"rootClass\" role=\"separator\" aria-orientation=\"vertical\" />\n\n  <!--\n    Horizontal divider WITHOUT content.\n    <div role=\"separator\"> is used instead of <hr> because axe-core evaluates\n    <hr> (which carries implicit role=\"separator\") for text-colour contrast by\n    reading its CSS `color` property. A <div role=\"separator\"> with no text\n    content is exempt from that check (WCAG SC 1.4.3 applies only to text).\n  -->\n  <div\n    v-else-if=\"isHorizontal && !hasContent\"\n    :class=\"rootClass\"\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  />\n\n  <!--\n    Horizontal divider WITH content: <div role=\"separator\"> wrapping the text.\n    <hr> cannot contain children, so we fall back to a div.\n  -->\n  <div v-else :class=\"rootClass\" role=\"separator\" aria-orientation=\"horizontal\">\n    <span class=\"b-divider__content\">\n      <slot />\n    </span>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (design tokens)\n   Scoped to .b-divider — never on :root\n   ──────────────────────────────────────────── */\n.b-divider {\n  /* AntD token: textPaddingInline → horizontal padding around inner text */\n  --b-divider-text-padding-inline: 1em;\n\n  /* AntD token: orientationMargin → fraction of width from the near edge for start/end text */\n  --b-divider-orientation-margin: 0.05;\n\n  /* AntD token: verticalMarginInline → horizontal margin on vertical dividers */\n  --b-divider-vertical-margin-inline: 8px;\n\n  /* Colour */\n  --b-divider-color: oklch(88% 0.01 264); /* neutral border */\n  --b-divider-text-color: oklch(32% 0.02 264);\n\n  /* Typography */\n  --b-divider-font-size: 1rem;\n  --b-divider-font-weight-text: 500; /* \"with-text\" non-plain heading weight */\n\n  /* Size (margin-block for horizontal) */\n  --b-divider-margin-block-large: 1.5rem; /* size=large  (AntD default) */\n  --b-divider-margin-block-medium: 0.75rem; /* size=medium */\n  --b-divider-margin-block-small: 0.25rem; /* size=small  */\n\n  /* Line geometry */\n  --b-divider-line-width: 1px;\n}\n\n/* ── Dark mode ───────────────────────────────────────────────────────────\n   Use only the attribute selector, consistent with every other component\n   in this system (BAlert, BCard, etc.). The @media (prefers-color-scheme)\n   query is deliberately omitted: Storybook controls the theme by toggling\n   [data-prefers-color='dark'] on <html>. A media-query override would fire\n   based on the OS/test-runner's colour scheme regardless of the canvas\n   setting, producing light text (#c7cedb) on a white canvas — failing\n   WCAG 1.4.3 contrast in automated a11y checks.\n   ──────────────────────────────────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-divider {\n  --b-divider-color: oklch(35% 0.02 264);\n  --b-divider-text-color: oklch(85% 0.02 264);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-divider {\n    --b-divider-color: oklch(35% 0.02 264);\n    --b-divider-text-color: oklch(85% 0.02 264);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal — <div role=separator> (no text) or <div role=separator> (with text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal {\n  display: block;\n  clear: both;\n  width: 100%;\n  margin-block: var(--b-divider-margin-block-large);\n  border: none;\n  border-block-start: var(--b-divider-line-width) var(--b-divider-color);\n  /* default style is overridden by variant classes below */\n  border-block-start-style: solid;\n  box-sizing: border-box;\n}\n\n/* Size variants (horizontal only) */\n.b-divider--horizontal.b-divider--size-small {\n  margin-block: var(--b-divider-margin-block-small);\n}\n.b-divider--horizontal.b-divider--size-medium {\n  margin-block: var(--b-divider-margin-block-medium);\n}\n.b-divider--horizontal.b-divider--size-large {\n  margin-block: var(--b-divider-margin-block-large);\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal WITH text\n   ───────────────────────────────────────────── */\n.b-divider--with-text {\n  display: flex;\n  align-items: center;\n  border-block-start-style: none; /* lines rendered via ::before / ::after */\n  white-space: nowrap;\n  font-size: var(--b-divider-font-size);\n  color: var(--b-divider-text-color);\n  font-weight: var(--b-divider-font-weight-text);\n}\n\n/* Plain text: normal weight */\n.b-divider--with-text.b-divider--plain {\n  font-weight: normal;\n}\n\n/* Lines flanking the text */\n.b-divider--with-text::before,\n.b-divider--with-text::after {\n  content: '';\n  flex: 1;\n  border-block-start: var(--b-divider-line-width) solid var(--b-divider-color);\n}\n\n/* variant overrides for ::before / ::after */\n.b-divider--dashed.b-divider--with-text::before,\n.b-divider--dashed.b-divider--with-text::after {\n  border-block-start-style: dashed;\n}\n.b-divider--dotted.b-divider--with-text::before,\n.b-divider--dotted.b-divider--with-text::after {\n  border-block-start-style: dotted;\n}\n\n/* Text placement — start: push text to left edge */\n.b-divider--text-start::before {\n  /* orientationMargin is a unitless fraction (0.05 = 5% of width) */\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-start::after {\n  flex: 1;\n}\n\n/* Text placement — end: push text to right edge */\n.b-divider--text-end::after {\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-end::before {\n  flex: 1;\n}\n\n/* Text placement — center (default): equal halves */\n.b-divider--text-center::before,\n.b-divider--text-center::after {\n  flex: 1;\n}\n\n.b-divider__content {\n  padding-inline: var(--b-divider-text-padding-inline);\n  /* prevent the text itself from shrinking below its natural width */\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Line-style variants (horizontal no-text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dashed {\n  border-block-start-style: dashed;\n}\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dotted {\n  border-block-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Vertical divider\n   ───────────────────────────────────────────── */\n.b-divider--vertical {\n  display: inline-block;\n  /* explicit height is not set — inherits from line-height of surrounding text */\n  height: 0.9em;\n  border-inline-start: var(--b-divider-line-width) solid var(--b-divider-color);\n  border-block-start: none;\n  vertical-align: middle;\n  margin-inline: var(--b-divider-vertical-margin-inline);\n}\n\n.b-divider--vertical.b-divider--dashed {\n  border-inline-start-style: dashed;\n}\n.b-divider--vertical.b-divider--dotted {\n  border-inline-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   (dividers have no animations, but guard is here for completeness)\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-divider {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}