@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/nav/nav.js

@@ -0,0 +1,481 @@
+import SvgExpandLess from "../../vendor/@material-design-icons/svg/outlined/expand_less.js";
+import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
+import { useSlidingIndicator } from "../../lib/sliding-indicator/use-sliding-indicator.js";
+import { Button } from "../button/button.js";
+import { Tooltip as Tooltip$1 } from "../tooltip/tooltip.js";
+import { NavContext } from "./nav-context.js";
+import { EntryShell, entryAttributes } from "./nav-item-view.js";
+import nav_module_default from "./nav.module.js";
+import { c } from "react/compiler-runtime";
+import { createContext, use, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { useRender } from "@base-ui/react/use-render";
+import { Collapsible } from "@base-ui/react/collapsible";
+// src/components/nav/nav.tsx
+var useOrientation = () => use(NavContext)?.orientation ?? "vertical";
+var Root = (t0) => {
+	const $ = c(24);
+	let children;
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({orientation: t1, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	const orientation = t1 === void 0 ? "vertical" : t1;
+	const [hint] = useState(_temp);
+	let t2;
+	if ($[5] !== hint || $[6] !== orientation) {
+		t2 = {
+			orientation,
+			hint
+		};
+		$[5] = hint;
+		$[6] = orientation;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== className) {
+		t3 = clsx(nav_module_default.root, className);
+		$[8] = className;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== children || $[11] !== orientation || $[12] !== props || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsx("nav", {
+			"data-orientation": orientation,
+			className: t3,
+			...props,
+			children
+		});
+		$[10] = children;
+		$[11] = orientation;
+		$[12] = props;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== orientation) {
+		t5 = (t6) => {
+			const { payload } = t6;
+			return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+				side: orientation === "vertical" ? "right" : "bottom",
+				className: nav_module_default.hintPositioner,
+				children: /* @__PURE__ */ jsx(Tooltip$1.Popup, { children: /* @__PURE__ */ jsx(Tooltip$1.Viewport, {
+					className: nav_module_default.hintViewport,
+					children: payload
+				}) })
+			}) });
+		};
+		$[15] = orientation;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== hint || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Tooltip$1.Root, {
+			handle: hint,
+			children: t5
+		});
+		$[17] = hint;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== t2 || $[21] !== t4 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(NavContext, {
+			value: t2,
+			children: [t4, t6]
+		});
+		$[20] = t2;
+		$[21] = t4;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
+};
+var ACTIVE_ENTRY = ":scope > li:has(> [aria-current=\"page\"]), :scope > li:has(> [data-active=\"true\"])";
+/**
+* The entries. In a horizontal nav a pill slides to the entry marked
+* `aria-current="page"` or `data-active="true"`.
+*/
+var List = (t0) => {
+	const $ = c(25);
+	let children;
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	const orientation = useOrientation();
+	const horizontal = orientation === "horizontal";
+	let t1;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			active: ACTIVE_ENTRY,
+			prefix: "--active-tab",
+			publishOn: "parent"
+		};
+		$[5] = t1;
+	} else t1 = $[5];
+	const indicator = useSlidingIndicator(t1);
+	let t2;
+	if ($[6] !== className) {
+		t2 = clsx(nav_module_default.list, className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== horizontal || $[9] !== indicator) {
+		t3 = horizontal ? /* @__PURE__ */ jsx("li", {
+			ref: indicator,
+			"aria-hidden": "true",
+			className: nav_module_default.indicator
+		}) : null;
+		$[8] = horizontal;
+		$[9] = indicator;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== children || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t3, children] });
+		$[11] = children;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== orientation || $[15] !== props || $[16] !== t2 || $[17] !== t4) {
+		t5 = {
+			"data-orientation": orientation,
+			className: t2,
+			...props,
+			children: t4
+		};
+		$[14] = orientation;
+		$[15] = props;
+		$[16] = t2;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== ref || $[20] !== t5) {
+		t6 = {
+			defaultTagName: "ul",
+			ref,
+			props: t5
+		};
+		$[19] = ref;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	const list = useRender(t6);
+	let t7;
+	if ($[22] !== horizontal || $[23] !== list) {
+		t7 = horizontal ? /* @__PURE__ */ jsx("div", {
+			className: nav_module_default.scroller,
+			children: list
+		}) : list;
+		$[22] = horizontal;
+		$[23] = list;
+		$[24] = t7;
+	} else t7 = $[24];
+	return t7;
+};
+var Item = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx("li", { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/**
+* A destination. It spreads every other prop onto the `<a>` and forwards its
+* ref, so a router's `createLink` can wrap it; the router's
+* `aria-current="page"` marks the current one.
+*/
+var Link = (t0) => {
+	const $ = c(22);
+	let className;
+	let label;
+	let labelled;
+	let layout;
+	let props;
+	if ($[0] !== t0) {
+		({layout, labelled, label, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = label;
+		$[3] = labelled;
+		$[4] = layout;
+		$[5] = props;
+	} else {
+		className = $[1];
+		label = $[2];
+		labelled = $[3];
+		layout = $[4];
+		props = $[5];
+	}
+	const orientation = useOrientation();
+	let t1;
+	if ($[6] !== label || $[7] !== labelled || $[8] !== layout) {
+		t1 = entryAttributes({
+			layout,
+			labelled,
+			label
+		});
+		$[6] = label;
+		$[7] = labelled;
+		$[8] = layout;
+		$[9] = t1;
+	} else t1 = $[9];
+	const t2 = orientation === "horizontal" ? nav_module_default.tab : nav_module_default.item;
+	let t3;
+	if ($[10] !== className || $[11] !== t2) {
+		t3 = clsx(t2, className);
+		$[10] = className;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== props || $[14] !== t1 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsx("a", {
+			...t1,
+			className: t3,
+			...props
+		});
+		$[13] = props;
+		$[14] = t1;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== label || $[18] !== labelled || $[19] !== layout || $[20] !== t4) {
+		t5 = /* @__PURE__ */ jsx(EntryShell, {
+			layout,
+			labelled,
+			label,
+			element: t4
+		});
+		$[17] = label;
+		$[18] = labelled;
+		$[19] = layout;
+		$[20] = t4;
+		$[21] = t5;
+	} else t5 = $[21];
+	return t5;
+};
+var GroupOpenContext = createContext(false);
+/**
+* A destination with subpages: a `GroupHeader` holding its own `Link` and a
+* `GroupToggle`, over a `GroupPanel` that folds the subpages open.
+*/
+var Group = (t0) => {
+	const $ = c(20);
+	let children;
+	let className;
+	let onOpenChange;
+	let open;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({open, defaultOpen: t1, onOpenChange, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = onOpenChange;
+		$[4] = open;
+		$[5] = props;
+		$[6] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		onOpenChange = $[3];
+		open = $[4];
+		props = $[5];
+		t1 = $[6];
+	}
+	const [own, setOwn] = useState(t1 === void 0 ? false : t1);
+	const current = open ?? own;
+	let t2;
+	if ($[7] !== onOpenChange) {
+		t2 = (next) => {
+			setOwn(next);
+			onOpenChange?.(next);
+		};
+		$[7] = onOpenChange;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== className) {
+		t3 = clsx(nav_module_default.group, className);
+		$[9] = className;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== children || $[12] !== current || $[13] !== props || $[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Collapsible.Root, {
+			open: current,
+			onOpenChange: t2,
+			className: t3,
+			...props,
+			children
+		});
+		$[11] = children;
+		$[12] = current;
+		$[13] = props;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== current || $[18] !== t4) {
+		t5 = /* @__PURE__ */ jsx(GroupOpenContext, {
+			value: current,
+			children: t4
+		});
+		$[17] = current;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
+	return t5;
+};
+/** The group's row: its own `Link`, then its `GroupToggle`. Filled while that link is current. */
+var GroupHeader = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(nav_module_default.groupHeader, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var GroupToggle = (t0) => {
+	const $ = c(4);
+	const { label } = t0;
+	const t1 = use(GroupOpenContext) ? SvgExpandLess : SvgExpandMore;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Collapsible.Trigger, {});
+		$[0] = t2;
+	} else t2 = $[0];
+	let t3;
+	if ($[1] !== label || $[2] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			iconOnly: true,
+			className: nav_module_default.groupToggle,
+			icon: t1,
+			label,
+			render: t2
+		});
+		$[1] = label;
+		$[2] = t1;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+};
+var GroupPanel = (t0) => {
+	const $ = c(5);
+	const { className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(nav_module_default.groupList, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Collapsible.Panel, {
+			className: nav_module_default.groupPanel,
+			children: /* @__PURE__ */ jsx("ul", {
+				className: t1,
+				children
+			})
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/**
+* Navigation between pages as `nav > ul > li > a`: a horizontal bar of tabs
+* with a pill that slides to the current page, or the app's vertical rail,
+* whose destinations with subpages fold them open in a `Group`. An entry that
+* is not a link is a `NavItemView.Root`.
+*
+* @example
+* const NavLink = createLink(Nav.Link);
+*
+* <Nav.Root aria-label="Main">
+* 	<Nav.List>
+* 		<Nav.Item>
+* 			<NavLink to="/" label="Home" activeOptions={{ exact: true }}>
+* 				<NavItemView.Icon svg={HomeIcon} />
+* 				<NavItemView.Label>Home</NavItemView.Label>
+* 			</NavLink>
+* 		</Nav.Item>
+* 	</Nav.List>
+* </Nav.Root>
+*/
+var Nav = {
+	Root,
+	List,
+	Item,
+	Link,
+	Group,
+	GroupHeader,
+	GroupToggle,
+	GroupPanel
+};
+function _temp() {
+	return Tooltip.createHandle();
+}
+export { Nav };

package/dist/components/nav/nav.module.js

@@ -0,0 +1,32 @@
+import './nav.css';// src/components/nav/nav.module.scss
+var scroller = "_scroller_t5y6k_3";
+var list = "_list_t5y6k_7";
+var indicator = "_indicator_t5y6k_21";
+var tab = "_tab_t5y6k_59";
+var iconSlot = "_iconSlot_t5y6k_103";
+var item = "_item_t5y6k_109";
+var label = "_label_t5y6k_165";
+var hintPositioner = "_hintPositioner_t5y6k_211";
+var hintViewport = "_hintViewport_t5y6k_220";
+var group = "_group_t5y6k_233";
+var groupHeader = "_groupHeader_t5y6k_237";
+var groupToggle = "_groupToggle_t5y6k_253";
+var groupPanel = "_groupPanel_t5y6k_256";
+var groupList = "_groupList_t5y6k_271";
+var nav_module_default = {
+	scroller,
+	list,
+	indicator,
+	tab,
+	iconSlot,
+	item,
+	label,
+	hintPositioner,
+	hintViewport,
+	group,
+	groupHeader,
+	groupToggle,
+	groupPanel,
+	groupList
+};
+export { nav_module_default as default, group, groupHeader, groupList, groupPanel, groupToggle, hintPositioner, hintViewport, iconSlot, indicator, item, label, list, scroller, tab };

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./number-field.tsx";
+export * from "./number-field-formats.ts";
+export * from "./number-input.tsx";
+export * from "./tsf-number-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/number-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/number-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}

package/dist/components/number-field/index.js

@@ -0,0 +1,5 @@
+import { NumberField } from "./number-field.js";
+import { currencyFormat, percentFormat, unitFormat } from "./number-field-formats.js";
+import { NumberInput } from "./number-input.js";
+import { TSFNumberField } from "./tsf-number-field.js";
+export { NumberField, NumberInput, TSFNumberField, currencyFormat, percentFormat, unitFormat };

package/dist/components/number-field/number-field-formats.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Number format for a money amount, symbol included, in euro unless told
+ * otherwise.
+ *
+ * @example
+ * <NumberField format={currencyFormat("USD")} … />
+ */
+export declare const currencyFormat: (currency?: string) => Intl.NumberFormatOptions;
+/**
+ * Number format for a percentage, where the value is the percentage itself
+ * rather than a fraction: `25` renders as `25%`.
+ *
+ * @example
+ * <NumberField format={percentFormat()} … />
+ */
+export declare const percentFormat: (maximumFractionDigits?: number) => Intl.NumberFormatOptions;
+/**
+ * Number format for a measured quantity, using a CLDR unit identifier such as
+ * `hour`, `minute` or `kilometer`.
+ *
+ * @example
+ * <NumberField format={unitFormat("hour")} … />
+ */
+export declare const unitFormat: (unit: string, maximumFractionDigits?: number) => Intl.NumberFormatOptions;
+//# sourceMappingURL=number-field-formats.d.ts.map

package/dist/components/number-field/number-field-formats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-formats.d.ts","sourceRoot":"","sources":["../../../src/components/number-field/number-field-formats.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,cAChB,MAAM,KACd,IAAI,CAAC,mBAMN,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,2BACF,MAAM,KAC3B,IAAI,CAAC,mBAKN,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,SAChB,MAAM,0BACW,MAAM,KAC3B,IAAI,CAAC,mBAKN,CAAC"}

package/dist/components/number-field/number-field-formats.js

@@ -0,0 +1,43 @@
+// src/components/number-field/number-field-formats.ts
+var CENT_DIGITS = 2;
+/**
+* Number format for a money amount, symbol included, in euro unless told
+* otherwise.
+*
+* @example
+* <NumberField format={currencyFormat("USD")} … />
+*/
+var currencyFormat = (currency = "EUR") => ({
+	style: "currency",
+	currency,
+	currencyDisplay: "symbol",
+	minimumFractionDigits: CENT_DIGITS,
+	maximumFractionDigits: CENT_DIGITS
+});
+/**
+* Number format for a percentage, where the value is the percentage itself
+* rather than a fraction: `25` renders as `25%`.
+*
+* @example
+* <NumberField format={percentFormat()} … />
+*/
+var percentFormat = (maximumFractionDigits = CENT_DIGITS) => ({
+	style: "unit",
+	unit: "percent",
+	unitDisplay: "narrow",
+	maximumFractionDigits
+});
+/**
+* Number format for a measured quantity, using a CLDR unit identifier such as
+* `hour`, `minute` or `kilometer`.
+*
+* @example
+* <NumberField format={unitFormat("hour")} … />
+*/
+var unitFormat = (unit, maximumFractionDigits = CENT_DIGITS) => ({
+	style: "unit",
+	unit,
+	unitDisplay: "short",
+	maximumFractionDigits
+});
+export { currencyFormat, percentFormat, unitFormat };

package/dist/components/number-field/number-field.css

@@ -0,0 +1,110 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_9fvwz_3 {
+    min-inline-size: 0;
+  }
+  ._wrapper_9fvwz_6 {
+    display: contents;
+  }
+  ._group_9fvwz_9 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+    border: 1px solid var(--sys-color-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--sys-color-surface);
+    padding: var(--sys-unit-6);
+    color: var(--field-fg);
+    font: var(--sys-font-body-medium);
+  }
+  ._group_9fvwz_9 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._group_9fvwz_9[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._group_9fvwz_9 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._group_9fvwz_9:hover:not([data-disabled], [data-readonly]), ._group_9fvwz_9[data-focused], ._group_9fvwz_9[data-popup-open] {
+    border-color: var(--sys-color-primary);
+  }
+  ._group_9fvwz_9[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._group_9fvwz_9[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._group_9fvwz_9[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._group_9fvwz_9[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._group_9fvwz_9 {
+    position: relative;
+    display: flex;
+    gap: var(--sys-unit-4);
+  }
+  ._group_9fvwz_9 {
+    inline-size: 100%;
+  }
+  ._input_9fvwz_67 {
+    flex: 1;
+    min-inline-size: 0;
+    border: none;
+    background: none;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    text-align: var(--number-field-text-align, end);
+    cursor: text;
+    line-height: normal;
+  }
+  ._input_9fvwz_67::placeholder {
+    color: var(--field-muted-fg);
+  }
+  ._inlay_9fvwz_83 {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--sys-unit-2);
+    color: var(--field-muted-fg);
+    font: var(--sys-font-body-medium);
+    cursor: default;
+    pointer-events: none;
+    line-height: normal;
+  }
+  ._action_9fvwz_94 {
+    position: relative;
+    flex: none;
+    margin-block: calc(-1 * var(--sys-unit-6));
+    cursor: pointer;
+  }
+  @media (any-pointer: coarse) {
+    ._action_9fvwz_94::before {
+      content: "";
+      position: absolute;
+      inset: 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, var(--sys-unit-22));
+      block-size: var(--sys-unit-22);
+    }
+  }
+}