@0001-labs/design-system-1 0.3.0 → 0.3.1

package/dist/design-system-1.bundle.js

@@ -2260,6 +2260,198 @@ function initGridFit() {
 	fit();
 }
 //#endregion
+//#region DS1/0-face/fault-lines.ts
+var tolerance = 1;
+var near$1 = (a, b) => Math.abs(a - b) <= tolerance;
+var style = (el) => el.ownerDocument.defaultView.getComputedStyle(el);
+var visible$1 = (el) => {
+	const box = el.getBoundingClientRect();
+	return box.width > 0 && box.height > 0 && style(el).visibility !== "hidden" && style(el).display !== "none";
+};
+/** Walk each open shadow tree once; slotted children already occur in the light tree. */
+function elements(root) {
+	return Array.from(root.querySelectorAll("*")).flatMap((el) => [el, ...el.shadowRoot ? elements(el.shadowRoot) : []]);
+}
+/** Related grids opt in by name; unlabelled card grids are candidates for human review. */
+function faultLineGrids(root) {
+	return elements(root).flatMap((element) => {
+		const family = element.getAttribute("data-ds-fault-lines");
+		if (family === "off" || !visible$1(element)) return [];
+		const children = Array.from(element.children).filter(visible$1);
+		if (!children.length) return [];
+		if (family === null && (!/grid/.test(style(element).display) || children.length < 2 || !children.every((child) => child.matches("ds-card, .ds-card, ds-button, button")))) return [];
+		const axis = element.getAttribute("data-ds-fault-axis") === "y" ? "y" : "x";
+		const boxes = children.map((child) => child.getBoundingClientRect());
+		const crossStart = (box) => axis === "x" ? box.top : box.left;
+		const crossEnd = (box) => axis === "x" ? box.bottom : box.right;
+		const start = (box) => axis === "x" ? box.left : box.top;
+		const end = (box) => axis === "x" ? box.right : box.bottom;
+		const bands = [];
+		for (const box of boxes.sort((a, b) => crossStart(a) - crossStart(b))) {
+			const band = bands.find((row) => near$1(crossStart(row[0]), crossStart(box)));
+			if (band) band.push(box);
+			else bands.push([box]);
+		}
+		const band = [...bands].sort((a, b) => b.length - a.length)[0].sort((a, b) => start(a) - start(b));
+		const lines = band.flatMap((box) => [start(box), end(box)]);
+		const gaps = band.slice(1).map((box, index) => start(box) - end(band[index]));
+		const crossGaps = bands.slice(1).map((row, index) => Math.min(...row.map(crossStart)) - Math.max(...bands[index].map(crossEnd)));
+		const internalDrift = bands.some((row) => row.length === band.length && row.slice().sort((a, b) => start(a) - start(b)).some((box, index) => !near$1(start(box), lines[index * 2]) || !near$1(end(box), lines[index * 2 + 1]))) || crossGaps.some((gap) => !near$1(gap, crossGaps[0]));
+		return [{
+			element,
+			family,
+			axis,
+			lines,
+			gaps,
+			crossGap: crossGaps[0],
+			internalDrift,
+			start: lines[0],
+			end: lines[lines.length - 1]
+		}];
+	});
+}
+function referenceFor(grids, i) {
+	const current = grids[i];
+	return grids.slice(0, i).find((other) => {
+		if (other.axis !== current.axis || other.lines.length !== current.lines.length) return false;
+		if (current.family !== null || other.family !== null) return current.family !== null && current.family === other.family;
+		return near$1(current.start, other.start) && near$1(current.end, other.end);
+	});
+}
+/** Fault lines compare rendered tracks across separate sections, in the current viewport. */
+function inspectFaultLines(root) {
+	const grids = faultLineGrids(root);
+	const findings = [];
+	for (let i = 0; i < grids.length; i++) {
+		const current = grids[i];
+		if (current.internalDrift) findings.push({
+			element: current.element,
+			...current.family === null ? { review: true } : {},
+			message: `Fault lines at ${current.element.ownerDocument.documentElement.clientWidth}px: tracks or repeated gaps drift inside ${current.family || "this card grid"}. Align its complete rows and repeated spacing.`
+		});
+		const reference = referenceFor(grids, i);
+		if (!reference) continue;
+		const drift = current.lines.map((line, index) => Math.abs(line - reference.lines[index]));
+		const gapDrift = current.gaps.some((gap, index) => !near$1(gap, reference.gaps[index]));
+		const rowDrift = current.crossGap !== void 0 && reference.crossGap !== void 0 && !near$1(current.crossGap, reference.crossGap);
+		if (!drift.some((value) => value > tolerance) && !gapDrift && !rowDrift) continue;
+		const width = current.element.ownerDocument.documentElement.clientWidth;
+		const review = current.family === null;
+		findings.push({
+			element: current.element,
+			...review ? { review: true } : {},
+			message: `Fault lines at ${width}px: ${current.family || "these card grids"} ${review ? "may be related but have" : "have"} misaligned ${current.axis === "x" ? "column" : "row"} edges or unequal gaps (edge drift ${Math.round(Math.max(...drift))}px; gaps ${current.gaps.map(Math.round).join("/")}px versus ${reference.gaps.map(Math.round).join("/")}px${rowDrift ? `; cross-axis gap ${Math.round(current.crossGap)}px versus ${Math.round(reference.crossGap)}px` : ""}). ${review ? "Name the related groups with data-ds-fault-lines to enforce alignment, or mark an intentional exception off." : "Use the same tracks and gap for this family at this viewport."}`
+		});
+	}
+	return findings;
+}
+/** The same rendered geometry as the checker, painted without affecting layout or hit testing. */
+function paintFaultLines(root, layer) {
+	const doc = layer.ownerDocument;
+	const width = doc.documentElement.clientWidth;
+	const height = doc.defaultView.innerHeight;
+	layer.setAttribute("viewBox", `0 0 ${width} ${height}`);
+	layer.setAttribute("width", String(width));
+	layer.setAttribute("height", String(height));
+	layer.setAttribute("aria-hidden", "true");
+	layer.style.cssText = "position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2147483644";
+	layer.replaceChildren();
+	const grids = faultLineGrids(root);
+	const failed = new Set(inspectFaultLines(root).map((finding) => finding.element));
+	const drawn = /* @__PURE__ */ new Set();
+	const referenceInk = "#087ba8";
+	const faultInk = "#de0331";
+	function mark(tag, attributes, title) {
+		const node = doc.createElementNS("http://www.w3.org/2000/svg", tag);
+		for (const [key, value] of Object.entries(attributes)) node.setAttribute(key, String(value));
+		if (title) {
+			const tip = doc.createElementNS(node.namespaceURI, "title");
+			tip.textContent = title;
+			node.appendChild(tip);
+		}
+		layer.appendChild(node);
+		return node;
+	}
+	for (let index = 0; index < grids.length; index++) {
+		const grid = grids[index];
+		const reference = referenceFor(grids, index) ?? grid;
+		for (const edge of reference.lines) {
+			const key = `${grid.axis}:${edge}`;
+			if (drawn.has(key)) continue;
+			drawn.add(key);
+			mark("line", {
+				"data-fault-reference": "",
+				x1: grid.axis === "x" ? edge : 0,
+				y1: grid.axis === "y" ? edge : 0,
+				x2: grid.axis === "x" ? edge : width,
+				y2: grid.axis === "y" ? edge : height,
+				stroke: referenceInk,
+				"stroke-width": 1,
+				"stroke-dasharray": "4 4"
+			}, "Reference edge");
+		}
+		if (!failed.has(grid.element)) continue;
+		for (const child of Array.from(grid.element.children).filter(visible$1)) {
+			const box = child.getBoundingClientRect();
+			const edges = grid.axis === "x" ? [box.left, box.right] : [box.top, box.bottom];
+			for (const edge of edges) {
+				if (reference.lines.some((expected) => near$1(edge, expected))) continue;
+				mark("line", {
+					"data-fault-actual": "",
+					x1: grid.axis === "x" ? edge : box.left,
+					y1: grid.axis === "y" ? edge : box.top,
+					x2: grid.axis === "x" ? edge : box.right,
+					y2: grid.axis === "y" ? edge : box.bottom,
+					stroke: faultInk,
+					"stroke-width": 2
+				}, "Actual edge differs from the dashed reference");
+			}
+		}
+		const rows = [];
+		for (const child of Array.from(grid.element.children).filter(visible$1)) {
+			const box = child.getBoundingClientRect();
+			const start = grid.axis === "x" ? box.top : box.left;
+			const row = rows.find((row) => near$1(grid.axis === "x" ? row[0].top : row[0].left, start));
+			if (row) row.push(box);
+			else rows.push([box]);
+		}
+		rows.sort((a, b) => grid.axis === "x" ? a[0].top - b[0].top : a[0].left - b[0].left);
+		const bounds = grid.element.getBoundingClientRect();
+		const crossGap = reference.crossGap ?? grid.crossGap;
+		if (crossGap !== void 0) for (let row = 1; row < rows.length; row++) {
+			const previousEnd = Math.max(...rows[row - 1].map((box) => grid.axis === "x" ? box.bottom : box.right));
+			const actual = Math.min(...rows[row].map((box) => grid.axis === "x" ? box.top : box.left));
+			const expected = previousEnd + crossGap;
+			if (near$1(actual, expected)) continue;
+			for (const [edge, kind] of [[expected, "reference"], [actual, "actual"]]) mark("line", {
+				[`data-fault-${kind}`]: "",
+				x1: grid.axis === "x" ? bounds.left : edge,
+				y1: grid.axis === "x" ? edge : bounds.top,
+				x2: grid.axis === "x" ? bounds.right : edge,
+				y2: grid.axis === "x" ? edge : bounds.bottom,
+				stroke: kind === "reference" ? referenceInk : faultInk,
+				"stroke-width": kind === "reference" ? 1 : 2,
+				"stroke-dasharray": kind === "reference" ? "4 4" : ""
+			}, `Row gap ${Math.round(actual - previousEnd)}px; reference ${Math.round(crossGap)}px`);
+		}
+		const box = grid.element.getBoundingClientRect();
+		const label = mark("text", {
+			"data-fault-gap": "",
+			x: Math.max(4, box.left),
+			y: Math.max(16, Math.min(height - 4, box.top + 16)),
+			fill: faultInk,
+			stroke: "var(--ds-background-color, white)",
+			"stroke-width": 3,
+			"paint-order": "stroke",
+			"font-family": "var(--ds-typeface-regular, sans-serif)",
+			"font-size": 12
+		});
+		const gaps = grid.gaps.map((gap) => Math.round(gap)).join("/");
+		const expected = reference.gaps.map((gap) => Math.round(gap)).join("/");
+		label.textContent = `Gap ${gaps || "—"}px · reference ${expected || "—"}px` + (grid.crossGap !== void 0 && reference.crossGap !== void 0 && !near$1(grid.crossGap, reference.crossGap) ? ` · row gap ${Math.round(grid.crossGap)}px / ${Math.round(reference.crossGap)}px` : "");
+	}
+}
+//#endregion
 //#region DS1/0-face/button-label.ts
 function labelledButtons(root) {
 	return [...root.querySelectorAll("ds-button:not([icon]):not([split]),button:not(ds-button button),a[role=\"button\"]")].filter((button) => button.getBoundingClientRect().width && (button.textContent?.trim() || button.getAttribute("text")));
@@ -2635,6 +2827,11 @@ function inspectWordWrap(root) {
 }
 //#endregion
 //#region DS1/0-face/constraints.ts
+/** The actual initial, including a component nested in another open shadow root. */
+function isAvatarInitial(element) {
+	for (let parent = element; parent; parent = parent.assignedSlot ?? parent.parentElement ?? parent.getRootNode().host ?? null) if (parent.matches("ds-avatar, .ds-avatar")) return true;
+	return false;
+}
 /** A pixel either way is the same place. */
 var near = (a, b) => Math.abs(a - b) <= 1;
 var px = (n) => `${Math.round(n)}px`;
@@ -2697,6 +2894,19 @@ function rows(found) {
 	return groups.filter((row) => row.length > 1);
 }
 var constraints = [
+	{
+		code: "page.fault-lines",
+		rule: "Fault lines keep related card and control grids aligned across the whole page, with matching track edges and gaps at every checked viewport width.",
+		why: "Compare separate sections in the same alignment family; responsive layouts may change together, while unrelated groups and intentional exceptions remain independent.",
+		components: ["ds-page"],
+		check: {
+			file: "tests/fault-lines.test.ts",
+			test: "fault lines catch shifted tracks and unequal gaps across sections at each viewport"
+		},
+		measures: ["alignment group", "alignment groups"],
+		count: (root) => faultLineGrids(root).length,
+		inspect: inspectFaultLines
+	},
 	{
 		code: "select.hug",
 		rule: "Select and date-picker triggers use hug sizing, never fill sizing or growing to occupy the available row.",
@@ -2759,6 +2969,19 @@ var constraints = [
 		count: (root) => measureTextContrast(root).length,
 		inspect: inspectTextContrast
 	},
+	{
+		code: "avatar.initial-contrast",
+		rule: "Avatar initials have at least 4.5:1 contrast against their rendered fill, including after a theme or identity colour changes.",
+		why: "Check each initial inside the avatar’s shadow root and in overlapping groups; decorative initials still need to be readable. Explicit ink overrides must pass too.",
+		components: ["ds-avatar"],
+		check: {
+			file: "tests/avatar-contrast.test.ts",
+			test: "avatar initials stay readable after theme and CSS-variable changes, and the avatar constraint catches overrides"
+		},
+		measures: ["avatar initial", "avatar initials"],
+		count: (root) => measureTextContrast(root).filter((result) => isAvatarInitial(result.element)).length,
+		inspect: (root) => inspectTextContrast(root).filter((finding) => isAvatarInitial(finding.element))
+	},
 	{
 		code: "card.media-level",
 		rule: "A card's picture stands on the card's foot, a square below the words at least, so the pictures of cards side by side stand on one level whatever the words above them.",
@@ -2925,14 +3148,16 @@ function skillBlock(list = constraints) {
 	lines.push("", skillEnd);
 	return lines.join("\n");
 }
-//#endregion
-//#region DS1/0-face/constraint-site.ts
-/** The narrowest phone still sold, the common ones and the widest. */
-var PHONE_WIDTHS = [
-	320,
-	375,
-	393,
-	430
+var VIEWPORT_WIDTHS = [
+	...[
+		320,
+		375,
+		393,
+		430
+	],
+	768,
+	1024,
+	1440
 ];
 /** An element as a person finds it: its tag, id and classes, and the start of its words. */
 function describeElement(element) {
@@ -2972,7 +3197,7 @@ var wait = (ms) => new Promise((done) => setTimeout(done, ms));
 * order of `widths`. The page reflows at each width without loading again. The address carries `ph=out`,
 * the analytics opt-out most trackers honour, so the check counts no visits.
 */
-async function inspectInFrame(host, url, widths = PHONE_WIDTHS, height = 844) {
+async function inspectInFrame(host, url, widths = VIEWPORT_WIDTHS, height = 844) {
 	const frame = document.createElement("iframe");
 	frame.setAttribute("aria-hidden", "true");
 	frame.tabIndex = -1;
@@ -3032,7 +3257,7 @@ function checkPage(page) {
 * each width as it comes. Stops starting pages when `signal` aborts. Whatever the pages store in this
 * browser while they are checked is put back afterwards.
 */
-async function checkSite({ pages, widths = PHONE_WIDTHS, inspect, onResult, signal, atOnce = 3 }) {
+async function checkSite({ pages, widths = VIEWPORT_WIDTHS, inspect, onResult, signal, atOnce = 3 }) {
 	const kept = storedNow();
 	const results = [];
 	const total = pages.length * widths.length;
@@ -3149,7 +3374,8 @@ function createConstraintPanel() {
       --danger: var(--ds-danger-color, light-dark(#de0331, #ff5f5f));
     }
     :host([hidden]) { display: none !important; }
-    .rings { position: absolute; inset: 0; overflow: hidden; }
+    .fault-lines { z-index: 0 !important; }
+    .rings { z-index: 1; position: absolute; inset: 0; overflow: hidden; }
     .frames { position: absolute; width: 0; height: 0; overflow: hidden; }
     .ring {
       position: absolute;
@@ -3171,6 +3397,7 @@ function createConstraintPanel() {
       text-align: center;
     }
     aside {
+      z-index: 2;
       position: absolute;
       inset-block: 0;
       inset-inline-end: 0;
@@ -3217,14 +3444,18 @@ function createConstraintPanel() {
     .code b { color: var(--danger); font-weight: 400; }
     .rule { color: var(--muted); }
     p { margin: 0; }
+    :host([data-lines-only]) aside { inset-block: 0 auto; width: auto; padding: calc(var(--u) / 2); }
+    :host([data-lines-only]) aside > :not(header), :host([data-lines-only]) header > :not([data-lines], [data-close]) { display: none; }
+    :host([data-lines-only]) header { margin: 0; }
     @media print { :host { display: none !important; } }
-  </style><div class="rings"></div><div class="frames"></div><aside aria-label="Constraints">
-    <header><strong>Constraints</strong><button type="button" data-run>Page</button><button type="button" data-site>Site</button><button type="button" data-close aria-label="Close">Close</button></header>
-    <p data-status aria-live="polite"></p>
+  </style><svg class="fault-lines" aria-hidden="true"></svg><div class="rings"></div><div class="frames"></div><aside aria-label="Constraints">
+    <header><strong>Constraints</strong><button type="button" data-run>Page</button><button type="button" data-site>Site</button><button type="button" data-lines>Lines</button><button type="button" data-close aria-label="Close">Close</button></header>
+    <p data-status aria-live="polite"></p><p class="rule">Fault lines: dashed reference · red drift</p>
     <ol data-findings></ol>
     <section data-rules hidden><h3>Rules</h3><ol></ol></section>
     <section data-pages hidden><h3>Pages</h3><ol></ol></section>
   </aside>`;
+	const faultLines = shadow.querySelector(".fault-lines");
 	const rings = shadow.querySelector(".rings");
 	const list = shadow.querySelector("[data-findings]");
 	const rulesSection = shadow.querySelector("[data-rules]");
@@ -3234,6 +3465,12 @@ function createConstraintPanel() {
 	const status = shadow.querySelector("[data-status]");
 	const title = shadow.querySelector("strong");
 	const frames = shadow.querySelector(".frames");
+	const linesButton = shadow.querySelector("[data-lines]");
+	const setLinesOnly = (enabled) => {
+		panel.toggleAttribute("data-lines-only", enabled);
+		linesButton.textContent = enabled ? "Results" : "Lines";
+	};
+	linesButton.addEventListener("click", () => setLinesOnly(!panel.hasAttribute("data-lines-only")));
 	const siteButton = shadow.querySelector("[data-site]");
 	let site = null;
 	let findings = [];
@@ -3241,6 +3478,7 @@ function createConstraintPanel() {
 	let frame = 0;
 	const place = () => {
 		frame = 0;
+		paintFaultLines(document, faultLines);
 		rings.replaceChildren(...findings.map(({ element }, index) => {
 			const rect = element.getBoundingClientRect();
 			const ring = document.createElement("div");
@@ -3256,6 +3494,8 @@ function createConstraintPanel() {
 	const schedule = () => {
 		if (!frame) frame = requestAnimationFrame(place);
 	};
+	const layoutChanges = new MutationObserver(schedule);
+	const sizeChanges = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
 	const stopSite = () => {
 		site?.abort();
 		site = null;
@@ -3408,7 +3648,7 @@ function createConstraintPanel() {
 		title.textContent = "Constraints";
 		status.textContent = "Finding the pages…";
 		const pages = await findSitePages();
-		const widths = `${PHONE_WIDTHS.slice(0, -1).join(", ")} and ${PHONE_WIDTHS[PHONE_WIDTHS.length - 1]}px`;
+		const widths = `${VIEWPORT_WIDTHS.slice(0, -1).join(", ")} and ${VIEWPORT_WIDTHS[VIEWPORT_WIDTHS.length - 1]}px`;
 		let broken = 0;
 		const results = await checkSite({
 			pages,
@@ -3435,8 +3675,22 @@ function createConstraintPanel() {
 	const show = (mode = "page") => {
 		if (!panel.isConnected) document.body.appendChild(panel);
 		panel.hidden = false;
+		setLinesOnly(window.innerWidth < 640);
 		if (mode === "site") runSite();
 		else run();
+		layoutChanges.observe(document.body, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"hidden",
+				"data-ds-fault-lines",
+				"data-ds-fault-axis"
+			]
+		});
+		sizeChanges?.observe(document.body);
 		window.addEventListener("scroll", schedule, {
 			passive: true,
 			capture: true
@@ -3446,6 +3700,11 @@ function createConstraintPanel() {
 	const hide = () => {
 		stopSite();
 		panel.hidden = true;
+		if (frame) cancelAnimationFrame(frame);
+		frame = 0;
+		faultLines.replaceChildren();
+		layoutChanges.disconnect();
+		sizeChanges?.disconnect();
 		window.removeEventListener("scroll", schedule, { capture: true });
 		window.removeEventListener("resize", schedule);
 	};
@@ -5030,7 +5289,7 @@ function define(name, element) {
 	const type = element;
 	const prototype = element.prototype;
 	const original = prototype.createRenderRoot;
-	if (original) {
+	if (original && typeof document !== "undefined") {
 		const definingDocument = document;
 		prototype.createRenderRoot = function() {
 			var _this$renderOptions;
@@ -5884,7 +6143,7 @@ _Badge.styles = r$4(ds_badge_default);
 define("ds-badge", Badge);
 //#endregion
 //#region DS1/2-core/styles/ds-tag.css?inline
-var ds_tag_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: max-content;\n  max-width: 100%;\n  min-width: 0;\n  vertical-align: bottom;\n  /* The tag's own tokens, unset by default and in unscaled px: its height, side padding,\n     corners and text size; --ds-tag-accent colours it. */\n  --_tag-size: var(--ds-tag-size);\n  --_tag-height: calc(var(--_tag-size) * var(--ds-sf, 1));\n  --_tag-padding-size: var(--ds-tag-padding-size);\n  --_tag-padding: calc(var(--_tag-padding-size) * var(--ds-sf, 1));\n  --_tag-corner-size: var(--ds-tag-corner-size);\n  --_tag-radius: calc(var(--_tag-corner-size) * var(--ds-sf, 1));\n  --_tag-text-size: var(--ds-tag-text-size);\n  --_tag-font-size: calc(var(--_tag-text-size) * var(--ds-sf, 1));\n}\n:host([hidden]) { display: none !important; }\n/* The face stays one control high at the foot of its box, on the lower sixteen,\n   even when a row stretches the tag to a square. */\n.frame {\n  display: block;\n  align-self: flex-end;\n  box-sizing: border-box;\n  max-width: 100%;\n  padding-inline: var(--_tag-padding, calc(4px * var(--ds-sf, 1)));\n  border-radius: var(--_tag-radius, var(--ds-radius));\n  background: var(--ds-tag-background, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 28%, white), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 20%, var(--ds-black, #2a2a2a))));\n  color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), var(--ds-tag-accent, var(--ds-grey, #7a7a7a))));\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--_tag-font-size, var(--ds-type-size-default));\n  line-height: var(--_tag-height, var(--ds-control-height));\n  letter-spacing: var(--ds-type-letterspacing-default);\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n/* The words in a box of their own, so cut words fade over their last square\n   while the fill stays whole; never an ellipsis (0-face/cut-fade.ts marks them). */\n.words {\n  display: block;\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:host(:dir(rtl)) .words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n";
+var ds_tag_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: max-content;\n  max-width: 100%;\n  min-width: 0;\n  vertical-align: bottom;\n  /* The tag's own tokens, unset by default and in unscaled px: its height, side padding,\n     corners and text size; --ds-tag-accent colours it. */\n  --_tag-size: var(--ds-tag-size);\n  --_tag-height: calc(var(--_tag-size) * var(--ds-sf, 1));\n  --_tag-padding-size: var(--ds-tag-padding-size);\n  --_tag-padding: calc(var(--_tag-padding-size) * var(--ds-sf, 1));\n  --_tag-corner-size: var(--ds-tag-corner-size);\n  --_tag-radius: calc(var(--_tag-corner-size) * var(--ds-sf, 1));\n  --_tag-text-size: var(--ds-tag-text-size);\n  --_tag-font-size: calc(var(--_tag-text-size) * var(--ds-sf, 1));\n}\n:host([hidden]) { display: none !important; }\n/* The face stays one control high at the foot of its box, on the lower sixteen,\n   even when a row stretches the tag to a square. */\n.frame {\n  display: block;\n  align-self: flex-end;\n  box-sizing: border-box;\n  max-width: 100%;\n  padding-inline: var(--_tag-padding, calc(4px * var(--ds-sf, 1)));\n  border-radius: var(--_tag-radius, var(--ds-radius));\n  background: var(--ds-tag-background, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 28%, white), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 20%, var(--ds-black, #2a2a2a))));\n  /* Tint the dark-mode ink: raw grey/accent colours cannot meet 4.5:1 on this fill. */\n  color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 30%, white)));\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--_tag-font-size, var(--ds-type-size-default));\n  line-height: var(--_tag-height, var(--ds-control-height));\n  letter-spacing: var(--ds-type-letterspacing-default);\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n/* The words in a box of their own, so cut words fade over their last square\n   while the fill stays whole; never an ellipsis (0-face/cut-fade.ts marks them). */\n.words {\n  display: block;\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:host(:dir(rtl)) .words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n";
 //#endregion
 //#region DS1/2-core/ds-tag.ts
 var _Tag;
@@ -6206,10 +6465,10 @@ _Control.properties = { disabled: {
 } };
 //#endregion
 //#region DS1/2-core/styles/ds-button-host.css?inline
-var ds_button_host_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-button.css */\n\n:host([control=\"host\"]),\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  box-sizing: border-box !important;\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: var(--ds-button-align, flex-start) !important;\n  gap: var(--ds-button-gap, calc(4px * var(--ds-sf))) !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  /* Important, so a page's `* { padding: 0 }` reset cannot reach it: the\n     padding is set through --ds-button-padding. */\n  padding: var(--ds-button-padding, 0) !important;\n  border-radius: var(--_button-radius, var(--ds-radius)) !important;\n  corner-shape: var(--ds-corner-shape, round) !important;\n  background: var(--ds-button-background, transparent) !important;\n  color: var(--ds-button-color, var(--ds-button-text-color)) !important;\n  font-family: var(--ds-typeface-regular) !important;\n  font-feature-settings: var(--ds-font-features) !important;\n  font-size: var(--_button-font-size, var(--ds-type-size-default)) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  white-space: nowrap !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  -webkit-user-select: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n  outline: none !important;\n  transition: opacity 120ms ease !important;\n}\n\n:host([control=\"host\"]) ::slotted(*) {\n  flex: 0 0 auto !important;\n}\n\n:host([fit][control=\"slotted\"]) ::slotted(:is(button, a)) {\n  width: max-content !important;\n  min-width: var(--ds-button-min-width, 0px) !important;\n  justify-content: var(--ds-button-align, flex-start) !important;\n}\n\n:host([control=\"host\"][primary]),\n:host([control=\"slotted\"][primary]) {\n  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n  --ds-button-background: var(--ds-button-primary-fill, var(--ds-button-background-color-primary));\n  --ds-button-color: var(--ds-button-primary-text, var(--ds-button-text-color-on-accent));\n}\n\n:host([control=\"host\"][secondary]),\n:host([control=\"slotted\"][secondary]) {\n  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n  --ds-button-background: var(--ds-button-secondary-fill, var(--ds-button-background-color-secondary));\n}\n\n:host([control=\"host\"][secondary]:hover:not([disabled])),\n:host([control=\"slotted\"][secondary]:hover:not([disabled])) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n:host([control=\"host\"][active]),\n:host([control=\"slotted\"][active]) {\n  --ds-button-background: var(--ds-fill);\n}\n\n/* A tab: muted until it is hovered or current. */\n:host([control=\"host\"][role=\"tab\"]),\n:host([control=\"host\"][choice]),\n:host([control=\"slotted\"][choice]) {\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-color: var(--ds-text-color-muted);\n}\n\n:host([control=\"host\"][role=\"tab\"]:hover:not([disabled])),\n:host([control=\"host\"][choice]:hover:not([disabled])),\n:host([control=\"slotted\"][choice]:hover:not([disabled])) {\n  --ds-button-background: color-mix(in srgb, var(--ds-fill) 72%, transparent);\n  --ds-button-color: var(--ds-text-color);\n}\n\n:host([control=\"host\"][role=\"tab\"][active]),\n:host([control=\"host\"][role=\"tab\"][active]:hover:not([disabled])),\n:host([control=\"host\"][choice][active]),\n:host([control=\"host\"][choice][active]:hover:not([disabled])),\n:host([control=\"slotted\"][choice][active]),\n:host([control=\"slotted\"][choice][active]:hover:not([disabled])) {\n  --ds-button-background: var(--ds-fill);\n  --ds-button-color: var(--ds-text-color);\n}\n\n:host([control=\"host\"]) ::slotted([slot=\"icon\"]) {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  width: var(--ds-control-height) !important;\n  height: var(--ds-control-height) !important;\n}\n\n:host([control=\"host\"]) ::slotted([slot=\"trailing\"]) {\n  color: var(--ds-text-color-muted) !important;\n  font-variant-numeric: tabular-nums !important;\n}\n\n:host([control=\"host\"][icon]),\n:host([control=\"slotted\"][icon]) {\n  justify-content: center !important;\n  width: var(--ds-button-height, var(--ds-control-height)) !important;\n  height: var(--ds-button-height, var(--ds-control-height)) !important;\n  padding: 0 !important;\n  color: var(--ds-button-color, var(--ds-text-color-muted)) !important;\n}\n\n:host([control=\"host\"][icon]:hover:not([disabled])) {\n  --ds-button-color: var(--ds-text-color);\n}\n\n/* A choice in a ds-menu: a full-width row, filled under the pointer or focus. */\n:host([control=\"host\"][role=\"option\"]),\n:host([control=\"host\"][role=\"menuitem\"]),\n:host([control=\"host\"][role=\"menuitemradio\"]),\n:host([control=\"host\"][role=\"menuitemcheckbox\"]) {\n  --ds-button-height: auto;\n  --ds-button-padding: calc(4px * var(--ds-sf)) calc(6px * var(--ds-sf));\n  width: var(--ds-button-width, 100%) !important;\n  min-height: var(--ds-row-height) !important;\n  border-radius: var(--ds-radius) !important;\n}\n\n:host([control=\"host\"][role=\"option\"]:hover),\n:host([control=\"host\"][role=\"menuitem\"]:hover),\n:host([control=\"host\"][role=\"menuitemradio\"]:hover),\n:host([control=\"host\"][role=\"menuitemcheckbox\"]:hover),\n:host([control=\"host\"][role=\"option\"]:focus-visible),\n:host([control=\"host\"][role=\"menuitem\"]:focus-visible) {\n  --ds-button-background: var(--ds-fill);\n  outline: none !important;\n}\n\n:host([control=\"host\"][role=\"option\"][active]) {\n  --ds-button-background: var(--ds-fill);\n}\n\n:host([control=\"host\"]:focus-visible),\n:host([control=\"slotted\"]) ::slotted(:is(button, a):focus-visible) {\n  outline: 2px solid var(--ds-focus-ring) !important;\n  outline-offset: 1px !important;\n}\n\n:host([control=\"host\"][disabled]),\n:host([control=\"slotted\"]) ::slotted(:is(button:disabled, a[aria-disabled=\"true\"])) {\n  cursor: default !important;\n  opacity: 0.5 !important;\n  pointer-events: none !important;\n}\n\n/* The light-DOM button keeps native forms, submitters and fieldset semantics.\n   DS1 owns its face; product layout belongs on the host. */\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  border: 0 !important;\n  margin: 0 !important;\n  width: 100% !important;\n  min-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  max-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  box-shadow: none !important;\n  text-align: start !important;\n  text-transform: none !important;\n  text-decoration: none !important;\n  overflow: hidden !important;\n  text-overflow: clip !important;\n}\n:host([control=\"slotted\"][icon]) ::slotted(:is(button, a)) {\n  justify-content: center !important;\n}\n\n:host([control=\"slotted\"]) {\n  /* The native focus ring extends beyond the face; only its text is clipped. */\n  overflow: visible;\n  /* The face is one control high, as the host and native faces are. Its box\n     stays one square, as before, with the face at its foot, so the words take\n     the lower sixteen of the square in a row or at the foot of a line and no\n     row around it changes height. */\n  align-items: flex-end;\n  min-height: var(--ds-row-height);\n  vertical-align: bottom;\n  width: var(--ds-button-width, var(--_button-inline-size, max-content));\n}\n/* An icon's square: the face takes its first sixteen, the spare four above. */\n:host([control=\"slotted\"][icon]) {\n  justify-content: flex-start !important;\n  width: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;\n  height: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;\n}\n:host([control=\"slotted\"][icon]) ::slotted(:is(button, a)) {\n  width: var(--ds-button-height, var(--ds-control-height)) !important;\n}\n:host([control=\"slotted\"][fixed]) {\n  width: var(--ds-button-width, calc(4 * var(--ds-unit)));\n}\n:host([control=\"slotted\"][wide]) {\n  width: var(--ds-button-width, calc(8 * var(--ds-unit)));\n}\n:host([control=\"slotted\"][fit]) {\n  width: max-content;\n}\n\n:host([control=\"host\"][danger]),\n:host([control=\"slotted\"][danger]) {\n  --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n:host([hidden]) { display: none !important; }\n\n/* Native actions in menus, including grouped and nested choices. */\n:host([menu-item]) {\n  flex: 0 0 auto;\n  width: 100%;\n  --ds-button-height: var(--ds-row-height);\n  --ds-button-align: flex-start;\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n}\n/* A row-high entry's words and icon stand on the lower sixteen, the spare four above. */\n:host([menu-item][control=\"host\"]),\n:host([menu-item][control=\"slotted\"]) ::slotted(:is(button, a)) {\n  align-items: flex-end !important;\n}\n:host([menu-item]:is(:hover, :focus-within):not([disabled])) {\n  --ds-button-background: var(--ds-fill);\n}\n:host([menu-item][control=\"slotted\"]) ::slotted([aria-checked=\"true\"]) {\n  box-shadow: inset 0 0 0 1px var(--ds-focus-ring) !important;\n}\n\n/* A paper tab (`ds-tabs paper`): a row high with its words on the sixteen,\n   rounded at the top only and square at the foot, where it joins the page. */\n:host([control=\"host\"][paper]),\n:host([control=\"slotted\"][paper]) ::slotted(:is(button, a)) {\n  align-items: flex-end !important;\n  border-start-start-radius: var(--ds-radius) !important;\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-start-radius: 0 !important;\n  border-end-end-radius: 0 !important;\n}\n\n/* A tab in a joined run (`ds-tabs split`): square inside, rounded at the run's ends. */\n:host([control=\"host\"][segment]) {\n  border-radius: 0 !important;\n}\n:host([control=\"host\"]:is([segment=\"first\"], [segment=\"only\"])) {\n  border-start-start-radius: var(--ds-radius) !important;\n  border-end-start-radius: var(--ds-radius) !important;\n}\n:host([control=\"host\"]:is([segment=\"last\"], [segment=\"only\"])) {\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-end-radius: var(--ds-radius) !important;\n}\n\n:host([control=\"host\"]:not([icon]):not([split]):not([menu-item])) {\n  min-width: max-content !important;\n  min-width: calc-size(max-content, round(up, size, var(--ds-unit))) !important;\n}\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  min-width: max-content !important;\n  overflow: visible !important;\n}\n";
+var ds_button_host_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-button.css */\n\n:host([control=\"host\"]),\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  box-sizing: border-box !important;\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: var(--ds-button-align, flex-start) !important;\n  gap: var(--ds-button-gap, calc(4px * var(--ds-sf))) !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  /* Important, so a page's `* { padding: 0 }` reset cannot reach it: the\n     padding is set through --ds-button-padding. */\n  padding: var(--ds-button-padding, 0) !important;\n  border-radius: var(--_button-radius, var(--ds-radius)) !important;\n  corner-shape: var(--ds-corner-shape, round) !important;\n  background: var(--ds-button-background, transparent) !important;\n  color: var(--ds-button-color, var(--ds-button-text-color)) !important;\n  font-family: var(--ds-typeface-regular) !important;\n  font-feature-settings: var(--ds-font-features) !important;\n  font-size: var(--_button-font-size, var(--ds-type-size-default)) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  white-space: nowrap !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  -webkit-user-select: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n  outline: none !important;\n  transition: opacity 120ms ease !important;\n}\n\n:host([control=\"host\"]) ::slotted(*) {\n  flex: 0 0 auto !important;\n}\n\n:host([fit][control=\"slotted\"]) ::slotted(:is(button, a)) {\n  /* The host hugs on the grid; its visible face must occupy that same box. */\n  width: 100% !important;\n  min-width: var(--ds-button-min-width, 0px) !important;\n  justify-content: var(--ds-button-align, flex-start) !important;\n}\n\n:host([control=\"host\"][primary]),\n:host([control=\"slotted\"][primary]) {\n  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n  --ds-button-background: var(--ds-button-primary-fill, var(--ds-button-background-color-primary));\n  --ds-button-color: var(--ds-button-primary-text, var(--ds-button-text-color-on-accent));\n}\n\n:host([control=\"host\"][secondary]),\n:host([control=\"slotted\"][secondary]) {\n  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n  --ds-button-background: var(--ds-button-secondary-fill, var(--ds-button-background-color-secondary));\n}\n\n:host([control=\"host\"][secondary]:hover:not([disabled])),\n:host([control=\"slotted\"][secondary]:hover:not([disabled])) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n:host([control=\"host\"][active]),\n:host([control=\"slotted\"][active]) {\n  --ds-button-background: var(--ds-fill);\n}\n\n/* A tab: muted until it is hovered or current. */\n:host([control=\"host\"][role=\"tab\"]),\n:host([control=\"host\"][choice]),\n:host([control=\"slotted\"][choice]) {\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-color: var(--ds-text-color-muted);\n}\n\n:host([control=\"host\"][role=\"tab\"]:hover:not([disabled])),\n:host([control=\"host\"][choice]:hover:not([disabled])),\n:host([control=\"slotted\"][choice]:hover:not([disabled])) {\n  --ds-button-background: color-mix(in srgb, var(--ds-fill) 72%, transparent);\n  --ds-button-color: var(--ds-text-color);\n}\n\n:host([control=\"host\"][role=\"tab\"][active]),\n:host([control=\"host\"][role=\"tab\"][active]:hover:not([disabled])),\n:host([control=\"host\"][choice][active]),\n:host([control=\"host\"][choice][active]:hover:not([disabled])),\n:host([control=\"slotted\"][choice][active]),\n:host([control=\"slotted\"][choice][active]:hover:not([disabled])) {\n  --ds-button-background: var(--ds-fill);\n  --ds-button-color: var(--ds-text-color);\n}\n\n:host([control=\"host\"]) ::slotted([slot=\"icon\"]) {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  width: var(--ds-control-height) !important;\n  height: var(--ds-control-height) !important;\n}\n\n:host([control=\"host\"]) ::slotted([slot=\"trailing\"]) {\n  color: var(--ds-text-color-muted) !important;\n  font-variant-numeric: tabular-nums !important;\n}\n\n:host([control=\"host\"][icon]),\n:host([control=\"slotted\"][icon]) {\n  justify-content: center !important;\n  width: var(--ds-button-height, var(--ds-control-height)) !important;\n  height: var(--ds-button-height, var(--ds-control-height)) !important;\n  padding: 0 !important;\n  color: var(--ds-button-color, var(--ds-text-color-muted)) !important;\n}\n\n:host([control=\"host\"][icon]:hover:not([disabled])) {\n  --ds-button-color: var(--ds-text-color);\n}\n\n/* A choice in a ds-menu: a full-width row, filled under the pointer or focus. */\n:host([control=\"host\"][role=\"option\"]),\n:host([control=\"host\"][role=\"menuitem\"]),\n:host([control=\"host\"][role=\"menuitemradio\"]),\n:host([control=\"host\"][role=\"menuitemcheckbox\"]) {\n  --ds-button-height: auto;\n  --ds-button-padding: calc(4px * var(--ds-sf)) calc(6px * var(--ds-sf));\n  width: var(--ds-button-width, 100%) !important;\n  min-height: var(--ds-row-height) !important;\n  border-radius: var(--ds-radius) !important;\n}\n\n:host([control=\"host\"][role=\"option\"]:hover),\n:host([control=\"host\"][role=\"menuitem\"]:hover),\n:host([control=\"host\"][role=\"menuitemradio\"]:hover),\n:host([control=\"host\"][role=\"menuitemcheckbox\"]:hover),\n:host([control=\"host\"][role=\"option\"]:focus-visible),\n:host([control=\"host\"][role=\"menuitem\"]:focus-visible) {\n  --ds-button-background: var(--ds-fill);\n  outline: none !important;\n}\n\n:host([control=\"host\"][role=\"option\"][active]) {\n  --ds-button-background: var(--ds-fill);\n}\n\n:host([control=\"host\"]:focus-visible),\n:host([control=\"slotted\"]) ::slotted(:is(button, a):focus-visible) {\n  outline: 2px solid var(--ds-focus-ring) !important;\n  outline-offset: 1px !important;\n}\n\n:host([control=\"host\"][disabled]),\n:host([control=\"slotted\"]) ::slotted(:is(button:disabled, a[aria-disabled=\"true\"])) {\n  cursor: default !important;\n  opacity: 0.5 !important;\n  pointer-events: none !important;\n}\n\n/* The light-DOM button keeps native forms, submitters and fieldset semantics.\n   DS1 owns its face; product layout belongs on the host. */\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  border: 0 !important;\n  margin: 0 !important;\n  width: 100% !important;\n  min-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  max-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  box-shadow: none !important;\n  text-align: start !important;\n  text-transform: none !important;\n  text-decoration: none !important;\n  overflow: hidden !important;\n  text-overflow: clip !important;\n}\n:host([control=\"slotted\"][icon]) ::slotted(:is(button, a)) {\n  justify-content: center !important;\n}\n\n:host([control=\"slotted\"]) {\n  /* The native focus ring extends beyond the face; only its text is clipped. */\n  overflow: visible;\n  /* The face is one control high, as the host and native faces are. Its box\n     stays one square, as before, with the face at its foot, so the words take\n     the lower sixteen of the square in a row or at the foot of a line and no\n     row around it changes height. */\n  align-items: flex-end;\n  min-height: var(--ds-row-height);\n  vertical-align: bottom;\n  width: var(--ds-button-width, var(--_button-inline-size, max-content));\n}\n/* An icon's square: the face takes its first sixteen, the spare four above. */\n:host([control=\"slotted\"][icon]) {\n  justify-content: flex-start !important;\n  width: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;\n  height: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;\n}\n:host([control=\"slotted\"][icon]) ::slotted(:is(button, a)) {\n  width: var(--ds-button-height, var(--ds-control-height)) !important;\n}\n:host([control=\"slotted\"][fixed]) {\n  width: var(--ds-button-width, calc(4 * var(--ds-unit)));\n}\n:host([control=\"slotted\"][wide]) {\n  width: var(--ds-button-width, calc(8 * var(--ds-unit)));\n}\n:host([control=\"slotted\"][fit]) {\n  width: max-content;\n}\n\n:host([control=\"host\"][danger]),\n:host([control=\"slotted\"][danger]) {\n  --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n:host([hidden]) { display: none !important; }\n\n/* Native actions in menus, including grouped and nested choices. */\n:host([menu-item]) {\n  flex: 0 0 auto;\n  width: 100%;\n  --ds-button-height: var(--ds-row-height);\n  --ds-button-align: flex-start;\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n}\n/* A row-high entry's words and icon stand on the lower sixteen, the spare four above. */\n:host([menu-item][control=\"host\"]),\n:host([menu-item][control=\"slotted\"]) ::slotted(:is(button, a)) {\n  align-items: flex-end !important;\n}\n:host([menu-item]:is(:hover, :focus-within):not([disabled])) {\n  --ds-button-background: var(--ds-fill);\n}\n:host([menu-item][control=\"slotted\"]) ::slotted([aria-checked=\"true\"]) {\n  box-shadow: inset 0 0 0 1px var(--ds-focus-ring) !important;\n}\n\n/* A paper tab (`ds-tabs paper`): a row high with its words on the sixteen,\n   rounded at the top only and square at the foot, where it joins the page. */\n:host([control=\"host\"][paper]),\n:host([control=\"slotted\"][paper]) ::slotted(:is(button, a)) {\n  align-items: flex-end !important;\n  border-start-start-radius: var(--ds-radius) !important;\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-start-radius: 0 !important;\n  border-end-end-radius: 0 !important;\n}\n\n/* A tab in a joined run (`ds-tabs split`): square inside, rounded at the run's ends. */\n:host([control=\"host\"][segment]) {\n  border-radius: 0 !important;\n}\n:host([control=\"host\"]:is([segment=\"first\"], [segment=\"only\"])) {\n  border-start-start-radius: var(--ds-radius) !important;\n  border-end-start-radius: var(--ds-radius) !important;\n}\n:host([control=\"host\"]:is([segment=\"last\"], [segment=\"only\"])) {\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-end-radius: var(--ds-radius) !important;\n}\n\n:host([control=\"host\"]:not([icon]):not([split]):not([menu-item])) {\n  min-width: max-content !important;\n  min-width: calc-size(max-content, round(up, size, var(--ds-unit))) !important;\n}\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  min-width: max-content !important;\n  overflow: visible !important;\n}\n";
 //#endregion
 //#region DS1/2-core/styles/ds-button.css?inline
-var ds_button_default = "/* ds-button.css */\n/* Core button component styles. The face is a <button>, or an <a> when the\n   element has an href: both draw alike in every variant and state. */\n\n:host {\n  display: inline-flex;\n  /* At the foot of a line, so a 16px face takes the lower sixteen of the square. */\n  vertical-align: bottom;\n  min-width: 0;\n  flex: 0 0 auto;\n  width: var(--ds-button-width, var(--_button-inline-size, max-content));\n  max-width: 100%;\n  overflow: visible;\n  /* The button's own tokens, unset by default and in unscaled px as --ds-control-size is,\n     resolved here at this button's scale. Each face reads them first and falls back to its\n     own measure, so a page that sets none draws exactly as before. --ds-button-inline-size is\n     the width: unset hugs, 100% fills, a length is fixed. */\n  --_button-size: var(--ds-button-size);\n  --_button-height: calc(var(--_button-size) * var(--ds-sf));\n  --_button-corner-size: var(--ds-button-corner-size);\n  --_button-radius: calc(var(--_button-corner-size) * var(--ds-sf));\n  --_button-text-size: var(--ds-button-text-size);\n  --_button-font-size: calc(var(--_button-text-size) * var(--ds-sf));\n  --_button-padding-size: var(--ds-button-padding-size);\n  --_button-padding: calc(var(--_button-padding-size) * var(--ds-sf));\n  --_button-inline-size: var(--ds-button-inline-size);\n}\n\n/* Other controls drawn on this face keep their own measures: an icon or a count's square, a\n   tab, a menu entry, a split run and a paper tab. Their colours still follow the faces. */\n:host(:is([icon], [square], [split], [menu-item], [role=\"option\"], [role^=\"menuitem\"], [role=\"tab\"], [choice], [segment], [paper])) {\n  --_button-height: initial;\n  --_button-radius: initial;\n  --_button-font-size: initial;\n  --_button-padding: initial;\n  --_button-inline-size: initial;\n}\n\n/* Label width is standard. Fixed grid widths are explicit layout choices. */\n:host([fixed]) { width: var(--ds-button-width, calc(4 * var(--ds-unit))); }\n:host([wide]) { width: var(--ds-button-width, calc(8 * var(--ds-unit))); }\n/* Keep fit as an explicit intrinsic-width alias for existing consumers. */\n:host([fit]) {\n  flex: 0 0 auto;\n  width: max-content;\n}\n:host([fit]) :is(button, a) {\n  flex: 0 0 auto;\n  width: max-content;\n  min-width: var(--ds-button-min-width, 0px);\n  justify-content: var(--ds-button-align, flex-start);\n}\n:host([fit]) :is(button, a) ds-text,\n:host([fit]) :is(button, a) ::slotted(*) {\n  flex: 0 0 auto;\n  width: max-content;\n}\n\n:is(button, a) {\n  box-sizing: border-box;\n  max-height: var(--_button-height, var(--ds-control-height));\n  height: var(--_button-height, var(--ds-control-height));\n  min-height: var(--_button-height, var(--ds-control-height));\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border: none;\n  border-radius: var(--_button-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n  cursor: pointer;\n  padding: 0;\n  color: var(--button-color, var(--button-text-color));\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--_button-font-size, var(--ds-type-size-default));\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  -webkit-tap-highlight-color: transparent;\n  white-space: nowrap;\n  overflow-x: clip;\n  overflow-y: visible;\n  text-overflow: clip;\n  /* Default to no-background when no variant is specified */\n  background-color: transparent;\n  text-decoration: none;\n}\n\n:is(button, a) ds-text,\n:is(button, a) ::slotted(*) {\n  overflow-x: clip;\n  overflow-y: visible;\n  text-overflow: clip;\n  white-space: nowrap;\n  max-width: 100%;\n  text-align: left;\n  justify-content: flex-start;\n  color: inherit;\n}\n\n/* Words drawn by a translation key take the button's text size too: unset, the expression\n   ds-text resolves for itself (component-metrics.css). */\n:is(button, a) ds-text {\n  --ds-type-size-default: var(--_button-font-size, calc(var(--ds-text-size, 14px) * var(--ds-sf, 1)));\n}\n\n:is(button, a)[primary] {\n  background-color: var(--ds-button-primary-fill, var(--accent-color));\n  color: var(--ds-button-primary-text, var(--button-text-color-on-light, var(--black)));\n  text-decoration-line: none;\n  font-family: var(--ds-typeface-regular);\n  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n}\n\n/* The secondary face's words are the text's ink, as on `.ds-button--secondary`\n   and the host and slotted faces; the grey is the face, not the words. */\n:is(button, a)[secondary] {\n  background-color: var(--ds-button-secondary-fill, var(--button-background-color-secondary));\n  color: var(--ds-button-color, var(--ds-button-text-color));\n  font-family: var(--ds-typeface-regular);\n  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n}\n\n/* An entry in a menu or a list of options is one row high on this face too,\n   as on the host and slotted faces: the menu's --ds-button-height (one\n   square, or a compact row), its words at the start, padded 4px. */\n:host(:is([menu-item], [role=\"option\"], [role^=\"menuitem\"])) :is(button, a) {\n  /* Its words and icon on the lower sixteen of the row, the spare four above. */\n  align-items: flex-end;\n  height: var(--ds-button-height, var(--ds-row-height));\n  min-height: var(--ds-button-height, var(--ds-row-height));\n  max-height: var(--ds-button-height, var(--ds-row-height));\n  justify-content: var(--ds-button-align, flex-start);\n  padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));\n}\n\n/* `danger`: a destructive action's words in the danger colour, on this face\n   as on the host and slotted faces and `.ds-button--danger`. */\n:host([danger]) :is(button, a) {\n  color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n/* Disabled, as in the slotted and host modes. A disabled link has no href. */\n:is(button:disabled, a[aria-disabled=\"true\"]) {\n  cursor: default;\n  opacity: 0.5;\n}\n\n.loading {\n  opacity: 0.7;\n}\n\n/* A button that holds only an icon — every close button — is a 16-unit\n   square, scaled with the page, in the shape's corners: the icon fills it,\n   no word-padding around it, so the glyph's lines are the same size wherever\n   a page or a panel closes, on the web and in the app alike. The element\n   marks itself `icon` when its only child is an ds-icon. */\n:host([icon]) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n:host([icon]) :is(button, a) {\n  width: var(--ds-control-height);\n  padding: 0 !important;\n  justify-content: center;\n}\n:host([icon]) ::slotted(ds-icon) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n\n/* A button marked `square` is a 16-unit square whatever it holds, a count\n   or an initial, its words in its middle with no word-padding around them. */\n:host([square]) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n}\n:host([square]) :is(button, a) {\n  width: var(--ds-control-height);\n  padding: 0 !important;\n  justify-content: center;\n}\n\n/* Words and an icon hug them, as on every face (controls.css): this face has\n   no gap, and on a filled face the icon takes the padding on its side, its\n   own room around the glyph standing in for it. */\n:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:last-child:not(:first-child)) {\n  margin-inline-end: calc(-4px * var(--ds-sf));\n}\n:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:first-child:not(:last-child)) {\n  margin-inline-start: calc(-4px * var(--ds-sf));\n}\n\n/* A paper tab (`ds-tabs paper`) on this face: a row high with its words on\n   the sixteen, half a square of room at its sides, in the run's colours,\n   rounded at the top only and square at the foot, where it joins the page. */\n:host([paper]) :is(button, a) {\n  height: var(--ds-row-height);\n  min-height: var(--ds-row-height);\n  max-height: var(--ds-row-height);\n  align-items: flex-end;\n  padding: 0 calc(10px * var(--ds-sf));\n  border-radius: var(--ds-radius) var(--ds-radius) 0 0;\n  background-color: var(--ds-button-background, transparent);\n  color: var(--ds-button-color, var(--button-text-color));\n}\n\n/* A segment gets its outside corners from the enclosing split control, or\n   from its place in a joined run of tabs (`ds-tabs split`). */\n:host([segment]) :is(button, a) {\n  border-radius: 0 !important;\n}\n:host(:is([segment=\"first\"], [segment=\"only\"])) :is(button, a) {\n  border-start-start-radius: var(--ds-radius) !important;\n  border-end-start-radius: var(--ds-radius) !important;\n}\n:host(:is([segment=\"last\"], [segment=\"only\"])) :is(button, a) {\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-end-radius: var(--ds-radius) !important;\n}\n\n/* A label is never truncated to meet a chosen width. Round its minimum up,\n   so explicit widths and flex layouts retain enough space for all the words. */\n:host(:not([icon]):not([split]):not([menu-item])) {\n  min-width: max-content;\n  min-width: calc-size(max-content, round(up, size, var(--ds-unit)));\n}\n/* A menu entry keeps a fixed width, so its words may still be cut and fade. */\n:host(:not([menu-item])) :is(button, a),\n:host(:not([menu-item])) :is(button, a) ds-text,\n:host(:not([menu-item])) :is(button, a) ::slotted(*) {\n  overflow: visible;\n  mask-image: none;\n  text-overflow: clip;\n}\n";
+var ds_button_default = "/* ds-button.css */\n/* Core button component styles. The face is a <button>, or an <a> when the\n   element has an href: both draw alike in every variant and state. */\n\n:host {\n  display: inline-flex;\n  /* At the foot of a line, so a 16px face takes the lower sixteen of the square. */\n  vertical-align: bottom;\n  min-width: 0;\n  flex: 0 0 auto;\n  width: var(--ds-button-width, var(--_button-inline-size, max-content));\n  max-width: 100%;\n  overflow: visible;\n  /* The button's own tokens, unset by default and in unscaled px as --ds-control-size is,\n     resolved here at this button's scale. Each face reads them first and falls back to its\n     own measure, so a page that sets none draws exactly as before. --ds-button-inline-size is\n     the width: unset hugs, 100% fills, a length is fixed. */\n  --_button-size: var(--ds-button-size);\n  --_button-height: calc(var(--_button-size) * var(--ds-sf));\n  --_button-corner-size: var(--ds-button-corner-size);\n  --_button-radius: calc(var(--_button-corner-size) * var(--ds-sf));\n  --_button-text-size: var(--ds-button-text-size);\n  --_button-font-size: calc(var(--_button-text-size) * var(--ds-sf));\n  --_button-padding-size: var(--ds-button-padding-size);\n  --_button-padding: calc(var(--_button-padding-size) * var(--ds-sf));\n  --_button-inline-size: var(--ds-button-inline-size);\n}\n\n/* Other controls drawn on this face keep their own measures: an icon or a count's square, a\n   tab, a menu entry, a split run and a paper tab. Their colours still follow the faces. */\n:host(:is([icon], [square], [split], [menu-item], [role=\"option\"], [role^=\"menuitem\"], [role=\"tab\"], [choice], [segment], [paper])) {\n  --_button-height: initial;\n  --_button-radius: initial;\n  --_button-font-size: initial;\n  --_button-padding: initial;\n  --_button-inline-size: initial;\n}\n\n/* Label width is standard. Fixed grid widths are explicit layout choices. */\n:host([fixed]) { width: var(--ds-button-width, calc(4 * var(--ds-unit))); }\n:host([wide]) { width: var(--ds-button-width, calc(8 * var(--ds-unit))); }\n/* Keep fit as an explicit intrinsic-width alias for existing consumers. */\n:host([fit]) {\n  flex: 0 0 auto;\n  width: max-content;\n}\n:host([fit]) :is(button, a) {\n  flex: 0 0 auto;\n  /* Hug sizing belongs to the host, including its grid rounding. */\n  width: 100%;\n  min-width: var(--ds-button-min-width, 0px);\n  justify-content: var(--ds-button-align, flex-start);\n}\n:host([fit]) :is(button, a) ds-text,\n:host([fit]) :is(button, a) ::slotted(*) {\n  flex: 0 0 auto;\n  width: max-content;\n}\n\n:is(button, a) {\n  box-sizing: border-box;\n  max-height: var(--_button-height, var(--ds-control-height));\n  height: var(--_button-height, var(--ds-control-height));\n  min-height: var(--_button-height, var(--ds-control-height));\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border: none;\n  border-radius: var(--_button-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n  cursor: pointer;\n  padding: 0;\n  color: var(--button-color, var(--button-text-color));\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--_button-font-size, var(--ds-type-size-default));\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  -webkit-tap-highlight-color: transparent;\n  white-space: nowrap;\n  overflow-x: clip;\n  overflow-y: visible;\n  text-overflow: clip;\n  /* Default to no-background when no variant is specified */\n  background-color: transparent;\n  text-decoration: none;\n}\n\n:is(button, a) ds-text,\n:is(button, a) ::slotted(*) {\n  overflow-x: clip;\n  overflow-y: visible;\n  text-overflow: clip;\n  white-space: nowrap;\n  max-width: 100%;\n  text-align: left;\n  justify-content: flex-start;\n  color: inherit;\n}\n\n/* Words drawn by a translation key take the button's text size too: unset, the expression\n   ds-text resolves for itself (component-metrics.css). */\n:is(button, a) ds-text {\n  --ds-type-size-default: var(--_button-font-size, calc(var(--ds-text-size, 14px) * var(--ds-sf, 1)));\n}\n\n:is(button, a)[primary] {\n  background-color: var(--ds-button-primary-fill, var(--accent-color));\n  color: var(--ds-button-primary-text, var(--button-text-color-on-light, var(--black)));\n  text-decoration-line: none;\n  font-family: var(--ds-typeface-regular);\n  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n}\n\n/* The secondary face's words are the text's ink, as on `.ds-button--secondary`\n   and the host and slotted faces; the grey is the face, not the words. */\n:is(button, a)[secondary] {\n  background-color: var(--ds-button-secondary-fill, var(--button-background-color-secondary));\n  color: var(--ds-button-color, var(--ds-button-text-color));\n  font-family: var(--ds-typeface-regular);\n  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n}\n\n/* An entry in a menu or a list of options is one row high on this face too,\n   as on the host and slotted faces: the menu's --ds-button-height (one\n   square, or a compact row), its words at the start, padded 4px. */\n:host(:is([menu-item], [role=\"option\"], [role^=\"menuitem\"])) :is(button, a) {\n  /* Its words and icon on the lower sixteen of the row, the spare four above. */\n  align-items: flex-end;\n  height: var(--ds-button-height, var(--ds-row-height));\n  min-height: var(--ds-button-height, var(--ds-row-height));\n  max-height: var(--ds-button-height, var(--ds-row-height));\n  justify-content: var(--ds-button-align, flex-start);\n  padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));\n}\n\n/* `danger`: a destructive action's words in the danger colour, on this face\n   as on the host and slotted faces and `.ds-button--danger`. */\n:host([danger]) :is(button, a) {\n  color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n/* Disabled, as in the slotted and host modes. A disabled link has no href. */\n:is(button:disabled, a[aria-disabled=\"true\"]) {\n  cursor: default;\n  opacity: 0.5;\n}\n\n.loading {\n  opacity: 0.7;\n}\n\n/* A button that holds only an icon — every close button — is a 16-unit\n   square, scaled with the page, in the shape's corners: the icon fills it,\n   no word-padding around it, so the glyph's lines are the same size wherever\n   a page or a panel closes, on the web and in the app alike. The element\n   marks itself `icon` when its only child is an ds-icon. */\n:host([icon]) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n:host([icon]) :is(button, a) {\n  width: var(--ds-control-height);\n  padding: 0 !important;\n  justify-content: center;\n}\n:host([icon]) ::slotted(ds-icon) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n\n/* A button marked `square` is a 16-unit square whatever it holds, a count\n   or an initial, its words in its middle with no word-padding around them. */\n:host([square]) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n}\n:host([square]) :is(button, a) {\n  width: var(--ds-control-height);\n  padding: 0 !important;\n  justify-content: center;\n}\n\n/* Words and an icon hug them, as on every face (controls.css): this face has\n   no gap, and on a filled face the icon takes the padding on its side, its\n   own room around the glyph standing in for it. */\n:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:last-child:not(:first-child)) {\n  margin-inline-end: calc(-4px * var(--ds-sf));\n}\n:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:first-child:not(:last-child)) {\n  margin-inline-start: calc(-4px * var(--ds-sf));\n}\n\n/* A paper tab (`ds-tabs paper`) on this face: a row high with its words on\n   the sixteen, half a square of room at its sides, in the run's colours,\n   rounded at the top only and square at the foot, where it joins the page. */\n:host([paper]) :is(button, a) {\n  height: var(--ds-row-height);\n  min-height: var(--ds-row-height);\n  max-height: var(--ds-row-height);\n  align-items: flex-end;\n  padding: 0 calc(10px * var(--ds-sf));\n  border-radius: var(--ds-radius) var(--ds-radius) 0 0;\n  background-color: var(--ds-button-background, transparent);\n  color: var(--ds-button-color, var(--button-text-color));\n}\n\n/* A segment gets its outside corners from the enclosing split control, or\n   from its place in a joined run of tabs (`ds-tabs split`). */\n:host([segment]) :is(button, a) {\n  border-radius: 0 !important;\n}\n:host(:is([segment=\"first\"], [segment=\"only\"])) :is(button, a) {\n  border-start-start-radius: var(--ds-radius) !important;\n  border-end-start-radius: var(--ds-radius) !important;\n}\n:host(:is([segment=\"last\"], [segment=\"only\"])) :is(button, a) {\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-end-radius: var(--ds-radius) !important;\n}\n\n/* A label is never truncated to meet a chosen width. Round its minimum up,\n   so explicit widths and flex layouts retain enough space for all the words. */\n:host(:not([icon]):not([split]):not([menu-item])) {\n  min-width: max-content;\n  min-width: calc-size(max-content, round(up, size, var(--ds-unit)));\n}\n/* A menu entry keeps a fixed width, so its words may still be cut and fade. */\n:host(:not([menu-item])) :is(button, a),\n:host(:not([menu-item])) :is(button, a) ds-text,\n:host(:not([menu-item])) :is(button, a) ::slotted(*) {\n  overflow: visible;\n  mask-image: none;\n  text-overflow: clip;\n}\n";
 //#endregion
 //#region DS1/2-core/button-split.ts
 function choices(host) {
@@ -6903,6 +7162,7 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 	let suppressed = null;
 	let release;
 	let disposed = false;
+	let mousePress;
 	if (aria) trigger.setAttribute("aria-haspopup", "menu");
 	if (selection) trigger.classList.add("ds-context-trigger");
 	const enabled = (control) => control.isConnected && !control.matches(":disabled, [disabled], [aria-disabled=\"true\"], [data-disabled]") && !control.closest("[hidden], [inert]");
@@ -6926,6 +7186,7 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 		release = setTimeout(clearSuppression, 1e3);
 	};
 	const cancel = () => {
+		mousePress = void 0;
 		clearTimeout(timer);
 		timer = void 0;
 		point = void 0;
@@ -6939,7 +7200,16 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 	};
 	const context = (event) => {
 		if (event.defaultPrevented) return;
-		const control = resolve(event);
+		const pressed = mousePress;
+		mousePress = void 0;
+		const gesture = pressed && event.button === 2 && Math.hypot(event.clientX - pressed.event.clientX, event.clientY - pressed.event.clientY) <= 10 ? new Proxy(pressed.event, { get(target, key) {
+			if (key === "composedPath") return () => pressed.path;
+			if (key === "target") return pressed.target;
+			const value = Reflect.get(target, key, target);
+			return typeof value === "function" ? value.bind(target) : value;
+		} }) : event;
+		if (gesture !== event && (typeof gesture.target?.nodeType !== "number" || !trigger.contains(gesture.target))) return;
+		const control = resolve(gesture);
 		if (!control || !enabled(control)) return;
 		cancel();
 		if (suppressed === control) {
@@ -6949,7 +7219,7 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 		if (open({
 			x: event.clientX,
 			y: event.clientY
-		}, control, event) === false) return;
+		}, control, gesture) === false) return;
 		event.preventDefault();
 		if (selection && event.button === 0) arm(control);
 	};
@@ -6992,6 +7262,15 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 			if (open(at, control, event) !== false) arm(control);
 		}, 500);
 	};
+	const rememberMouse = (event) => {
+		mousePress = !event.defaultPrevented && event.pointerType === "mouse" && event.button === 2 ? {
+			event,
+			path: event.composedPath(),
+			target: event.target
+		} : void 0;
+	};
+	trigger.addEventListener("pointerdown", rememberMouse, true);
+	trigger.addEventListener("pointercancel", cancel, true);
 	trigger.addEventListener("contextmenu", context);
 	trigger.addEventListener("keydown", key);
 	trigger.addEventListener("pointerdown", press);
@@ -7004,6 +7283,8 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 			trigger.removeEventListener("contextmenu", context);
 			trigger.removeEventListener("keydown", key);
 			trigger.removeEventListener("pointerdown", press);
+			trigger.removeEventListener("pointerdown", rememberMouse, true);
+			trigger.removeEventListener("pointercancel", cancel, true);
 			if (aria) {
 				if (previousAria === null) trigger.removeAttribute("aria-haspopup");
 				else trigger.setAttribute("aria-haspopup", previousAria);
@@ -11987,8 +12268,21 @@ var _Avatar;
 provideIcons({ avatar: avatarIcon });
 /** The ink that reads on a fill: black on a light one, white on a dark one. */
 var inkOn = (rgb) => {
-	const linear = rgb.map((n) => n <= .04045 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4);
-	return linear[0] * .2126 + linear[1] * .7152 + linear[2] * .0722 > .22 ? "var(--ds-black)" : "var(--ds-white)";
+	const fill = [...rgb, 1];
+	const white = [
+		1,
+		1,
+		1,
+		1
+	];
+	if (contrastRatio([
+		42 / 255,
+		42 / 255,
+		42 / 255,
+		1
+	], fill) >= 4.5) return "var(--ds-black)";
+	if (contrastRatio(white, fill) >= 4.5) return "var(--ds-white)";
+	return "black";
 };
 /** Saved identity colours are hex; their ink must stay legible in either theme. */
 function avatarInk(color) {
@@ -12023,6 +12317,14 @@ function inkOnResolved(fill) {
 var Avatar = class extends i$4 {
 	constructor() {
 		super();
+		this.inkFrame = 0;
+		this.queueInk = () => {
+			const view = this.ownerDocument.defaultView;
+			if (!this.inkFrame) this.inkFrame = view.requestAnimationFrame(() => {
+				this.inkFrame = 0;
+				this.resolveInk();
+			});
+		};
 		this.label = "";
 		this.initial = "?";
 		this.src = "";
@@ -12034,6 +12336,28 @@ var Avatar = class extends i$4 {
 		this.fit = "cover";
 		this.logo = this.mask = this.outlined = this.pending = this.plain = this.loaded = this.failed = false;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		const view = this.ownerDocument.defaultView;
+		this.inkObserver = new view.MutationObserver(this.queueInk);
+		for (let parent = this; parent; parent = parent.parentElement ?? parent.getRootNode().host ?? null) this.inkObserver.observe(parent, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"style",
+				"data-theme"
+			]
+		});
+		view.addEventListener("load", this.queueInk, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.inkObserver?.disconnect();
+		const view = this.ownerDocument.defaultView;
+		view.cancelAnimationFrame(this.inkFrame);
+		this.inkFrame = 0;
+		view.removeEventListener("load", this.queueInk, true);
+	}
 	willUpdate(changed) {
 		if (changed.has("src")) {
 			this.loaded = false;
@@ -12043,7 +12367,7 @@ var Avatar = class extends i$4 {
 	}
 	/** A fill named by a variable (`var(--brand-highlight)`) gets its ink once the browser has resolved it. */
 	updated() {
-		if (this.ink || this.pending || this.plain || !this.color || avatarInk(this.color)) return;
+		if (this.ink || this.pending || this.plain) return;
 		this.resolveInk();
 	}
 	/** Reads the fill as drawn; while the variable is still undefined (its stylesheet on its way), looks again next
@@ -12051,12 +12375,28 @@ var Avatar = class extends i$4 {
 	resolveInk(tries = 0) {
 		const frame = this.renderRoot.querySelector(".frame");
 		if (!frame || !this.isConnected) return;
-		const ink = inkOnResolved(getComputedStyle(frame).backgroundColor);
-		if (ink) {
-			frame.style.color = ink;
+		if (this.ink || this.pending || this.plain) return;
+		const view = this.ownerDocument.defaultView;
+		const read = colorReader(this.ownerDocument);
+		let fill = read(view.getComputedStyle(frame).backgroundColor);
+		if (fill && fill[3] > 0) {
+			for (let parent = this; parent && fill[3] < 1; parent = parent.parentElement ?? parent.getRootNode().host ?? null) {
+				const background = read(view.getComputedStyle(parent).backgroundColor);
+				if (background) fill = composite(fill, background);
+			}
+			if (fill[3] < 1) return;
+			const tokens = view.getComputedStyle(this);
+			const black = read(tokens.getPropertyValue("--ds-black").trim()), white = read(tokens.getPropertyValue("--ds-white").trim());
+			const ink = black && contrastRatio(black, fill) >= 4.5 ? "var(--ds-black)" : white && contrastRatio(white, fill) >= 4.5 ? "var(--ds-white)" : contrastRatio([
+				0,
+				0,
+				0,
+				1
+			], fill) >= 4.5 ? "black" : "white";
+			if (frame.style.color !== ink) frame.style.color = ink;
 			return;
 		}
-		if (tries < 60) requestAnimationFrame(() => this.resolveInk(tries + 1));
+		if (tries < 60) this.ownerDocument.defaultView.requestAnimationFrame(() => this.resolveInk(tries + 1));
 		if (tries === 0 && this.ownerDocument.readyState !== "complete") this.ownerDocument.defaultView?.addEventListener("load", () => this.resolveInk(60), { once: true });
 	}
 	render() {
@@ -12071,7 +12411,7 @@ var Avatar = class extends i$4 {
       class="frame"
       style=${o({
 			backgroundColor: !this.pending && !this.plain ? this.color || void 0 : void 0,
-			color: !this.pending ? this.ink || avatarInk(this.color) : void 0
+			color: !this.pending ? this.ink || (!this.plain ? avatarInk(this.color) : void 0) : void 0
 		})}
       role=${this.label ? "img" : A}
       aria-label=${this.label || A}
@@ -14928,7 +15268,7 @@ _Form.styles = i$5`
       pointer-events: none;
     }
   `;
-customElements.define("ds-form", Form);
+define("ds-form", Form);
 //#endregion
 //#region DS1/3-unit/styles/ds-list.css?inline
 var ds_list_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-list.css */\n\n:host {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: var(--ds-list-gap, 0);\n  width: 100%;\n  min-width: 0;\n}\n:host([hidden]) { display: none !important; }\n\n:host([columns]) {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-list-columns, 2), minmax(0, 1fr));\n  column-gap: var(--ds-list-column-gap, calc(var(--ds-unit) / 2));\n}\n\n:host([columns=\"2\"]) {\n  --ds-list-columns: 2;\n}\n\n:host([columns=\"3\"]) {\n  --ds-list-columns: 3;\n}\n\n/* The group's name on the square above its rows: words on the lower sixteen of the square with\n   the spare four above, in the muted ink, as a day's heading stands over Money's payments. It\n   names the list (aria-label), so the drawn words are hidden from assistive technology. */\n.heading {\n  box-sizing: border-box;\n  flex: none;\n  grid-column: 1 / -1;\n  width: 100%;\n  height: var(--ds-unit);\n  padding-top: calc(4px * var(--ds-sf));\n  overflow: hidden;\n  color: var(--ds-list-heading-color, var(--ds-text-color-muted));\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  white-space: nowrap;\n  text-overflow: clip;\n}\n/* A cut heading fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.heading[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .heading[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n";
@@ -15966,7 +16306,7 @@ function text(value) {
 	if (blank(value)) return "";
 	return typeof value === "number" ? value.toLocaleString() : String(value);
 }
-customElements.define("ds-table", DsTable);
+define("ds-table", DsTable);
 //#endregion
 //#region DS1/3-unit/styles/ds-table-of-contents.css?inline
 var ds_table_of_contents_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: block;\n  width: var(--ds-toc-width, calc(12 * var(--ds-unit)));\n  max-width: 100%;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n.title { display: flex; align-items: flex-end; min-height: var(--ds-unit); }\n.links { margin-top: var(--ds-unit); }\na, ::slotted(a) {\n  box-sizing: border-box;\n  display: block;\n  min-height: var(--ds-unit);\n  padding-top: calc(4px * var(--ds-sf));\n  padding-inline-start: calc(var(--toc-depth, 0) * var(--ds-unit));\n  color: var(--ds-toc-color, var(--ds-text-color-muted));\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n}\n/* A cut label fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\na[data-cut=\"end\"], ::slotted(a[data-cut=\"end\"]) {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:host(:dir(rtl)) a[data-cut=\"end\"], :host(:dir(rtl)) ::slotted(a[data-cut=\"end\"]) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\na:hover, ::slotted(a:hover) { color: var(--ds-text-color); text-decoration: underline; }\na[aria-current], ::slotted(a[aria-current]) { color: var(--ds-toc-current-color, var(--ds-sharp-blue)); }\na:focus-visible, ::slotted(a:focus-visible) { outline: 1px solid var(--ds-focus-ring); outline-offset: 1px; }\n";
@@ -16161,7 +16501,7 @@ var Container = class extends i$4 {
 };
 _Container = Container;
 _Container.styles = r$4(ds_container_default);
-customElements.define("ds-container", Container);
+define("ds-container", Container);
 //#endregion
 //#region DS1/4-page/styles/ds-grid.css?inline
 var ds_grid_default = "/* A one-square pitch by default. Rules stay hairlines at every surface scale. */\n:host {\n  --grid-scale: var(--ds-sf, var(--sf, 1));\n  display: block;\n  position: fixed;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--ds-grid-width, calc(1440px * var(--grid-scale)));\n  height: var(--ds-grid-height, max(100vh, calc(1280px * var(--grid-scale))));\n  pointer-events: none;\n  z-index: var(--ds-grid-z-index, 300);\n}\n:host([hidden]) { display: none !important; }\n:host([align=\"left\"]) { left: 0; transform: none; }\n:host([align=\"right\"]) { left: auto; right: 0; transform: none; }\n@media (max-width: 768px) {\n  :host { width: calc(100% - 1px); max-width: 100vw; }\n}\n/* The containing element establishes positioning; its content stays above the paper. */\n:host([contained]) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; z-index: 0; }\n.paper {\n  position: absolute;\n  inset: 0;\n  --cell: var(--ds-grid-unit, calc(var(--pitch-x) * var(--grid-scale)));\n  --row: var(--ds-grid-row, calc(var(--pitch-y) * var(--grid-scale)));\n  --stroke: var(--ds-grid-stroke, 1px);\n  background-color: var(--paper);\n  background-size: var(--cell) var(--row);\n  background-position: calc(var(--ds-grid-origin-x, 0px) - var(--stroke) / 2) calc(var(--ds-grid-origin-y, 0px) - var(--stroke) / 2);\n  background-repeat: repeat;\n}\n[data-pattern=\"grid\"] { background-image: linear-gradient(to right, var(--ink) var(--stroke), transparent var(--stroke)), linear-gradient(to bottom, var(--ink) var(--stroke), transparent var(--stroke)); }\n[data-pattern=\"lines\"] { background-image: linear-gradient(to bottom, var(--ink) var(--stroke), transparent var(--stroke)); }\n[data-pattern=\"columns\"] { background-image: linear-gradient(to right, var(--ink) var(--stroke), transparent var(--stroke)); }\n[data-pattern=\"dots\"] {\n  background-image: radial-gradient(circle, var(--ink) var(--stroke), transparent var(--stroke));\n  background-position: var(--ds-grid-origin-x, 0px) calc(var(--ds-grid-origin-y, 0px) - var(--row) / 2);\n}\n[data-pattern=\"none\"] { background-image: none; }\n@media print { :host(:not([contained])) { display: none; } }\n";