@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system81.js

@@ -1,8 +1,202 @@
-import e from "./design-system79.js";
-/* empty css                */
-//#region src/components/BEmpty/BEmpty.vue
-var t = 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 default };
+export { A 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/BEmpty/BEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BEmptyImage } from '@/types.ts';\nimport { computed } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Customize description text. Pass empty string to show no text,\n     * or set hideDescription to true to hide the description entirely.\n     */\n    description?: string;\n    /**\n     * Set to true to hide the description area completely.\n     * @default false\n     */\n    hideDescription?: boolean;\n    /**\n     * Image type or custom image URL string.\n     * Use BEmptyImage.Default for the detailed illustration or\n     * BEmptyImage.Simple for the minimal version.\n     * @default BEmptyImage.Default\n     */\n    image?: `${BEmptyImage}` | string;\n    /**\n     * Inline styles applied to the image element.\n     */\n    imageStyle?: Record<string, string>;\n  }>(),\n  {\n    description: 'No data',\n    hideDescription: false,\n    image: BEmptyImage.Default,\n  },\n);\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Default slot: action content below description (e.g. button). */\n  default?(): unknown;\n  /** Custom description content, overrides the description prop. */\n  description?(): unknown;\n  /** Custom image content, overrides the image prop entirely. */\n  image?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isSimple = computed(() => props.image === BEmptyImage.Simple);\n\nconst isBuiltInImage = computed(\n  () => props.image === BEmptyImage.Default || props.image === BEmptyImage.Simple,\n);\n\nconst isCustomUrl = computed(\n  () => !isBuiltInImage.value && typeof props.image === 'string' && props.image.length > 0,\n);\n\nconst showDescription = computed(() => {\n  if (slots.description) return true;\n  return !props.hideDescription;\n});\n\nconst descriptionText = computed(() => {\n  return props.description;\n});\n</script>\n\n<template>\n  <div\n    class=\"b-empty\"\n    :class=\"{ 'b-empty--simple': isSimple }\"\n    role=\"status\"\n    :aria-label=\"props.description || 'No data'\"\n  >\n    <!-- Image -->\n    <div class=\"b-empty__image\" :style=\"props.imageStyle\">\n      <slot name=\"image\">\n        <!-- Default built-in illustration -->\n        <svg\n          v-if=\"props.image === BEmptyImage.Default\"\n          class=\"b-empty__svg b-empty__svg--default\"\n          viewBox=\"0 0 184 152\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g fill=\"none\" fill-rule=\"evenodd\">\n            <g transform=\"translate(24 31.67)\">\n              <ellipse class=\"b-empty__ellipse\" cx=\"67.797\" cy=\"106.89\" rx=\"67.797\" ry=\"12.668\" />\n              <path\n                class=\"b-empty__path-bg\"\n                d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\"\n              />\n              <path\n                class=\"b-empty__path-main\"\n                d=\"M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z\"\n                transform=\"translate(13.56)\"\n              />\n              <path\n                class=\"b-empty__path-front\"\n                d=\"M33.83 0h67.933a4 4 0 014 4v93.344H29.83V4a4 4 0 014-4z\"\n              />\n              <path\n                class=\"b-empty__path-panel\"\n                d=\"M42.678 9.953h50.237a2 2 0 012 2V36.91h-54.237V11.953a2 2 0 012-2zM42.94 49.767h49.713a2.262 2.262 0 110 4.524H42.94a2.262 2.262 0 110-4.524zM42.94 61.53h49.713a2.262 2.262 0 110 4.525H42.94a2.262 2.262 0 010-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 01-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393 0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\"\n              />\n            </g>\n            <path\n              class=\"b-empty__path-dot\"\n              d=\"M149.121 33.292l-6.83 2.65a1 1 0 01-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\"\n            />\n            <g class=\"b-empty__path-dots-group\" transform=\"translate(149.65 15.383)\">\n              <ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\" />\n              <path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\" />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Simple built-in illustration -->\n        <svg\n          v-else-if=\"props.image === BEmptyImage.Simple\"\n          class=\"b-empty__svg b-empty__svg--simple\"\n          viewBox=\"0 0 64 41\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\">\n            <ellipse class=\"b-empty__simple-ellipse\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\" />\n            <g class=\"b-empty__simple-group\" fill-rule=\"nonzero\">\n              <path\n                d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46V12.76z\"\n              />\n              <path\n                class=\"b-empty__simple-inner\"\n                d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\"\n              />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Custom URL image -->\n        <img\n          v-else-if=\"isCustomUrl\"\n          :src=\"props.image\"\n          alt=\"\"\n          class=\"b-empty__custom-image\"\n          aria-hidden=\"true\"\n        />\n      </slot>\n    </div>\n\n    <!-- Description -->\n    <div v-if=\"showDescription\" class=\"b-empty__description\">\n      <slot name=\"description\">\n        {{ descriptionText }}\n      </slot>\n    </div>\n\n    <!-- Footer / actions -->\n    <div v-if=\"slots.default\" class=\"b-empty__footer\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-empty {\n  /* Layout */\n  --b-empty-padding: 32px 0;\n  --b-empty-text-align: center;\n\n  /* Image */\n  --b-empty-image-height: 152px;\n  --b-empty-image-height-simple: 35px;\n  --b-empty-image-margin-bottom: 8px;\n  --b-empty-image-opacity: 1;\n\n  /* Default SVG colors */\n  --b-empty-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-path-bg-fill: oklch(95% 0.003 260);\n  --b-empty-path-main-fill: oklch(97% 0.002 260);\n  --b-empty-path-front-stroke: oklch(83% 0.01 260);\n  --b-empty-path-front-fill: oklch(97% 0.002 260);\n  --b-empty-path-panel-fill: oklch(93% 0.005 260);\n  --b-empty-path-dot-fill: oklch(83% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(100% 0 0);\n\n  /* Simple SVG colors */\n  --b-empty-simple-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(83% 0.01 260);\n  --b-empty-simple-group-fill: oklch(97% 0.002 260);\n  --b-empty-simple-inner-fill: oklch(93% 0.005 260);\n\n  /* Description */\n  --b-empty-description-color: oklch(55% 0.01 260);\n  --b-empty-description-font-size: 14px;\n  --b-empty-description-line-height: 1.572;\n  --b-empty-description-margin-top: 8px;\n\n  /* Footer */\n  --b-empty-footer-margin-top: 16px;\n\n  /* Animation */\n  --b-empty-transition-duration: 200ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-empty {\n  --b-empty-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-path-bg-fill: oklch(22% 0.005 260);\n  --b-empty-path-main-fill: oklch(18% 0.003 260);\n  --b-empty-path-front-stroke: oklch(40% 0.01 260);\n  --b-empty-path-front-fill: oklch(20% 0.005 260);\n  --b-empty-path-panel-fill: oklch(28% 0.005 260);\n  --b-empty-path-dot-fill: oklch(40% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(18% 0 0);\n\n  --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n  --b-empty-simple-group-fill: oklch(20% 0.005 260);\n  --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n\n  --b-empty-description-color: oklch(70% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-empty {\n    --b-empty-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-path-bg-fill: oklch(22% 0.005 260);\n    --b-empty-path-main-fill: oklch(18% 0.003 260);\n    --b-empty-path-front-stroke: oklch(40% 0.01 260);\n    --b-empty-path-front-fill: oklch(20% 0.005 260);\n    --b-empty-path-panel-fill: oklch(28% 0.005 260);\n    --b-empty-path-dot-fill: oklch(40% 0.01 260);\n    --b-empty-path-dots-group-fill: oklch(18% 0 0);\n  \n    --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n    --b-empty-simple-group-fill: oklch(20% 0.005 260);\n    --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n  \n    --b-empty-description-color: oklch(70% 0.01 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--b-empty-padding);\n  text-align: var(--b-empty-text-align);\n  box-sizing: border-box;\n}\n\n/* ─────────────────────────────────────────────\n   Image area\n   ───────────────────────────────────────────── */\n.b-empty__image {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--b-empty-image-height);\n  margin-bottom: var(--b-empty-image-margin-bottom);\n  opacity: var(--b-empty-image-opacity);\n}\n\n.b-empty--simple .b-empty__image {\n  height: var(--b-empty-image-height-simple);\n}\n\n.b-empty__svg {\n  width: auto;\n  height: 100%;\n}\n\n.b-empty__custom-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}\n\n/* ─────────────────────────────────────────────\n   Default SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__ellipse {\n  fill: var(--b-empty-ellipse-fill);\n}\n\n.b-empty__path-bg {\n  fill: var(--b-empty-path-bg-fill);\n}\n\n.b-empty__path-main {\n  fill: var(--b-empty-path-main-fill);\n}\n\n.b-empty__path-front {\n  stroke: var(--b-empty-path-front-stroke);\n  fill: var(--b-empty-path-front-fill);\n}\n\n.b-empty__path-panel {\n  fill: var(--b-empty-path-panel-fill);\n}\n\n.b-empty__path-dot {\n  fill: var(--b-empty-path-dot-fill);\n}\n\n.b-empty__path-dots-group {\n  fill: var(--b-empty-path-dots-group-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Simple SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__simple-ellipse {\n  fill: var(--b-empty-simple-ellipse-fill);\n}\n\n.b-empty__simple-group {\n  stroke: var(--b-empty-simple-group-stroke);\n  fill: var(--b-empty-simple-group-fill);\n}\n\n.b-empty__simple-inner {\n  fill: var(--b-empty-simple-inner-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-empty__description {\n  color: var(--b-empty-description-color);\n  font-size: var(--b-empty-description-font-size);\n  line-height: var(--b-empty-description-line-height);\n  margin-top: var(--b-empty-description-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (actions area)\n   ───────────────────────────────────────────── */\n.b-empty__footer {\n  margin-top: var(--b-empty-footer-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-empty {\n    --b-empty-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"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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"}

package/dist/design-system83.js

@@ -1,102 +1,8 @@
-import e from "./design-system27.js";
-import { BFloatButtonShape as t, BFloatButtonType as n } from "./design-system82.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, withCtx as _ } from "vue";
-//#region src/components/BFloatButton/BFloatButton.vue?vue&type=script&setup=true&lang.ts
-var v = { class: "b-float-button__body" }, y = {
-	class: "b-float-button__icon",
-	"aria-hidden": "true"
-}, b = {
-	key: 1,
-	width: "1em",
-	height: "1em",
-	viewBox: "0 0 24 24",
-	fill: "currentColor",
-	"aria-hidden": "true"
-}, x = {
-	key: 0,
-	class: "b-float-button__description"
-}, S = {
-	key: 1,
-	class: "b-float-button__tooltip",
-	role: "tooltip"
-}, C = /* @__PURE__ */ u({
-	__name: "BFloatButton",
-	props: {
-		icon: {},
-		description: {},
-		tooltip: {},
-		type: { default: () => n.Default },
-		shape: { default: () => t.Circle },
-		href: {},
-		target: { default: "_blank" },
-		htmlType: { default: "button" },
-		badge: {},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		ariaLabel: {}
-	},
-	emits: ["click"],
-	setup(t, { emit: n }) {
-		let u = n, C = (e) => t.type === e, w = (e) => t.shape === e, T = i(() => {
-			if (t.badge && !t.badge.dot) return t.badge.count;
-		}), E = i(() => t.badge?.dot ?? !1), D = i(() => t.badge?.overflowCount ?? 99), O = i(() => {
-			let e = T.value;
-			if (e !== void 0 && !(e === 0 && !t.badge?.showZero)) return e > D.value ? `${D.value}+` : String(e);
-		}), k = i(() => E.value || O.value !== void 0);
-		function A(e) {
-			t.disabled || u("click", e);
-		}
-		let j = i(() => t.href ? "a" : "button");
-		return (n, i) => (p(), a(h(j.value), {
-			href: t.href,
-			target: t.href ? t.target : void 0,
-			type: t.href ? void 0 : t.htmlType,
-			disabled: !t.href && t.disabled ? !0 : void 0,
-			"aria-disabled": t.href && t.disabled ? "true" : void 0,
-			"aria-label": t.ariaLabel ?? t.tooltip,
-			title: t.tooltip,
-			class: d(["b-float-button", {
-				"b-float-button--circle": w("circle"),
-				"b-float-button--square": w("square"),
-				"b-float-button--default": C("default"),
-				"b-float-button--primary": C("primary"),
-				"b-float-button--disabled": t.disabled
-			}]),
-			onClick: A
-		}, {
-			default: _(() => [
-				k.value ? (p(), s("span", {
-					key: 0,
-					class: d(["b-float-button__badge", {
-						"b-float-button__badge--dot": E.value,
-						"b-float-button__badge--count": !E.value
-					}]),
-					style: f(t.badge?.color ? { backgroundColor: t.badge.color } : void 0),
-					"aria-hidden": "true"
-				}, [E.value ? o("", !0) : (p(), s(r, { key: 0 }, [l(g(O.value), 1)], 64))], 6)) : o("", !0),
-				c("span", v, [c("span", y, [m(n.$slots, "icon", {}, () => [t.icon ? (p(), a(e, {
-					key: 0,
-					icon: t.icon,
-					size: "md"
-				}, null, 8, ["icon"])) : (p(), s("svg", b, [...i[0] ||= [c("path", { d: "M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" }, null, -1)]]))])]), (n.$slots.description || t.description) && w("square") ? (p(), s("span", x, [m(n.$slots, "description", {}, () => [l(g(t.description), 1)])])) : o("", !0)]),
-				n.$slots.tooltip || t.tooltip && !t.ariaLabel ? (p(), s("span", S, [m(n.$slots, "tooltip", {}, () => [l(g(t.tooltip), 1)])])) : o("", !0)
-			]),
-			_: 3
-		}, 8, [
-			"href",
-			"target",
-			"type",
-			"disabled",
-			"aria-disabled",
-			"aria-label",
-			"title",
-			"class"
-		]));
-	}
-});
+import e from "./design-system81.js";
+/* empty css                */
+//#region src/components/BDrawer/BDrawer.vue
+var t = e;
 //#endregion
-export { C as default };
+export { t as default };
 
 //# sourceMappingURL=design-system83.js.map

package/dist/design-system83.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system83.js","names":[],"sources":["../src/components/BFloatButton/BFloatButton.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, renderSlot as _renderSlot, createBlock as _createBlock, createElementVNode as _createElementVNode, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx } from \"vue\"\n\nconst _hoisted_1 = { class: \"b-float-button__body\" }\nconst _hoisted_2 = {\n  class: \"b-float-button__icon\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = {\n  key: 1,\n  width: \"1em\",\n  height: \"1em\",\n  viewBox: \"0 0 24 24\",\n  fill: \"currentColor\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_4 = {\n  key: 0,\n  class: \"b-float-button__description\"\n}\nconst _hoisted_5 = {\n  key: 1,\n  class: \"b-float-button__tooltip\",\n  role: \"tooltip\"\n}\n\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { type BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { computed } from 'vue';\nimport type { BFloatButtonBadgeProps } from './types.ts';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BFloatButton',\n  props: {\n    icon: {},\n    description: {},\n    tooltip: {},\n    type: { default: () => (BFloatButtonType.Default) },\n    shape: { default: () => (BFloatButtonShape.Circle) },\n    href: {},\n    target: { default: '_blank' },\n    htmlType: { default: 'button' },\n    badge: {},\n    disabled: { type: Boolean, default: false },\n    ariaLabel: {}\n  },\n  emits: [\"click\"],\n  setup(__props: any, { emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n\n\n// ─────────────────────────────────────────────\n// Computed helpers\n// ─────────────────────────────────────────────\nconst isType = (value: `${BFloatButtonType}`) => __props.type === value;\nconst isShape = (value: `${BFloatButtonShape}`) => __props.shape === value;\n\nconst badgeCount = computed(() => {\n  if (!__props.badge) return undefined;\n  if (__props.badge.dot) return undefined;\n  return __props.badge.count;\n});\n\nconst showBadgeDot = computed(() => __props.badge?.dot ?? false);\n\nconst badgeOverflow = computed(() => __props.badge?.overflowCount ?? 99);\n\nconst badgeDisplayCount = computed(() => {\n  const count = badgeCount.value;\n  if (count === undefined) return undefined;\n  if (count === 0 && !__props.badge?.showZero) return undefined;\n  return count > badgeOverflow.value ? `${badgeOverflow.value}+` : String(count);\n});\n\nconst showBadge = computed(() => {\n  return showBadgeDot.value || badgeDisplayCount.value !== undefined;\n});\n\nfunction handleClick(event: MouseEvent) {\n  if (__props.disabled) return;\n  emit('click', event);\n}\n\nconst rootTag = computed(() => (__props.href ? 'a' : 'button'));\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(_resolveDynamicComponent(rootTag.value), {\n    href: __props.href,\n    target: __props.href ? __props.target : undefined,\n    type: !__props.href ? __props.htmlType : undefined,\n    disabled: !__props.href && __props.disabled ? true : undefined,\n    \"aria-disabled\": __props.href && __props.disabled ? 'true' : undefined,\n    \"aria-label\": __props.ariaLabel ?? __props.tooltip,\n    title: __props.tooltip,\n    class: _normalizeClass([\n      'b-float-button',\n      {\n        'b-float-button--circle': isShape('circle'),\n        'b-float-button--square': isShape('square'),\n        'b-float-button--default': isType('default'),\n        'b-float-button--primary': isType('primary'),\n        'b-float-button--disabled': __props.disabled,\n      },\n    ]),\n    onClick: handleClick\n  }, {\n    default: _withCtx(() => [\n      (showBadge.value)\n        ? (_openBlock(), _createElementBlock(\"span\", {\n            key: 0,\n            class: _normalizeClass([\"b-float-button__badge\", {\n        'b-float-button__badge--dot': showBadgeDot.value,\n        'b-float-button__badge--count': !showBadgeDot.value,\n      }]),\n            style: _normalizeStyle(__props.badge?.color ? { backgroundColor: __props.badge.color } : undefined),\n            \"aria-hidden\": \"true\"\n          }, [\n            (!showBadgeDot.value)\n              ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [\n                  _createTextVNode(_toDisplayString(badgeDisplayCount.value), 1)\n                ], 64))\n              : _createCommentVNode(\"\", true)\n          ], 6))\n        : _createCommentVNode(\"\", true),\n      _createElementVNode(\"span\", _hoisted_1, [\n        _createElementVNode(\"span\", _hoisted_2, [\n          _renderSlot(_ctx.$slots, \"icon\", {}, () => [\n            (__props.icon)\n              ? (_openBlock(), _createBlock(BIcon, {\n                  key: 0,\n                  icon: __props.icon,\n                  size: \"md\"\n                }, null, 8, [\"icon\"]))\n              : (_openBlock(), _createElementBlock(\"svg\", _hoisted_3, [...(_cache[0] || (_cache[0] = [\n                  _createElementVNode(\"path\", { d: \"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" }, null, -1)\n                ]))]))\n          ])\n        ]),\n        ((_ctx.$slots.description || __props.description) && isShape('square'))\n          ? (_openBlock(), _createElementBlock(\"span\", _hoisted_4, [\n              _renderSlot(_ctx.$slots, \"description\", {}, () => [\n                _createTextVNode(_toDisplayString(__props.description), 1)\n              ])\n            ]))\n          : _createCommentVNode(\"\", true)\n      ]),\n      (_ctx.$slots.tooltip || (__props.tooltip && !__props.ariaLabel))\n        ? (_openBlock(), _createElementBlock(\"span\", _hoisted_5, [\n            _renderSlot(_ctx.$slots, \"tooltip\", {}, () => [\n              _createTextVNode(_toDisplayString(__props.tooltip), 1)\n            ])\n          ]))\n        : _createCommentVNode(\"\", true)\n    ]),\n    _: 3\n  }, 8, [\"href\", \"target\", \"type\", \"disabled\", \"aria-disabled\", \"aria-label\", \"title\", \"class\"]))\n}\n}\n\n})"],"mappings":"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"}
+{"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":""}

package/dist/design-system84.js

@@ -0,0 +1,10 @@
+//#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;
+}({});
+//#endregion
+export { t as BDropdownPlacement, e as BDropdownTrigger };
+
+//# sourceMappingURL=design-system84.js.map

package/dist/design-system84.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system84.js","names":[],"sources":["../src/components/BDropdown/types.ts"],"sourcesContent":["export enum BDropdownTrigger {\n  Hover = 'hover',\n  Click = 'click',\n  ContextMenu = 'contextMenu',\n}\n\nexport enum BDropdownPlacement {\n  Bottom = 'bottom',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  Top = 'top',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n}\n\nexport interface BDropdownMenuItem {\n  /** Unique key for the menu item. */\n  key: string | number;\n  /** Display label text. */\n  label: string;\n  /** Icon name to show before the label. */\n  icon?: string;\n  /** Whether this item is disabled. */\n  disabled?: boolean;\n  /** Whether this item is a danger/destructive action. */\n  danger?: boolean;\n  /** Nested children for sub-menus. */\n  children?: BDropdownMenuItem[];\n  /** If set to 'divider', renders a separator line. */\n  type?: 'divider' | 'group';\n  /** Group title when type is 'group'. */\n  title?: string;\n}\n\nexport interface BDropdownMenuProps {\n  /** Array of menu items to render. */\n  items: BDropdownMenuItem[];\n  /** Currently selected keys. */\n  selectedKeys?: (string | number)[];\n  /** Whether the menu is selectable. */\n  selectable?: boolean;\n  /** Allow multiple selection. */\n  multiple?: boolean;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,QAAA,SACA,EAAA,cAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,MAAA,OACA,EAAA,UAAA,WACA,EAAA,WAAA;KACD"}