@mono-lit/helper 0.0.0-stage → 0.0.2

package/dist/index.node-BIqEGehH.js

@@ -0,0 +1,396 @@
+import "./normalize-error-Gcgmgh5i.js";
+import "./mono-data-grid-YjR3n9Ar.js";
+import "./mono-ui-CPV7rrdo.js";
+import "./mono-data-chart-CEv29_NS.js";
+import "./mono-data-dropdown-Wnoke6zO.js";
+import "./tooltip-DQqNpqk2.js";
+//#endregion
+//#region src/data/theme/presets.ts
+var raw = {
+	$comment: [
+		"Source of truth for the colour presets: `one` (the default) and `basecoat` (Basecoat's own neutral palette). `scripts/theme-build.mjs` turns this into",
+		"generated/tokens.css, generated/presets.css and generated/legacy.css (run `pnpm theme:build`).",
+		"",
+		"Token names are Basecoat / shadcn's (camelCased): background, foreground, card, popover,",
+		"primary, secondary, muted, accent, destructive, border, input, ring, chart1-5, sidebar*,",
+		"plus mono's extension roles: success, warning, info, teal, purple, neutral, dark.",
+		"Colours are hex (or rgba() for translucent borders); the generator emits OKLCH.",
+		"",
+		"Missing keys are derived: *Foreground by WCAG contrast (white vs 87% black), card/popover",
+		"from surface, secondary/accent from muted, input from border, sidebar-* from card/primary,",
+		"chart1-5 as a lightness ramp on the primary hue. A missing `dark` block is derived with",
+		"Basecoat's own light->dark deltas and is marked for review in ui/color.md; `\"dark\": false` means the",
+		"preset has NO dark mode — under html.dark it keeps its light values (and light mode tokens).",
+		"",
+		"`legacy` holds the preset's pre-Basecoat `--theme-*` declarations VERBATIM. They ship in",
+		"generated/legacy.css until 3.0 so un-ported components and consumer CSS render exactly as",
+		"before. Do not edit them; they are history."
+	],
+	one: {
+		"displayName": "ONE",
+		"$comment": "EJI ONE design system v1.0 — light only: the guide defines no dark palette, so `dark: false` keeps ONE light under html.dark. See the legacy block's history in git for the WCAG notes.",
+		"light": {
+			"background": "#f4f6fb",
+			"foreground": "#1f2937",
+			"card": "#ffffff",
+			"muted": "#f7f8fc",
+			"mutedForeground": "#6b7280",
+			"border": "#e4e7ef",
+			"ring": "#1f2664",
+			"primary": "#1f2664",
+			"primaryForeground": "#ffffff",
+			"destructive": "#dc2626",
+			"success": "#15803d",
+			"warning": "#b45309",
+			"warningForeground": "#ffffff",
+			"info": "#375ba3",
+			"teal": "#0f7b6c",
+			"purple": "#1d3184",
+			"neutral": "#64748b",
+			"neutralForeground": "#ffffff",
+			"dark": "#0f172a",
+			"input": "#d7dbe5",
+			"accent": "#f0f3fd",
+			"chart1": "#1f2664",
+			"chart2": "#7c93d6",
+			"chart3": "#e0a030",
+			"chart4": "#e4e7ef"
+		},
+		"dark": false,
+		"legacy": {
+			"--theme-primary": "#1f2664",
+			"--theme-secondary": "#375ba3",
+			"--theme-accent": "#1f2664",
+			"--theme-background": "#f4f6fb",
+			"--theme-text": "#1f2937",
+			"--theme-border": "#e4e7ef",
+			"--theme-success": "#15803d",
+			"--theme-danger": "#dc2626",
+			"--theme-warning": "#b45309",
+			"--theme-info": "#375ba3",
+			"--theme-teal": "#0f7b6c",
+			"--theme-purple": "#1d3184",
+			"--theme-neutral": "#64748b",
+			"--theme-dark": "#0f172a",
+			"--theme-surface": "#ffffff",
+			"--theme-surface-soft": "#f7f8fc",
+			"--theme-primary-rgb": "31, 38, 100",
+			"--theme-secondary-rgb": "55, 91, 163",
+			"--theme-accent-rgb": "31, 38, 100",
+			"--theme-background-rgb": "244, 246, 251",
+			"--theme-text-rgb": "31, 41, 55",
+			"--theme-border-rgb": "228, 231, 239",
+			"--theme-success-rgb": "21, 128, 61",
+			"--theme-danger-rgb": "220, 38, 38",
+			"--theme-warning-rgb": "180, 83, 9",
+			"--theme-info-rgb": "55, 91, 163",
+			"--theme-teal-rgb": "15, 123, 108",
+			"--theme-purple-rgb": "29, 49, 132",
+			"--theme-neutral-rgb": "100, 116, 139",
+			"--theme-dark-rgb": "15, 23, 42",
+			"--theme-primary-light": "#3f5cc4",
+			"--theme-primary-dark": "#171d52",
+			"--theme-primary-contrast": "#ffffff",
+			"--theme-secondary-light": "#7288dd",
+			"--theme-secondary-dark": "#1d3184",
+			"--theme-secondary-contrast": "#ffffff",
+			"--theme-text-primary": "#1f2937",
+			"--theme-text-secondary": "#6b7280",
+			"--theme-text-disabled": "#8695ac",
+			"--theme-placeholder": "#68768c",
+			"--theme-background-default": "#f4f6fb",
+			"--theme-divider": "#e4e7ef",
+			"--theme-action-hover": "rgba(15, 23, 42, 0.04)",
+			"--theme-action-selected": "rgba(var(--theme-primary-rgb), 0.06)",
+			"--theme-success-dark": "#166534",
+			"--theme-danger-dark": "#b91c1c",
+			"--theme-warning-dark": "#92400e",
+			"--theme-warning-contrast": "#ffffff",
+			"--theme-teal-contrast": "#ffffff",
+			"--theme-neutral-contrast": "#ffffff",
+			"--theme-pillar-commercial": "#152568",
+			"--theme-pillar-operasional": "#2a44a8",
+			"--theme-pillar-fat": "#0f7b6c",
+			"--theme-pillar-budgeting": "#b7791f",
+			"--theme-pillar-distributor": "#1d3184"
+		}
+	},
+	basecoat: {
+		"displayName": "Basecoat (neutral)",
+		"$comment": "Basecoat's own :root/.dark values, read VERBATIM from vendor/basecoat/base/base.css at build time; only the extension roles are authored here.",
+		"vendor": true,
+		"light": {
+			"success": "#16a34a",
+			"warning": "#ca8a04",
+			"warningForeground": "rgba(0, 0, 0, 0.87)",
+			"info": "#2563eb",
+			"teal": "#0d9488",
+			"purple": "#7c3aed",
+			"neutral": "#737373",
+			"dark": "#171717"
+		},
+		"dark": {
+			"success": "#4ade80",
+			"warning": "#facc15",
+			"info": "#60a5fa",
+			"teal": "#2dd4bf",
+			"purple": "#a78bfa",
+			"neutral": "#808080",
+			"neutralForeground": "#ffffff",
+			"dark": "#d4d4d4",
+			"darkForeground": "#171717"
+		},
+		"legacy": {}
+	}
+};
+function pick(name) {
+	const p = raw[name];
+	return {
+		displayName: p.displayName,
+		light: p.light,
+		dark: p.dark
+	};
+}
+var themePresets = {
+	one: pick("one"),
+	basecoat: pick("basecoat")
+};
+var DEFAULT_THEME = "one";
+var DEFAULT_FLAVOR = "one";
+var flavorPresets = {
+	one: {
+		displayName: "ONE",
+		summary: "EJI ONE design system: Poppins, 40px controls, 8px control radius, semibold sentence-case labels, soft shadows.",
+		controlHeights: [
+			1.75,
+			2.25,
+			2.5,
+			2.75,
+			3,
+			3.25
+		]
+	},
+	vega: {
+		displayName: "Vega",
+		summary: "The Basecoat default: rounded-md, h-9 controls.",
+		vendor: "vega",
+		controlHeights: [
+			1.5,
+			2,
+			2.25,
+			2.5,
+			2.75,
+			3
+		]
+	},
+	nova: {
+		displayName: "Nova",
+		summary: "Compact, rounded-lg, h-8 controls.",
+		vendor: "nova",
+		controlHeights: [
+			1.5,
+			1.75,
+			2,
+			2.25,
+			2.5,
+			2.75
+		]
+	},
+	maia: {
+		displayName: "Maia",
+		summary: "Pill-shaped, roomy padding, tinted outline surfaces.",
+		vendor: "maia",
+		controlHeights: [
+			1.5,
+			2,
+			2.25,
+			2.5,
+			2.75,
+			3
+		]
+	},
+	lyra: {
+		displayName: "Lyra",
+		summary: "Square corners, small type, 1px focus ring.",
+		vendor: "lyra",
+		controlHeights: [
+			1.5,
+			1.75,
+			2,
+			2.25,
+			2.5,
+			2.75
+		]
+	},
+	mira: {
+		displayName: "Mira",
+		summary: "Dense: h-7 controls, text-xs, tight padding.",
+		vendor: "mira",
+		controlHeights: [
+			1.25,
+			1.5,
+			1.75,
+			2,
+			2.25,
+			2.5
+		]
+	},
+	luma: {
+		displayName: "Luma",
+		summary: "Pill-shaped and soft, 30% focus ring.",
+		vendor: "luma",
+		controlHeights: [
+			1.5,
+			2,
+			2.25,
+			2.5,
+			2.75,
+			3
+		]
+	},
+	sera: {
+		displayName: "Sera",
+		summary: "Editorial: square, uppercase, h-10 controls, wide padding.",
+		vendor: "sera",
+		controlHeights: [
+			1.75,
+			2.25,
+			2.5,
+			2.75,
+			3,
+			3.25
+		]
+	},
+	rhea: {
+		displayName: "Rhea",
+		summary: "Compact, rounded-2xl, 30% focus ring.",
+		vendor: "rhea",
+		controlHeights: [
+			1.5,
+			1.75,
+			2,
+			2.25,
+			2.5,
+			2.75
+		]
+	}
+};
+//#endregion
+//#region src/data/theme/index.ts
+var themes = Object.fromEntries(Object.keys(themePresets).map((name) => [name, {
+	name,
+	displayName: themePresets[name].displayName
+}]));
+var flavors = Object.fromEntries(Object.keys(flavorPresets).map((name) => [name, {
+	name,
+	displayName: flavorPresets[name].displayName
+}]));
+var COLOR_CLASS_PREFIX = "theme-color-";
+var COLOR_CLASSES = Object.keys(themes).map((name) => `${COLOR_CLASS_PREFIX}${name}`);
+var STRUCTURE_CLASS_PREFIX = "theme-";
+var STRUCTURE_CLASSES = Object.keys(flavors).filter((name) => name !== "one").map((name) => `${STRUCTURE_CLASS_PREFIX}${name}`);
+function getThemeTarget() {
+	return document.body || document.documentElement;
+}
+function setColorClass(themeName) {
+	if (!themes[themeName]) {
+		console.warn(`Theme color "${themeName}" not found`);
+		return false;
+	}
+	const target = getThemeTarget();
+	target.classList.remove(...COLOR_CLASSES);
+	target.classList.add(`${COLOR_CLASS_PREFIX}${themeName}`);
+	document.documentElement.setAttribute("data-theme-color", themeName);
+	return true;
+}
+function setFlavorClass(flavorName) {
+	if (!flavors[flavorName]) {
+		console.warn(`Theme "${flavorName}" not found`);
+		return false;
+	}
+	const target = getThemeTarget();
+	target.classList.remove(...STRUCTURE_CLASSES);
+	if (flavorName !== "one") target.classList.add(`${STRUCTURE_CLASS_PREFIX}${flavorName}`);
+	document.documentElement.setAttribute("data-theme", flavorName);
+	return true;
+}
+function dispatchThemeChanged() {
+	const color = getCurrentTheme();
+	const flavor = getCurrentFlavor();
+	window.dispatchEvent(new CustomEvent("theme-changed", {
+		detail: {
+			theme: color,
+			themeData: themes[color],
+			color,
+			flavor,
+			flavorData: flavors[flavor]
+		},
+		bubbles: true,
+		composed: true
+	}));
+}
+function applyTheme(input) {
+	let changed = false;
+	if (typeof input === "string") changed = setColorClass(input) || changed;
+	else {
+		if (input.color !== void 0) changed = setColorClass(input.color) || changed;
+		if (input.flavor !== void 0) changed = setFlavorClass(input.flavor) || changed;
+	}
+	if (changed) dispatchThemeChanged();
+}
+function applyFlavor(flavorName) {
+	if (setFlavorClass(flavorName)) dispatchThemeChanged();
+}
+function getCurrentTheme() {
+	const target = getThemeTarget();
+	for (const themeName of Object.keys(themes)) if (target.classList.contains(`${COLOR_CLASS_PREFIX}${themeName}`)) return themeName;
+	const dataColor = document.documentElement.getAttribute("data-theme-color");
+	if (dataColor && isValidTheme(dataColor)) return dataColor;
+	return "one";
+}
+function getCurrentFlavor() {
+	const target = getThemeTarget();
+	for (const flavorName of Object.keys(flavors)) {
+		if (flavorName === "one") continue;
+		if (target.classList.contains(`${STRUCTURE_CLASS_PREFIX}${flavorName}`)) return flavorName;
+	}
+	const dataTheme = document.documentElement.getAttribute("data-theme");
+	if (dataTheme && isValidFlavor(dataTheme)) return dataTheme;
+	return "one";
+}
+function getThemeData(themeName) {
+	return themes[themeName];
+}
+function getFlavorData(flavorName) {
+	return flavors[flavorName];
+}
+function getAllThemes() {
+	return Object.values(themes);
+}
+function getAllFlavors() {
+	return Object.values(flavors);
+}
+function isValidTheme(themeName) {
+	return themeName in themes;
+}
+function isValidFlavor(flavorName) {
+	return flavorName in flavors;
+}
+function resetTheme() {
+	applyTheme({
+		color: "one",
+		flavor: "one"
+	});
+}
+function resetFlavor() {
+	applyFlavor("one");
+}
+function createThemeClass(themeName) {
+	return `${COLOR_CLASS_PREFIX}${themeName}`;
+}
+/** Structure class for a flavor — empty for `one` (the default, no class). */
+function createFlavorClass(flavorName) {
+	return flavorName === "one" ? "" : `${STRUCTURE_CLASS_PREFIX}${flavorName}`;
+}
+//#endregion
+export { DEFAULT_FLAVOR as _, flavors as a, themePresets as b, getCurrentFlavor as c, getThemeData as d, isValidFlavor as f, themes as g, resetTheme as h, createThemeClass as i, getCurrentTheme as l, resetFlavor as m, applyTheme as n, getAllFlavors as o, isValidTheme as p, createFlavorClass as r, getAllThemes as s, applyFlavor as t, getFlavorData as u, DEFAULT_THEME as v, flavorPresets as y };

package/dist/index.node.d.ts

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

package/dist/index.node.js

@@ -0,0 +1,16 @@
+import { a as parseFieldPath, c as toODataClause, l as toODataSelector, n as isPath, r as mergePatch, s as setFieldValue, t as getFieldValue } from "./field-path-C92eGLg3.js";
+import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "./data-source-read-DL88aH8t.js";
+import { _ as plainSearchFields, b as searchRemoteFilter, c as resolveErrorMessages, d as DEFAULT_SEARCH_OPERATION, f as MonoSourceSearch, g as parseSearchValue, h as mergeSearchFields, l as setErrorMessages, m as isFoldableSearch, n as describeError, p as SEARCH_FIELDS_KEYS, r as errorStatus, s as normalizeError, t as DEFAULT_ERROR_MESSAGES, v as readSearchField, x as searchRowPredicate, y as resolveSearchFields } from "./normalize-error-Gcgmgh5i.js";
+import { h as monoArraySource } from "./data-source-options-Jqj7LU3Z.js";
+import { t as resolveMaybeReactive } from "./reactive-D3EERqgO.js";
+import { t as monoDataGrid } from "./mono-data-grid-YjR3n9Ar.js";
+import { d as OPERATOR_ARITY, l as treeToArray, m as operatorsFor, n as arrayToTree, s as odataStringToArray, t as arrayToODataString, u as DEFAULT_TEXTS } from "./filter-odata-C1vSGZaY.js";
+import { t as monoFilterBuilder } from "./filter-builder-Bke3qOgJ.js";
+import { a as resetMonoUI, g as resetMonoSkeleton, i as getMonoUIStatus, n as createMonoUI, o as getMonoSkeletonStatus, r as getMonoUI, s as isMonoSsrApp } from "./mono-ui-CPV7rrdo.js";
+import { t as monoForm } from "./mono-form-controller-5PfsU4qa.js";
+import { t as monoModal } from "./mono-modal-controller-BMO3n3rP.js";
+import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "./mono-data-chart-CEv29_NS.js";
+import { t as monoDataDropdown } from "./mono-data-dropdown-Wnoke6zO.js";
+import { a as resetMonoTooltip, n as createMonoTooltip, o as controlMonoTooltip, r as destroyAllMonoTooltips, s as monoTooltip, u as getMonoTooltipGlobal } from "./tooltip-DQqNpqk2.js";
+import { _ as DEFAULT_FLAVOR, a as flavors, b as themePresets, c as getCurrentFlavor, d as getThemeData, f as isValidFlavor, g as themes, h as resetTheme, i as createThemeClass, l as getCurrentTheme, m as resetFlavor, n as applyTheme, o as getAllFlavors, p as isValidTheme, r as createFlavorClass, s as getAllThemes, t as applyFlavor, u as getFlavorData, v as DEFAULT_THEME, y as flavorPresets } from "./index.node-BIqEGehH.js";
+export { DEFAULT_ERROR_MESSAGES, DEFAULT_FLAVOR, DEFAULT_SEARCH_OPERATION, DEFAULT_THEME, OPERATOR_ARITY as MONO_FILTER_OPERATOR_ARITY, DEFAULT_TEXTS as MONO_FILTER_TEXTS, MonoSourceSearch, SEARCH_FIELDS_KEYS, applyFlavor, applyTheme, arrayToODataString, arrayToTree, buildChartApply, buildChartOdataRequest, buildGroups, collectGroupPaths, composeApply, monoChart as controlMonoChart, monoChart, monoDataDropdown as controlMonoDataDropdown, monoDataDropdown, monoFilterBuilder as controlMonoFilterBuilder, monoFilterBuilder, monoForm as controlMonoForm, monoForm, monoModal as controlMonoModal, monoModal, monoDataGrid as controlMonoTable, monoDataGrid, controlMonoTooltip, createFlavorClass, createMonoTooltip, createMonoUI, createThemeClass, describeError, destroyAllMonoTooltips, errorStatus, flattenLeaves, flavorPresets, flavors, getAllFlavors, getAllThemes, getCurrentFlavor, getCurrentTheme, getFieldValue, getFlavorData, getMonoSkeletonStatus, getMonoTooltipGlobal, getMonoUI, getMonoUIStatus, getThemeData, isFoldableSearch, isGroupNode, isMonoSsrApp, isPath, isValidFlavor, isValidTheme, mergePatch, mergeSearchFields, monoArraySource, operatorsFor as monoFilterOperatorsFor, monoTooltip, normalizeError, odataStringToArray, parseFieldPath, parseSearchValue, plainSearchFields, readSearchField, resetFlavor, resetMonoSkeleton, resetMonoTooltip, resetMonoUI, resetTheme, resolveErrorMessages, resolveMaybeReactive, resolveSearchFields, searchRemoteFilter, searchRowPredicate, setErrorMessages, setFieldValue, themePresets, themes, toODataClause, toODataSelector, treeToArray };

package/dist/input-zGOULADt.js

@@ -0,0 +1,4 @@
+//#region src/components/input/input.css?raw
+var input_default = "/* =========================================================================\r\n   mono-input — a port of Basecoat's `.field` / `.input-group` / `.label`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat (`.input-group:has([aria-invalid])`) —\r\n   and the attributes mirror the element's props one for one, so hand-written\r\n   markup reads like the Lit / Vue tag:\r\n\r\n     <mono-input size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Name\">\r\n     <div mono-input mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Name</label>\r\n       <div mono-field><input mono-native></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined,\r\n   `:not([mono-validation-state])` = default). The element renders these\r\n   attributes on its wrapper (both builds); the old classes\r\n   (`.mono-input.sm.danger.filled`) are still emitted as inert hooks for\r\n   consumer CSS until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-input]                                  ≡ .field            (flex column, gap-3)\r\n     [mono-input] > [mono-label]                   ≡ .field > label / .label\r\n     [mono-input] > [mono-field]                   ≡ .input-group      (the bordered box: h-9 rounded-md border-input shadow-xs)\r\n     [mono-field] > [mono-native]                  ≡ .input-group > input (borderless, px-2.5 text-sm; `.input` for the metrics)\r\n     [mono-field] > [mono-prefix|mono-suffix]      ≡ .input-group > span[data-align='start'|'end']\r\n     [mono-field] > [mono-clear]                   ≡ .input-group > button[data-align='end']:has(> svg)\r\n     [mono-input] > [mono-message-wrap]            ≡ .field > p\r\n     [mono-message=\"helper\"]                       ≡ .field > p        (text-sm text-muted-foreground)\r\n     [mono-message=\"invalid\"]                      ≡ .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .input-group:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern with --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat sizes only the select; the ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .input-group: border-transparent bg-input/50, ring-ring/30)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .input-group: rounded-none border-b-input px-0, no ring)\r\n     [mono-disabled] / [mono-native]:disabled      ≡ .input-group:has(input:disabled) — opacity-50\r\n     [mono-readonly]                               ≡ EXTENSION (a muted surface)\r\n\r\n   Specificity contract (same as the pre-port class sheet, and as checkbox.css):\r\n   a part's RESTING rule is written `:where([mono-input]) [mono-part]` = exactly\r\n   one attribute, (0,1,0) — so a utility class composed onto the markup (the\r\n   `cssClass` prop, or a hand-written class in a css/ demo) wins by source order,\r\n   while the prop and state rules ([mono-size], [mono-variant], [mono-disabled],\r\n   :focus-within, [aria-invalid], …) stay heavier and still win over it.\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-field], [mono-prefix] / [mono-suffix] (+ [mono-empty] in the shadow\r\n   build for an unassigned slot), [mono-native], [mono-clear] > [mono-icon],\r\n   [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\r\n\r\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n   vega.cdn.css) through the token layer: `--spacing` → `--mono-spacing`,\r\n   `--text-sm` → `--mono-text-sm`, `--radius-md` → `--mono-radius-md`,\r\n   `--color-x` → `--x`, Tailwind's `--tw-ring-*` stack → the two-slot\r\n   `box-shadow: ring, shadow` below, and every `dark:` variant → a\r\n   `--mono-mode-*` token (a selector cannot cross a shadow boundary; an\r\n   inherited custom property can).\r\n\r\n   FLAVORS (Basecoat's other seven styles, src/data/theme/flavors/*.css) set\r\n   the knobs read below — `--mono-input-radius`, `--mono-input-padding-x-<size>`,\r\n   `--mono-input-font-<size>`, `--mono-input-line-height`, `--mono-input-ring-width`,\r\n   `--mono-input-ring-alpha`, `--mono-input-gap`, `--mono-input-affix-*`,\r\n   `--mono-input-label-*`, `--mono-input-message-*`, `--mono-input-clear-radius`,\r\n   `--mono-input-disabled-bg`, and the outline-variant set `--mono-input-outline-\r\n   {bg,border-color,side-border-color,shadow,ring-width,radius,padding-x,affix-padding}`.\r\n   Every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.(field|label|input|input-group)\\b\"`).\r\n\r\n   The public `--mono-input-*` knobs and the three-tier resolver\r\n   (`--mono-input-x` → `--_mono-input-x-preset` → base) are unchanged: a\r\n   colour / variant attribute only ever writes a `*-preset` slot, so a\r\n   consumer's own `--mono-input-bg` on the host still wins.\r\n   ========================================================================= */\r\n\r\nmono-input {\r\n  display: block;\r\n}\r\n\r\n[mono-input] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-input-text: var(--mono-input-color, var(--mono-input-text, var(--foreground)));\r\n  --_mono-input-placeholder: var(--mono-input-placeholder, var(--muted-foreground));\r\n  --_mono-input-muted: var(--mono-input-muted, var(--muted-foreground));\r\n  /* the `color` prop picks the FOCUS colour; primary is Basecoat's `--ring` */\r\n  --_mono-input-primary: var(--mono-input-primary, var(--ring));\r\n  --_mono-input-secondary: var(--mono-input-secondary, var(--muted-foreground));\r\n  --_mono-input-success: var(--mono-input-success, var(--success));\r\n  --_mono-input-danger: var(--mono-input-danger, var(--destructive));\r\n  --_mono-input-warning: var(--mono-input-warning, var(--warning));\r\n  --_mono-input-info: var(--mono-input-info, var(--info));\r\n  --_mono-input-teal: var(--mono-input-teal, var(--teal));\r\n  --_mono-input-purple: var(--mono-input-purple, var(--purple));\r\n  --_mono-input-neutral: var(--mono-input-neutral, var(--neutral));\r\n  --_mono-input-dark: var(--mono-input-dark, var(--dark));\r\n  --_mono-input-valid: var(--mono-input-valid, var(--success));\r\n  --_mono-input-invalid: var(--mono-input-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .input-group (vega) ──────── */\r\n  --_mono-input-ring-color: var(--mono-input-ring-color, var(--mono-input-focus-color, var(--_mono-input-ring-color-preset, var(--_mono-input-primary))));\r\n  --_mono-input-ring-width: var(--mono-input-ring-width, var(--_mono-input-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-input-ring-alpha: var(--mono-input-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-input-border-color: var(--mono-input-rest-border, var(--mono-input-border-color, var(--_mono-input-border-color-preset, var(--input))));\r\n  --_mono-input-bg: var(--mono-input-bg, var(--mono-input-surface, var(--_mono-input-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-input-shadow: var(--mono-input-shadow, var(--_mono-input-shadow-preset, 0 0 #0000));\r\n  --_mono-input-affix-padding: var(--mono-input-affix-padding, var(--_mono-input-affix-padding-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-input>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md; > input px-2.5 text-sm ── */\r\n  --_mono-input-height: var(--mono-input-height-md, var(--mono-control-height-md));\r\n  --_mono-input-radius: var(--mono-input-radius-md, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-md, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-sm));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 6);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-input-gap, calc(var(--mono-spacing) * 3));\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-input-text);\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n   boundary; scoped here so both builds measure the same. */\r\n[mono-input],\r\n:where([mono-input]) *,\r\n:where([mono-input]) *::before,\r\n:where([mono-input]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders every slot wrapper and marks an unassigned one\r\n   `mono-empty`; the light build simply omits it. Inert in the light build. */\r\n:where([mono-input]) :is([mono-label], [mono-prefix], [mono-suffix], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the field's painted height IS the token (tests/perf/field-heights).\r\n   EXTENSION: Basecoat sizes only its select (data-size=sm); the ladder is the\r\n   shared --mono-control-height-* scale and the text follows .btn's steps.\r\n   ========================================= */\r\n\r\n/* `.input` is text-base under 48rem (no iOS zoom) and md:text-sm above it —\r\n   vendor behaviour, kept for the default size only. */\r\n@media (width < 48rem) {\r\n  [mono-input]:is(:not([mono-size]), [mono-size=\"md\"]) {\r\n    --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-base));\r\n    --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-base--lh)));\r\n  }\r\n}\r\n\r\n[mono-input][mono-size=\"xs\"] {\r\n  --_mono-input-height: var(--mono-input-height-xs, var(--mono-control-height-xs));\r\n  --_mono-input-radius: var(--mono-input-radius-xs, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-xs, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-input-font-size: var(--mono-input-font-xs, var(--mono-text-xs));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 4);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-input][mono-size=\"sm\"] {\r\n  --_mono-input-height: var(--mono-input-height-sm, var(--mono-control-height-sm));\r\n  --_mono-input-radius: var(--mono-input-radius-sm, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-sm, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-input-font-size: var(--mono-input-font-sm, var(--mono-input-font-md, var(--mono-text-sm)));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 5);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-input][mono-size=\"lg\"] {\r\n  --_mono-input-height: var(--mono-input-height-lg, var(--mono-control-height-lg));\r\n  --_mono-input-radius: var(--mono-input-radius-lg, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-lg, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-input-font-size: var(--mono-input-font-lg, var(--mono-input-font-md, var(--mono-text-sm)));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-input][mono-size=\"xl\"] {\r\n  --_mono-input-height: var(--mono-input-height-xl, var(--mono-control-height-xl));\r\n  --_mono-input-radius: var(--mono-input-radius-xl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-xl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 3)));\r\n  --_mono-input-font-size: var(--mono-input-font-xl, var(--mono-text-base));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 7);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n[mono-input][mono-size=\"xxl\"] {\r\n  --_mono-input-height: var(--mono-input-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-input-radius: var(--mono-input-radius-xxl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-xxl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-input-font-size: var(--mono-input-font-xxl, var(--mono-text-lg));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 8);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\r\n   shadow-xs, bg-transparent (dark:bg-input/30 via --mono-mode-surface). The\r\n   `--mono-input-outline-*` knobs are how a flavor restyles THIS variant alone\r\n   (maia bg-input/30, luma / rhea border-transparent bg-input/50, sera the\r\n   underline) without touching filled / underlined. */\r\n[mono-input]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-input-bg-preset: var(--mono-input-outline-bg);\r\n  --_mono-input-border-color-preset: var(--mono-input-outline-border-color);\r\n  --_mono-input-side-border-color-preset: var(--mono-input-outline-side-border-color);\r\n  --_mono-input-shadow-preset: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-input-ring-width-preset: var(--mono-input-outline-ring-width);\r\n  --_mono-input-radius-preset: var(--mono-input-outline-radius);\r\n  --_mono-input-padding-x-preset: var(--mono-input-outline-padding-x);\r\n  --_mono-input-affix-padding-preset: var(--mono-input-outline-affix-padding);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .input-group:\r\n   border-transparent bg-input/50, no shadow-xs (the ring stays) */\r\n[mono-input][mono-variant=\"filled\"] {\r\n  --_mono-input-bg-preset: var(--mono-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-input-border-color-preset: transparent;\r\n  --_mono-input-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .input-group:\r\n   rounded-none border-transparent border-b-input bg-transparent px-0, no\r\n   shadow, no ring, focus-within:border-b-ring, has-[aria-invalid]:border-b-destructive.\r\n   Only the bottom edge paints; the sides are transparent in every state. */\r\n[mono-input][mono-variant=\"underlined\"] {\r\n  --_mono-input-bg-preset: transparent;\r\n  --_mono-input-side-border-color-preset: transparent;\r\n  --_mono-input-shadow-preset: 0 0 #0000;\r\n  --_mono-input-ring-width-preset: 0px;\r\n  --_mono-input-radius-preset: 0;\r\n  --_mono-input-padding-x-preset: 0;\r\n  --_mono-input-affix-padding-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border).\r\n   No resting tint: Basecoat fields rest on --input whatever their role.\r\n   ========================================= */\r\n\r\n[mono-input]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-primary);\r\n}\r\n[mono-input][mono-color=\"secondary\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-secondary);\r\n}\r\n[mono-input][mono-color=\"success\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-success);\r\n}\r\n[mono-input][mono-color=\"danger\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-danger);\r\n}\r\n[mono-input][mono-color=\"warning\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-warning);\r\n}\r\n[mono-input][mono-color=\"info\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-info);\r\n}\r\n[mono-input][mono-color=\"teal\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-teal);\r\n}\r\n[mono-input][mono-color=\"purple\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-purple);\r\n}\r\n[mono-input][mono-color=\"neutral\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-neutral);\r\n}\r\n[mono-input][mono-color=\"dark\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n:where([mono-input]) > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: var(--mono-input-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-input-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-input-label-line-height, 1);\r\n  font-weight: var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-input-label-text-transform, none);\r\n  letter-spacing: var(--mono-input-label-letter-spacing, normal);\r\n  color: var(--_mono-input-text);\r\n  user-select: none;\r\n}\r\n\r\n/* in-data-[disabled=true]:opacity-50 / peer-disabled:opacity-50 */\r\n[mono-input][mono-disabled] > [mono-label],\r\n[mono-input]:has(> [mono-field] > [mono-native]:disabled) > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-input][mono-validation-state=\"invalid\"] > [mono-label],\r\n[mono-input]:has(> [mono-field] > [mono-native][aria-invalid=\"true\"]) > [mono-label] {\r\n  color: var(--_mono-input-invalid);\r\n}\r\n\r\n/* EXTENSION — the required asterisk */\r\n:where([mono-input]) [mono-required-mark] {\r\n  color: var(--_mono-input-danger);\r\n}\r\n\r\n/* =========================================\r\n   The field — the bordered box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group */\r\n/* basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md border\r\n   border-input shadow-xs transition-[color,box-shadow] focus-within:border-ring\r\n   focus-within:ring-3 focus-within:ring-ring/50; mono: `--tw-ring-*` flattened to\r\n   the ring + shadow slots, the height is the control token, and the side\r\n   edges read their own slot so a flavor can keep only the bottom one */\r\n:where([mono-input]) > [mono-field] {\r\n  --_mono-input-bc: var(--_mono-input-border-color);\r\n  --_mono-input-side-bc: var(--mono-input-side-border-color, var(--_mono-input-side-border-color-preset, var(--_mono-input-bc)));\r\n  /* The focus / state ring slot — `0 0 #0000` until a state sets it. Kept as a\r\n     slot so a variant can neutralise the resting shadow without ever writing\r\n     `box-shadow: none` (which would out-specify the ring). */\r\n  --_mono-input-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-input-height);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-input-bc);\r\n  border-top-color: var(--_mono-input-side-bc);\r\n  border-inline-color: var(--_mono-input-side-bc);\r\n  border-radius: var(--_mono-input-radius);\r\n  background: var(--_mono-input-bg);\r\n  color: var(--_mono-input-text);\r\n  box-shadow: var(--_mono-input-ring), var(--_mono-input-shadow);\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  /* focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\r\n  &:focus-within {\r\n    --_mono-input-bc: var(--_mono-input-ring-color);\r\n    --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20\r\n   (dark: border /50, ring /40 — carried by the mode tokens). The ring is\r\n   permanent, and it wins over the focus ring — same as the vendor order. */\r\n[mono-input][mono-validation-state=\"invalid\"] > [mono-field],\r\n:where([mono-input]) > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\r\n  --_mono-input-bc: var(--mono-mode-invalid-border);\r\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n[mono-input][mono-validation-state=\"valid\"] > [mono-field] {\r\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-input][mono-validation-state=\"warning\"] > [mono-field] {\r\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — readonly: focusable, on a muted surface */\r\n[mono-input][mono-readonly] > [mono-field],\r\n:where([mono-input]) > [mono-field]:has(> [mono-native]:read-only:not(:disabled)) {\r\n  background: var(--mono-input-readonly-bg, var(--muted));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:has(> :is(input, textarea, select, [data-control]):disabled) — opacity-50\r\n   (`--mono-input-disabled-bg`: nova / lyra add disabled:bg-input/50) */\r\n[mono-input][mono-disabled] > [mono-field],\r\n:where([mono-input]) > [mono-field]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  background: var(--mono-input-disabled-bg, var(--_mono-input-bg));\r\n}\r\n\r\n/* =========================================\r\n   The native input\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group > :is(input, textarea, select, [data-control]) —\r\n   block min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent\r\n   text-foreground shadow-none outline-none placeholder:text-muted-foreground */\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(input, select, [data-control])\r\n   — px-2.5 py-1 text-sm; mono: no block padding — the FIELD owns the height\r\n   (`min-height: token`) and `align-self: stretch` spans the click target */\r\n:where([mono-input]) [mono-native] {\r\n  display: block;\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-input-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-input-font-size);\r\n  line-height: var(--_mono-input-line-height);\r\n  padding-inline: var(--_mono-input-padding-x);\r\n  padding-block: 0;\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-input-placeholder);\r\n  }\r\n\r\n  /* .input:disabled — pointer-events-none cursor-not-allowed (the opacity is\r\n     on the field so the affixes fade with it) */\r\n  &:disabled {\r\n    pointer-events: none;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:read-only {\r\n    cursor: inherit;\r\n  }\r\n\r\n  /* Kill the native focus outline in host projects; the field draws the ring. */\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n\r\n  &[type='number']::-webkit-outer-spin-button,\r\n  &[type='number']::-webkit-inner-spin-button {\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) — ps-1.5\r\n   (and pe-1.5 for an end affix). The clear button counts as an end affix. */\r\n:where([mono-input]) > [mono-field]:has(> [mono-prefix]:not([mono-empty])) > [mono-native] {\r\n  padding-inline-start: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n:where([mono-input]) > [mono-field]:has(> :is([mono-suffix]:not([mono-empty]), [mono-clear])) > [mono-native] {\r\n  padding-inline-end: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* =========================================\r\n   Prefix / suffix\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(span, [role='group'], header, footer), .input-group > :is(svg, kbd, .popover, .dropdown-menu) — gap-2 py-1.5\r\n   text-sm font-medium text-muted-foreground select-none, svg size-4;\r\n   [data-align='start'] ps-2 / [data-align='end'] pe-2 */\r\n:where([mono-input]) [mono-prefix],\r\n:where([mono-input]) [mono-suffix] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n  font-size: var(--mono-input-affix-font-size, var(--_mono-input-font-size));\r\n  line-height: var(--_mono-input-line-height);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  color: var(--_mono-input-muted);\r\n  user-select: none;\r\n}\r\n\r\n:where([mono-input]) [mono-prefix] {\r\n  padding-inline-start: var(--_mono-input-affix-padding);\r\n}\r\n\r\n:where([mono-input]) [mono-suffix] {\r\n  padding-inline-end: var(--_mono-input-affix-padding);\r\n}\r\n\r\n/* The light build re-appends slotted prefix/suffix content into this\r\n   `[data-mono-slot]` placeholder, one level below the inline-flex wrapper.\r\n   Make it a flex container too, so an `display: inline` icon span (e.g. a\r\n   UnoCSS `i-mdi-*`, which ignores width/height while inline) is blockified\r\n   into a flex item and actually renders its box. */\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) > [data-mono-slot] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: inherit;\r\n}\r\n\r\n/* `[&>svg:not([class*='size-'])]:size-4` — our icons are UnoCSS `i-*` mask\r\n   spans as often as SVGs, so every glyph in an affix takes the affix size. */\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) :is(svg, .mono-icon, [mono-icon]),\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(svg),\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(.mono-icon),\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted([mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-input-affix-icon);\r\n  height: var(--_mono-input-affix-icon);\r\n  flex-shrink: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Clear button — a ghost icon button in the end affix slot\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(button, [role='group'] > button, header > button, footer > button):has(> svg):not(:has(> :not(svg)))\r\n   — size-6 rounded-[calc(var(--radius)-5px)] p-0 shadow-none, svg size-3.5;\r\n   .input-group > button[data-align='end'] me-1; painted as .btn[data-variant='ghost'] */\r\n:where([mono-input]) [mono-clear] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-input-clear);\r\n  height: var(--_mono-input-clear);\r\n  padding: 0;\r\n  margin: 0;\r\n  margin-inline-end: var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: var(--mono-input-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-input-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-visible {\r\n    box-shadow: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\r\n  }\r\n\r\n  &:active {\r\n    translate: 0 1px;\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\r\n@media (hover: hover) {\r\n  :where([mono-input]) [mono-clear]:hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-input-text);\r\n  }\r\n}\r\n\r\n:where([mono-input]) [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-input-clear-glyph);\r\n  height: var(--_mono-input-clear-glyph);\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Message — helper / validation text under the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p — text-sm text-muted-foreground\r\n   leading-normal font-normal text-start. The wrapper is always rendered\r\n   (aria-describedby points at it); it takes no space until it holds text. */\r\n:where([mono-input]) > [mono-message-wrap] {\r\n  display: block;\r\n}\r\n\r\n:where([mono-input]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n:where([mono-input]) [mono-message] {\r\n  font-size: var(--mono-input-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-input-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-input-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n:where([mono-input]) [mono-message=\"invalid\"] {\r\n  color: var(--_mono-input-invalid);\r\n}\r\n\r\n/* EXTENSION — the other two states in their role colour */\r\n:where([mono-input]) [mono-message=\"valid\"] {\r\n  color: var(--_mono-input-valid);\r\n}\r\n\r\n:where([mono-input]) [mono-message=\"warning\"] {\r\n  color: var(--_mono-input-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-input]) > [mono-field],\r\n  :where([mono-input]) [mono-clear] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#endregion
+export { input_default as t };

package/dist/layout-var-CZnzMC0s.js

@@ -0,0 +1,73 @@
+//#region src/composables/layout-var.ts
+/**
+* Refcounted document-level layout variables.
+*
+* Several components publish their own size as a custom property on
+* `document.documentElement` so page content can offset itself —
+* `--mono-nav-height`, `--mono-sidebar-left-width`, `--mono-sidebar-right-width`.
+* The property is global but the writers are not: two navs, or two sidebars on the
+* same side, all write the SAME property.
+*
+* Removing it outright on the first unmount blanked the offset for every writer that
+* was still mounted — the page content jumped back underneath a nav or sidebar that
+* is still on screen. That bug was found independently in BOTH `mono-sidebar` and
+* `mono-nav`, which is why the fix lives here rather than being written twice.
+*
+* Ownership is therefore refcounted: the property is removed only when the LAST
+* owner releases it, and until then it is handed back to a remaining owner's last
+* known value. Note that a refcount has two failure modes — releasing too early
+* (survivor loses the var) and never reaching zero (the var is stranded on the
+* document forever). Both are covered by assertions in `docs/e2e/stress.mjs` (repo root).
+*/
+/** Per property: which owners hold it, and the value each last published. */
+var owners = /* @__PURE__ */ new Map();
+/**
+* Publish `value` for `name` on behalf of `owner`.
+*
+* Re-claiming with the same owner just updates that owner's value, so this is safe
+* to call on every render.
+*/
+function claimLayoutVar(name, owner, value) {
+	if (typeof document === "undefined") return;
+	let held = owners.get(name);
+	if (!held) {
+		held = /* @__PURE__ */ new Map();
+		owners.set(name, held);
+	}
+	held.set(owner, value);
+	documentRoot()?.style.setProperty(name, value);
+}
+/**
+* `document.documentElement`, or null when there is no document to write to.
+*
+* `releaseLayoutVar` is called from `disconnectedCallback`, and a component can be
+* disconnected by the document itself going away — a full-document replacement, or a
+* page teardown. The root is already null by then, so the unguarded write threw
+* "Cannot read properties of null (reading 'style')" out of an unmount nothing could
+* catch. The bookkeeping above still runs; only the DOM write is skipped, and there is
+* no document left for the property to be stranded on.
+*/
+function documentRoot() {
+	return typeof document === "undefined" ? null : document.documentElement;
+}
+/**
+* Drop `owner`'s claim on `name`.
+*
+* The property is only removed once nobody holds it; while another owner remains,
+* that owner's last published value is restored instead.
+*/
+function releaseLayoutVar(name, owner) {
+	if (typeof document === "undefined") return;
+	const held = owners.get(name);
+	if (!held) return;
+	held.delete(owner);
+	if (held.size === 0) {
+		owners.delete(name);
+		documentRoot()?.style.removeProperty(name);
+		return;
+	}
+	const remaining = [...held.values()];
+	documentRoot()?.style.setProperty(name, remaining[remaining.length - 1]);
+}
+//#endregion
+export { releaseLayoutVar as n, claimLayoutVar as t };