@mono-lit/helper 0.0.4 → 0.0.5

package/dist/ui/shadow/date.js

@@ -2,6 +2,8 @@ import { a as __decorate, f as customElement, l as defineHybridPropAliases, r as
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
 import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
+import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-DEctHXKm.js";
+import { n as label_position_css_raw_default, r as FieldValidationController, t as field_validation_css_raw_default } from "../../field-validation.css_raw-B3Iu33rS.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -42,6 +44,18 @@ const MonoDateCore = (superClass) => {
 			this.size = "md";
 			this.color = "primary";
 			this.variant = "outlined";
+			this.labelPosition = "top";
+			this.validationPosition = "bottom";
+			this.tooltip = null;
+			this._tooltip = new FieldTooltipController(this, () => this.tooltip);
+			this._validation = new FieldValidationController(this, () => ({
+				position: this.validationPosition,
+				...this._validationNotice ?? {
+					state: void 0,
+					text: void 0
+				},
+				suppressed: !!this._fp?.isOpen
+			}), () => this.renderRoot?.querySelector?.("[mono-date] > [mono-field]"));
 			this.error = false;
 			this.success = false;
 			this.disabled = false;
@@ -66,6 +80,8 @@ const MonoDateCore = (superClass) => {
 				if (this._fp.formatDate(parsed, fmt) === raw) this._fp.setDate(parsed, true);
 			};
 			defineHybridPropAliases(this, [
+				"labelPosition",
+				"validationPosition",
 				"modelValue",
 				"helperText",
 				"validationState",
@@ -279,8 +295,14 @@ const MonoDateCore = (superClass) => {
 				...named,
 				onReady: [(_d, _s, instance) => this._onReady(instance)],
 				onChange: [(dates, dateStr, instance) => this._onChange(dates, dateStr, instance)],
-				onOpen: [(dates, _s, instance) => this._emitOpenClose("open", dates, instance)],
-				onClose: [(dates, _s, instance) => this._emitOpenClose("close", dates, instance)]
+				onOpen: [(dates, _s, instance) => {
+					this._emitOpenClose("open", dates, instance);
+					this._validation.refresh();
+				}],
+				onClose: [(dates, _s, instance) => {
+					this._emitOpenClose("close", dates, instance);
+					this._validation.refresh();
+				}]
 			};
 			if (this.modelValue) config.defaultDate = this.modelValue;
 			if (this.disabled || this.readonly) config.clickOpens = false;
@@ -422,7 +444,10 @@ const MonoDateCore = (superClass) => {
 		get _resolvedState() {
 			if (this.error) return "error";
 			if (this.success) return "success";
-			return this.validationState ?? "default";
+			const state = this.validationState;
+			if (state === "invalid") return "error";
+			if (state === "valid") return "success";
+			return state ?? "default";
 		}
 		get _message() {
 			if (this._resolvedState === "error") return this.errorMessage || this.validationMessage || void 0;
@@ -470,7 +495,30 @@ const MonoDateCore = (superClass) => {
 		* date's block exactly one row-gap shorter than its siblings' — visible as soon
 		* as a labelled date sits beside a labelled input in the same row.
 		*/
+		/** The validation message and its state — the same precedence `_message` uses. */
+		get _validationNotice() {
+			const state = this._resolvedState;
+			const text = state === "error" ? this.errorMessage || this.validationMessage : state === "success" ? this.successMessage || this.validationMessage : "";
+			return text ? {
+				state,
+				text
+			} : null;
+		}
 		_renderMessage() {
+			if (this._validation.moved) {
+				const notice = this._validationNotice;
+				return html`
+        <div class=${this._cls("mono-date-message-wrap", "messageWrap")} mono-message-wrap>
+          ${this.helperText ? html`<div class=${`${this._cls("mono-date-message", "message")} default`} mono-message="helper">${this.helperText}</div>` : nothing}
+          <div
+            class=${`${this._cls("mono-date-message", "message")} ${notice.state}`}
+            mono-message=${notice.state}
+            mono-sr-only
+            role=${notice.state === "error" ? "alert" : nothing}
+          >${notice.text}</div>
+        </div>
+      `;
+			}
 			const msg = this._message;
 			return html`
       <div class=${this._cls("mono-date-message-wrap", "messageWrap")} mono-message-wrap>
@@ -492,6 +540,8 @@ const MonoDateCore = (superClass) => {
         mono-size=${this.size === "md" ? nothing : this.size}
         mono-color=${this.color === "primary" ? nothing : this.color}
         mono-variant=${this.variant === "outlined" ? nothing : this.variant}
+        mono-label-position=${this.labelPosition === "top" ? nothing : this.labelPosition}
+        mono-validation-position=${this.validationPosition === "bottom" ? nothing : this.validationPosition}
         mono-validation-state=${state === "default" ? nothing : state}
         ?mono-disabled=${this.disabled}
         ?mono-readonly=${this.readonly}
@@ -499,7 +549,7 @@ const MonoDateCore = (superClass) => {
         ?mono-clearable=${this.clearable}
       >
         ${this.label ? html`<label class=${this._cls("mono-date-label", "label")} mono-label for=${this._id}>
-              ${this.label}${this.required ? html`<span class=${this._cls("mono-date-required", "required")} mono-required-mark>*</span>` : nothing}
+              ${this.label}${this.required ? html`<span class=${this._cls("mono-date-required", "required")} mono-required-mark>*</span>` : nothing}${this._tooltip.render()}
             </label>` : nothing}
 
         <div class=${this._fieldClasses} mono-field>
@@ -515,6 +565,7 @@ const MonoDateCore = (superClass) => {
             aria-label=${ifDefined(this.ariaLabelText || this.label || void 0)}
             @input=${this._onTyping}
           />
+          ${this._validation.renderIcon()}
           ${this.clearable && this._hasValue && !this.disabled && !this.readonly ? html`<button
                 type="button"
                 class=${this._cls("mono-date-clear", "clear")}
@@ -527,6 +578,7 @@ const MonoDateCore = (superClass) => {
         </div>
 
         ${this._renderMessage()}
+        ${this._validation.renderFloat()}
       </div>
     `;
 		}
@@ -539,12 +591,21 @@ const MonoDateCore = (superClass) => {
 	__decorate([property({ type: String })], MonoDateCoreClass.prototype, "size", void 0);
 	__decorate([property({ type: String })], MonoDateCoreClass.prototype, "color", void 0);
 	__decorate([property({ type: String })], MonoDateCoreClass.prototype, "variant", void 0);
+	__decorate([property({
+		type: String,
+		attribute: "label-position"
+	})], MonoDateCoreClass.prototype, "labelPosition", void 0);
+	__decorate([property({
+		type: String,
+		attribute: "validation-position"
+	})], MonoDateCoreClass.prototype, "validationPosition", void 0);
 	__decorate([property({ type: String })], MonoDateCoreClass.prototype, "label", void 0);
 	__decorate([property({ type: String })], MonoDateCoreClass.prototype, "placeholder", void 0);
 	__decorate([property({
 		type: String,
 		attribute: "helper-text"
 	})], MonoDateCoreClass.prototype, "helperText", void 0);
+	__decorate([property()], MonoDateCoreClass.prototype, "tooltip", void 0);
 	__decorate([property({
 		type: String,
 		attribute: "validation-state"
@@ -671,7 +732,7 @@ const MonoDateCore = (superClass) => {
 
 //#endregion
 //#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\date\date.css?raw.js
-var date_css_raw_default = "/* @unocss-include */\r\n\r\n/* flatpickr's base stylesheet. The calendar renders into <body>, so this must\r\n   live in the global bundle (dist/ui/index.css) — that's why date.css is\r\n   @imported from src/entries/index.css. */\r\n@import 'flatpickr/dist/flatpickr.css';\r\n\r\n/* =========================================================================\r\n   mono-date — the mono-input box (a port of Basecoat's `.input-group` with a\r\n   leading icon, basecoat-css@1.0.2, vega style) around a flatpickr field, plus\r\n   a calendar restyled in Basecoat's popover idiom.\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-date size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Start\">\r\n     <div mono-date mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Start</label>\r\n       <div mono-field>\r\n         <span mono-prefix><span mono-icon class=\"mono-icon i-mdi-calendar-outline\"></span></span>\r\n         <input mono-native type=\"text\" placeholder=\"Pick a date\" />\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds); the old classes\r\n   (`.mono-date.sm.filled`) are still emitted as inert hooks until 2.0 but no\r\n   rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-date]                                   ≡ .field (flex column gap-3)\r\n     [mono-date] > [mono-label]                    ≡ .field > label / .label\r\n     [mono-date] > [mono-field]                    ≡ .input-group (h-9 rounded-md border-input shadow-xs)\r\n     [mono-field] > [mono-prefix] > [mono-icon]    ≡ .input-group > span[data-align='start'] > svg (ps-2, size-4, muted)\r\n     [mono-field] > [mono-native]                  ≡ .input-group > input (borderless, ps-1.5 after an affix, text-sm)\r\n     [mono-field] > [mono-clear] > [mono-icon]     ≡ .input-group > button[data-align='end']:has(> svg) (ghost, size-6)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"error\"]               ≡ .input-group:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"success\"]             ≡ EXTENSION (the invalid pattern in --success)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (the --mono-control-height-* ladder)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .input-group)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .input-group: bottom edge only, no ring)\r\n     .flatpickr-calendar.mono-flatpickr            ≡ [data-popover] frame (bg-popover ring-1 ring-foreground/10 rounded-md shadow-md)\r\n                                                     + EXTENSION: shadcn Calendar values (Basecoat 1.0.2 ships no calendar)\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-field], [mono-prefix] > [mono-icon], [mono-native], [mono-clear] >\r\n   [mono-icon], [mono-message-wrap] > [mono-message=\"helper|error|success\"].\r\n\r\n   The calendar renders into <body> (both builds), so it is styled through\r\n   flatpickr's own classes under our `.mono-flatpickr` marker and reads the page\r\n   tokens directly; the element copies the field's accent onto it as\r\n   `--cal-accent` / `--cal-accent-foreground` so it follows the `color` prop.\r\n\r\n   FLAVORS set the same knobs as mono-input, renamed `--mono-date-*` (see\r\n   input.css) plus `--mono-date-calendar-{radius,shadow,ring,day-radius}`. Every\r\n   fallback here is vega's value.\r\n   ========================================================================= */\r\n\r\nmono-date {\r\n  display: block;\r\n}\r\n\r\n[mono-date] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-date-text: var(--mono-date-color, var(--mono-date-text, var(--foreground)));\r\n  --_mono-date-placeholder: var(--mono-date-placeholder, var(--muted-foreground));\r\n  --_mono-date-muted: var(--mono-date-muted, var(--muted-foreground));\r\n  --_mono-date-primary: var(--mono-date-primary, var(--_mono-date-primary-preset, var(--ring)));\r\n  --_mono-date-primary-foreground: var(--mono-date-primary-foreground, var(--_mono-date-primary-foreground-preset, var(--primary-foreground)));\r\n  --_mono-date-danger: var(--mono-date-danger, var(--destructive));\r\n  --_mono-date-success: var(--mono-date-success, var(--success));\r\n  --_mono-date-warning: var(--mono-date-warning, var(--warning));\r\n  --_mono-date-info: var(--mono-date-info, var(--info));\r\n  --_mono-date-teal: var(--mono-date-teal, var(--teal));\r\n  --_mono-date-purple: var(--mono-date-purple, var(--purple));\r\n  --_mono-date-neutral: var(--mono-date-neutral, var(--neutral));\r\n  --_mono-date-dark: var(--mono-date-dark, var(--dark));\r\n  --_mono-date-secondary: var(--mono-date-secondary, var(--muted-foreground));\r\n\r\n  /* ── the painted result — three tiers, base = .input-group (vega) ──────── */\r\n  --_mono-date-ring-color: var(--mono-date-ring-color, var(--mono-date-focus-color, var(--_mono-date-primary)));\r\n  --_mono-date-ring-width: var(--mono-date-ring-width, var(--_mono-date-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-date-ring-alpha: var(--mono-date-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-date-border-color: var(--mono-date-rest-border, var(--mono-date-border-color, var(--mono-date-border, var(--_mono-date-border-color-preset, var(--input)))));\r\n  --_mono-date-bg: var(--mono-date-bg, var(--mono-date-surface, var(--_mono-date-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-date-shadow: var(--mono-date-shadow, var(--_mono-date-shadow-preset, 0 0 #0000));\r\n  --_mono-date-affix-padding: var(--mono-date-affix-padding, var(--_mono-date-affix-padding-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-date>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md; > input px-2.5 text-sm ── */\r\n  --_mono-date-height: var(--mono-date-height-md, var(--mono-control-height-md));\r\n  --_mono-date-radius: var(--mono-date-radius-md, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-md, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-date-font-size: var(--mono-date-font-md, var(--mono-text-sm));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 6);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-date-gap, calc(var(--mono-spacing) * 3));\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-date-text);\r\n}\r\n\r\n[mono-date],\r\n[mono-date] *,\r\n[mono-date] *::before,\r\n[mono-date] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-date] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the field's painted height IS the token (tests/perf/field-heights)\r\n   EXTENSION: the shared --mono-control-height-* ladder; text follows .btn's steps\r\n   ========================================= */\r\n\r\n@media (width < 48rem) {\r\n  [mono-date]:is(:not([mono-size]), [mono-size=\"md\"]) {\r\n    --_mono-date-font-size: var(--mono-date-font-md, var(--mono-text-base));\r\n    --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-md, var(--mono-text-base--lh)));\r\n  }\r\n}\r\n\r\n[mono-date][mono-size=\"xs\"] {\r\n  --_mono-date-height: var(--mono-date-height-xs, var(--mono-control-height-xs));\r\n  --_mono-date-radius: var(--mono-date-radius-xs, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-xs, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-date-font-size: var(--mono-date-font-xs, var(--mono-text-xs));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 4);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-date][mono-size=\"sm\"] {\r\n  --_mono-date-height: var(--mono-date-height-sm, var(--mono-control-height-sm));\r\n  --_mono-date-radius: var(--mono-date-radius-sm, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-sm, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-date-font-size: var(--mono-date-font-sm, var(--mono-date-font-md, var(--mono-text-sm)));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 5);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-date][mono-size=\"lg\"] {\r\n  --_mono-date-height: var(--mono-date-height-lg, var(--mono-control-height-lg));\r\n  --_mono-date-radius: var(--mono-date-radius-lg, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-lg, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-date-font-size: var(--mono-date-font-lg, var(--mono-date-font-md, var(--mono-text-sm)));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-date][mono-size=\"xl\"] {\r\n  --_mono-date-height: var(--mono-date-height-xl, var(--mono-control-height-xl));\r\n  --_mono-date-radius: var(--mono-date-radius-xl, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-xl, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-date-font-size: var(--mono-date-font-xl, var(--mono-text-base));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 7);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n[mono-date][mono-size=\"xxl\"] {\r\n  --_mono-date-height: var(--mono-date-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-date-radius: var(--mono-date-radius-xxl, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-xxl, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 4))));\r\n  --_mono-date-font-size: var(--mono-date-font-xxl, var(--mono-text-lg));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 8);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\r\n   shadow-xs bg-transparent (dark:bg-input/30 via --mono-mode-surface) */\r\n[mono-date]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-date-bg-preset: var(--mono-date-outline-bg);\r\n  --_mono-date-border-color-preset: var(--mono-date-outline-border-color);\r\n  --_mono-date-side-border-color-preset: var(--mono-date-outline-side-border-color);\r\n  --_mono-date-shadow-preset: var(--mono-date-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-date-ring-width-preset: var(--mono-date-outline-ring-width);\r\n  --_mono-date-radius-preset: var(--mono-date-outline-radius);\r\n  --_mono-date-padding-x-preset: var(--mono-date-outline-padding-x);\r\n  --_mono-date-affix-padding-preset: var(--mono-date-outline-affix-padding);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .input-group */\r\n[mono-date][mono-variant=\"filled\"] {\r\n  --_mono-date-bg-preset: var(--mono-date-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-date-border-color-preset: transparent;\r\n  --_mono-date-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .input-group */\r\n[mono-date][mono-variant=\"underlined\"] {\r\n  --_mono-date-bg-preset: transparent;\r\n  --_mono-date-side-border-color-preset: transparent;\r\n  --_mono-date-shadow-preset: 0 0 #0000;\r\n  --_mono-date-ring-width-preset: 0px;\r\n  --_mono-date-radius-preset: 0;\r\n  --_mono-date-padding-x-preset: 0;\r\n  --_mono-date-affix-padding-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the accent: the focus ring + the calendar's\r\n   selected day. Primary is Basecoat's --ring for the ring and --primary for the\r\n   calendar (copied by the element as --cal-accent).\r\n   ========================================= */\r\n\r\n[mono-date]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-date-primary-preset: var(--ring);\r\n  --_mono-date-primary-foreground-preset: var(--primary-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--primary));\r\n}\r\n[mono-date][mono-color=\"secondary\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-secondary);\r\n  --_mono-date-primary-foreground-preset: var(--background);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-secondary));\r\n}\r\n[mono-date][mono-color=\"success\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-success);\r\n  --_mono-date-primary-foreground-preset: var(--success-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-success));\r\n}\r\n[mono-date][mono-color=\"danger\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-danger);\r\n  --_mono-date-primary-foreground-preset: var(--destructive-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-danger));\r\n}\r\n[mono-date][mono-color=\"warning\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-warning);\r\n  --_mono-date-primary-foreground-preset: var(--warning-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-warning));\r\n}\r\n[mono-date][mono-color=\"info\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-info);\r\n  --_mono-date-primary-foreground-preset: var(--info-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-info));\r\n}\r\n[mono-date][mono-color=\"teal\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-teal);\r\n  --_mono-date-primary-foreground-preset: var(--teal-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-teal));\r\n}\r\n[mono-date][mono-color=\"purple\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-purple);\r\n  --_mono-date-primary-foreground-preset: var(--purple-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-purple));\r\n}\r\n[mono-date][mono-color=\"neutral\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-neutral);\r\n  --_mono-date-primary-foreground-preset: var(--neutral-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-neutral));\r\n}\r\n[mono-date][mono-color=\"dark\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-dark);\r\n  --_mono-date-primary-foreground-preset: var(--dark-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-dark));\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n[mono-date] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: var(--mono-date-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-date-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-date-label-line-height, 1);\r\n  font-weight: var(--mono-date-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-date-label-text-transform, none);\r\n  letter-spacing: var(--mono-date-label-letter-spacing, normal);\r\n  color: var(--_mono-date-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-date][mono-disabled] > [mono-label],\r\n[mono-date]:has(> [mono-field] > [mono-native]:disabled) > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-date][mono-validation-state=\"error\"] > [mono-label] {\r\n  color: var(--_mono-date-danger);\r\n}\r\n\r\n[mono-date] [mono-required-mark] {\r\n  color: var(--_mono-date-danger);\r\n}\r\n\r\n/* =========================================\r\n   The field — the bordered box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group */\r\n/* basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md border border-input\r\n   shadow-xs focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\r\n[mono-date] > [mono-field] {\r\n  --_mono-date-bc: var(--_mono-date-border-color);\r\n  --_mono-date-side-bc: var(--mono-date-side-border-color, var(--_mono-date-side-border-color-preset, var(--_mono-date-bc)));\r\n  --_mono-date-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-date-height);\r\n  padding-block: var(--mono-date-padding-y, 0);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-date-bc);\r\n  border-top-color: var(--_mono-date-side-bc);\r\n  border-inline-color: var(--_mono-date-side-bc);\r\n  border-radius: var(--_mono-date-radius);\r\n  background: var(--_mono-date-bg);\r\n  color: var(--_mono-date-text);\r\n  box-shadow: var(--_mono-date-ring), var(--_mono-date-shadow);\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-within {\r\n    --_mono-date-bc: var(--_mono-date-ring-color);\r\n    --_mono-date-ring: 0 0 0 var(--_mono-date-ring-width) color-mix(in oklab, var(--_mono-date-ring-color) var(--_mono-date-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 */\r\n[mono-date][mono-validation-state=\"error\"] > [mono-field],\r\n[mono-date] > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\r\n  --_mono-date-bc: var(--mono-mode-invalid-border);\r\n  --_mono-date-ring: 0 0 0 var(--_mono-date-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — success is the invalid pattern in --success */\r\n[mono-date][mono-validation-state=\"success\"] > [mono-field] {\r\n  --_mono-date-bc: color-mix(in oklab, var(--_mono-date-success) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-date-ring: 0 0 0 var(--_mono-date-ring-width) color-mix(in oklab, var(--_mono-date-success) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — readonly: a muted surface */\r\n[mono-date][mono-readonly] > [mono-field] {\r\n  background: var(--mono-date-readonly-bg, var(--muted));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:has(> :is(input, textarea, select, [data-control]):disabled) — opacity-50 */\r\n[mono-date][mono-disabled] > [mono-field],\r\n[mono-date]:not([mono-readonly]) > [mono-field]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  background: var(--mono-date-disabled-bg, var(--_mono-date-bg));\r\n}\r\n\r\n/* =========================================\r\n   The native input (flatpickr's altInput takes the same rule: it replaces the\r\n   native in the DOM and inherits its class + attributes)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group > :is(input, textarea, select, [data-control]) */\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(input, select, [data-control]) — px-2.5 py-1 text-sm */\r\n[mono-date] [mono-native],\r\n[mono-date] [mono-field] > input.flatpickr-input.altInput {\r\n  display: block;\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-date-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-date-font-size);\r\n  line-height: var(--_mono-date-line-height);\r\n  padding-inline: var(--_mono-date-padding-x);\r\n  padding-block: 0;\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-date-placeholder);\r\n  }\r\n\r\n  &:disabled {\r\n    pointer-events: none;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:read-only {\r\n    cursor: inherit;\r\n  }\r\n\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) — ps-1.5 */\r\n[mono-date] > [mono-field]:has(> [mono-prefix]:not([mono-empty])) > :is([mono-native], input.flatpickr-input.altInput) {\r\n  padding-inline-start: var(--mono-date-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n[mono-date] > [mono-field]:has(> [mono-clear]) > :is([mono-native], input.flatpickr-input.altInput) {\r\n  padding-inline-end: var(--mono-date-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* =========================================\r\n   The leading icon\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(span, [role='group'], header, footer), .input-group > :is(svg, kbd, .popover, .dropdown-menu)\r\n   — text-muted-foreground select-none, svg size-4; [data-align='start'] ps-2 */\r\n[mono-date] [mono-prefix] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  padding-inline-start: var(--_mono-date-affix-padding);\r\n  color: var(--_mono-date-muted);\r\n  user-select: none;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-date] [mono-prefix] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-date-affix-icon);\r\n  height: var(--_mono-date-affix-icon);\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* =========================================\r\n   Clear button — a ghost icon button in the end slot\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(button, [role='group'] > button, header > button, footer > button):has(> svg):not(:has(> :not(svg)))\r\n   — size-6 rounded-[calc(var(--radius)-5px)] p-0 shadow-none, svg size-3.5; me-1 */\r\n[mono-date] [mono-clear] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-date-clear);\r\n  height: var(--_mono-date-clear);\r\n  padding: 0;\r\n  margin: 0;\r\n  margin-inline-end: var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: var(--mono-date-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-date-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-visible {\r\n    box-shadow: 0 0 0 var(--_mono-date-ring-width) color-mix(in oklab, var(--_mono-date-ring-color) var(--_mono-date-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted hover:text-foreground */\r\n@media (hover: hover) {\r\n  [mono-date] [mono-clear]:hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-date-text);\r\n  }\r\n}\r\n\r\n[mono-date] [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-date-clear-glyph);\r\n  height: var(--_mono-date-clear-glyph);\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Message\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p */\r\n[mono-date] > [mono-message-wrap] {\r\n  display: block;\r\n}\r\n\r\n[mono-date] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-date] [mono-message] {\r\n  font-size: var(--mono-date-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-date-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-date-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-date] [mono-message=\"error\"] {\r\n  color: var(--_mono-date-danger);\r\n}\r\n\r\n[mono-date] [mono-message=\"success\"] {\r\n  color: var(--_mono-date-success);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-date] > [mono-field],\r\n  [mono-date] [mono-clear] {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   flatpickr calendar — restyled in Basecoat's idiom\r\n   -----------------------------------------\r\n   The calendar renders into <body>, so it reads the page tokens and cannot see\r\n   the field's resolvers; the element copies the field's accent onto it as\r\n   `--cal-accent` / `--cal-accent-foreground` (inline) so it follows the `color`\r\n   prop. Every rule is scoped to our `.mono-flatpickr` marker; flatpickr's own\r\n   geometry (day cells, container widths) is kept — only colour, radius,\r\n   typography and the frame are ours.\r\n\r\n   basecoat@1.0.2 styles/vega.css .select:not(select) [data-popover] — the frame:\r\n   bg-popover text-popover-foreground ring-1 ring-foreground/10 rounded-md\r\n   shadow-md. EXTENSION: the day / caption / nav values are shadcn's Calendar\r\n   (Basecoat 1.0.2 ships no calendar): day size-8 rounded-md text-sm,\r\n   hover / today / in-range bg-accent text-accent-foreground, selected\r\n   bg-primary text-primary-foreground, outside days text-muted-foreground/50,\r\n   caption text-sm font-medium, weekdays text-muted-foreground text-[0.8rem].\r\n   ========================================= */\r\n.flatpickr-calendar.mono-flatpickr {\r\n  --cal-bg: var(--mono-date-calendar-bg, var(--popover));\r\n  --cal-text: var(--mono-date-calendar-color, var(--popover-foreground));\r\n  --cal-muted: var(--muted-foreground);\r\n  --cal-faint: color-mix(in oklab, var(--muted-foreground) 50%, transparent);\r\n  --cal-border: var(--border);\r\n  --cal-soft: var(--accent);\r\n  --cal-soft-foreground: var(--accent-foreground);\r\n  --cal-accent: var(--primary);\r\n  --cal-accent-foreground: var(--primary-foreground);\r\n  --cal-radius: var(--mono-date-calendar-day-radius, var(--mono-radius-md));\r\n\r\n  background: var(--cal-bg);\r\n  border: 0;\r\n  border-radius: var(--mono-date-calendar-radius, var(--mono-radius-md));\r\n  box-shadow: var(--mono-date-calendar-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-date-calendar-shadow, var(--mono-shadow-md));\r\n  color: var(--cal-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-text-sm);\r\n  line-height: var(--mono-text-sm--lh);\r\n}\r\n\r\n/* a popover has no pointer arrow */\r\n.flatpickr-calendar.mono-flatpickr::before,\r\n.flatpickr-calendar.mono-flatpickr::after {\r\n  display: none;\r\n}\r\n\r\n/* months / header — text-sm font-medium */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-month,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-current-month,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-current-month input.cur-year {\r\n  color: var(--cal-text);\r\n  fill: var(--cal-text);\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n/* nav — .btn[data-variant='outline'][data-size='icon-sm']: size-7 rounded-md\r\n   border-border bg-background hover:bg-muted, painted flat here */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month {\r\n  color: var(--cal-muted);\r\n  fill: var(--cal-muted);\r\n  border-radius: var(--cal-radius);\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month svg,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month svg {\r\n  fill: currentColor;\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month:hover {\r\n  background: var(--cal-soft);\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month:hover svg,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month:hover svg {\r\n  fill: var(--cal-soft-foreground);\r\n}\r\n\r\n/* month dropdown — a native <select>. Its popup list is drawn by the browser\r\n   from the select's OWN background-color and the option colours (a transparent\r\n   select falls back to the OS palette, which is what mismatched the dark popover),\r\n   so the select carries the popover surface and never changes it on hover. */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months {\r\n  background: var(--cal-bg);\r\n  color: var(--cal-text);\r\n  color-scheme: inherit;\r\n  font-weight: var(--mono-font-weight-medium);\r\n  border-radius: var(--cal-radius);\r\n  transition-property: color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months:hover {\r\n  background: var(--cal-bg);\r\n  color: var(--cal-accent);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {\r\n  background: var(--cal-bg);\r\n  color: var(--cal-text);\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:checked {\r\n  background: var(--cal-soft);\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n/* year stepper */\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper:hover {\r\n  background: var(--cal-soft);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span {\r\n  border-color: var(--cal-border);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span:hover {\r\n  background: var(--cal-soft);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span.arrowUp::after {\r\n  border-bottom-color: var(--cal-muted);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span.arrowDown::after {\r\n  border-top-color: var(--cal-muted);\r\n}\r\n\r\n/* weekdays — text-muted-foreground text-[0.8rem] font-normal */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-weekdays {\r\n  background: transparent;\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr span.flatpickr-weekday {\r\n  background: transparent;\r\n  color: var(--cal-muted);\r\n  font-size: 0.8rem;\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n/* days — rounded-md text-sm; hover bg-accent; today bg-accent; selected bg-primary */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day {\r\n  color: var(--cal-text);\r\n  border: 1px solid transparent;\r\n  border-radius: var(--cal-radius);\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day:focus {\r\n  background: var(--cal-soft);\r\n  border-color: transparent;\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.today {\r\n  background: var(--cal-soft);\r\n  border-color: transparent;\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.startRange,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.endRange,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.startRange:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.endRange:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.startRange:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.endRange:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected.today {\r\n  background: var(--cal-accent);\r\n  border-color: var(--cal-accent);\r\n  color: var(--cal-accent-foreground);\r\n}\r\n\r\n/* range middle — bg-accent, squared between the two ends */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.inRange {\r\n  background: var(--cal-soft);\r\n  border-color: transparent;\r\n  color: var(--cal-soft-foreground);\r\n  border-radius: 0;\r\n  box-shadow: -5px 0 0 var(--cal-soft), 5px 0 0 var(--cal-soft);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.prevMonthDay,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.nextMonthDay {\r\n  color: var(--cal-faint);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.flatpickr-disabled,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.flatpickr-disabled:hover {\r\n  color: var(--cal-faint);\r\n  background: transparent;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* week numbers */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-weekwrapper .flatpickr-weekday,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-weekwrapper span.flatpickr-day {\r\n  color: var(--cal-faint);\r\n}\r\n\r\n/* time */\r\n.flatpickr-calendar.mono-flatpickr.hasTime .flatpickr-time {\r\n  border-top: 1px solid var(--cal-border);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time input,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-time-separator,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-am-pm {\r\n  color: var(--cal-text);\r\n  background: transparent;\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time input:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time input:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-am-pm:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-am-pm:focus {\r\n  background: var(--cal-soft);\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n/* the inline calendar (`inline`) sits in the page flow, on the field's own surface */\r\n.flatpickr-calendar.mono-flatpickr.inline {\r\n  box-shadow: var(--mono-date-calendar-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent));\r\n}\r\n";
+var date_css_raw_default = "/* @unocss-include */\r\n\r\n/* flatpickr's base stylesheet. The calendar renders into <body>, so this must\r\n   live in the global bundle (dist/ui/index.css) — that's why date.css is\r\n   @imported from src/entries/index.css. */\r\n@import 'flatpickr/dist/flatpickr.css';\r\n\r\n/* =========================================================================\r\n   mono-date — the mono-input box (a port of Basecoat's `.input-group` with a\r\n   leading icon, basecoat-css@1.0.2, vega style) around a flatpickr field, plus\r\n   a calendar restyled in Basecoat's popover idiom.\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-date size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Start\">\r\n     <div mono-date mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Start</label>\r\n       <div mono-field>\r\n         <span mono-prefix><span mono-icon class=\"mono-icon i-mdi-calendar-outline\"></span></span>\r\n         <input mono-native type=\"text\" placeholder=\"Pick a date\" />\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds); the old classes\r\n   (`.mono-date.sm.filled`) are still emitted as inert hooks until 2.0 but no\r\n   rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-date]                                   ≡ .field (flex column gap-3)\r\n     [mono-date] > [mono-label]                    ≡ .field > label / .label\r\n     [mono-date] > [mono-field]                    ≡ .input-group (h-9 rounded-md border-input shadow-xs)\r\n     [mono-field] > [mono-prefix] > [mono-icon]    ≡ .input-group > span[data-align='start'] > svg (ps-2, size-4, muted)\r\n     [mono-field] > [mono-native]                  ≡ .input-group > input (borderless, ps-1.5 after an affix, text-sm)\r\n     [mono-field] > [mono-clear] > [mono-icon]     ≡ .input-group > button[data-align='end']:has(> svg) (ghost, size-6)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"error\"]               ≡ .input-group:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"success\"]             ≡ EXTENSION (the invalid pattern in --success)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (the --mono-control-height-* ladder)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .input-group)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .input-group: bottom edge only, no ring)\r\n     .flatpickr-calendar.mono-flatpickr            ≡ [data-popover] frame (bg-popover ring-1 ring-foreground/10 rounded-md shadow-md)\r\n                                                     + EXTENSION: shadcn Calendar values (Basecoat 1.0.2 ships no calendar)\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-field], [mono-prefix] > [mono-icon], [mono-native], [mono-clear] >\r\n   [mono-icon], [mono-message-wrap] > [mono-message=\"helper|error|success\"].\r\n\r\n   The calendar renders into <body> (both builds), so it is styled through\r\n   flatpickr's own classes under our `.mono-flatpickr` marker and reads the page\r\n   tokens directly; the element copies the field's accent onto it as\r\n   `--cal-accent` / `--cal-accent-foreground` so it follows the `color` prop.\r\n\r\n   FLAVORS set the same knobs as mono-input, renamed `--mono-date-*` (see\r\n   input.css) plus `--mono-date-calendar-{radius,shadow,ring,day-radius}`. Every\r\n   fallback here is vega's value.\r\n   ========================================================================= */\r\n\r\nmono-date {\r\n  display: block;\r\n}\r\n\r\n[mono-date] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-date-text: var(--mono-date-color, var(--mono-date-text, var(--foreground)));\r\n  --_mono-date-placeholder: var(--mono-date-placeholder, var(--muted-foreground));\r\n  --_mono-date-muted: var(--mono-date-muted, var(--muted-foreground));\r\n  --_mono-date-primary: var(--mono-date-primary, var(--_mono-date-primary-preset, var(--ring)));\r\n  --_mono-date-primary-foreground: var(--mono-date-primary-foreground, var(--_mono-date-primary-foreground-preset, var(--primary-foreground)));\r\n  --_mono-date-danger: var(--mono-date-danger, var(--destructive));\r\n  --_mono-date-success: var(--mono-date-success, var(--success));\r\n  --_mono-date-warning: var(--mono-date-warning, var(--warning));\r\n  --_mono-date-info: var(--mono-date-info, var(--info));\r\n  --_mono-date-teal: var(--mono-date-teal, var(--teal));\r\n  --_mono-date-purple: var(--mono-date-purple, var(--purple));\r\n  --_mono-date-neutral: var(--mono-date-neutral, var(--neutral));\r\n  --_mono-date-dark: var(--mono-date-dark, var(--dark));\r\n  --_mono-date-secondary: var(--mono-date-secondary, var(--muted-foreground));\r\n\r\n  /* ── the painted result — three tiers, base = .input-group (vega) ──────── */\r\n  --_mono-date-ring-color: var(--mono-date-ring-color, var(--mono-date-focus-color, var(--_mono-date-primary)));\r\n  --_mono-date-ring-width: var(--mono-date-ring-width, var(--_mono-date-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-date-ring-alpha: var(--mono-date-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-date-border-color: var(--mono-date-rest-border, var(--mono-date-border-color, var(--mono-date-border, var(--_mono-date-border-color-preset, var(--input)))));\r\n  --_mono-date-bg: var(--mono-date-bg, var(--mono-date-surface, var(--_mono-date-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-date-shadow: var(--mono-date-shadow, var(--_mono-date-shadow-preset, 0 0 #0000));\r\n  --_mono-date-affix-padding: var(--mono-date-affix-padding, var(--_mono-date-affix-padding-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-date>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md; > input px-2.5 text-sm ── */\r\n  --_mono-date-height: var(--mono-date-height-md, var(--mono-control-height-md));\r\n  --_mono-date-radius: var(--mono-date-radius-md, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-md, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-date-font-size: var(--mono-date-font-md, var(--mono-text-sm));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 6);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-date-gap, calc(var(--mono-spacing) * 3));\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-date-text);\r\n}\r\n\r\n[mono-date],\r\n[mono-date] *,\r\n[mono-date] *::before,\r\n[mono-date] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-date] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the field's painted height IS the token (tests/perf/field-heights)\r\n   EXTENSION: the shared --mono-control-height-* ladder; text follows .btn's steps\r\n   ========================================= */\r\n\r\n@media (width < 48rem) {\r\n  [mono-date]:is(:not([mono-size]), [mono-size=\"md\"]) {\r\n    --_mono-date-font-size: var(--mono-date-font-md, var(--mono-text-base));\r\n    --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-md, var(--mono-text-base--lh)));\r\n  }\r\n}\r\n\r\n[mono-date][mono-size=\"xs\"] {\r\n  --_mono-date-height: var(--mono-date-height-xs, var(--mono-control-height-xs));\r\n  --_mono-date-radius: var(--mono-date-radius-xs, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-xs, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-date-font-size: var(--mono-date-font-xs, var(--mono-text-xs));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 4);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-date][mono-size=\"sm\"] {\r\n  --_mono-date-height: var(--mono-date-height-sm, var(--mono-control-height-sm));\r\n  --_mono-date-radius: var(--mono-date-radius-sm, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-sm, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-date-font-size: var(--mono-date-font-sm, var(--mono-date-font-md, var(--mono-text-sm)));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 5);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-date][mono-size=\"lg\"] {\r\n  --_mono-date-height: var(--mono-date-height-lg, var(--mono-control-height-lg));\r\n  --_mono-date-radius: var(--mono-date-radius-lg, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-lg, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-date-font-size: var(--mono-date-font-lg, var(--mono-date-font-md, var(--mono-text-sm)));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-date][mono-size=\"xl\"] {\r\n  --_mono-date-height: var(--mono-date-height-xl, var(--mono-control-height-xl));\r\n  --_mono-date-radius: var(--mono-date-radius-xl, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-xl, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-date-font-size: var(--mono-date-font-xl, var(--mono-text-base));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 7);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n[mono-date][mono-size=\"xxl\"] {\r\n  --_mono-date-height: var(--mono-date-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-date-radius: var(--mono-date-radius-xxl, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-xxl, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 4))));\r\n  --_mono-date-font-size: var(--mono-date-font-xxl, var(--mono-text-lg));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 8);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\r\n   shadow-xs bg-transparent (dark:bg-input/30 via --mono-mode-surface) */\r\n[mono-date]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-date-bg-preset: var(--mono-date-outline-bg);\r\n  --_mono-date-border-color-preset: var(--mono-date-outline-border-color);\r\n  --_mono-date-side-border-color-preset: var(--mono-date-outline-side-border-color);\r\n  --_mono-date-shadow-preset: var(--mono-date-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-date-ring-width-preset: var(--mono-date-outline-ring-width);\r\n  --_mono-date-radius-preset: var(--mono-date-outline-radius);\r\n  --_mono-date-padding-x-preset: var(--mono-date-outline-padding-x);\r\n  --_mono-date-affix-padding-preset: var(--mono-date-outline-affix-padding);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .input-group */\r\n[mono-date][mono-variant=\"filled\"] {\r\n  --_mono-date-bg-preset: var(--mono-date-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-date-border-color-preset: transparent;\r\n  --_mono-date-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .input-group */\r\n[mono-date][mono-variant=\"underlined\"] {\r\n  --_mono-date-bg-preset: transparent;\r\n  --_mono-date-side-border-color-preset: transparent;\r\n  --_mono-date-shadow-preset: 0 0 #0000;\r\n  --_mono-date-ring-width-preset: 0px;\r\n  --_mono-date-radius-preset: 0;\r\n  --_mono-date-padding-x-preset: 0;\r\n  --_mono-date-affix-padding-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the accent: the focus ring + the calendar's\r\n   selected day. Primary is Basecoat's --ring for the ring and --primary for the\r\n   calendar (copied by the element as --cal-accent).\r\n   ========================================= */\r\n\r\n[mono-date]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-date-primary-preset: var(--ring);\r\n  --_mono-date-primary-foreground-preset: var(--primary-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--primary));\r\n}\r\n[mono-date][mono-color=\"secondary\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-secondary);\r\n  --_mono-date-primary-foreground-preset: var(--background);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-secondary));\r\n}\r\n[mono-date][mono-color=\"success\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-success);\r\n  --_mono-date-primary-foreground-preset: var(--success-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-success));\r\n}\r\n[mono-date][mono-color=\"danger\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-danger);\r\n  --_mono-date-primary-foreground-preset: var(--destructive-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-danger));\r\n}\r\n[mono-date][mono-color=\"warning\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-warning);\r\n  --_mono-date-primary-foreground-preset: var(--warning-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-warning));\r\n}\r\n[mono-date][mono-color=\"info\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-info);\r\n  --_mono-date-primary-foreground-preset: var(--info-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-info));\r\n}\r\n[mono-date][mono-color=\"teal\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-teal);\r\n  --_mono-date-primary-foreground-preset: var(--teal-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-teal));\r\n}\r\n[mono-date][mono-color=\"purple\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-purple);\r\n  --_mono-date-primary-foreground-preset: var(--purple-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-purple));\r\n}\r\n[mono-date][mono-color=\"neutral\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-neutral);\r\n  --_mono-date-primary-foreground-preset: var(--neutral-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-neutral));\r\n}\r\n[mono-date][mono-color=\"dark\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-dark);\r\n  --_mono-date-primary-foreground-preset: var(--dark-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-dark));\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n[mono-date] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: var(--mono-date-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-date-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-date-label-line-height, 1);\r\n  font-weight: var(--mono-date-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-date-label-text-transform, none);\r\n  letter-spacing: var(--mono-date-label-letter-spacing, normal);\r\n  color: var(--_mono-date-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-date][mono-disabled] > [mono-label],\r\n[mono-date]:has(> [mono-field] > [mono-native]:disabled) > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-date][mono-validation-state=\"error\"] > [mono-label] {\r\n  color: var(--_mono-date-danger);\r\n}\r\n\r\n[mono-date] [mono-required-mark] {\r\n  color: var(--_mono-date-danger);\r\n}\r\n\r\n/* `tooltip` prop — the info icon at the end of the label row (the label's\r\n   flex gap spaces it). `pointer-events` is restored because a disabled field\r\n   switches its label's off, and a disabled field is exactly where the reason\r\n   is worth a hover. Knobs: --mono-date-label-tooltip-size / -color / -opacity. */\r\n:where([mono-date]) > [mono-label] > [mono-label-tooltip] {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: var(--mono-date-label-tooltip-size, 1.1em);\r\n  color: var(--mono-date-label-tooltip-color, currentColor);\r\n  opacity: var(--mono-date-label-tooltip-opacity, 0.6);\r\n  border-radius: 9999px;\r\n  cursor: help;\r\n  pointer-events: auto;\r\n  outline: none;\r\n  transition: opacity 150ms ease;\r\n}\r\n\r\n:where([mono-date]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\r\n  opacity: 1;\r\n}\r\n\r\n:where([mono-date]) > [mono-label] > [mono-label-tooltip]:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n:where([mono-date]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n\r\n/* =========================================\r\n   The field — the bordered box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group */\r\n/* basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md border border-input\r\n   shadow-xs focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\r\n[mono-date] > [mono-field] {\r\n  --_mono-date-bc: var(--_mono-date-border-color);\r\n  --_mono-date-side-bc: var(--mono-date-side-border-color, var(--_mono-date-side-border-color-preset, var(--_mono-date-bc)));\r\n  --_mono-date-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-date-height);\r\n  padding-block: var(--mono-date-padding-y, 0);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-date-bc);\r\n  border-top-color: var(--_mono-date-side-bc);\r\n  border-inline-color: var(--_mono-date-side-bc);\r\n  border-radius: var(--_mono-date-radius);\r\n  background: var(--_mono-date-bg);\r\n  color: var(--_mono-date-text);\r\n  box-shadow: var(--_mono-date-ring), var(--_mono-date-shadow);\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-within {\r\n    --_mono-date-bc: var(--_mono-date-ring-color);\r\n    --_mono-date-ring: 0 0 0 var(--_mono-date-ring-width) color-mix(in oklab, var(--_mono-date-ring-color) var(--_mono-date-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 */\r\n[mono-date][mono-validation-state=\"error\"] > [mono-field],\r\n[mono-date] > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\r\n  --_mono-date-bc: var(--mono-mode-invalid-border);\r\n  --_mono-date-ring: 0 0 0 var(--_mono-date-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — success is the invalid pattern in --success */\r\n[mono-date][mono-validation-state=\"success\"] > [mono-field] {\r\n  --_mono-date-bc: color-mix(in oklab, var(--_mono-date-success) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-date-ring: 0 0 0 var(--_mono-date-ring-width) color-mix(in oklab, var(--_mono-date-success) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — readonly: a muted surface */\r\n[mono-date][mono-readonly] > [mono-field] {\r\n  background: var(--mono-date-readonly-bg, var(--muted));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:has(> :is(input, textarea, select, [data-control]):disabled) — opacity-50 */\r\n[mono-date][mono-disabled] > [mono-field],\r\n[mono-date]:not([mono-readonly]) > [mono-field]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  background: var(--mono-date-disabled-bg, var(--_mono-date-bg));\r\n}\r\n\r\n/* =========================================\r\n   The native input (flatpickr's altInput takes the same rule: it replaces the\r\n   native in the DOM and inherits its class + attributes)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group > :is(input, textarea, select, [data-control]) */\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(input, select, [data-control]) — px-2.5 py-1 text-sm */\r\n[mono-date] [mono-native],\r\n[mono-date] [mono-field] > input.flatpickr-input.altInput {\r\n  display: block;\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-date-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-date-font-size);\r\n  line-height: var(--_mono-date-line-height);\r\n  padding-inline: var(--_mono-date-padding-x);\r\n  padding-block: 0;\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-date-placeholder);\r\n  }\r\n\r\n  &:disabled {\r\n    pointer-events: none;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:read-only {\r\n    cursor: inherit;\r\n  }\r\n\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) — ps-1.5 */\r\n[mono-date] > [mono-field]:has(> [mono-prefix]:not([mono-empty])) > :is([mono-native], input.flatpickr-input.altInput) {\r\n  padding-inline-start: var(--mono-date-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n[mono-date] > [mono-field]:has(> [mono-clear]) > :is([mono-native], input.flatpickr-input.altInput) {\r\n  padding-inline-end: var(--mono-date-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* =========================================\r\n   The leading icon\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(span, [role='group'], header, footer), .input-group > :is(svg, kbd, .popover, .dropdown-menu)\r\n   — text-muted-foreground select-none, svg size-4; [data-align='start'] ps-2 */\r\n[mono-date] [mono-prefix] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  padding-inline-start: var(--_mono-date-affix-padding);\r\n  color: var(--_mono-date-muted);\r\n  user-select: none;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-date] [mono-prefix] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-date-affix-icon);\r\n  height: var(--_mono-date-affix-icon);\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* =========================================\r\n   Clear button — a ghost icon button in the end slot\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(button, [role='group'] > button, header > button, footer > button):has(> svg):not(:has(> :not(svg)))\r\n   — size-6 rounded-[calc(var(--radius)-5px)] p-0 shadow-none, svg size-3.5; me-1 */\r\n[mono-date] [mono-clear] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-date-clear);\r\n  height: var(--_mono-date-clear);\r\n  padding: 0;\r\n  margin: 0;\r\n  margin-inline-end: var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: var(--mono-date-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-date-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-visible {\r\n    box-shadow: 0 0 0 var(--_mono-date-ring-width) color-mix(in oklab, var(--_mono-date-ring-color) var(--_mono-date-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted hover:text-foreground */\r\n@media (hover: hover) {\r\n  [mono-date] [mono-clear]:hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-date-text);\r\n  }\r\n}\r\n\r\n[mono-date] [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-date-clear-glyph);\r\n  height: var(--_mono-date-clear-glyph);\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Message\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p */\r\n[mono-date] > [mono-message-wrap] {\r\n  display: block;\r\n}\r\n\r\n[mono-date] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-date] [mono-message] {\r\n  font-size: var(--mono-date-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-date-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-date-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-date] [mono-message=\"error\"] {\r\n  color: var(--_mono-date-danger);\r\n}\r\n\r\n[mono-date] [mono-message=\"success\"] {\r\n  color: var(--_mono-date-success);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-date] > [mono-field],\r\n  [mono-date] [mono-clear] {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   flatpickr calendar — restyled in Basecoat's idiom\r\n   -----------------------------------------\r\n   The calendar renders into <body>, so it reads the page tokens and cannot see\r\n   the field's resolvers; the element copies the field's accent onto it as\r\n   `--cal-accent` / `--cal-accent-foreground` (inline) so it follows the `color`\r\n   prop. Every rule is scoped to our `.mono-flatpickr` marker; flatpickr's own\r\n   geometry (day cells, container widths) is kept — only colour, radius,\r\n   typography and the frame are ours.\r\n\r\n   basecoat@1.0.2 styles/vega.css .select:not(select) [data-popover] — the frame:\r\n   bg-popover text-popover-foreground ring-1 ring-foreground/10 rounded-md\r\n   shadow-md. EXTENSION: the day / caption / nav values are shadcn's Calendar\r\n   (Basecoat 1.0.2 ships no calendar): day size-8 rounded-md text-sm,\r\n   hover / today / in-range bg-accent text-accent-foreground, selected\r\n   bg-primary text-primary-foreground, outside days text-muted-foreground/50,\r\n   caption text-sm font-medium, weekdays text-muted-foreground text-[0.8rem].\r\n   ========================================= */\r\n.flatpickr-calendar.mono-flatpickr {\r\n  --cal-bg: var(--mono-date-calendar-bg, var(--popover));\r\n  --cal-text: var(--mono-date-calendar-color, var(--popover-foreground));\r\n  --cal-muted: var(--muted-foreground);\r\n  --cal-faint: color-mix(in oklab, var(--muted-foreground) 50%, transparent);\r\n  --cal-border: var(--border);\r\n  --cal-soft: var(--accent);\r\n  --cal-soft-foreground: var(--accent-foreground);\r\n  --cal-accent: var(--primary);\r\n  --cal-accent-foreground: var(--primary-foreground);\r\n  --cal-radius: var(--mono-date-calendar-day-radius, var(--mono-radius-md));\r\n\r\n  background: var(--cal-bg);\r\n  border: 0;\r\n  border-radius: var(--mono-date-calendar-radius, var(--mono-radius-md));\r\n  box-shadow: var(--mono-date-calendar-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-date-calendar-shadow, var(--mono-shadow-md));\r\n  color: var(--cal-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-text-sm);\r\n  line-height: var(--mono-text-sm--lh);\r\n}\r\n\r\n/* a popover has no pointer arrow */\r\n.flatpickr-calendar.mono-flatpickr::before,\r\n.flatpickr-calendar.mono-flatpickr::after {\r\n  display: none;\r\n}\r\n\r\n/* months / header — text-sm font-medium */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-month,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-current-month,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-current-month input.cur-year {\r\n  color: var(--cal-text);\r\n  fill: var(--cal-text);\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n/* nav — .btn[data-variant='outline'][data-size='icon-sm']: size-7 rounded-md\r\n   border-border bg-background hover:bg-muted, painted flat here */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month {\r\n  color: var(--cal-muted);\r\n  fill: var(--cal-muted);\r\n  border-radius: var(--cal-radius);\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month svg,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month svg {\r\n  fill: currentColor;\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month:hover {\r\n  background: var(--cal-soft);\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month:hover svg,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month:hover svg {\r\n  fill: var(--cal-soft-foreground);\r\n}\r\n\r\n/* month dropdown — a native <select>. Its popup list is drawn by the browser\r\n   from the select's OWN background-color and the option colours (a transparent\r\n   select falls back to the OS palette, which is what mismatched the dark popover),\r\n   so the select carries the popover surface and never changes it on hover. */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months {\r\n  background: var(--cal-bg);\r\n  color: var(--cal-text);\r\n  color-scheme: inherit;\r\n  font-weight: var(--mono-font-weight-medium);\r\n  border-radius: var(--cal-radius);\r\n  transition-property: color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months:hover {\r\n  background: var(--cal-bg);\r\n  color: var(--cal-accent);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {\r\n  background: var(--cal-bg);\r\n  color: var(--cal-text);\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:checked {\r\n  background: var(--cal-soft);\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n/* year stepper */\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper:hover {\r\n  background: var(--cal-soft);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span {\r\n  border-color: var(--cal-border);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span:hover {\r\n  background: var(--cal-soft);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span.arrowUp::after {\r\n  border-bottom-color: var(--cal-muted);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span.arrowDown::after {\r\n  border-top-color: var(--cal-muted);\r\n}\r\n\r\n/* weekdays — text-muted-foreground text-[0.8rem] font-normal */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-weekdays {\r\n  background: transparent;\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr span.flatpickr-weekday {\r\n  background: transparent;\r\n  color: var(--cal-muted);\r\n  font-size: 0.8rem;\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n/* days — rounded-md text-sm; hover bg-accent; today bg-accent; selected bg-primary */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day {\r\n  color: var(--cal-text);\r\n  border: 1px solid transparent;\r\n  border-radius: var(--cal-radius);\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day:focus {\r\n  background: var(--cal-soft);\r\n  border-color: transparent;\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.today {\r\n  background: var(--cal-soft);\r\n  border-color: transparent;\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.startRange,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.endRange,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.startRange:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.endRange:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.startRange:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.endRange:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected.today {\r\n  background: var(--cal-accent);\r\n  border-color: var(--cal-accent);\r\n  color: var(--cal-accent-foreground);\r\n}\r\n\r\n/* range middle — bg-accent, squared between the two ends */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.inRange {\r\n  background: var(--cal-soft);\r\n  border-color: transparent;\r\n  color: var(--cal-soft-foreground);\r\n  border-radius: 0;\r\n  box-shadow: -5px 0 0 var(--cal-soft), 5px 0 0 var(--cal-soft);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.prevMonthDay,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.nextMonthDay {\r\n  color: var(--cal-faint);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.flatpickr-disabled,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.flatpickr-disabled:hover {\r\n  color: var(--cal-faint);\r\n  background: transparent;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* week numbers */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-weekwrapper .flatpickr-weekday,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-weekwrapper span.flatpickr-day {\r\n  color: var(--cal-faint);\r\n}\r\n\r\n/* time */\r\n.flatpickr-calendar.mono-flatpickr.hasTime .flatpickr-time {\r\n  border-top: 1px solid var(--cal-border);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time input,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-time-separator,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-am-pm {\r\n  color: var(--cal-text);\r\n  background: transparent;\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time input:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time input:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-am-pm:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-am-pm:focus {\r\n  background: var(--cal-soft);\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n/* the inline calendar (`inline`) sits in the page flow, on the field's own surface */\r\n.flatpickr-calendar.mono-flatpickr.inline {\r\n  box-shadow: var(--mono-date-calendar-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent));\r\n}\r\n\r\n/* =========================================\r\n   label-position — the slots form/label-position.css reads\r\n   (top / notched / left / right; public knobs: --mono-date-label-width,\r\n   -label-side-gap, -label-notch-font-size, -label-notch-bg)\r\n   ========================================= */\r\n\r\n[mono-date][mono-label-position] {\r\n  --_mono-lp-width: var(--mono-date-label-width, auto);\r\n  --_mono-lp-gap: var(--mono-date-label-side-gap, calc(var(--mono-spacing) * 3));\r\n  --_mono-lp-height: var(--_mono-date-height);\r\n  --_mono-lp-box-min: var(--_mono-date-height);\r\n  --_mono-lp-padding-x: var(--_mono-date-padding-x);\r\n  --_mono-lp-padding-y: 0px;\r\n  --_mono-lp-font: var(--mono-date-label-notch-font-size, var(--mono-text-xs));\r\n  --_mono-lp-notch-bg: var(--mono-date-label-notch-bg, var(--background));\r\n  --_mono-lp-field-bg: var(--_mono-date-bg);\r\n}\r\n";
 
 //#endregion
 //#region src/components/date/mono-date.shadow.ts
@@ -681,7 +742,7 @@ let MonoDateShadow = class MonoDateShadow extends MonoDateCore(LitElement) {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(SHADOW_DATE_CSS, { host: "mono-date" }))];
+		this.styles = [unsafeCSS(toShadowCss(SHADOW_DATE_CSS + label_position_css_raw_default + field_tooltip_css_raw_default + field_validation_css_raw_default, { host: "mono-date" }))];
 	}
 	connectedCallback() {
 		super.connectedCallback();

package/dist/ui/shadow/drawer.js

@@ -1,8 +1,8 @@
 import { a as __decorate, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../../breakpoints-DllybT82.js";
-import { a as unregisterPopupLayer, n as refreshPopupStack, r as registerPopupLayer, t as getOpenPopupLayers } from "../../popup-stack-De05Y-mJ.js";
-import { i as pathOwnedBy } from "../../popup-portal-HWhkd7oy.js";
+import { i as registerPopupLayer, o as unregisterPopupLayer, r as refreshPopupStack, t as getOpenPopupLayers } from "../../popup-stack-C64WCuXq.js";
+import { i as pathOwnedBy } from "../../popup-portal-C8ttHDRX.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { property, query, state } from "lit/decorators.js";
@@ -399,6 +399,15 @@ const MonoDrawerCore = (superClass) => {
 				this._outsideBound = false;
 			}
 		}
+		/**
+		* PopupLayer hook — the path lands in this drawer: the host, its render root,
+		* or a popup opened from within. The same test `_onOutsideClick` uses; the stack
+		* asks it so a dropdown open BELOW this drawer leaves its clicks alone.
+		*/
+		containsEventPath(path) {
+			const root = this.renderRoot instanceof Element ? this.renderRoot : null;
+			return pathOwnedBy(path, root ? [this, root] : [this]);
+		}
 		/** Body-scroll lock is wanted while this drawer is open and `lockScroll` is set. */
 		get lockBodyScroll() {
 			return this.lockScroll;