@mono-lit/helper 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mono-lit/helper",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Lit web components (tables, forms, inputs, dialogs, charts) for Vue and Nuxt, with light-DOM and shadow-DOM builds.",
   "keywords": [
     "lit",
@@ -350,7 +350,7 @@
     "vue": "3.5.44",
     "yup": "1.7.1",
     "@mono-lit/devextreme": "0.0.2",
-    "@mono-lit/utility": "0.0.4"
+    "@mono-lit/utility": "0.0.6"
   },
   "dependencies": {
     "@lit-labs/ssr": "3.2.2",

package/dist/css-size-DWAPgQdT.js

@@ -1,38 +0,0 @@
-//#region src/composables/css-size.ts
-/**
-* Normalize a sizing prop to a CSS length string.
-* - `number` (or numeric string) → `${n}px`
-* - any other non-empty string → passed through verbatim (`"12rem"`, `"80%"`, …)
-* - `null` / `undefined` / `''` → `undefined` (treated as "not set")
-*/
-function toCssSize(value) {
-	if (value === null || value === void 0) return void 0;
-	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
-	const trimmed = String(value).trim();
-	if (trimmed === "") return void 0;
-	if (/^-?\d+(\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
-	return trimmed;
-}
-/**
-* Build a Lit `styleMap` object from the six sizing props, normalizing each via
-* `toCssSize` and omitting the ones that aren't set.
-*/
-function buildSizeStyle(src) {
-	const style = {};
-	const width = toCssSize(src.width);
-	const height = toCssSize(src.height);
-	const minWidth = toCssSize(src.minWidth);
-	const maxWidth = toCssSize(src.maxWidth);
-	const minHeight = toCssSize(src.minHeight);
-	const maxHeight = toCssSize(src.maxHeight);
-	if (width) style.width = width;
-	if (height) style.height = height;
-	if (minWidth) style["min-width"] = minWidth;
-	if (maxWidth) style["max-width"] = maxWidth;
-	if (minHeight) style["min-height"] = minHeight;
-	if (maxHeight) style["max-height"] = maxHeight;
-	return style;
-}
-
-//#endregion
-export { toCssSize as n, buildSizeStyle as t };

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

@@ -1,178 +0,0 @@
-import { r as checkCircleIcon, t as alertCircleIcon } from "./field-icons-t8rXRCKs.js";
-import { r as FieldBubble } from "./field-tooltip.css_raw-DEctHXKm.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 = "/* =========================================\n   label-position — shared by every field-like control\n   (input, select, tag-input, date, textarea, dropdown-table; otp — left / right only).\n\n   `top` (default) emits NO attribute, so nothing here touches it. The other\n   three are layout-only: the label's type, colour and states stay with each\n   component's own label rules.\n\n   Each component's root writes the private slots read below:\n     --_mono-lp-width      left/right label column  (--mono-<c>-label-width, auto)\n     --_mono-lp-gap        left/right column gap    (--mono-<c>-label-side-gap)\n     --_mono-lp-height     one control row — the side label centres on it\n     --_mono-lp-box-min    the box's resting min-height (textarea: its rows)\n     --_mono-lp-padding-x  the box's inline-start padding — the notch lines up with the text\n     --_mono-lp-font       notched label font-size  (--mono-<c>-label-notch-font-size)\n     --_mono-lp-notch-bg   the surface the notch is cut from (--mono-<c>-label-notch-bg)\n     --_mono-lp-field-bg   the box's own surface — paints the notch's lower half\n\n   Light: imported once by entries/index.css. Shadow: appended to each\n   component's shadow sheet (the inner root keeps its `mono-<c>` attribute).\n   ========================================= */\n\n/* ── left / right — label column + field column; messages stay under the box ── */\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\"]) {\n  display: grid;\n  grid-template-columns: var(--_mono-lp-width) minmax(0, 1fr);\n  column-gap: var(--_mono-lp-gap);\n  align-items: start;\n}\n\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table], [mono-otp])[mono-label-position=\"right\"] {\n  grid-template-columns: minmax(0, 1fr) var(--_mono-lp-width);\n}\n\n/* Everything but the label lives in the field column (an absolute panel then\n   measures against that column too). */\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table], [mono-otp])[mono-label-position=\"left\"] > * {\n  grid-column: 2;\n}\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table], [mono-otp])[mono-label-position=\"right\"] > * {\n  grid-column: 1;\n}\n\n/* The label centres on the FIRST control row, so a tag-input growing chip\n   rows or a tall textarea keeps it beside the top line. */\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]) {\n  grid-row: 1;\n  grid-column: 1;\n  min-height: var(--_mono-lp-height);\n  margin: 0;\n}\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]) {\n  grid-column: 2;\n}\n\n/* ── notched — shared by both looks: the label leaves the flow ── */\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table])[mono-label-position=\"notched\"] {\n  position: relative;\n}\n\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]) {\n  position: absolute;\n  z-index: 1;\n  max-width: calc(100% - 2 * var(--_mono-lp-padding-x) - 2 * var(--mono-spacing));\n  margin: 0;\n  font-size: var(--_mono-lp-font);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n/* ── notched + outlined — the label sits ON the top border: ──Label── ──\n   The \"notch\" is a background patch: page surface above the border line, the\n   box's surface below it. On a non-solid parent set --mono-<c>-label-notch-bg. */\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\"]) {\n  padding-top: calc(var(--_mono-lp-font) / 2);\n}\n\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]) {\n  top: 0;\n  inset-inline-start: calc(var(--mono-border-width) + var(--_mono-lp-padding-x) - var(--mono-spacing));\n  padding-inline: var(--mono-spacing);\n  background:\n    linear-gradient(var(--_mono-lp-field-bg), var(--_mono-lp-field-bg)) bottom / 100% 50% no-repeat,\n    var(--_mono-lp-notch-bg);\n}\n\n/* ── notched + filled / underlined — no outline to cut, so the label insets\n   into the top of the box (Material \"filled\") and the box grows by its line ── */\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]) {\n  top: calc(var(--mono-border-width) + var(--_mono-lp-inset-y));\n  inset-inline-start: calc(var(--mono-border-width) + var(--_mono-lp-padding-x));\n}\n\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]),\n[mono-dropdown-table][mono-label-position=\"notched\"]:is([mono-variant=\"filled\"], [mono-variant=\"underlined\"]) > [mono-dd-control] > [mono-dd-trigger] {\n  min-height: calc(var(--_mono-lp-box-min) + var(--_mono-lp-font) + var(--_mono-lp-inset-y));\n  padding-top: calc(var(--_mono-lp-inset-y) + var(--_mono-lp-font) + var(--_mono-lp-padding-y, 0px));\n}\n\n/* Slots the component sheets don't need to set. */\n:is([mono-input], [mono-select], [mono-tag-input], [mono-date], [mono-textarea], [mono-dropdown-table])[mono-label-position] {\n  --_mono-lp-inset-y: calc(var(--mono-spacing) * 1.5);\n}\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 = "/* =========================================\n   validation-position — `icon` and `float` (composables/field-validation.ts)\n   on input, select, tag-input, date, textarea and dropdown-table.\n\n   The bubbles share the [mono-field-bubble] look (field-tooltip.css); this\n   sheet paints them in the state colour, and draws the state icon inside the\n   box. Knobs:\n     --mono-validation-invalid-bg / -color   (default --destructive / -foreground)\n     --mono-validation-warning-bg / -color   (default --warning / -foreground)\n     --mono-validation-valid-bg / -color     (default --success / -foreground)\n     --mono-validation-icon-size             (default 1rem)\n\n   Light: imported once by entries/index.css. Shadow: appended to each\n   control's shadow sheet.\n   ========================================= */\n\n/* ── state-coloured bubbles ── */\n[mono-field-bubble][mono-state=\"invalid\"] {\n  --_mono-field-tip-bg: var(--mono-validation-invalid-bg, var(--destructive));\n  color: var(--mono-validation-invalid-color, var(--destructive-foreground, #fff));\n}\n[mono-field-bubble][mono-state=\"warning\"] {\n  --_mono-field-tip-bg: var(--mono-validation-warning-bg, var(--warning));\n  color: var(--mono-validation-warning-color, var(--warning-foreground, #fff));\n}\n[mono-field-bubble][mono-state=\"valid\"] {\n  --_mono-field-tip-bg: var(--mono-validation-valid-bg, var(--success));\n  color: var(--mono-validation-valid-color, var(--success-foreground, #fff));\n}\n\n/* ── float: a compact message under the box ── */\n[mono-field-bubble][mono-validation-float] {\n  max-width: min(var(--mono-validation-float-max-width, 24rem), calc(100vw - 16px));\n  padding: var(--mono-validation-float-padding-y, var(--mono-spacing)) var(--mono-validation-float-padding-x, calc(var(--mono-spacing) * 2));\n  font-size: var(--mono-validation-float-font-size, var(--mono-text-xs));\n  /* hover-transparent: it must not steal the pointer from the field it describes */\n  pointer-events: none;\n}\n[mono-field-bubble][mono-validation-float]::before {\n  display: none;\n}\n\n/* ── icon: the state glyph inside the box ── */\n[mono-validation-icon] {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin-inline: var(--mono-validation-icon-gap, var(--mono-spacing));\n  font-size: var(--mono-validation-icon-size, 1rem);\n  line-height: 1;\n  cursor: help;\n  /* a disabled field turns events off — the reason is exactly what to show */\n  pointer-events: auto;\n}\n[mono-validation-icon] > [mono-icon] {\n  width: 1em;\n  height: 1em;\n}\n[mono-validation-icon][mono-state=\"invalid\"] {\n  color: var(--mono-validation-invalid-bg, var(--destructive));\n}\n[mono-validation-icon][mono-state=\"warning\"] {\n  color: var(--mono-validation-warning-bg, var(--warning));\n}\n[mono-validation-icon][mono-state=\"valid\"] {\n  color: var(--mono-validation-valid-bg, var(--success));\n}\n\n/* textarea: the box can't hold children, so a zero-height anchor sits on the\n   textarea's top edge (its negative margin cancels the flex gap it adds) and\n   the icon pins to the top-right corner, over reserved inline padding. */\n[mono-textarea] > [mono-validation-anchor] {\n  position: relative;\n  z-index: 1;\n  display: block;\n  height: 0;\n  margin-bottom: calc(-1 * var(--mono-textarea-gap, calc(var(--mono-spacing) * 3)));\n}\n[mono-textarea] > [mono-validation-anchor] > [mono-validation-icon] {\n  position: absolute;\n  top: calc(var(--mono-border-width) + var(--_mono-textarea-padding-y, var(--mono-spacing)));\n  inset-inline-end: calc(var(--mono-border-width) + var(--_mono-textarea-padding-x, calc(var(--mono-spacing) * 2.5)));\n  margin: 0;\n}\n[mono-textarea]:has(> [mono-validation-anchor]) > textarea[mono-native] {\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));\n}\n/* side labels: the anchor shares the textarea's grid row */\n[mono-textarea]:is([mono-label-position=\"left\"], [mono-label-position=\"right\"]) > :is([mono-validation-anchor], textarea[mono-native]) {\n  grid-row: 1;\n  align-self: start;\n}\n[mono-textarea]:is([mono-label-position=\"left\"], [mono-label-position=\"right\"]) > [mono-validation-anchor] {\n  margin-bottom: 0;\n}\n\n/* ── the moved message stays for assistive tech only ── */\n[mono-sr-only] {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  margin: -1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n";
-
-//#endregion
-export { label_position_css_raw_default as n, FieldValidationController as r, field_validation_css_raw_default as t };

package/dist/input.css_raw-CQu2fAsU.js

@@ -1,5 +0,0 @@
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\input\input.css?raw.js
-var input_css_raw_default = "/* =========================================================================\n   mono-input — a port of Basecoat's `.field` / `.input-group` / `.label`\n   (basecoat-css@1.0.2, vega style).\n\n   Styled by ATTRIBUTE, like Basecoat (`.input-group:has([aria-invalid])`) —\n   and the attributes mirror the element's props one for one, so hand-written\n   markup reads like the Lit / Vue tag:\n\n     <mono-input size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Name\">\n     <div mono-input mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\n       <label mono-label>Name</label>\n       <div mono-field><input mono-native></div>\n     </div>\n\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined,\n   `:not([mono-validation-state])` = default). The element renders these\n   attributes on its wrapper (both builds); the old classes\n   (`.mono-input.sm.danger.filled`) are still emitted as inert hooks for\n   consumer CSS until 2.0 but no rule here reads them.\n\n   Selector map (ours ≡ upstream):\n     [mono-input]                                  ≡ .field            (flex column, gap-3)\n     [mono-input] > [mono-label]                   ≡ .field > label / .label\n     [mono-input] > [mono-field]                   ≡ .input-group      (the bordered box: h-9 rounded-md border-input shadow-xs)\n     [mono-field] > [mono-native]                  ≡ .input-group > input (borderless, px-2.5 text-sm; `.input` for the metrics)\n     [mono-field] > [mono-prefix|mono-suffix]      ≡ .input-group > span[data-align='start'|'end']\n     [mono-field] > [mono-clear]                   ≡ .input-group > button[data-align='end']:has(> svg)\n     [mono-input] > [mono-message-wrap]            ≡ .field > p\n     [mono-message=\"helper\"]                       ≡ .field > p        (text-sm text-muted-foreground)\n     [mono-message=\"invalid\"]                      ≡ .field [role='alert']\n     [mono-validation-state=\"invalid\"]             ≡ .input-group:has([aria-invalid=true]) + .field[data-invalid]\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern with --success / --warning)\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat sizes only the select; the ladder is --mono-control-height-*)\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .input-group: border-transparent bg-input/50, ring-ring/30)\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .input-group: rounded-none border-b-input px-0, no ring)\n     [mono-disabled] / [mono-native]:disabled      ≡ .input-group:has(input:disabled) — opacity-50\n     [mono-readonly]                               ≡ EXTENSION (a muted surface)\n\n   Specificity contract (same as the pre-port class sheet, and as checkbox.css):\n   a part's RESTING rule is written `:where([mono-input]) [mono-part]` = exactly\n   one attribute, (0,1,0) — so a utility class composed onto the markup (the\n   `cssClass` prop, or a hand-written class in a css/ demo) wins by source order,\n   while the prop and state rules ([mono-size], [mono-variant], [mono-disabled],\n   :focus-within, [aria-invalid], …) stay heavier and still win over it.\n\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\n   [mono-field], [mono-prefix] / [mono-suffix] (+ [mono-empty] in the shadow\n   build for an unassigned slot), [mono-native], [mono-clear] > [mono-icon],\n   [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\n\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\n   vega.cdn.css) through the token layer: `--spacing` → `--mono-spacing`,\n   `--text-sm` → `--mono-text-sm`, `--radius-md` → `--mono-radius-md`,\n   `--color-x` → `--x`, Tailwind's `--tw-ring-*` stack → the two-slot\n   `box-shadow: ring, shadow` below, and every `dark:` variant → a\n   `--mono-mode-*` token (a selector cannot cross a shadow boundary; an\n   inherited custom property can).\n\n   FLAVORS (Basecoat's other seven styles, src/data/theme/flavors/*.css) set\n   the knobs read below — `--mono-input-radius`, `--mono-input-padding-x-<size>`,\n   `--mono-input-font-<size>`, `--mono-input-line-height`, `--mono-input-ring-width`,\n   `--mono-input-ring-alpha`, `--mono-input-gap`, `--mono-input-affix-*`,\n   `--mono-input-label-*`, `--mono-input-message-*`, `--mono-input-clear-radius`,\n   `--mono-input-disabled-bg`, and the outline-variant set `--mono-input-outline-\n   {bg,border-color,side-border-color,shadow,ring-width,radius,padding-x,affix-padding}`.\n   Every fallback here is vega's value\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.(field|label|input|input-group)\\b\"`).\n\n   The public `--mono-input-*` knobs and the three-tier resolver\n   (`--mono-input-x` → `--_mono-input-x-preset` → base) are unchanged: a\n   colour / variant attribute only ever writes a `*-preset` slot, so a\n   consumer's own `--mono-input-bg` on the host still wins.\n   ========================================================================= */\n\nmono-input {\n  display: block;\n}\n\n[mono-input] {\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\n  --_mono-input-text: var(--mono-input-color, var(--mono-input-text, var(--foreground)));\n  --_mono-input-placeholder: var(--mono-input-placeholder, var(--muted-foreground));\n  --_mono-input-muted: var(--mono-input-muted, var(--muted-foreground));\n  /* the `color` prop picks the FOCUS colour; primary is Basecoat's `--ring` */\n  --_mono-input-primary: var(--mono-input-primary, var(--ring));\n  --_mono-input-secondary: var(--mono-input-secondary, var(--muted-foreground));\n  --_mono-input-success: var(--mono-input-success, var(--success));\n  --_mono-input-danger: var(--mono-input-danger, var(--destructive));\n  --_mono-input-warning: var(--mono-input-warning, var(--warning));\n  --_mono-input-info: var(--mono-input-info, var(--info));\n  --_mono-input-teal: var(--mono-input-teal, var(--teal));\n  --_mono-input-purple: var(--mono-input-purple, var(--purple));\n  --_mono-input-neutral: var(--mono-input-neutral, var(--neutral));\n  --_mono-input-dark: var(--mono-input-dark, var(--dark));\n  --_mono-input-valid: var(--mono-input-valid, var(--success));\n  --_mono-input-invalid: var(--mono-input-invalid, var(--destructive));\n  /* the FILL colour of a range (Basecoat paints the slider with --primary, not\n     --ring); the `color` prop writes the preset, a validation state outranks it */\n  --_mono-input-accent: var(--mono-input-accent, var(--_mono-input-accent-preset, var(--mono-input-primary, var(--primary))));\n\n  /* ── the painted result — three tiers, base = .input-group (vega) ──────── */\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))));\n  --_mono-input-ring-width: var(--mono-input-ring-width, var(--_mono-input-ring-width-preset, var(--mono-ring-width)));\n  --_mono-input-ring-alpha: var(--mono-input-ring-alpha, var(--mono-ring-alpha));\n  --_mono-input-border-color: var(--mono-input-rest-border, var(--mono-input-border-color, var(--_mono-input-border-color-preset, var(--input))));\n  --_mono-input-bg: var(--mono-input-bg, var(--mono-input-surface, var(--_mono-input-bg-preset, var(--mono-mode-surface))));\n  --_mono-input-shadow: var(--mono-input-shadow, var(--_mono-input-shadow-preset, 0 0 #0000));\n  --_mono-input-affix-padding: var(--mono-input-affix-padding, var(--_mono-input-affix-padding-preset, calc(var(--mono-spacing) * 2)));\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\n\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\n        `<div mono-input>` that names no size renders exactly like size=\"md\".\n        basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md; > input px-2.5 text-sm ── */\n  --_mono-input-height: var(--mono-input-height-md, var(--mono-control-height-md));\n  --_mono-input-radius: var(--mono-input-radius-md, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-md, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\n  --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-sm));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-sm--lh)));\n  --_mono-input-clear: calc(var(--mono-spacing) * 6);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\n\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\n  display: flex;\n  flex-direction: column;\n  gap: var(--mono-input-gap, calc(var(--mono-spacing) * 3));\n  width: 100%;\n  font-family: inherit;\n  color: var(--_mono-input-text);\n}\n\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\n   boundary; scoped here so both builds measure the same. */\n[mono-input],\n:where([mono-input]) *,\n:where([mono-input]) *::before,\n:where([mono-input]) *::after {\n  box-sizing: border-box;\n}\n\n/* The shadow build renders every slot wrapper and marks an unassigned one\n   `mono-empty`; the light build simply omits it. Inert in the light build. */\n:where([mono-input]) :is([mono-label], [mono-prefix], [mono-suffix], [mono-message])[mono-empty] {\n  display: none;\n}\n\n/* =========================================\n   Sizes — the field's painted height IS the token (tests/perf/field-heights).\n   EXTENSION: Basecoat sizes only its select (data-size=sm); the ladder is the\n   shared --mono-control-height-* scale and the text follows .btn's steps.\n   ========================================= */\n\n/* `.input` is text-base under 48rem (no iOS zoom) and md:text-sm above it —\n   vendor behaviour, kept for the default size only. */\n@media (width < 48rem) {\n  [mono-input]:is(:not([mono-size]), [mono-size=\"md\"]) {\n    --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-base));\n    --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-base--lh)));\n  }\n}\n\n[mono-input][mono-size=\"xs\"] {\n  --_mono-input-height: var(--mono-input-height-xs, var(--mono-control-height-xs));\n  --_mono-input-radius: var(--mono-input-radius-xs, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-xs, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2)));\n  --_mono-input-font-size: var(--mono-input-font-xs, var(--mono-text-xs));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xs, var(--mono-text-xs--lh)));\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 3.5));\n  --_mono-input-clear: calc(var(--mono-spacing) * 4);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3);\n}\n\n[mono-input][mono-size=\"sm\"] {\n  --_mono-input-height: var(--mono-input-height-sm, var(--mono-control-height-sm));\n  --_mono-input-radius: var(--mono-input-radius-sm, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-sm, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\n  --_mono-input-font-size: var(--mono-input-font-sm, var(--mono-input-font-md, var(--mono-text-sm)));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-sm, var(--mono-text-sm--lh)));\n  --_mono-input-clear: calc(var(--mono-spacing) * 5);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\n}\n\n[mono-input][mono-size=\"lg\"] {\n  --_mono-input-height: var(--mono-input-height-lg, var(--mono-control-height-lg));\n  --_mono-input-radius: var(--mono-input-radius-lg, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-lg, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\n  --_mono-input-font-size: var(--mono-input-font-lg, var(--mono-input-font-md, var(--mono-text-sm)));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-lg, var(--mono-text-sm--lh)));\n}\n\n[mono-input][mono-size=\"xl\"] {\n  --_mono-input-height: var(--mono-input-height-xl, var(--mono-control-height-xl));\n  --_mono-input-radius: var(--mono-input-radius-xl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-xl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 3)));\n  --_mono-input-font-size: var(--mono-input-font-xl, var(--mono-text-base));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xl, var(--mono-text-base--lh)));\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\n  --_mono-input-clear: calc(var(--mono-spacing) * 7);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n\n[mono-input][mono-size=\"xxl\"] {\n  --_mono-input-height: var(--mono-input-height-xxl, var(--mono-control-height-xxl));\n  --_mono-input-radius: var(--mono-input-radius-xxl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-xxl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 4)));\n  --_mono-input-font-size: var(--mono-input-font-xxl, var(--mono-text-lg));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xxl, var(--mono-text-lg--lh)));\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\n  --_mono-input-clear: calc(var(--mono-spacing) * 8);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n\n/* =========================================\n   Variants — each writes only `*-preset` slots\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\n   shadow-xs, bg-transparent (dark:bg-input/30 via --mono-mode-surface). The\n   `--mono-input-outline-*` knobs are how a flavor restyles THIS variant alone\n   (maia bg-input/30, luma / rhea border-transparent bg-input/50, sera the\n   underline) without touching filled / underlined. */\n[mono-input]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\n  --_mono-input-bg-preset: var(--mono-input-outline-bg);\n  --_mono-input-border-color-preset: var(--mono-input-outline-border-color);\n  --_mono-input-side-border-color-preset: var(--mono-input-outline-side-border-color);\n  --_mono-input-shadow-preset: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\n  --_mono-input-ring-width-preset: var(--mono-input-outline-ring-width);\n  --_mono-input-radius-preset: var(--mono-input-outline-radius);\n  --_mono-input-padding-x-preset: var(--mono-input-outline-padding-x);\n  --_mono-input-affix-padding-preset: var(--mono-input-outline-affix-padding);\n}\n\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .input-group:\n   border-transparent bg-input/50, no shadow-xs (the ring stays) */\n[mono-input][mono-variant=\"filled\"] {\n  --_mono-input-bg-preset: var(--mono-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\n  --_mono-input-border-color-preset: transparent;\n  --_mono-input-shadow-preset: 0 0 #0000;\n}\n\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .input-group:\n   rounded-none border-transparent border-b-input bg-transparent px-0, no\n   shadow, no ring, focus-within:border-b-ring, has-[aria-invalid]:border-b-destructive.\n   Only the bottom edge paints; the sides are transparent in every state. */\n[mono-input][mono-variant=\"underlined\"] {\n  --_mono-input-bg-preset: transparent;\n  --_mono-input-side-border-color-preset: transparent;\n  --_mono-input-shadow-preset: 0 0 #0000;\n  --_mono-input-ring-width-preset: 0px;\n  --_mono-input-radius-preset: 0;\n  --_mono-input-padding-x-preset: 0;\n  --_mono-input-affix-padding-preset: 0;\n}\n\n/* =========================================\n   Colours — the `color` prop is the FOCUS colour (ring + focused border).\n   No resting tint: Basecoat fields rest on --input whatever their role.\n   ========================================= */\n\n[mono-input]:is(:not([mono-color]), [mono-color=\"primary\"]) {\n  --_mono-input-ring-color-preset: var(--_mono-input-primary);\n}\n[mono-input][mono-color=\"secondary\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-secondary);\n  --_mono-input-accent-preset: var(--_mono-input-secondary);\n}\n[mono-input][mono-color=\"success\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-success);\n  --_mono-input-accent-preset: var(--_mono-input-success);\n}\n[mono-input][mono-color=\"danger\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-danger);\n  --_mono-input-accent-preset: var(--_mono-input-danger);\n}\n[mono-input][mono-color=\"warning\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-warning);\n  --_mono-input-accent-preset: var(--_mono-input-warning);\n}\n[mono-input][mono-color=\"info\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-info);\n  --_mono-input-accent-preset: var(--_mono-input-info);\n}\n[mono-input][mono-color=\"teal\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-teal);\n  --_mono-input-accent-preset: var(--_mono-input-teal);\n}\n[mono-input][mono-color=\"purple\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-purple);\n  --_mono-input-accent-preset: var(--_mono-input-purple);\n}\n[mono-input][mono-color=\"neutral\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-neutral);\n  --_mono-input-accent-preset: var(--_mono-input-neutral);\n}\n[mono-input][mono-color=\"dark\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-dark);\n  --_mono-input-accent-preset: var(--_mono-input-dark);\n}\n\n/* =========================================\n   Label\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\n   gap-2 text-sm leading-none font-medium select-none w-fit */\n:where([mono-input]) > [mono-label] {\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  gap: var(--mono-input-label-gap, calc(var(--mono-spacing) * 2));\n  font-size: var(--mono-input-label-font-size, var(--mono-text-sm));\n  line-height: var(--mono-input-label-line-height, 1);\n  font-weight: var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\n  text-transform: var(--mono-input-label-text-transform, none);\n  letter-spacing: var(--mono-input-label-letter-spacing, normal);\n  color: var(--_mono-input-text);\n  user-select: none;\n}\n\n/* in-data-[disabled=true]:opacity-50 / peer-disabled:opacity-50 */\n[mono-input][mono-disabled] > [mono-label],\n[mono-input]:has(> [mono-field] > [mono-native]:disabled) > [mono-label] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\n[mono-input][mono-validation-state=\"invalid\"] > [mono-label],\n[mono-input]:has(> [mono-field] > [mono-native][aria-invalid=\"true\"]) > [mono-label] {\n  color: var(--_mono-input-invalid);\n}\n\n/* EXTENSION — the required asterisk */\n:where([mono-input]) [mono-required-mark] {\n  color: var(--_mono-input-danger);\n}\n\n/* `tooltip` prop — the info icon at the end of the label row (the label's\n   flex gap spaces it). `pointer-events` is restored because a disabled field\n   switches its label's off, and a disabled field is exactly where the reason\n   is worth a hover. Knobs: --mono-input-label-tooltip-size / -color / -opacity. */\n:where([mono-input]) > [mono-label] > [mono-label-tooltip] {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mono-input-label-tooltip-size, 1.1em);\n  color: var(--mono-input-label-tooltip-color, currentColor);\n  opacity: var(--mono-input-label-tooltip-opacity, 0.6);\n  border-radius: 9999px;\n  cursor: help;\n  pointer-events: auto;\n  outline: none;\n  transition: opacity 150ms ease;\n}\n\n:where([mono-input]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\n  opacity: 1;\n}\n\n:where([mono-input]) > [mono-label] > [mono-label-tooltip]:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n:where([mono-input]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\n  width: 1em;\n  height: 1em;\n}\n\n/* =========================================\n   The field — the bordered box\n   ========================================= */\n\n/* basecoat@1.0.2 components/input-group.css .input-group */\n/* basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md border\n   border-input shadow-xs transition-[color,box-shadow] focus-within:border-ring\n   focus-within:ring-3 focus-within:ring-ring/50; mono: `--tw-ring-*` flattened to\n   the ring + shadow slots, the height is the control token, and the side\n   edges read their own slot so a flavor can keep only the bottom one */\n:where([mono-input]) > [mono-field] {\n  --_mono-input-bc: var(--_mono-input-border-color);\n  --_mono-input-side-bc: var(--mono-input-side-border-color, var(--_mono-input-side-border-color-preset, var(--_mono-input-bc)));\n  /* The focus / state ring slot — `0 0 #0000` until a state sets it. Kept as a\n     slot so a variant can neutralise the resting shadow without ever writing\n     `box-shadow: none` (which would out-specify the ring). */\n  --_mono-input-ring: 0 0 #0000;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  min-height: var(--_mono-input-height);\n  outline-style: none;\n  border: var(--mono-border-width) solid var(--_mono-input-bc);\n  border-top-color: var(--_mono-input-side-bc);\n  border-inline-color: var(--_mono-input-side-bc);\n  border-radius: var(--_mono-input-radius);\n  background: var(--_mono-input-bg);\n  color: var(--_mono-input-text);\n  box-shadow: var(--_mono-input-ring), var(--_mono-input-shadow);\n  transition-property: color, box-shadow, border-color, background-color;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n\n  /* focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\n  &:focus-within {\n    --_mono-input-bc: var(--_mono-input-ring-color);\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);\n  }\n}\n\n/* basecoat@1.0.2 styles/vega.css .input-group — has-[[aria-invalid=true]]:border-destructive\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20\n   (dark: border /50, ring /40 — carried by the mode tokens). The ring is\n   permanent, and it wins over the focus ring — same as the vendor order. */\n[mono-input][mono-validation-state=\"invalid\"] > [mono-field],\n:where([mono-input]) > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\n  --_mono-input-bc: var(--mono-mode-invalid-border);\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) var(--mono-mode-invalid-ring);\n}\n\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\n[mono-input][mono-validation-state=\"valid\"] > [mono-field] {\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-valid) var(--mono-mode-state-border-alpha), transparent);\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);\n}\n[mono-input][mono-validation-state=\"warning\"] > [mono-field] {\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-warning) var(--mono-mode-state-border-alpha), transparent);\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);\n}\n\n/* EXTENSION — readonly: focusable, on a muted surface */\n[mono-input][mono-readonly] > [mono-field],\n:where([mono-input]) > [mono-field]:has(> [mono-native]:read-only:not(:disabled):not([mono-file]):not([mono-range])) {\n  background: var(--mono-input-readonly-bg, var(--muted));\n}\n\n/* basecoat@1.0.2 styles/vega.css .input-group:has(> :is(input, textarea, select, [data-control]):disabled) — opacity-50\n   (`--mono-input-disabled-bg`: nova / lyra add disabled:bg-input/50) */\n[mono-input][mono-disabled] > [mono-field],\n:where([mono-input]) > [mono-field]:has(> [mono-native]:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: var(--mono-input-disabled-bg, var(--_mono-input-bg));\n}\n\n/* =========================================\n   The native input\n   ========================================= */\n\n/* basecoat@1.0.2 components/input-group.css .input-group > :is(input, textarea, select, [data-control]) —\n   block min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent\n   text-foreground shadow-none outline-none placeholder:text-muted-foreground */\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(input, select, [data-control])\n   — px-2.5 py-1 text-sm; mono: no block padding — the FIELD owns the height\n   (`min-height: token`) and `align-self: stretch` spans the click target */\n:where([mono-input]) [mono-native] {\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0;\n  align-self: stretch;\n  appearance: none;\n  margin: 0;\n  border: 0;\n  border-radius: 0;\n  outline: none;\n  background: transparent;\n  box-shadow: none;\n  color: var(--_mono-input-text);\n  font-family: inherit;\n  font-size: var(--_mono-input-font-size);\n  line-height: var(--_mono-input-line-height);\n  padding-inline: var(--_mono-input-padding-x);\n  padding-block: 0;\n\n  &::placeholder {\n    color: var(--_mono-input-placeholder);\n  }\n\n  /* .input:disabled — pointer-events-none cursor-not-allowed (the opacity is\n     on the field so the affixes fade with it) */\n  &:disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  &:read-only {\n    cursor: inherit;\n  }\n\n  /* Kill the native focus outline in host projects; the field draws the ring. */\n  &:focus,\n  &:focus-visible {\n    outline: none !important;\n  }\n\n  &[type='number']::-webkit-outer-spin-button,\n  &[type='number']::-webkit-inner-spin-button {\n    margin: 0;\n  }\n}\n\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\n   (and pe-1.5 for an end affix). The clear button counts as an end affix. */\n:where([mono-input]) > [mono-field]:has(> [mono-prefix]:not([mono-empty])) > [mono-native] {\n  padding-inline-start: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\n}\n:where([mono-input]) > [mono-field]:has(> :is([mono-suffix]:not([mono-empty]), [mono-clear])) > [mono-native] {\n  padding-inline-end: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\n}\n\n/* =========================================\n   Prefix / suffix\n   ========================================= */\n\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\n   text-sm font-medium text-muted-foreground select-none, svg size-4;\n   [data-align='start'] ps-2 / [data-align='end'] pe-2 */\n:where([mono-input]) [mono-prefix],\n:where([mono-input]) [mono-suffix] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--mono-spacing) * 2);\n  font-size: var(--mono-input-affix-font-size, var(--_mono-input-font-size));\n  line-height: var(--_mono-input-line-height);\n  font-weight: var(--mono-font-weight-medium);\n  color: var(--_mono-input-muted);\n  user-select: none;\n}\n\n:where([mono-input]) [mono-prefix] {\n  padding-inline-start: var(--_mono-input-affix-padding);\n}\n\n:where([mono-input]) [mono-suffix] {\n  padding-inline-end: var(--_mono-input-affix-padding);\n}\n\n/* The light build re-appends slotted prefix/suffix content into this\n   `[data-mono-slot]` placeholder, one level below the inline-flex wrapper.\n   Make it a flex container too, so an `display: inline` icon span (e.g. a\n   UnoCSS `i-mdi-*`, which ignores width/height while inline) is blockified\n   into a flex item and actually renders its box. */\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) > [data-mono-slot] {\n  display: inline-flex;\n  align-items: center;\n  gap: inherit;\n}\n\n/* `[&>svg:not([class*='size-'])]:size-4` — our icons are UnoCSS `i-*` mask\n   spans as often as SVGs, so every glyph in an affix takes the affix size. */\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) :is(svg, .mono-icon, [mono-icon]),\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(svg),\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(.mono-icon),\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted([mono-icon]) {\n  display: block;\n  width: var(--_mono-input-affix-icon);\n  height: var(--_mono-input-affix-icon);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n/* =========================================\n   Clear button — a ghost icon button in the end affix slot\n   ========================================= */\n\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)))\n   — size-6 rounded-[calc(var(--radius)-5px)] p-0 shadow-none, svg size-3.5;\n   .input-group > button[data-align='end'] me-1; painted as .btn[data-variant='ghost'] */\n:where([mono-input]) [mono-clear] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--_mono-input-clear);\n  height: var(--_mono-input-clear);\n  padding: 0;\n  margin: 0;\n  margin-inline-end: var(--mono-spacing);\n  border: 0;\n  border-radius: var(--mono-input-clear-radius, calc(var(--radius) - 5px));\n  background: transparent;\n  box-shadow: none;\n  color: var(--_mono-input-muted);\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n  outline-style: none;\n  transition-property: color, background-color, box-shadow;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n\n  &:focus-visible {\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);\n  }\n\n  &:active {\n    translate: 0 1px;\n  }\n}\n\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\n@media (hover: hover) {\n  :where([mono-input]) [mono-clear]:hover {\n    background: var(--mono-mode-ghost-hover);\n    color: var(--_mono-input-text);\n  }\n}\n\n:where([mono-input]) [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\n  display: block;\n  width: var(--_mono-input-clear-glyph);\n  height: var(--_mono-input-clear-glyph);\n  pointer-events: none;\n}\n\n/* =========================================\n   EXTENSION — type=\"file\": a read-only name field in front of a hidden native\n   picker, with an upload glyph (`[mono-file-icon]`, a `[mono-suffix]`) at the\n   end. The whole field reads as one button. The `mono-file` native is\n   `readonly` only as a means — it stays off the muted read-only surface above\n   unless `readonly` is actually set.\n   ========================================= */\n\n:where([mono-input][mono-type=\"file\"]) > [mono-field],\n:where([mono-input][mono-type=\"file\"]) [mono-native][mono-file],\n:where([mono-input][mono-type=\"file\"]) [mono-file-icon] {\n  cursor: pointer;\n}\n\n:where([mono-input][mono-type=\"file\"]) [mono-native][mono-file] {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:where([mono-input][mono-type=\"file\"][mono-readonly]) :is([mono-field], [mono-native][mono-file], [mono-file-icon]) {\n  cursor: default;\n}\n\n:where([mono-input][mono-type=\"file\"][mono-disabled]) :is([mono-field], [mono-native][mono-file], [mono-file-icon]) {\n  cursor: not-allowed;\n}\n\n:where([mono-input]) [mono-file-input] {\n  display: none !important;\n}\n\n/* =========================================\n   type=\"range\" — a port of Basecoat's components/range.css (`.field > input[type='range']`)\n\n     [mono-input][mono-type=\"range\"]   the root; `> [mono-field]` loses its box (a Basecoat\n                                       range sits straight in the .field, no .input-group)\n     [mono-native][mono-range]         ≡ .field > input[type='range'] (h-5, the track + thumb)\n     [mono-range-value]                EXTENSION — the value readout: end of the label row, or\n                                       after the slider when there is no label (EJI ONE's\n                                       `.eji-range__row`; Basecoat has no readout)\n\n   The fill is upstream's gradient stop: the element writes the position as\n   `--mono-input-range-value` (upstream `--slider-value`) inline on the native,\n   and raw markup sets it itself. The track/thumb paint in currentColor, and the\n   native's `color` is the ACCENT (`--_mono-input-accent`: the `color` prop, or a\n   validation state), so a flavor that wants the accent writes `currentColor`\n   — a flavor block may never read a `--_mono-*` private.\n\n   Knobs (vega fallbacks below; every Basecoat style + ONE writes its own in\n   flavors/*.css, `node scripts/basecoat-styles.mjs --varying \"range\"`):\n   --mono-input-range-{height, gap, track-height, track-radius, track-bg, fill,\n   thumb-size, thumb-width, thumb-radius, thumb-bg, thumb-border-width,\n   thumb-border-color, thumb-shadow, thumb-ring-width, thumb-ring-color,\n   ring-width, hover-ring-width, label-color, label-font-size, label-line-height,\n   label-font-weight, value-color,\n   value-font-family, value-font-size, value-font-weight, value-min-width}.\n   A flavor sets the md geometry only: `size` multiplies it (xs .75 … xxl\n   1.375), so every flavor keeps a whole xs→xxl ladder.\n   ========================================= */\n\n[mono-input][mono-type=\"range\"] {\n  --_mono-input-range-scale: 1;\n  gap: var(--mono-input-range-gap, var(--mono-input-gap, calc(var(--mono-spacing) * 3)));\n}\n[mono-input][mono-type=\"range\"][mono-size=\"xs\"] { --_mono-input-range-scale: 0.75; }\n[mono-input][mono-type=\"range\"][mono-size=\"sm\"] { --_mono-input-range-scale: 0.875; }\n[mono-input][mono-type=\"range\"][mono-size=\"lg\"] { --_mono-input-range-scale: 1.125; }\n[mono-input][mono-type=\"range\"][mono-size=\"xl\"] { --_mono-input-range-scale: 1.25; }\n[mono-input][mono-type=\"range\"][mono-size=\"xxl\"] { --_mono-input-range-scale: 1.375; }\n\n/* a validation state recolours the fill + thumb (after the colour rules, so it wins) */\n[mono-input][mono-type=\"range\"][mono-validation-state=\"invalid\"] { --_mono-input-accent-preset: var(--_mono-input-invalid); }\n[mono-input][mono-type=\"range\"][mono-validation-state=\"valid\"] { --_mono-input-accent-preset: var(--_mono-input-valid); }\n[mono-input][mono-type=\"range\"][mono-validation-state=\"warning\"] { --_mono-input-accent-preset: var(--_mono-input-warning); }\n\n/* No .input-group around a Basecoat range: the field keeps only its flex row\n   (prefix / slider / readout / suffix). Placed after the readonly / disabled\n   field rules, which it ties, so the box stays off in every state; the\n   disabled opacity is kept. */\n[mono-input][mono-type=\"range\"] > [mono-field] {\n  gap: calc(var(--mono-spacing) * 3);\n  min-height: 0;\n  border-width: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n\n[mono-input][mono-type=\"range\"] :is([mono-prefix], [mono-suffix]) {\n  padding-inline: 0;\n}\n\n/* the label spans the row so the readout can sit at its end (EJI ONE) */\n[mono-input][mono-type=\"range\"] > [mono-label] {\n  width: 100%;\n  font-size: var(--mono-input-range-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm)));\n  line-height: var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1));\n  color: var(--mono-input-range-label-color, var(--_mono-input-text));\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))));\n}\n\n/* basecoat@1.0.2 components/range.css .field > input[type='range'], .input[type='range'] — flex appearance-none items-center\n   p-0 outline-none disabled:pointer-events-none disabled:opacity-50 (the opacity is the field's) */\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 */\n[mono-native][mono-range] {\n  --_mono-input-range-track-h: round(nearest, calc(var(--mono-input-range-track-height, 0.375rem) * var(--_mono-input-range-scale, 1)), 1px);\n  --_mono-input-range-thumb-h: round(nearest, calc(var(--mono-input-range-thumb-size, 1rem) * var(--_mono-input-range-scale, 1)), 1px);\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);\n  --_mono-input-range-fill: var(--mono-input-range-fill, currentColor);\n  --_mono-input-range-track: var(--mono-input-range-track-bg, var(--muted));\n  --_mono-input-range-dir: to right;\n  --_mono-input-range-ring-w: var(--mono-input-range-ring-width, 4px);\n  --_mono-input-range-hover-ring-w: var(--mono-input-range-hover-ring-width, var(--_mono-input-range-ring-w));\n  --_mono-input-range-ring-c: color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\n  /* the hover / focus halo slot — `0 0 #0000` at rest */\n  --_mono-input-range-halo: 0 0 #0000;\n\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0;\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));\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  background: transparent;\n  color: var(--_mono-input-accent);\n  cursor: pointer;\n  outline: none;\n\n  &:dir(rtl) {\n    --_mono-input-range-dir: to left;\n  }\n\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\n     (+ components/range.css: w-full appearance-none, the --primary / --muted gradient stop) */\n  &::-webkit-slider-runnable-track {\n    width: 100%;\n    height: var(--_mono-input-range-track-h);\n    appearance: none;\n    border-radius: var(--mono-input-range-track-radius, 9999px);\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%));\n  }\n\n  &::-moz-range-track {\n    width: 100%;\n    height: var(--_mono-input-range-track-h);\n    appearance: none;\n    border-radius: var(--mono-input-range-track-radius, 9999px);\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%));\n  }\n\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\n     rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4\n     -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)]; mono: border-box, so\n     size-4 is the painted size whatever the border; the ring is three slots — a\n     resting ring (luma / rhea ring-1, ONE's navy rim), the halo, the shadow */\n  &::-webkit-slider-thumb {\n    display: block;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    width: var(--_mono-input-range-thumb-w);\n    height: var(--_mono-input-range-thumb-h);\n    margin-top: calc((var(--_mono-input-range-track-h) - var(--_mono-input-range-thumb-h)) / 2);\n    appearance: none;\n    border: var(--mono-input-range-thumb-border-width, 1px) solid var(--mono-input-range-thumb-border-color, currentColor);\n    border-radius: var(--mono-input-range-thumb-radius, 9999px);\n    background: var(--mono-input-range-thumb-bg, #fff);\n    box-shadow:\n      0 0 0 var(--mono-input-range-thumb-ring-width, 0px) var(--mono-input-range-thumb-ring-color, transparent),\n      var(--_mono-input-range-halo),\n      var(--mono-input-range-thumb-shadow, var(--mono-shadow-sm));\n    transition-property: color, box-shadow, background-color, border-color;\n    transition-timing-function: var(--mono-ease);\n    transition-duration: var(--mono-duration);\n  }\n\n  &::-moz-range-thumb {\n    display: block;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    width: var(--_mono-input-range-thumb-w);\n    height: var(--_mono-input-range-thumb-h);\n    appearance: none;\n    border: var(--mono-input-range-thumb-border-width, 1px) solid var(--mono-input-range-thumb-border-color, currentColor);\n    border-radius: var(--mono-input-range-thumb-radius, 9999px);\n    background: var(--mono-input-range-thumb-bg, #fff);\n    box-shadow:\n      0 0 0 var(--mono-input-range-thumb-ring-width, 0px) var(--mono-input-range-thumb-ring-color, transparent),\n      var(--_mono-input-range-halo),\n      var(--mono-input-range-thumb-shadow, var(--mono-shadow-sm));\n    transition-property: color, box-shadow, background-color, border-color;\n    transition-timing-function: var(--mono-ease);\n    transition-duration: var(--mono-duration);\n  }\n\n  /* focus-visible:ring-4 focus-visible:outline-hidden */\n  &:focus-visible {\n    --_mono-input-range-halo: 0 0 0 var(--_mono-input-range-ring-w) var(--_mono-input-range-ring-c);\n  }\n\n  &:disabled {\n    pointer-events: none;\n  }\n}\n\n/* hover:ring-4 (lyra / mira / nova also active:) */\n@media (hover: hover) {\n  [mono-native][mono-range]:hover:not(:disabled, :focus-visible) {\n    --_mono-input-range-halo: 0 0 0 var(--_mono-input-range-hover-ring-w) var(--_mono-input-range-ring-c);\n  }\n}\n[mono-native][mono-range]:active:not(:disabled, :focus-visible) {\n  --_mono-input-range-halo: 0 0 0 var(--_mono-input-range-hover-ring-w) var(--_mono-input-range-ring-c);\n}\n\n/* readonly: a native range ignores `readonly`, so the element reverts any move;\n   the pointer is switched off so a drag never even starts */\n[mono-input][mono-readonly] [mono-native][mono-range] {\n  pointer-events: none;\n  cursor: default;\n}\n\n/* EXTENSION — the value readout (EJI ONE `.eji-range__val`: the number is always\n   on screen). Tabular figures so the row does not shimmer while dragging. */\n:where([mono-input]) [mono-range-value] {\n  flex: none;\n  margin-inline-start: auto;\n  font-family: var(--mono-input-range-value-font-family, inherit);\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))));\n  font-weight: var(--mono-input-range-value-font-weight, var(--mono-font-weight-medium));\n  line-height: var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1));\n  font-variant-numeric: tabular-nums;\n  color: var(--mono-input-range-value-color, var(--_mono-input-muted));\n  white-space: nowrap;\n  user-select: none;\n}\n\n/* after the slider (no label): a reserved width, so the track does not resize\n   as the number gains a digit */\n:where([mono-input]) > [mono-field] > [mono-range-value] {\n  min-width: var(--mono-input-range-value-min-width, 3ch);\n  text-align: end;\n}\n\n/* =========================================\n   Message — helper / validation text under the field\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p — text-sm text-muted-foreground\n   leading-normal font-normal text-start. The wrapper is always rendered\n   (aria-describedby points at it); it takes no space until it holds text. */\n:where([mono-input]) > [mono-message-wrap] {\n  display: block;\n}\n\n:where([mono-input]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\n  display: none;\n}\n\n:where([mono-input]) [mono-message] {\n  font-size: var(--mono-input-message-font-size, var(--mono-text-sm));\n  line-height: var(--mono-input-message-line-height, var(--mono-leading-normal));\n  font-weight: var(--mono-font-weight-normal);\n  text-align: start;\n  color: var(--_mono-input-muted);\n}\n\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\n:where([mono-input]) [mono-message=\"invalid\"] {\n  color: var(--_mono-input-invalid);\n}\n\n/* EXTENSION — the other two states in their role colour */\n:where([mono-input]) [mono-message=\"valid\"] {\n  color: var(--_mono-input-valid);\n}\n\n:where([mono-input]) [mono-message=\"warning\"] {\n  color: var(--_mono-input-warning);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where([mono-input]) > [mono-field],\n  :where([mono-input]) [mono-clear] {\n    transition: none;\n  }\n}\n\n/* =========================================\n   label-position — the slots form/label-position.css reads\n   (top / notched / left / right; public knobs: --mono-input-label-width,\n   -label-side-gap, -label-notch-font-size, -label-notch-bg)\n   ========================================= */\n\n[mono-input][mono-label-position] {\n  --_mono-lp-width: var(--mono-input-label-width, auto);\n  --_mono-lp-gap: var(--mono-input-label-side-gap, calc(var(--mono-spacing) * 3));\n  --_mono-lp-height: var(--_mono-input-height);\n  --_mono-lp-box-min: var(--_mono-input-height);\n  --_mono-lp-padding-x: var(--_mono-input-padding-x);\n  --_mono-lp-padding-y: 0px;\n  --_mono-lp-font: var(--mono-input-label-notch-font-size, var(--mono-text-xs));\n  --_mono-lp-notch-bg: var(--mono-input-label-notch-bg, var(--background));\n  --_mono-lp-field-bg: var(--_mono-input-bg);\n}\n";
-
-//#endregion
-export { input_css_raw_default as t };