@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system81.js

@@ -1,202 +1,52 @@
-import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useSlots as ee, watch as b, withCtx as x } from "vue";
-//#region src/components/BDrawer/BDrawer.vue?vue&type=script&setup=true&lang.ts
-var S = ["aria-label", "aria-labelledby"], C = {
-	key: 0,
-	class: "b-drawer__header"
-}, w = { class: "b-drawer__header-title-wrapper" }, T = ["id"], E = {
-	key: 0,
-	class: "b-drawer__extra"
-}, D = {
-	key: 1,
-	class: "b-drawer__body"
-}, O = {
-	key: 0,
-	class: "b-drawer__loading",
-	"aria-live": "polite"
-}, k = {
-	key: 2,
-	class: "b-drawer__footer"
-}, A = /* @__PURE__ */ l({
-	__name: "BDrawer",
+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: {
-		placement: { default: "right" },
-		size: { default: "default" },
-		title: { default: "" },
-		closable: {
-			type: Boolean,
-			default: !0
-		},
-		mask: {
-			type: Boolean,
-			default: !0
-		},
-		maskClosable: {
-			type: Boolean,
-			default: !0
-		},
-		keyboard: {
-			type: Boolean,
-			default: !0
-		},
-		destroyOnClose: {
+		orientation: { default: "horizontal" },
+		variant: { default: "solid" },
+		dashed: {
 			type: Boolean,
 			default: !1
 		},
-		width: {},
-		height: {},
-		zIndex: { default: 1e3 },
-		getContainer: {},
-		autoFocus: {
+		plain: {
 			type: Boolean,
 			default: !0
 		},
-		modelValue: {
-			type: Boolean,
-			default: () => void 0
-		},
-		forceRender: {
-			type: Boolean,
-			default: !1
-		},
-		extra: { default: "" },
-		footer: { default: "" },
-		loading: {
-			type: Boolean,
-			default: !1
-		},
-		ariaLabel: {}
+		size: { default: "large" },
+		titlePlacement: { default: "center" }
 	},
-	emits: [
-		"close",
-		"afterOpenChange",
-		"update:modelValue"
-	],
-	setup(l, { expose: A, emit: j }) {
-		let M = j, N = ee(), P = y(), F = h(!1), I = n(() => l.modelValue === void 0 ? F.value : l.modelValue), L = h(!1), R = n(() => l.forceRender ? !0 : l.destroyOnClose ? I.value : L.value || I.value);
-		b(I, (e) => {
-			e && (L.value = !0);
-		});
-		let z = n(() => l.placement === "left" || l.placement === "right"), B = {
-			default: 378,
-			large: 736
-		}, V = n(() => l.width === void 0 ? z.value ? `${B[l.size]}px` : "100%" : typeof l.width == "number" ? `${l.width}px` : l.width), H = n(() => l.height === void 0 ? z.value ? "100%" : `${B[l.size]}px` : typeof l.height == "number" ? `${l.height}px` : l.height), U = n(() => !!(l.title || N.title)), W = n(() => !!(l.extra || N.extra)), G = n(() => !!(l.footer || N.footer)), K = n(() => U.value || l.closable || W.value), q = n(() => l.getContainer ? l.getContainer : "body"), J = n(() => ({
-			width: V.value,
-			height: H.value,
-			zIndex: l.zIndex
-		})), Y = h(null), X = null;
-		function Z(e) {
-			if (e.key !== "Tab" || !Y.value) return;
-			let t = Array.from(Y.value.querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"));
-			if (t.length === 0) {
-				e.preventDefault();
-				return;
+	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
 			}
-			let n = t[0], r = t[t.length - 1];
-			e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
-		}
-		function Q() {
-			!l.autoFocus || !Y.value || u(() => {
-				if (!Y.value) return;
-				let e = Y.value.querySelector("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])");
-				e ? e.focus() : Y.value.focus();
-			});
-		}
-		b(I, (e) => {
-			e ? (X = document.activeElement, u(() => Q()), document.body.style.overflow = "hidden") : document.body.style.overflow = "";
-		}), p(() => {
-			document.body.style.overflow = "";
-		});
-		function $(e) {
-			M("close", e), l.modelValue === void 0 ? F.value = !1 : M("update:modelValue", !1);
-		}
-		function te(e) {
-			l.maskClosable && $(e);
-		}
-		function ne(e) {
-			e.key === "Escape" && l.keyboard && (e.stopPropagation(), $(e)), Z(e);
-		}
-		function re() {
-			M("afterOpenChange", !0);
-		}
-		function ie() {
-			M("afterOpenChange", !1), X && typeof X.focus == "function" && (X.focus(), X = null);
-		}
-		function ae() {
-			l.modelValue === void 0 ? F.value = !0 : M("update:modelValue", !0);
-		}
-		return A({ open: ae }), (n, u) => (m(), r(e, { to: q.value }, [c(t, {
-			name: "b-drawer",
-			onAfterEnter: re,
-			onAfterLeave: ie
-		}, {
-			default: x(() => [I.value ? (m(), a("div", {
-				key: 0,
-				class: d(["b-drawer-root", `b-drawer-root--${l.placement}`]),
-				style: f({ zIndex: l.zIndex })
-			}, [l.mask ? (m(), a("div", {
-				key: 0,
-				class: "b-drawer__mask",
-				"aria-hidden": "true",
-				onClick: te
-			})) : i("", !0), o("div", {
-				ref_key: "drawerRef",
-				ref: Y,
-				class: d(["b-drawer", [
-					`b-drawer--${l.placement}`,
-					`b-drawer--${l.size}`,
-					{
-						"b-drawer--has-header": K.value,
-						"b-drawer--has-footer": G.value
-					}
-				]]),
-				role: "dialog",
-				"aria-modal": "true",
-				"aria-label": U.value ? void 0 : l.ariaLabel,
-				"aria-labelledby": U.value ? v(P) : void 0,
-				style: f(J.value),
-				tabindex: "-1",
-				onKeydown: ne
-			}, [
-				K.value ? (m(), a("div", C, [o("div", w, [l.closable ? (m(), a("button", {
-					key: 0,
-					type: "button",
-					class: "b-drawer__close",
-					"aria-label": "Close drawer",
-					onClick: $
-				}, [g(n.$slots, "closeIcon", {}, () => [u[0] ||= o("svg", {
-					class: "b-drawer__close-icon",
-					viewBox: "0 0 24 24",
-					xmlns: "http://www.w3.org/2000/svg",
-					"aria-hidden": "true",
-					focusable: "false"
-				}, [o("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })], -1)])])) : i("", !0), U.value ? (m(), a("div", {
-					key: 1,
-					id: v(P),
-					class: "b-drawer__title"
-				}, [g(n.$slots, "title", {}, () => [s(_(l.title), 1)])], 8, T)) : i("", !0)]), W.value ? (m(), a("div", E, [g(n.$slots, "extra", {}, () => [s(_(l.extra), 1)])])) : i("", !0)])) : i("", !0),
-				R.value ? (m(), a("div", D, [l.loading ? (m(), a("div", O, [...u[1] ||= [o("svg", {
-					class: "b-drawer__spinner",
-					viewBox: "0 0 24 24",
-					xmlns: "http://www.w3.org/2000/svg",
-					"aria-hidden": "true",
-					focusable: "false"
-				}, [o("circle", {
-					cx: "12",
-					cy: "12",
-					r: "10",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "3",
-					"stroke-dasharray": "31.4 31.4",
-					"stroke-linecap": "round"
-				})], -1), o("span", { class: "b-drawer__loading-text" }, "Loading…", -1)]])) : g(n.$slots, "default", { key: 1 })])) : i("", !0),
-				G.value ? (m(), a("div", k, [g(n.$slots, "footer", {}, () => [s(_(l.footer), 1)])])) : i("", !0)
-			], 46, S)], 6)) : i("", !0)]),
-			_: 3
-		})], 8, ["to"]));
+		]);
+		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 { A as default };
+export { l as default };
 
 //# sourceMappingURL=design-system81.js.map

package/dist/design-system81.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system81.js","names":[],"sources":["../src/components/BDrawer/BDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BDrawerPlacement, BDrawerSize } from '@/types';\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  placement = 'right',\n  size = 'default',\n  title = '',\n  closable = true,\n  mask = true,\n  maskClosable = true,\n  keyboard = true,\n  destroyOnClose = false,\n  width,\n  height,\n  zIndex = 1000,\n  getContainer,\n  autoFocus = true,\n  modelValue = undefined,\n  forceRender = false,\n  extra = '',\n  footer = '',\n  loading = false,\n  ariaLabel,\n} = defineProps<{\n  /** Direction from which the drawer slides in. */\n  placement?: BDrawerPlacement;\n  /** Preset width/height: 'default' (378px) or 'large' (736px). */\n  size?: BDrawerSize;\n  /** Drawer title. Also accepts the `title` slot. */\n  title?: string;\n  /** Whether to show the close button. */\n  closable?: boolean;\n  /** Whether to show the mask overlay. */\n  mask?: boolean;\n  /** Clicking the mask closes the drawer. */\n  maskClosable?: boolean;\n  /** Pressing Escape closes the drawer. */\n  keyboard?: boolean;\n  /** Destroy child components when closing. */\n  destroyOnClose?: boolean;\n  /** Custom width (overrides size) for left/right placement. */\n  width?: string | number;\n  /** Custom height (overrides size) for top/bottom placement. */\n  height?: string | number;\n  /** z-index of the drawer. */\n  zIndex?: number;\n  /**\n   * CSS selector or element to teleport the drawer into.\n   * Defaults to `body`.\n   */\n  getContainer?: string | HTMLElement;\n  /** Whether to auto-focus the first focusable element when opened. */\n  autoFocus?: boolean;\n  /**\n   * Controlled visibility - bind with `v-model`.\n   * When not provided the drawer manages its own state.\n   */\n  modelValue?: boolean;\n  /** Force render the drawer content even when hidden. */\n  forceRender?: boolean;\n  /** Extra content in the header right area (also accepts the `extra` slot). */\n  extra?: string;\n  /** Footer content (also accepts the `footer` slot). */\n  footer?: string;\n  /** Show loading spinner in body area. */\n  loading?: boolean;\n  /**\n   * Accessible label for the dialog when no visible title is present.\n   * Required when `closable=false` and no `title` prop or `#title` slot is used.\n   */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the user requests to close the drawer. */\n  (e: 'close', event: MouseEvent | KeyboardEvent): void;\n  /** Fired after the close transition completes. */\n  (e: 'afterOpenChange', open: boolean): void;\n  /** v-model support */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\nconst slots = defineSlots<{\n  /** Main content of the drawer. */\n  default?(): unknown;\n  /** Overrides the `title` prop. */\n  title?(): unknown;\n  /** Overrides the `extra` prop (right side of header). */\n  extra?(): unknown;\n  /** Overrides the `footer` prop. */\n  footer?(): unknown;\n  /** Custom close icon. */\n  closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst titleId = useId();\n\n/** Uncontrolled visibility. */\nconst internalOpen = ref(false);\n\n/** Effective visibility. */\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\n/** Whether the drawer has ever been opened (for lazy rendering). */\nconst hasBeenOpened = ref(false);\n\n/** Whether the content should render. */\nconst shouldRender = computed(() => {\n  if (forceRender) return true;\n  if (destroyOnClose) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\n// Track when drawer opens at least once\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isHorizontal = computed(() => placement === 'left' || placement === 'right');\n\nconst sizeMap: Record<BDrawerSize, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst resolvedWidth = computed(() => {\n  if (width !== undefined) return typeof width === 'number' ? `${width}px` : width;\n  return isHorizontal.value ? `${sizeMap[size]}px` : '100%';\n});\n\nconst resolvedHeight = computed(() => {\n  if (height !== undefined) return typeof height === 'number' ? `${height}px` : height;\n  return !isHorizontal.value ? `${sizeMap[size]}px` : '100%';\n});\n\nconst hasTitle = computed(() => Boolean(title || slots.title));\nconst hasExtra = computed(() => Boolean(extra || slots.extra));\nconst hasFooter = computed(() => Boolean(footer || slots.footer));\nconst hasHeader = computed(() => hasTitle.value || closable || hasExtra.value);\n\nconst teleportTarget = computed(() => {\n  if (getContainer) return getContainer;\n  return 'body';\n});\n\nconst panelStyle = computed(() => ({\n  width: resolvedWidth.value,\n  height: resolvedHeight.value,\n  zIndex,\n}));\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nconst drawerRef = ref<HTMLElement | null>(null);\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nfunction trapFocus(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !drawerRef.value) return;\n\n  const focusableSelectors =\n    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n  const focusable = Array.from(drawerRef.value.querySelectorAll<HTMLElement>(focusableSelectors));\n\n  if (focusable.length === 0) {\n    event.preventDefault();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (event.shiftKey) {\n    if (document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nfunction focusFirst() {\n  if (!autoFocus || !drawerRef.value) return;\n\n  nextTick(() => {\n    if (!drawerRef.value) return;\n    const focusableSelectors =\n      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n    const first = drawerRef.value.querySelector<HTMLElement>(focusableSelectors);\n    if (first) {\n      first.focus();\n    } else {\n      // Focus the panel itself as a fallback\n      drawerRef.value.focus();\n    }\n  });\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    nextTick(() => focusFirst());\n    document.body.style.overflow = 'hidden';\n  } else {\n    document.body.style.overflow = '';\n  }\n});\n\nonBeforeUnmount(() => {\n  document.body.style.overflow = '';\n});\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction requestClose(event: MouseEvent | KeyboardEvent) {\n  emit('close', event);\n  if (modelValue !== undefined) {\n    emit('update:modelValue', false);\n  } else {\n    internalOpen.value = false;\n  }\n}\n\nfunction onMaskClick(event: MouseEvent) {\n  if (maskClosable) {\n    requestClose(event);\n  }\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && keyboard) {\n    event.stopPropagation();\n    requestClose(event);\n  }\n  trapFocus(event);\n}\n\nfunction onAfterEnter() {\n  emit('afterOpenChange', true);\n}\n\nfunction onAfterLeave() {\n  emit('afterOpenChange', false);\n  // Restore focus to the previously focused element\n  if (previouslyFocusedElement && typeof previouslyFocusedElement.focus === 'function') {\n    previouslyFocusedElement.focus();\n    previouslyFocusedElement = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\nfunction open() {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', true);\n  } else {\n    internalOpen.value = true;\n  }\n}\n\ndefineExpose({ open });\n</script>\n\n<template>\n  <Teleport :to=\"teleportTarget\">\n    <Transition name=\"b-drawer\" @after-enter=\"onAfterEnter\" @after-leave=\"onAfterLeave\">\n      <div\n        v-if=\"isOpen\"\n        class=\"b-drawer-root\"\n        :class=\"`b-drawer-root--${placement}`\"\n        :style=\"{ zIndex }\"\n      >\n        <!-- Mask -->\n        <div v-if=\"mask\" class=\"b-drawer__mask\" aria-hidden=\"true\" @click=\"onMaskClick\" />\n\n        <!-- Panel -->\n        <div\n          ref=\"drawerRef\"\n          class=\"b-drawer\"\n          :class=\"[\n            `b-drawer--${placement}`,\n            `b-drawer--${size}`,\n            {\n              'b-drawer--has-header': hasHeader,\n              'b-drawer--has-footer': hasFooter,\n            },\n          ]\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"!hasTitle ? ariaLabel : undefined\"\n          :aria-labelledby=\"hasTitle ? titleId : undefined\"\n          :style=\"panelStyle\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <!-- Header -->\n          <div v-if=\"hasHeader\" class=\"b-drawer__header\">\n            <div class=\"b-drawer__header-title-wrapper\">\n              <!-- Close button -->\n              <button\n                v-if=\"closable\"\n                type=\"button\"\n                class=\"b-drawer__close\"\n                aria-label=\"Close drawer\"\n                @click=\"requestClose\"\n              >\n                <slot name=\"closeIcon\">\n                  <svg\n                    class=\"b-drawer__close-icon\"\n                    viewBox=\"0 0 24 24\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                  >\n                    <path\n                      d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                    />\n                  </svg>\n                </slot>\n              </button>\n\n              <!-- Title -->\n              <div v-if=\"hasTitle\" :id=\"titleId\" class=\"b-drawer__title\">\n                <slot name=\"title\">{{ title }}</slot>\n              </div>\n            </div>\n\n            <!-- Extra -->\n            <div v-if=\"hasExtra\" class=\"b-drawer__extra\">\n              <slot name=\"extra\">{{ extra }}</slot>\n            </div>\n          </div>\n\n          <!-- Body -->\n          <div v-if=\"shouldRender\" class=\"b-drawer__body\">\n            <div v-if=\"loading\" class=\"b-drawer__loading\" aria-live=\"polite\">\n              <svg\n                class=\"b-drawer__spinner\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-dasharray=\"31.4 31.4\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n              <span class=\"b-drawer__loading-text\">Loading…</span>\n            </div>\n            <slot v-else />\n          </div>\n\n          <!-- Footer -->\n          <div v-if=\"hasFooter\" class=\"b-drawer__footer\">\n            <slot name=\"footer\">{{ footer }}</slot>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-drawer-root {\n  --b-drawer-bg: #fff;\n  --b-drawer-color: oklch(25% 0 0);\n  --b-drawer-mask-bg: rgba(0, 0, 0, 0.45);\n  --b-drawer-border-color: oklch(90% 0 0);\n  --b-drawer-header-padding: 1rem 1.5rem;\n  --b-drawer-body-padding: 1.5rem;\n  --b-drawer-footer-padding: 0.5rem 1rem;\n  --b-drawer-close-color: oklch(40% 0 0);\n  --b-drawer-close-hover-color: oklch(20% 0 0);\n  --b-drawer-title-font-size: 1rem;\n  --b-drawer-title-font-weight: 600;\n  --b-drawer-title-line-height: 1.5;\n  --b-drawer-transition-duration: 300ms;\n  --b-drawer-shadow:\n    -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12),\n    -9px 0 28px 8px rgba(0, 0, 0, 0.05);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-drawer-root {\n  --b-drawer-bg: oklch(20% 0 0);\n  --b-drawer-color: oklch(90% 0 0);\n  --b-drawer-mask-bg: rgba(0, 0, 0, 0.65);\n  --b-drawer-border-color: oklch(30% 0 0);\n  --b-drawer-close-color: oklch(65% 0 0);\n  --b-drawer-close-hover-color: oklch(90% 0 0);\n  --b-drawer-shadow:\n    -6px 0 16px 0 rgba(0, 0, 0, 0.24), -3px 0 6px -4px rgba(0, 0, 0, 0.36),\n    -9px 0 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-drawer-root {\n    --b-drawer-bg: oklch(20% 0 0);\n    --b-drawer-color: oklch(90% 0 0);\n    --b-drawer-mask-bg: rgba(0, 0, 0, 0.65);\n    --b-drawer-border-color: oklch(30% 0 0);\n    --b-drawer-close-color: oklch(65% 0 0);\n    --b-drawer-close-hover-color: oklch(90% 0 0);\n    --b-drawer-shadow:\n      -6px 0 16px 0 rgba(0, 0, 0, 0.24), -3px 0 6px -4px rgba(0, 0, 0, 0.36),\n      -9px 0 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Root wrapper (mask + panel)\n   ───────────────────────────────────────────── */\n.b-drawer-root {\n  position: fixed;\n  inset: 0;\n}\n\n/* ── Mask ── */\n.b-drawer__mask {\n  position: absolute;\n  inset: 0;\n  background: var(--b-drawer-mask-bg);\n}\n\n/* ── Panel base ── */\n.b-drawer {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  background: var(--b-drawer-bg);\n  color: var(--b-drawer-color);\n  box-shadow: var(--b-drawer-shadow);\n  outline: none;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n/* Placement positioning */\n.b-drawer--right {\n  top: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.b-drawer--left {\n  top: 0;\n  left: 0;\n  bottom: 0;\n}\n\n.b-drawer--top {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n.b-drawer--bottom {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n/* ── Header ── */\n.b-drawer__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--b-drawer-header-padding);\n  border-bottom: 1px solid var(--b-drawer-border-color);\n  flex-shrink: 0;\n}\n\n.b-drawer__header-title-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n  flex: 1;\n}\n\n.b-drawer__title {\n  font-size: var(--b-drawer-title-font-size);\n  font-weight: var(--b-drawer-title-font-weight);\n  line-height: var(--b-drawer-title-line-height);\n  color: var(--b-drawer-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.b-drawer__extra {\n  flex-shrink: 0;\n}\n\n/* ── Close button ── */\n.b-drawer__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--b-drawer-close-color);\n  cursor: pointer;\n  width: 1.375rem;\n  height: 1.375rem;\n  font-size: 1rem;\n  line-height: 1;\n  transition: color var(--b-drawer-transition-duration) ease;\n}\n\n.b-drawer__close:hover {\n  color: var(--b-drawer-close-hover-color);\n}\n\n.b-drawer__close:focus-visible {\n  outline: 2px solid oklch(62.3% 0.214 259.815);\n  outline-offset: 2px;\n}\n\n.b-drawer__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n/* ── Body ── */\n.b-drawer__body {\n  flex: 1;\n  padding: var(--b-drawer-body-padding);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* ── Footer ── */\n.b-drawer__footer {\n  flex-shrink: 0;\n  padding: var(--b-drawer-footer-padding);\n  border-top: 1px solid var(--b-drawer-border-color);\n}\n\n/* ── Loading spinner ── */\n.b-drawer__loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 2rem;\n  color: var(--b-drawer-close-color);\n}\n\n.b-drawer__spinner {\n  width: 2rem;\n  height: 2rem;\n  animation: b-drawer-spin 1s linear infinite;\n}\n\n.b-drawer__loading-text {\n  font-size: 0.875rem;\n}\n\n@keyframes b-drawer-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Slide transitions\n   ─────────────────────────────────────────────\n   Vue's <Transition> adds .b-drawer-{enter|leave}-* classes\n   to the root element (.b-drawer-root).  We target the\n   children (.b-drawer and .b-drawer__mask) from there.\n   ───────────────────────────────────────────── */\n\n/*\n * Vue's <Transition> listens for `transitionend` on the root element\n * (.b-drawer-root) to know when the leave animation finishes.\n * We must put a real transition on the root itself so that event fires.\n * We use `visibility` which is invisible to the user but gives Vue\n * the transitionend signal it needs.\n */\n.b-drawer-enter-active,\n.b-drawer-leave-active {\n  transition: visibility var(--b-drawer-transition-duration) linear;\n}\n\n.b-drawer-leave-to {\n  visibility: hidden;\n}\n\n/* - Active phase: set transition on children - */\n.b-drawer-enter-active > .b-drawer,\n.b-drawer-leave-active > .b-drawer {\n  transition: transform var(--b-drawer-transition-duration) cubic-bezier(0.7, 0.3, 0.1, 1);\n}\n\n.b-drawer-enter-active > .b-drawer__mask,\n.b-drawer-leave-active > .b-drawer__mask {\n  transition: opacity var(--b-drawer-transition-duration) ease;\n}\n\n/* - From / To: mask fades - */\n.b-drawer-enter-from > .b-drawer__mask,\n.b-drawer-leave-to > .b-drawer__mask {\n  opacity: 0;\n}\n\n/* - From / To: panel slides (right) - */\n.b-drawer-enter-from > .b-drawer--right,\n.b-drawer-leave-to > .b-drawer--right {\n  transform: translateX(100%);\n}\n\n/* - From / To: panel slides (left) - */\n.b-drawer-enter-from > .b-drawer--left,\n.b-drawer-leave-to > .b-drawer--left {\n  transform: translateX(-100%);\n}\n\n/* - From / To: panel slides (top) - */\n.b-drawer-enter-from > .b-drawer--top,\n.b-drawer-leave-to > .b-drawer--top {\n  transform: translateY(-100%);\n}\n\n/* - From / To: panel slides (bottom) - */\n.b-drawer-enter-from > .b-drawer--bottom,\n.b-drawer-leave-to > .b-drawer--bottom {\n  transform: translateY(100%);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-drawer-enter-active,\n  .b-drawer-leave-active,\n  .b-drawer-enter-active > .b-drawer,\n  .b-drawer-leave-active > .b-drawer,\n  .b-drawer-enter-active > .b-drawer__mask,\n  .b-drawer-leave-active > .b-drawer__mask {\n    transition-duration: 0ms;\n  }\n\n  .b-drawer__spinner {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"design-system81.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-system83.js

@@ -1,6 +1,6 @@
 import e from "./design-system81.js";
 /* empty css                */
-//#region src/components/BDrawer/BDrawer.vue
+//#region src/components/BDivider/BDivider.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system83.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system83.js","names":[],"sources":["../src/components/BDrawer/BDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BDrawerPlacement, BDrawerSize } from '@/types';\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  placement = 'right',\n  size = 'default',\n  title = '',\n  closable = true,\n  mask = true,\n  maskClosable = true,\n  keyboard = true,\n  destroyOnClose = false,\n  width,\n  height,\n  zIndex = 1000,\n  getContainer,\n  autoFocus = true,\n  modelValue = undefined,\n  forceRender = false,\n  extra = '',\n  footer = '',\n  loading = false,\n  ariaLabel,\n} = defineProps<{\n  /** Direction from which the drawer slides in. */\n  placement?: BDrawerPlacement;\n  /** Preset width/height: 'default' (378px) or 'large' (736px). */\n  size?: BDrawerSize;\n  /** Drawer title. Also accepts the `title` slot. */\n  title?: string;\n  /** Whether to show the close button. */\n  closable?: boolean;\n  /** Whether to show the mask overlay. */\n  mask?: boolean;\n  /** Clicking the mask closes the drawer. */\n  maskClosable?: boolean;\n  /** Pressing Escape closes the drawer. */\n  keyboard?: boolean;\n  /** Destroy child components when closing. */\n  destroyOnClose?: boolean;\n  /** Custom width (overrides size) for left/right placement. */\n  width?: string | number;\n  /** Custom height (overrides size) for top/bottom placement. */\n  height?: string | number;\n  /** z-index of the drawer. */\n  zIndex?: number;\n  /**\n   * CSS selector or element to teleport the drawer into.\n   * Defaults to `body`.\n   */\n  getContainer?: string | HTMLElement;\n  /** Whether to auto-focus the first focusable element when opened. */\n  autoFocus?: boolean;\n  /**\n   * Controlled visibility - bind with `v-model`.\n   * When not provided the drawer manages its own state.\n   */\n  modelValue?: boolean;\n  /** Force render the drawer content even when hidden. */\n  forceRender?: boolean;\n  /** Extra content in the header right area (also accepts the `extra` slot). */\n  extra?: string;\n  /** Footer content (also accepts the `footer` slot). */\n  footer?: string;\n  /** Show loading spinner in body area. */\n  loading?: boolean;\n  /**\n   * Accessible label for the dialog when no visible title is present.\n   * Required when `closable=false` and no `title` prop or `#title` slot is used.\n   */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the user requests to close the drawer. */\n  (e: 'close', event: MouseEvent | KeyboardEvent): void;\n  /** Fired after the close transition completes. */\n  (e: 'afterOpenChange', open: boolean): void;\n  /** v-model support */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\nconst slots = defineSlots<{\n  /** Main content of the drawer. */\n  default?(): unknown;\n  /** Overrides the `title` prop. */\n  title?(): unknown;\n  /** Overrides the `extra` prop (right side of header). */\n  extra?(): unknown;\n  /** Overrides the `footer` prop. */\n  footer?(): unknown;\n  /** Custom close icon. */\n  closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst titleId = useId();\n\n/** Uncontrolled visibility. */\nconst internalOpen = ref(false);\n\n/** Effective visibility. */\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\n/** Whether the drawer has ever been opened (for lazy rendering). */\nconst hasBeenOpened = ref(false);\n\n/** Whether the content should render. */\nconst shouldRender = computed(() => {\n  if (forceRender) return true;\n  if (destroyOnClose) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\n// Track when drawer opens at least once\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isHorizontal = computed(() => placement === 'left' || placement === 'right');\n\nconst sizeMap: Record<BDrawerSize, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst resolvedWidth = computed(() => {\n  if (width !== undefined) return typeof width === 'number' ? `${width}px` : width;\n  return isHorizontal.value ? `${sizeMap[size]}px` : '100%';\n});\n\nconst resolvedHeight = computed(() => {\n  if (height !== undefined) return typeof height === 'number' ? `${height}px` : height;\n  return !isHorizontal.value ? `${sizeMap[size]}px` : '100%';\n});\n\nconst hasTitle = computed(() => Boolean(title || slots.title));\nconst hasExtra = computed(() => Boolean(extra || slots.extra));\nconst hasFooter = computed(() => Boolean(footer || slots.footer));\nconst hasHeader = computed(() => hasTitle.value || closable || hasExtra.value);\n\nconst teleportTarget = computed(() => {\n  if (getContainer) return getContainer;\n  return 'body';\n});\n\nconst panelStyle = computed(() => ({\n  width: resolvedWidth.value,\n  height: resolvedHeight.value,\n  zIndex,\n}));\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nconst drawerRef = ref<HTMLElement | null>(null);\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nfunction trapFocus(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !drawerRef.value) return;\n\n  const focusableSelectors =\n    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n  const focusable = Array.from(drawerRef.value.querySelectorAll<HTMLElement>(focusableSelectors));\n\n  if (focusable.length === 0) {\n    event.preventDefault();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (event.shiftKey) {\n    if (document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nfunction focusFirst() {\n  if (!autoFocus || !drawerRef.value) return;\n\n  nextTick(() => {\n    if (!drawerRef.value) return;\n    const focusableSelectors =\n      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n    const first = drawerRef.value.querySelector<HTMLElement>(focusableSelectors);\n    if (first) {\n      first.focus();\n    } else {\n      // Focus the panel itself as a fallback\n      drawerRef.value.focus();\n    }\n  });\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    nextTick(() => focusFirst());\n    document.body.style.overflow = 'hidden';\n  } else {\n    document.body.style.overflow = '';\n  }\n});\n\nonBeforeUnmount(() => {\n  document.body.style.overflow = '';\n});\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction requestClose(event: MouseEvent | KeyboardEvent) {\n  emit('close', event);\n  if (modelValue !== undefined) {\n    emit('update:modelValue', false);\n  } else {\n    internalOpen.value = false;\n  }\n}\n\nfunction onMaskClick(event: MouseEvent) {\n  if (maskClosable) {\n    requestClose(event);\n  }\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && keyboard) {\n    event.stopPropagation();\n    requestClose(event);\n  }\n  trapFocus(event);\n}\n\nfunction onAfterEnter() {\n  emit('afterOpenChange', true);\n}\n\nfunction onAfterLeave() {\n  emit('afterOpenChange', false);\n  // Restore focus to the previously focused element\n  if (previouslyFocusedElement && typeof previouslyFocusedElement.focus === 'function') {\n    previouslyFocusedElement.focus();\n    previouslyFocusedElement = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\nfunction open() {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', true);\n  } else {\n    internalOpen.value = true;\n  }\n}\n\ndefineExpose({ open });\n</script>\n\n<template>\n  <Teleport :to=\"teleportTarget\">\n    <Transition name=\"b-drawer\" @after-enter=\"onAfterEnter\" @after-leave=\"onAfterLeave\">\n      <div\n        v-if=\"isOpen\"\n        class=\"b-drawer-root\"\n        :class=\"`b-drawer-root--${placement}`\"\n        :style=\"{ zIndex }\"\n      >\n        <!-- Mask -->\n        <div v-if=\"mask\" class=\"b-drawer__mask\" aria-hidden=\"true\" @click=\"onMaskClick\" />\n\n        <!-- Panel -->\n        <div\n          ref=\"drawerRef\"\n          class=\"b-drawer\"\n          :class=\"[\n            `b-drawer--${placement}`,\n            `b-drawer--${size}`,\n            {\n              'b-drawer--has-header': hasHeader,\n              'b-drawer--has-footer': hasFooter,\n            },\n          ]\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"!hasTitle ? ariaLabel : undefined\"\n          :aria-labelledby=\"hasTitle ? titleId : undefined\"\n          :style=\"panelStyle\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <!-- Header -->\n          <div v-if=\"hasHeader\" class=\"b-drawer__header\">\n            <div class=\"b-drawer__header-title-wrapper\">\n              <!-- Close button -->\n              <button\n                v-if=\"closable\"\n                type=\"button\"\n                class=\"b-drawer__close\"\n                aria-label=\"Close drawer\"\n                @click=\"requestClose\"\n              >\n                <slot name=\"closeIcon\">\n                  <svg\n                    class=\"b-drawer__close-icon\"\n                    viewBox=\"0 0 24 24\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                  >\n                    <path\n                      d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                    />\n                  </svg>\n                </slot>\n              </button>\n\n              <!-- Title -->\n              <div v-if=\"hasTitle\" :id=\"titleId\" class=\"b-drawer__title\">\n                <slot name=\"title\">{{ title }}</slot>\n              </div>\n            </div>\n\n            <!-- Extra -->\n            <div v-if=\"hasExtra\" class=\"b-drawer__extra\">\n              <slot name=\"extra\">{{ extra }}</slot>\n            </div>\n          </div>\n\n          <!-- Body -->\n          <div v-if=\"shouldRender\" class=\"b-drawer__body\">\n            <div v-if=\"loading\" class=\"b-drawer__loading\" aria-live=\"polite\">\n              <svg\n                class=\"b-drawer__spinner\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-dasharray=\"31.4 31.4\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n              <span class=\"b-drawer__loading-text\">Loading…</span>\n            </div>\n            <slot v-else />\n          </div>\n\n          <!-- Footer -->\n          <div v-if=\"hasFooter\" class=\"b-drawer__footer\">\n            <slot name=\"footer\">{{ footer }}</slot>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-drawer-root {\n  --b-drawer-bg: #fff;\n  --b-drawer-color: oklch(25% 0 0);\n  --b-drawer-mask-bg: rgba(0, 0, 0, 0.45);\n  --b-drawer-border-color: oklch(90% 0 0);\n  --b-drawer-header-padding: 1rem 1.5rem;\n  --b-drawer-body-padding: 1.5rem;\n  --b-drawer-footer-padding: 0.5rem 1rem;\n  --b-drawer-close-color: oklch(40% 0 0);\n  --b-drawer-close-hover-color: oklch(20% 0 0);\n  --b-drawer-title-font-size: 1rem;\n  --b-drawer-title-font-weight: 600;\n  --b-drawer-title-line-height: 1.5;\n  --b-drawer-transition-duration: 300ms;\n  --b-drawer-shadow:\n    -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12),\n    -9px 0 28px 8px rgba(0, 0, 0, 0.05);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-drawer-root {\n  --b-drawer-bg: oklch(20% 0 0);\n  --b-drawer-color: oklch(90% 0 0);\n  --b-drawer-mask-bg: rgba(0, 0, 0, 0.65);\n  --b-drawer-border-color: oklch(30% 0 0);\n  --b-drawer-close-color: oklch(65% 0 0);\n  --b-drawer-close-hover-color: oklch(90% 0 0);\n  --b-drawer-shadow:\n    -6px 0 16px 0 rgba(0, 0, 0, 0.24), -3px 0 6px -4px rgba(0, 0, 0, 0.36),\n    -9px 0 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-drawer-root {\n    --b-drawer-bg: oklch(20% 0 0);\n    --b-drawer-color: oklch(90% 0 0);\n    --b-drawer-mask-bg: rgba(0, 0, 0, 0.65);\n    --b-drawer-border-color: oklch(30% 0 0);\n    --b-drawer-close-color: oklch(65% 0 0);\n    --b-drawer-close-hover-color: oklch(90% 0 0);\n    --b-drawer-shadow:\n      -6px 0 16px 0 rgba(0, 0, 0, 0.24), -3px 0 6px -4px rgba(0, 0, 0, 0.36),\n      -9px 0 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Root wrapper (mask + panel)\n   ───────────────────────────────────────────── */\n.b-drawer-root {\n  position: fixed;\n  inset: 0;\n}\n\n/* ── Mask ── */\n.b-drawer__mask {\n  position: absolute;\n  inset: 0;\n  background: var(--b-drawer-mask-bg);\n}\n\n/* ── Panel base ── */\n.b-drawer {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  background: var(--b-drawer-bg);\n  color: var(--b-drawer-color);\n  box-shadow: var(--b-drawer-shadow);\n  outline: none;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n/* Placement positioning */\n.b-drawer--right {\n  top: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.b-drawer--left {\n  top: 0;\n  left: 0;\n  bottom: 0;\n}\n\n.b-drawer--top {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n.b-drawer--bottom {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n/* ── Header ── */\n.b-drawer__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--b-drawer-header-padding);\n  border-bottom: 1px solid var(--b-drawer-border-color);\n  flex-shrink: 0;\n}\n\n.b-drawer__header-title-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n  flex: 1;\n}\n\n.b-drawer__title {\n  font-size: var(--b-drawer-title-font-size);\n  font-weight: var(--b-drawer-title-font-weight);\n  line-height: var(--b-drawer-title-line-height);\n  color: var(--b-drawer-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.b-drawer__extra {\n  flex-shrink: 0;\n}\n\n/* ── Close button ── */\n.b-drawer__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--b-drawer-close-color);\n  cursor: pointer;\n  width: 1.375rem;\n  height: 1.375rem;\n  font-size: 1rem;\n  line-height: 1;\n  transition: color var(--b-drawer-transition-duration) ease;\n}\n\n.b-drawer__close:hover {\n  color: var(--b-drawer-close-hover-color);\n}\n\n.b-drawer__close:focus-visible {\n  outline: 2px solid oklch(62.3% 0.214 259.815);\n  outline-offset: 2px;\n}\n\n.b-drawer__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n/* ── Body ── */\n.b-drawer__body {\n  flex: 1;\n  padding: var(--b-drawer-body-padding);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* ── Footer ── */\n.b-drawer__footer {\n  flex-shrink: 0;\n  padding: var(--b-drawer-footer-padding);\n  border-top: 1px solid var(--b-drawer-border-color);\n}\n\n/* ── Loading spinner ── */\n.b-drawer__loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 2rem;\n  color: var(--b-drawer-close-color);\n}\n\n.b-drawer__spinner {\n  width: 2rem;\n  height: 2rem;\n  animation: b-drawer-spin 1s linear infinite;\n}\n\n.b-drawer__loading-text {\n  font-size: 0.875rem;\n}\n\n@keyframes b-drawer-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Slide transitions\n   ─────────────────────────────────────────────\n   Vue's <Transition> adds .b-drawer-{enter|leave}-* classes\n   to the root element (.b-drawer-root).  We target the\n   children (.b-drawer and .b-drawer__mask) from there.\n   ───────────────────────────────────────────── */\n\n/*\n * Vue's <Transition> listens for `transitionend` on the root element\n * (.b-drawer-root) to know when the leave animation finishes.\n * We must put a real transition on the root itself so that event fires.\n * We use `visibility` which is invisible to the user but gives Vue\n * the transitionend signal it needs.\n */\n.b-drawer-enter-active,\n.b-drawer-leave-active {\n  transition: visibility var(--b-drawer-transition-duration) linear;\n}\n\n.b-drawer-leave-to {\n  visibility: hidden;\n}\n\n/* - Active phase: set transition on children - */\n.b-drawer-enter-active > .b-drawer,\n.b-drawer-leave-active > .b-drawer {\n  transition: transform var(--b-drawer-transition-duration) cubic-bezier(0.7, 0.3, 0.1, 1);\n}\n\n.b-drawer-enter-active > .b-drawer__mask,\n.b-drawer-leave-active > .b-drawer__mask {\n  transition: opacity var(--b-drawer-transition-duration) ease;\n}\n\n/* - From / To: mask fades - */\n.b-drawer-enter-from > .b-drawer__mask,\n.b-drawer-leave-to > .b-drawer__mask {\n  opacity: 0;\n}\n\n/* - From / To: panel slides (right) - */\n.b-drawer-enter-from > .b-drawer--right,\n.b-drawer-leave-to > .b-drawer--right {\n  transform: translateX(100%);\n}\n\n/* - From / To: panel slides (left) - */\n.b-drawer-enter-from > .b-drawer--left,\n.b-drawer-leave-to > .b-drawer--left {\n  transform: translateX(-100%);\n}\n\n/* - From / To: panel slides (top) - */\n.b-drawer-enter-from > .b-drawer--top,\n.b-drawer-leave-to > .b-drawer--top {\n  transform: translateY(-100%);\n}\n\n/* - From / To: panel slides (bottom) - */\n.b-drawer-enter-from > .b-drawer--bottom,\n.b-drawer-leave-to > .b-drawer--bottom {\n  transform: translateY(100%);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-drawer-enter-active,\n  .b-drawer-leave-active,\n  .b-drawer-enter-active > .b-drawer,\n  .b-drawer-leave-active > .b-drawer,\n  .b-drawer-enter-active > .b-drawer__mask,\n  .b-drawer-leave-active > .b-drawer__mask {\n    transition-duration: 0ms;\n  }\n\n  .b-drawer__spinner {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system83.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":""}

package/dist/design-system84.js

@@ -1,10 +1,202 @@
-//#region src/components/BDropdown/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Hover = "hover", e.Click = "click", e.ContextMenu = "contextMenu", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Bottom = "bottom", e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.Top = "top", e.TopLeft = "topLeft", e.TopRight = "topRight", e;
-}({});
+import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useSlots as ee, watch as b, withCtx as x } from "vue";
+//#region src/components/BDrawer/BDrawer.vue?vue&type=script&setup=true&lang.ts
+var S = ["aria-label", "aria-labelledby"], C = {
+	key: 0,
+	class: "b-drawer__header"
+}, w = { class: "b-drawer__header-title-wrapper" }, T = ["id"], E = {
+	key: 0,
+	class: "b-drawer__extra"
+}, D = {
+	key: 1,
+	class: "b-drawer__body"
+}, O = {
+	key: 0,
+	class: "b-drawer__loading",
+	"aria-live": "polite"
+}, k = {
+	key: 2,
+	class: "b-drawer__footer"
+}, A = /* @__PURE__ */ l({
+	__name: "BDrawer",
+	props: {
+		placement: { default: "right" },
+		size: { default: "default" },
+		title: { default: "" },
+		closable: {
+			type: Boolean,
+			default: !0
+		},
+		mask: {
+			type: Boolean,
+			default: !0
+		},
+		maskClosable: {
+			type: Boolean,
+			default: !0
+		},
+		keyboard: {
+			type: Boolean,
+			default: !0
+		},
+		destroyOnClose: {
+			type: Boolean,
+			default: !1
+		},
+		width: {},
+		height: {},
+		zIndex: { default: 1e3 },
+		getContainer: {},
+		autoFocus: {
+			type: Boolean,
+			default: !0
+		},
+		modelValue: {
+			type: Boolean,
+			default: () => void 0
+		},
+		forceRender: {
+			type: Boolean,
+			default: !1
+		},
+		extra: { default: "" },
+		footer: { default: "" },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: {}
+	},
+	emits: [
+		"close",
+		"afterOpenChange",
+		"update:modelValue"
+	],
+	setup(l, { expose: A, emit: j }) {
+		let M = j, N = ee(), P = y(), F = h(!1), I = n(() => l.modelValue === void 0 ? F.value : l.modelValue), L = h(!1), R = n(() => l.forceRender ? !0 : l.destroyOnClose ? I.value : L.value || I.value);
+		b(I, (e) => {
+			e && (L.value = !0);
+		});
+		let z = n(() => l.placement === "left" || l.placement === "right"), B = {
+			default: 378,
+			large: 736
+		}, V = n(() => l.width === void 0 ? z.value ? `${B[l.size]}px` : "100%" : typeof l.width == "number" ? `${l.width}px` : l.width), H = n(() => l.height === void 0 ? z.value ? "100%" : `${B[l.size]}px` : typeof l.height == "number" ? `${l.height}px` : l.height), U = n(() => !!(l.title || N.title)), W = n(() => !!(l.extra || N.extra)), G = n(() => !!(l.footer || N.footer)), K = n(() => U.value || l.closable || W.value), q = n(() => l.getContainer ? l.getContainer : "body"), J = n(() => ({
+			width: V.value,
+			height: H.value,
+			zIndex: l.zIndex
+		})), Y = h(null), X = null;
+		function Z(e) {
+			if (e.key !== "Tab" || !Y.value) return;
+			let t = Array.from(Y.value.querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"));
+			if (t.length === 0) {
+				e.preventDefault();
+				return;
+			}
+			let n = t[0], r = t[t.length - 1];
+			e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
+		}
+		function Q() {
+			!l.autoFocus || !Y.value || u(() => {
+				if (!Y.value) return;
+				let e = Y.value.querySelector("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])");
+				e ? e.focus() : Y.value.focus();
+			});
+		}
+		b(I, (e) => {
+			e ? (X = document.activeElement, u(() => Q()), document.body.style.overflow = "hidden") : document.body.style.overflow = "";
+		}), p(() => {
+			document.body.style.overflow = "";
+		});
+		function $(e) {
+			M("close", e), l.modelValue === void 0 ? F.value = !1 : M("update:modelValue", !1);
+		}
+		function te(e) {
+			l.maskClosable && $(e);
+		}
+		function ne(e) {
+			e.key === "Escape" && l.keyboard && (e.stopPropagation(), $(e)), Z(e);
+		}
+		function re() {
+			M("afterOpenChange", !0);
+		}
+		function ie() {
+			M("afterOpenChange", !1), X && typeof X.focus == "function" && (X.focus(), X = null);
+		}
+		function ae() {
+			l.modelValue === void 0 ? F.value = !0 : M("update:modelValue", !0);
+		}
+		return A({ open: ae }), (n, u) => (m(), r(e, { to: q.value }, [c(t, {
+			name: "b-drawer",
+			onAfterEnter: re,
+			onAfterLeave: ie
+		}, {
+			default: x(() => [I.value ? (m(), a("div", {
+				key: 0,
+				class: d(["b-drawer-root", `b-drawer-root--${l.placement}`]),
+				style: f({ zIndex: l.zIndex })
+			}, [l.mask ? (m(), a("div", {
+				key: 0,
+				class: "b-drawer__mask",
+				"aria-hidden": "true",
+				onClick: te
+			})) : i("", !0), o("div", {
+				ref_key: "drawerRef",
+				ref: Y,
+				class: d(["b-drawer", [
+					`b-drawer--${l.placement}`,
+					`b-drawer--${l.size}`,
+					{
+						"b-drawer--has-header": K.value,
+						"b-drawer--has-footer": G.value
+					}
+				]]),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": U.value ? void 0 : l.ariaLabel,
+				"aria-labelledby": U.value ? v(P) : void 0,
+				style: f(J.value),
+				tabindex: "-1",
+				onKeydown: ne
+			}, [
+				K.value ? (m(), a("div", C, [o("div", w, [l.closable ? (m(), a("button", {
+					key: 0,
+					type: "button",
+					class: "b-drawer__close",
+					"aria-label": "Close drawer",
+					onClick: $
+				}, [g(n.$slots, "closeIcon", {}, () => [u[0] ||= o("svg", {
+					class: "b-drawer__close-icon",
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					"aria-hidden": "true",
+					focusable: "false"
+				}, [o("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })], -1)])])) : i("", !0), U.value ? (m(), a("div", {
+					key: 1,
+					id: v(P),
+					class: "b-drawer__title"
+				}, [g(n.$slots, "title", {}, () => [s(_(l.title), 1)])], 8, T)) : i("", !0)]), W.value ? (m(), a("div", E, [g(n.$slots, "extra", {}, () => [s(_(l.extra), 1)])])) : i("", !0)])) : i("", !0),
+				R.value ? (m(), a("div", D, [l.loading ? (m(), a("div", O, [...u[1] ||= [o("svg", {
+					class: "b-drawer__spinner",
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					"aria-hidden": "true",
+					focusable: "false"
+				}, [o("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "3",
+					"stroke-dasharray": "31.4 31.4",
+					"stroke-linecap": "round"
+				})], -1), o("span", { class: "b-drawer__loading-text" }, "Loading…", -1)]])) : g(n.$slots, "default", { key: 1 })])) : i("", !0),
+				G.value ? (m(), a("div", k, [g(n.$slots, "footer", {}, () => [s(_(l.footer), 1)])])) : i("", !0)
+			], 46, S)], 6)) : i("", !0)]),
+			_: 3
+		})], 8, ["to"]));
+	}
+});
 //#endregion
-export { t as BDropdownPlacement, e as BDropdownTrigger };
+export { A as default };
 
 //# sourceMappingURL=design-system84.js.map