@mono-lit/helper 0.0.4 → 0.0.5

package/dist/field-tooltip.css_raw-DEctHXKm.js

@@ -0,0 +1,270 @@
+import { o as infoIcon } from "./field-icons-t8rXRCKs.js";
+import { html, nothing } from "lit";
+import { ref } from "lit/directives/ref.js";
+
+//#region src/composables/field-bubble.ts
+/** Gap between anchor and bubble, and the bubble's minimum distance to the viewport edge. */
+const GAP = 8;
+const EDGE = 8;
+/** Grace period for moving the pointer from the anchor onto the bubble. */
+const HIDE_DELAY = 120;
+let _uid = 0;
+var FieldBubble = class {
+	constructor(options = {}) {
+		this.id = `mono-field-bubble-${++_uid}`;
+		this._anchor = null;
+		this._bubble = null;
+		this._open = false;
+		this.setAnchor = (el) => {
+			this._anchor = el ?? null;
+		};
+		this.setBubble = (el) => {
+			if ((el ?? null) !== this._bubble) this.hide();
+			this._bubble = el ?? null;
+		};
+		this.show = () => {
+			this.cancelHide();
+			const bubble = this._bubble;
+			if (!bubble || !bubble.isConnected || !this._anchor) return;
+			if (!this._open) {
+				this._open = true;
+				bubble.setAttribute("mono-open", "");
+				try {
+					if (typeof bubble.showPopover === "function" && !bubble.matches(":popover-open")) bubble.showPopover();
+				} catch {}
+				window.addEventListener("scroll", this.place, true);
+				window.addEventListener("resize", this.place);
+			}
+			this.place();
+		};
+		this.hide = () => {
+			this.cancelHide();
+			if (!this._open) return;
+			this._open = false;
+			window.removeEventListener("scroll", this.place, true);
+			window.removeEventListener("resize", this.place);
+			const bubble = this._bubble;
+			if (!bubble) return;
+			bubble.removeAttribute("mono-open");
+			try {
+				if (typeof bubble.hidePopover === "function" && bubble.matches(":popover-open")) bubble.hidePopover();
+			} catch {}
+		};
+		this.scheduleHide = () => {
+			this.cancelHide();
+			this._hideTimer = setTimeout(this.hide, HIDE_DELAY);
+		};
+		this.cancelHide = () => {
+			if (this._hideTimer !== void 0) clearTimeout(this._hideTimer);
+			this._hideTimer = void 0;
+		};
+		this.onPointerLeave = (e) => {
+			if (e.pointerType === "touch") return;
+			this.scheduleHide();
+		};
+		this.onKeydown = (e) => {
+			if (e.key === "Escape" && this._open) {
+				e.stopPropagation();
+				this.hide();
+			}
+		};
+		this.place = () => {
+			const anchor = this._anchor;
+			const bubble = this._bubble;
+			if (!this._open || !anchor || !bubble) return;
+			const r = anchor.getBoundingClientRect();
+			const vw = document.documentElement.clientWidth || window.innerWidth;
+			const vh = window.innerHeight;
+			const bw = bubble.offsetWidth;
+			const bh = bubble.offsetHeight;
+			const above = r.top - GAP - bh;
+			const below = r.bottom + GAP;
+			const fitsAbove = above >= EDGE;
+			const fitsBelow = below + bh <= vh - EDGE;
+			const side = this._side === "top" ? fitsAbove || !fitsBelow ? "top" : "bottom" : fitsBelow || !fitsAbove ? "bottom" : "top";
+			const top = side === "top" ? above : below;
+			const target = this._align === "center" ? r.left + r.width / 2 : r.left + Math.min(16, r.width / 2);
+			const ideal = this._align === "center" ? target - bw / 2 : r.left;
+			const left = Math.min(Math.max(ideal, EDGE), Math.max(EDGE, vw - EDGE - bw));
+			bubble.style.top = `${Math.round(top)}px`;
+			bubble.style.left = `${Math.round(left)}px`;
+			bubble.style.setProperty("--_mono-field-tip-arrow-x", `${Math.round(target - left)}px`);
+			bubble.setAttribute("mono-side", side);
+		};
+		this._side = options.side ?? "top";
+		this._align = options.align ?? "center";
+	}
+	get isOpen() {
+		return this._open;
+	}
+};
+
+//#endregion
+//#region src/composables/field-tooltip.ts
+/** `controlMonoTooltip` once floating-ui is known to load, else `null`. Probed once per page. */
+let _probe = null;
+function probeTooltip() {
+	_probe ??= (async () => {
+		try {
+			const [{ loadFloatingUi }, { controlMonoTooltip }] = await Promise.all([import("./tooltip-loader-3U9FTOXj.js"), import("./control-tooltip-7vegYmq3.js")]);
+			await loadFloatingUi();
+			return controlMonoTooltip;
+		} catch {
+			return null;
+		}
+	})();
+	return _probe;
+}
+/** `string` → `{ content }`; anything without content → `null` (renders nothing). */
+function normalizeFieldTooltip(value) {
+	if (!value) return null;
+	if (typeof value === "string") return value.trim() ? { content: value } : null;
+	if (typeof value !== "object") return null;
+	const { content } = value;
+	if (content === void 0 || content === null || content === "") return null;
+	return value;
+}
+/** Which bubble a prop value gets: the built-in one, the floating-ui addon, or none. */
+function tooltipMode(value) {
+	if (!normalizeFieldTooltip(value)) return null;
+	return typeof value === "string" ? "simple" : "floating";
+}
+/** A click on the bubble is still inside the `<label>` and the icon: neither should react. */
+const stopBubbleClick = (e) => {
+	e.preventDefault();
+	e.stopPropagation();
+};
+const stopLabelActivation = (e) => {
+	e.preventDefault();
+};
+var FieldTooltipController = class {
+	constructor(host, read) {
+		this.host = host;
+		this.read = read;
+		this._fn = null;
+		this._ctrl = null;
+		this._el = null;
+		this._applied = null;
+		this._raw = null;
+		this._connected = false;
+		this._bubble = new FieldBubble({
+			side: "top",
+			align: "center"
+		});
+		this._setEl = (el) => {
+			if ((el ?? null) !== this._el) this._unbind();
+			this._el = el ?? null;
+			this._bubble.setAnchor(this._el);
+		};
+		this._onIconClick = (e) => {
+			stopLabelActivation(e);
+			this._bubble.show();
+		};
+		host.addController(this);
+	}
+	hostConnected() {
+		this._connected = true;
+	}
+	hostDisconnected() {
+		this._connected = false;
+		this._bubble.hide();
+		this._unbind();
+	}
+	hostUpdated() {
+		if (tooltipMode(this.read()) === "floating") this._ensureProbe();
+		this._sync();
+	}
+	/** The ⓘ for the end of the label row, or `nothing`. */
+	render() {
+		const raw = this.read();
+		const mode = tooltipMode(raw);
+		if (mode === "simple") return this._renderSimple(raw);
+		if (mode !== "floating" || !this._fn) return nothing;
+		return html`<span
+      mono-label-tooltip
+      tabindex="0"
+      role="img"
+      aria-label="More information"
+      @click=${stopLabelActivation}
+      ${ref(this._setEl)}
+    >${this._icon()}</span>`;
+	}
+	/**
+	* Plain text: the icon carries its own bubble. `aria-describedby` reads the
+	* text to screen readers on focus; hover, focus or a tap shows it, Escape
+	* dismisses it, and the pointer may move onto it without it closing.
+	*/
+	_renderSimple(text) {
+		return html`<span
+      mono-label-tooltip
+      tabindex="0"
+      role="img"
+      aria-label="More information"
+      aria-describedby=${this._bubble.id}
+      @click=${this._onIconClick}
+      @pointerenter=${this._bubble.show}
+      @pointerleave=${this._bubble.onPointerLeave}
+      @focus=${this._bubble.show}
+      @blur=${this._bubble.hide}
+      @keydown=${this._bubble.onKeydown}
+      ${ref(this._setEl)}
+    >${this._icon()}<span
+        mono-field-bubble
+        mono-label-tooltip-bubble
+        id=${this._bubble.id}
+        role="tooltip"
+        popover="manual"
+        @pointerenter=${this._bubble.cancelHide}
+        @pointerleave=${this._bubble.onPointerLeave}
+        @click=${stopBubbleClick}
+        ${ref(this._bubble.setBubble)}
+      >${text}</span></span>`;
+	}
+	/**
+	* Light build: the UnoCSS `i-mdi-information-outline` mask (shipped in
+	* `ui/index.css`). Shadow build: the same path inline — the page's icon CSS
+	* cannot reach a shadow root.
+	*/
+	_icon() {
+		if (this.host.renderRoot instanceof ShadowRoot) return infoIcon();
+		return html`<span class="mono-icon i-mdi-information-outline" mono-icon aria-hidden="true"></span>`;
+	}
+	_ensureProbe() {
+		if (this._fn || typeof document === "undefined") return;
+		probeTooltip().then((fn) => {
+			if (!fn || this._fn) return;
+			this._fn = fn;
+			this.host.requestUpdate();
+		});
+	}
+	_sync() {
+		const raw = this.read();
+		if (tooltipMode(raw) !== "floating") return this._unbind();
+		if (this._ctrl && this._raw === raw) return;
+		const options = normalizeFieldTooltip(raw);
+		if (!this._fn || !this._connected || !this._el || !options) return this._unbind();
+		if (this._ctrl) {
+			const blanked = {};
+			for (const key of Object.keys(this._applied ?? {})) blanked[key] = void 0;
+			this._ctrl.update({
+				...blanked,
+				...options
+			});
+		} else this._ctrl = this._fn(this._el, options);
+		this._applied = options;
+		this._raw = raw;
+	}
+	_unbind() {
+		this._ctrl?.destroy();
+		this._ctrl = null;
+		this._applied = null;
+		this._raw = null;
+	}
+};
+
+//#endregion
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\form\field-tooltip.css?raw.js
+var field_tooltip_css_raw_default = "/* =========================================\n   Field tooltip — the BUILT-IN bubble behind a plain-text `tooltip=\"…\"` on\n   every field control (input, select, tag-input, date, textarea,\n   dropdown-table, slider). No floating-ui: composables/field-tooltip.ts\n   shows it in the top layer (Popover API) and writes its fixed `top` /\n   `left`, `mono-side` (top|bottom) and the arrow's x. The object form\n   (`.tooltip=${{…}}`) is the tooltip addon instead and never reaches here.\n\n   Looks like the addon's default `mono-tooltip`, and reads its public knobs:\n   --mono-tooltip-bg / -color / -radius / -max-width / -font-size /\n   -line-height / -padding-x / -padding-y.\n\n   Light: imported once by entries/index.css. Shadow: appended to each\n   control's shadow sheet.\n   ========================================= */\n\n[mono-field-bubble] {\n  --_mono-field-tip-bg: var(--mono-tooltip-bg, var(--foreground));\n  --_mono-field-tip-arrow: calc(var(--mono-spacing) * 2);\n\n  /* undo the [popover] UA box (inset:0; margin:auto; border; Canvas …) */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  z-index: var(--mono-popup-z, 1000);\n  display: none;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: min(var(--mono-tooltip-max-width, 20rem), calc(100vw - 16px));\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  padding: var(--mono-tooltip-padding-y, calc(var(--mono-spacing) * 1.5)) var(--mono-tooltip-padding-x, calc(var(--mono-spacing) * 3));\n  border: 0;\n  border-radius: var(--mono-tooltip-radius, var(--mono-radius-md));\n  background: var(--_mono-field-tip-bg);\n  color: var(--mono-tooltip-color, var(--background));\n  box-shadow: var(--mono-tooltip-shadow, 0 0 0 0 transparent);\n\n  /* it sits inside the label — drop everything the label row set */\n  font-family: inherit;\n  font-size: var(--mono-tooltip-font-size, var(--mono-text-xs));\n  font-weight: var(--mono-font-weight-normal, 400);\n  font-style: normal;\n  line-height: var(--mono-tooltip-line-height, var(--mono-text-xs--lh));\n  letter-spacing: normal;\n  text-transform: none;\n  text-align: start;\n  white-space: normal;\n  overflow-wrap: break-word;\n  cursor: default;\n  user-select: text;\n  pointer-events: auto;\n}\n\n[mono-field-bubble][mono-open] {\n  display: block;\n  animation: mono-field-tip-in var(--mono-duration, 150ms) var(--mono-ease, ease) both;\n}\n\n/* The arrow, plus (::before) an invisible bridge over the gap so the pointer\n   can travel from the icon onto the bubble without it closing. */\n[mono-field-bubble]::after {\n  content: '';\n  position: absolute;\n  left: var(--_mono-field-tip-arrow-x, 50%);\n  width: var(--_mono-field-tip-arrow);\n  height: var(--_mono-field-tip-arrow);\n  background: inherit;\n  border-radius: 2px;\n  translate: -50% 0;\n  rotate: 45deg;\n}\n\n[mono-field-bubble]::before {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  height: 8px;\n}\n\n[mono-field-bubble]:not([mono-side=\"bottom\"])::after {\n  bottom: calc(var(--_mono-field-tip-arrow) / -2 + 1px);\n}\n[mono-field-bubble]:not([mono-side=\"bottom\"])::before {\n  top: 100%;\n}\n[mono-field-bubble][mono-side=\"bottom\"]::after {\n  top: calc(var(--_mono-field-tip-arrow) / -2 + 1px);\n}\n[mono-field-bubble][mono-side=\"bottom\"]::before {\n  bottom: 100%;\n}\n\n@keyframes mono-field-tip-in {\n  from {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [mono-field-bubble][mono-open] {\n    animation: none;\n  }\n}\n";
+
+//#endregion
+export { FieldTooltipController as n, FieldBubble as r, field_tooltip_css_raw_default as t };

package/dist/field-validation-CHHQi1zl.js

@@ -0,0 +1,170 @@
+import { r as checkCircleIcon, t as alertCircleIcon } from "./field-icons-t8rXRCKs.js";
+import { n as FieldBubble } from "./field-tooltip-FyMi9vNM.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
+export { FieldValidationController as t };

package/dist/field-validation.css_raw-B3Iu33rS.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-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/index.js

@@ -7,11 +7,12 @@ import { t as monoDataGrid } from "./mono-data-grid-8jmeIXUU.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 { a as resetMonoUI, g as resetMonoSkeleton, i as getMonoUIStatus, n as createMonoUI, o as getMonoSkeletonStatus, r as getMonoUI, s as isMonoSsrApp } from "./mono-ui-BwUc0L6B.js";
-import { t as monoForm } from "./mono-form-controller-IYn0MuUQ.js";
+import { t as monoForm } from "./mono-form-controller-BkMR8g14.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 { a as resetMonoTooltip, n as createMonoTooltip, o as controlMonoTooltip, r as destroyAllMonoTooltips, s as monoTooltip, u as getMonoTooltipGlobal } from "./tooltip-FCMRUSLi.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-dvrNviMx.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-DzCuvHLg.js";
 
 export { DEFAULT_ERROR_MESSAGES, DEFAULT_FLAVOR, DEFAULT_SEARCH_OPERATION, DEFAULT_THEME, OPERATOR_ARITY as MONO_FILTER_OPERATOR_ARITY, DEFAULT_TEXTS as MONO_FILTER_TEXTS, MonoSourceSearch, SEARCH_FIELDS_KEYS, applyFlavor, applyTheme, arrayToODataString, arrayToTree, buildChartApply, buildChartOdataRequest, buildGroups, collectGroupPaths, composeApply, monoChart as controlMonoChart, monoChart, monoDataDropdown as controlMonoDataDropdown, monoDataDropdown, monoFilterBuilder as controlMonoFilterBuilder, monoFilterBuilder, monoForm as controlMonoForm, monoForm, monoModal as controlMonoModal, monoModal, monoDataGrid as controlMonoTable, monoDataGrid, controlMonoTooltip, createFlavorClass, createMonoTooltip, createMonoUI, createThemeClass, describeError, destroyAllMonoTooltips, errorStatus, flattenLeaves, flavorPresets, flavors, getAllFlavors, getAllThemes, getCurrentFlavor, getCurrentTheme, getFieldValue, getFlavorData, getMonoSkeletonStatus, getMonoTooltipGlobal, getMonoUI, getMonoUIStatus, getThemeData, isFoldableSearch, isGroupNode, isMonoSsrApp, isPath, isValidFlavor, isValidTheme, mergePatch, mergeSearchFields, monoArraySource, operatorsFor as monoFilterOperatorsFor, monoTooltip, normalizeError, odataStringToArray, parseFieldPath, parseSearchValue, plainSearchFields, readSearchField, resetFlavor, resetMonoSkeleton, resetMonoTooltip, resetMonoUI, resetTheme, resolveErrorMessages, resolveMaybeReactive, resolveSearchFields, searchRemoteFilter, searchRowPredicate, setErrorMessages, setFieldValue, themePresets, themes, toODataClause, toODataSelector, treeToArray };

package/dist/{index.node-dvrNviMx.js → index.node-DzCuvHLg.js}

@@ -3,7 +3,7 @@ import "./mono-data-grid-8jmeIXUU.js";
 import "./mono-ui-BwUc0L6B.js";
 import "./mono-data-chart-ChkelNT7.js";
 import "./mono-data-dropdown-DxpUUk2y.js";
-import "./tooltip-FCMRUSLi.js";
+import "./tooltip-Drekihf5.js";
 
 //#region src/data/theme/presets.json
 var presets_default = {