@mono-lit/helper 0.0.6 → 0.0.8

package/dist/field-validation.css_raw-Cx6SGrfP.js

@@ -0,0 +1,178 @@
+import { r as checkCircleIcon, t as alertCircleIcon } from "./field-icons-t8rXRCKs.js";
+import { r as FieldBubble } from "./field-tooltip.css_raw-U5UeTa2d.js";
+import { html, nothing } from "lit";
+import { ref } from "lit/directives/ref.js";
+
+//#region src/composables/field-validation.ts
+/** `default` (or no state) → `null`: a stateless message stays in the bottom row. */
+function toneOf(state) {
+	if (state === "invalid" || state === "error") return "invalid";
+	if (state === "valid" || state === "success") return "valid";
+	if (state === "warning") return "warning";
+	return null;
+}
+var FieldValidationController = class {
+	constructor(host, read, getBox) {
+		this.host = host;
+		this.read = read;
+		this.getBox = getBox;
+		this._iconBubble = new FieldBubble({
+			side: "top",
+			align: "center"
+		});
+		this._floatBubble = new FieldBubble({
+			side: "bottom",
+			align: "start"
+		});
+		this._hovered = false;
+		this._focused = false;
+		this._onIconClick = (e) => {
+			stopEvent(e);
+			this._iconBubble.show();
+		};
+		this._onEnter = () => {
+			this._hovered = true;
+			this._syncFloat();
+		};
+		this._onLeave = (e) => {
+			if (e.pointerType === "touch") return;
+			this._hovered = false;
+			this._syncFloat();
+		};
+		this._onFocusIn = (e) => {
+			this._focused = true;
+			this._syncFloat();
+			if (this.notice?.position === "icon" && isFocusVisible(e)) this._iconBubble.show();
+		};
+		this._onFocusOut = (e) => {
+			const next = e.relatedTarget;
+			if (next && (next === this.host || this.host.contains(next))) return;
+			this._focused = false;
+			this._syncFloat();
+			this._iconBubble.hide();
+		};
+		host.addController(this);
+	}
+	/** The message that moved out of the bottom row, or `null` (bottom mode / no text). */
+	get notice() {
+		const { position, state, text } = this.read();
+		if (position !== "icon" && position !== "float") return null;
+		const message = typeof text === "string" ? text.trim() : "";
+		const tone = toneOf(state);
+		if (!message || !tone) return null;
+		return {
+			position,
+			tone,
+			text: message
+		};
+	}
+	/** True when the bottom row should show the helper and keep the validation text sr-only. */
+	get moved() {
+		return this.notice !== null;
+	}
+	hostConnected() {
+		this.host.addEventListener("pointerenter", this._onEnter);
+		this.host.addEventListener("pointerleave", this._onLeave);
+		this.host.addEventListener("focusin", this._onFocusIn);
+		this.host.addEventListener("focusout", this._onFocusOut);
+	}
+	hostDisconnected() {
+		this.host.removeEventListener("pointerenter", this._onEnter);
+		this.host.removeEventListener("pointerleave", this._onLeave);
+		this.host.removeEventListener("focusin", this._onFocusIn);
+		this.host.removeEventListener("focusout", this._onFocusOut);
+		this._iconBubble.hide();
+		this._floatBubble.hide();
+		this._hovered = false;
+		this._focused = false;
+	}
+	hostUpdated() {
+		this._floatBubble.setAnchor(this.getBox() ?? null);
+		if (this.notice?.position !== "icon") this._iconBubble.hide();
+		this._syncFloat();
+		this._iconBubble.place();
+		this._floatBubble.place();
+	}
+	/** Re-evaluate the float bubble — for popups the host opens without a re-render (date's calendar). */
+	refresh() {
+		this._syncFloat();
+	}
+	/**
+	* `icon` mode: the state icon for inside the box (before the clear button /
+	* actions). `anchored` wraps it in a zero-height `[mono-validation-anchor]`
+	* — for the textarea, whose box can't hold children.
+	*/
+	renderIcon(options = {}) {
+		const notice = this.notice;
+		if (notice?.position !== "icon") return nothing;
+		const icon = html`<span
+      mono-validation-icon
+      mono-state=${notice.tone}
+      aria-hidden="true"
+      @pointerenter=${this._iconBubble.show}
+      @pointerleave=${this._iconBubble.onPointerLeave}
+      @pointerdown=${stopEvent}
+      @click=${this._onIconClick}
+      ${ref(this._iconBubble.setAnchor)}
+    >${this._glyph(notice.tone)}<span
+        mono-field-bubble
+        mono-validation-tip
+        mono-state=${notice.tone}
+        popover="manual"
+        @pointerenter=${this._iconBubble.cancelHide}
+        @pointerleave=${this._iconBubble.onPointerLeave}
+        @click=${stopEvent}
+        ${ref(this._iconBubble.setBubble)}
+      >${notice.text}</span></span>`;
+		return options.anchored ? html`<span mono-validation-anchor>${icon}</span>` : icon;
+	}
+	/** `float` mode: the bubble that floats under the box while the field is hovered or focused. */
+	renderFloat() {
+		const notice = this.notice;
+		if (notice?.position !== "float") return nothing;
+		return html`<span
+      mono-field-bubble
+      mono-validation-float
+      mono-state=${notice.tone}
+      aria-hidden="true"
+      popover="manual"
+      @click=${stopEvent}
+      ${ref(this._floatBubble.setBubble)}
+    >${notice.text}</span>`;
+	}
+	/** Light build: UnoCSS mask icons; shadow build: inline SVG (page icon CSS can't reach a shadow root). */
+	_glyph(tone) {
+		if (this.host.renderRoot instanceof ShadowRoot) return tone === "valid" ? checkCircleIcon() : alertCircleIcon();
+		return tone === "valid" ? html`<span class="mono-icon i-mdi-check-circle-outline" mono-icon aria-hidden="true"></span>` : html`<span class="mono-icon i-mdi-alert-circle-outline" mono-icon aria-hidden="true"></span>`;
+	}
+	_syncFloat() {
+		const notice = this.notice;
+		const active = this._hovered || this._focused;
+		if (notice?.position === "float" && active && !this.read().suppressed) this._floatBubble.show();
+		else if (!active) this._floatBubble.scheduleHide();
+		else this._floatBubble.hide();
+	}
+};
+const stopEvent = (e) => {
+	e.preventDefault();
+	e.stopPropagation();
+};
+function isFocusVisible(e) {
+	const target = e.composedPath?.()[0] ?? e.target;
+	try {
+		return !!target?.matches?.(":focus-visible");
+	} catch {
+		return false;
+	}
+}
+
+//#endregion
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\form\label-position.css?raw.js
+var label_position_css_raw_default = "/* =========================================\r\n   label-position — shared by every field-like control\r\n   (input, select, tag-input, date, textarea, dropdown-table; otp — left / right only).\r\n\r\n   `top` (default) emits NO attribute, so nothing here touches it. The other\r\n   three are layout-only: the label's type, colour and states stay with each\r\n   component's own label rules.\r\n\r\n   Each component's root writes the private slots read below:\r\n     --_mono-lp-width      left/right label column  (--mono-<c>-label-width, auto)\r\n     --_mono-lp-gap        left/right column gap    (--mono-<c>-label-side-gap)\r\n     --_mono-lp-height     one control row — the side label centres on it\r\n     --_mono-lp-box-min    the box's resting min-height (textarea: its rows)\r\n     --_mono-lp-padding-x  the box's inline-start padding — the notch lines up with the text\r\n     --_mono-lp-font       notched label font-size  (--mono-<c>-label-notch-font-size)\r\n     --_mono-lp-notch-bg   the surface the notch is cut from (--mono-<c>-label-notch-bg)\r\n     --_mono-lp-field-bg   the box's own surface — paints the notch's lower half\r\n\r\n   Light: imported once by entries/index.css. Shadow: appended to each\r\n   component's shadow sheet (the inner root keeps its `mono-<c>` attribute).\r\n   ========================================= */\r\n\r\n/* ── left / right — label column + field column; messages stay under the box ── */\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table], [mono-otp]):is([mono-label-position=\"left\"], [mono-label-position=\"right\"]) {\r\n  display: grid;\r\n  grid-template-columns: var(--_mono-lp-width) minmax(0, 1fr);\r\n  column-gap: var(--_mono-lp-gap);\r\n  align-items: start;\r\n}\r\n\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table], [mono-otp])[mono-label-position=\"right\"] {\r\n  grid-template-columns: minmax(0, 1fr) var(--_mono-lp-width);\r\n}\r\n\r\n/* Everything but the label lives in the field column (an absolute panel then\r\n   measures against that column too). */\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table], [mono-otp])[mono-label-position=\"left\"] > * {\r\n  grid-column: 2;\r\n}\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table], [mono-otp])[mono-label-position=\"right\"] > * {\r\n  grid-column: 1;\r\n}\r\n\r\n/* The label centres on the FIRST control row, so a tag-input growing chip\r\n   rows or a tall textarea keeps it beside the top line. */\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table], [mono-otp]):is([mono-label-position=\"left\"], [mono-label-position=\"right\"]) > :is([mono-label], [mono-dd-label]) {\r\n  grid-row: 1;\r\n  grid-column: 1;\r\n  min-height: var(--_mono-lp-height);\r\n  margin: 0;\r\n}\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table], [mono-otp])[mono-label-position=\"right\"] > :is([mono-label], [mono-dd-label]) {\r\n  grid-column: 2;\r\n}\r\n\r\n/* ── notched — shared by both looks: the label leaves the flow ── */\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table])[mono-label-position=\"notched\"] {\r\n  position: relative;\r\n}\r\n\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table])[mono-label-position=\"notched\"] > :is([mono-label], [mono-dd-label]) {\r\n  position: absolute;\r\n  z-index: 1;\r\n  max-width: calc(100% - 2 * var(--_mono-lp-padding-x) - 2 * var(--mono-spacing));\r\n  margin: 0;\r\n  font-size: var(--_mono-lp-font);\r\n  line-height: 1;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* ── notched + outlined — the label sits ON the top border: ──Label── ──\r\n   The \"notch\" is a background patch: page surface above the border line, the\r\n   box's surface below it. On a non-solid parent set --mono-<c>-label-notch-bg. */\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table])[mono-label-position=\"notched\"]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  padding-top: calc(var(--_mono-lp-font) / 2);\r\n}\r\n\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table])[mono-label-position=\"notched\"]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) > :is([mono-label], [mono-dd-label]) {\r\n  top: 0;\r\n  inset-inline-start: calc(var(--mono-border-width) + var(--_mono-lp-padding-x) - var(--mono-spacing));\r\n  padding-inline: var(--mono-spacing);\r\n  background:\r\n    linear-gradient(var(--_mono-lp-field-bg), var(--_mono-lp-field-bg)) bottom / 100% 50% no-repeat,\r\n    var(--_mono-lp-notch-bg);\r\n}\r\n\r\n/* ── notched + filled / underlined — no outline to cut, so the label insets\r\n   into the top of the box (Material \"filled\") and the box grows by its line ── */\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table])[mono-label-position=\"notched\"]:is([mono-variant=\"filled\"], [mono-variant=\"underlined\"]) > :is([mono-label], [mono-dd-label]) {\r\n  top: calc(var(--mono-border-width) + var(--_mono-lp-inset-y));\r\n  inset-inline-start: calc(var(--mono-border-width) + var(--_mono-lp-padding-x));\r\n}\r\n\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea])[mono-label-position=\"notched\"]:is([mono-variant=\"filled\"], [mono-variant=\"underlined\"]) > :is([mono-field], [mono-trigger], textarea[mono-native]),\r\n[mono-dropdown-table][mono-label-position=\"notched\"]:is([mono-variant=\"filled\"], [mono-variant=\"underlined\"]) > [mono-dd-control] > [mono-dd-trigger] {\r\n  min-height: calc(var(--_mono-lp-box-min) + var(--_mono-lp-font) + var(--_mono-lp-inset-y));\r\n  padding-top: calc(var(--_mono-lp-inset-y) + var(--_mono-lp-font) + var(--_mono-lp-padding-y, 0px));\r\n}\r\n\r\n/* Slots the component sheets don't need to set. */\r\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table])[mono-label-position] {\r\n  --_mono-lp-inset-y: calc(var(--mono-spacing) * 1.5);\r\n}\r\n";
+
+//#endregion
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\form\field-validation.css?raw.js
+var field_validation_css_raw_default = "/* =========================================\r\n   validation-position — `icon` and `float` (composables/field-validation.ts)\r\n   on input, select, tag-input, date, textarea and dropdown-table.\r\n\r\n   The bubbles share the [mono-field-bubble] look (field-tooltip.css); this\r\n   sheet paints them in the state colour, and draws the state icon inside the\r\n   box. Knobs:\r\n     --mono-validation-invalid-bg / -color   (default --destructive / -foreground)\r\n     --mono-validation-warning-bg / -color   (default --warning / -foreground)\r\n     --mono-validation-valid-bg / -color     (default --success / -foreground)\r\n     --mono-validation-icon-size             (default 1rem)\r\n\r\n   Light: imported once by entries/index.css. Shadow: appended to each\r\n   control's shadow sheet.\r\n   ========================================= */\r\n\r\n/* ── state-coloured bubbles ── */\r\n[mono-field-bubble][mono-state=\"invalid\"] {\r\n  --_mono-field-tip-bg: var(--mono-validation-invalid-bg, var(--destructive));\r\n  color: var(--mono-validation-invalid-color, var(--destructive-foreground, #fff));\r\n}\r\n[mono-field-bubble][mono-state=\"warning\"] {\r\n  --_mono-field-tip-bg: var(--mono-validation-warning-bg, var(--warning));\r\n  color: var(--mono-validation-warning-color, var(--warning-foreground, #fff));\r\n}\r\n[mono-field-bubble][mono-state=\"valid\"] {\r\n  --_mono-field-tip-bg: var(--mono-validation-valid-bg, var(--success));\r\n  color: var(--mono-validation-valid-color, var(--success-foreground, #fff));\r\n}\r\n\r\n/* ── float: a compact message under the box ── */\r\n[mono-field-bubble][mono-validation-float] {\r\n  max-width: min(var(--mono-validation-float-max-width, 24rem), calc(100vw - 16px));\r\n  padding: var(--mono-validation-float-padding-y, var(--mono-spacing)) var(--mono-validation-float-padding-x, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-validation-float-font-size, var(--mono-text-xs));\r\n  /* hover-transparent: it must not steal the pointer from the field it describes */\r\n  pointer-events: none;\r\n}\r\n[mono-field-bubble][mono-validation-float]::before {\r\n  display: none;\r\n}\r\n\r\n/* ── icon: the state glyph inside the box ── */\r\n[mono-validation-icon] {\r\n  position: relative;\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  align-self: center;\r\n  margin-inline: var(--mono-validation-icon-gap, var(--mono-spacing));\r\n  font-size: var(--mono-validation-icon-size, 1rem);\r\n  line-height: 1;\r\n  cursor: help;\r\n  /* a disabled field turns events off — the reason is exactly what to show */\r\n  pointer-events: auto;\r\n}\r\n[mono-validation-icon] > [mono-icon] {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n[mono-validation-icon][mono-state=\"invalid\"] {\r\n  color: var(--mono-validation-invalid-bg, var(--destructive));\r\n}\r\n[mono-validation-icon][mono-state=\"warning\"] {\r\n  color: var(--mono-validation-warning-bg, var(--warning));\r\n}\r\n[mono-validation-icon][mono-state=\"valid\"] {\r\n  color: var(--mono-validation-valid-bg, var(--success));\r\n}\r\n\r\n/* textarea: the box can't hold children, so a zero-height anchor sits on the\r\n   textarea's top edge (its negative margin cancels the flex gap it adds) and\r\n   the icon pins to the top-right corner, over reserved inline padding. */\r\n[mono-textarea] > [mono-validation-anchor] {\r\n  position: relative;\r\n  z-index: 1;\r\n  display: block;\r\n  height: 0;\r\n  margin-bottom: calc(-1 * var(--mono-textarea-gap, calc(var(--mono-spacing) * 3)));\r\n}\r\n[mono-textarea] > [mono-validation-anchor] > [mono-validation-icon] {\r\n  position: absolute;\r\n  top: calc(var(--mono-border-width) + var(--_mono-textarea-padding-y, var(--mono-spacing)));\r\n  inset-inline-end: calc(var(--mono-border-width) + var(--_mono-textarea-padding-x, calc(var(--mono-spacing) * 2.5)));\r\n  margin: 0;\r\n}\r\n[mono-textarea]:has(> [mono-validation-anchor]) > textarea[mono-native] {\r\n  padding-inline-end: calc(var(--_mono-textarea-padding-x, calc(var(--mono-spacing) * 2.5)) + var(--mono-validation-icon-size, 1rem) + var(--mono-spacing));\r\n}\r\n/* side labels: the anchor shares the textarea's grid row */\r\n[mono-textarea]:is([mono-label-position=\"left\"], [mono-label-position=\"right\"]) > :is([mono-validation-anchor], textarea[mono-native]) {\r\n  grid-row: 1;\r\n  align-self: start;\r\n}\r\n[mono-textarea]:is([mono-label-position=\"left\"], [mono-label-position=\"right\"]) > [mono-validation-anchor] {\r\n  margin-bottom: 0;\r\n}\r\n\r\n/* ── the moved message stays for assistive tech only ── */\r\n[mono-sr-only] {\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  height: 1px !important;\r\n  margin: -1px !important;\r\n  padding: 0 !important;\r\n  overflow: hidden !important;\r\n  clip-path: inset(50%) !important;\r\n  white-space: nowrap !important;\r\n  border: 0 !important;\r\n}\r\n";
+
+//#endregion
+export { label_position_css_raw_default as n, FieldValidationController as r, field_validation_css_raw_default as t };

package/dist/{form-control-core-rW2WvOcb.js → form-control-core-BbiACMtL.js}

@@ -1,4 +1,4 @@
-import { a as __decorate, c as defineHybridPropAlias, l as defineHybridPropAliases, s as booleanStringConverter } from "./hydration-flush-9AJE8FRl.js";
+import { a as __decorate, c as defineHybridPropAlias, l as defineHybridPropAliases, s as booleanStringConverter } from "./hydration-flush-BaE9gN3C.js";
 import { n as detachEventHandlers, t as applyProps } from "./element-props-xvw0EB7H.js";
 import { property } from "lit/decorators.js";
 

package/dist/{hydration-flush-9AJE8FRl.js → hydration-flush-BaE9gN3C.js}

@@ -450,9 +450,11 @@ function headerWidth(cell, host) {
 * One auto-sized column, owned by its `mono-table-th`. `schedule()` coalesces every trigger (a
 * controller notify, a body mutation, typing in an editor) into one measurement per frame.
 */
-var ColumnAutoSize = class {
+var ColumnAutoSize = class ColumnAutoSize {
 	constructor(host) {
 		this.host = host;
+		this.growOnly = false;
+		this._floor = 0;
 		this._raf = 0;
 		this._onInput = (e) => {
 			const t = e.target;
@@ -463,16 +465,37 @@ var ColumnAutoSize = class {
 			this.schedule();
 		};
 	}
+	static {
+		this._queued = /* @__PURE__ */ new Set();
+	}
+	static {
+		this._frame = 0;
+	}
+	static _flush() {
+		ColumnAutoSize._frame = 0;
+		const batch = [...ColumnAutoSize._queued];
+		ColumnAutoSize._queued.clear();
+		const writes = batch.map((s) => {
+			s._raf = 0;
+			return s._measure();
+		});
+		for (const write of writes) write?.();
+	}
 	schedule() {
 		if (this._raf) return;
-		this._raf = requestAnimationFrame(() => {
-			this._raf = 0;
-			this._run();
-		});
+		this._raf = 1;
+		ColumnAutoSize._queued.add(this);
+		ColumnAutoSize._frame ||= requestAnimationFrame(() => ColumnAutoSize._flush());
+	}
+	/** Forget the grow-only floor (new rows) and re-measure. */
+	resetFloor() {
+		if (!this._floor) return;
+		this._floor = 0;
+		this.schedule();
 	}
 	/** Stop watching, and hand the column back to whatever width it is given next. */
 	stop(clear = false) {
-		if (this._raf) cancelAnimationFrame(this._raf);
+		ColumnAutoSize._queued.delete(this);
 		this._raf = 0;
 		this._unwatch();
 		if (clear && this._wrote) {
@@ -504,10 +527,11 @@ var ColumnAutoSize = class {
 		document.fonts?.removeEventListener?.("loadingdone", this._onFonts);
 		this._table = void 0;
 	}
-	_run() {
+	/** Measure now (reads only); returns the write to apply after every sizer has measured. */
+	_measure() {
 		const cell = this.host.closest("th, td");
 		const table = cell?.closest("table");
-		if (!cell || !table || !this.host.isConnected) return;
+		if (!cell || !table || !this.host.isConnected) return null;
 		this._watch(table);
 		const index = headerColumnIndex(cell);
 		let width = headerWidth(cell, this.host);
@@ -517,13 +541,17 @@ var ColumnAutoSize = class {
 			if (target) width = Math.max(width, contentWidth(target));
 		}
 		width = Math.ceil(clampWidth(width + 1, this.min, this.max));
+		if (this.growOnly) width = this._floor = Math.max(width, this._floor);
+		else this._floor = 0;
 		const value = `${width}px`;
 		const col = colAt(table, index);
-		if (cell.style.width !== value) cell.style.width = value;
-		if (col && col.style.width !== value) col.style.width = value;
-		this._wrote = {
-			col,
-			cell
+		return () => {
+			if (cell.style.width !== value) cell.style.width = value;
+			if (col && col.style.width !== value) col.style.width = value;
+			this._wrote = {
+				col,
+				cell
+			};
 		};
 	}
 };
@@ -592,10 +620,10 @@ function startMonoSizeAttributes() {
 					applyMonoSizeAttributes(r.target);
 					continue;
 				}
-				for (const node of Array.from(r.addedNodes)) if (node.nodeType === 1) scan(node);
+				for (const node of Array.from(r.addedNodes)) if (node.nodeType === 1 && node.isConnected) scan(node);
 				if (r.removedNodes.length) removed = true;
 			}
-			if (removed) sweep();
+			if (removed && sizers.size) sweep();
 		});
 		observer.observe(document.documentElement, {
 			subtree: true,
@@ -1077,6 +1105,27 @@ let _iconSheet = null;
 let _iconSheetReady = false;
 /** How many icon rules the last collection saw, so a later one can be detected. */
 let _iconRuleCount = -1;
+/**
+* The refresh poll ran its course without seeing a glyph rule (a page whose icons are all inline
+* SVG has none). From then on the sheet is treated like a ready one — re-collected only when the
+* rule count moves — instead of a full collect + `replaceSync` on every adopt, and the poll is
+* never re-armed.
+*/
+let _iconPollDone = false;
+/** A rule count was taken this frame — later adopts in the same frame trust it. */
+let _iconCountFresh = false;
+/**
+* `countIconRules()` walks every rule of every stylesheet. `adoptIconStyles` runs from
+* `updated()` (every render of a shadow button-dropdown, for one), so the walk is taken at most
+* once per frame; a rule UnoCSS generates mid-frame is picked up on the next.
+*/
+function iconRulesUnchanged() {
+	if (_iconCountFresh) return true;
+	_iconCountFresh = true;
+	if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(() => _iconCountFresh = false);
+	else _iconCountFresh = false;
+	return countIconRules() === _iconRuleCount;
+}
 /** Selectors that target an icon utility class (`.i-…`) or the `.mono-icon` helper. */
 const ICON_SELECTOR = /(^|[\s,>+~(])\.(i-[a-z0-9]|mono-icon)/i;
 /** A real data-driven icon utility (`.i-mdi-…`) — what we actually wait for. */
@@ -1134,7 +1183,7 @@ function ensureIconSheet() {
 	} catch {
 		return null;
 	}
-	if (_iconSheetReady && countIconRules() === _iconRuleCount) return _iconSheet;
+	if ((_iconSheetReady || _iconPollDone) && iconRulesUnchanged()) return _iconSheet;
 	const collected = [];
 	const seen = /* @__PURE__ */ new Set();
 	let glyphFound = false;
@@ -1175,7 +1224,7 @@ let _refreshScheduled = false;
 * glyphs appear as soon as the rules land — no component re-render required.
 */
 function scheduleIconRefresh() {
-	if (_refreshScheduled || _iconSheetReady || isServer) return;
+	if (_refreshScheduled || _iconSheetReady || _iconPollDone || isServer) return;
 	const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : typeof setTimeout !== "undefined" ? (cb) => setTimeout(cb, 16) : null;
 	if (!raf) return;
 	_refreshScheduled = true;
@@ -1185,6 +1234,7 @@ function scheduleIconRefresh() {
 		ensureIconSheet();
 		if (_iconSheetReady || attempts > 60) {
 			_refreshScheduled = false;
+			if (!_iconSheetReady) _iconPollDone = true;
 			return;
 		}
 		raf(tick);

package/dist/index.js

@@ -1,18 +1,18 @@
 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-BabiMrrA.js";
-import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "./data-source-read-FxqzQkk2.js";
+import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "./data-source-read-BL266IW0.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-D93O4q8g.js";
-import { h as monoArraySource } from "./data-source-options-QjuI73g8.js";
+import { h as monoArraySource } from "./data-source-options-fxT5QIX4.js";
 import { t as resolveMaybeReactive } from "./reactive-Dtd-esHO.js";
-import { t as monoDataGrid } from "./mono-data-grid-8jmeIXUU.js";
+import { t as monoDataGrid } from "./mono-data-grid-Bb00QM72.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-Bi27XUpQ.js";
 import { t as monoFilterBuilder } from "./filter-builder-C0T3pMx2.js";
-import { C as resetMonoSkeleton, a as resetMonoUI, c as stopMonoSizeAttributes, i as getMonoUIStatus, m as isMonoSsrApp, n as createMonoUI, o as applyMonoSizeAttributes, p as getMonoSkeletonStatus, r as getMonoUI, s as startMonoSizeAttributes } from "./mono-ui-KOBJcnXk.js";
-import { t as monoForm } from "./mono-form-controller-BkMR8g14.js";
+import { C as resetMonoSkeleton, a as resetMonoUI, c as stopMonoSizeAttributes, i as getMonoUIStatus, m as isMonoSsrApp, n as createMonoUI, o as applyMonoSizeAttributes, p as getMonoSkeletonStatus, r as getMonoUI, s as startMonoSizeAttributes } from "./mono-ui-kvLVIf1V.js";
+import { t as monoForm } from "./mono-form-controller-BrA10erm.js";
 import { t as monoModal } from "./mono-modal-controller-ClObbHUs.js";
-import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "./mono-data-chart-ChkelNT7.js";
-import { t as monoDataDropdown } from "./mono-data-dropdown-DxpUUk2y.js";
-import { c as getMonoTooltipGlobal, o as monoTooltip, t as controlMonoTooltip } from "./control-tooltip-C3rA_nSH.js";
-import { a as resetMonoTooltip, n as createMonoTooltip, r as destroyAllMonoTooltips } from "./tooltip-Drekihf5.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-tTkISFn2.js";
+import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "./mono-data-chart-NKPdAgVq.js";
+import { t as monoDataDropdown } from "./mono-data-dropdown-DUXo_jxd.js";
+import { a as monoTooltip, c as getMonoTooltipGlobal, t as controlMonoTooltip } from "./control-tooltip-CoPD37_h.js";
+import { a as resetMonoTooltip, n as createMonoTooltip, r as destroyAllMonoTooltips } from "./tooltip-Cu5IrDS9.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-CLqE8F8P.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, applyMonoSizeAttributes, 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, startMonoSizeAttributes, stopMonoSizeAttributes, themePresets, themes, toODataClause, toODataSelector, treeToArray };

package/dist/{index.node-tTkISFn2.js → index.node-CLqE8F8P.js}

@@ -1,9 +1,9 @@
 import "./normalize-error-D93O4q8g.js";
-import "./mono-data-grid-8jmeIXUU.js";
-import "./mono-ui-KOBJcnXk.js";
-import "./mono-data-chart-ChkelNT7.js";
-import "./mono-data-dropdown-DxpUUk2y.js";
-import "./tooltip-Drekihf5.js";
+import "./mono-data-grid-Bb00QM72.js";
+import "./mono-ui-kvLVIf1V.js";
+import "./mono-data-chart-NKPdAgVq.js";
+import "./mono-data-dropdown-DUXo_jxd.js";
+import "./tooltip-Cu5IrDS9.js";
 
 //#region src/data/theme/presets.json
 var presets_default = {

package/dist/index.node.js

@@ -1,18 +1,18 @@
 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-BabiMrrA.js";
-import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "./data-source-read-FxqzQkk2.js";
+import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "./data-source-read-BL266IW0.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-D93O4q8g.js";
-import { h as monoArraySource } from "./data-source-options-QjuI73g8.js";
+import { h as monoArraySource } from "./data-source-options-fxT5QIX4.js";
 import { t as resolveMaybeReactive } from "./reactive-Dtd-esHO.js";
-import { t as monoDataGrid } from "./mono-data-grid-8jmeIXUU.js";
+import { t as monoDataGrid } from "./mono-data-grid-Bb00QM72.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-Bi27XUpQ.js";
 import { t as monoFilterBuilder } from "./filter-builder-C0T3pMx2.js";
-import { C as resetMonoSkeleton, a as resetMonoUI, c as stopMonoSizeAttributes, i as getMonoUIStatus, m as isMonoSsrApp, n as createMonoUI, o as applyMonoSizeAttributes, p as getMonoSkeletonStatus, r as getMonoUI, s as startMonoSizeAttributes } from "./mono-ui-KOBJcnXk.js";
-import { t as monoForm } from "./mono-form-controller-BkMR8g14.js";
+import { C as resetMonoSkeleton, a as resetMonoUI, c as stopMonoSizeAttributes, i as getMonoUIStatus, m as isMonoSsrApp, n as createMonoUI, o as applyMonoSizeAttributes, p as getMonoSkeletonStatus, r as getMonoUI, s as startMonoSizeAttributes } from "./mono-ui-kvLVIf1V.js";
+import { t as monoForm } from "./mono-form-controller-BrA10erm.js";
 import { t as monoModal } from "./mono-modal-controller-ClObbHUs.js";
-import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "./mono-data-chart-ChkelNT7.js";
-import { t as monoDataDropdown } from "./mono-data-dropdown-DxpUUk2y.js";
-import { c as getMonoTooltipGlobal, o as monoTooltip, t as controlMonoTooltip } from "./control-tooltip-C3rA_nSH.js";
-import { a as resetMonoTooltip, n as createMonoTooltip, r as destroyAllMonoTooltips } from "./tooltip-Drekihf5.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-tTkISFn2.js";
+import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "./mono-data-chart-NKPdAgVq.js";
+import { t as monoDataDropdown } from "./mono-data-dropdown-DUXo_jxd.js";
+import { a as monoTooltip, c as getMonoTooltipGlobal, t as controlMonoTooltip } from "./control-tooltip-CoPD37_h.js";
+import { a as resetMonoTooltip, n as createMonoTooltip, r as destroyAllMonoTooltips } from "./tooltip-Cu5IrDS9.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-CLqE8F8P.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, applyMonoSizeAttributes, 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, startMonoSizeAttributes, stopMonoSizeAttributes, themePresets, themes, toODataClause, toODataSelector, treeToArray };

package/dist/input.css_raw-Br-T8RWv.js

@@ -0,0 +1,5 @@
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\input\input.css?raw.js
+var input_css_raw_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  /* the FILL colour of a range (Basecoat paints the slider with --primary, not\r\n     --ring); the `color` prop writes the preset, a validation state outranks it */\r\n  --_mono-input-accent: var(--mono-input-accent, var(--_mono-input-accent-preset, var(--mono-input-primary, var(--primary))));\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  --_mono-input-accent-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  --_mono-input-accent-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  --_mono-input-accent-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  --_mono-input-accent-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  --_mono-input-accent-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  --_mono-input-accent-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  --_mono-input-accent-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  --_mono-input-accent-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  --_mono-input-accent-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/* `tooltip` prop — the info icon at the end of the label row (the label's\r\n   flex gap spaces it). `pointer-events` is restored because a disabled field\r\n   switches its label's off, and a disabled field is exactly where the reason\r\n   is worth a hover. Knobs: --mono-input-label-tooltip-size / -color / -opacity. */\r\n:where([mono-input]) > [mono-label] > [mono-label-tooltip] {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: var(--mono-input-label-tooltip-size, 1.1em);\r\n  color: var(--mono-input-label-tooltip-color, currentColor);\r\n  opacity: var(--mono-input-label-tooltip-opacity, 0.6);\r\n  border-radius: 9999px;\r\n  cursor: help;\r\n  pointer-events: auto;\r\n  outline: none;\r\n  transition: opacity 150ms ease;\r\n}\r\n\r\n:where([mono-input]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\r\n  opacity: 1;\r\n}\r\n\r\n:where([mono-input]) > [mono-label] > [mono-label-tooltip]:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n:where([mono-input]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\r\n  width: 1em;\r\n  height: 1em;\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):not([mono-file]):not([mono-range])) {\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   EXTENSION — type=\"file\": a read-only name field in front of a hidden native\r\n   picker, with an upload glyph (`[mono-file-icon]`, a `[mono-suffix]`) at the\r\n   end. The whole field reads as one button. The `mono-file` native is\r\n   `readonly` only as a means — it stays off the muted read-only surface above\r\n   unless `readonly` is actually set.\r\n   ========================================= */\r\n\r\n:where([mono-input][mono-type=\"file\"]) > [mono-field],\r\n:where([mono-input][mono-type=\"file\"]) [mono-native][mono-file],\r\n:where([mono-input][mono-type=\"file\"]) [mono-file-icon] {\r\n  cursor: pointer;\r\n}\r\n\r\n:where([mono-input][mono-type=\"file\"]) [mono-native][mono-file] {\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n}\r\n\r\n:where([mono-input][mono-type=\"file\"][mono-readonly]) :is([mono-field], [mono-native][mono-file], [mono-file-icon]) {\r\n  cursor: default;\r\n}\r\n\r\n:where([mono-input][mono-type=\"file\"][mono-disabled]) :is([mono-field], [mono-native][mono-file], [mono-file-icon]) {\r\n  cursor: not-allowed;\r\n}\r\n\r\n:where([mono-input]) [mono-file-input] {\r\n  display: none !important;\r\n}\r\n\r\n/* =========================================\r\n   type=\"range\" — a port of Basecoat's components/range.css (`.field > input[type='range']`)\r\n\r\n     [mono-input][mono-type=\"range\"]   the root; `> [mono-field]` loses its box (a Basecoat\r\n                                       range sits straight in the .field, no .input-group)\r\n     [mono-native][mono-range]         ≡ .field > input[type='range'] (h-5, the track + thumb)\r\n     [mono-range-value]                EXTENSION — the value readout: end of the label row, or\r\n                                       after the slider when there is no label (EJI ONE's\r\n                                       `.eji-range__row`; Basecoat has no readout)\r\n\r\n   The fill is upstream's gradient stop: the element writes the position as\r\n   `--mono-input-range-value` (upstream `--slider-value`) inline on the native,\r\n   and raw markup sets it itself. The track/thumb paint in currentColor, and the\r\n   native's `color` is the ACCENT (`--_mono-input-accent`: the `color` prop, or a\r\n   validation state), so a flavor that wants the accent writes `currentColor`\r\n   — a flavor block may never read a `--_mono-*` private.\r\n\r\n   Knobs (vega fallbacks below; every Basecoat style + ONE writes its own in\r\n   flavors/*.css, `node scripts/basecoat-styles.mjs --varying \"range\"`):\r\n   --mono-input-range-{height, gap, track-height, track-radius, track-bg, fill,\r\n   thumb-size, thumb-width, thumb-radius, thumb-bg, thumb-border-width,\r\n   thumb-border-color, thumb-shadow, thumb-ring-width, thumb-ring-color,\r\n   ring-width, hover-ring-width, label-color, label-font-size, label-line-height,\r\n   label-font-weight, value-color,\r\n   value-font-family, value-font-size, value-font-weight, value-min-width}.\r\n   A flavor sets the md geometry only: `size` multiplies it (xs .75 … xxl\r\n   1.375), so every flavor keeps a whole xs→xxl ladder.\r\n   ========================================= */\r\n\r\n[mono-input][mono-type=\"range\"] {\r\n  --_mono-input-range-scale: 1;\r\n  gap: var(--mono-input-range-gap, var(--mono-input-gap, calc(var(--mono-spacing) * 3)));\r\n}\r\n[mono-input][mono-type=\"range\"][mono-size=\"xs\"] { --_mono-input-range-scale: 0.75; }\r\n[mono-input][mono-type=\"range\"][mono-size=\"sm\"] { --_mono-input-range-scale: 0.875; }\r\n[mono-input][mono-type=\"range\"][mono-size=\"lg\"] { --_mono-input-range-scale: 1.125; }\r\n[mono-input][mono-type=\"range\"][mono-size=\"xl\"] { --_mono-input-range-scale: 1.25; }\r\n[mono-input][mono-type=\"range\"][mono-size=\"xxl\"] { --_mono-input-range-scale: 1.375; }\r\n\r\n/* a validation state recolours the fill + thumb (after the colour rules, so it wins) */\r\n[mono-input][mono-type=\"range\"][mono-validation-state=\"invalid\"] { --_mono-input-accent-preset: var(--_mono-input-invalid); }\r\n[mono-input][mono-type=\"range\"][mono-validation-state=\"valid\"] { --_mono-input-accent-preset: var(--_mono-input-valid); }\r\n[mono-input][mono-type=\"range\"][mono-validation-state=\"warning\"] { --_mono-input-accent-preset: var(--_mono-input-warning); }\r\n\r\n/* No .input-group around a Basecoat range: the field keeps only its flex row\r\n   (prefix / slider / readout / suffix). Placed after the readonly / disabled\r\n   field rules, which it ties, so the box stays off in every state; the\r\n   disabled opacity is kept. */\r\n[mono-input][mono-type=\"range\"] > [mono-field] {\r\n  gap: calc(var(--mono-spacing) * 3);\r\n  min-height: 0;\r\n  border-width: 0;\r\n  border-radius: 0;\r\n  background: transparent;\r\n  box-shadow: none;\r\n}\r\n\r\n[mono-input][mono-type=\"range\"] :is([mono-prefix], [mono-suffix]) {\r\n  padding-inline: 0;\r\n}\r\n\r\n/* the label spans the row so the readout can sit at its end (EJI ONE) */\r\n[mono-input][mono-type=\"range\"] > [mono-label] {\r\n  width: 100%;\r\n  font-size: var(--mono-input-range-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1));\r\n  color: var(--mono-input-range-label-color, var(--_mono-input-text));\r\n  font-weight: var(--mono-input-range-label-font-weight, var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium))));\r\n}\r\n\r\n/* basecoat@1.0.2 components/range.css .field > input[type='range'], .input[type='range'] — flex appearance-none items-center\r\n   p-0 outline-none disabled:pointer-events-none disabled:opacity-50 (the opacity is the field's) */\r\n/* basecoat@1.0.2 styles/vega.css .field > input[type='range'], .input[type='range'] — h-5, --slider-track-height: 0.375rem, --slider-thumb-size: 1rem */\r\n[mono-native][mono-range] {\r\n  --_mono-input-range-track-h: round(nearest, calc(var(--mono-input-range-track-height, 0.375rem) * var(--_mono-input-range-scale, 1)), 1px);\r\n  --_mono-input-range-thumb-h: round(nearest, calc(var(--mono-input-range-thumb-size, 1rem) * var(--_mono-input-range-scale, 1)), 1px);\r\n  --_mono-input-range-thumb-w: round(nearest, calc(var(--mono-input-range-thumb-width, var(--mono-input-range-thumb-size, 1rem)) * var(--_mono-input-range-scale, 1)), 1px);\r\n  --_mono-input-range-fill: var(--mono-input-range-fill, currentColor);\r\n  --_mono-input-range-track: var(--mono-input-range-track-bg, var(--muted));\r\n  --_mono-input-range-dir: to right;\r\n  --_mono-input-range-ring-w: var(--mono-input-range-ring-width, 4px);\r\n  --_mono-input-range-hover-ring-w: var(--mono-input-range-hover-ring-width, var(--_mono-input-range-ring-w));\r\n  --_mono-input-range-ring-c: color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\r\n  /* the hover / focus halo slot — `0 0 #0000` at rest */\r\n  --_mono-input-range-halo: 0 0 #0000;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  height: max(round(nearest, calc(var(--mono-input-range-height, 1.25rem) * var(--_mono-input-range-scale, 1)), 1px), var(--_mono-input-range-thumb-h));\r\n  margin: 0;\r\n  padding: 0;\r\n  appearance: none;\r\n  background: transparent;\r\n  color: var(--_mono-input-accent);\r\n  cursor: pointer;\r\n  outline: none;\r\n\r\n  &:dir(rtl) {\r\n    --_mono-input-range-dir: to left;\r\n  }\r\n\r\n  /* basecoat@1.0.2 styles/vega.css :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-runnable-track — bg-muted h-1.5 rounded-full\r\n     (+ components/range.css: w-full appearance-none, the --primary / --muted gradient stop) */\r\n  &::-webkit-slider-runnable-track {\r\n    width: 100%;\r\n    height: var(--_mono-input-range-track-h);\r\n    appearance: none;\r\n    border-radius: var(--mono-input-range-track-radius, 9999px);\r\n    background: linear-gradient(var(--_mono-input-range-dir), var(--_mono-input-range-fill) var(--mono-input-range-value, 20%), var(--_mono-input-range-track) var(--mono-input-range-value, 20%));\r\n  }\r\n\r\n  &::-moz-range-track {\r\n    width: 100%;\r\n    height: var(--_mono-input-range-track-h);\r\n    appearance: none;\r\n    border-radius: var(--mono-input-range-track-radius, 9999px);\r\n    background: linear-gradient(var(--_mono-input-range-dir), var(--_mono-input-range-fill) var(--mono-input-range-value, 20%), var(--_mono-input-range-track) var(--mono-input-range-value, 20%));\r\n  }\r\n\r\n  /* basecoat@1.0.2 styles/vega.css :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb — border-primary ring-ring/50 size-4\r\n     rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4\r\n     -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)]; mono: border-box, so\r\n     size-4 is the painted size whatever the border; the ring is three slots — a\r\n     resting ring (luma / rhea ring-1, ONE's navy rim), the halo, the shadow */\r\n  &::-webkit-slider-thumb {\r\n    display: block;\r\n    flex-shrink: 0;\r\n    box-sizing: border-box;\r\n    width: var(--_mono-input-range-thumb-w);\r\n    height: var(--_mono-input-range-thumb-h);\r\n    margin-top: calc((var(--_mono-input-range-track-h) - var(--_mono-input-range-thumb-h)) / 2);\r\n    appearance: none;\r\n    border: var(--mono-input-range-thumb-border-width, 1px) solid var(--mono-input-range-thumb-border-color, currentColor);\r\n    border-radius: var(--mono-input-range-thumb-radius, 9999px);\r\n    background: var(--mono-input-range-thumb-bg, #fff);\r\n    box-shadow:\r\n      0 0 0 var(--mono-input-range-thumb-ring-width, 0px) var(--mono-input-range-thumb-ring-color, transparent),\r\n      var(--_mono-input-range-halo),\r\n      var(--mono-input-range-thumb-shadow, var(--mono-shadow-sm));\r\n    transition-property: color, box-shadow, background-color, border-color;\r\n    transition-timing-function: var(--mono-ease);\r\n    transition-duration: var(--mono-duration);\r\n  }\r\n\r\n  &::-moz-range-thumb {\r\n    display: block;\r\n    flex-shrink: 0;\r\n    box-sizing: border-box;\r\n    width: var(--_mono-input-range-thumb-w);\r\n    height: var(--_mono-input-range-thumb-h);\r\n    appearance: none;\r\n    border: var(--mono-input-range-thumb-border-width, 1px) solid var(--mono-input-range-thumb-border-color, currentColor);\r\n    border-radius: var(--mono-input-range-thumb-radius, 9999px);\r\n    background: var(--mono-input-range-thumb-bg, #fff);\r\n    box-shadow:\r\n      0 0 0 var(--mono-input-range-thumb-ring-width, 0px) var(--mono-input-range-thumb-ring-color, transparent),\r\n      var(--_mono-input-range-halo),\r\n      var(--mono-input-range-thumb-shadow, var(--mono-shadow-sm));\r\n    transition-property: color, box-shadow, background-color, border-color;\r\n    transition-timing-function: var(--mono-ease);\r\n    transition-duration: var(--mono-duration);\r\n  }\r\n\r\n  /* focus-visible:ring-4 focus-visible:outline-hidden */\r\n  &:focus-visible {\r\n    --_mono-input-range-halo: 0 0 0 var(--_mono-input-range-ring-w) var(--_mono-input-range-ring-c);\r\n  }\r\n\r\n  &:disabled {\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n/* hover:ring-4 (lyra / mira / nova also active:) */\r\n@media (hover: hover) {\r\n  [mono-native][mono-range]:hover:not(:disabled, :focus-visible) {\r\n    --_mono-input-range-halo: 0 0 0 var(--_mono-input-range-hover-ring-w) var(--_mono-input-range-ring-c);\r\n  }\r\n}\r\n[mono-native][mono-range]:active:not(:disabled, :focus-visible) {\r\n  --_mono-input-range-halo: 0 0 0 var(--_mono-input-range-hover-ring-w) var(--_mono-input-range-ring-c);\r\n}\r\n\r\n/* readonly: a native range ignores `readonly`, so the element reverts any move;\r\n   the pointer is switched off so a drag never even starts */\r\n[mono-input][mono-readonly] [mono-native][mono-range] {\r\n  pointer-events: none;\r\n  cursor: default;\r\n}\r\n\r\n/* EXTENSION — the value readout (EJI ONE `.eji-range__val`: the number is always\r\n   on screen). Tabular figures so the row does not shimmer while dragging. */\r\n:where([mono-input]) [mono-range-value] {\r\n  flex: none;\r\n  margin-inline-start: auto;\r\n  font-family: var(--mono-input-range-value-font-family, inherit);\r\n  font-size: var(--mono-input-range-value-font-size, var(--mono-input-range-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm))));\r\n  font-weight: var(--mono-input-range-value-font-weight, var(--mono-font-weight-medium));\r\n  line-height: var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1));\r\n  font-variant-numeric: tabular-nums;\r\n  color: var(--mono-input-range-value-color, var(--_mono-input-muted));\r\n  white-space: nowrap;\r\n  user-select: none;\r\n}\r\n\r\n/* after the slider (no label): a reserved width, so the track does not resize\r\n   as the number gains a digit */\r\n:where([mono-input]) > [mono-field] > [mono-range-value] {\r\n  min-width: var(--mono-input-range-value-min-width, 3ch);\r\n  text-align: end;\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\r\n/* =========================================\r\n   label-position — the slots form/label-position.css reads\r\n   (top / notched / left / right; public knobs: --mono-input-label-width,\r\n   -label-side-gap, -label-notch-font-size, -label-notch-bg)\r\n   ========================================= */\r\n\r\n[mono-input][mono-label-position] {\r\n  --_mono-lp-width: var(--mono-input-label-width, auto);\r\n  --_mono-lp-gap: var(--mono-input-label-side-gap, calc(var(--mono-spacing) * 3));\r\n  --_mono-lp-height: var(--_mono-input-height);\r\n  --_mono-lp-box-min: var(--_mono-input-height);\r\n  --_mono-lp-padding-x: var(--_mono-input-padding-x);\r\n  --_mono-lp-padding-y: 0px;\r\n  --_mono-lp-font: var(--mono-input-label-notch-font-size, var(--mono-text-xs));\r\n  --_mono-lp-notch-bg: var(--mono-input-label-notch-bg, var(--background));\r\n  --_mono-lp-field-bg: var(--_mono-input-bg);\r\n}\r\n";
+
+//#endregion
+export { input_css_raw_default as t };

package/dist/{light-slots-BnBR29E7.js → light-slots-B5Ck0t_E.js}

@@ -1,4 +1,4 @@
-import { _ as monoHostChildren, g as monoHostChildNodes } from "./mono-ui-KOBJcnXk.js";
+import { _ as monoHostChildren, g as monoHostChildNodes } from "./mono-ui-kvLVIf1V.js";
 
 //#region src/composables/light-slots.ts
 /**

package/dist/{light-slots-Cb6e-LU3.js → light-slots-_no0r2Z-.js}

@@ -1,4 +1,4 @@
-import { b as monoHostChildNodes, x as monoHostChildren } from "./hydration-flush-9AJE8FRl.js";
+import { b as monoHostChildNodes, x as monoHostChildren } from "./hydration-flush-BaE9gN3C.js";
 
 //#region src/composables/light-slots.ts
 /**