@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system142.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system142.js","names":[],"sources":["../src/components/BModal/BModalFooter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BButton } from '@/components';\n\nconst { cancelText = 'Cancel', okText = 'OK' } = defineProps<{\n  /**\n   * Text to display on the cancel button.\n   */\n  cancelText?: string;\n  /**\n   * If true, the cancel button will not be displayed.\n   */\n  hideCancel?: boolean;\n  /**\n   * If true, the cancel button will be disabled.\n   */\n  cancelDisabled?: boolean;\n  /**\n   * Text to display on the OK button.\n   */\n  okText?: string;\n  /**\n   * If true, the OK button will not be displayed.\n   */\n  hideOk?: boolean;\n  /**\n   * If true, the OK button will be disabled.\n   */\n  okDisabled?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the cancel button is clicked.\n   */\n  cancel: [];\n  /**\n   * Emitted when the OK button is clicked.\n   */\n  ok: [];\n}>();\n</script>\n\n<template>\n  <div class=\"b:mt-2 b:flex b:items-center b:bg-white\">\n    <slot name=\"left\">\n      <div class=\"b:flex-auto\"></div>\n    </slot>\n\n    <slot name=\"right\">\n      <div class=\"b:flex b:flex-initial b:gap-x-2\">\n        <BButton\n          v-if=\"!hideCancel\"\n          variant=\"outlined\"\n          color=\"secondary\"\n          autofocus\n          :disabled=\"cancelDisabled\"\n          @click=\"emit('cancel')\"\n        >\n          {{ cancelText }}\n        </BButton>\n        <BButton v-if=\"!hideOk\" :disabled=\"okDisabled\" @click=\"emit('ok')\">\n          {{ okText }}\n        </BButton>\n      </div>\n    </slot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"design-system142.js","names":[],"sources":["../src/components/BMenu/BMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, ref, watch } from 'vue';\nimport BMenuDivider from './BMenuDivider.vue';\nimport BMenuItem from './BMenuItem.vue';\nimport BMenuItemGroup from './BMenuItemGroup.vue';\nimport BMenuSubMenu from './BMenuSubMenu.vue';\nimport {\n  BMenuContextKey,\n  isDivider,\n  isItemGroup,\n  isSubMenu,\n  type BMenuClickInfo,\n  type BMenuContext,\n  type BMenuItemUnion,\n  type BMenuMode,\n  type BMenuSelectInfo,\n  type BMenuTheme,\n  type BMenuTriggerAction,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Menu display mode. @default 'inline' */\n    mode?: BMenuMode;\n    /** Color theme. @default 'light' */\n    theme?: BMenuTheme;\n    /** Menu items data array. */\n    items?: BMenuItemUnion[];\n    /** Whether items can be selected. @default true */\n    selectable?: boolean;\n    /** Allow multiple items to be selected. @default false */\n    multiple?: boolean;\n    /** Collapsed state in inline mode. @default false */\n    inlineCollapsed?: boolean;\n    /** Indent (px) per level for inline mode. @default 24 */\n    inlineIndent?: number;\n    /** Initially selected keys (uncontrolled). */\n    defaultSelectedKeys?: string[];\n    /** Currently selected keys (controlled). */\n    selectedKeys?: string[];\n    /** Initially opened submenu keys (uncontrolled). */\n    defaultOpenKeys?: string[];\n    /** Currently opened submenu keys (controlled). */\n    openKeys?: string[];\n    /** Action to trigger submenu open. @default 'hover' */\n    triggerSubMenuAction?: BMenuTriggerAction;\n    /** Delay (ms) before showing submenu. @default 0 */\n    subMenuOpenDelay?: number;\n    /** Delay (ms) before hiding submenu. @default 100 */\n    subMenuCloseDelay?: number;\n  }>(),\n  {\n    mode: 'inline',\n    theme: 'light',\n    items: () => [],\n    selectable: true,\n    multiple: false,\n    inlineCollapsed: false,\n    inlineIndent: 24,\n    defaultSelectedKeys: () => [],\n    selectedKeys: undefined,\n    defaultOpenKeys: () => [],\n    openKeys: undefined,\n    triggerSubMenuAction: 'hover',\n    subMenuOpenDelay: 0,\n    subMenuCloseDelay: 100,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:selectedKeys': [keys: string[]];\n  'update:openKeys': [keys: string[]];\n  click: [info: BMenuClickInfo];\n  select: [info: BMenuSelectInfo];\n  deselect: [info: BMenuSelectInfo];\n  openChange: [keys: string[]];\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Selection state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isSelectionControlled = computed(() => props.selectedKeys !== undefined);\nconst internalSelectedKeys = ref<string[]>([...props.defaultSelectedKeys]);\n\nconst resolvedSelectedKeys = computed(() =>\n  isSelectionControlled.value ? (props.selectedKeys ?? []) : internalSelectedKeys.value,\n);\n\n// ─────────────────────────────────────────────\n// Open state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isOpenControlled = computed(() => props.openKeys !== undefined);\nconst internalOpenKeys = ref<string[]>([...props.defaultOpenKeys]);\n\nconst resolvedOpenKeys = computed(() =>\n  isOpenControlled.value ? (props.openKeys ?? []) : internalOpenKeys.value,\n);\n\n// ─────────────────────────────────────────────\n// Key path registry (item key → full path from root)\n// ─────────────────────────────────────────────\nconst keyPathMap = new Map<string, string[]>();\n\nfunction registerKeyPath(key: string, path: string[]) {\n  keyPathMap.set(key, path);\n}\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction onItemClick(info: BMenuClickInfo) {\n  emit('click', info);\n\n  if (!props.selectable) return;\n\n  const key = info.key;\n  const current = [...resolvedSelectedKeys.value];\n\n  if (props.multiple) {\n    const idx = current.indexOf(key);\n    if (idx >= 0) {\n      current.splice(idx, 1);\n      if (!isSelectionControlled.value) {\n        internalSelectedKeys.value = current;\n      }\n      emit('update:selectedKeys', current);\n      emit('deselect', { ...info, selectedKeys: current });\n    } else {\n      current.push(key);\n      if (!isSelectionControlled.value) {\n        internalSelectedKeys.value = current;\n      }\n      emit('update:selectedKeys', current);\n      emit('select', { ...info, selectedKeys: current });\n    }\n  } else {\n    const newKeys = [key];\n    if (!isSelectionControlled.value) {\n      internalSelectedKeys.value = newKeys;\n    }\n    emit('update:selectedKeys', newKeys);\n    emit('select', { ...info, selectedKeys: newKeys });\n  }\n}\n\nfunction onOpenChange(key: string, open: boolean) {\n  const current = [...resolvedOpenKeys.value];\n  const idx = current.indexOf(key);\n\n  if (open && idx < 0) {\n    if (props.mode === 'inline') {\n      current.push(key);\n    } else {\n      // In vertical/horizontal mode, only one submenu open at a level\n      current.push(key);\n    }\n  } else if (!open && idx >= 0) {\n    current.splice(idx, 1);\n  }\n\n  if (!isOpenControlled.value) {\n    internalOpenKeys.value = current;\n  }\n  emit('update:openKeys', current);\n  emit('openChange', current);\n}\n\n// ─────────────────────────────────────────────\n// Sync controlled props\n// ─────────────────────────────────────────────\nwatch(\n  () => props.selectedKeys,\n  (val) => {\n    if (val !== undefined) {\n      internalSelectedKeys.value = [...val];\n    }\n  },\n);\n\nwatch(\n  () => props.openKeys,\n  (val) => {\n    if (val !== undefined) {\n      internalOpenKeys.value = [...val];\n    }\n  },\n);\n\n// When inline collapsed changes, close all submenus in uncontrolled mode\nwatch(\n  () => props.inlineCollapsed,\n  (collapsed) => {\n    if (collapsed && !isOpenControlled.value) {\n      internalOpenKeys.value = [];\n      emit('update:openKeys', []);\n      emit('openChange', []);\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Context for children\n// ─────────────────────────────────────────────\nconst context: BMenuContext = {\n  mode: computed(() => props.mode),\n  theme: computed(() => props.theme),\n  inlineCollapsed: computed(() => props.inlineCollapsed),\n  inlineIndent: computed(() => props.inlineIndent),\n  selectedKeys: resolvedSelectedKeys,\n  openKeys: resolvedOpenKeys,\n  multiple: computed(() => props.multiple),\n  selectable: computed(() => props.selectable),\n  triggerSubMenuAction: computed(() => props.triggerSubMenuAction),\n  subMenuOpenDelay: computed(() => props.subMenuOpenDelay),\n  subMenuCloseDelay: computed(() => props.subMenuCloseDelay),\n  onItemClick,\n  onOpenChange,\n  registerKeyPath,\n};\n\nprovide(BMenuContextKey, context);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-menu',\n  `b-menu--${props.mode}`,\n  `b-menu--${props.theme}`,\n  {\n    'b-menu--collapsed': props.mode === 'inline' && props.inlineCollapsed,\n  },\n]);\n\nconst ariaRole = computed(() => 'menu');\nconst ariaOrientation = computed(() => (props.mode === 'horizontal' ? 'horizontal' : 'vertical'));\n</script>\n\n<template>\n  <ul\n    :class=\"rootClasses\"\n    :role=\"ariaRole\"\n    :aria-orientation=\"ariaOrientation\"\n    :data-theme=\"props.theme\"\n  >\n    <slot>\n      <template v-for=\"item in props.items\" :key=\"item.key ?? (item as any).type\">\n        <BMenuDivider v-if=\"isDivider(item)\" :dashed=\"item.dashed\" />\n        <BMenuItemGroup\n          v-else-if=\"isItemGroup(item)\"\n          :label=\"item.label\"\n          :children=\"item.children\"\n        />\n        <BMenuSubMenu\n          v-else-if=\"isSubMenu(item)\"\n          :item-key=\"item.key\"\n          :label=\"item.label\"\n          :icon=\"item.icon\"\n          :disabled=\"item.disabled\"\n          :children=\"item.children\"\n          :popup-class-name=\"item.popupClassName\"\n        />\n        <BMenuItem\n          v-else\n          :item-key=\"item.key\"\n          :label=\"item.label\"\n          :icon=\"item.icon\"\n          :disabled=\"item.disabled\"\n          :danger=\"(item as any).danger\"\n          :extra=\"(item as any).extra\"\n          :title=\"(item as any).title\"\n        />\n      </template>\n    </slot>\n  </ul>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenu – Root CSS Custom Properties\n   ───────────────────────────────────────────── */\n.b-menu {\n  --b-menu-item-bg: #ffffff;\n  --b-menu-item-color: rgba(0, 0, 0, 0.88);\n  --b-menu-item-hover-bg: rgba(0, 0, 0, 0.06);\n  --b-menu-item-hover-color: rgba(0, 0, 0, 0.88);\n  --b-menu-item-active-bg: #e6f4ff;\n  --b-menu-item-selected-bg: #e6f4ff;\n  --b-menu-item-selected-color: #0958d9;\n  --b-menu-item-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-menu-item-height: 40px;\n  --b-menu-item-border-radius: 8px;\n  --b-menu-item-margin-block: 4px;\n  --b-menu-item-margin-inline: 4px;\n  --b-menu-item-padding-inline: 16px;\n  --b-menu-icon-size: 14px;\n  --b-menu-icon-margin-inline-end: 10px;\n  --b-menu-group-title-color: rgba(0, 0, 0, 0.65);\n  --b-menu-group-title-font-size: 14px;\n  --b-menu-group-title-line-height: 1.5714;\n  --b-menu-danger-item-color: #cf1322;\n  --b-menu-danger-item-hover-color: #cf1322;\n  --b-menu-danger-item-active-bg: #fff2f0;\n  --b-menu-danger-item-selected-bg: #fff2f0;\n  --b-menu-danger-item-selected-color: #cf1322;\n  --b-menu-sub-menu-item-bg: rgba(0, 0, 0, 0.02);\n  --b-menu-sub-menu-item-border-radius: 4px;\n  --b-menu-sub-menu-item-selected-color: #0958d9;\n  --b-menu-popup-bg: #ffffff;\n  --b-menu-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-menu-popup-border-radius: 8px;\n  --b-menu-popup-z-index: 1050;\n  --b-menu-dropdown-width: 160px;\n  --b-menu-collapsed-width: 80px;\n  --b-menu-collapsed-icon-size: 16px;\n  --b-menu-active-bar-height: 2px;\n  --b-menu-active-bar-width: 3px;\n  --b-menu-active-bar-border-width: 1px;\n  --b-menu-horizontal-line-height: 46px;\n  --b-menu-horizontal-item-hover-bg: transparent;\n  --b-menu-horizontal-item-hover-color: #0958d9;\n  --b-menu-horizontal-item-selected-bg: transparent;\n  --b-menu-horizontal-item-selected-color: #0958d9;\n  --b-menu-horizontal-item-border-radius: 0;\n  --b-menu-transition-duration: 200ms;\n}\n\n/* ── Dark theme (via data-theme or dark mode) ── */\n.b-menu--dark,\n[data-prefers-color='dark'] .b-menu {\n  --b-menu-item-bg: #001529;\n  --b-menu-item-color: rgba(255, 255, 255, 0.65);\n  --b-menu-item-hover-bg: transparent;\n  --b-menu-item-hover-color: #fff;\n  --b-menu-item-active-bg: #1677ff;\n  --b-menu-item-selected-bg: #1677ff;\n  --b-menu-item-selected-color: #fff;\n  --b-menu-item-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-menu-group-title-color: rgba(255, 255, 255, 0.65);\n  --b-menu-danger-item-color: #ff4d4f;\n  --b-menu-danger-item-hover-color: #ff7875;\n  --b-menu-danger-item-active-bg: #ff4d4f;\n  --b-menu-danger-item-selected-bg: #ff4d4f;\n  --b-menu-danger-item-selected-color: #fff;\n  --b-menu-sub-menu-item-bg: #000c17;\n  --b-menu-popup-bg: #001529;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-menu {\n    --b-menu-item-bg: #001529;\n    --b-menu-item-color: rgba(255, 255, 255, 0.65);\n    --b-menu-item-hover-bg: transparent;\n    --b-menu-item-hover-color: #fff;\n    --b-menu-item-active-bg: #1677ff;\n    --b-menu-item-selected-bg: #1677ff;\n    --b-menu-item-selected-color: #fff;\n    --b-menu-item-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-menu-group-title-color: rgba(255, 255, 255, 0.65);\n    --b-menu-danger-item-color: #ff4d4f;\n    --b-menu-danger-item-hover-color: #ff7875;\n    --b-menu-danger-item-active-bg: #ff4d4f;\n    --b-menu-danger-item-selected-bg: #ff4d4f;\n    --b-menu-danger-item-selected-color: #fff;\n    --b-menu-sub-menu-item-bg: #000c17;\n    --b-menu-popup-bg: #001529;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-theme='dark'] .b-menu {\n    --b-menu-item-bg: #001529;\n    --b-menu-item-color: rgba(255, 255, 255, 0.65);\n    --b-menu-item-hover-bg: transparent;\n    --b-menu-item-hover-color: #fff;\n    --b-menu-item-active-bg: #1677ff;\n    --b-menu-item-selected-bg: #1677ff;\n    --b-menu-item-selected-color: #fff;\n    --b-menu-item-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-menu-group-title-color: rgba(255, 255, 255, 0.65);\n    --b-menu-danger-item-color: #ff4d4f;\n    --b-menu-danger-item-hover-color: #ff7875;\n    --b-menu-danger-item-active-bg: #ff4d4f;\n    --b-menu-danger-item-selected-bg: #ff4d4f;\n    --b-menu-danger-item-selected-color: #fff;\n    --b-menu-sub-menu-item-bg: #000c17;\n    --b-menu-popup-bg: #001529;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-menu {\n  margin: 0;\n  padding: 4px;\n  list-style: none;\n  background: var(--b-menu-item-bg);\n  color: var(--b-menu-item-color);\n  font-size: 14px;\n  line-height: 1.5714;\n  box-sizing: border-box;\n  outline: none;\n  transition:\n    background var(--b-menu-transition-duration),\n    width var(--b-menu-transition-duration);\n}\n\n/* ── Inline mode ── */\n.b-menu--inline {\n  width: 100%;\n  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);\n}\n\n.b-menu--inline.b-menu--collapsed {\n  width: var(--b-menu-collapsed-width);\n}\n\n/* ── Vertical mode ── */\n.b-menu--vertical {\n  width: 100%;\n  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);\n}\n\n/* ── Horizontal mode ── */\n.b-menu--horizontal {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  border-bottom: 1px solid rgba(5, 5, 5, 0.06);\n  padding: 0 4px;\n  line-height: var(--b-menu-horizontal-line-height);\n}\n\n/* ── Dark theme border override ── */\n.b-menu--dark.b-menu--inline,\n.b-menu--dark.b-menu--vertical {\n  border-inline-end-color: transparent;\n}\n\n.b-menu--dark.b-menu--horizontal {\n  border-bottom-color: transparent;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-menu {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system143.js

@@ -1,24 +1,98 @@
-import e from "./design-system29.js";
-import { createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, getCurrentInstance as a, openBlock as o, renderSlot as s, toDisplayString as c, unref as l } from "vue";
-//#region src/components/BModal/BModalHeader.vue?vue&type=script&setup=true&lang.ts
-var u = { class: "b:mb-2 b:flex b:items-center b:bg-white" }, d = { class: "b:flex-auto b:font-semibold" }, f = /* @__PURE__ */ i({
-	__name: "BModalHeader",
-	props: { title: {} },
-	setup(i) {
-		let f = a(), p = () => {
-			f?.parent?.emit("update:modelValue", !1);
-		};
-		return (a, f) => (o(), t("div", u, [s(a.$slots, "title", {}, () => [n("h2", d, c(i.title), 1)]), s(a.$slots, "icon", {}, () => [r(l(e), {
-			variant: "text",
-			color: "secondary",
-			"prepend-icon": "xmark",
-			"prepend-icon-size": "md",
-			autofocus: "",
-			onClick: p
-		})])]));
+import { BMessageType as e } from "./design-system3.js";
+import { Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, onUnmounted as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, watch as y, withCtx as b } from "vue";
+//#region src/components/BMessage/BMessage.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"id",
+	"role",
+	"aria-live"
+], S = {
+	key: 0,
+	class: "b-message__icon",
+	"aria-hidden": "true"
+}, C = ["d"], w = { class: "b-message__content" }, T = /* @__PURE__ */ u({
+	__name: "BMessage",
+	props: {
+		type: { default: () => e.Info },
+		content: { default: "" },
+		duration: { default: 3 },
+		showIcon: {
+			type: Boolean,
+			default: !0
+		},
+		modelValue: {
+			type: Boolean,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"close",
+		"afterClose",
+		"update:modelValue"
+	],
+	setup(u, { expose: T, emit: E }) {
+		let D = E, O = v(), k = m(!1), A = r(() => u.modelValue === void 0 ? k.value : u.modelValue), j = r(() => u.modelValue !== void 0), M = r(() => u.type === e.Error || u.type === e.Warning ? "alert" : "status"), N = r(() => {
+			switch (u.type) {
+				case e.Success: return "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z";
+				case e.Warning: return "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z";
+				case e.Error: return "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z";
+				case e.Loading: return "M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z";
+				default: return "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z";
+			}
+		}), P = null;
+		function F() {
+			I(), u.duration > 0 && (P = setTimeout(() => {
+				R();
+			}, u.duration * 1e3));
+		}
+		function I() {
+			P !== null && (clearTimeout(P), P = null);
+		}
+		function L() {
+			j.value ? D("update:modelValue", !0) : k.value = !0;
+		}
+		function R() {
+			D("close"), j.value ? D("update:modelValue", !1) : k.value = !1;
+		}
+		function z() {
+			D("afterClose");
+		}
+		function B() {
+			I();
+		}
+		function V() {
+			F();
+		}
+		return f(() => {
+			I();
+		}), y(A, (e) => {
+			e ? F() : I();
+		}, { immediate: !0 }), T({
+			open: L,
+			close: R
+		}), (e, r) => (p(), i(t, { to: "body" }, [l(n, {
+			name: "b-message-fade",
+			onAfterLeave: z
+		}, {
+			default: b(() => [A.value ? (p(), o("div", {
+				key: 0,
+				id: _(O),
+				class: d(["b-message", [`b-message--${u.type}`, { "b-message--with-icon": u.showIcon }]]),
+				role: M.value,
+				"aria-live": M.value === "alert" ? "assertive" : "polite",
+				"aria-atomic": !0,
+				onMouseenter: B,
+				onMouseleave: V
+			}, [u.showIcon ? (p(), o("span", S, [h(e.$slots, "icon", {}, () => [(p(), o("svg", {
+				class: d(["b-message__icon-svg", { "b-message__icon-svg--spin": u.type === "loading" }]),
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				focusable: "false"
+			}, [s("path", { d: N.value }, null, 8, C)], 2))])])) : a("", !0), s("span", w, [h(e.$slots, "default", {}, () => [c(g(u.content), 1)])])], 42, x)) : a("", !0)]),
+			_: 3
+		})]));
 	}
 });
 //#endregion
-export { f as default };
+export { T as default };
 
 //# sourceMappingURL=design-system143.js.map

package/dist/design-system143.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system143.js","names":[],"sources":["../src/components/BModal/BModalHeader.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, unref as _unref, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"b:mb-2 b:flex b:items-center b:bg-white\" }\nconst _hoisted_2 = { class: \"b:flex-auto b:font-semibold\" }\n\nimport { BButton } from '@/components';\nimport { getCurrentInstance } from 'vue';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BModalHeader',\n  props: {\n    title: {}\n  },\n  setup(__props: any) {\n\n\n\nconst instance = getCurrentInstance();\n\nconst close = () => {\n  instance?.parent?.emit('update:modelValue', false);\n};\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n    _renderSlot(_ctx.$slots, \"title\", {}, () => [\n      _createElementVNode(\"h2\", _hoisted_2, _toDisplayString(__props.title), 1)\n    ]),\n    _renderSlot(_ctx.$slots, \"icon\", {}, () => [\n      _createVNode(_unref(BButton), {\n        variant: \"text\",\n        color: \"secondary\",\n        \"prepend-icon\": \"xmark\",\n        \"prepend-icon-size\": \"md\",\n        autofocus: \"\",\n        onClick: close\n      })\n    ])\n  ]))\n}\n}\n\n})"],"mappings":";;;AAGA,IAAM,IAAa,EAAE,OAAO,2CAA2C,EACjE,IAAa,EAAE,OAAO,+BAA+B,EAM3D,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO,EACL,OAAO,EAAE,EACV;CACD,MAAM,GAAc;EAItB,IAAM,IAAW,GAAoB,EAE/B,UAAc;AAClB,MAAU,QAAQ,KAAK,qBAAqB,GAAM;;AAGpD,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,OAAO,GAAY,CAC3D,EAAY,EAAK,QAAQ,SAAS,EAAE,QAAQ,CAC1C,EAAoB,MAAM,GAAY,EAAiB,EAAQ,MAAM,EAAE,EAAE,CAC1E,CAAC,EACF,EAAY,EAAK,QAAQ,QAAQ,EAAE,QAAQ,CACzC,EAAa,EAAO,EAAQ,EAAE;GAC5B,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,WAAW;GACX,SAAS;GACV,CAAC,CACH,CAAC,CACH,CAAC;;CAIH,CAAA"}
+{"version":3,"file":"design-system143.js","names":[],"sources":["../src/components/BMessage/BMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BMessageType } from '@/types.ts';\nimport { computed, onUnmounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  type = BMessageType.Info,\n  content = '',\n  duration = 3,\n  showIcon = true,\n  modelValue = undefined,\n} = defineProps<{\n  /**\n   * Message type - controls icon and colour scheme.\n   * @default 'info'\n   */\n  type?: `${BMessageType}`;\n  /** The message content text (also accepts the default slot). */\n  content?: string;\n  /**\n   * Time (in seconds) before auto-close. Set to `0` to disable auto-close.\n   * @default 3\n   */\n  duration?: number;\n  /** Show the built-in status icon. @default true */\n  showIcon?: boolean;\n  /**\n   * Controlled visibility - when provided the component operates in\n   * controlled mode; otherwise it manages its own visibility.\n   * Bind with `v-model`.\n   */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired synchronously when the message starts closing. */\n  (e: 'close'): void;\n  /** Fired after the leave-transition fully completes. */\n  (e: 'afterClose'): void;\n  /** v-model support */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst messageId = useId();\n\n/** Uncontrolled visibility flag - default closed. */\nconst internalVisible = ref(false);\n\n/**\n * Effective visibility:\n *  - controlled  → honour `modelValue`\n *  - uncontrolled → use `internalVisible`\n */\nconst isVisible = computed(() => (modelValue !== undefined ? modelValue : internalVisible.value));\n\nconst isControlled = computed(() => modelValue !== undefined);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\n/** ARIA role: 'alert' for error/warning (assertive), 'status' for others. */\nconst ariaRole = computed<'alert' | 'status'>(() =>\n  type === BMessageType.Error || type === BMessageType.Warning ? 'alert' : 'status',\n);\n\n/** Map type → inline SVG path for the status icon. */\nconst iconPath = computed(() => {\n  switch (type) {\n    case BMessageType.Success:\n      // circle-check\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z';\n    case BMessageType.Warning:\n      // triangle-exclamation\n      return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';\n    case BMessageType.Error:\n      // circle-xmark\n      return 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z';\n    case BMessageType.Loading:\n      // spinner (circle arc)\n      return 'M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z';\n    default:\n      // circle-info\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';\n  }\n});\n\ndefineSlots<{\n  /** Overrides the `content` prop. */\n  default?(): unknown;\n  /** Overrides the built-in status icon. */\n  icon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Auto-close timer\n// ─────────────────────────────────────────────\nlet timer: ReturnType<typeof setTimeout> | null = null;\n\nfunction startTimer() {\n  clearTimer();\n  if (duration > 0) {\n    timer = setTimeout(() => {\n      close();\n    }, duration * 1000);\n  }\n}\n\nfunction clearTimer() {\n  if (timer !== null) {\n    clearTimeout(timer);\n    timer = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction open() {\n  if (isControlled.value) {\n    emit('update:modelValue', true);\n  } else {\n    internalVisible.value = true;\n  }\n}\n\nfunction close() {\n  emit('close');\n  if (isControlled.value) {\n    emit('update:modelValue', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onAfterLeave() {\n  emit('afterClose');\n}\n\nfunction onMouseEnter() {\n  clearTimer();\n}\n\nfunction onMouseLeave() {\n  startTimer();\n}\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonUnmounted(() => {\n  clearTimer();\n});\n\n// Start / clear auto-close timer whenever visibility changes\nwatch(\n  isVisible,\n  (visible) => {\n    if (visible) {\n      startTimer();\n    } else {\n      clearTimer();\n    }\n  },\n  { immediate: true },\n);\n\n// Expose open & close for imperative usage\ndefineExpose({ open, close });\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-message-fade\" @after-leave=\"onAfterLeave\">\n      <div\n        v-if=\"isVisible\"\n        :id=\"messageId\"\n        class=\"b-message\"\n        :class=\"[\n          `b-message--${type}`,\n          {\n            'b-message--with-icon': showIcon,\n          },\n        ]\"\n        :role=\"ariaRole\"\n        :aria-live=\"ariaRole === 'alert' ? 'assertive' : 'polite'\"\n        :aria-atomic=\"true\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n      >\n        <!-- Status icon -->\n        <span v-if=\"showIcon\" class=\"b-message__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <svg\n              class=\"b-message__icon-svg\"\n              :class=\"{ 'b-message__icon-svg--spin': type === 'loading' }\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              focusable=\"false\"\n            >\n              <path :d=\"iconPath\" />\n            </svg>\n          </slot>\n        </span>\n\n        <!-- Content -->\n        <span class=\"b-message__content\">\n          <slot>{{ content }}</slot>\n        </span>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-message {\n  /* Layout */\n  --b-message-padding-v: 0.625rem;\n  --b-message-padding-h: 1rem;\n  --b-message-border-radius: 0.5rem;\n  --b-message-icon-size: 1rem;\n  --b-message-gap: 0.5rem;\n  --b-message-font-size: 0.875rem;\n  --b-message-max-width: 32rem;\n\n  /* Colours - info (default) */\n  --b-message-bg: #ffffff;\n  --b-message-border-color: oklch(90% 0.02 240);\n  --b-message-color: oklch(30% 0.02 240);\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n  --b-message-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  /* Animation */\n  --b-message-transition-duration: 300ms;\n  --b-message-top: 8px;\n}\n\n/* ── Variant colour tokens ── */\n.b-message--success {\n  --b-message-icon-color: oklch(72.3% 0.219 149.579);\n}\n\n.b-message--warning {\n  --b-message-icon-color: oklch(75% 0.183 55.934);\n}\n\n.b-message--error {\n  --b-message-icon-color: oklch(63.7% 0.237 25.331);\n}\n\n.b-message--loading {\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-message {\n  --b-message-bg: oklch(22% 0.02 240);\n  --b-message-border-color: oklch(35% 0.03 240);\n  --b-message-color: oklch(88% 0.02 240);\n  --b-message-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-message {\n    --b-message-bg: oklch(22% 0.02 240);\n    --b-message-border-color: oklch(35% 0.03 240);\n    --b-message-color: oklch(88% 0.02 240);\n    --b-message-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-message {\n  position: fixed;\n  top: var(--b-message-top);\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 1010;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-message-gap);\n  padding: var(--b-message-padding-v) var(--b-message-padding-h);\n  border-radius: var(--b-message-border-radius);\n  background-color: var(--b-message-bg);\n  color: var(--b-message-color);\n  font-size: var(--b-message-font-size);\n  line-height: 1.5;\n  box-shadow: var(--b-message-shadow);\n  box-sizing: border-box;\n  max-width: var(--b-message-max-width);\n  word-break: break-word;\n  pointer-events: auto;\n}\n\n/* ── Icon ── */\n.b-message__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  color: var(--b-message-icon-color);\n  line-height: 1;\n}\n\n.b-message__icon-svg {\n  width: var(--b-message-icon-size);\n  height: var(--b-message-icon-size);\n  fill: currentColor;\n  display: block;\n}\n\n/* Loading spinner animation */\n.b-message__icon-svg--spin {\n  animation: b-message-spin 1s linear infinite;\n}\n\n@keyframes b-message-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ── Content ── */\n.b-message__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Transition (slide-down + fade)\n   ───────────────────────────────────────────── */\n.b-message-fade-enter-active,\n.b-message-fade-leave-active {\n  transition:\n    opacity var(--b-message-transition-duration, 300ms) ease,\n    transform var(--b-message-transition-duration, 300ms) ease;\n}\n\n.b-message-fade-enter-from {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n.b-message-fade-enter-to {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-from {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-to {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n/* Respect prefers-reduced-motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-message-fade-enter-active,\n  .b-message-fade-leave-active {\n    transition: opacity var(--b-message-transition-duration, 300ms) ease;\n  }\n\n  .b-message-fade-enter-from,\n  .b-message-fade-leave-to {\n    transform: translateX(-50%);\n  }\n\n  .b-message__icon-svg--spin {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,IAAM,IAAO,GAYP,IAAY,GAAO,EAGnB,IAAkB,EAAI,GAAM,EAO5B,IAAY,QAAgB,EAAA,eAAe,KAAA,IAAyB,EAAgB,QAA7B,EAAA,WAAoC,EAE3F,IAAe,QAAe,EAAA,eAAe,KAAA,EAAU,EAMvD,IAAW,QACf,EAAA,SAAS,EAAa,SAAS,EAAA,SAAS,EAAa,UAAU,UAAU,SAC1E,EAGK,IAAW,QAAe;AAC9B,WAAQ,EAAA,MAAR;IACE,KAAK,EAAa,QAEhB,QAAO;IACT,KAAK,EAAa,QAEhB,QAAO;IACT,KAAK,EAAa,MAEhB,QAAO;IACT,KAAK,EAAa,QAEhB,QAAO;IACT,QAEE,QAAO;;IAEX,EAYE,IAA8C;EAElD,SAAS,IAAa;AAEpB,GADA,GAAY,EACR,EAAA,WAAW,MACb,IAAQ,iBAAiB;AACvB,OAAO;MACN,EAAA,WAAW,IAAK;;EAIvB,SAAS,IAAa;AACpB,GAAI,MAAU,SACZ,aAAa,EAAM,EACnB,IAAQ;;EAOZ,SAAS,IAAO;AACd,GAAI,EAAa,QACf,EAAK,qBAAqB,GAAK,GAE/B,EAAgB,QAAQ;;EAI5B,SAAS,IAAQ;AAEf,GADA,EAAK,QAAQ,EACT,EAAa,QACf,EAAK,qBAAqB,GAAM,GAEhC,EAAgB,QAAQ;;EAI5B,SAAS,IAAe;AACtB,KAAK,aAAa;;EAGpB,SAAS,IAAe;AACtB,MAAY;;EAGd,SAAS,IAAe;AACtB,MAAY;;SAMd,QAAkB;AAChB,MAAY;IACZ,EAGF,EACE,IACC,MAAY;AACX,GAAI,IACF,GAAY,GAEZ,GAAY;KAGhB,EAAE,WAAW,IAAM,CACpB,EAGD,EAAa;GAAE;GAAM;GAAO,CAAC,kBAI3B,EAuCW,GAAA,EAvCD,IAAG,QAAM,EAAA,CACjB,EAqCa,GAAA;GArCD,MAAK;GAA+B;;oBAoCxC,CAlCE,EAAA,SAAA,GAAA,EADR,EAmCM,OAAA;;IAjCH,IAAI,EAAA,EAAS;IACd,OAAK,EAAA,CAAC,aAAW,CAAA,cACiB,EAAA,QAAA,EAAA,wBAAwD,EAAA,UAAA,CAAA,CAAA,CAAA;IAMzF,MAAM,EAAA;IACN,aAAW,EAAA,UAAQ,UAAA,cAAA;IACnB,eAAa;IACb,cAAY;IACZ,cAAY;OAGD,EAAA,YAAA,GAAA,EAAZ,EAYO,QAZP,GAYO,CAXL,EAUO,EAAA,QAAA,QAAA,EAAA,QAAA,EAAA,GAAA,EATL,EAQM,OAAA;IAPJ,OAAK,EAAA,CAAC,uBAAqB,EAAA,6BACY,EAAA,SAAI,WAAA,CAAA,CAAA;IAC3C,SAAQ;IACR,OAAM;IACN,WAAU;OAEV,EAAsB,QAAA,EAAf,GAAG,EAAA,OAAQ,EAAA,MAAA,GAAA,EAAA,CAAA,EAAA,EAAA,EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,EAMxB,EAEO,QAFP,GAEO,CADL,EAA0B,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAjB,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/design-system145.js

@@ -1,161 +1,8 @@
-import { BNotificationPlacement as e, BNotificationType as t } from "./design-system3.js";
-import { Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, onUnmounted as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, unref as y, useId as b, watch as x, withCtx as S } from "vue";
-//#region src/components/BNotification/BNotification.vue?vue&type=script&setup=true&lang.ts
-var C = [
-	"id",
-	"role",
-	"aria-live",
-	"aria-describedby"
-], w = {
-	key: 0,
-	class: "b-notification__icon",
-	"aria-hidden": "true"
-}, T = ["innerHTML"], E = {
-	key: 1,
-	class: "b-notification__icon-svg",
-	viewBox: "0 0 24 24",
-	xmlns: "http://www.w3.org/2000/svg",
-	focusable: "false",
-	"aria-hidden": "true"
-}, D = ["d"], O = { class: "b-notification__body" }, k = {
-	key: 1,
-	class: "b-notification__btn"
-}, A = ["innerHTML"], j = {
-	key: 1,
-	class: "b-notification__close-svg",
-	viewBox: "0 0 24 24",
-	xmlns: "http://www.w3.org/2000/svg",
-	focusable: "false",
-	"aria-hidden": "true"
-}, M = "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 = /* @__PURE__ */ d({
-	__name: "BNotification",
-	props: {
-		type: { default: () => void 0 },
-		message: { default: "" },
-		description: { default: "" },
-		placement: { default: () => e.TopRight },
-		duration: { default: 4.5 },
-		closable: {
-			type: Boolean,
-			default: !0
-		},
-		showIcon: {
-			type: Boolean,
-			default: !0
-		},
-		icon: {},
-		closeIcon: {},
-		btn: {},
-		modelValue: {
-			type: Boolean,
-			default: () => void 0
-		}
-	},
-	emits: [
-		"close",
-		"afterClose",
-		"update:modelValue"
-	],
-	setup(e, { expose: d, emit: N }) {
-		let P = N, F = b(), I = `${F}-title`, L = `${F}-desc`, R = g(!1), z = g(null), B = g(null), V = i(() => e.modelValue === void 0 ? R.value : e.modelValue), H = i(() => e.modelValue !== void 0), U = i(() => e.type === t.Error || e.type === t.Warning ? "alert" : "status"), W = i(() => U.value === "alert" ? "assertive" : "polite"), G = i(() => !!(e.type && e.showIcon) || !!e.icon || !1), K = i(() => !!e.description), q = i(() => {
-			switch (e.type) {
-				case t.Success: return "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z";
-				case t.Warning: return "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z";
-				case t.Error: return "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z";
-				default: return "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z";
-			}
-		}), J = null;
-		function Y() {
-			X(), e.duration > 0 && (J = setTimeout(() => {
-				Q();
-			}, e.duration * 1e3));
-		}
-		function X() {
-			J !== null && (clearTimeout(J), J = null);
-		}
-		function Z() {
-			H.value ? P("update:modelValue", !0) : R.value = !0;
-		}
-		function Q() {
-			P("close"), H.value ? P("update:modelValue", !1) : R.value = !1;
-		}
-		function $() {
-			B.value && document.contains(B.value) && (B.value.focus(), B.value = null), P("afterClose");
-		}
-		function ee() {
-			X();
-		}
-		function te() {
-			Y();
-		}
-		function ne(t) {
-			t.key === "Escape" && e.closable && (t.stopPropagation(), Q());
-		}
-		return x(V, async (t) => {
-			t ? (B.value = document.activeElement, Y(), e.closable && (await f(), (z.value?.querySelector(".b-notification__close"))?.focus())) : X();
-		}, { immediate: !0 }), m(() => {
-			X();
-		}), d({
-			open: Z,
-			close: Q
-		}), (t, i) => (h(), a(n, { to: "body" }, [u(r, {
-			name: "b-notification-fade",
-			onAfterLeave: $
-		}, {
-			default: S(() => [V.value ? (h(), s("div", {
-				key: 0,
-				id: y(F),
-				ref_key: "notificationRef",
-				ref: z,
-				class: p(["b-notification", [
-					e.placement && `b-notification--${e.placement}`,
-					e.type && `b-notification--${e.type}`,
-					{
-						"b-notification--with-icon": G.value,
-						"b-notification--with-description": K.value
-					}
-				]]),
-				role: U.value,
-				"aria-live": W.value,
-				"aria-atomic": !0,
-				"aria-labelledby": I,
-				"aria-describedby": K.value ? L : void 0,
-				onMouseenter: ee,
-				onMouseleave: te,
-				onKeydown: ne
-			}, [
-				G.value ? (h(), s("span", w, [_(t.$slots, "icon", {}, () => [e.icon ? (h(), s("span", {
-					key: 0,
-					innerHTML: e.icon
-				}, null, 8, T)) : e.type ? (h(), s("svg", E, [c("path", { d: q.value }, null, 8, D)])) : o("", !0)])])) : o("", !0),
-				c("div", O, [
-					c("div", {
-						id: I,
-						class: "b-notification__message"
-					}, [_(t.$slots, "message", {}, () => [l(v(e.message), 1)])]),
-					K.value || t.$slots.description ? (h(), s("div", {
-						key: 0,
-						id: L,
-						class: "b-notification__description"
-					}, [_(t.$slots, "description", {}, () => [l(v(e.description), 1)])])) : o("", !0),
-					e.btn || t.$slots.btn ? (h(), s("div", k, [_(t.$slots, "btn", {}, () => [l(v(e.btn), 1)])])) : o("", !0)
-				]),
-				e.closable ? (h(), s("button", {
-					key: 1,
-					type: "button",
-					class: "b-notification__close",
-					"aria-label": "Close notification",
-					onClick: Q
-				}, [_(t.$slots, "closeIcon", {}, () => [e.closeIcon ? (h(), s("span", {
-					key: 0,
-					innerHTML: e.closeIcon
-				}, null, 8, A)) : (h(), s("svg", j, [c("path", { d: M })]))])])) : o("", !0)
-			], 42, C)) : o("", !0)]),
-			_: 3
-		})]));
-	}
-});
+import e from "./design-system143.js";
+/* empty css                 */
+//#region src/components/BMessage/BMessage.vue
+var t = e;
 //#endregion
-export { N as default };
+export { t as default };
 
 //# sourceMappingURL=design-system145.js.map

package/dist/design-system145.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system145.js","names":[],"sources":["../src/components/BNotification/BNotification.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = [\"id\", \"role\", \"aria-live\", \"aria-describedby\"]\nconst _hoisted_2 = {\n  key: 0,\n  class: \"b-notification__icon\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = [\"innerHTML\"]\nconst _hoisted_4 = {\n  key: 1,\n  class: \"b-notification__icon-svg\",\n  viewBox: \"0 0 24 24\",\n  xmlns: \"http://www.w3.org/2000/svg\",\n  focusable: \"false\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_5 = [\"d\"]\nconst _hoisted_6 = { class: \"b-notification__body\" }\nconst _hoisted_7 = {\n  key: 1,\n  class: \"b-notification__btn\"\n}\nconst _hoisted_8 = [\"innerHTML\"]\nconst _hoisted_9 = {\n  key: 1,\n  class: \"b-notification__close-svg\",\n  viewBox: \"0 0 24 24\",\n  xmlns: \"http://www.w3.org/2000/svg\",\n  focusable: \"false\",\n  \"aria-hidden\": \"true\"\n}\n\nimport { BNotificationPlacement, BNotificationType } from '@/types.ts';\nimport { computed, nextTick, onUnmounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst closeIconPath =\n  '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// ─────────────────────────────────────────────\n// Auto-close timer\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BNotification',\n  props: {\n    type: { default: () => (undefined) },\n    message: { default: '' },\n    description: { default: '' },\n    placement: { default: () => (BNotificationPlacement.TopRight) },\n    duration: { default: 4.5 },\n    closable: { type: Boolean, default: true },\n    showIcon: { type: Boolean, default: true },\n    icon: {},\n    closeIcon: {},\n    btn: {},\n    modelValue: { type: Boolean, default: () => (undefined) }\n  },\n  emits: [\"close\", \"afterClose\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst notificationId = useId();\nconst titleId = `${notificationId}-title`;\nconst descId = `${notificationId}-desc`;\n\n/** Uncontrolled visibility flag - default closed. */\nconst internalVisible = ref(false);\n\n/** Ref to the notification DOM element for focus return. */\nconst notificationRef = ref<HTMLElement | null>(null);\n\n/** Element that had focus before the notification appeared. */\nconst previousFocusRef = ref<HTMLElement | null>(null);\n\n/**\n * Effective visibility:\n *  - controlled  → honour `modelValue`\n *  - uncontrolled → use `internalVisible`\n */\nconst isVisible = computed(() => (__props.modelValue !== undefined ? __props.modelValue : internalVisible.value));\n\nconst isControlled = computed(() => __props.modelValue !== undefined);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\n/** ARIA role: 'alert' for error/warning (assertive), 'status' for others. */\nconst ariaRole = computed<'alert' | 'status'>(() =>\n  __props.type === BNotificationType.Error || __props.type === BNotificationType.Warning ? 'alert' : 'status',\n);\n\n/** aria-live polarity mirrors the role. */\nconst ariaLive = computed(() => (ariaRole.value === 'alert' ? 'assertive' : 'polite'));\n\n/** Whether to show the icon area (needs type and showIcon). */\nconst showIconArea = computed(() => Boolean(__props.type && __props.showIcon) || Boolean(__props.icon) || false);\n\n/** Whether the description is provided via prop or slot. */\nconst hasDescription = computed(() => Boolean(__props.description));\n\n/** Built-in SVG path for the status icon. */\nconst iconPath = computed(() => {\n  switch (__props.type) {\n    case BNotificationType.Success:\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z';\n    case BNotificationType.Warning:\n      return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';\n    case BNotificationType.Error:\n      return 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z';\n    default:\n      // info (also fallback)\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';\n  }\n});\n\n// Close icon SVG path (× mark)\nlet timer: ReturnType<typeof setTimeout> | null = null;\n\nfunction startTimer() {\n  clearTimer();\n  if (__props.duration > 0) {\n    timer = setTimeout(() => {\n      close();\n    }, __props.duration * 1000);\n  }\n}\n\nfunction clearTimer() {\n  if (timer !== null) {\n    clearTimeout(timer);\n    timer = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction open() {\n  if (isControlled.value) {\n    emit('update:modelValue', true);\n  } else {\n    internalVisible.value = true;\n  }\n}\n\nfunction close() {\n  emit('close');\n  if (isControlled.value) {\n    emit('update:modelValue', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onAfterLeave() {\n  // Return focus to the previously-focused element\n  if (previousFocusRef.value && document.contains(previousFocusRef.value)) {\n    previousFocusRef.value.focus();\n    previousFocusRef.value = null;\n  }\n  emit('afterClose');\n}\n\nfunction onMouseEnter() {\n  clearTimer();\n}\n\nfunction onMouseLeave() {\n  startTimer();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && __props.closable) {\n    event.stopPropagation();\n    close();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Visibility watcher - manage timer + focus\n// ─────────────────────────────────────────────\nwatch(\n  isVisible,\n  async (visible) => {\n    if (visible) {\n      // Capture current focus for return-on-close\n      previousFocusRef.value = document.activeElement as HTMLElement | null;\n      startTimer();\n      // Focus the close button (if closable) once the DOM updates\n      if (__props.closable) {\n        await nextTick();\n        const closeBtn =\n          notificationRef.value?.querySelector<HTMLElement>('.b-notification__close');\n        closeBtn?.focus();\n      }\n    } else {\n      clearTimer();\n    }\n  },\n  { immediate: true },\n);\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonUnmounted(() => {\n  clearTimer();\n});\n\n// Expose open & close for imperative usage\n__expose({ open, close });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n    _createVNode(_Transition, {\n      name: \"b-notification-fade\",\n      onAfterLeave: onAfterLeave\n    }, {\n      default: _withCtx(() => [\n        (isVisible.value)\n          ? (_openBlock(), _createElementBlock(\"div\", {\n              key: 0,\n              id: _unref(notificationId),\n              ref_key: \"notificationRef\",\n              ref: notificationRef,\n              class: _normalizeClass([\"b-notification\", [\n          __props.placement && `b-notification--${__props.placement}`,\n          __props.type && `b-notification--${__props.type}`,\n          {\n            'b-notification--with-icon': showIconArea.value,\n            'b-notification--with-description': hasDescription.value,\n          },\n        ]]),\n              role: ariaRole.value,\n              \"aria-live\": ariaLive.value,\n              \"aria-atomic\": true,\n              \"aria-labelledby\": titleId,\n              \"aria-describedby\": hasDescription.value ? descId : undefined,\n              onMouseenter: onMouseEnter,\n              onMouseleave: onMouseLeave,\n              onKeydown: onKeydown\n            }, [\n              (showIconArea.value)\n                ? (_openBlock(), _createElementBlock(\"span\", _hoisted_2, [\n                    _renderSlot(_ctx.$slots, \"icon\", {}, () => [\n                      (__props.icon)\n                        ? (_openBlock(), _createElementBlock(\"span\", {\n                            key: 0,\n                            innerHTML: __props.icon\n                          }, null, 8, _hoisted_3))\n                        : (__props.type)\n                          ? (_openBlock(), _createElementBlock(\"svg\", _hoisted_4, [\n                              _createElementVNode(\"path\", { d: iconPath.value }, null, 8, _hoisted_5)\n                            ]))\n                          : _createCommentVNode(\"\", true)\n                    ])\n                  ]))\n                : _createCommentVNode(\"\", true),\n              _createElementVNode(\"div\", _hoisted_6, [\n                _createElementVNode(\"div\", {\n                  id: titleId,\n                  class: \"b-notification__message\"\n                }, [\n                  _renderSlot(_ctx.$slots, \"message\", {}, () => [\n                    _createTextVNode(_toDisplayString(__props.message), 1)\n                  ])\n                ]),\n                (hasDescription.value || _ctx.$slots.description)\n                  ? (_openBlock(), _createElementBlock(\"div\", {\n                      key: 0,\n                      id: descId,\n                      class: \"b-notification__description\"\n                    }, [\n                      _renderSlot(_ctx.$slots, \"description\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.description), 1)\n                      ])\n                    ]))\n                  : _createCommentVNode(\"\", true),\n                (__props.btn || _ctx.$slots.btn)\n                  ? (_openBlock(), _createElementBlock(\"div\", _hoisted_7, [\n                      _renderSlot(_ctx.$slots, \"btn\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.btn), 1)\n                      ])\n                    ]))\n                  : _createCommentVNode(\"\", true)\n              ]),\n              (__props.closable)\n                ? (_openBlock(), _createElementBlock(\"button\", {\n                    key: 1,\n                    type: \"button\",\n                    class: \"b-notification__close\",\n                    \"aria-label\": \"Close notification\",\n                    onClick: close\n                  }, [\n                    _renderSlot(_ctx.$slots, \"closeIcon\", {}, () => [\n                      (__props.closeIcon)\n                        ? (_openBlock(), _createElementBlock(\"span\", {\n                            key: 0,\n                            innerHTML: __props.closeIcon\n                          }, null, 8, _hoisted_8))\n                        : (_openBlock(), _createElementBlock(\"svg\", _hoisted_9, [\n                            _createElementVNode(\"path\", { d: closeIconPath })\n                          ]))\n                    ])\n                  ]))\n                : _createCommentVNode(\"\", true)\n            ], 42, _hoisted_1))\n          : _createCommentVNode(\"\", true)\n      ]),\n      _: 3\n    })\n  ]))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system145.js","names":[],"sources":["../src/components/BMessage/BMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BMessageType } from '@/types.ts';\nimport { computed, onUnmounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  type = BMessageType.Info,\n  content = '',\n  duration = 3,\n  showIcon = true,\n  modelValue = undefined,\n} = defineProps<{\n  /**\n   * Message type - controls icon and colour scheme.\n   * @default 'info'\n   */\n  type?: `${BMessageType}`;\n  /** The message content text (also accepts the default slot). */\n  content?: string;\n  /**\n   * Time (in seconds) before auto-close. Set to `0` to disable auto-close.\n   * @default 3\n   */\n  duration?: number;\n  /** Show the built-in status icon. @default true */\n  showIcon?: boolean;\n  /**\n   * Controlled visibility - when provided the component operates in\n   * controlled mode; otherwise it manages its own visibility.\n   * Bind with `v-model`.\n   */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired synchronously when the message starts closing. */\n  (e: 'close'): void;\n  /** Fired after the leave-transition fully completes. */\n  (e: 'afterClose'): void;\n  /** v-model support */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst messageId = useId();\n\n/** Uncontrolled visibility flag - default closed. */\nconst internalVisible = ref(false);\n\n/**\n * Effective visibility:\n *  - controlled  → honour `modelValue`\n *  - uncontrolled → use `internalVisible`\n */\nconst isVisible = computed(() => (modelValue !== undefined ? modelValue : internalVisible.value));\n\nconst isControlled = computed(() => modelValue !== undefined);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\n/** ARIA role: 'alert' for error/warning (assertive), 'status' for others. */\nconst ariaRole = computed<'alert' | 'status'>(() =>\n  type === BMessageType.Error || type === BMessageType.Warning ? 'alert' : 'status',\n);\n\n/** Map type → inline SVG path for the status icon. */\nconst iconPath = computed(() => {\n  switch (type) {\n    case BMessageType.Success:\n      // circle-check\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z';\n    case BMessageType.Warning:\n      // triangle-exclamation\n      return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';\n    case BMessageType.Error:\n      // circle-xmark\n      return 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z';\n    case BMessageType.Loading:\n      // spinner (circle arc)\n      return 'M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z';\n    default:\n      // circle-info\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';\n  }\n});\n\ndefineSlots<{\n  /** Overrides the `content` prop. */\n  default?(): unknown;\n  /** Overrides the built-in status icon. */\n  icon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Auto-close timer\n// ─────────────────────────────────────────────\nlet timer: ReturnType<typeof setTimeout> | null = null;\n\nfunction startTimer() {\n  clearTimer();\n  if (duration > 0) {\n    timer = setTimeout(() => {\n      close();\n    }, duration * 1000);\n  }\n}\n\nfunction clearTimer() {\n  if (timer !== null) {\n    clearTimeout(timer);\n    timer = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction open() {\n  if (isControlled.value) {\n    emit('update:modelValue', true);\n  } else {\n    internalVisible.value = true;\n  }\n}\n\nfunction close() {\n  emit('close');\n  if (isControlled.value) {\n    emit('update:modelValue', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onAfterLeave() {\n  emit('afterClose');\n}\n\nfunction onMouseEnter() {\n  clearTimer();\n}\n\nfunction onMouseLeave() {\n  startTimer();\n}\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonUnmounted(() => {\n  clearTimer();\n});\n\n// Start / clear auto-close timer whenever visibility changes\nwatch(\n  isVisible,\n  (visible) => {\n    if (visible) {\n      startTimer();\n    } else {\n      clearTimer();\n    }\n  },\n  { immediate: true },\n);\n\n// Expose open & close for imperative usage\ndefineExpose({ open, close });\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-message-fade\" @after-leave=\"onAfterLeave\">\n      <div\n        v-if=\"isVisible\"\n        :id=\"messageId\"\n        class=\"b-message\"\n        :class=\"[\n          `b-message--${type}`,\n          {\n            'b-message--with-icon': showIcon,\n          },\n        ]\"\n        :role=\"ariaRole\"\n        :aria-live=\"ariaRole === 'alert' ? 'assertive' : 'polite'\"\n        :aria-atomic=\"true\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n      >\n        <!-- Status icon -->\n        <span v-if=\"showIcon\" class=\"b-message__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <svg\n              class=\"b-message__icon-svg\"\n              :class=\"{ 'b-message__icon-svg--spin': type === 'loading' }\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              focusable=\"false\"\n            >\n              <path :d=\"iconPath\" />\n            </svg>\n          </slot>\n        </span>\n\n        <!-- Content -->\n        <span class=\"b-message__content\">\n          <slot>{{ content }}</slot>\n        </span>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-message {\n  /* Layout */\n  --b-message-padding-v: 0.625rem;\n  --b-message-padding-h: 1rem;\n  --b-message-border-radius: 0.5rem;\n  --b-message-icon-size: 1rem;\n  --b-message-gap: 0.5rem;\n  --b-message-font-size: 0.875rem;\n  --b-message-max-width: 32rem;\n\n  /* Colours - info (default) */\n  --b-message-bg: #ffffff;\n  --b-message-border-color: oklch(90% 0.02 240);\n  --b-message-color: oklch(30% 0.02 240);\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n  --b-message-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  /* Animation */\n  --b-message-transition-duration: 300ms;\n  --b-message-top: 8px;\n}\n\n/* ── Variant colour tokens ── */\n.b-message--success {\n  --b-message-icon-color: oklch(72.3% 0.219 149.579);\n}\n\n.b-message--warning {\n  --b-message-icon-color: oklch(75% 0.183 55.934);\n}\n\n.b-message--error {\n  --b-message-icon-color: oklch(63.7% 0.237 25.331);\n}\n\n.b-message--loading {\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-message {\n  --b-message-bg: oklch(22% 0.02 240);\n  --b-message-border-color: oklch(35% 0.03 240);\n  --b-message-color: oklch(88% 0.02 240);\n  --b-message-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-message {\n    --b-message-bg: oklch(22% 0.02 240);\n    --b-message-border-color: oklch(35% 0.03 240);\n    --b-message-color: oklch(88% 0.02 240);\n    --b-message-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-message {\n  position: fixed;\n  top: var(--b-message-top);\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 1010;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-message-gap);\n  padding: var(--b-message-padding-v) var(--b-message-padding-h);\n  border-radius: var(--b-message-border-radius);\n  background-color: var(--b-message-bg);\n  color: var(--b-message-color);\n  font-size: var(--b-message-font-size);\n  line-height: 1.5;\n  box-shadow: var(--b-message-shadow);\n  box-sizing: border-box;\n  max-width: var(--b-message-max-width);\n  word-break: break-word;\n  pointer-events: auto;\n}\n\n/* ── Icon ── */\n.b-message__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  color: var(--b-message-icon-color);\n  line-height: 1;\n}\n\n.b-message__icon-svg {\n  width: var(--b-message-icon-size);\n  height: var(--b-message-icon-size);\n  fill: currentColor;\n  display: block;\n}\n\n/* Loading spinner animation */\n.b-message__icon-svg--spin {\n  animation: b-message-spin 1s linear infinite;\n}\n\n@keyframes b-message-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ── Content ── */\n.b-message__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Transition (slide-down + fade)\n   ───────────────────────────────────────────── */\n.b-message-fade-enter-active,\n.b-message-fade-leave-active {\n  transition:\n    opacity var(--b-message-transition-duration, 300ms) ease,\n    transform var(--b-message-transition-duration, 300ms) ease;\n}\n\n.b-message-fade-enter-from {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n.b-message-fade-enter-to {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-from {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-to {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n/* Respect prefers-reduced-motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-message-fade-enter-active,\n  .b-message-fade-leave-active {\n    transition: opacity var(--b-message-transition-duration, 300ms) ease;\n  }\n\n  .b-message-fade-enter-from,\n  .b-message-fade-leave-to {\n    transform: translateX(-50%);\n  }\n\n  .b-message__icon-svg--spin {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system146.js

@@ -0,0 +1,12 @@
+import e from "./design-system14.js";
+import { createElementBlock as t, openBlock as n, renderSlot as r } from "vue";
+//#region src/components/BModal/BModalBody.vue
+var i = {}, a = { class: "b:text-sm b:text-black/80" };
+function o(e, i) {
+	return n(), t("div", a, [r(e.$slots, "default")]);
+}
+var s = /* @__PURE__ */ e(i, [["render", o]]);
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=design-system146.js.map

package/dist/design-system146.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system146.js","names":[],"sources":["../src/components/BModal/BModalBody.vue"],"sourcesContent":["<template>\n  <div class=\"b:text-sm b:text-black/80\">\n    <slot></slot>\n  </div>\n</template>\n"],"mappings":";;;kBACO,OAAM,6BAA2B;;aAAtC,EAEM,OAFN,GAEM,CADJ,EAAa,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/design-system147.js

@@ -1,8 +1,40 @@
-import e from "./design-system145.js";
-/* empty css                 */
-//#region src/components/BNotification/BNotification.vue
-var t = e;
+import e from "./design-system29.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, openBlock as s, renderSlot as c, toDisplayString as l, unref as u, withCtx as d } from "vue";
+//#region src/components/BModal/BModalFooter.vue?vue&type=script&setup=true&lang.ts
+var f = { class: "b:mt-2 b:flex b:items-center b:bg-white" }, p = { class: "b:flex b:flex-initial b:gap-x-2" }, m = /* @__PURE__ */ o({
+	__name: "BModalFooter",
+	props: {
+		cancelText: { default: "Cancel" },
+		hideCancel: { type: Boolean },
+		cancelDisabled: { type: Boolean },
+		okText: { default: "OK" },
+		hideOk: { type: Boolean },
+		okDisabled: { type: Boolean }
+	},
+	emits: ["cancel", "ok"],
+	setup(o, { emit: m }) {
+		let h = m;
+		return (m, g) => (s(), r("div", f, [c(m.$slots, "left", {}, () => [g[2] ||= i("div", { class: "b:flex-auto" }, null, -1)]), c(m.$slots, "right", {}, () => [i("div", p, [o.hideCancel ? n("", !0) : (s(), t(u(e), {
+			key: 0,
+			variant: "outlined",
+			color: "secondary",
+			autofocus: "",
+			disabled: o.cancelDisabled,
+			onClick: g[0] ||= (e) => h("cancel")
+		}, {
+			default: d(() => [a(l(o.cancelText), 1)]),
+			_: 1
+		}, 8, ["disabled"])), o.hideOk ? n("", !0) : (s(), t(u(e), {
+			key: 1,
+			disabled: o.okDisabled,
+			onClick: g[1] ||= (e) => h("ok")
+		}, {
+			default: d(() => [a(l(o.okText), 1)]),
+			_: 1
+		}, 8, ["disabled"]))])])]));
+	}
+});
 //#endregion
-export { t as default };
+export { m as default };
 
 //# sourceMappingURL=design-system147.js.map

package/dist/design-system147.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system147.js","names":[],"sources":["../src/components/BNotification/BNotification.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BNotificationPlacement, BNotificationType } from '@/types.ts';\nimport { computed, nextTick, onUnmounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  type = undefined,\n  message = '',\n  description = '',\n  placement = BNotificationPlacement.TopRight,\n  duration = 4.5,\n  closable = true,\n  showIcon = true,\n  icon,\n  closeIcon,\n  btn,\n  modelValue = undefined,\n} = defineProps<{\n  /**\n   * Notification type - controls the icon and colour scheme.\n   * When omitted no type-colour is applied (plain notification).\n   */\n  type?: `${BNotificationType}`;\n  /** Short title / heading of the notification. */\n  message?: string;\n  /** Optional detailed description below the title. */\n  description?: string;\n  /**\n   * Placement of the notification on the viewport.\n   * @default 'top-right'\n   */\n  placement?: `${BNotificationPlacement}`;\n  /**\n   * Auto-close delay in seconds. Set to `0` to disable auto-close.\n   * @default 4.5\n   */\n  duration?: number;\n  /** Show the close button. @default true */\n  closable?: boolean;\n  /** Show the built-in status icon when `type` is set. @default true */\n  showIcon?: boolean;\n  /**\n   * Custom icon content - overrides the built-in type icon.\n   * Also accepts the `icon` slot.\n   */\n  icon?: string;\n  /**\n   * Custom close-icon content.\n   * Also accepts the `closeIcon` slot.\n   */\n  closeIcon?: string;\n  /**\n   * Custom action button area content.\n   * Also accepts the `btn` slot.\n   */\n  btn?: string;\n  /**\n   * Controlled visibility - when provided the component operates in\n   * controlled mode; otherwise it manages its own visibility.\n   * Bind with `v-model`.\n   */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired synchronously when the notification starts closing. */\n  (e: 'close'): void;\n  /** Fired after the leave-transition fully completes. */\n  (e: 'afterClose'): void;\n  /** v-model support */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\ndefineSlots<{\n  /** Overrides the `message` prop - the notification title. */\n  message?(): unknown;\n  /** Overrides the `description` prop. */\n  description?(): unknown;\n  /** Overrides the built-in status icon. */\n  icon?(): unknown;\n  /** Overrides the default close icon. */\n  closeIcon?(): unknown;\n  /** Action button area rendered below the description. */\n  btn?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst notificationId = useId();\nconst titleId = `${notificationId}-title`;\nconst descId = `${notificationId}-desc`;\n\n/** Uncontrolled visibility flag - default closed. */\nconst internalVisible = ref(false);\n\n/** Ref to the notification DOM element for focus return. */\nconst notificationRef = ref<HTMLElement | null>(null);\n\n/** Element that had focus before the notification appeared. */\nconst previousFocusRef = ref<HTMLElement | null>(null);\n\n/**\n * Effective visibility:\n *  - controlled  → honour `modelValue`\n *  - uncontrolled → use `internalVisible`\n */\nconst isVisible = computed(() => (modelValue !== undefined ? modelValue : internalVisible.value));\n\nconst isControlled = computed(() => modelValue !== undefined);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\n/** ARIA role: 'alert' for error/warning (assertive), 'status' for others. */\nconst ariaRole = computed<'alert' | 'status'>(() =>\n  type === BNotificationType.Error || type === BNotificationType.Warning ? 'alert' : 'status',\n);\n\n/** aria-live polarity mirrors the role. */\nconst ariaLive = computed(() => (ariaRole.value === 'alert' ? 'assertive' : 'polite'));\n\n/** Whether to show the icon area (needs type and showIcon). */\nconst showIconArea = computed(() => Boolean(type && showIcon) || Boolean(icon) || false);\n\n/** Whether the description is provided via prop or slot. */\nconst hasDescription = computed(() => Boolean(description));\n\n/** Built-in SVG path for the status icon. */\nconst iconPath = computed(() => {\n  switch (type) {\n    case BNotificationType.Success:\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z';\n    case BNotificationType.Warning:\n      return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';\n    case BNotificationType.Error:\n      return 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z';\n    default:\n      // info (also fallback)\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';\n  }\n});\n\n// Close icon SVG path (× mark)\nconst closeIconPath =\n  '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// ─────────────────────────────────────────────\n// Auto-close timer\n// ─────────────────────────────────────────────\nlet timer: ReturnType<typeof setTimeout> | null = null;\n\nfunction startTimer() {\n  clearTimer();\n  if (duration > 0) {\n    timer = setTimeout(() => {\n      close();\n    }, duration * 1000);\n  }\n}\n\nfunction clearTimer() {\n  if (timer !== null) {\n    clearTimeout(timer);\n    timer = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction open() {\n  if (isControlled.value) {\n    emit('update:modelValue', true);\n  } else {\n    internalVisible.value = true;\n  }\n}\n\nfunction close() {\n  emit('close');\n  if (isControlled.value) {\n    emit('update:modelValue', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onAfterLeave() {\n  // Return focus to the previously-focused element\n  if (previousFocusRef.value && document.contains(previousFocusRef.value)) {\n    previousFocusRef.value.focus();\n    previousFocusRef.value = null;\n  }\n  emit('afterClose');\n}\n\nfunction onMouseEnter() {\n  clearTimer();\n}\n\nfunction onMouseLeave() {\n  startTimer();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && closable) {\n    event.stopPropagation();\n    close();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Visibility watcher - manage timer + focus\n// ─────────────────────────────────────────────\nwatch(\n  isVisible,\n  async (visible) => {\n    if (visible) {\n      // Capture current focus for return-on-close\n      previousFocusRef.value = document.activeElement as HTMLElement | null;\n      startTimer();\n      // Focus the close button (if closable) once the DOM updates\n      if (closable) {\n        await nextTick();\n        const closeBtn =\n          notificationRef.value?.querySelector<HTMLElement>('.b-notification__close');\n        closeBtn?.focus();\n      }\n    } else {\n      clearTimer();\n    }\n  },\n  { immediate: true },\n);\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonUnmounted(() => {\n  clearTimer();\n});\n\n// Expose open & close for imperative usage\ndefineExpose({ open, close });\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-notification-fade\" @after-leave=\"onAfterLeave\">\n      <div\n        v-if=\"isVisible\"\n        :id=\"notificationId\"\n        ref=\"notificationRef\"\n        class=\"b-notification\"\n        :class=\"[\n          placement && `b-notification--${placement}`,\n          type && `b-notification--${type}`,\n          {\n            'b-notification--with-icon': showIconArea,\n            'b-notification--with-description': hasDescription,\n          },\n        ]\"\n        :role=\"ariaRole\"\n        :aria-live=\"ariaLive\"\n        :aria-atomic=\"true\"\n        :aria-labelledby=\"titleId\"\n        :aria-describedby=\"hasDescription ? descId : undefined\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @keydown=\"onKeydown\"\n      >\n        <!-- Icon area -->\n        <span v-if=\"showIconArea\" class=\"b-notification__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <!-- Custom icon prop as raw HTML (consumer's responsibility) -->\n            <span v-if=\"icon\" v-html=\"icon\" />\n            <!-- Built-in type icon -->\n            <svg\n              v-else-if=\"type\"\n              class=\"b-notification__icon-svg\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              focusable=\"false\"\n              aria-hidden=\"true\"\n            >\n              <path :d=\"iconPath\" />\n            </svg>\n          </slot>\n        </span>\n\n        <!-- Body -->\n        <div class=\"b-notification__body\">\n          <!-- Title -->\n          <div :id=\"titleId\" class=\"b-notification__message\">\n            <slot name=\"message\">{{ message }}</slot>\n          </div>\n\n          <!-- Description -->\n          <div\n            v-if=\"hasDescription || $slots.description\"\n            :id=\"descId\"\n            class=\"b-notification__description\"\n          >\n            <slot name=\"description\">{{ description }}</slot>\n          </div>\n\n          <!-- Action button area -->\n          <div v-if=\"btn || $slots.btn\" class=\"b-notification__btn\">\n            <slot name=\"btn\">{{ btn }}</slot>\n          </div>\n        </div>\n\n        <!-- Close button -->\n        <button\n          v-if=\"closable\"\n          type=\"button\"\n          class=\"b-notification__close\"\n          aria-label=\"Close notification\"\n          @click=\"close\"\n        >\n          <slot name=\"closeIcon\">\n            <span v-if=\"closeIcon\" v-html=\"closeIcon\" />\n            <svg\n              v-else\n              class=\"b-notification__close-svg\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              focusable=\"false\"\n              aria-hidden=\"true\"\n            >\n              <path :d=\"closeIconPath\" />\n            </svg>\n          </slot>\n        </button>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-notification {\n  /* Layout */\n  --b-notification-width: 22rem;\n  --b-notification-padding-v: 1rem;\n  --b-notification-padding-h: 1.5rem;\n  --b-notification-border-radius: 0.5rem;\n  --b-notification-icon-size: 1.5rem;\n  --b-notification-gap: 0.75rem;\n  --b-notification-close-size: 1rem;\n  --b-notification-font-size-title: 1rem;\n  --b-notification-font-size-desc: 0.875rem;\n  --b-notification-line-height: 1.5;\n  --b-notification-z-index: 1010;\n\n  /* Offset from viewport edge */\n  --b-notification-offset: 1.5rem;\n\n  /* Colours (default / plain) */\n  --b-notification-bg: #ffffff;\n  --b-notification-border-color: oklch(90% 0.02 240);\n  --b-notification-title-color: oklch(20% 0.02 240);\n  --b-notification-desc-color: oklch(45% 0.02 240);\n  --b-notification-close-color: oklch(50% 0.02 240);\n  --b-notification-close-hover-color: oklch(20% 0.02 240);\n  --b-notification-icon-color: oklch(62.3% 0.214 259.815);\n  --b-notification-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  /* Animation */\n  --b-notification-transition-duration: 300ms;\n}\n\n/* ── Variant colour tokens ── */\n.b-notification--success {\n  --b-notification-icon-color: oklch(72.3% 0.219 149.579);\n}\n\n.b-notification--info {\n  --b-notification-icon-color: oklch(62.3% 0.214 259.815);\n}\n\n.b-notification--warning {\n  --b-notification-icon-color: oklch(75% 0.183 55.934);\n}\n\n.b-notification--error {\n  --b-notification-icon-color: oklch(63.7% 0.237 25.331);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-notification {\n  --b-notification-bg: oklch(22% 0.02 240);\n  --b-notification-border-color: oklch(35% 0.03 240);\n  --b-notification-title-color: oklch(92% 0.02 240);\n  --b-notification-desc-color: oklch(70% 0.02 240);\n  --b-notification-close-color: oklch(60% 0.02 240);\n  --b-notification-close-hover-color: oklch(90% 0.02 240);\n  --b-notification-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-notification {\n    --b-notification-bg: oklch(22% 0.02 240);\n    --b-notification-border-color: oklch(35% 0.03 240);\n    --b-notification-title-color: oklch(92% 0.02 240);\n    --b-notification-desc-color: oklch(70% 0.02 240);\n    --b-notification-close-color: oklch(60% 0.02 240);\n    --b-notification-close-hover-color: oklch(90% 0.02 240);\n    --b-notification-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-notification {\n  position: fixed;\n  z-index: var(--b-notification-z-index);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-notification-gap);\n  width: var(--b-notification-width);\n  max-width: calc(100vw - 2 * var(--b-notification-offset));\n  padding: var(--b-notification-padding-v) var(--b-notification-padding-h);\n  border-radius: var(--b-notification-border-radius);\n  background-color: var(--b-notification-bg);\n  box-shadow: var(--b-notification-shadow);\n  box-sizing: border-box;\n  word-break: break-word;\n  pointer-events: auto;\n  outline: none;\n}\n\n/* ── Placement ── */\n.b-notification--top-right {\n  top: var(--b-notification-offset);\n  right: var(--b-notification-offset);\n}\n\n.b-notification--top-left {\n  top: var(--b-notification-offset);\n  left: var(--b-notification-offset);\n}\n\n.b-notification--bottom-right {\n  bottom: var(--b-notification-offset);\n  right: var(--b-notification-offset);\n}\n\n.b-notification--bottom-left {\n  bottom: var(--b-notification-offset);\n  left: var(--b-notification-offset);\n}\n\n/* ── Icon area ── */\n.b-notification__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  padding-top: 0.125rem;\n  color: var(--b-notification-icon-color);\n  line-height: 1;\n}\n\n.b-notification__icon-svg {\n  width: var(--b-notification-icon-size);\n  height: var(--b-notification-icon-size);\n  fill: currentColor;\n  display: block;\n}\n\n/* ── Body ── */\n.b-notification__body {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ── Title ── */\n.b-notification__message {\n  font-size: var(--b-notification-font-size-title);\n  font-weight: 600;\n  line-height: var(--b-notification-line-height);\n  color: var(--b-notification-title-color);\n  padding-right: 1.5rem; /* space for close button */\n}\n\n/* When no close button, remove the padding */\n.b-notification:not(:has(.b-notification__close)) .b-notification__message {\n  padding-right: 0;\n}\n\n/* ── Description ── */\n.b-notification__description {\n  margin-top: 0.375rem;\n  font-size: var(--b-notification-font-size-desc);\n  line-height: var(--b-notification-line-height);\n  color: var(--b-notification-desc-color);\n}\n\n/* ── Action button area ── */\n.b-notification__btn {\n  margin-top: 0.75rem;\n}\n\n/* ── Close button ── */\n.b-notification__close {\n  position: absolute;\n  top: 0.875rem;\n  right: 1rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.125rem;\n  background: transparent;\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  color: var(--b-notification-close-color);\n  line-height: 1;\n  transition: color var(--b-notification-transition-duration) ease;\n}\n\n.b-notification__close:hover {\n  color: var(--b-notification-close-hover-color);\n}\n\n.b-notification__close:focus-visible {\n  outline: 2px solid oklch(62.3% 0.214 259.815);\n  outline-offset: 2px;\n}\n\n.b-notification__close-svg {\n  width: var(--b-notification-close-size);\n  height: var(--b-notification-close-size);\n  fill: currentColor;\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Transition – slide-in + fade per placement\n   ───────────────────────────────────────────── */\n.b-notification-fade-enter-active,\n.b-notification-fade-leave-active {\n  transition:\n    opacity var(--b-notification-transition-duration, 300ms) ease,\n    transform var(--b-notification-transition-duration, 300ms) ease;\n}\n\n/* top-right / bottom-right - slide in from right */\n.b-notification--top-right.b-notification-fade-enter-from,\n.b-notification--bottom-right.b-notification-fade-enter-from {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n.b-notification--top-right.b-notification-fade-enter-to,\n.b-notification--bottom-right.b-notification-fade-enter-to,\n.b-notification--top-right.b-notification-fade-leave-from,\n.b-notification--bottom-right.b-notification-fade-leave-from {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.b-notification--top-right.b-notification-fade-leave-to,\n.b-notification--bottom-right.b-notification-fade-leave-to {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n/* top-left / bottom-left - slide in from left */\n.b-notification--top-left.b-notification-fade-enter-from,\n.b-notification--bottom-left.b-notification-fade-enter-from {\n  opacity: 0;\n  transform: translateX(-100%);\n}\n\n.b-notification--top-left.b-notification-fade-enter-to,\n.b-notification--bottom-left.b-notification-fade-enter-to,\n.b-notification--top-left.b-notification-fade-leave-from,\n.b-notification--bottom-left.b-notification-fade-leave-from {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.b-notification--top-left.b-notification-fade-leave-to,\n.b-notification--bottom-left.b-notification-fade-leave-to {\n  opacity: 0;\n  transform: translateX(-100%);\n}\n\n/* Respect prefers-reduced-motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-notification-fade-enter-active,\n  .b-notification-fade-leave-active {\n    transition: opacity var(--b-notification-transition-duration, 300ms) ease;\n  }\n\n  .b-notification--top-right.b-notification-fade-enter-from,\n  .b-notification--bottom-right.b-notification-fade-enter-from,\n  .b-notification--top-left.b-notification-fade-enter-from,\n  .b-notification--bottom-left.b-notification-fade-enter-from,\n  .b-notification--top-right.b-notification-fade-leave-to,\n  .b-notification--bottom-right.b-notification-fade-leave-to,\n  .b-notification--top-left.b-notification-fade-leave-to,\n  .b-notification--bottom-left.b-notification-fade-leave-to {\n    transform: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system147.js","names":[],"sources":["../src/components/BModal/BModalFooter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BButton } from '@/components';\n\nconst { cancelText = 'Cancel', okText = 'OK' } = defineProps<{\n  /**\n   * Text to display on the cancel button.\n   */\n  cancelText?: string;\n  /**\n   * If true, the cancel button will not be displayed.\n   */\n  hideCancel?: boolean;\n  /**\n   * If true, the cancel button will be disabled.\n   */\n  cancelDisabled?: boolean;\n  /**\n   * Text to display on the OK button.\n   */\n  okText?: string;\n  /**\n   * If true, the OK button will not be displayed.\n   */\n  hideOk?: boolean;\n  /**\n   * If true, the OK button will be disabled.\n   */\n  okDisabled?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the cancel button is clicked.\n   */\n  cancel: [];\n  /**\n   * Emitted when the OK button is clicked.\n   */\n  ok: [];\n}>();\n</script>\n\n<template>\n  <div class=\"b:mt-2 b:flex b:items-center b:bg-white\">\n    <slot name=\"left\">\n      <div class=\"b:flex-auto\"></div>\n    </slot>\n\n    <slot name=\"right\">\n      <div class=\"b:flex b:flex-initial b:gap-x-2\">\n        <BButton\n          v-if=\"!hideCancel\"\n          variant=\"outlined\"\n          color=\"secondary\"\n          autofocus\n          :disabled=\"cancelDisabled\"\n          @click=\"emit('cancel')\"\n        >\n          {{ cancelText }}\n        </BButton>\n        <BButton v-if=\"!hideOk\" :disabled=\"okDisabled\" @click=\"emit('ok')\">\n          {{ okText }}\n        </BButton>\n      </div>\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EA8BA,IAAM,IAAO;yBAaX,EAsBM,OAtBN,GAsBM,CArBJ,EAEO,EAAA,QAAA,QAAA,EAAA,QAAA,CAAA,AAAA,EAAA,OADL,EAA+B,OAAA,EAA1B,OAAM,eAAa,EAAA,MAAA,GAAA,CAAA,CAAA,EAG1B,EAgBO,EAAA,QAAA,SAAA,EAAA,QAAA,CAfL,EAcM,OAdN,GAcM,CAZK,EAAA,0BAAA,GAAA,EADT,EASU,EAAA,EAAA,EAAA;;GAPR,SAAQ;GACR,OAAM;GACN,WAAA;GACC,UAAU,EAAA;GACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,SAAA;;oBAEI,CAAA,EAAA,EAAb,EAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;wBAEC,EAAA,sBAAA,GAAA,EAAhB,EAEU,EAAA,EAAA,EAAA;;GAFe,UAAU,EAAA;GAAa,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,KAAA;;oBAC7C,CAAA,EAAA,EAAT,EAAA,OAAM,EAAA,EAAA,CAAA,CAAA"}