@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system95.js

@@ -1,69 +1,102 @@
-import { BFloatButtonShape as e, BFloatButtonType as t } from "./design-system91.js";
-import n from "./design-system94.js";
-import { Transition as r, createBlock as i, createCommentVNode as a, createElementVNode as o, defineComponent as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, unref as p, withCtx as m } from "vue";
-//#region src/components/BFloatButton/BFloatButtonBackTop.vue?vue&type=script&setup=true&lang.ts
-var h = /* @__PURE__ */ s({
-	__name: "BFloatButtonBackTop",
+import e from "./design-system27.js";
+import { BFloatButtonShape as t, BFloatButtonType as n } from "./design-system94.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, withCtx as _ } from "vue";
+//#region src/components/BFloatButton/BFloatButton.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "b-float-button__body" }, y = {
+	class: "b-float-button__icon",
+	"aria-hidden": "true"
+}, b = {
+	key: 1,
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, x = {
+	key: 0,
+	class: "b-float-button__description"
+}, S = {
+	key: 1,
+	class: "b-float-button__tooltip",
+	role: "tooltip"
+}, C = /* @__PURE__ */ u({
+	__name: "BFloatButton",
 	props: {
-		duration: { default: 450 },
-		target: { type: Function },
-		visibilityHeight: { default: 400 },
-		shape: { default: () => e.Circle },
-		type: { default: () => t.Default }
+		icon: {},
+		description: {},
+		tooltip: {},
+		type: { default: () => n.Default },
+		shape: { default: () => t.Circle },
+		href: {},
+		target: { default: "_blank" },
+		htmlType: { default: "button" },
+		badge: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: {}
 	},
 	emits: ["click"],
-	setup(e, { emit: t }) {
-		let s = t, h = d(!1), g = window;
-		function _() {
-			return g === window ? window.scrollY : g.scrollTop;
+	setup(t, { emit: n }) {
+		let u = n, C = (e) => t.type === e, w = (e) => t.shape === e, T = i(() => {
+			if (t.badge && !t.badge.dot) return t.badge.count;
+		}), E = i(() => t.badge?.dot ?? !1), D = i(() => t.badge?.overflowCount ?? 99), O = i(() => {
+			let e = T.value;
+			if (e !== void 0 && !(e === 0 && !t.badge?.showZero)) return e > D.value ? `${D.value}+` : String(e);
+		}), k = i(() => E.value || O.value !== void 0);
+		function A(e) {
+			t.disabled || u("click", e);
 		}
-		function v() {
-			h.value = _() > e.visibilityHeight;
-		}
-		function y(e) {
-			return e < .5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2;
-		}
-		function b() {
-			let t = performance.now(), n = _();
-			function r(i) {
-				let a = i - t, o = Math.min(a / e.duration, 1), s = n * (1 - y(o));
-				g === window ? window.scrollTo(0, s) : g.scrollTop = s, o < 1 && requestAnimationFrame(r);
-			}
-			requestAnimationFrame(r);
-		}
-		function x(e) {
-			b(), s("click", e);
-		}
-		l(() => {
-			g = e.target?.() ?? window, g.addEventListener("scroll", v, { passive: !0 }), v();
-		}), c(() => {
-			g.removeEventListener("scroll", v);
-		});
-		let S = h;
-		return (t, s) => (u(), i(r, { name: "b-float-button-backtop" }, {
-			default: m(() => [p(S) ? (u(), i(n, {
-				key: 0,
-				shape: e.shape,
-				type: e.type,
-				"aria-label": "Back to top",
-				class: "b-float-button-backtop",
-				onClick: x
-			}, {
-				icon: m(() => [f(t.$slots, "default", {}, () => [s[0] ||= o("svg", {
-					width: "1em",
-					height: "1em",
-					viewBox: "0 0 24 24",
-					fill: "currentColor",
-					"aria-hidden": "true",
-					focusable: "false"
-				}, [o("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })], -1)])]),
-				_: 3
-			}, 8, ["shape", "type"])) : a("", !0)]),
+		let j = i(() => t.href ? "a" : "button");
+		return (n, i) => (p(), a(h(j.value), {
+			href: t.href,
+			target: t.href ? t.target : void 0,
+			type: t.href ? void 0 : t.htmlType,
+			disabled: !t.href && t.disabled ? !0 : void 0,
+			"aria-disabled": t.href && t.disabled ? "true" : void 0,
+			"aria-label": t.ariaLabel ?? t.tooltip,
+			title: t.tooltip,
+			class: d(["b-float-button", {
+				"b-float-button--circle": w("circle"),
+				"b-float-button--square": w("square"),
+				"b-float-button--default": C("default"),
+				"b-float-button--primary": C("primary"),
+				"b-float-button--disabled": t.disabled
+			}]),
+			onClick: A
+		}, {
+			default: _(() => [
+				k.value ? (p(), s("span", {
+					key: 0,
+					class: d(["b-float-button__badge", {
+						"b-float-button__badge--dot": E.value,
+						"b-float-button__badge--count": !E.value
+					}]),
+					style: f(t.badge?.color ? { backgroundColor: t.badge.color } : void 0),
+					"aria-hidden": "true"
+				}, [E.value ? o("", !0) : (p(), s(r, { key: 0 }, [l(g(O.value), 1)], 64))], 6)) : o("", !0),
+				c("span", v, [c("span", y, [m(n.$slots, "icon", {}, () => [t.icon ? (p(), a(e, {
+					key: 0,
+					icon: t.icon,
+					size: "md"
+				}, null, 8, ["icon"])) : (p(), s("svg", b, [...i[0] ||= [c("path", { d: "M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" }, null, -1)]]))])]), (n.$slots.description || t.description) && w("square") ? (p(), s("span", x, [m(n.$slots, "description", {}, () => [l(g(t.description), 1)])])) : o("", !0)]),
+				n.$slots.tooltip || t.tooltip && !t.ariaLabel ? (p(), s("span", S, [m(n.$slots, "tooltip", {}, () => [l(g(t.tooltip), 1)])])) : o("", !0)
+			]),
 			_: 3
-		}));
+		}, 8, [
+			"href",
+			"target",
+			"type",
+			"disabled",
+			"aria-disabled",
+			"aria-label",
+			"title",
+			"class"
+		]));
 	}
 });
 //#endregion
-export { h as default };
+export { C as default };
 
 //# sourceMappingURL=design-system95.js.map

package/dist/design-system95.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system95.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonBackTop.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue';\nimport BFloatButton from './BFloatButton.vue';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  duration = 450,\n  target,\n  visibilityHeight = 400,\n  shape = BFloatButtonShape.Circle,\n  type = BFloatButtonType.Default,\n} = defineProps<{\n  /**\n   * Scroll animation duration in milliseconds.\n   * @default 450\n   */\n  duration?: number;\n  /**\n   * A function that returns the scrollable container.\n   * Defaults to `window`. May return `null` (e.g. if the element hasn't mounted yet).\n   */\n  target?: () => HTMLElement | Window | null;\n  /**\n   * The button becomes visible when the scroll position exceeds this value (px).\n   * @default 400\n   */\n  visibilityHeight?: number;\n  /**\n   * Shape of the back-top button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * Type of the back-top button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the back-top button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom content for the button. If omitted, renders an up-arrow icon. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Scroll logic\n// ─────────────────────────────────────────────\nconst visible = ref(false);\nlet scrollContainer: HTMLElement | Window = window;\n\nfunction getScrollTop(): number {\n  if (scrollContainer === window) return window.scrollY;\n  return (scrollContainer as HTMLElement).scrollTop;\n}\n\nfunction onScroll() {\n  visible.value = getScrollTop() > visibilityHeight;\n}\n\nfunction easeInOutCubic(t: number): number {\n  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nfunction scrollToTop() {\n  const startTime = performance.now();\n  const startTop = getScrollTop();\n\n  function step(now: number) {\n    const elapsed = now - startTime;\n    const progress = Math.min(elapsed / duration, 1);\n    const eased = easeInOutCubic(progress);\n    const newTop = startTop * (1 - eased);\n\n    if (scrollContainer === window) {\n      window.scrollTo(0, newTop);\n    } else {\n      (scrollContainer as HTMLElement).scrollTop = newTop;\n    }\n\n    if (progress < 1) {\n      requestAnimationFrame(step);\n    }\n  }\n\n  requestAnimationFrame(step);\n}\n\nfunction handleClick(event: MouseEvent) {\n  scrollToTop();\n  emit('click', event);\n}\n\nonMounted(() => {\n  scrollContainer = target?.() ?? window;\n  scrollContainer.addEventListener('scroll', onScroll, { passive: true });\n  onScroll();\n});\n\nonBeforeUnmount(() => {\n  scrollContainer.removeEventListener('scroll', onScroll);\n});\n\nconst isVisible = visible;\n</script>\n\n<template>\n  <Transition name=\"b-float-button-backtop\">\n    <BFloatButton\n      v-if=\"isVisible\"\n      :shape=\"shape\"\n      :type=\"type\"\n      aria-label=\"Back to top\"\n      class=\"b-float-button-backtop\"\n      @click=\"handleClick\"\n    >\n      <template #icon>\n        <slot>\n          <!-- Default: up arrow -->\n          <svg\n            width=\"1em\"\n            height=\"1em\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n          </svg>\n        </slot>\n      </template>\n    </BFloatButton>\n  </Transition>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BackTop enter/leave transitions\n   ───────────────────────────────────────────── */\n.b-float-button-backtop-enter-active,\n.b-float-button-backtop-leave-active {\n  transition:\n    opacity 300ms ease,\n    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.b-float-button-backtop-enter-from,\n.b-float-button-backtop-leave-to {\n  opacity: 0;\n  transform: scale(0.8);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button-backtop-enter-active,\n  .b-float-button-backtop-leave-active {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EA0CA,IAAM,IAAO,GAaP,IAAU,EAAI,GAAM,EACtB,IAAwC;EAE5C,SAAS,IAAuB;AAE9B,UADI,MAAoB,SAAe,OAAO,UACtC,EAAgC;;EAG1C,SAAS,IAAW;AAClB,KAAQ,QAAQ,GAAc,GAAG,EAAA;;EAGnC,SAAS,EAAe,GAAmB;AACzC,UAAO,IAAI,KAAM,IAAI,IAAI,IAAI,IAAI,KAAa,KAAK,IAAI,MAAG,IAAK;;EAGjE,SAAS,IAAc;GACrB,IAAM,IAAY,YAAY,KAAK,EAC7B,IAAW,GAAc;GAE/B,SAAS,EAAK,GAAa;IACzB,IAAM,IAAU,IAAM,GAChB,IAAW,KAAK,IAAI,IAAU,EAAA,UAAU,EAAE,EAE1C,IAAS,KAAY,IADb,EAAe,EAAS;AAStC,IANI,MAAoB,SACtB,OAAO,SAAS,GAAG,EAAO,GAEzB,EAAgC,YAAY,GAG3C,IAAW,KACb,sBAAsB,EAAK;;AAI/B,yBAAsB,EAAK;;EAG7B,SAAS,EAAY,GAAmB;AAEtC,GADA,GAAa,EACb,EAAK,SAAS,EAAM;;AAStB,EANA,QAAgB;AAGd,GAFA,IAAkB,EAAA,UAAU,IAAI,QAChC,EAAgB,iBAAiB,UAAU,GAAU,EAAE,SAAS,IAAM,CAAC,EACvE,GAAU;IACV,EAEF,QAAsB;AACpB,KAAgB,oBAAoB,UAAU,EAAS;IACvD;EAEF,IAAM,IAAY;yBAIhB,EAyBa,GAAA,EAzBD,MAAK,0BAAwB,EAAA;oBAwBxB,CAtBP,EAAA,EAAS,IAAA,GAAA,EADjB,EAuBe,GAAA;;IArBZ,OAAO,EAAA;IACP,MAAM,EAAA;IACP,cAAW;IACX,OAAM;IACL,SAAO;;IAEG,MAAI,QAaN,CAZP,EAYO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,AAAA,EAAA,OAVL,EASM,OAAA;KARJ,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,eAAY;KACZ,WAAU;QAEV,EAAwE,QAAA,EAAlE,GAAE,+DAA6D,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"design-system95.js","names":["$slots"],"sources":["../src/components/BFloatButton/BFloatButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { type BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { computed } from 'vue';\nimport type { BFloatButtonBadgeProps } from './types.ts';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  icon,\n  description,\n  tooltip,\n  type = BFloatButtonType.Default,\n  shape = BFloatButtonShape.Circle,\n  href,\n  target = '_blank',\n  htmlType = 'button',\n  badge,\n  disabled = false,\n  ariaLabel,\n} = defineProps<{\n  /**\n   * Icon name for the float button.\n   * @example 'arrow-up', 'plus', 'question'\n   */\n  icon?: `${BIconName}`;\n  /**\n   * Description text shown below the icon (square shape only).\n   */\n  description?: string;\n  /**\n   * Tooltip text shown on hover.\n   */\n  tooltip?: string;\n  /**\n   * Visual type of the button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n  /**\n   * Shape of the button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * When set, renders as an anchor element with this href.\n   */\n  href?: string;\n  /**\n   * Link target attribute (only used with href).\n   * @default '_blank'\n   */\n  target?: string;\n  /**\n   * HTML button type attribute (only used when not href).\n   * @default 'button'\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  /**\n   * Badge configuration to display on the button.\n   */\n  badge?: BFloatButtonBadgeProps;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Accessible label for the button (important when no visible text).\n   */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom icon content. */\n  icon?(): unknown;\n  /** Description content (square shape only). */\n  description?(): unknown;\n  /** Tooltip content. */\n  tooltip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed helpers\n// ─────────────────────────────────────────────\nconst isType = (value: `${BFloatButtonType}`) => type === value;\nconst isShape = (value: `${BFloatButtonShape}`) => shape === value;\n\nconst badgeCount = computed(() => {\n  if (!badge) return undefined;\n  if (badge.dot) return undefined;\n  return badge.count;\n});\n\nconst showBadgeDot = computed(() => badge?.dot ?? false);\n\nconst badgeOverflow = computed(() => badge?.overflowCount ?? 99);\n\nconst badgeDisplayCount = computed(() => {\n  const count = badgeCount.value;\n  if (count === undefined) return undefined;\n  if (count === 0 && !badge?.showZero) return undefined;\n  return count > badgeOverflow.value ? `${badgeOverflow.value}+` : String(count);\n});\n\nconst showBadge = computed(() => {\n  return showBadgeDot.value || badgeDisplayCount.value !== undefined;\n});\n\nfunction handleClick(event: MouseEvent) {\n  if (disabled) return;\n  emit('click', event);\n}\n\nconst rootTag = computed(() => (href ? 'a' : 'button'));\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    :href=\"href\"\n    :target=\"href ? target : undefined\"\n    :type=\"!href ? htmlType : undefined\"\n    :disabled=\"!href && disabled ? true : undefined\"\n    :aria-disabled=\"href && disabled ? 'true' : undefined\"\n    :aria-label=\"ariaLabel ?? tooltip\"\n    :title=\"tooltip\"\n    :class=\"[\n      'b-float-button',\n      {\n        'b-float-button--circle': isShape('circle'),\n        'b-float-button--square': isShape('square'),\n        'b-float-button--default': isType('default'),\n        'b-float-button--primary': isType('primary'),\n        'b-float-button--disabled': disabled,\n      },\n    ]\"\n    @click=\"handleClick\"\n  >\n    <!-- Badge -->\n    <span\n      v-if=\"showBadge\"\n      class=\"b-float-button__badge\"\n      :class=\"{\n        'b-float-button__badge--dot': showBadgeDot,\n        'b-float-button__badge--count': !showBadgeDot,\n      }\"\n      :style=\"badge?.color ? { backgroundColor: badge.color } : undefined\"\n      aria-hidden=\"true\"\n    >\n      <template v-if=\"!showBadgeDot\">{{ badgeDisplayCount }}</template>\n    </span>\n\n    <!-- Body -->\n    <span class=\"b-float-button__body\">\n      <!-- Icon -->\n      <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n        <slot name=\"icon\">\n          <BIcon v-if=\"icon\" :icon=\"icon\" size=\"md\" />\n          <!-- Default plus icon when no icon prop or slot is provided -->\n          <svg\n            v-else\n            width=\"1em\"\n            height=\"1em\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n          </svg>\n        </slot>\n      </span>\n\n      <!-- Description (square shape only) -->\n      <span\n        v-if=\"($slots.description || description) && isShape('square')\"\n        class=\"b-float-button__description\"\n      >\n        <slot name=\"description\">{{ description }}</slot>\n      </span>\n    </span>\n\n    <!-- Tooltip overlay -->\n    <span\n      v-if=\"$slots.tooltip || (tooltip && !ariaLabel)\"\n      class=\"b-float-button__tooltip\"\n      role=\"tooltip\"\n    >\n      <slot name=\"tooltip\">{{ tooltip }}</slot>\n    </span>\n  </component>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   scoped to .b-float-button — never on :root\n   ──────────────────────────────────────────── */\n.b-float-button {\n  /* Size tokens — AntD: floatButtonSize (40px) */\n  --b-float-button-size: 40px;\n  /* Icon size — AntD: floatButtonIconSize (21px) */\n  --b-float-button-icon-size: 1.3125rem;\n  /* Background — AntD: colorBgContainer */\n  --b-float-button-bg: #fff;\n  /* Primary background */\n  --b-float-button-primary-bg: oklch(55% 0.2 264);\n  /* Primary hover background */\n  --b-float-button-primary-bg-hover: oklch(62% 0.2 264);\n  /* Default hover background */\n  --b-float-button-bg-hover: oklch(96% 0 0);\n  /* Text / icon color — AntD: colorText */\n  --b-float-button-color: oklch(20% 0 0);\n  /* Primary text color */\n  --b-float-button-primary-color: #fff;\n  /* Border radius (circle: 50%, square: 8px) */\n  --b-float-button-border-radius-circle: 50%;\n  --b-float-button-border-radius-square: 0.5rem;\n  /* Shadow — AntD: boxShadowSecondary */\n  --b-float-button-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  /* Bottom inset — AntD: floatButtonInsetBlockEnd (48px) */\n  --b-float-button-inset-block-end: 3rem;\n  /* Inline inset — AntD: floatButtonInsetInlineEnd (24px) */\n  --b-float-button-inset-inline-end: 1.5rem;\n  /* z-index — AntD: zIndexPopupBase (1000) */\n  --b-float-button-z-index: 1000;\n  /* Transition */\n  --b-float-button-transition-duration: 200ms;\n  /* Description font size (sm) */\n  --b-float-button-description-font-size: 0.75rem;\n  /* Badge */\n  --b-float-button-badge-bg: oklch(57% 0.22 25);\n  --b-float-button-badge-color: #fff;\n  --b-float-button-badge-font-size: 0.6875rem;\n  /* Tooltip */\n  --b-float-button-tooltip-bg: oklch(20% 0.02 260);\n  --b-float-button-tooltip-color: oklch(96% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-float-button,\n[data-prefers-color='dark'].b-float-button {\n  --b-float-button-bg: oklch(20% 0.02 260);\n  --b-float-button-bg-hover: oklch(28% 0.02 260);\n  --b-float-button-color: oklch(88% 0.01 260);\n  --b-float-button-primary-bg: oklch(50% 0.2 264);\n  --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n  --b-float-button-shadow:\n    0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n    0 9px 28px 8px oklch(0% 0 0 / 25%);\n  --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n  --b-float-button-tooltip-color: oklch(88% 0.01 260);\n  --b-float-button-badge-bg: oklch(55% 0.22 25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'].b-float-button {\n    --b-float-button-bg: oklch(20% 0.02 260);\n    --b-float-button-bg-hover: oklch(28% 0.02 260);\n    --b-float-button-color: oklch(88% 0.01 260);\n    --b-float-button-primary-bg: oklch(50% 0.2 264);\n    --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n    --b-float-button-shadow:\n      0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n      0 9px 28px 8px oklch(0% 0 0 / 25%);\n    --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n    --b-float-button-tooltip-color: oklch(88% 0.01 260);\n    --b-float-button-badge-bg: oklch(55% 0.22 25);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base button\n   ───────────────────────────────────────────── */\n.b-float-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--b-float-button-size);\n  height: var(--b-float-button-size);\n  min-height: var(--b-float-button-size);\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  box-shadow: var(--b-float-button-shadow);\n  text-decoration: none;\n  transition:\n    background-color var(--b-float-button-transition-duration) ease,\n    color var(--b-float-button-transition-duration) ease,\n    box-shadow var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n  outline-offset: 2px;\n\n  /* Tooltip hidden by default */\n  &:hover .b-float-button__tooltip {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateX(-50%) scale(1);\n  }\n}\n\n/* ── Shape: circle ── */\n.b-float-button--circle {\n  border-radius: var(--b-float-button-border-radius-circle);\n}\n\n/* ── Shape: square ── */\n.b-float-button--square {\n  border-radius: var(--b-float-button-border-radius-square);\n  height: auto;\n  min-height: var(--b-float-button-size);\n  padding: 0.5rem;\n}\n\n/* ── Type: default ── */\n.b-float-button--default {\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-bg-hover);\n  }\n}\n\n/* ── Type: primary ── */\n.b-float-button--primary {\n  background-color: var(--b-float-button-primary-bg);\n  color: var(--b-float-button-primary-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-primary-bg-hover);\n  }\n}\n\n/* ── Disabled state ── */\n.b-float-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ── Focus visible ring ── */\n.b-float-button:focus-visible {\n  outline: 2px solid var(--b-float-button-primary-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Body (icon + description wrapper)\n   ───────────────────────────────────────────── */\n.b-float-button__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem;\n}\n\n/* ─────────────────────────────────────────────\n   Icon\n   ───────────────────────────────────────────── */\n.b-float-button__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--b-float-button-icon-size);\n  line-height: 1;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-float-button__description {\n  font-size: var(--b-float-button-description-font-size);\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip overlay\n   ───────────────────────────────────────────── */\n.b-float-button__tooltip {\n  position: absolute;\n  right: calc(100% + 0.75rem);\n  top: 50%;\n  transform: translateX(-50%) scale(0.95);\n  white-space: nowrap;\n  background: var(--b-float-button-tooltip-bg);\n  color: var(--b-float-button-tooltip-color);\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.375rem;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n\n  /* Arrow */\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 100%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n    border-left-color: var(--b-float-button-tooltip-bg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Badge\n   ───────────────────────────────────────────── */\n.b-float-button__badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n  background: var(--b-float-button-badge-bg);\n  color: var(--b-float-button-badge-color);\n  font-size: var(--b-float-button-badge-font-size);\n  line-height: 1;\n  border-radius: 10px;\n  padding: 2px 5px;\n  min-width: 1.25rem;\n  text-align: center;\n  box-shadow: 0 0 0 2px var(--b-float-button-bg);\n}\n\n.b-float-button__badge--dot {\n  width: 8px;\n  height: 8px;\n  min-width: 0;\n  padding: 0;\n  border-radius: 50%;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button,\n  .b-float-button__tooltip {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,IAAM,IAAO,GAiBP,KAAU,MAAiC,EAAA,SAAS,GACpD,KAAW,MAAkC,EAAA,UAAU,GAEvD,IAAa,QAAe;AAC3B,SAAA,SACD,GAAA,MAAM,IACV,QAAO,EAAA,MAAM;IACb,EAEI,IAAe,QAAe,EAAA,OAAO,OAAO,GAAM,EAElD,IAAgB,QAAe,EAAA,OAAO,iBAAiB,GAAG,EAE1D,IAAoB,QAAe;GACvC,IAAM,IAAQ,EAAW;AACrB,aAAU,KAAA,KACV,QAAU,KAAK,CAAC,EAAA,OAAO,UAC3B,QAAO,IAAQ,EAAc,QAAQ,GAAG,EAAc,MAAM,KAAK,OAAO,EAAM;IAC9E,EAEI,IAAY,QACT,EAAa,SAAS,EAAkB,UAAU,KAAA,EACzD;EAEF,SAAS,EAAY,GAAmB;AAClC,KAAA,YACJ,EAAK,SAAS,EAAM;;EAGtB,IAAM,IAAU,QAAgB,EAAA,OAAO,MAAM,SAAU;yBAIrD,EAwEY,EAvEL,EAAA,MAAO,EAAA;GACX,MAAM,EAAA;GACN,QAAQ,EAAA,OAAO,EAAA,SAAS,KAAA;GACxB,MAAO,EAAA,OAAkB,KAAA,IAAX,EAAA;GACd,UAAQ,CAAG,EAAA,QAAQ,EAAA,WAAQ,KAAU,KAAA;GACrC,iBAAe,EAAA,QAAQ,EAAA,WAAQ,SAAY,KAAA;GAC3C,cAAY,EAAA,aAAa,EAAA;GACzB,OAAO,EAAA;GACP,OAAK,EAAA,CAAA,kBAAA;8BAAsE,EAAO,SAAA;8BAA8C,EAAO,SAAA;+BAA+C,EAAM,UAAA;+BAAgD,EAAM,UAAA;gCAAiD,EAAA;;GAUnS,SAAO;;oBAcD;IAVC,EAAA,SAAA,GAAA,EADR,EAWO,QAAA;;KATL,OAAK,EAAA,CAAC,yBAAuB;oCACmB,EAAA;uCAAuD,EAAA;;KAItG,OAAK,EAAE,EAAA,OAAO,QAAK,EAAA,iBAAsB,EAAA,MAAM,OAAK,GAAK,KAAA,EAAS;KACnE,eAAY;QAEK,EAAA,QAAkC,EAAA,IAAA,GAAA,IAAlC,GAAA,EAAjB,EAAiE,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,EAAA,EAA/B,EAAA,MAAiB,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrD,EA0BO,QA1BP,GA0BO,CAxBL,EAeO,QAfP,GAeO,CAdL,EAaO,EAAA,QAAA,QAAA,EAAA,QAAA,CAZQ,EAAA,QAAA,GAAA,EAAb,EAA4C,GAAA;;KAAxB,MAAM,EAAA;KAAM,MAAK;mCAErC,EASM,OATN,GASM,CAAA,GAAA,AAAA,EAAA,OAAA,CADJ,EAAgD,QAAA,EAA1C,GAAE,uCAAqC,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,GAO1CA,EAAAA,OAAO,eAAe,EAAA,gBAAgB,EAAO,SAAA,IAAA,GAAA,EADtD,EAKO,QALP,GAKO,CADL,EAAiD,EAAA,QAAA,eAAA,EAAA,QAAA,CAAA,EAAA,EAArB,EAAA,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;IAMnCA,EAAAA,OAAO,WAAY,EAAA,WAAO,CAAK,EAAA,aAAA,GAAA,EADvC,EAMO,QANP,GAMO,CADL,EAAyC,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAjB,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/design-system97.js

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

package/dist/design-system97.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system97.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonBackTop.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue';\nimport BFloatButton from './BFloatButton.vue';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  duration = 450,\n  target,\n  visibilityHeight = 400,\n  shape = BFloatButtonShape.Circle,\n  type = BFloatButtonType.Default,\n} = defineProps<{\n  /**\n   * Scroll animation duration in milliseconds.\n   * @default 450\n   */\n  duration?: number;\n  /**\n   * A function that returns the scrollable container.\n   * Defaults to `window`. May return `null` (e.g. if the element hasn't mounted yet).\n   */\n  target?: () => HTMLElement | Window | null;\n  /**\n   * The button becomes visible when the scroll position exceeds this value (px).\n   * @default 400\n   */\n  visibilityHeight?: number;\n  /**\n   * Shape of the back-top button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * Type of the back-top button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the back-top button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom content for the button. If omitted, renders an up-arrow icon. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Scroll logic\n// ─────────────────────────────────────────────\nconst visible = ref(false);\nlet scrollContainer: HTMLElement | Window = window;\n\nfunction getScrollTop(): number {\n  if (scrollContainer === window) return window.scrollY;\n  return (scrollContainer as HTMLElement).scrollTop;\n}\n\nfunction onScroll() {\n  visible.value = getScrollTop() > visibilityHeight;\n}\n\nfunction easeInOutCubic(t: number): number {\n  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nfunction scrollToTop() {\n  const startTime = performance.now();\n  const startTop = getScrollTop();\n\n  function step(now: number) {\n    const elapsed = now - startTime;\n    const progress = Math.min(elapsed / duration, 1);\n    const eased = easeInOutCubic(progress);\n    const newTop = startTop * (1 - eased);\n\n    if (scrollContainer === window) {\n      window.scrollTo(0, newTop);\n    } else {\n      (scrollContainer as HTMLElement).scrollTop = newTop;\n    }\n\n    if (progress < 1) {\n      requestAnimationFrame(step);\n    }\n  }\n\n  requestAnimationFrame(step);\n}\n\nfunction handleClick(event: MouseEvent) {\n  scrollToTop();\n  emit('click', event);\n}\n\nonMounted(() => {\n  scrollContainer = target?.() ?? window;\n  scrollContainer.addEventListener('scroll', onScroll, { passive: true });\n  onScroll();\n});\n\nonBeforeUnmount(() => {\n  scrollContainer.removeEventListener('scroll', onScroll);\n});\n\nconst isVisible = visible;\n</script>\n\n<template>\n  <Transition name=\"b-float-button-backtop\">\n    <BFloatButton\n      v-if=\"isVisible\"\n      :shape=\"shape\"\n      :type=\"type\"\n      aria-label=\"Back to top\"\n      class=\"b-float-button-backtop\"\n      @click=\"handleClick\"\n    >\n      <template #icon>\n        <slot>\n          <!-- Default: up arrow -->\n          <svg\n            width=\"1em\"\n            height=\"1em\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n          </svg>\n        </slot>\n      </template>\n    </BFloatButton>\n  </Transition>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BackTop enter/leave transitions\n   ───────────────────────────────────────────── */\n.b-float-button-backtop-enter-active,\n.b-float-button-backtop-leave-active {\n  transition:\n    opacity 300ms ease,\n    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.b-float-button-backtop-enter-from,\n.b-float-button-backtop-leave-to {\n  opacity: 0;\n  transform: scale(0.8);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button-backtop-enter-active,\n  .b-float-button-backtop-leave-active {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system97.js","names":[],"sources":["../src/components/BFloatButton/BFloatButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { type BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { computed } from 'vue';\nimport type { BFloatButtonBadgeProps } from './types.ts';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  icon,\n  description,\n  tooltip,\n  type = BFloatButtonType.Default,\n  shape = BFloatButtonShape.Circle,\n  href,\n  target = '_blank',\n  htmlType = 'button',\n  badge,\n  disabled = false,\n  ariaLabel,\n} = defineProps<{\n  /**\n   * Icon name for the float button.\n   * @example 'arrow-up', 'plus', 'question'\n   */\n  icon?: `${BIconName}`;\n  /**\n   * Description text shown below the icon (square shape only).\n   */\n  description?: string;\n  /**\n   * Tooltip text shown on hover.\n   */\n  tooltip?: string;\n  /**\n   * Visual type of the button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n  /**\n   * Shape of the button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * When set, renders as an anchor element with this href.\n   */\n  href?: string;\n  /**\n   * Link target attribute (only used with href).\n   * @default '_blank'\n   */\n  target?: string;\n  /**\n   * HTML button type attribute (only used when not href).\n   * @default 'button'\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  /**\n   * Badge configuration to display on the button.\n   */\n  badge?: BFloatButtonBadgeProps;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Accessible label for the button (important when no visible text).\n   */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom icon content. */\n  icon?(): unknown;\n  /** Description content (square shape only). */\n  description?(): unknown;\n  /** Tooltip content. */\n  tooltip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed helpers\n// ─────────────────────────────────────────────\nconst isType = (value: `${BFloatButtonType}`) => type === value;\nconst isShape = (value: `${BFloatButtonShape}`) => shape === value;\n\nconst badgeCount = computed(() => {\n  if (!badge) return undefined;\n  if (badge.dot) return undefined;\n  return badge.count;\n});\n\nconst showBadgeDot = computed(() => badge?.dot ?? false);\n\nconst badgeOverflow = computed(() => badge?.overflowCount ?? 99);\n\nconst badgeDisplayCount = computed(() => {\n  const count = badgeCount.value;\n  if (count === undefined) return undefined;\n  if (count === 0 && !badge?.showZero) return undefined;\n  return count > badgeOverflow.value ? `${badgeOverflow.value}+` : String(count);\n});\n\nconst showBadge = computed(() => {\n  return showBadgeDot.value || badgeDisplayCount.value !== undefined;\n});\n\nfunction handleClick(event: MouseEvent) {\n  if (disabled) return;\n  emit('click', event);\n}\n\nconst rootTag = computed(() => (href ? 'a' : 'button'));\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    :href=\"href\"\n    :target=\"href ? target : undefined\"\n    :type=\"!href ? htmlType : undefined\"\n    :disabled=\"!href && disabled ? true : undefined\"\n    :aria-disabled=\"href && disabled ? 'true' : undefined\"\n    :aria-label=\"ariaLabel ?? tooltip\"\n    :title=\"tooltip\"\n    :class=\"[\n      'b-float-button',\n      {\n        'b-float-button--circle': isShape('circle'),\n        'b-float-button--square': isShape('square'),\n        'b-float-button--default': isType('default'),\n        'b-float-button--primary': isType('primary'),\n        'b-float-button--disabled': disabled,\n      },\n    ]\"\n    @click=\"handleClick\"\n  >\n    <!-- Badge -->\n    <span\n      v-if=\"showBadge\"\n      class=\"b-float-button__badge\"\n      :class=\"{\n        'b-float-button__badge--dot': showBadgeDot,\n        'b-float-button__badge--count': !showBadgeDot,\n      }\"\n      :style=\"badge?.color ? { backgroundColor: badge.color } : undefined\"\n      aria-hidden=\"true\"\n    >\n      <template v-if=\"!showBadgeDot\">{{ badgeDisplayCount }}</template>\n    </span>\n\n    <!-- Body -->\n    <span class=\"b-float-button__body\">\n      <!-- Icon -->\n      <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n        <slot name=\"icon\">\n          <BIcon v-if=\"icon\" :icon=\"icon\" size=\"md\" />\n          <!-- Default plus icon when no icon prop or slot is provided -->\n          <svg\n            v-else\n            width=\"1em\"\n            height=\"1em\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n          </svg>\n        </slot>\n      </span>\n\n      <!-- Description (square shape only) -->\n      <span\n        v-if=\"($slots.description || description) && isShape('square')\"\n        class=\"b-float-button__description\"\n      >\n        <slot name=\"description\">{{ description }}</slot>\n      </span>\n    </span>\n\n    <!-- Tooltip overlay -->\n    <span\n      v-if=\"$slots.tooltip || (tooltip && !ariaLabel)\"\n      class=\"b-float-button__tooltip\"\n      role=\"tooltip\"\n    >\n      <slot name=\"tooltip\">{{ tooltip }}</slot>\n    </span>\n  </component>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   scoped to .b-float-button — never on :root\n   ──────────────────────────────────────────── */\n.b-float-button {\n  /* Size tokens — AntD: floatButtonSize (40px) */\n  --b-float-button-size: 40px;\n  /* Icon size — AntD: floatButtonIconSize (21px) */\n  --b-float-button-icon-size: 1.3125rem;\n  /* Background — AntD: colorBgContainer */\n  --b-float-button-bg: #fff;\n  /* Primary background */\n  --b-float-button-primary-bg: oklch(55% 0.2 264);\n  /* Primary hover background */\n  --b-float-button-primary-bg-hover: oklch(62% 0.2 264);\n  /* Default hover background */\n  --b-float-button-bg-hover: oklch(96% 0 0);\n  /* Text / icon color — AntD: colorText */\n  --b-float-button-color: oklch(20% 0 0);\n  /* Primary text color */\n  --b-float-button-primary-color: #fff;\n  /* Border radius (circle: 50%, square: 8px) */\n  --b-float-button-border-radius-circle: 50%;\n  --b-float-button-border-radius-square: 0.5rem;\n  /* Shadow — AntD: boxShadowSecondary */\n  --b-float-button-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  /* Bottom inset — AntD: floatButtonInsetBlockEnd (48px) */\n  --b-float-button-inset-block-end: 3rem;\n  /* Inline inset — AntD: floatButtonInsetInlineEnd (24px) */\n  --b-float-button-inset-inline-end: 1.5rem;\n  /* z-index — AntD: zIndexPopupBase (1000) */\n  --b-float-button-z-index: 1000;\n  /* Transition */\n  --b-float-button-transition-duration: 200ms;\n  /* Description font size (sm) */\n  --b-float-button-description-font-size: 0.75rem;\n  /* Badge */\n  --b-float-button-badge-bg: oklch(57% 0.22 25);\n  --b-float-button-badge-color: #fff;\n  --b-float-button-badge-font-size: 0.6875rem;\n  /* Tooltip */\n  --b-float-button-tooltip-bg: oklch(20% 0.02 260);\n  --b-float-button-tooltip-color: oklch(96% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-float-button,\n[data-prefers-color='dark'].b-float-button {\n  --b-float-button-bg: oklch(20% 0.02 260);\n  --b-float-button-bg-hover: oklch(28% 0.02 260);\n  --b-float-button-color: oklch(88% 0.01 260);\n  --b-float-button-primary-bg: oklch(50% 0.2 264);\n  --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n  --b-float-button-shadow:\n    0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n    0 9px 28px 8px oklch(0% 0 0 / 25%);\n  --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n  --b-float-button-tooltip-color: oklch(88% 0.01 260);\n  --b-float-button-badge-bg: oklch(55% 0.22 25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'].b-float-button {\n    --b-float-button-bg: oklch(20% 0.02 260);\n    --b-float-button-bg-hover: oklch(28% 0.02 260);\n    --b-float-button-color: oklch(88% 0.01 260);\n    --b-float-button-primary-bg: oklch(50% 0.2 264);\n    --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n    --b-float-button-shadow:\n      0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n      0 9px 28px 8px oklch(0% 0 0 / 25%);\n    --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n    --b-float-button-tooltip-color: oklch(88% 0.01 260);\n    --b-float-button-badge-bg: oklch(55% 0.22 25);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base button\n   ───────────────────────────────────────────── */\n.b-float-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--b-float-button-size);\n  height: var(--b-float-button-size);\n  min-height: var(--b-float-button-size);\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  box-shadow: var(--b-float-button-shadow);\n  text-decoration: none;\n  transition:\n    background-color var(--b-float-button-transition-duration) ease,\n    color var(--b-float-button-transition-duration) ease,\n    box-shadow var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n  outline-offset: 2px;\n\n  /* Tooltip hidden by default */\n  &:hover .b-float-button__tooltip {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateX(-50%) scale(1);\n  }\n}\n\n/* ── Shape: circle ── */\n.b-float-button--circle {\n  border-radius: var(--b-float-button-border-radius-circle);\n}\n\n/* ── Shape: square ── */\n.b-float-button--square {\n  border-radius: var(--b-float-button-border-radius-square);\n  height: auto;\n  min-height: var(--b-float-button-size);\n  padding: 0.5rem;\n}\n\n/* ── Type: default ── */\n.b-float-button--default {\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-bg-hover);\n  }\n}\n\n/* ── Type: primary ── */\n.b-float-button--primary {\n  background-color: var(--b-float-button-primary-bg);\n  color: var(--b-float-button-primary-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-primary-bg-hover);\n  }\n}\n\n/* ── Disabled state ── */\n.b-float-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ── Focus visible ring ── */\n.b-float-button:focus-visible {\n  outline: 2px solid var(--b-float-button-primary-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Body (icon + description wrapper)\n   ───────────────────────────────────────────── */\n.b-float-button__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem;\n}\n\n/* ─────────────────────────────────────────────\n   Icon\n   ───────────────────────────────────────────── */\n.b-float-button__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--b-float-button-icon-size);\n  line-height: 1;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-float-button__description {\n  font-size: var(--b-float-button-description-font-size);\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip overlay\n   ───────────────────────────────────────────── */\n.b-float-button__tooltip {\n  position: absolute;\n  right: calc(100% + 0.75rem);\n  top: 50%;\n  transform: translateX(-50%) scale(0.95);\n  white-space: nowrap;\n  background: var(--b-float-button-tooltip-bg);\n  color: var(--b-float-button-tooltip-color);\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.375rem;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n\n  /* Arrow */\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 100%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n    border-left-color: var(--b-float-button-tooltip-bg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Badge\n   ───────────────────────────────────────────── */\n.b-float-button__badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n  background: var(--b-float-button-badge-bg);\n  color: var(--b-float-button-badge-color);\n  font-size: var(--b-float-button-badge-font-size);\n  line-height: 1;\n  border-radius: 10px;\n  padding: 2px 5px;\n  min-width: 1.25rem;\n  text-align: center;\n  box-shadow: 0 0 0 2px var(--b-float-button-bg);\n}\n\n.b-float-button__badge--dot {\n  width: 8px;\n  height: 8px;\n  min-width: 0;\n  padding: 0;\n  border-radius: 50%;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button,\n  .b-float-button__tooltip {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system98.js

@@ -1,91 +1,69 @@
-import { BFloatButtonGroupPlacement as e, BFloatButtonShape as t, BFloatButtonTrigger as n } from "./design-system91.js";
-import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, provide as d, ref as f, renderSlot as p, watch as m } from "vue";
-//#region src/components/BFloatButton/BFloatButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var h = ["role", "aria-label"], g = ["aria-hidden", "inert"], _ = ["aria-expanded", "aria-label"], v = { class: "b-float-button__body" }, y = {
-	class: "b-float-button__icon",
-	"aria-hidden": "true"
-}, b = /* @__PURE__ */ s({
-	__name: "BFloatButtonGroup",
+import { BFloatButtonShape as e, BFloatButtonType as t } from "./design-system94.js";
+import n from "./design-system97.js";
+import { Transition as r, createBlock as i, createCommentVNode as a, createElementVNode as o, defineComponent as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, unref as p, withCtx as m } from "vue";
+//#region src/components/BFloatButton/BFloatButtonBackTop.vue?vue&type=script&setup=true&lang.ts
+var h = /* @__PURE__ */ s({
+	__name: "BFloatButtonBackTop",
 	props: {
-		open: { type: [Boolean, null] },
-		trigger: {},
-		placement: {},
-		shape: {},
-		closeIcon: {}
+		duration: { default: 450 },
+		target: { type: Function },
+		visibilityHeight: { default: 400 },
+		shape: { default: () => e.Circle },
+		type: { default: () => t.Default }
 	},
-	emits: ["openChange", "update:open"],
-	setup(s, { emit: b }) {
-		let x = s, S = b, C = f(!1);
-		m(() => x.open, (e) => {
-			e === !0 ? C.value = !0 : e === !1 && (C.value = !1);
-		}, { immediate: !0 });
-		function w(e) {
-			C.value = e, S("update:open", e), S("openChange", e);
+	emits: ["click"],
+	setup(e, { emit: t }) {
+		let s = t, h = d(!1), g = window;
+		function _() {
+			return g === window ? window.scrollY : g.scrollTop;
 		}
-		function T() {
-			w(!C.value);
+		function v() {
+			h.value = _() > e.visibilityHeight;
 		}
-		function E() {
-			w(!0);
+		function y(e) {
+			return e < .5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2;
 		}
-		function D() {
-			w(!1);
+		function b() {
+			let t = performance.now(), n = _();
+			function r(i) {
+				let a = i - t, o = Math.min(a / e.duration, 1), s = n * (1 - y(o));
+				g === window ? window.scrollTo(0, s) : g.scrollTop = s, o < 1 && requestAnimationFrame(r);
+			}
+			requestAnimationFrame(r);
 		}
-		let O = null;
-		function k() {
-			x.trigger === n.Hover && (O &&= (clearTimeout(O), null), E());
-		}
-		function A() {
-			x.trigger === n.Hover && (O = setTimeout(() => D(), 100));
+		function x(e) {
+			b(), s("click", e);
 		}
 		l(() => {
-			O && clearTimeout(O);
-		}), d("bFloatButtonGroupShape", r(() => x.shape ?? t.Circle));
-		let j = r(() => x.trigger !== void 0), M = r(() => `b-float-button-group--${x.placement ?? e.Top}`), N = r(() => `b-float-button-group--shape-${x.shape ?? t.Circle}`);
-		return (e, t) => (u(), a("div", {
-			class: c(["b-float-button-group", [
-				M.value,
-				N.value,
-				{
-					"b-float-button-group--menu": j.value,
-					"b-float-button-group--open": j.value && C.value
-				}
-			]]),
-			role: j.value ? void 0 : "group",
-			"aria-label": j.value ? void 0 : "Float button group",
-			onMouseenter: k,
-			onMouseleave: A
-		}, [o("div", {
-			class: "b-float-button-group__list",
-			"aria-hidden": j.value ? !C.value : void 0,
-			inert: j.value && !C.value ? !0 : void 0
-		}, [p(e.$slots, "default")], 8, g), j.value ? (u(), a("button", {
-			key: 0,
-			type: "button",
-			class: c(["b-float-button-group__trigger", [
-				"b-float-button",
-				`b-float-button--${x.shape ?? "circle"}`,
-				"b-float-button--primary"
-			]]),
-			"aria-expanded": C.value,
-			"aria-label": C.value ? "Collapse button group" : "Expand button group",
-			onClick: T
-		}, [o("span", v, [o("span", y, [C.value ? p(e.$slots, "closeIcon", { key: 0 }, () => [t[0] ||= o("svg", {
-			width: "1em",
-			height: "1em",
-			viewBox: "0 0 24 24",
-			fill: "currentColor",
-			"aria-hidden": "true"
-		}, [o("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })], -1)]) : p(e.$slots, "icon", { key: 1 }, () => [t[1] ||= o("svg", {
-			width: "1em",
-			height: "1em",
-			viewBox: "0 0 24 24",
-			fill: "currentColor",
-			"aria-hidden": "true"
-		}, [o("path", { d: "M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" })], -1)])])])], 10, _)) : i("", !0)], 42, h));
+			g = e.target?.() ?? window, g.addEventListener("scroll", v, { passive: !0 }), v();
+		}), c(() => {
+			g.removeEventListener("scroll", v);
+		});
+		let S = h;
+		return (t, s) => (u(), i(r, { name: "b-float-button-backtop" }, {
+			default: m(() => [p(S) ? (u(), i(n, {
+				key: 0,
+				shape: e.shape,
+				type: e.type,
+				"aria-label": "Back to top",
+				class: "b-float-button-backtop",
+				onClick: x
+			}, {
+				icon: m(() => [f(t.$slots, "default", {}, () => [s[0] ||= o("svg", {
+					width: "1em",
+					height: "1em",
+					viewBox: "0 0 24 24",
+					fill: "currentColor",
+					"aria-hidden": "true",
+					focusable: "false"
+				}, [o("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })], -1)])]),
+				_: 3
+			}, 8, ["shape", "type"])) : a("", !0)]),
+			_: 3
+		}));
 	}
 });
 //#endregion
-export { b as default };
+export { h as default };
 
 //# sourceMappingURL=design-system98.js.map

package/dist/design-system98.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system98.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, ref, watch } from 'vue';\nimport { BFloatButtonGroupPlacement, BFloatButtonShape, BFloatButtonTrigger } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /**\n   * Controlled open state. Use with `v-model:open` for two-way binding.\n   * When this prop changes, the internal state syncs to it.\n   */\n  open?: boolean | null;\n  /**\n   * The trigger mode for expanding/collapsing the group menu.\n   * When set, a trigger button is shown that reveals child buttons.\n   */\n  trigger?: `${BFloatButtonTrigger}`;\n  /**\n   * Animation direction when expanding/collapsing.\n   * @default 'top'\n   */\n  placement?: `${BFloatButtonGroupPlacement}`;\n  /**\n   * Shape applied to all child float buttons.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * Icon name for the close/collapse trigger button.\n   */\n  closeIcon?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the group open state changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:open', open: boolean): void;\n}>();\n\ndefineSlots<{\n  /** Float button children. */\n  default?(): unknown;\n  /** Custom trigger icon (open state). */\n  icon?(): unknown;\n  /** Custom close icon (close state). */\n  closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state — always the rendering source of truth\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\n\n// Sync from controlled prop → internal state when explicitly changed\nwatch(\n  () => props.open,\n  (val) => {\n    if (val === true) internalOpen.value = true;\n    else if (val === false) internalOpen.value = false;\n    // null/undefined means \"uncontrolled\" — do not override internal state\n  },\n  { immediate: true },\n);\n\nfunction setOpen(val: boolean) {\n  internalOpen.value = val;\n  emit('update:open', val);\n  emit('openChange', val);\n}\n\nfunction toggle() {\n  setOpen(!internalOpen.value);\n}\n\nfunction openGroup() {\n  setOpen(true);\n}\n\nfunction closeGroup() {\n  setOpen(false);\n}\n\n// ─────────────────────────────────────────────\n// Hover trigger\n// ─────────────────────────────────────────────\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction onMouseEnter() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n  openGroup();\n}\n\nfunction onMouseLeave() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  hideTimer = setTimeout(() => closeGroup(), 100);\n}\n\nonBeforeUnmount(() => {\n  if (hideTimer) clearTimeout(hideTimer);\n});\n\n// ─────────────────────────────────────────────\n// Provide shape to children\n// ─────────────────────────────────────────────\nprovide(\n  'bFloatButtonGroupShape',\n  computed(() => props.shape ?? BFloatButtonShape.Circle),\n);\n\nconst isGroup = computed(() => props.trigger !== undefined);\nconst placementClass = computed(\n  () => `b-float-button-group--${props.placement ?? BFloatButtonGroupPlacement.Top}`,\n);\nconst shapeClass = computed(\n  () => `b-float-button-group--shape-${props.shape ?? BFloatButtonShape.Circle}`,\n);\n</script>\n\n<template>\n  <div\n    class=\"b-float-button-group\"\n    :class=\"[\n      placementClass,\n      shapeClass,\n      {\n        'b-float-button-group--menu': isGroup,\n        'b-float-button-group--open': isGroup && internalOpen,\n      },\n    ]\"\n    :role=\"!isGroup ? 'group' : undefined\"\n    :aria-label=\"!isGroup ? 'Float button group' : undefined\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Child buttons list (always rendered; hidden when group is collapsed) -->\n    <div\n      class=\"b-float-button-group__list\"\n      :aria-hidden=\"isGroup ? !internalOpen : undefined\"\n      :inert=\"isGroup && !internalOpen ? true : undefined\"\n    >\n      <slot />\n    </div>\n\n    <!-- Trigger button (only rendered when trigger is set) -->\n    <button\n      v-if=\"isGroup\"\n      type=\"button\"\n      class=\"b-float-button-group__trigger\"\n      :class=\"[\n        'b-float-button',\n        `b-float-button--${props.shape ?? 'circle'}`,\n        'b-float-button--primary',\n      ]\"\n      :aria-expanded=\"internalOpen\"\n      :aria-label=\"internalOpen ? 'Collapse button group' : 'Expand button group'\"\n      @click=\"toggle\"\n    >\n      <span class=\"b-float-button__body\">\n        <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n          <template v-if=\"internalOpen\">\n            <slot name=\"closeIcon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                />\n              </svg>\n            </slot>\n          </template>\n          <template v-else>\n            <slot name=\"icon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n              </svg>\n            </slot>\n          </template>\n        </span>\n      </span>\n    </button>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   Group container\n   ───────────────────────────────────────────── */\n.b-float-button-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  position: relative;\n}\n\n.b-float-button-group--menu {\n  position: relative;\n}\n\n/* ─────────────────────────────────────────────\n   Items list (collapsible)\n   ───────────────────────────────────────────── */\n.b-float-button-group__list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  list-style: none;\n  padding: 0;\n  margin: 0 0 0.75rem 0;\n\n  /* Collapsed: hidden */\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 250ms ease;\n}\n\n.b-float-button-group--open .b-float-button-group__list {\n  max-height: 60vh;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ── Placement variants for list direction ──\n   DOM order is always [list, trigger]. For `bottom`/`right` we reverse\n   the container so the trigger comes before the list visually. */\n.b-float-button-group--top .b-float-button-group__list {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom .b-float-button-group__list {\n  flex-direction: column;\n  margin: 0.75rem 0 0 0;\n}\n\n.b-float-button-group--left .b-float-button-group__list {\n  flex-direction: row-reverse;\n  margin: 0 0.75rem 0 0;\n}\n\n.b-float-button-group--right .b-float-button-group__list {\n  flex-direction: row;\n  margin: 0 0 0 0.75rem;\n}\n\n/* ── Horizontal layout for left/right placements ── */\n.b-float-button-group--left {\n  flex-direction: row;\n  align-items: center;\n}\n\n.b-float-button-group--right {\n  flex-direction: row-reverse;\n  align-items: center;\n}\n\n/* ── Trigger button ── */\n.b-float-button-group__trigger {\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button-group__list {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GA2BR,IAAO,GAmBP,IAAe,EAAI,GAAM;AAG/B,UACQ,EAAM,OACX,MAAQ;AACP,GAAI,MAAQ,KAAM,EAAa,QAAQ,KAC9B,MAAQ,OAAO,EAAa,QAAQ;KAG/C,EAAE,WAAW,IAAM,CACpB;EAED,SAAS,EAAQ,GAAc;AAG7B,GAFA,EAAa,QAAQ,GACrB,EAAK,eAAe,EAAI,EACxB,EAAK,cAAc,EAAI;;EAGzB,SAAS,IAAS;AAChB,KAAQ,CAAC,EAAa,MAAM;;EAG9B,SAAS,IAAY;AACnB,KAAQ,GAAK;;EAGf,SAAS,IAAa;AACpB,KAAQ,GAAM;;EAMhB,IAAI,IAAkD;EAEtD,SAAS,IAAe;AAClB,KAAM,YAAY,EAAoB,UAC1C,AAEE,OADA,aAAa,EAAU,EACX,OAEd,GAAW;;EAGb,SAAS,IAAe;AAClB,KAAM,YAAY,EAAoB,UAC1C,IAAY,iBAAiB,GAAY,EAAE,IAAI;;AAUjD,EAPA,QAAsB;AACpB,GAAI,KAAW,aAAa,EAAU;IACtC,EAKF,EACE,0BACA,QAAe,EAAM,SAAS,EAAkB,OAAO,CACxD;EAED,IAAM,IAAU,QAAe,EAAM,YAAY,KAAA,EAAU,EACrD,IAAiB,QACf,yBAAyB,EAAM,aAAa,EAA2B,MAC9E,EACK,IAAa,QACX,+BAA+B,EAAM,SAAS,EAAkB,SACvE;yBAIC,EAuEM,OAAA;GAtEJ,OAAK,EAAA,CAAC,wBAAsB;IACZ,EAAA;IAAsB,EAAA;;mCAA0D,EAAA;mCAA+C,EAAA,SAAW,EAAA;;;GAQzJ,MAAO,EAAA,QAAoB,KAAA,IAAb;GACd,cAAa,EAAA,QAAiC,KAAA,IAA1B;GACpB,cAAY;GACZ,cAAY;MAGb,EAMM,OAAA;GALJ,OAAM;GACL,eAAa,EAAA,QAAO,CAAI,EAAA,QAAe,KAAA;GACvC,OAAO,EAAA,SAAO,CAAK,EAAA,QAAY,KAAU,KAAA;MAE1C,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA,EAAA,EAKF,EAAA,SAAA,GAAA,EADR,EA6CS,UAAA;;GA3CP,MAAK;GACL,OAAK,EAAA,CAAC,iCAA+B;;uBAC0B,EAAM,SAAK;;;GAKzE,iBAAe,EAAA;GACf,cAAY,EAAA,QAAY,0BAAA;GACxB,SAAO;MAER,EA+BO,QA/BP,GA+BO,CA9BL,EA6BO,QA7BP,GA6BO,CA5BW,EAAA,QACd,EAYO,EAAA,QAAA,aAAA,EAAA,KAAA,GAAA,QAAA,CAAA,AAAA,EAAA,OAXL,EAUM,OAAA;GATJ,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAY;MAEZ,EAEE,QAAA,EADA,GAAE,yGAAuG,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,GAM/G,EAUO,EAAA,QAAA,QAAA,EAAA,KAAA,GAAA,QAAA,CAAA,AAAA,EAAA,OATL,EAQM,OAAA;GAPJ,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAY;MAEZ,EAAgD,QAAA,EAA1C,GAAE,uCAAqC,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"design-system98.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonBackTop.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue';\nimport BFloatButton from './BFloatButton.vue';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  duration = 450,\n  target,\n  visibilityHeight = 400,\n  shape = BFloatButtonShape.Circle,\n  type = BFloatButtonType.Default,\n} = defineProps<{\n  /**\n   * Scroll animation duration in milliseconds.\n   * @default 450\n   */\n  duration?: number;\n  /**\n   * A function that returns the scrollable container.\n   * Defaults to `window`. May return `null` (e.g. if the element hasn't mounted yet).\n   */\n  target?: () => HTMLElement | Window | null;\n  /**\n   * The button becomes visible when the scroll position exceeds this value (px).\n   * @default 400\n   */\n  visibilityHeight?: number;\n  /**\n   * Shape of the back-top button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * Type of the back-top button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the back-top button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom content for the button. If omitted, renders an up-arrow icon. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Scroll logic\n// ─────────────────────────────────────────────\nconst visible = ref(false);\nlet scrollContainer: HTMLElement | Window = window;\n\nfunction getScrollTop(): number {\n  if (scrollContainer === window) return window.scrollY;\n  return (scrollContainer as HTMLElement).scrollTop;\n}\n\nfunction onScroll() {\n  visible.value = getScrollTop() > visibilityHeight;\n}\n\nfunction easeInOutCubic(t: number): number {\n  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nfunction scrollToTop() {\n  const startTime = performance.now();\n  const startTop = getScrollTop();\n\n  function step(now: number) {\n    const elapsed = now - startTime;\n    const progress = Math.min(elapsed / duration, 1);\n    const eased = easeInOutCubic(progress);\n    const newTop = startTop * (1 - eased);\n\n    if (scrollContainer === window) {\n      window.scrollTo(0, newTop);\n    } else {\n      (scrollContainer as HTMLElement).scrollTop = newTop;\n    }\n\n    if (progress < 1) {\n      requestAnimationFrame(step);\n    }\n  }\n\n  requestAnimationFrame(step);\n}\n\nfunction handleClick(event: MouseEvent) {\n  scrollToTop();\n  emit('click', event);\n}\n\nonMounted(() => {\n  scrollContainer = target?.() ?? window;\n  scrollContainer.addEventListener('scroll', onScroll, { passive: true });\n  onScroll();\n});\n\nonBeforeUnmount(() => {\n  scrollContainer.removeEventListener('scroll', onScroll);\n});\n\nconst isVisible = visible;\n</script>\n\n<template>\n  <Transition name=\"b-float-button-backtop\">\n    <BFloatButton\n      v-if=\"isVisible\"\n      :shape=\"shape\"\n      :type=\"type\"\n      aria-label=\"Back to top\"\n      class=\"b-float-button-backtop\"\n      @click=\"handleClick\"\n    >\n      <template #icon>\n        <slot>\n          <!-- Default: up arrow -->\n          <svg\n            width=\"1em\"\n            height=\"1em\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n          </svg>\n        </slot>\n      </template>\n    </BFloatButton>\n  </Transition>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BackTop enter/leave transitions\n   ───────────────────────────────────────────── */\n.b-float-button-backtop-enter-active,\n.b-float-button-backtop-leave-active {\n  transition:\n    opacity 300ms ease,\n    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.b-float-button-backtop-enter-from,\n.b-float-button-backtop-leave-to {\n  opacity: 0;\n  transform: scale(0.8);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button-backtop-enter-active,\n  .b-float-button-backtop-leave-active {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EA0CA,IAAM,IAAO,GAaP,IAAU,EAAI,GAAM,EACtB,IAAwC;EAE5C,SAAS,IAAuB;AAE9B,UADI,MAAoB,SAAe,OAAO,UACtC,EAAgC;;EAG1C,SAAS,IAAW;AAClB,KAAQ,QAAQ,GAAc,GAAG,EAAA;;EAGnC,SAAS,EAAe,GAAmB;AACzC,UAAO,IAAI,KAAM,IAAI,IAAI,IAAI,IAAI,KAAa,KAAK,IAAI,MAAG,IAAK;;EAGjE,SAAS,IAAc;GACrB,IAAM,IAAY,YAAY,KAAK,EAC7B,IAAW,GAAc;GAE/B,SAAS,EAAK,GAAa;IACzB,IAAM,IAAU,IAAM,GAChB,IAAW,KAAK,IAAI,IAAU,EAAA,UAAU,EAAE,EAE1C,IAAS,KAAY,IADb,EAAe,EAAS;AAStC,IANI,MAAoB,SACtB,OAAO,SAAS,GAAG,EAAO,GAEzB,EAAgC,YAAY,GAG3C,IAAW,KACb,sBAAsB,EAAK;;AAI/B,yBAAsB,EAAK;;EAG7B,SAAS,EAAY,GAAmB;AAEtC,GADA,GAAa,EACb,EAAK,SAAS,EAAM;;AAStB,EANA,QAAgB;AAGd,GAFA,IAAkB,EAAA,UAAU,IAAI,QAChC,EAAgB,iBAAiB,UAAU,GAAU,EAAE,SAAS,IAAM,CAAC,EACvE,GAAU;IACV,EAEF,QAAsB;AACpB,KAAgB,oBAAoB,UAAU,EAAS;IACvD;EAEF,IAAM,IAAY;yBAIhB,EAyBa,GAAA,EAzBD,MAAK,0BAAwB,EAAA;oBAwBxB,CAtBP,EAAA,EAAS,IAAA,GAAA,EADjB,EAuBe,GAAA;;IArBZ,OAAO,EAAA;IACP,MAAM,EAAA;IACP,cAAW;IACX,OAAM;IACL,SAAO;;IAEG,MAAI,QAaN,CAZP,EAYO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,AAAA,EAAA,OAVL,EASM,OAAA;KARJ,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,eAAY;KACZ,WAAU;QAEV,EAAwE,QAAA,EAAlE,GAAE,+DAA6D,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/types/components/BContextMenu/BContextMenu.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/BContextMenu/BContextMenu.vue.d.ts

@@ -0,0 +1,42 @@
+import type { BContextMenuItem } from './types.ts';
+type __VLS_Props = {
+    /** Items to render. Each item is either a regular entry (with `label`) or a divider (`{ divider: true, key }`). */
+    items: BContextMenuItem[];
+    /** When true, the trigger area ignores `contextmenu` events — the menu cannot be opened. @default false */
+    disabled?: boolean;
+    /** Optional explicit `id` for the menu element. Falls back to a per-instance auto-generated id. */
+    id?: string;
+    /** Accessible label announced when the menu opens. @default 'Context menu' */
+    ariaLabel?: string;
+};
+type __VLS_Slots = {
+    /** The trigger area. The component listens for `contextmenu` on the wrapping element. */
+    default?(): unknown;
+    /** Optional per-item override. Receives `{ item, active }`. */
+    item?(props: {
+        item: BContextMenuItem;
+        active: boolean;
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    /** Open the menu programmatically at viewport coordinates. */
+    open: (px: number, py: number) => void;
+    /** Close the menu programmatically. */
+    close: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    select: (item: BContextMenuItem, event: Event) => any;
+    open: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: () => any;
+    onSelect?: (item: BContextMenuItem, event: Event) => any;
+    onOpen?: (event: MouseEvent) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/BContextMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BContextMenu } from './BContextMenu.vue';
+export type { BContextMenuItem } from './types';

package/dist/types/components/BContextMenu/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A single item displayed inside `BContextMenu`. Items can be:
+ *   - a regular menu entry (with `label`)
+ *   - a divider (`divider: true`) — rendered as <hr role="separator">
+ */
+export interface BContextMenuItem {
+    /** Stable identifier used for keyed rendering and selection. */
+    key: string;
+    /** Visible label. Required unless `divider: true`. */
+    label?: string;
+    /** Optional icon name forwarded to `BIcon`. */
+    icon?: string;
+    /** Whether the item is disabled — non-activatable, skipped by keyboard nav. */
+    disabled?: boolean;
+    /** Render in destructive styling (e.g. "Delete"). */
+    danger?: boolean;
+    /** Render this item as a separator instead of a regular entry. */
+    divider?: boolean;
+    /** Per-item callback invoked on activation, before `select` is emitted. */
+    onSelect?: () => void;
+    /** Nested children (rendered inline as a flat-ish menu). */
+    children?: BContextMenuItem[];
+}

package/dist/types/components/BInputTags/BInputTags.spec.d.ts

@@ -0,0 +1 @@
+export {};