@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system163.js

@@ -1,6 +1,161 @@
-//#region src/components/BRadio/types.ts
-var e = Symbol("BRadioGroup");
+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
+		})]));
+	}
+});
 //#endregion
-export { e as B_RADIO_GROUP_KEY };
+export { N as default };
 
 //# sourceMappingURL=design-system163.js.map

package/dist/design-system163.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system163.js","names":[],"sources":["../src/components/BRadio/types.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue';\n\nexport interface BRadioOption {\n  /** Display label for the radio */\n  label: string;\n  /** Value associated with this radio */\n  value: string | number;\n  /** Whether this specific radio is disabled */\n  disabled?: boolean;\n}\n\nexport interface BRadioGroupContext {\n  modelValue: Ref<string | number | undefined>;\n  disabled: Ref<boolean>;\n  name: Ref<string>;\n  size: Ref<'large' | 'middle' | 'small'>;\n  optionType: Ref<'default' | 'button'>;\n  buttonStyle: Ref<'outline' | 'solid'>;\n  setValue: (val: string | number) => void;\n}\n\nexport const B_RADIO_GROUP_KEY: InjectionKey<BRadioGroupContext> = Symbol('BRadioGroup');\n"],"mappings":";AAqBA,IAAa,IAAsD,OAAO,cAAc"}
+{"version":3,"file":"design-system163.js","names":["$slots"],"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":"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"}

package/dist/{design-system153.js → design-system165.js}

@@ -1,8 +1,8 @@
-import e from "./design-system151.js";
+import e from "./design-system163.js";
 /* empty css                 */
 //#region src/components/BNotification/BNotification.vue
 var t = e;
 //#endregion
 export { t as default };
 
-//# sourceMappingURL=design-system153.js.map
+//# sourceMappingURL=design-system165.js.map

package/dist/{design-system153.js.map → design-system165.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system153.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-system165.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":""}