@studiolxd/brand 47.1.0 → 48.1.0

package/dist/tree-view.js

@@ -1,165 +1,166 @@
 'use client';
 import './tree-view.css';
-import { Icon as e } from "./icon.js";
-import { useCallback as t, useId as n, useMemo as r, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { useCallback as n, useId as r, useMemo as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/stories/molecules/TreeView/TreeView.tsx
-var c = 500;
-function l(e, t, n = 1, r) {
+var l = 500;
+function u(e, t, n = 1, r) {
 	return e.flatMap((e) => [{
 		node: e,
 		level: n,
 		parentId: r
-	}, ...e.children && t.has(e.id) ? l(e.children, t, n + 1, e.id) : []]);
+	}, ...e.children && t.has(e.id) ? u(e.children, t, n + 1, e.id) : []]);
 }
-function u({ items: u, expanded: d, defaultExpanded: f, onExpandedChange: p, selected: m, defaultSelected: h, onSelectedChange: g, label: _ = "Árbol", truncateFromLevel: v = 4, nodeRef: y, className: b, ...x }) {
-	let S = n(), C = i(null), [w, T] = a(f ?? []), E = d !== void 0, D = E ? d : w, [O, k] = a(h), A = m !== void 0, j = A ? m : O, M = r(() => new Set(D), [D]), N = r(() => l(u, M), [u, M]), [P, F] = a(void 0), I = P && N.some((e) => e.node.id === P) ? P : j && N.some((e) => e.node.id === j) ? j : N[0]?.node.id, L = i(""), R = i(0), z = t((e) => {
-		E || T(e), p?.(e);
-	}, [E, p]), B = t((e, t) => {
-		let n = M.has(e), r = t ?? !n;
-		r !== n && z(r ? [...D, e] : D.filter((t) => t !== e));
+function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, selected: h, defaultSelected: g, onSelectedChange: _, label: v, truncateFromLevel: y = 4, nodeRef: b, className: x, ...S }) {
+	let C = e("treeView"), w = r(), T = a(null), [E, D] = o(p ?? []), O = f !== void 0, k = O ? f : E, [A, j] = o(g), M = h !== void 0, N = M ? h : A, P = i(() => new Set(k), [k]), F = i(() => u(d, P), [d, P]), [I, L] = o(void 0), R = I && F.some((e) => e.node.id === I) ? I : N && F.some((e) => e.node.id === N) ? N : F[0]?.node.id, z = a(""), B = a(0), V = n((e) => {
+		O || D(e), m?.(e);
+	}, [O, m]), H = n((e, t) => {
+		let n = P.has(e), r = t ?? !n;
+		r !== n && V(r ? [...k, e] : k.filter((t) => t !== e));
 	}, [
-		D,
-		M,
-		z
-	]), V = t((e) => {
-		A || k(e), g?.(e);
-	}, [A, g]), H = t((e) => {
-		let t = N.filter((t) => t.parentId === e.parentId && t.node.children?.length).map((e) => e.node.id).filter((e) => !M.has(e));
-		t.length !== 0 && z([...D, ...t]);
+		k,
+		P,
+		V
+	]), U = n((e) => {
+		M || j(e), _?.(e);
+	}, [M, _]), W = n((e) => {
+		let t = F.filter((t) => t.parentId === e.parentId && t.node.children?.length).map((e) => e.node.id).filter((e) => !P.has(e));
+		t.length !== 0 && V([...k, ...t]);
 	}, [
-		D,
-		N,
-		M,
-		z
-	]), U = t((e) => `${S}-${e}`, [S]), W = t((e) => {
-		e && (F(e), C.current?.querySelector(`[data-tree-item="${CSS.escape(e)}"]`)?.focus());
-	}, []), G = t((e, t) => {
-		let n = Date.now(), r = n - R.current > c ? e : L.current + e;
-		L.current = r, R.current = n;
+		k,
+		F,
+		P,
+		V
+	]), G = n((e) => `${w}-${e}`, [w]), K = n((e) => {
+		e && (L(e), T.current?.querySelector(`[data-tree-item="${CSS.escape(e)}"]`)?.focus());
+	}, []), q = n((e, t) => {
+		let n = Date.now(), r = n - B.current > l ? e : z.current + e;
+		z.current = r, B.current = n;
 		let i = r.length === 1 ? t + 1 : Math.max(t, 0), a = r.toLowerCase();
-		for (let e = 0; e < N.length; e++) {
-			let t = N[(i + e) % N.length].node.id;
-			if ((C.current?.querySelector(`[data-tree-item="${CSS.escape(t)}"] > .tree-view__row .tree-view__label`)?.textContent ?? "").trim().toLowerCase().startsWith(a)) {
-				W(t);
+		for (let e = 0; e < F.length; e++) {
+			let t = F[(i + e) % F.length].node.id;
+			if ((T.current?.querySelector(`[data-tree-item="${CSS.escape(t)}"] > .tree-view__row .tree-view__label`)?.textContent ?? "").trim().toLowerCase().startsWith(a)) {
+				K(t);
 				return;
 			}
 		}
-	}, [N, W]);
-	function K(e, t) {
-		let { node: n, parentId: r } = t, i = N.findIndex((e) => e.node.id === n.id), a = !!n.children?.length, o = M.has(n.id);
+	}, [F, K]);
+	function J(e, t) {
+		let { node: n, parentId: r } = t, i = F.findIndex((e) => e.node.id === n.id), a = !!n.children?.length, o = P.has(n.id);
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), W(N[i + 1]?.node.id);
+				e.preventDefault(), K(F[i + 1]?.node.id);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), W(N[i - 1]?.node.id);
+				e.preventDefault(), K(F[i - 1]?.node.id);
 				break;
 			case "ArrowRight":
-				e.preventDefault(), a && !o ? B(n.id, !0) : a && o && W(N[i + 1]?.node.id);
+				e.preventDefault(), a && !o ? H(n.id, !0) : a && o && K(F[i + 1]?.node.id);
 				break;
 			case "ArrowLeft":
-				e.preventDefault(), a && o ? B(n.id, !1) : r && W(r);
+				e.preventDefault(), a && o ? H(n.id, !1) : r && K(r);
 				break;
 			case "Home":
-				e.preventDefault(), W(N[0]?.node.id);
+				e.preventDefault(), K(F[0]?.node.id);
 				break;
 			case "End":
-				e.preventDefault(), W(N[N.length - 1]?.node.id);
+				e.preventDefault(), K(F[F.length - 1]?.node.id);
 				break;
 			case "Enter":
 			case " ":
-				e.preventDefault(), n.disabled || V(n.id);
+				e.preventDefault(), n.disabled || U(n.id);
 				break;
 			case "*":
-				e.preventDefault(), H(t);
+				e.preventDefault(), W(t);
 				break;
 			default:
-				e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), G(e.key, i));
+				e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), q(e.key, i));
 				break;
 		}
 	}
-	function q(t, n, r) {
-		return t.map((t) => {
-			let i = !!t.children?.length, a = i && M.has(t.id), c = j === t.id, l = a && t.iconExpanded || t.icon, u = n >= v, d = u && typeof t.label == "string" ? t.label : void 0, f = t.dropTarget ? "target" : t.dropDisabled ? "disabled" : void 0;
-			return /* @__PURE__ */ s("li", {
+	function Y(e, n, r) {
+		return e.map((e) => {
+			let i = !!e.children?.length, a = i && P.has(e.id), o = N === e.id, l = a && e.iconExpanded || e.icon, u = n >= y, d = u && typeof e.label == "string" ? e.label : void 0, f = e.dropTarget ? "target" : e.dropDisabled ? "disabled" : void 0;
+			return /* @__PURE__ */ c("li", {
 				role: "treeitem",
-				"data-tree-item": t.id,
-				"aria-labelledby": U(t.id),
+				"data-tree-item": e.id,
+				"aria-labelledby": G(e.id),
 				"aria-expanded": i ? a : void 0,
-				"aria-selected": c,
+				"aria-selected": o,
 				"aria-level": n,
-				"aria-disabled": t.disabled || void 0,
+				"aria-disabled": e.disabled || void 0,
 				"data-drop": f,
-				tabIndex: I === t.id ? 0 : -1,
+				tabIndex: R === e.id ? 0 : -1,
 				className: [
 					"tree-view__item",
-					c ? "tree-view__item--selected" : "",
-					t.disabled ? "tree-view__item--disabled" : "",
-					t.dropTarget ? "tree-view__item--drop-target" : "",
-					t.dropDisabled ? "tree-view__item--drop-disabled" : ""
+					o ? "tree-view__item--selected" : "",
+					e.disabled ? "tree-view__item--disabled" : "",
+					e.dropTarget ? "tree-view__item--drop-target" : "",
+					e.dropDisabled ? "tree-view__item--drop-disabled" : ""
 				].filter(Boolean).join(" "),
-				onKeyDown: (e) => {
-					e.target === e.currentTarget && K(e, {
-						node: t,
+				onKeyDown: (t) => {
+					t.target === t.currentTarget && J(t, {
+						node: e,
 						level: n,
 						parentId: r
 					});
 				},
-				onFocus: (e) => {
-					e.target === e.currentTarget && F(t.id);
+				onFocus: (t) => {
+					t.target === t.currentTarget && L(e.id);
 				},
-				onClick: t.disabled ? void 0 : (e) => {
-					e.stopPropagation(), i && B(t.id), V(t.id), W(t.id);
+				onClick: e.disabled ? void 0 : (t) => {
+					t.stopPropagation(), i && H(e.id), U(e.id), K(e.id);
 				},
-				children: [/* @__PURE__ */ s("span", {
+				children: [/* @__PURE__ */ c("span", {
 					className: "tree-view__row",
-					ref: y ? (e) => y(t.id, e) : void 0,
+					ref: b ? (t) => b(e.id, t) : void 0,
 					children: [
-						/* @__PURE__ */ o("span", {
+						/* @__PURE__ */ s("span", {
 							className: "tree-view__chevron-slot",
 							"aria-hidden": "true",
-							children: i && /* @__PURE__ */ o(e, {
+							children: i && /* @__PURE__ */ s(t, {
 								name: "chevron",
 								className: "tree-view__chevron",
 								size: "sm"
 							})
 						}),
-						l && /* @__PURE__ */ o("span", {
+						l && /* @__PURE__ */ s("span", {
 							className: "tree-view__icon",
 							"aria-hidden": "true",
 							children: l
 						}),
-						/* @__PURE__ */ o("span", {
+						/* @__PURE__ */ s("span", {
 							className: ["tree-view__label", u ? "tree-view__label--truncated" : ""].filter(Boolean).join(" "),
-							id: U(t.id),
+							id: G(e.id),
 							title: d,
-							children: t.label
+							children: e.label
 						}),
-						t.actions && /* @__PURE__ */ o("span", {
+						e.actions && /* @__PURE__ */ s("span", {
 							className: "tree-view__actions",
 							onClick: (e) => e.stopPropagation(),
 							onKeyDown: (e) => e.stopPropagation(),
 							onKeyUp: (e) => e.stopPropagation(),
-							children: t.actions
+							children: e.actions
 						})
 					]
-				}), i && a && /* @__PURE__ */ o("ul", {
+				}), i && a && /* @__PURE__ */ s("ul", {
 					role: "group",
 					className: "tree-view__group",
-					children: q(t.children, n + 1, t.id)
+					children: Y(e.children, n + 1, e.id)
 				})]
-			}, t.id);
+			}, e.id);
 		});
 	}
-	return /* @__PURE__ */ o("ul", {
-		ref: C,
+	return /* @__PURE__ */ s("ul", {
+		ref: T,
 		role: "tree",
-		"aria-label": _,
-		className: ["tree-view", b].filter(Boolean).join(" "),
-		...x,
-		children: q(u, 1)
+		"aria-label": C("label", v),
+		className: ["tree-view", x].filter(Boolean).join(" "),
+		...S,
+		children: Y(d, 1)
 	});
 }
 //#endregion
-export { u as TreeView };
+export { d as TreeView };

package/dist/uptime-bars.js

@@ -1,33 +1,34 @@
 'use client';
 import './uptime-bars.css';
-import { Tooltip as e } from "./tooltip.js";
-import { forwardRef as t, useRef as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Tooltip as t } from "./tooltip.js";
+import { forwardRef as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/molecules/UptimeBars/uptimeStatus.ts
-var o = {
+var s = {
 	ok: 99.65,
 	degraded: 95.83
 };
-function s(e, t) {
+function c(e, t) {
 	return e === null || !Number.isFinite(e) ? "empty" : e >= t.ok ? "ok" : e >= t.degraded ? "degraded" : "down";
 }
 //#endregion
 //#region src/stories/molecules/UptimeBars/UptimeBars.tsx
-var c = t(function({ points: t, summary: c, label: l = "Disponibilidad", startLabel: u, endLabel: d, thresholds: f, locale: p = "es-ES", maximumFractionDigits: m = 2, pointLabel: h, noDataLabel: g = "sin datos", tooltips: _ = !0, className: v, ...y }, b) {
-	let x = {
-		...o,
-		...f
-	}, S = n([]), [C, w] = r(0), T = new Intl.NumberFormat(p, {
+var l = n(function({ points: n, summary: l, label: u, startLabel: d, endLabel: f, thresholds: p, locale: m = "es-ES", maximumFractionDigits: h = 2, pointLabel: g, noDataLabel: _, tooltips: v = !0, className: y, ...b }, x) {
+	let S = e("uptimeBars"), C = {
+		...s,
+		...p
+	}, w = r([]), [T, E] = i(0), D = new Intl.NumberFormat(m, {
 		style: "percent",
-		maximumFractionDigits: m
-	}), E = (e) => e === null || !Number.isFinite(e) ? null : T.format(e / 100), D = (e, t) => {
-		if (h) return h(e, t);
-		let n = `${e.label}: ${t ?? g}`;
+		maximumFractionDigits: h
+	}), O = (e) => e === null || !Number.isFinite(e) ? null : D.format(e / 100), k = (e, t) => {
+		if (g) return g(e, t);
+		let n = `${e.label}: ${t ?? S("noData", _)}`;
 		return e.detail ? `${n}. ${e.detail}` : n;
-	}, O = (e) => {
-		let n = Math.max(0, Math.min(t.length - 1, e));
-		w(n), S.current[n]?.focus();
-	}, k = (e, n) => {
+	}, A = (e) => {
+		let t = Math.max(0, Math.min(n.length - 1, e));
+		E(t), w.current[t]?.focus();
+	}, j = (e, t) => {
 		let r = {
 			ArrowRight: 1,
 			ArrowDown: 1,
@@ -35,66 +36,66 @@ var c = t(function({ points: t, summary: c, label: l = "Disponibilidad", startLa
 			ArrowUp: -1
 		}[e.key];
 		if (r) {
-			e.preventDefault(), O(n + r);
+			e.preventDefault(), A(t + r);
 			return;
 		}
-		e.key === "Home" ? (e.preventDefault(), O(0)) : e.key === "End" && (e.preventDefault(), O(t.length - 1));
-	}, A = Math.max(0, Math.min(C, t.length - 1));
-	return /* @__PURE__ */ a("div", {
-		ref: b,
-		className: ["uptime-bars", v].filter(Boolean).join(" "),
-		...y,
-		children: [/* @__PURE__ */ i("ol", {
+		e.key === "Home" ? (e.preventDefault(), A(0)) : e.key === "End" && (e.preventDefault(), A(n.length - 1));
+	}, M = Math.max(0, Math.min(T, n.length - 1));
+	return /* @__PURE__ */ o("div", {
+		ref: x,
+		className: ["uptime-bars", y].filter(Boolean).join(" "),
+		...b,
+		children: [/* @__PURE__ */ a("ol", {
 			className: "uptime-bars__list",
-			"aria-label": l,
-			children: t.map((t, n) => {
-				let r = E(t.value), o = /* @__PURE__ */ i("span", {
-					className: `uptime-bars__bar uptime-bars__bar--${s(t.value, x)}`,
+			"aria-label": S("label", u),
+			children: n.map((e, n) => {
+				let r = O(e.value), i = /* @__PURE__ */ a("span", {
+					className: `uptime-bars__bar uptime-bars__bar--${c(e.value, C)}`,
 					role: "img",
-					"aria-label": D(t, r),
-					tabIndex: _ ? n === A ? 0 : -1 : void 0,
-					onKeyDown: _ ? (e) => k(e, n) : void 0,
-					onFocus: _ ? () => w(n) : void 0
+					"aria-label": k(e, r),
+					tabIndex: v ? n === M ? 0 : -1 : void 0,
+					onKeyDown: v ? (e) => j(e, n) : void 0,
+					onFocus: v ? () => E(n) : void 0
 				});
-				return /* @__PURE__ */ i("li", {
+				return /* @__PURE__ */ a("li", {
 					className: "uptime-bars__item",
-					children: _ ? /* @__PURE__ */ i(e, {
+					children: v ? /* @__PURE__ */ a(t, {
 						ref: (e) => {
-							S.current[n] = e;
+							w.current[n] = e;
 						},
-						label: /* @__PURE__ */ a("span", {
+						label: /* @__PURE__ */ o("span", {
 							className: "uptime-bars__tooltip",
 							children: [
-								/* @__PURE__ */ i("span", {
+								/* @__PURE__ */ a("span", {
 									className: "uptime-bars__tooltip-label",
-									children: t.label
+									children: e.label
 								}),
-								/* @__PURE__ */ i("span", { children: r ?? g }),
-								t.detail ? /* @__PURE__ */ i("span", { children: t.detail }) : null
+								/* @__PURE__ */ a("span", { children: r ?? S("noData", _) }),
+								e.detail ? /* @__PURE__ */ a("span", { children: e.detail }) : null
 							]
 						}),
-						children: o
-					}) : o
-				}, `${t.label}-${n}`);
+						children: i
+					}) : i
+				}, `${e.label}-${n}`);
 			})
-		}), /* @__PURE__ */ a("p", {
+		}), /* @__PURE__ */ o("p", {
 			className: "uptime-bars__footer",
 			children: [
-				/* @__PURE__ */ i("span", {
+				/* @__PURE__ */ a("span", {
 					className: "uptime-bars__edge",
-					children: u
+					children: d
 				}),
-				/* @__PURE__ */ i("span", {
+				/* @__PURE__ */ a("span", {
 					className: "uptime-bars__summary",
-					children: c
+					children: l
 				}),
-				/* @__PURE__ */ i("span", {
+				/* @__PURE__ */ a("span", {
 					className: "uptime-bars__edge uptime-bars__edge--end",
-					children: d
+					children: f
 				})
 			]
 		})]
 	});
 });
 //#endregion
-export { c as UptimeBars };
+export { l as UptimeBars };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "47.1.0",
+  "version": "48.1.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",

package/src/tokens/molecules/filter-bar.css

@@ -3,10 +3,9 @@
  */
 
 :root {
-  --filter-bar-column-min-inline-size: var(--field-row-cell-md); /** Ancho mínimo de una columna de filtros (192px, el de una celda normal de `FieldRow`): es lo que decide cuántas caben por fila —tres o cuatro en una tabla de administración— antes de apilarse */
   --filter-bar-gap: var(--form-gap); /** Aire entre la línea del buscador y la de los filtros: el mismo que separa dos campos de un formulario, porque eso es lo que son */
   --filter-bar-column-gap: var(--field-row-column-gap); /** Aire entre las columnas de filtros — el de las celdas de una fila de campos */
-  --filter-bar-row-gap: var(--field-row-row-gap); /** Aire entre las filas de filtros cuando la rejilla envuelve, y entre los filtros apilados en móvil */
+  --filter-bar-row-gap: var(--field-row-row-gap); /** Aire entre las filas de filtros cuando hay más de las que caben por punto de corte, y entre los filtros apilados en móvil */
   --filter-bar-actions-gap: var(--form-actions-gap); /** Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola */
   --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap)); /** El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px en la aplicación; en la superficie pública el rótulo es mayor y el renglón sube con él). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas */
   --filter-bar-control-block-size: var(--control-height); /** La caja de un campo de una línea (40px, la talla md del sistema; 48px en la superficie pública, que parte de lg). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez— */

package/src/tokens/scss/molecules/_filter-bar.scss

@@ -3,8 +3,7 @@
 
 $lxd-filter-bar-gap: 1.5rem; // Aire entre la línea del buscador y la de los filtros: el mismo que separa dos campos de un formulario, porque eso es lo que son
 $lxd-filter-bar-column-gap: 1rem; // Aire entre las columnas de filtros — el de las celdas de una fila de campos
-$lxd-filter-bar-row-gap: 0.75rem; // Aire entre las filas de filtros cuando la rejilla envuelve, y entre los filtros apilados en móvil
-$lxd-filter-bar-column-min-inline-size: 12rem; // Ancho mínimo de una columna de filtros (192px, el de una celda normal de `FieldRow`): es lo que decide cuántas caben por fila —tres o cuatro en una tabla de administración— antes de apilarse
+$lxd-filter-bar-row-gap: 0.75rem; // Aire entre las filas de filtros cuando hay más de las que caben por punto de corte, y entre los filtros apilados en móvil
 $lxd-filter-bar-actions-gap: 0.75rem; // Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola
 $lxd-filter-bar-label-offset: calc(0.875rem * 1.5 + 0.5rem); // El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px en la aplicación; en la superficie pública el rótulo es mayor y el renglón sube con él). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas
 $lxd-filter-bar-control-block-size: 2.5rem; // La caja de un campo de una línea (40px, la talla md del sistema; 48px en la superficie pública, que parte de lg). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez—

package/src/tokens/surface-public.css

@@ -207,7 +207,6 @@
   --field-row-empty-font-size: var(--text-paragraph-small-font-size);
   --file-upload-field-error-font-size: var(--form-error-font-size);
   --file-upload-field-helper-font-size: var(--form-helper-font-size);
-  --filter-bar-column-min-inline-size: var(--field-row-cell-md);
   --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap));
   --filter-bar-control-block-size: var(--control-height);
   --input-field-search-input-padding-inline-start: var(--input-field-search-slot-size);

package/src/tokens/tokens.json

@@ -2544,7 +2544,6 @@
   "--filter-bar-gap": "1.5rem",
   "--filter-bar-column-gap": "1rem",
   "--filter-bar-row-gap": "0.75rem",
-  "--filter-bar-column-min-inline-size": "12rem",
   "--filter-bar-actions-gap": "0.75rem",
   "--filter-bar-label-offset": "calc(0.875rem * 1.5 + 0.5rem)",
   "--filter-bar-control-block-size": "2.5rem",