@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system120.js

@@ -1,166 +1,227 @@
-import { Fragment as e, computed as t, createElementBlock as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, renderList as u, renderSlot as d, watch as f } from "vue";
-//#region src/components/BMasonry/BMasonry.vue?vue&type=script&setup=true&lang.ts
-var p = ["data-masonry-key"], m = /* @__PURE__ */ r({
-	__name: "BMasonry",
-	props: {
-		columns: { default: 3 },
-		gutter: { default: 0 },
-		items: { default: () => [] },
-		fresh: {
+import { BCommonSize as e } from "./design-system3.js";
+import { useComponentId as t } from "./design-system10.js";
+import { BInputStatus as n, BInputVariant as r } from "./design-system116.js";
+import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, ref as f, renderSlot as p, unref as m, useModel as h, useSlots as g, watch as _, withModifiers as v } from "vue";
+//#region src/components/BInputNumber/BInputNumber.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "b-input-number__wrapper" }, b = {
+	key: 0,
+	class: "b-input-number__prefix",
+	"aria-hidden": "true"
+}, x = [
+	"id",
+	"value",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-invalid",
+	"placeholder",
+	"disabled",
+	"readonly"
+], S = {
+	key: 1,
+	class: "b-input-number__suffix",
+	"aria-hidden": "true"
+}, C = {
+	key: 2,
+	class: "b-input-number__handler-wrap",
+	"aria-hidden": "true"
+}, w = ["aria-disabled"], T = ["aria-disabled"], E = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "BInputNumber",
+	props: /* @__PURE__ */ l({
+		size: { default: () => e.Medium },
+		variant: { default: () => r.Outlined },
+		status: {},
+		min: { default: () => -(2 ** 53 - 1) },
+		max: { default: () => 2 ** 53 - 1 },
+		step: { default: 1 },
+		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		classNames: { type: [Object, Function] },
-		styles: { type: [Object, Function] }
-	},
-	emits: ["layoutChange"],
-	setup(r, { emit: m }) {
-		let h = m, g = {
-			xs: 0,
-			sm: 576,
-			md: 768,
-			lg: 992,
-			xl: 1200,
-			xxl: 1600
-		};
-		function _(e, t) {
-			if (typeof e == "number") return Math.max(1, e);
-			let n = Object.keys(g).sort((e, t) => g[t] - g[e]);
-			for (let r of n) if (t >= g[r] && e[r] !== void 0) return Math.max(1, e[r]);
-			let r = Object.keys(e).sort((e, t) => g[e] - g[t])[0];
-			return r ? Math.max(1, e[r]) : 1;
+		readOnly: {
+			type: Boolean,
+			default: !1
+		},
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		keyboard: {
+			type: Boolean,
+			default: !0
+		},
+		changeOnBlur: {
+			type: Boolean,
+			default: !0
+		},
+		changeOnWheel: {
+			type: Boolean,
+			default: !1
+		},
+		placeholder: {},
+		id: {},
+		precision: {},
+		formatter: { type: Function },
+		parser: { type: Function },
+		decimalSeparator: {},
+		stringMode: {
+			type: Boolean,
+			default: !1
 		}
-		let v = l(null), y = l(0), b = null;
-		function x() {
-			v.value && (y.value = v.value.offsetWidth);
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ l([
+		"change",
+		"pressEnter",
+		"step",
+		"focus",
+		"blur"
+	], ["update:modelValue"]),
+	setup(e, { expose: r, emit: c }) {
+		let l = g(), E = c, D = h(e, "modelValue"), { componentUID: O } = t(), k = i(() => e.id ?? `b-input-number-${O.value}`), A = f(null), j = f(!1), M = f(""), N = i(() => !!l.prefix), P = i(() => !!l.suffix), F = i(() => e.disabled || e.readOnly ? !0 : D.value === null ? !1 : D.value >= e.max), I = i(() => e.disabled || e.readOnly ? !0 : D.value === null ? !1 : D.value <= e.min);
+		function L(t) {
+			if (e.precision !== void 0) return parseFloat(t.toFixed(e.precision));
+			let n = String(e.step), r = n.includes(".") ? n.split(".")[1].length : 0;
+			return r > 0 ? parseFloat(t.toFixed(r)) : t;
 		}
-		let S = l({}), C = null, w = l(/* @__PURE__ */ new Map());
-		function T(e, t) {
-			if (t) w.value.set(e, t), r.fresh && C && C.observe(t);
-			else {
-				let t = w.value.get(e);
-				t && C && C.unobserve(t), w.value.delete(e);
-				let n = { ...S.value };
-				delete n[e], S.value = n;
-			}
+		function R(t) {
+			return Math.min(e.max, Math.max(e.min, t));
 		}
-		function E() {
-			!r.fresh || typeof ResizeObserver > "u" || (C = new ResizeObserver((e) => {
-				for (let t of e) {
-					let e = t.target.dataset.masonryKey;
-					if (e !== void 0) {
-						let n = t.contentRect.height;
-						S.value[e] !== n && (S.value = {
-							...S.value,
-							[e]: n
-						});
-					}
-				}
-			}), w.value.forEach((e) => C.observe(e)));
+		function z(t) {
+			if (t === null) return "";
+			let n;
+			return n = e.precision === void 0 ? String(t) : t.toFixed(e.precision), e.decimalSeparator && (n = n.replace(".", e.decimalSeparator)), e.formatter ? e.formatter(e.stringMode ? n : t) : n;
 		}
-		let D = t(() => _(r.columns, y.value)), O = t(() => {
-			let e = r.gutter;
-			if (Array.isArray(e)) return [_(e[0], y.value), _(e[1], y.value)];
-			let t = _(e, y.value);
-			return [t, t];
-		}), k = t(() => {
-			let e = D.value, t = Array.from({ length: e }, () => []), n = Array(e).fill(0), [, i] = O.value;
-			for (let a = 0; a < r.items.length; a++) {
-				let o = r.items[a], s;
-				s = o.column === void 0 ? n.indexOf(Math.min(...n)) : Math.max(0, Math.min(e - 1, o.column - 1)), t[s].push({
-					item: o,
-					originalIndex: a
-				});
-				let c = S.value[o.key] ?? o.height ?? 0;
-				n[s] += c + (t[s].length > 1 ? i : 0);
-			}
-			return t;
-		});
-		f(t(() => {
-			let e = D.value, t = {};
-			for (let e = 0; e < r.items.length; e++) {
-				let n = r.items[e], i = k.value.findIndex((e) => e.some((e) => e.item.key === n.key));
-				i >= 0 && (t[n.key] = i);
-			}
-			return {
-				columns: e,
-				columnMap: t
-			};
-		}), (e) => {
-			h("layoutChange", e);
-		}, { immediate: !0 });
-		function A(e, t) {
-			let n = ["b-masonry__item"];
-			if (!r.classNames) return n;
-			if (typeof r.classNames == "function") {
-				let i = r.classNames(e, t);
-				i && n.push(...Array.isArray(i) ? i : [i]);
-			} else if (typeof r.classNames.item == "function") {
-				let i = r.classNames.item(e, t);
-				i && n.push(...Array.isArray(i) ? i : [i]);
-			} else typeof r.classNames.item == "string" && n.push(r.classNames.item);
-			return n;
+		function B(t) {
+			if (!t.trim()) return null;
+			let n = t;
+			e.parser ? n = e.parser(t) : e.decimalSeparator && (n = n.replace(e.decimalSeparator, "."));
+			let r = Number(n);
+			return isNaN(r) ? D.value : r;
+		}
+		function V() {
+			M.value = z(D.value);
 		}
-		function j(e, t) {
-			return r.styles ? typeof r.styles == "function" ? r.styles(e, t) ?? {} : typeof r.styles.item == "function" ? r.styles.item(e, t) ?? {} : r.styles.item && typeof r.styles.item == "object" ? r.styles.item : {} : {};
+		function H(e, t = !0) {
+			e !== null && (e = L(R(e)));
+			let n = e !== D.value;
+			D.value = e, V(), n && t && E("change", e);
 		}
-		function M(e) {
-			let t = ["b-masonry__column"];
-			return !r.classNames || typeof r.classNames == "function" || r.classNames.column && t.push(r.classNames.column), t;
+		function U(t) {
+			if (e.disabled || e.readOnly) return;
+			let n = R(L((D.value ?? 0) + (t === "up" ? e.step : -e.step)));
+			H(n), E("step", n, {
+				offset: e.step,
+				type: t
+			});
 		}
-		function N(e) {
-			return !r.styles || typeof r.styles == "function" ? {} : r.styles.column ?? {};
+		let W = (e) => {
+			M.value = e.target.value;
+		}, G = (t) => {
+			t.key === "Enter" && (Y(), E("pressEnter", t)), e.keyboard && (t.key === "ArrowUp" ? (t.preventDefault(), U("up")) : t.key === "ArrowDown" && (t.preventDefault(), U("down")));
+		}, K = (e) => {
+			j.value = !0, E("focus", e);
+		}, q = (t) => {
+			j.value = !1, e.changeOnBlur && Y(), E("blur", t);
+		}, J = (t) => {
+			!e.changeOnWheel || e.disabled || e.readOnly || !j.value || (t.preventDefault(), t.deltaY < 0 ? U("up") : t.deltaY > 0 && U("down"));
+		};
+		function Y() {
+			let e = B(M.value);
+			H(e === null ? null : e);
 		}
-		let P = t(() => {
-			let e = ["b-masonry"];
-			return !r.classNames || typeof r.classNames == "function" || r.classNames.root && e.push(r.classNames.root), e;
-		}), F = t(() => {
-			let e = {
-				"--b-masonry-columns": String(D.value),
-				"--b-masonry-col-gap": `${O.value[0]}px`,
-				"--b-masonry-row-gap": `${O.value[1]}px`
-			};
-			if (r.styles && typeof r.styles == "object" && "root" in r.styles) {
-				let t = r.styles;
-				t.root && Object.assign(e, t.root);
+		return _(() => D.value, () => {
+			j.value || V();
+		}, { immediate: !0 }), r({
+			focus: (e) => {
+				if (A.value?.focus({ preventScroll: e?.preventScroll }), e?.cursor && A.value) {
+					let t = A.value.value.length;
+					switch (e.cursor) {
+						case "start":
+							A.value.setSelectionRange(0, 0);
+							break;
+						case "end":
+							A.value.setSelectionRange(t, t);
+							break;
+						case "all":
+							A.value.setSelectionRange(0, t);
+							break;
+					}
+				}
+			},
+			blur: () => {
+				A.value?.blur();
+			}
+		}), (t, r) => (d(), o("span", { class: u(["b-input-number", [
+			`b-input-number--${e.size}`,
+			`b-input-number--${e.variant}`,
+			{
+				"b-input-number--focused": j.value,
+				"b-input-number--disabled": e.disabled,
+				"b-input-number--readonly": e.readOnly,
+				"b-input-number--error": e.status === m(n).Error,
+				"b-input-number--warning": e.status === m(n).Warning,
+				"b-input-number--has-controls": e.controls
 			}
-			return e;
-		});
-		return s(() => {
-			x(), typeof ResizeObserver < "u" ? (b = new ResizeObserver(() => x()), v.value && b.observe(v.value)) : window.addEventListener("resize", x), r.fresh && E();
-		}), f(() => r.fresh, (e) => {
-			e ? E() : (C?.disconnect(), C = null, S.value = {});
-		}), o(() => {
-			b?.disconnect(), C?.disconnect(), window.removeEventListener("resize", x);
-		}), (t, r) => (c(), n("div", {
-			ref_key: "rootEl",
-			ref: v,
-			class: i(P.value),
-			style: a(F.value),
-			role: "list",
-			"aria-label": "Masonry layout"
-		}, [(c(!0), n(e, null, u(k.value, (r, o) => (c(), n("div", {
-			key: o,
-			class: i(M(o)),
-			style: a(N(o)),
-			role: "presentation"
-		}, [(c(!0), n(e, null, u(r, ({ item: e, originalIndex: r }) => (c(), n("div", {
-			key: e.key,
-			ref_for: !0,
-			ref: (t) => T(e.key, t),
-			"data-masonry-key": e.key,
-			class: i(A(e, o)),
-			style: a(j(e, o)),
-			role: "listitem"
-		}, [t.$slots.item ? d(t.$slots, "item", {
-			key: 0,
-			item: e,
-			index: r,
-			column: o
-		}) : d(t.$slots, "default", { key: 1 })], 14, p))), 128))], 6))), 128))], 6));
+		]]) }, [s("span", y, [
+			N.value ? (d(), o("span", b, [p(t.$slots, "prefix", {}, void 0, !0)])) : a("", !0),
+			s("input", {
+				id: k.value,
+				ref_key: "inputRef",
+				ref: A,
+				value: M.value,
+				type: "text",
+				inputmode: "decimal",
+				role: "spinbutton",
+				"aria-valuenow": D.value ?? void 0,
+				"aria-valuemin": e.min === -(2 ** 53 - 1) ? void 0 : e.min,
+				"aria-valuemax": e.max === 2 ** 53 - 1 ? void 0 : e.max,
+				"aria-invalid": e.status === m(n).Error ? !0 : void 0,
+				placeholder: e.placeholder,
+				disabled: e.disabled,
+				readonly: e.readOnly,
+				class: "b-input-number__input",
+				onInput: W,
+				onKeydown: G,
+				onFocus: K,
+				onBlur: q,
+				onWheel: J
+			}, null, 40, x),
+			P.value ? (d(), o("span", S, [p(t.$slots, "suffix", {}, void 0, !0)])) : a("", !0),
+			e.controls ? (d(), o("span", C, [s("span", {
+				class: u(["b-input-number__handler b-input-number__handler--up", { "b-input-number__handler--disabled": F.value }]),
+				role: "button",
+				tabindex: "-1",
+				"aria-label": "Increase value",
+				"aria-disabled": F.value,
+				onMousedown: r[0] ||= v((e) => !F.value && U("up"), ["prevent"])
+			}, [...r[2] ||= [s("svg", {
+				viewBox: "0 0 1024 1024",
+				width: "1em",
+				height: "1em",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [s("path", { d: "M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h286c2.1 0 4.2-.8 5.7-2.3l70.3-70.3 70.3 70.3c1.5 1.5 3.5 2.3 5.7 2.3h286c6.5 0 10.3-7.4 6.5-12.7z" })], -1)]], 42, w), s("span", {
+				class: u(["b-input-number__handler b-input-number__handler--down", { "b-input-number__handler--disabled": I.value }]),
+				role: "button",
+				tabindex: "-1",
+				"aria-label": "Decrease value",
+				"aria-disabled": I.value,
+				onMousedown: r[1] ||= v((e) => !I.value && U("down"), ["prevent"])
+			}, [...r[3] ||= [s("svg", {
+				viewBox: "0 0 1024 1024",
+				width: "1em",
+				height: "1em",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [s("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" })], -1)]], 42, T)])) : a("", !0)
+		])], 2));
 	}
 });
 //#endregion
-export { m as default };
+export { E as default };
 
 //# sourceMappingURL=design-system120.js.map

package/dist/design-system120.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system120.js","names":["$slots"],"sources":["../src/components/BMasonry/BMasonry.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport type {\n  BMasonryBreakpoint,\n  BMasonryClassNames,\n  BMasonryItem,\n  BMasonryLayoutChangePayload,\n  BMasonryResponsive,\n  BMasonryStyles,\n} from './types';\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nconst {\n  columns = 3,\n  // eslint-disable-next-line vue/require-valid-default-prop\n  gutter = 0,\n  items = [],\n  fresh = false,\n  classNames,\n  styles,\n} = defineProps<{\n  /**\n   * Number of columns. Accepts a fixed number or a breakpoint map.\n   * @example 3\n   * @example { xs: 1, sm: 2, md: 3, lg: 4 }\n   * @default 3\n   */\n  columns?: BMasonryResponsive;\n\n  /**\n   * Gap between items in pixels. Accepts a fixed value, a [colGap, rowGap] tuple,\n   * or a breakpoint map for responsive gaps.\n   * @example 16\n   * @example [16, 8]\n   * @example { xs: 8, md: 16 }\n   * @default 0\n   */\n  gutter?: BMasonryResponsive | [BMasonryResponsive, BMasonryResponsive];\n\n  /**\n   * Array of masonry items to render.\n   * @default []\n   */\n  items?: BMasonryItem[];\n\n  /**\n   * When true, observe every item's size so the layout re-flows when children resize.\n   * Requires ResizeObserver support; degrades gracefully when unavailable.\n   * @default false\n   */\n  fresh?: boolean;\n\n  /**\n   * Customize CSS classes on semantic DOM elements (`root`, `column`, `item`).\n   * Can be a plain object or a per-item function `(item, columnIndex) => classes`.\n   */\n  classNames?: BMasonryClassNames;\n\n  /**\n   * Customize inline styles on semantic DOM elements (`root`, `column`, `item`).\n   * Can be a plain object or a per-item function `(item, columnIndex) => styles`.\n   */\n  styles?: BMasonryStyles;\n}>();\n\n// ─── Emits ────────────────────────────────────────────────────────────────────\n\nconst emit = defineEmits<{\n  /**\n   * Fires after each layout recalculation with the resolved column count and\n   * the column assignment map (item key → 0-based column index).\n   */\n  layoutChange: [payload: BMasonryLayoutChangePayload];\n}>();\n\n// ─── Slots ────────────────────────────────────────────────────────────────────\n\ndefineSlots<{\n  /**\n   * Custom rendering for each item. Receives `{ item: BMasonryItem, index: number, column: number }`.\n   */\n  item?: (props: { item: BMasonryItem; index: number; column: number }) => unknown;\n\n  /**\n   * Default slot used when no `items` prop is provided — raw child nodes are\n   * distributed across columns automatically.\n   */\n  default?: (props: Record<string, never>) => unknown;\n}>();\n\n// ─── Responsive helpers ───────────────────────────────────────────────────────\n\nconst BREAKPOINTS: Record<BMasonryBreakpoint, number> = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nfunction resolveResponsive(value: BMasonryResponsive, width: number): number {\n  if (typeof value === 'number') return Math.max(1, value);\n\n  // Breakpoint map — pick the largest breakpoint that still fits\n  const keys = (Object.keys(BREAKPOINTS) as BMasonryBreakpoint[]).sort(\n    (a, b) => BREAKPOINTS[b] - BREAKPOINTS[a],\n  );\n\n  for (const bp of keys) {\n    if (width >= BREAKPOINTS[bp] && value[bp] !== undefined) {\n      return Math.max(1, value[bp]!);\n    }\n  }\n  // Fallback to smallest defined value\n  const smallest = (Object.keys(value) as BMasonryBreakpoint[]).sort(\n    (a, b) => BREAKPOINTS[a] - BREAKPOINTS[b],\n  )[0];\n  return smallest ? Math.max(1, value[smallest]!) : 1;\n}\n\n// ─── Container width tracking ─────────────────────────────────────────────────\n\nconst rootEl = ref<HTMLElement | null>(null);\nconst containerWidth = ref(0);\n\nlet containerObserver: ResizeObserver | null = null;\n\nfunction updateWidth() {\n  if (rootEl.value) {\n    containerWidth.value = rootEl.value.offsetWidth;\n  }\n}\n\n// ─── Item height tracking (fresh mode) ────────────────────────────────────────\n\nconst itemHeights = ref<Record<string | number, number>>({});\nlet itemObserver: ResizeObserver | null = null;\nconst itemEls = ref<Map<string | number, Element>>(new Map());\n\nfunction registerItemEl(key: string | number, el: Element | null) {\n  if (el) {\n    itemEls.value.set(key, el);\n    if (fresh && itemObserver) {\n      itemObserver.observe(el);\n    }\n  } else {\n    const old = itemEls.value.get(key);\n    if (old && itemObserver) itemObserver.unobserve(old);\n    itemEls.value.delete(key);\n    const next = { ...itemHeights.value };\n    delete next[key];\n    itemHeights.value = next;\n  }\n}\n\nfunction setupItemObserver() {\n  if (!fresh || typeof ResizeObserver === 'undefined') return;\n  itemObserver = new ResizeObserver((entries) => {\n    let changed = false;\n    for (const entry of entries) {\n      const el = entry.target as HTMLElement;\n      const key = el.dataset.masonryKey;\n      if (key !== undefined) {\n        const h = entry.contentRect.height;\n        if (itemHeights.value[key] !== h) {\n          itemHeights.value = { ...itemHeights.value, [key]: h };\n          changed = true;\n        }\n      }\n    }\n    if (changed) {\n      // trigger layout recompute (handled reactively via computed)\n    }\n  });\n  // Observe any already-mounted elements\n  itemEls.value.forEach((el) => itemObserver!.observe(el));\n}\n\n// ─── Core layout algorithm ────────────────────────────────────────────────────\n\nconst resolvedColumns = computed(() => resolveResponsive(columns, containerWidth.value));\n\nconst resolvedGutter = computed<[number, number]>(() => {\n  const g = gutter;\n  if (Array.isArray(g)) {\n    const colGap = resolveResponsive(g[0] as BMasonryResponsive, containerWidth.value);\n    const rowGap = resolveResponsive(g[1] as BMasonryResponsive, containerWidth.value);\n    return [colGap, rowGap];\n  }\n  const v = resolveResponsive(g as BMasonryResponsive, containerWidth.value);\n  return [v, v];\n});\n\n/** Distribute items across columns using the \"shortest column first\" strategy. */\nconst columnBuckets = computed<{ item: BMasonryItem; originalIndex: number }[][]>(() => {\n  const cols = resolvedColumns.value;\n  const buckets: { item: BMasonryItem; originalIndex: number }[][] = Array.from(\n    { length: cols },\n    () => [],\n  );\n  const heights = Array<number>(cols).fill(0);\n  const [, rowGap] = resolvedGutter.value;\n\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    let targetCol: number;\n\n    if (item.column !== undefined) {\n      // Pinned column (1-based → 0-based, clamped)\n      targetCol = Math.max(0, Math.min(cols - 1, item.column - 1));\n    } else {\n      // Shortest column\n      targetCol = heights.indexOf(Math.min(...heights));\n    }\n\n    buckets[targetCol].push({ item, originalIndex: i });\n    const h = itemHeights.value[item.key] ?? item.height ?? 0;\n    heights[targetCol] += h + (buckets[targetCol].length > 1 ? rowGap : 0);\n  }\n\n  return buckets;\n});\n\nconst layoutColumnMap = computed(() => {\n  const cols = resolvedColumns.value;\n  const map: Record<string | number, number> = {};\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    const bucket = columnBuckets.value.findIndex((b) =>\n      b.some((entry) => entry.item.key === item.key),\n    );\n    if (bucket >= 0) map[item.key] = bucket;\n  }\n  return { columns: cols, columnMap: map };\n});\n\nwatch(layoutColumnMap, (val) => {\n  emit('layoutChange', val);\n}, { immediate: true });\n\n// ─── CSS class/style helpers ──────────────────────────────────────────────────\n\nfunction getItemClasses(item: BMasonryItem, columnIndex: number) {\n  const base = ['b-masonry__item'];\n  if (!classNames) return base;\n\n  if (typeof classNames === 'function') {\n    const extra = classNames(item, columnIndex);\n    if (extra) base.push(...(Array.isArray(extra) ? extra : [extra as string]));\n  } else if (typeof classNames.item === 'function') {\n    const extra = classNames.item(item, columnIndex);\n    if (extra) base.push(...(Array.isArray(extra) ? extra : [extra as string]));\n  } else if (typeof classNames.item === 'string') {\n    base.push(classNames.item);\n  }\n  return base;\n}\n\nfunction getItemStyles(item: BMasonryItem, columnIndex: number): Record<string, string> {\n  if (!styles) return {};\n  if (typeof styles === 'function') return styles(item, columnIndex) ?? {};\n  if (typeof styles.item === 'function') return styles.item(item, columnIndex) ?? {};\n  if (styles.item && typeof styles.item === 'object') return styles.item as Record<string, string>;\n  return {};\n}\n\nfunction getColumnClasses(_colIndex: number): string[] {\n  const base = ['b-masonry__column'];\n  if (!classNames || typeof classNames === 'function') return base;\n  if (classNames.column) base.push(classNames.column);\n  return base;\n}\n\nfunction getColumnStyles(_colIndex: number): Record<string, string> {\n  if (!styles || typeof styles === 'function') return {};\n  return (styles.column as Record<string, string>) ?? {};\n}\n\nconst rootClasses = computed(() => {\n  const base = ['b-masonry'];\n  if (!classNames || typeof classNames === 'function') return base;\n  if (classNames.root) base.push(classNames.root);\n  return base;\n});\n\nconst rootStyles = computed(() => {\n  const base: Record<string, string> = {\n    '--b-masonry-columns': String(resolvedColumns.value),\n    '--b-masonry-col-gap': `${resolvedGutter.value[0]}px`,\n    '--b-masonry-row-gap': `${resolvedGutter.value[1]}px`,\n  };\n  if (styles && typeof styles === 'object' && !('root' in styles) === false) {\n    const s = styles as { root?: Record<string, string> };\n    if (s.root) Object.assign(base, s.root);\n  }\n  return base;\n});\n\n// ─── Lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(() => {\n  updateWidth();\n\n  if (typeof ResizeObserver !== 'undefined') {\n    containerObserver = new ResizeObserver(() => updateWidth());\n    if (rootEl.value) containerObserver.observe(rootEl.value);\n  } else {\n    // SSR / no ResizeObserver: listen to window resize\n    window.addEventListener('resize', updateWidth);\n  }\n\n  if (fresh) setupItemObserver();\n});\n\nwatch(\n  () => fresh,\n  (enabled) => {\n    if (enabled) {\n      setupItemObserver();\n    } else {\n      itemObserver?.disconnect();\n      itemObserver = null;\n      itemHeights.value = {};\n    }\n  },\n);\n\nonBeforeUnmount(() => {\n  containerObserver?.disconnect();\n  itemObserver?.disconnect();\n  window.removeEventListener('resize', updateWidth);\n});\n</script>\n\n<template>\n  <!-- role=\"list\" lets screen readers announce item count -->\n  <div\n    ref=\"rootEl\"\n    :class=\"rootClasses\"\n    :style=\"rootStyles\"\n    role=\"list\"\n    aria-label=\"Masonry layout\"\n  >\n    <!-- Column-based layout: each column is a flex column -->\n    <div\n      v-for=\"(bucket, colIdx) in columnBuckets\"\n      :key=\"colIdx\"\n      :class=\"getColumnClasses(colIdx)\"\n      :style=\"getColumnStyles(colIdx)\"\n      role=\"presentation\"\n    >\n      <div\n        v-for=\"{ item, originalIndex } in bucket\"\n        :key=\"item.key\"\n        :ref=\"(el) => registerItemEl(item.key, el as Element | null)\"\n        :data-masonry-key=\"item.key\"\n        :class=\"getItemClasses(item, colIdx)\"\n        :style=\"getItemStyles(item, colIdx)\"\n        role=\"listitem\"\n      >\n        <!-- Named item slot (prop-driven items) -->\n        <slot v-if=\"$slots.item\" name=\"item\" :item=\"item\" :index=\"originalIndex\" :column=\"colIdx\" />\n        <!-- Default slot fallback when using raw children (no items prop) -->\n        <template v-else>\n          <slot />\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────────────────────────────────────\n   BMasonry — CSS custom properties (scoped to component root)\n   ───────────────────────────────────────────────────────────────────────────── */\n.b-masonry {\n  /* Layout tokens */\n  --b-masonry-columns: 3;\n  --b-masonry-col-gap: 0px;\n  --b-masonry-row-gap: 0px;\n\n  /* Item tokens */\n  --b-masonry-item-transition-duration: 200ms;\n  --b-masonry-item-transition-timing: ease;\n  --b-masonry-item-border-radius: 0px;\n  --b-masonry-item-bg: transparent;\n\n  /* ── Layout ── */\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--b-masonry-col-gap);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ── Column ── */\n.b-masonry__column {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--b-masonry-row-gap);\n}\n\n/* ── Item ── */\n.b-masonry__item {\n  width: 100%;\n  box-sizing: border-box;\n  background: var(--b-masonry-item-bg);\n  border-radius: var(--b-masonry-item-border-radius);\n  transition:\n    transform var(--b-masonry-item-transition-duration) var(--b-masonry-item-transition-timing),\n    opacity var(--b-masonry-item-transition-duration) var(--b-masonry-item-transition-timing);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-masonry {\n  /* Tokens that shift in dark mode — override as needed by the consumer */\n  --b-masonry-item-bg: transparent;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-masonry {\n    /* Tokens that shift in dark mode — override as needed by the consumer */\n    --b-masonry-item-bg: transparent;\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-masonry {\n    --b-masonry-item-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"design-system120.js","names":[],"sources":["../src/components/BInputNumber/BInputNumber.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BInputStatus, BInputVariant } from '@/components/BInput/types.ts';\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport type { BInputNumberFocusOptions, BInputNumberStepInfo } from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  size = BCommonSize.Medium,\n  variant = BInputVariant.Outlined,\n  min = Number.MIN_SAFE_INTEGER,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled = false,\n  readOnly = false,\n  controls = true,\n  keyboard = true,\n  changeOnBlur = true,\n  changeOnWheel = false,\n  placeholder,\n  id,\n  precision,\n  formatter,\n  parser,\n  decimalSeparator,\n  stringMode = false,\n  status,\n} = defineProps<{\n  /** The size of the input number. */\n  size?: `${BCommonSize}`;\n  /** Visual variant of the input number. */\n  variant?: `${BInputVariant}`;\n  /** Validation status. */\n  status?: `${BInputStatus}`;\n  /** Minimum value allowed. */\n  min?: number;\n  /** Maximum value allowed. */\n  max?: number;\n  /** Increment/decrement step amount. */\n  step?: number;\n  /** Whether the input number is disabled. */\n  disabled?: boolean;\n  /** Whether the input number is read-only. */\n  readOnly?: boolean;\n  /** Whether to show +/- controls. */\n  controls?: boolean;\n  /** Whether keyboard up/down changes value. */\n  keyboard?: boolean;\n  /** Whether to trigger change on blur (e.g. reset out-of-range). */\n  changeOnBlur?: boolean;\n  /** Whether mouse wheel changes value. */\n  changeOnWheel?: boolean;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** HTML id attribute. */\n  id?: string;\n  /** Decimal precision for display. */\n  precision?: number;\n  /** Format the displayed value. */\n  formatter?: (value: string | number) => string;\n  /** Parse the formatted value back to a number. */\n  parser?: (displayValue: string) => string;\n  /** Custom decimal separator character. */\n  decimalSeparator?: string;\n  /** Use string mode for high-precision decimals. */\n  stringMode?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when value changes. */\n  change: [value: number | null];\n  /** Fired when Enter key is pressed. */\n  pressEnter: [event: KeyboardEvent];\n  /** Fired on step (button, keyboard, or wheel). */\n  step: [value: number | null, info: BInputNumberStepInfo];\n  /** Fired on input focus. */\n  focus: [event: FocusEvent];\n  /** Fired on input blur. */\n  blur: [event: FocusEvent];\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id ?? `b-input-number-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isFocused = ref(false);\nconst displayValue = ref('');\n\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\n\nconst isUpDisabled = computed(() => {\n  if (disabled || readOnly) return true;\n  if (model.value === null) return false;\n  return model.value >= max;\n});\n\nconst isDownDisabled = computed(() => {\n  if (disabled || readOnly) return true;\n  if (model.value === null) return false;\n  return model.value <= min;\n});\n\nfunction toFixedPrecision(val: number): number {\n  if (precision !== undefined) {\n    return parseFloat(val.toFixed(precision));\n  }\n  const stepStr = String(step);\n  const stepDecimals = stepStr.includes('.') ? stepStr.split('.')[1].length : 0;\n  if (stepDecimals > 0) {\n    return parseFloat(val.toFixed(stepDecimals));\n  }\n  return val;\n}\n\nfunction clamp(val: number): number {\n  return Math.min(max, Math.max(min, val));\n}\n\nfunction formatValue(val: number | null): string {\n  if (val === null) return '';\n  let str: string;\n  if (precision !== undefined) {\n    str = val.toFixed(precision);\n  } else {\n    str = String(val);\n  }\n  if (decimalSeparator) {\n    str = str.replace('.', decimalSeparator);\n  }\n  if (formatter) {\n    return formatter(stringMode ? str : val);\n  }\n  return str;\n}\n\nfunction parseInput(input: string): number | null {\n  if (!input.trim()) return null;\n  let parsed = input;\n  if (parser) {\n    parsed = parser(input);\n  } else if (decimalSeparator) {\n    parsed = parsed.replace(decimalSeparator, '.');\n  }\n  const num = Number(parsed);\n  if (isNaN(num)) return model.value;\n  return num;\n}\n\nfunction syncDisplay() {\n  displayValue.value = formatValue(model.value);\n}\n\nfunction updateValue(newVal: number | null, triggerChange = true) {\n  if (newVal !== null) {\n    newVal = toFixedPrecision(clamp(newVal));\n  }\n  const changed = newVal !== model.value;\n  model.value = newVal;\n  syncDisplay();\n  if (changed && triggerChange) {\n    emit('change', newVal);\n  }\n}\n\nfunction stepValue(direction: 'up' | 'down') {\n  if (disabled || readOnly) return;\n  const current = model.value ?? 0;\n  const offset = direction === 'up' ? step : -step;\n  const next = toFixedPrecision(current + offset);\n  const clamped = clamp(next);\n  updateValue(clamped);\n  emit('step', clamped, { offset: step, type: direction });\n}\n\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  displayValue.value = target.value;\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    commitValue();\n    emit('pressEnter', e);\n  }\n  if (!keyboard) return;\n  if (e.key === 'ArrowUp') {\n    e.preventDefault();\n    stepValue('up');\n  } else if (e.key === 'ArrowDown') {\n    e.preventDefault();\n    stepValue('down');\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  isFocused.value = true;\n  emit('focus', e);\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  isFocused.value = false;\n  if (changeOnBlur) {\n    commitValue();\n  }\n  emit('blur', e);\n};\n\nconst handleWheel = (e: WheelEvent) => {\n  if (!changeOnWheel || disabled || readOnly || !isFocused.value) return;\n  e.preventDefault();\n  if (e.deltaY < 0) {\n    stepValue('up');\n  } else if (e.deltaY > 0) {\n    stepValue('down');\n  }\n};\n\nfunction commitValue() {\n  const parsed = parseInput(displayValue.value);\n  if (parsed === null) {\n    updateValue(null);\n  } else {\n    updateValue(parsed);\n  }\n}\n\nconst focus = (options?: BInputNumberFocusOptions) => {\n  inputRef.value?.focus({ preventScroll: options?.preventScroll });\n  if (options?.cursor && inputRef.value) {\n    const len = inputRef.value.value.length;\n    switch (options.cursor) {\n      case 'start':\n        inputRef.value.setSelectionRange(0, 0);\n        break;\n      case 'end':\n        inputRef.value.setSelectionRange(len, len);\n        break;\n      case 'all':\n        inputRef.value.setSelectionRange(0, len);\n        break;\n    }\n  }\n};\n\nconst blur = () => {\n  inputRef.value?.blur();\n};\n\nwatch(\n  () => model.value,\n  () => {\n    if (!isFocused.value) {\n      syncDisplay();\n    }\n  },\n  { immediate: true },\n);\n\ndefineExpose({ focus, blur });\n</script>\n\n<template>\n  <span\n    class=\"b-input-number\"\n    :class=\"[\n      `b-input-number--${size}`,\n      `b-input-number--${variant}`,\n      {\n        'b-input-number--focused': isFocused,\n        'b-input-number--disabled': disabled,\n        'b-input-number--readonly': readOnly,\n        'b-input-number--error': status === BInputStatus.Error,\n        'b-input-number--warning': status === BInputStatus.Warning,\n        'b-input-number--has-controls': controls,\n      },\n    ]\"\n  >\n    <span class=\"b-input-number__wrapper\">\n      <span v-if=\"hasPrefix\" class=\"b-input-number__prefix\" aria-hidden=\"true\">\n        <slot name=\"prefix\" />\n      </span>\n\n      <input\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        :value=\"displayValue\"\n        type=\"text\"\n        inputmode=\"decimal\"\n        role=\"spinbutton\"\n        :aria-valuenow=\"model ?? undefined\"\n        :aria-valuemin=\"min !== Number.MIN_SAFE_INTEGER ? min : undefined\"\n        :aria-valuemax=\"max !== Number.MAX_SAFE_INTEGER ? max : undefined\"\n        :aria-invalid=\"status === BInputStatus.Error ? true : undefined\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        class=\"b-input-number__input\"\n        @input=\"handleInput\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @wheel=\"handleWheel\"\n      />\n\n      <span v-if=\"hasSuffix\" class=\"b-input-number__suffix\" aria-hidden=\"true\">\n        <slot name=\"suffix\" />\n      </span>\n\n      <span v-if=\"controls\" class=\"b-input-number__handler-wrap\" aria-hidden=\"true\">\n        <span\n          class=\"b-input-number__handler b-input-number__handler--up\"\n          :class=\"{ 'b-input-number__handler--disabled': isUpDisabled }\"\n          role=\"button\"\n          tabindex=\"-1\"\n          aria-label=\"Increase value\"\n          :aria-disabled=\"isUpDisabled\"\n          @mousedown.prevent=\"!isUpDisabled && stepValue('up')\"\n        >\n          <svg\n            viewBox=\"0 0 1024 1024\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h286c2.1 0 4.2-.8 5.7-2.3l70.3-70.3 70.3 70.3c1.5 1.5 3.5 2.3 5.7 2.3h286c6.5 0 10.3-7.4 6.5-12.7z\"\n            />\n          </svg>\n        </span>\n        <span\n          class=\"b-input-number__handler b-input-number__handler--down\"\n          :class=\"{ 'b-input-number__handler--disabled': isDownDisabled }\"\n          role=\"button\"\n          tabindex=\"-1\"\n          aria-label=\"Decrease value\"\n          :aria-disabled=\"isDownDisabled\"\n          @mousedown.prevent=\"!isDownDisabled && stepValue('down')\"\n        >\n          <svg\n            viewBox=\"0 0 1024 1024\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z\"\n            />\n          </svg>\n        </span>\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n.b-input-number {\n  --b-input-number-active-bg: #ffffff;\n  --b-input-number-active-border-color: #1677ff;\n  --b-input-number-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-input-number-addon-bg: rgba(0, 0, 0, 0.02);\n  --b-input-number-control-width: 90px;\n  --b-input-number-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-input-number-filled-handle-bg: #f0f0f0;\n  --b-input-number-handle-active-bg: rgba(0, 0, 0, 0.02);\n  --b-input-number-handle-bg: #ffffff;\n  --b-input-number-handle-border-color: #d9d9d9;\n  --b-input-number-handle-font-size: 7px;\n  --b-input-number-handle-hover-color: #1677ff;\n  --b-input-number-handle-width: 22px;\n  --b-input-number-hover-bg: #ffffff;\n  --b-input-number-hover-border-color: #4096ff;\n  --b-input-number-font-size: 14px;\n  --b-input-number-font-size-lg: 16px;\n  --b-input-number-font-size-sm: 14px;\n  --b-input-number-padding-block: 4px;\n  --b-input-number-padding-block-lg: 7px;\n  --b-input-number-padding-block-sm: 0px;\n  --b-input-number-padding-inline: 11px;\n  --b-input-number-padding-inline-lg: 11px;\n  --b-input-number-padding-inline-sm: 7px;\n  --b-input-number-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-input-number-border-color: #d9d9d9;\n  --b-input-number-bg: #ffffff;\n  --b-input-number-color: rgba(0, 0, 0, 0.88);\n  --b-input-number-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-input-number-border-radius: 6px;\n  --b-input-number-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-number-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-input-number-error-border-color: #ff4d4f;\n  --b-input-number-error-hover-border-color: #ff7875;\n  --b-input-number-warning-border-color: #faad14;\n  --b-input-number-warning-hover-border-color: #ffc53d;\n  --b-input-number-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-number-filled-hover-bg: rgba(0, 0, 0, 0.04);\n\n  display: inline-flex;\n  align-items: stretch;\n  width: var(--b-input-number-control-width);\n  font-size: var(--b-input-number-font-size);\n  color: var(--b-input-number-color);\n  line-height: 1.5714;\n}\n\n.b-input-number--lg {\n  font-size: var(--b-input-number-font-size-lg);\n}\n\n.b-input-number--sm {\n  font-size: var(--b-input-number-font-size-sm);\n}\n\n.b-input-number__wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  transition: all 0.2s;\n}\n\n/* Outlined */\n.b-input-number--outlined .b-input-number__wrapper {\n  background: var(--b-input-number-bg);\n  border: 1px solid var(--b-input-number-border-color);\n  border-radius: var(--b-input-number-border-radius);\n}\n\n.b-input-number--outlined:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  border-color: var(--b-input-number-hover-border-color);\n  background: var(--b-input-number-hover-bg);\n}\n\n.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-active-border-color);\n  background: var(--b-input-number-active-bg);\n  box-shadow: var(--b-input-number-active-shadow);\n}\n\n/* Filled */\n.b-input-number--filled .b-input-number__wrapper {\n  background: var(--b-input-number-filled-bg);\n  border: 1px solid transparent;\n  border-radius: var(--b-input-number-border-radius);\n}\n\n.b-input-number--filled:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  background: var(--b-input-number-filled-hover-bg);\n}\n\n.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  background: var(--b-input-number-active-bg);\n  border-color: var(--b-input-number-active-border-color);\n  box-shadow: var(--b-input-number-active-shadow);\n}\n\n/* Borderless */\n.b-input-number--borderless .b-input-number__wrapper {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--b-input-number-border-radius);\n}\n\n/* Underlined */\n.b-input-number--underlined .b-input-number__wrapper {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--b-input-number-border-color);\n  border-radius: 0;\n}\n\n.b-input-number--underlined:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-hover-border-color);\n}\n\n.b-input-number--underlined.b-input-number--focused .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-active-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-active-border-color);\n}\n\n/* Error */\n.b-input-number--error.b-input-number--outlined .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-border-color);\n}\n\n.b-input-number--error.b-input-number--outlined:not(.b-input-number--disabled):hover\n  .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-hover-border-color);\n}\n\n.b-input-number--error.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper,\n.b-input-number--error.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-border-color);\n  box-shadow: var(--b-input-number-error-active-shadow);\n}\n\n.b-input-number--error.b-input-number--underlined .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-error-border-color);\n}\n\n.b-input-number--error.b-input-number--underlined.b-input-number--focused .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-error-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-error-border-color);\n}\n\n/* Warning */\n.b-input-number--warning.b-input-number--outlined .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-border-color);\n}\n\n.b-input-number--warning.b-input-number--outlined:not(.b-input-number--disabled):hover\n  .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-hover-border-color);\n}\n\n.b-input-number--warning.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper,\n.b-input-number--warning.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-border-color);\n  box-shadow: var(--b-input-number-warning-active-shadow);\n}\n\n.b-input-number--warning.b-input-number--underlined .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-warning-border-color);\n}\n\n.b-input-number--warning.b-input-number--underlined.b-input-number--focused\n  .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-warning-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-warning-border-color);\n}\n\n/* Disabled */\n.b-input-number--disabled .b-input-number__wrapper {\n  background: var(--b-input-number-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-input-number--disabled .b-input-number__input {\n  color: var(--b-input-number-disabled-color);\n  cursor: not-allowed;\n}\n\n/* Input element */\n.b-input-number__input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  text-align: left;\n}\n\n.b-input-number--md .b-input-number__input {\n  padding: var(--b-input-number-padding-block) var(--b-input-number-padding-inline);\n}\n\n.b-input-number--lg .b-input-number__input {\n  padding: var(--b-input-number-padding-block-lg) var(--b-input-number-padding-inline-lg);\n}\n\n.b-input-number--sm .b-input-number__input {\n  padding: var(--b-input-number-padding-block-sm) var(--b-input-number-padding-inline-sm);\n}\n\n.b-input-number--has-controls .b-input-number__input {\n  padding-right: calc(var(--b-input-number-handle-width) + 2px);\n}\n\n.b-input-number__input::placeholder {\n  color: var(--b-input-number-placeholder-color);\n}\n\n/* Prefix & Suffix */\n.b-input-number__prefix,\n.b-input-number__suffix {\n  display: inline-flex;\n  align-items: center;\n  color: var(--b-input-number-color);\n  flex-shrink: 0;\n}\n\n.b-input-number__prefix {\n  margin-left: var(--b-input-number-padding-inline);\n}\n\n.b-input-number__suffix {\n  margin-right: var(--b-input-number-padding-inline);\n}\n\n.b-input-number__prefix ~ .b-input-number__input {\n  padding-left: 4px;\n}\n\n/* Handler (step buttons) */\n.b-input-number__handler-wrap {\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: var(--b-input-number-handle-width);\n  border-left: 1px solid var(--b-input-number-handle-border-color);\n  border-radius: 0 var(--b-input-number-border-radius) var(--b-input-number-border-radius) 0;\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.b-input-number:hover .b-input-number__handler-wrap,\n.b-input-number--focused .b-input-number__handler-wrap {\n  opacity: 1;\n}\n\n.b-input-number__handler {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  background: var(--b-input-number-handle-bg);\n  font-size: var(--b-input-number-handle-font-size);\n  color: rgba(0, 0, 0, 0.45);\n  user-select: none;\n  transition:\n    color 0.2s,\n    background 0.2s;\n}\n\n.b-input-number__handler:hover {\n  color: var(--b-input-number-handle-hover-color);\n  background: var(--b-input-number-handle-active-bg);\n}\n\n.b-input-number__handler--up {\n  border-bottom: 1px solid var(--b-input-number-handle-border-color);\n}\n\n.b-input-number__handler--disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.b-input-number__handler svg {\n  width: 0.5em;\n  height: 0.5em;\n}\n\n/* Filled variant handler */\n.b-input-number--filled .b-input-number__handler {\n  background: var(--b-input-number-filled-handle-bg);\n}\n\n/* Borderless / underlined: hide handler border */\n.b-input-number--borderless .b-input-number__handler-wrap,\n.b-input-number--underlined .b-input-number__handler-wrap {\n  border-left-color: transparent;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-input-number {\n  --b-input-number-active-bg: #141414;\n  --b-input-number-active-border-color: #1668dc;\n  --b-input-number-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-input-number-addon-bg: rgba(255, 255, 255, 0.04);\n  --b-input-number-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n  --b-input-number-filled-handle-bg: rgba(255, 255, 255, 0.12);\n  --b-input-number-handle-active-bg: rgba(255, 255, 255, 0.04);\n  --b-input-number-handle-bg: #1f1f1f;\n  --b-input-number-handle-border-color: #424242;\n  --b-input-number-handle-hover-color: #3c89e8;\n  --b-input-number-hover-bg: #141414;\n  --b-input-number-hover-border-color: #3c89e8;\n  --b-input-number-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n  --b-input-number-border-color: #424242;\n  --b-input-number-bg: #141414;\n  --b-input-number-color: rgba(255, 255, 255, 0.88);\n  --b-input-number-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-input-number-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-number-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-input-number-error-border-color: #dc3838;\n  --b-input-number-error-hover-border-color: #e86e6e;\n  --b-input-number-warning-border-color: #d1a300;\n  --b-input-number-warning-hover-border-color: #e8c631;\n  --b-input-number-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-number-filled-hover-bg: rgba(255, 255, 255, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-input-number {\n    --b-input-number-active-bg: #141414;\n    --b-input-number-active-border-color: #1668dc;\n    --b-input-number-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-input-number-addon-bg: rgba(255, 255, 255, 0.04);\n    --b-input-number-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n    --b-input-number-filled-handle-bg: rgba(255, 255, 255, 0.12);\n    --b-input-number-handle-active-bg: rgba(255, 255, 255, 0.04);\n    --b-input-number-handle-bg: #1f1f1f;\n    --b-input-number-handle-border-color: #424242;\n    --b-input-number-handle-hover-color: #3c89e8;\n    --b-input-number-hover-bg: #141414;\n    --b-input-number-hover-border-color: #3c89e8;\n    --b-input-number-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n    --b-input-number-border-color: #424242;\n    --b-input-number-bg: #141414;\n    --b-input-number-color: rgba(255, 255, 255, 0.88);\n    --b-input-number-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-input-number-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-number-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-input-number-error-border-color: #dc3838;\n    --b-input-number-error-hover-border-color: #e86e6e;\n    --b-input-number-warning-border-color: #d1a300;\n    --b-input-number-warning-hover-border-color: #e8c631;\n    --b-input-number-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-number-filled-hover-bg: rgba(255, 255, 255, 0.12);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-input-number__wrapper,\n  .b-input-number__handler-wrap,\n  .b-input-number__handler {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system122.js

@@ -1,8 +1,9 @@
-import e from "./design-system120.js";
+import e from "./design-system14.js";
+import t from "./design-system120.js";
 /* empty css                 */
-//#region src/components/BMasonry/BMasonry.vue
-var t = e;
+//#region src/components/BInputNumber/BInputNumber.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-64ad79ae"]]);
 //#endregion
-export { t as default };
+export { n as default };
 
 //# sourceMappingURL=design-system122.js.map

package/dist/design-system122.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system122.js","names":[],"sources":["../src/components/BMasonry/BMasonry.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport type {\n  BMasonryBreakpoint,\n  BMasonryClassNames,\n  BMasonryItem,\n  BMasonryLayoutChangePayload,\n  BMasonryResponsive,\n  BMasonryStyles,\n} from './types';\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nconst {\n  columns = 3,\n  // eslint-disable-next-line vue/require-valid-default-prop\n  gutter = 0,\n  items = [],\n  fresh = false,\n  classNames,\n  styles,\n} = defineProps<{\n  /**\n   * Number of columns. Accepts a fixed number or a breakpoint map.\n   * @example 3\n   * @example { xs: 1, sm: 2, md: 3, lg: 4 }\n   * @default 3\n   */\n  columns?: BMasonryResponsive;\n\n  /**\n   * Gap between items in pixels. Accepts a fixed value, a [colGap, rowGap] tuple,\n   * or a breakpoint map for responsive gaps.\n   * @example 16\n   * @example [16, 8]\n   * @example { xs: 8, md: 16 }\n   * @default 0\n   */\n  gutter?: BMasonryResponsive | [BMasonryResponsive, BMasonryResponsive];\n\n  /**\n   * Array of masonry items to render.\n   * @default []\n   */\n  items?: BMasonryItem[];\n\n  /**\n   * When true, observe every item's size so the layout re-flows when children resize.\n   * Requires ResizeObserver support; degrades gracefully when unavailable.\n   * @default false\n   */\n  fresh?: boolean;\n\n  /**\n   * Customize CSS classes on semantic DOM elements (`root`, `column`, `item`).\n   * Can be a plain object or a per-item function `(item, columnIndex) => classes`.\n   */\n  classNames?: BMasonryClassNames;\n\n  /**\n   * Customize inline styles on semantic DOM elements (`root`, `column`, `item`).\n   * Can be a plain object or a per-item function `(item, columnIndex) => styles`.\n   */\n  styles?: BMasonryStyles;\n}>();\n\n// ─── Emits ────────────────────────────────────────────────────────────────────\n\nconst emit = defineEmits<{\n  /**\n   * Fires after each layout recalculation with the resolved column count and\n   * the column assignment map (item key → 0-based column index).\n   */\n  layoutChange: [payload: BMasonryLayoutChangePayload];\n}>();\n\n// ─── Slots ────────────────────────────────────────────────────────────────────\n\ndefineSlots<{\n  /**\n   * Custom rendering for each item. Receives `{ item: BMasonryItem, index: number, column: number }`.\n   */\n  item?: (props: { item: BMasonryItem; index: number; column: number }) => unknown;\n\n  /**\n   * Default slot used when no `items` prop is provided — raw child nodes are\n   * distributed across columns automatically.\n   */\n  default?: (props: Record<string, never>) => unknown;\n}>();\n\n// ─── Responsive helpers ───────────────────────────────────────────────────────\n\nconst BREAKPOINTS: Record<BMasonryBreakpoint, number> = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nfunction resolveResponsive(value: BMasonryResponsive, width: number): number {\n  if (typeof value === 'number') return Math.max(1, value);\n\n  // Breakpoint map — pick the largest breakpoint that still fits\n  const keys = (Object.keys(BREAKPOINTS) as BMasonryBreakpoint[]).sort(\n    (a, b) => BREAKPOINTS[b] - BREAKPOINTS[a],\n  );\n\n  for (const bp of keys) {\n    if (width >= BREAKPOINTS[bp] && value[bp] !== undefined) {\n      return Math.max(1, value[bp]!);\n    }\n  }\n  // Fallback to smallest defined value\n  const smallest = (Object.keys(value) as BMasonryBreakpoint[]).sort(\n    (a, b) => BREAKPOINTS[a] - BREAKPOINTS[b],\n  )[0];\n  return smallest ? Math.max(1, value[smallest]!) : 1;\n}\n\n// ─── Container width tracking ─────────────────────────────────────────────────\n\nconst rootEl = ref<HTMLElement | null>(null);\nconst containerWidth = ref(0);\n\nlet containerObserver: ResizeObserver | null = null;\n\nfunction updateWidth() {\n  if (rootEl.value) {\n    containerWidth.value = rootEl.value.offsetWidth;\n  }\n}\n\n// ─── Item height tracking (fresh mode) ────────────────────────────────────────\n\nconst itemHeights = ref<Record<string | number, number>>({});\nlet itemObserver: ResizeObserver | null = null;\nconst itemEls = ref<Map<string | number, Element>>(new Map());\n\nfunction registerItemEl(key: string | number, el: Element | null) {\n  if (el) {\n    itemEls.value.set(key, el);\n    if (fresh && itemObserver) {\n      itemObserver.observe(el);\n    }\n  } else {\n    const old = itemEls.value.get(key);\n    if (old && itemObserver) itemObserver.unobserve(old);\n    itemEls.value.delete(key);\n    const next = { ...itemHeights.value };\n    delete next[key];\n    itemHeights.value = next;\n  }\n}\n\nfunction setupItemObserver() {\n  if (!fresh || typeof ResizeObserver === 'undefined') return;\n  itemObserver = new ResizeObserver((entries) => {\n    let changed = false;\n    for (const entry of entries) {\n      const el = entry.target as HTMLElement;\n      const key = el.dataset.masonryKey;\n      if (key !== undefined) {\n        const h = entry.contentRect.height;\n        if (itemHeights.value[key] !== h) {\n          itemHeights.value = { ...itemHeights.value, [key]: h };\n          changed = true;\n        }\n      }\n    }\n    if (changed) {\n      // trigger layout recompute (handled reactively via computed)\n    }\n  });\n  // Observe any already-mounted elements\n  itemEls.value.forEach((el) => itemObserver!.observe(el));\n}\n\n// ─── Core layout algorithm ────────────────────────────────────────────────────\n\nconst resolvedColumns = computed(() => resolveResponsive(columns, containerWidth.value));\n\nconst resolvedGutter = computed<[number, number]>(() => {\n  const g = gutter;\n  if (Array.isArray(g)) {\n    const colGap = resolveResponsive(g[0] as BMasonryResponsive, containerWidth.value);\n    const rowGap = resolveResponsive(g[1] as BMasonryResponsive, containerWidth.value);\n    return [colGap, rowGap];\n  }\n  const v = resolveResponsive(g as BMasonryResponsive, containerWidth.value);\n  return [v, v];\n});\n\n/** Distribute items across columns using the \"shortest column first\" strategy. */\nconst columnBuckets = computed<{ item: BMasonryItem; originalIndex: number }[][]>(() => {\n  const cols = resolvedColumns.value;\n  const buckets: { item: BMasonryItem; originalIndex: number }[][] = Array.from(\n    { length: cols },\n    () => [],\n  );\n  const heights = Array<number>(cols).fill(0);\n  const [, rowGap] = resolvedGutter.value;\n\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    let targetCol: number;\n\n    if (item.column !== undefined) {\n      // Pinned column (1-based → 0-based, clamped)\n      targetCol = Math.max(0, Math.min(cols - 1, item.column - 1));\n    } else {\n      // Shortest column\n      targetCol = heights.indexOf(Math.min(...heights));\n    }\n\n    buckets[targetCol].push({ item, originalIndex: i });\n    const h = itemHeights.value[item.key] ?? item.height ?? 0;\n    heights[targetCol] += h + (buckets[targetCol].length > 1 ? rowGap : 0);\n  }\n\n  return buckets;\n});\n\nconst layoutColumnMap = computed(() => {\n  const cols = resolvedColumns.value;\n  const map: Record<string | number, number> = {};\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    const bucket = columnBuckets.value.findIndex((b) =>\n      b.some((entry) => entry.item.key === item.key),\n    );\n    if (bucket >= 0) map[item.key] = bucket;\n  }\n  return { columns: cols, columnMap: map };\n});\n\nwatch(layoutColumnMap, (val) => {\n  emit('layoutChange', val);\n}, { immediate: true });\n\n// ─── CSS class/style helpers ──────────────────────────────────────────────────\n\nfunction getItemClasses(item: BMasonryItem, columnIndex: number) {\n  const base = ['b-masonry__item'];\n  if (!classNames) return base;\n\n  if (typeof classNames === 'function') {\n    const extra = classNames(item, columnIndex);\n    if (extra) base.push(...(Array.isArray(extra) ? extra : [extra as string]));\n  } else if (typeof classNames.item === 'function') {\n    const extra = classNames.item(item, columnIndex);\n    if (extra) base.push(...(Array.isArray(extra) ? extra : [extra as string]));\n  } else if (typeof classNames.item === 'string') {\n    base.push(classNames.item);\n  }\n  return base;\n}\n\nfunction getItemStyles(item: BMasonryItem, columnIndex: number): Record<string, string> {\n  if (!styles) return {};\n  if (typeof styles === 'function') return styles(item, columnIndex) ?? {};\n  if (typeof styles.item === 'function') return styles.item(item, columnIndex) ?? {};\n  if (styles.item && typeof styles.item === 'object') return styles.item as Record<string, string>;\n  return {};\n}\n\nfunction getColumnClasses(_colIndex: number): string[] {\n  const base = ['b-masonry__column'];\n  if (!classNames || typeof classNames === 'function') return base;\n  if (classNames.column) base.push(classNames.column);\n  return base;\n}\n\nfunction getColumnStyles(_colIndex: number): Record<string, string> {\n  if (!styles || typeof styles === 'function') return {};\n  return (styles.column as Record<string, string>) ?? {};\n}\n\nconst rootClasses = computed(() => {\n  const base = ['b-masonry'];\n  if (!classNames || typeof classNames === 'function') return base;\n  if (classNames.root) base.push(classNames.root);\n  return base;\n});\n\nconst rootStyles = computed(() => {\n  const base: Record<string, string> = {\n    '--b-masonry-columns': String(resolvedColumns.value),\n    '--b-masonry-col-gap': `${resolvedGutter.value[0]}px`,\n    '--b-masonry-row-gap': `${resolvedGutter.value[1]}px`,\n  };\n  if (styles && typeof styles === 'object' && !('root' in styles) === false) {\n    const s = styles as { root?: Record<string, string> };\n    if (s.root) Object.assign(base, s.root);\n  }\n  return base;\n});\n\n// ─── Lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(() => {\n  updateWidth();\n\n  if (typeof ResizeObserver !== 'undefined') {\n    containerObserver = new ResizeObserver(() => updateWidth());\n    if (rootEl.value) containerObserver.observe(rootEl.value);\n  } else {\n    // SSR / no ResizeObserver: listen to window resize\n    window.addEventListener('resize', updateWidth);\n  }\n\n  if (fresh) setupItemObserver();\n});\n\nwatch(\n  () => fresh,\n  (enabled) => {\n    if (enabled) {\n      setupItemObserver();\n    } else {\n      itemObserver?.disconnect();\n      itemObserver = null;\n      itemHeights.value = {};\n    }\n  },\n);\n\nonBeforeUnmount(() => {\n  containerObserver?.disconnect();\n  itemObserver?.disconnect();\n  window.removeEventListener('resize', updateWidth);\n});\n</script>\n\n<template>\n  <!-- role=\"list\" lets screen readers announce item count -->\n  <div\n    ref=\"rootEl\"\n    :class=\"rootClasses\"\n    :style=\"rootStyles\"\n    role=\"list\"\n    aria-label=\"Masonry layout\"\n  >\n    <!-- Column-based layout: each column is a flex column -->\n    <div\n      v-for=\"(bucket, colIdx) in columnBuckets\"\n      :key=\"colIdx\"\n      :class=\"getColumnClasses(colIdx)\"\n      :style=\"getColumnStyles(colIdx)\"\n      role=\"presentation\"\n    >\n      <div\n        v-for=\"{ item, originalIndex } in bucket\"\n        :key=\"item.key\"\n        :ref=\"(el) => registerItemEl(item.key, el as Element | null)\"\n        :data-masonry-key=\"item.key\"\n        :class=\"getItemClasses(item, colIdx)\"\n        :style=\"getItemStyles(item, colIdx)\"\n        role=\"listitem\"\n      >\n        <!-- Named item slot (prop-driven items) -->\n        <slot v-if=\"$slots.item\" name=\"item\" :item=\"item\" :index=\"originalIndex\" :column=\"colIdx\" />\n        <!-- Default slot fallback when using raw children (no items prop) -->\n        <template v-else>\n          <slot />\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────────────────────────────────────\n   BMasonry — CSS custom properties (scoped to component root)\n   ───────────────────────────────────────────────────────────────────────────── */\n.b-masonry {\n  /* Layout tokens */\n  --b-masonry-columns: 3;\n  --b-masonry-col-gap: 0px;\n  --b-masonry-row-gap: 0px;\n\n  /* Item tokens */\n  --b-masonry-item-transition-duration: 200ms;\n  --b-masonry-item-transition-timing: ease;\n  --b-masonry-item-border-radius: 0px;\n  --b-masonry-item-bg: transparent;\n\n  /* ── Layout ── */\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--b-masonry-col-gap);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ── Column ── */\n.b-masonry__column {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--b-masonry-row-gap);\n}\n\n/* ── Item ── */\n.b-masonry__item {\n  width: 100%;\n  box-sizing: border-box;\n  background: var(--b-masonry-item-bg);\n  border-radius: var(--b-masonry-item-border-radius);\n  transition:\n    transform var(--b-masonry-item-transition-duration) var(--b-masonry-item-transition-timing),\n    opacity var(--b-masonry-item-transition-duration) var(--b-masonry-item-transition-timing);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-masonry {\n  /* Tokens that shift in dark mode — override as needed by the consumer */\n  --b-masonry-item-bg: transparent;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-masonry {\n    /* Tokens that shift in dark mode — override as needed by the consumer */\n    --b-masonry-item-bg: transparent;\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-masonry {\n    --b-masonry-item-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system122.js","names":[],"sources":["../src/components/BInputNumber/BInputNumber.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BInputStatus, BInputVariant } from '@/components/BInput/types.ts';\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport type { BInputNumberFocusOptions, BInputNumberStepInfo } from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  size = BCommonSize.Medium,\n  variant = BInputVariant.Outlined,\n  min = Number.MIN_SAFE_INTEGER,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled = false,\n  readOnly = false,\n  controls = true,\n  keyboard = true,\n  changeOnBlur = true,\n  changeOnWheel = false,\n  placeholder,\n  id,\n  precision,\n  formatter,\n  parser,\n  decimalSeparator,\n  stringMode = false,\n  status,\n} = defineProps<{\n  /** The size of the input number. */\n  size?: `${BCommonSize}`;\n  /** Visual variant of the input number. */\n  variant?: `${BInputVariant}`;\n  /** Validation status. */\n  status?: `${BInputStatus}`;\n  /** Minimum value allowed. */\n  min?: number;\n  /** Maximum value allowed. */\n  max?: number;\n  /** Increment/decrement step amount. */\n  step?: number;\n  /** Whether the input number is disabled. */\n  disabled?: boolean;\n  /** Whether the input number is read-only. */\n  readOnly?: boolean;\n  /** Whether to show +/- controls. */\n  controls?: boolean;\n  /** Whether keyboard up/down changes value. */\n  keyboard?: boolean;\n  /** Whether to trigger change on blur (e.g. reset out-of-range). */\n  changeOnBlur?: boolean;\n  /** Whether mouse wheel changes value. */\n  changeOnWheel?: boolean;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** HTML id attribute. */\n  id?: string;\n  /** Decimal precision for display. */\n  precision?: number;\n  /** Format the displayed value. */\n  formatter?: (value: string | number) => string;\n  /** Parse the formatted value back to a number. */\n  parser?: (displayValue: string) => string;\n  /** Custom decimal separator character. */\n  decimalSeparator?: string;\n  /** Use string mode for high-precision decimals. */\n  stringMode?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when value changes. */\n  change: [value: number | null];\n  /** Fired when Enter key is pressed. */\n  pressEnter: [event: KeyboardEvent];\n  /** Fired on step (button, keyboard, or wheel). */\n  step: [value: number | null, info: BInputNumberStepInfo];\n  /** Fired on input focus. */\n  focus: [event: FocusEvent];\n  /** Fired on input blur. */\n  blur: [event: FocusEvent];\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id ?? `b-input-number-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isFocused = ref(false);\nconst displayValue = ref('');\n\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\n\nconst isUpDisabled = computed(() => {\n  if (disabled || readOnly) return true;\n  if (model.value === null) return false;\n  return model.value >= max;\n});\n\nconst isDownDisabled = computed(() => {\n  if (disabled || readOnly) return true;\n  if (model.value === null) return false;\n  return model.value <= min;\n});\n\nfunction toFixedPrecision(val: number): number {\n  if (precision !== undefined) {\n    return parseFloat(val.toFixed(precision));\n  }\n  const stepStr = String(step);\n  const stepDecimals = stepStr.includes('.') ? stepStr.split('.')[1].length : 0;\n  if (stepDecimals > 0) {\n    return parseFloat(val.toFixed(stepDecimals));\n  }\n  return val;\n}\n\nfunction clamp(val: number): number {\n  return Math.min(max, Math.max(min, val));\n}\n\nfunction formatValue(val: number | null): string {\n  if (val === null) return '';\n  let str: string;\n  if (precision !== undefined) {\n    str = val.toFixed(precision);\n  } else {\n    str = String(val);\n  }\n  if (decimalSeparator) {\n    str = str.replace('.', decimalSeparator);\n  }\n  if (formatter) {\n    return formatter(stringMode ? str : val);\n  }\n  return str;\n}\n\nfunction parseInput(input: string): number | null {\n  if (!input.trim()) return null;\n  let parsed = input;\n  if (parser) {\n    parsed = parser(input);\n  } else if (decimalSeparator) {\n    parsed = parsed.replace(decimalSeparator, '.');\n  }\n  const num = Number(parsed);\n  if (isNaN(num)) return model.value;\n  return num;\n}\n\nfunction syncDisplay() {\n  displayValue.value = formatValue(model.value);\n}\n\nfunction updateValue(newVal: number | null, triggerChange = true) {\n  if (newVal !== null) {\n    newVal = toFixedPrecision(clamp(newVal));\n  }\n  const changed = newVal !== model.value;\n  model.value = newVal;\n  syncDisplay();\n  if (changed && triggerChange) {\n    emit('change', newVal);\n  }\n}\n\nfunction stepValue(direction: 'up' | 'down') {\n  if (disabled || readOnly) return;\n  const current = model.value ?? 0;\n  const offset = direction === 'up' ? step : -step;\n  const next = toFixedPrecision(current + offset);\n  const clamped = clamp(next);\n  updateValue(clamped);\n  emit('step', clamped, { offset: step, type: direction });\n}\n\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  displayValue.value = target.value;\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    commitValue();\n    emit('pressEnter', e);\n  }\n  if (!keyboard) return;\n  if (e.key === 'ArrowUp') {\n    e.preventDefault();\n    stepValue('up');\n  } else if (e.key === 'ArrowDown') {\n    e.preventDefault();\n    stepValue('down');\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  isFocused.value = true;\n  emit('focus', e);\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  isFocused.value = false;\n  if (changeOnBlur) {\n    commitValue();\n  }\n  emit('blur', e);\n};\n\nconst handleWheel = (e: WheelEvent) => {\n  if (!changeOnWheel || disabled || readOnly || !isFocused.value) return;\n  e.preventDefault();\n  if (e.deltaY < 0) {\n    stepValue('up');\n  } else if (e.deltaY > 0) {\n    stepValue('down');\n  }\n};\n\nfunction commitValue() {\n  const parsed = parseInput(displayValue.value);\n  if (parsed === null) {\n    updateValue(null);\n  } else {\n    updateValue(parsed);\n  }\n}\n\nconst focus = (options?: BInputNumberFocusOptions) => {\n  inputRef.value?.focus({ preventScroll: options?.preventScroll });\n  if (options?.cursor && inputRef.value) {\n    const len = inputRef.value.value.length;\n    switch (options.cursor) {\n      case 'start':\n        inputRef.value.setSelectionRange(0, 0);\n        break;\n      case 'end':\n        inputRef.value.setSelectionRange(len, len);\n        break;\n      case 'all':\n        inputRef.value.setSelectionRange(0, len);\n        break;\n    }\n  }\n};\n\nconst blur = () => {\n  inputRef.value?.blur();\n};\n\nwatch(\n  () => model.value,\n  () => {\n    if (!isFocused.value) {\n      syncDisplay();\n    }\n  },\n  { immediate: true },\n);\n\ndefineExpose({ focus, blur });\n</script>\n\n<template>\n  <span\n    class=\"b-input-number\"\n    :class=\"[\n      `b-input-number--${size}`,\n      `b-input-number--${variant}`,\n      {\n        'b-input-number--focused': isFocused,\n        'b-input-number--disabled': disabled,\n        'b-input-number--readonly': readOnly,\n        'b-input-number--error': status === BInputStatus.Error,\n        'b-input-number--warning': status === BInputStatus.Warning,\n        'b-input-number--has-controls': controls,\n      },\n    ]\"\n  >\n    <span class=\"b-input-number__wrapper\">\n      <span v-if=\"hasPrefix\" class=\"b-input-number__prefix\" aria-hidden=\"true\">\n        <slot name=\"prefix\" />\n      </span>\n\n      <input\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        :value=\"displayValue\"\n        type=\"text\"\n        inputmode=\"decimal\"\n        role=\"spinbutton\"\n        :aria-valuenow=\"model ?? undefined\"\n        :aria-valuemin=\"min !== Number.MIN_SAFE_INTEGER ? min : undefined\"\n        :aria-valuemax=\"max !== Number.MAX_SAFE_INTEGER ? max : undefined\"\n        :aria-invalid=\"status === BInputStatus.Error ? true : undefined\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        class=\"b-input-number__input\"\n        @input=\"handleInput\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @wheel=\"handleWheel\"\n      />\n\n      <span v-if=\"hasSuffix\" class=\"b-input-number__suffix\" aria-hidden=\"true\">\n        <slot name=\"suffix\" />\n      </span>\n\n      <span v-if=\"controls\" class=\"b-input-number__handler-wrap\" aria-hidden=\"true\">\n        <span\n          class=\"b-input-number__handler b-input-number__handler--up\"\n          :class=\"{ 'b-input-number__handler--disabled': isUpDisabled }\"\n          role=\"button\"\n          tabindex=\"-1\"\n          aria-label=\"Increase value\"\n          :aria-disabled=\"isUpDisabled\"\n          @mousedown.prevent=\"!isUpDisabled && stepValue('up')\"\n        >\n          <svg\n            viewBox=\"0 0 1024 1024\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h286c2.1 0 4.2-.8 5.7-2.3l70.3-70.3 70.3 70.3c1.5 1.5 3.5 2.3 5.7 2.3h286c6.5 0 10.3-7.4 6.5-12.7z\"\n            />\n          </svg>\n        </span>\n        <span\n          class=\"b-input-number__handler b-input-number__handler--down\"\n          :class=\"{ 'b-input-number__handler--disabled': isDownDisabled }\"\n          role=\"button\"\n          tabindex=\"-1\"\n          aria-label=\"Decrease value\"\n          :aria-disabled=\"isDownDisabled\"\n          @mousedown.prevent=\"!isDownDisabled && stepValue('down')\"\n        >\n          <svg\n            viewBox=\"0 0 1024 1024\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z\"\n            />\n          </svg>\n        </span>\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n.b-input-number {\n  --b-input-number-active-bg: #ffffff;\n  --b-input-number-active-border-color: #1677ff;\n  --b-input-number-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-input-number-addon-bg: rgba(0, 0, 0, 0.02);\n  --b-input-number-control-width: 90px;\n  --b-input-number-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-input-number-filled-handle-bg: #f0f0f0;\n  --b-input-number-handle-active-bg: rgba(0, 0, 0, 0.02);\n  --b-input-number-handle-bg: #ffffff;\n  --b-input-number-handle-border-color: #d9d9d9;\n  --b-input-number-handle-font-size: 7px;\n  --b-input-number-handle-hover-color: #1677ff;\n  --b-input-number-handle-width: 22px;\n  --b-input-number-hover-bg: #ffffff;\n  --b-input-number-hover-border-color: #4096ff;\n  --b-input-number-font-size: 14px;\n  --b-input-number-font-size-lg: 16px;\n  --b-input-number-font-size-sm: 14px;\n  --b-input-number-padding-block: 4px;\n  --b-input-number-padding-block-lg: 7px;\n  --b-input-number-padding-block-sm: 0px;\n  --b-input-number-padding-inline: 11px;\n  --b-input-number-padding-inline-lg: 11px;\n  --b-input-number-padding-inline-sm: 7px;\n  --b-input-number-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-input-number-border-color: #d9d9d9;\n  --b-input-number-bg: #ffffff;\n  --b-input-number-color: rgba(0, 0, 0, 0.88);\n  --b-input-number-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-input-number-border-radius: 6px;\n  --b-input-number-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-number-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-input-number-error-border-color: #ff4d4f;\n  --b-input-number-error-hover-border-color: #ff7875;\n  --b-input-number-warning-border-color: #faad14;\n  --b-input-number-warning-hover-border-color: #ffc53d;\n  --b-input-number-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-number-filled-hover-bg: rgba(0, 0, 0, 0.04);\n\n  display: inline-flex;\n  align-items: stretch;\n  width: var(--b-input-number-control-width);\n  font-size: var(--b-input-number-font-size);\n  color: var(--b-input-number-color);\n  line-height: 1.5714;\n}\n\n.b-input-number--lg {\n  font-size: var(--b-input-number-font-size-lg);\n}\n\n.b-input-number--sm {\n  font-size: var(--b-input-number-font-size-sm);\n}\n\n.b-input-number__wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  transition: all 0.2s;\n}\n\n/* Outlined */\n.b-input-number--outlined .b-input-number__wrapper {\n  background: var(--b-input-number-bg);\n  border: 1px solid var(--b-input-number-border-color);\n  border-radius: var(--b-input-number-border-radius);\n}\n\n.b-input-number--outlined:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  border-color: var(--b-input-number-hover-border-color);\n  background: var(--b-input-number-hover-bg);\n}\n\n.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-active-border-color);\n  background: var(--b-input-number-active-bg);\n  box-shadow: var(--b-input-number-active-shadow);\n}\n\n/* Filled */\n.b-input-number--filled .b-input-number__wrapper {\n  background: var(--b-input-number-filled-bg);\n  border: 1px solid transparent;\n  border-radius: var(--b-input-number-border-radius);\n}\n\n.b-input-number--filled:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  background: var(--b-input-number-filled-hover-bg);\n}\n\n.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  background: var(--b-input-number-active-bg);\n  border-color: var(--b-input-number-active-border-color);\n  box-shadow: var(--b-input-number-active-shadow);\n}\n\n/* Borderless */\n.b-input-number--borderless .b-input-number__wrapper {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--b-input-number-border-radius);\n}\n\n/* Underlined */\n.b-input-number--underlined .b-input-number__wrapper {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--b-input-number-border-color);\n  border-radius: 0;\n}\n\n.b-input-number--underlined:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-hover-border-color);\n}\n\n.b-input-number--underlined.b-input-number--focused .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-active-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-active-border-color);\n}\n\n/* Error */\n.b-input-number--error.b-input-number--outlined .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-border-color);\n}\n\n.b-input-number--error.b-input-number--outlined:not(.b-input-number--disabled):hover\n  .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-hover-border-color);\n}\n\n.b-input-number--error.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper,\n.b-input-number--error.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-border-color);\n  box-shadow: var(--b-input-number-error-active-shadow);\n}\n\n.b-input-number--error.b-input-number--underlined .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-error-border-color);\n}\n\n.b-input-number--error.b-input-number--underlined.b-input-number--focused .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-error-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-error-border-color);\n}\n\n/* Warning */\n.b-input-number--warning.b-input-number--outlined .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-border-color);\n}\n\n.b-input-number--warning.b-input-number--outlined:not(.b-input-number--disabled):hover\n  .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-hover-border-color);\n}\n\n.b-input-number--warning.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper,\n.b-input-number--warning.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-border-color);\n  box-shadow: var(--b-input-number-warning-active-shadow);\n}\n\n.b-input-number--warning.b-input-number--underlined .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-warning-border-color);\n}\n\n.b-input-number--warning.b-input-number--underlined.b-input-number--focused\n  .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-warning-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-warning-border-color);\n}\n\n/* Disabled */\n.b-input-number--disabled .b-input-number__wrapper {\n  background: var(--b-input-number-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-input-number--disabled .b-input-number__input {\n  color: var(--b-input-number-disabled-color);\n  cursor: not-allowed;\n}\n\n/* Input element */\n.b-input-number__input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  text-align: left;\n}\n\n.b-input-number--md .b-input-number__input {\n  padding: var(--b-input-number-padding-block) var(--b-input-number-padding-inline);\n}\n\n.b-input-number--lg .b-input-number__input {\n  padding: var(--b-input-number-padding-block-lg) var(--b-input-number-padding-inline-lg);\n}\n\n.b-input-number--sm .b-input-number__input {\n  padding: var(--b-input-number-padding-block-sm) var(--b-input-number-padding-inline-sm);\n}\n\n.b-input-number--has-controls .b-input-number__input {\n  padding-right: calc(var(--b-input-number-handle-width) + 2px);\n}\n\n.b-input-number__input::placeholder {\n  color: var(--b-input-number-placeholder-color);\n}\n\n/* Prefix & Suffix */\n.b-input-number__prefix,\n.b-input-number__suffix {\n  display: inline-flex;\n  align-items: center;\n  color: var(--b-input-number-color);\n  flex-shrink: 0;\n}\n\n.b-input-number__prefix {\n  margin-left: var(--b-input-number-padding-inline);\n}\n\n.b-input-number__suffix {\n  margin-right: var(--b-input-number-padding-inline);\n}\n\n.b-input-number__prefix ~ .b-input-number__input {\n  padding-left: 4px;\n}\n\n/* Handler (step buttons) */\n.b-input-number__handler-wrap {\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: var(--b-input-number-handle-width);\n  border-left: 1px solid var(--b-input-number-handle-border-color);\n  border-radius: 0 var(--b-input-number-border-radius) var(--b-input-number-border-radius) 0;\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.b-input-number:hover .b-input-number__handler-wrap,\n.b-input-number--focused .b-input-number__handler-wrap {\n  opacity: 1;\n}\n\n.b-input-number__handler {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  background: var(--b-input-number-handle-bg);\n  font-size: var(--b-input-number-handle-font-size);\n  color: rgba(0, 0, 0, 0.45);\n  user-select: none;\n  transition:\n    color 0.2s,\n    background 0.2s;\n}\n\n.b-input-number__handler:hover {\n  color: var(--b-input-number-handle-hover-color);\n  background: var(--b-input-number-handle-active-bg);\n}\n\n.b-input-number__handler--up {\n  border-bottom: 1px solid var(--b-input-number-handle-border-color);\n}\n\n.b-input-number__handler--disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.b-input-number__handler svg {\n  width: 0.5em;\n  height: 0.5em;\n}\n\n/* Filled variant handler */\n.b-input-number--filled .b-input-number__handler {\n  background: var(--b-input-number-filled-handle-bg);\n}\n\n/* Borderless / underlined: hide handler border */\n.b-input-number--borderless .b-input-number__handler-wrap,\n.b-input-number--underlined .b-input-number__handler-wrap {\n  border-left-color: transparent;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-input-number {\n  --b-input-number-active-bg: #141414;\n  --b-input-number-active-border-color: #1668dc;\n  --b-input-number-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-input-number-addon-bg: rgba(255, 255, 255, 0.04);\n  --b-input-number-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n  --b-input-number-filled-handle-bg: rgba(255, 255, 255, 0.12);\n  --b-input-number-handle-active-bg: rgba(255, 255, 255, 0.04);\n  --b-input-number-handle-bg: #1f1f1f;\n  --b-input-number-handle-border-color: #424242;\n  --b-input-number-handle-hover-color: #3c89e8;\n  --b-input-number-hover-bg: #141414;\n  --b-input-number-hover-border-color: #3c89e8;\n  --b-input-number-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n  --b-input-number-border-color: #424242;\n  --b-input-number-bg: #141414;\n  --b-input-number-color: rgba(255, 255, 255, 0.88);\n  --b-input-number-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-input-number-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-number-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-input-number-error-border-color: #dc3838;\n  --b-input-number-error-hover-border-color: #e86e6e;\n  --b-input-number-warning-border-color: #d1a300;\n  --b-input-number-warning-hover-border-color: #e8c631;\n  --b-input-number-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-number-filled-hover-bg: rgba(255, 255, 255, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-input-number {\n    --b-input-number-active-bg: #141414;\n    --b-input-number-active-border-color: #1668dc;\n    --b-input-number-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-input-number-addon-bg: rgba(255, 255, 255, 0.04);\n    --b-input-number-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n    --b-input-number-filled-handle-bg: rgba(255, 255, 255, 0.12);\n    --b-input-number-handle-active-bg: rgba(255, 255, 255, 0.04);\n    --b-input-number-handle-bg: #1f1f1f;\n    --b-input-number-handle-border-color: #424242;\n    --b-input-number-handle-hover-color: #3c89e8;\n    --b-input-number-hover-bg: #141414;\n    --b-input-number-hover-border-color: #3c89e8;\n    --b-input-number-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n    --b-input-number-border-color: #424242;\n    --b-input-number-bg: #141414;\n    --b-input-number-color: rgba(255, 255, 255, 0.88);\n    --b-input-number-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-input-number-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-number-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-input-number-error-border-color: #dc3838;\n    --b-input-number-error-hover-border-color: #e86e6e;\n    --b-input-number-warning-border-color: #d1a300;\n    --b-input-number-warning-hover-border-color: #e8c631;\n    --b-input-number-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-number-filled-hover-bg: rgba(255, 255, 255, 0.12);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-input-number__wrapper,\n  .b-input-number__handler-wrap,\n  .b-input-number__handler {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}