@mono-lit/helper 0.0.1 → 0.0.3

package/dist/ui/chip.js

@@ -1,11 +1,12 @@
-import { n as defineMonoElement, t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { n as bucketHasContent, r as captureLightSlots, s as placeSlotNode } from "../light-slots-DW1WgfgT.js";
+import { n as defineMonoElement, t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { n as bucketHasContent, r as captureLightSlots, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
+
 //#region src/components/chip/chip-core.ts
 /**
 * `MonoChipCore` — all render-mode-agnostic logic for `mono-chip`: reactive
@@ -19,7 +20,7 @@ import { when } from "lit/directives/when.js";
 * SSR-safe: no `document`/`window` access; `_chipElement` (`@query`) is lazy and
 * `focus/blur/click` only run client-side.
 */
-var MonoChipCore = (superClass) => {
+const MonoChipCore = (superClass) => {
 	class MonoChipCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -266,19 +267,21 @@ var MonoChipCore = (superClass) => {
 	__decorate([query("div > span, div > a")], MonoChipCoreClass.prototype, "_chipElement", void 0);
 	return MonoChipCoreClass;
 };
+
 //#endregion
-//#region src/components/chip/chip.css?raw
-var chip_default = "/* =========================================================================\r\n   mono-chip — a port of Basecoat's `.badge` (basecoat-css@1.0.2, vega style).\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-chip size=\"lg\" color=\"success\" variant=\"solid\" label=\"Active\" dot>\r\n     <span mono-chip mono-size=\"lg\" mono-color=\"success\" mono-variant=\"solid\" mono-has-dot>\r\n       <span mono-main>\r\n         <span mono-content>\r\n           <span mono-dot></span>\r\n           <span mono-label>Active</span>\r\n           <button mono-close><span mono-glyph class=\"i-mdi-close\"></span></button>\r\n         </span>\r\n       </span>\r\n     </span>\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])` = soft, no\r\n   `mono-rounded` = the pill). The element renders these on its root (both\r\n   builds) plus the states `mono-has-dot` (the dot PART is `mono-dot`, so the state\r\n   spells itself out) / `mono-removable` / `mono-clickable` /\r\n   `mono-disabled` / `mono-selected` and `mono-icon-position=\"right\"`. The old\r\n   classes (`.mono-chip.md.soft-primary`, `.chip-label`, `.chip-close`) are\r\n   still emitted as inert hooks until 2.0 but no rule here reads them — except\r\n   `rounded-<step>`, which is GONE: that is Tailwind/UnoCSS's own utility\r\n   namespace, so on a page shipping those it was never inert (it rounded the\r\n   chip's outer box). Use `mono-rounded` / the `rounded` prop.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-chip]                   ≡ the layout box only — NOT painted (see below)\r\n     [mono-main]                   ≡ .badge (inline-flex w-fit shrink-0 items-center\r\n                                     justify-center overflow-hidden whitespace-nowrap,\r\n                                     h-5 gap-1 rounded-4xl border border-transparent\r\n                                     px-2 py-0.5 text-xs font-medium transition-all,\r\n                                     focus-visible:border-ring ring-[3px] ring-ring/50)\r\n     [mono-variant=\"solid\"]        ≡ .badge[data-variant='primary'] (bg-c text-c-foreground,\r\n                                     [a]:hover:bg-c/80) — generalised to every hue\r\n     [mono-variant=\"soft\"]         ≡ .badge[data-variant='destructive'] (bg-c/10 text-c,\r\n                                     [a]:hover:bg-c/20, dark bg-c/20) — generalised; the DEFAULT\r\n     [mono-variant=\"outline\"]      ≡ .badge[data-variant='outline'] (border-border text-foreground,\r\n                                     [a]:hover:bg-muted) + the hue on the edge and the ink\r\n     [mono-color=\"secondary\"]      ≡ .badge[data-variant='secondary'] (the muted surface pair)\r\n     [mono-size=\"md\"]              ≡ .badge's own h-5 px-2 text-xs; the other five are EXTENSION\r\n                                     (Basecoat ships one badge size)\r\n     [mono-rounded=\"…\"]            ≡ EXTENSION (the shared corner ladder; unset = rounded-4xl)\r\n     [mono-close]                  ≡ .combobox-chip-remove (opacity-50 hover:opacity-100, svg size-3.5)\r\n     [mono-has-dot] / [mono-dot] / [mono-selected] / [mono-clickable] ≡ EXTENSION\r\n     [mono-disabled]               ≡ .btn disabled:opacity-50\r\n     [mono-status-dot]             ≡ EXTENSION (the standalone status-dot helper)\r\n\r\n   WHY THE ROOT PAINTS NOTHING. `[mono-chip]` is also what a FIELD's internal\r\n   chip carries: `<mono-tag-input>` renders Basecoat combobox chips as\r\n   `[mono-chip] > [mono-chip-main] > …` and paints them in tag-input.css. Those\r\n   rules are `[mono-tag-input] [mono-chip]` = (0,2,0) and win over this sheet,\r\n   but only where they overlap — so this sheet keeps the root to layout plus\r\n   custom properties (which a field's rules simply don't read) and paints the\r\n   badge on `[mono-main]`, a part name a field chip does not have. The two never\r\n   collide, and a real `<mono-chip>` slotted INTO a field keeps its own look.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING\r\n   rule is exactly one attribute strong — `:where([mono-chip]) [mono-label]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier and win over it.\r\n\r\n   Inner parts: [mono-main] > [mono-content] > [mono-dot] / [data-mono-slot=icon]\r\n   / [mono-label] / [mono-close] > [mono-glyph].\r\n\r\n   FLAVORS set `--mono-chip-{radius,border-width,font-weight,letter-spacing,\r\n   text-transform}` and the VARIANT-scoped paint knobs\r\n   `--mono-chip-{soft,solid,outline}-{bg,color,border-color}` (the shared\r\n   `--mono-chip-bg` / `-color` is the CONSUMER's blanket override and repaints\r\n   all three looks at once)` and the per-size `-height-<size>` /\r\n   `-padding-x-<size>` / `-gap-<size>` / `-font-size-<size>` /\r\n   `-glyph-size-<size>` (the size-agnostic twin of each of those is the\r\n   CONSUMER's override — a flavor writing it would flatten the whole ladder);\r\n   every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.badge\"`).\r\n   ========================================================================= */\r\n\r\nmono-chip {\r\n  display: inline-block;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette. NOTHING here paints (see the header).\r\n   ========================================= */\r\n\r\n[mono-chip] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ──────────── */\r\n  --_mono-chip-primary: var(--mono-chip-primary, var(--primary));\r\n  --_mono-chip-primary-foreground: var(--mono-chip-primary-foreground, var(--primary-foreground));\r\n  --_mono-chip-secondary: var(--mono-chip-secondary, var(--secondary));\r\n  --_mono-chip-secondary-foreground: var(--mono-chip-secondary-foreground, var(--secondary-foreground));\r\n  --_mono-chip-success: var(--mono-chip-success, var(--success));\r\n  --_mono-chip-success-foreground: var(--mono-chip-success-foreground, var(--success-foreground));\r\n  --_mono-chip-danger: var(--mono-chip-danger, var(--destructive));\r\n  --_mono-chip-danger-foreground: var(--mono-chip-danger-foreground, var(--destructive-foreground));\r\n  --_mono-chip-warning: var(--mono-chip-warning, var(--warning));\r\n  --_mono-chip-warning-foreground: var(--mono-chip-warning-foreground, var(--warning-foreground));\r\n  --_mono-chip-info: var(--mono-chip-info, var(--info));\r\n  --_mono-chip-info-foreground: var(--mono-chip-info-foreground, var(--info-foreground));\r\n  --_mono-chip-teal: var(--mono-chip-teal, var(--teal));\r\n  --_mono-chip-teal-foreground: var(--mono-chip-teal-foreground, var(--teal-foreground));\r\n  --_mono-chip-purple: var(--mono-chip-purple, var(--purple));\r\n  --_mono-chip-purple-foreground: var(--mono-chip-purple-foreground, var(--purple-foreground));\r\n  --_mono-chip-neutral: var(--mono-chip-neutral, var(--neutral));\r\n  --_mono-chip-neutral-foreground: var(--mono-chip-neutral-foreground, var(--neutral-foreground));\r\n  --_mono-chip-dark: var(--mono-chip-dark, var(--dark));\r\n  --_mono-chip-dark-foreground: var(--mono-chip-dark-foreground, var(--dark-foreground));\r\n\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border\r\n     border-transparent px-2 py-0.5 text-xs font-medium, [&>svg]:size-3 */\r\n  --_mono-chip-height: var(--mono-chip-height, var(--_mono-chip-height-preset, var(--mono-chip-height-md, calc(var(--mono-spacing) * 5))));\r\n  --_mono-chip-padding-x: var(--mono-chip-padding-x, var(--_mono-chip-padding-x-preset, var(--mono-chip-padding-x-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-chip-gap: var(--mono-chip-gap, var(--_mono-chip-gap-preset, var(--mono-chip-gap-md, var(--mono-spacing))));\r\n  --_mono-chip-font-size: var(--mono-chip-font-size, var(--_mono-chip-font-size-preset, var(--mono-chip-font-size-md, var(--mono-text-xs))));\r\n  --_mono-chip-glyph-size: var(--mono-chip-glyph-size, var(--_mono-chip-glyph-size-preset, var(--mono-chip-glyph-size-md, calc(var(--mono-spacing) * 3))));\r\n  /* `rounded-4xl` is the pill; a `rounded` step writes the preset tier, and an\r\n     explicit --mono-chip-radius still wins over the prop */\r\n  --_mono-chip-radius: var(--mono-chip-radius, var(--_mono-chip-radius-preset, var(--mono-radius-4xl)));\r\n  --_mono-chip-border-width: var(--mono-chip-border-width, var(--mono-border-width));\r\n  --_mono-chip-font-weight: var(--mono-chip-font-weight, var(--mono-font-weight-medium));\r\n\r\n  --_mono-chip-ring-color: var(--mono-chip-ring-color, var(--ring));\r\n  --_mono-chip-ring-width: var(--mono-chip-ring-width, var(--mono-ring-width));\r\n  --_mono-chip-ring-alpha: var(--mono-chip-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  max-width: 100%;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* =========================================\r\n   The badge box — `.badge`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — inline-flex w-fit shrink-0\r\n   items-center justify-center overflow-hidden whitespace-nowrap\r\n   [&>svg]:pointer-events-none */\r\n:where([mono-chip]) [mono-main] {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  box-sizing: border-box;\r\n  height: var(--_mono-chip-height);\r\n  gap: var(--_mono-chip-gap);\r\n  padding-inline: var(--_mono-chip-padding-x);\r\n  border: var(--_mono-chip-border-width) solid transparent;\r\n  border-radius: var(--_mono-chip-radius);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-chip-font-size);\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  letter-spacing: var(--mono-chip-letter-spacing, normal);\r\n  text-transform: var(--mono-chip-text-transform, none);\r\n  line-height: 1;\r\n  text-decoration: none;\r\n  user-select: none;\r\n  vertical-align: middle;\r\n  /* `transition-all`, narrowed to what a chip actually animates */\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    opacity var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-ring, 0 0 #0000);\r\n}\r\n\r\n/* A LINK chip is a control, not prose. Host stylesheets routinely paint a bare\r\n   `a` — VitePress's own `.vp-doc a` sets a weight and an underline at (0,1,1) —\r\n   and that out-specifies the (0,1,0) part rule above, so the anchor form\r\n   restates what such a rule hijacks, one attribute heavier. Measured: the docs'\r\n   light link chip came out at weight 500 while the shadow one, beyond that\r\n   sheet's reach, kept the component's own 600. The colour needs no restatement:\r\n   every variant rule is already (0,2,0).\r\n\r\n   DEVIATION from the specificity contract, for this form only — a `cssClass.main`\r\n   utility that sets font-weight or text-decoration on a LINK chip now needs\r\n   `!important` (or the `--mono-chip-font-weight` knob). */\r\n[mono-chip] a[mono-main] {\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  text-decoration: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n:where([mono-chip]) [mono-main]:focus-visible {\r\n  outline: none;\r\n  border-color: var(--_mono-chip-ring-color);\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-ring-color) var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE badge; md is its `.badge`\r\n   ========================================= */\r\n\r\n/* The ladder steps the same way the control heights do: 4px of box and one type\r\n   step per size, with md pinned to vega's h-5 / px-2 / text-xs. */\r\n[mono-chip][mono-size=\"xs\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xs, calc(var(--mono-spacing) * 4));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xs, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xs, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xs, calc(var(--mono-spacing) * 2.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"sm\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-sm, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-sm, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-sm, calc(var(--mono-spacing) * 0.875));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-sm, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-sm, calc(var(--mono-spacing) * 2.75));\r\n}\r\n\r\n[mono-chip][mono-size=\"lg\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-lg, calc(var(--mono-spacing) * 6));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-lg, calc(var(--mono-spacing) * 1.25));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-lg, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-lg, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"xl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xl, calc(var(--mono-spacing) * 7));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xl, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xl, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xl, calc(var(--mono-spacing) * 4));\r\n}\r\n\r\n[mono-chip][mono-size=\"xxl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xxl, calc(var(--mono-spacing) * 8));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xxl, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xxl, var(--mono-text-base));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xxl, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n/* =========================================\r\n   Rounded — EXTENSION: the shared corner ladder. Unset is vega's rounded-4xl.\r\n   ========================================= */\r\n\r\n[mono-chip][mono-rounded=\"none\"] { --_mono-chip-radius-preset: 0; }\r\n[mono-chip][mono-rounded=\"xs\"] { --_mono-chip-radius-preset: calc(var(--mono-radius-sm) / 2); }\r\n[mono-chip][mono-rounded=\"sm\"] { --_mono-chip-radius-preset: var(--mono-radius-sm); }\r\n[mono-chip][mono-rounded=\"md\"] { --_mono-chip-radius-preset: var(--mono-radius-md); }\r\n[mono-chip][mono-rounded=\"lg\"] { --_mono-chip-radius-preset: var(--mono-radius-lg); }\r\n[mono-chip][mono-rounded=\"xl\"] { --_mono-chip-radius-preset: var(--mono-radius-xl); }\r\n[mono-chip][mono-rounded=\"xxl\"] { --_mono-chip-radius-preset: var(--mono-radius-2xl); }\r\n[mono-chip][mono-rounded=\"full\"] { --_mono-chip-radius-preset: var(--mono-radius-full); }\r\n\r\n/* =========================================\r\n   Colours — each publishes the pair the variants read\r\n   ========================================= */\r\n\r\n[mono-chip][mono-color=\"primary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='secondary'] —\r\n   bg-secondary text-secondary-foreground: a SURFACE pair, not a hue, so its\r\n   `soft` and `solid` land on the same muted plate (shadcn's meaning). */\r\n[mono-chip][mono-color=\"secondary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-secondary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-secondary-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"success\"] {\r\n  --_mono-chip-c: var(--_mono-chip-success);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-success-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"danger\"] {\r\n  --_mono-chip-c: var(--_mono-chip-danger);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-danger-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"warning\"] {\r\n  --_mono-chip-c: var(--_mono-chip-warning);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-warning-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"info\"] {\r\n  --_mono-chip-c: var(--_mono-chip-info);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-info-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"teal\"] {\r\n  --_mono-chip-c: var(--_mono-chip-teal);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-teal-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"purple\"] {\r\n  --_mono-chip-c: var(--_mono-chip-purple);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-purple-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"neutral\"] {\r\n  --_mono-chip-c: var(--_mono-chip-neutral);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-neutral-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"dark\"] {\r\n  --_mono-chip-c: var(--_mono-chip-dark);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-dark-foreground);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `soft` is the DEFAULT and is Basecoat's tonal badge.\r\n   basecoat@1.0.2 styles/vega.css .badge[data-variant='destructive'] —\r\n   bg-destructive/10 text-destructive dark:bg-destructive/20 (the alpha pair\r\n   travels as --mono-mode-tint, which is what makes it dark-mode correct). */\r\n[mono-chip]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint), transparent)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-soft-border-color, transparent));\r\n}\r\n\r\n/* `secondary` is a surface, not a hue: tinting it would wash it out, so the\r\n   soft chip wears the plate itself (`.badge[data-variant='secondary']`). */\r\n[mono-chip][mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, var(--_mono-chip-secondary)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-secondary-foreground)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — bg-primary text-primary-foreground */\r\n[mono-chip][mono-variant=\"solid\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-solid-bg, var(--_mono-chip-c)));\r\n  color: var(--mono-chip-color, var(--mono-chip-solid-color, var(--_mono-chip-c-foreground)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-solid-border-color, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='outline'] — border-border\r\n   text-foreground — EXTENSION: the edge and the ink take the role's colour so\r\n   `outline` reads as the same family as the other two. */\r\n[mono-chip][mono-variant=\"outline\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-outline-bg, transparent));\r\n  color: var(--mono-chip-color, var(--mono-chip-outline-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-outline-border-color, var(--_mono-chip-c)));\r\n}\r\n\r\n[mono-chip][mono-color=\"secondary\"][mono-variant=\"outline\"] > [mono-main] {\r\n  color: var(--mono-chip-color, var(--foreground));\r\n  border-color: var(--mono-chip-border-color, var(--border));\r\n}\r\n\r\n/* =========================================\r\n   Interactive — a clickable / linked chip\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — [a]:hover:bg-primary/80: only a LINK badge reacts upstream; ours also\r\n   reacts when `clickable` made it a button (same gesture, no href). */\r\n[mono-chip][mono-clickable] > [mono-main] {\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"solid\"] > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) 80%, transparent);\r\n  }\r\n\r\n  /* .badge[data-variant='destructive'] — [a]:hover:bg-destructive/20 */\r\n  [mono-chip][mono-clickable]:not([mono-disabled]):is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint-hover), transparent);\r\n  }\r\n\r\n  /* `secondary` is a plate, not a tint: darken it the way the secondary button\r\n     does (basecoat@1.0.2 styles/vega.css .btn[data-variant='secondary']). */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklch, var(--_mono-chip-secondary), var(--foreground) 5%);\r\n  }\r\n\r\n  /* .badge[data-variant='outline'] — [a]:hover:bg-muted */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"outline\"] > [mono-main]:hover {\r\n    background-color: var(--mono-mode-ghost-hover);\r\n  }\r\n}\r\n\r\n/* EXTENSION — `selected` rings the chip in its own colour, the one state\r\n   Basecoat's badge has no equivalent for (it is not a toggle upstream). */\r\n[mono-chip][mono-selected] > [mono-main] {\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-c) var(--_mono-chip-ring-alpha), transparent);\r\n  border-color: var(--_mono-chip-c);\r\n}\r\n\r\n/* basecoat@1.0.2 components/button.css .btn — disabled:pointer-events-none\r\n   disabled:opacity-50 */\r\n[mono-chip][mono-disabled] > [mono-main] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Inner content\r\n   ========================================= */\r\n\r\n:where([mono-chip]) [mono-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n  line-height: 1;\r\n}\r\n\r\n:where([mono-chip]) [mono-label] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1;\r\n}\r\n\r\n/* EXTENSION — the leading status dot. It is the role's colour at full strength,\r\n   which reads on both the tinted `soft` plate and the solid one (`currentColor`\r\n   there). */\r\n:where([mono-chip]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  height: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* The shadow build renders the icon wrapper on every chip and marks the empty\r\n   one; this hides it so both builds measure the same content box. */\r\n[mono-chip] [data-mono-slot=\"icon\"][mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* `[&>svg]:size-3!` — our icon is a slotted element or a mask span, sized by\r\n   the same token as the close glyph */\r\n:where([mono-chip]) [data-mono-slot=\"icon\"],\r\n:where([mono-chip]) [mono-main] > svg {\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-chip]) [data-mono-slot=\"icon\"] > * {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, [&>svg]:size-3.5 — the same affordance a field chip uses */\r\n:where([mono-chip]) [mono-close] {\r\n  appearance: none;\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-radius-full);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  opacity: 0.5;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-close-ring, 0 0 #0000);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-chip]) [mono-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n:where([mono-chip]) [mono-close]:focus-visible {\r\n  outline: none;\r\n  opacity: 1;\r\n  --_mono-chip-close-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, currentColor var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n:where([mono-chip]) [mono-close] :is([mono-glyph], svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n:where([mono-chip]) [mono-close] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Status dot — EXTENSION: `<mono-status-dot>`, a label with a state dot\r\n   ========================================= */\r\n\r\nmono-status-dot {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-status-dot] {\r\n  --_mono-status-dot-c: var(--mono-status-dot-color, var(--success));\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--mono-status-dot-gap, calc(var(--mono-spacing) * 1.5));\r\n  font-family: inherit;\r\n  font-size: var(--mono-status-dot-font-size, var(--mono-text-xs));\r\n  font-weight: var(--mono-status-dot-font-weight, var(--mono-font-weight-medium));\r\n  line-height: 1;\r\n  color: var(--_mono-status-dot-c);\r\n}\r\n\r\n[mono-status-dot][mono-status=\"offline\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--neutral)); }\r\n[mono-status-dot][mono-status=\"busy\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--destructive)); }\r\n[mono-status-dot][mono-status=\"away\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--warning)); }\r\n/* `custom` takes the colour from the `color` prop, which the element writes\r\n   inline as --mono-status-dot-color */\r\n[mono-status-dot][mono-status=\"custom\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--primary)); }\r\n\r\n:where([mono-status-dot]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  height: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n[mono-status-dot][mono-pulse] [mono-dot] {\r\n  animation: mono-status-pulse 1.8s var(--mono-ease) infinite;\r\n}\r\n\r\n@keyframes mono-status-pulse {\r\n  0%,\r\n  100% {\r\n    box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 40%, transparent);\r\n  }\r\n\r\n  50% {\r\n    box-shadow: 0 0 0 5px color-mix(in oklab, currentColor 0%, transparent);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-chip]) :is([mono-main], [mono-close]) {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-status-dot][mono-pulse] [mono-dot] {\r\n    animation: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\chip\chip.css?raw.js
+var chip_css_raw_default = "/* =========================================================================\r\n   mono-chip — a port of Basecoat's `.badge` (basecoat-css@1.0.2, vega style).\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-chip size=\"lg\" color=\"success\" variant=\"solid\" label=\"Active\" dot>\r\n     <span mono-chip mono-size=\"lg\" mono-color=\"success\" mono-variant=\"solid\" mono-has-dot>\r\n       <span mono-main>\r\n         <span mono-content>\r\n           <span mono-dot></span>\r\n           <span mono-label>Active</span>\r\n           <button mono-close><span mono-glyph class=\"i-mdi-close\"></span></button>\r\n         </span>\r\n       </span>\r\n     </span>\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])` = soft, no\r\n   `mono-rounded` = the pill). The element renders these on its root (both\r\n   builds) plus the states `mono-has-dot` (the dot PART is `mono-dot`, so the state\r\n   spells itself out) / `mono-removable` / `mono-clickable` /\r\n   `mono-disabled` / `mono-selected` and `mono-icon-position=\"right\"`. The old\r\n   classes (`.mono-chip.md.soft-primary`, `.chip-label`, `.chip-close`) are\r\n   still emitted as inert hooks until 2.0 but no rule here reads them — except\r\n   `rounded-<step>`, which is GONE: that is Tailwind/UnoCSS's own utility\r\n   namespace, so on a page shipping those it was never inert (it rounded the\r\n   chip's outer box). Use `mono-rounded` / the `rounded` prop.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-chip]                   ≡ the layout box only — NOT painted (see below)\r\n     [mono-main]                   ≡ .badge (inline-flex w-fit shrink-0 items-center\r\n                                     justify-center overflow-hidden whitespace-nowrap,\r\n                                     h-5 gap-1 rounded-4xl border border-transparent\r\n                                     px-2 py-0.5 text-xs font-medium transition-all,\r\n                                     focus-visible:border-ring ring-[3px] ring-ring/50)\r\n     [mono-variant=\"solid\"]        ≡ .badge[data-variant='primary'] (bg-c text-c-foreground,\r\n                                     [a]:hover:bg-c/80) — generalised to every hue\r\n     [mono-variant=\"soft\"]         ≡ .badge[data-variant='destructive'] (bg-c/10 text-c,\r\n                                     [a]:hover:bg-c/20, dark bg-c/20) — generalised; the DEFAULT\r\n     [mono-variant=\"outline\"]      ≡ .badge[data-variant='outline'] (border-border text-foreground,\r\n                                     [a]:hover:bg-muted) + the hue on the edge and the ink\r\n     [mono-color=\"secondary\"]      ≡ .badge[data-variant='secondary'] (the muted surface pair)\r\n     [mono-size=\"md\"]              ≡ .badge's own h-5 px-2 text-xs; the other five are EXTENSION\r\n                                     (Basecoat ships one badge size)\r\n     [mono-rounded=\"…\"]            ≡ EXTENSION (the shared corner ladder; unset = rounded-4xl)\r\n     [mono-close]                  ≡ .combobox-chip-remove (opacity-50 hover:opacity-100, svg size-3.5)\r\n     [mono-has-dot] / [mono-dot] / [mono-selected] / [mono-clickable] ≡ EXTENSION\r\n     [mono-disabled]               ≡ .btn disabled:opacity-50\r\n     [mono-status-dot]             ≡ EXTENSION (the standalone status-dot helper)\r\n\r\n   WHY THE ROOT PAINTS NOTHING. `[mono-chip]` is also what a FIELD's internal\r\n   chip carries: `<mono-tag-input>` renders Basecoat combobox chips as\r\n   `[mono-chip] > [mono-chip-main] > …` and paints them in tag-input.css. Those\r\n   rules are `[mono-tag-input] [mono-chip]` = (0,2,0) and win over this sheet,\r\n   but only where they overlap — so this sheet keeps the root to layout plus\r\n   custom properties (which a field's rules simply don't read) and paints the\r\n   badge on `[mono-main]`, a part name a field chip does not have. The two never\r\n   collide, and a real `<mono-chip>` slotted INTO a field keeps its own look.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING\r\n   rule is exactly one attribute strong — `:where([mono-chip]) [mono-label]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier and win over it.\r\n\r\n   Inner parts: [mono-main] > [mono-content] > [mono-dot] / [data-mono-slot=icon]\r\n   / [mono-label] / [mono-close] > [mono-glyph].\r\n\r\n   FLAVORS set `--mono-chip-{radius,border-width,font-weight,letter-spacing,\r\n   text-transform}` and the VARIANT-scoped paint knobs\r\n   `--mono-chip-{soft,solid,outline}-{bg,color,border-color}` (the shared\r\n   `--mono-chip-bg` / `-color` is the CONSUMER's blanket override and repaints\r\n   all three looks at once)` and the per-size `-height-<size>` /\r\n   `-padding-x-<size>` / `-gap-<size>` / `-font-size-<size>` /\r\n   `-glyph-size-<size>` (the size-agnostic twin of each of those is the\r\n   CONSUMER's override — a flavor writing it would flatten the whole ladder);\r\n   every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.badge\"`).\r\n   ========================================================================= */\r\n\r\nmono-chip {\r\n  display: inline-block;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette. NOTHING here paints (see the header).\r\n   ========================================= */\r\n\r\n[mono-chip] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ──────────── */\r\n  --_mono-chip-primary: var(--mono-chip-primary, var(--primary));\r\n  --_mono-chip-primary-foreground: var(--mono-chip-primary-foreground, var(--primary-foreground));\r\n  --_mono-chip-secondary: var(--mono-chip-secondary, var(--secondary));\r\n  --_mono-chip-secondary-foreground: var(--mono-chip-secondary-foreground, var(--secondary-foreground));\r\n  --_mono-chip-success: var(--mono-chip-success, var(--success));\r\n  --_mono-chip-success-foreground: var(--mono-chip-success-foreground, var(--success-foreground));\r\n  --_mono-chip-danger: var(--mono-chip-danger, var(--destructive));\r\n  --_mono-chip-danger-foreground: var(--mono-chip-danger-foreground, var(--destructive-foreground));\r\n  --_mono-chip-warning: var(--mono-chip-warning, var(--warning));\r\n  --_mono-chip-warning-foreground: var(--mono-chip-warning-foreground, var(--warning-foreground));\r\n  --_mono-chip-info: var(--mono-chip-info, var(--info));\r\n  --_mono-chip-info-foreground: var(--mono-chip-info-foreground, var(--info-foreground));\r\n  --_mono-chip-teal: var(--mono-chip-teal, var(--teal));\r\n  --_mono-chip-teal-foreground: var(--mono-chip-teal-foreground, var(--teal-foreground));\r\n  --_mono-chip-purple: var(--mono-chip-purple, var(--purple));\r\n  --_mono-chip-purple-foreground: var(--mono-chip-purple-foreground, var(--purple-foreground));\r\n  --_mono-chip-neutral: var(--mono-chip-neutral, var(--neutral));\r\n  --_mono-chip-neutral-foreground: var(--mono-chip-neutral-foreground, var(--neutral-foreground));\r\n  --_mono-chip-dark: var(--mono-chip-dark, var(--dark));\r\n  --_mono-chip-dark-foreground: var(--mono-chip-dark-foreground, var(--dark-foreground));\r\n\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border\r\n     border-transparent px-2 py-0.5 text-xs font-medium, [&>svg]:size-3 */\r\n  --_mono-chip-height: var(--mono-chip-height, var(--_mono-chip-height-preset, var(--mono-chip-height-md, calc(var(--mono-spacing) * 5))));\r\n  --_mono-chip-padding-x: var(--mono-chip-padding-x, var(--_mono-chip-padding-x-preset, var(--mono-chip-padding-x-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-chip-gap: var(--mono-chip-gap, var(--_mono-chip-gap-preset, var(--mono-chip-gap-md, var(--mono-spacing))));\r\n  --_mono-chip-font-size: var(--mono-chip-font-size, var(--_mono-chip-font-size-preset, var(--mono-chip-font-size-md, var(--mono-text-xs))));\r\n  --_mono-chip-glyph-size: var(--mono-chip-glyph-size, var(--_mono-chip-glyph-size-preset, var(--mono-chip-glyph-size-md, calc(var(--mono-spacing) * 3))));\r\n  /* `rounded-4xl` is the pill; a `rounded` step writes the preset tier, and an\r\n     explicit --mono-chip-radius still wins over the prop */\r\n  --_mono-chip-radius: var(--mono-chip-radius, var(--_mono-chip-radius-preset, var(--mono-radius-4xl)));\r\n  --_mono-chip-border-width: var(--mono-chip-border-width, var(--mono-border-width));\r\n  --_mono-chip-font-weight: var(--mono-chip-font-weight, var(--mono-font-weight-medium));\r\n\r\n  --_mono-chip-ring-color: var(--mono-chip-ring-color, var(--ring));\r\n  --_mono-chip-ring-width: var(--mono-chip-ring-width, var(--mono-ring-width));\r\n  --_mono-chip-ring-alpha: var(--mono-chip-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  max-width: 100%;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* =========================================\r\n   The badge box — `.badge`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — inline-flex w-fit shrink-0\r\n   items-center justify-center overflow-hidden whitespace-nowrap\r\n   [&>svg]:pointer-events-none */\r\n:where([mono-chip]) [mono-main] {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  box-sizing: border-box;\r\n  height: var(--_mono-chip-height);\r\n  gap: var(--_mono-chip-gap);\r\n  padding-inline: var(--_mono-chip-padding-x);\r\n  border: var(--_mono-chip-border-width) solid transparent;\r\n  border-radius: var(--_mono-chip-radius);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-chip-font-size);\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  letter-spacing: var(--mono-chip-letter-spacing, normal);\r\n  text-transform: var(--mono-chip-text-transform, none);\r\n  line-height: 1;\r\n  text-decoration: none;\r\n  user-select: none;\r\n  vertical-align: middle;\r\n  /* `transition-all`, narrowed to what a chip actually animates */\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    opacity var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-ring, 0 0 #0000);\r\n}\r\n\r\n/* A LINK chip is a control, not prose. Host stylesheets routinely paint a bare\r\n   `a` — VitePress's own `.vp-doc a` sets a weight and an underline at (0,1,1) —\r\n   and that out-specifies the (0,1,0) part rule above, so the anchor form\r\n   restates what such a rule hijacks, one attribute heavier. Measured: the docs'\r\n   light link chip came out at weight 500 while the shadow one, beyond that\r\n   sheet's reach, kept the component's own 600. The colour needs no restatement:\r\n   every variant rule is already (0,2,0).\r\n\r\n   DEVIATION from the specificity contract, for this form only — a `cssClass.main`\r\n   utility that sets font-weight or text-decoration on a LINK chip now needs\r\n   `!important` (or the `--mono-chip-font-weight` knob). */\r\n[mono-chip] a[mono-main] {\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  text-decoration: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n:where([mono-chip]) [mono-main]:focus-visible {\r\n  outline: none;\r\n  border-color: var(--_mono-chip-ring-color);\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-ring-color) var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE badge; md is its `.badge`\r\n   ========================================= */\r\n\r\n/* The ladder steps the same way the control heights do: 4px of box and one type\r\n   step per size, with md pinned to vega's h-5 / px-2 / text-xs. */\r\n[mono-chip][mono-size=\"xs\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xs, calc(var(--mono-spacing) * 4));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xs, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xs, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xs, calc(var(--mono-spacing) * 2.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"sm\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-sm, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-sm, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-sm, calc(var(--mono-spacing) * 0.875));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-sm, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-sm, calc(var(--mono-spacing) * 2.75));\r\n}\r\n\r\n[mono-chip][mono-size=\"lg\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-lg, calc(var(--mono-spacing) * 6));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-lg, calc(var(--mono-spacing) * 1.25));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-lg, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-lg, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"xl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xl, calc(var(--mono-spacing) * 7));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xl, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xl, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xl, calc(var(--mono-spacing) * 4));\r\n}\r\n\r\n[mono-chip][mono-size=\"xxl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xxl, calc(var(--mono-spacing) * 8));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xxl, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xxl, var(--mono-text-base));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xxl, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n/* =========================================\r\n   Rounded — EXTENSION: the shared corner ladder. Unset is vega's rounded-4xl.\r\n   ========================================= */\r\n\r\n[mono-chip][mono-rounded=\"none\"] { --_mono-chip-radius-preset: 0; }\r\n[mono-chip][mono-rounded=\"xs\"] { --_mono-chip-radius-preset: calc(var(--mono-radius-sm) / 2); }\r\n[mono-chip][mono-rounded=\"sm\"] { --_mono-chip-radius-preset: var(--mono-radius-sm); }\r\n[mono-chip][mono-rounded=\"md\"] { --_mono-chip-radius-preset: var(--mono-radius-md); }\r\n[mono-chip][mono-rounded=\"lg\"] { --_mono-chip-radius-preset: var(--mono-radius-lg); }\r\n[mono-chip][mono-rounded=\"xl\"] { --_mono-chip-radius-preset: var(--mono-radius-xl); }\r\n[mono-chip][mono-rounded=\"xxl\"] { --_mono-chip-radius-preset: var(--mono-radius-2xl); }\r\n[mono-chip][mono-rounded=\"full\"] { --_mono-chip-radius-preset: var(--mono-radius-full); }\r\n\r\n/* =========================================\r\n   Colours — each publishes the pair the variants read\r\n   ========================================= */\r\n\r\n[mono-chip][mono-color=\"primary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='secondary'] —\r\n   bg-secondary text-secondary-foreground: a SURFACE pair, not a hue, so its\r\n   `soft` and `solid` land on the same muted plate (shadcn's meaning). */\r\n[mono-chip][mono-color=\"secondary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-secondary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-secondary-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"success\"] {\r\n  --_mono-chip-c: var(--_mono-chip-success);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-success-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"danger\"] {\r\n  --_mono-chip-c: var(--_mono-chip-danger);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-danger-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"warning\"] {\r\n  --_mono-chip-c: var(--_mono-chip-warning);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-warning-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"info\"] {\r\n  --_mono-chip-c: var(--_mono-chip-info);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-info-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"teal\"] {\r\n  --_mono-chip-c: var(--_mono-chip-teal);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-teal-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"purple\"] {\r\n  --_mono-chip-c: var(--_mono-chip-purple);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-purple-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"neutral\"] {\r\n  --_mono-chip-c: var(--_mono-chip-neutral);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-neutral-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"dark\"] {\r\n  --_mono-chip-c: var(--_mono-chip-dark);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-dark-foreground);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `soft` is the DEFAULT and is Basecoat's tonal badge.\r\n   basecoat@1.0.2 styles/vega.css .badge[data-variant='destructive'] —\r\n   bg-destructive/10 text-destructive dark:bg-destructive/20 (the alpha pair\r\n   travels as --mono-mode-tint, which is what makes it dark-mode correct). */\r\n[mono-chip]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint), transparent)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-soft-border-color, transparent));\r\n}\r\n\r\n/* `secondary` is a surface, not a hue: tinting it would wash it out, so the\r\n   soft chip wears the plate itself (`.badge[data-variant='secondary']`). */\r\n[mono-chip][mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, var(--_mono-chip-secondary)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-secondary-foreground)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — bg-primary text-primary-foreground */\r\n[mono-chip][mono-variant=\"solid\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-solid-bg, var(--_mono-chip-c)));\r\n  color: var(--mono-chip-color, var(--mono-chip-solid-color, var(--_mono-chip-c-foreground)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-solid-border-color, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='outline'] — border-border\r\n   text-foreground — EXTENSION: the edge and the ink take the role's colour so\r\n   `outline` reads as the same family as the other two. */\r\n[mono-chip][mono-variant=\"outline\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-outline-bg, transparent));\r\n  color: var(--mono-chip-color, var(--mono-chip-outline-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-outline-border-color, var(--_mono-chip-c)));\r\n}\r\n\r\n[mono-chip][mono-color=\"secondary\"][mono-variant=\"outline\"] > [mono-main] {\r\n  color: var(--mono-chip-color, var(--foreground));\r\n  border-color: var(--mono-chip-border-color, var(--border));\r\n}\r\n\r\n/* =========================================\r\n   Interactive — a clickable / linked chip\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — [a]:hover:bg-primary/80: only a LINK badge reacts upstream; ours also\r\n   reacts when `clickable` made it a button (same gesture, no href). */\r\n[mono-chip][mono-clickable] > [mono-main] {\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"solid\"] > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) 80%, transparent);\r\n  }\r\n\r\n  /* .badge[data-variant='destructive'] — [a]:hover:bg-destructive/20 */\r\n  [mono-chip][mono-clickable]:not([mono-disabled]):is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint-hover), transparent);\r\n  }\r\n\r\n  /* `secondary` is a plate, not a tint: darken it the way the secondary button\r\n     does (basecoat@1.0.2 styles/vega.css .btn[data-variant='secondary']). */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklch, var(--_mono-chip-secondary), var(--foreground) 5%);\r\n  }\r\n\r\n  /* .badge[data-variant='outline'] — [a]:hover:bg-muted */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"outline\"] > [mono-main]:hover {\r\n    background-color: var(--mono-mode-ghost-hover);\r\n  }\r\n}\r\n\r\n/* EXTENSION — `selected` rings the chip in its own colour, the one state\r\n   Basecoat's badge has no equivalent for (it is not a toggle upstream). */\r\n[mono-chip][mono-selected] > [mono-main] {\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-c) var(--_mono-chip-ring-alpha), transparent);\r\n  border-color: var(--_mono-chip-c);\r\n}\r\n\r\n/* basecoat@1.0.2 components/button.css .btn — disabled:pointer-events-none\r\n   disabled:opacity-50 */\r\n[mono-chip][mono-disabled] > [mono-main] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Inner content\r\n   ========================================= */\r\n\r\n:where([mono-chip]) [mono-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n  line-height: 1;\r\n}\r\n\r\n:where([mono-chip]) [mono-label] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1;\r\n}\r\n\r\n/* EXTENSION — the leading status dot. It is the role's colour at full strength,\r\n   which reads on both the tinted `soft` plate and the solid one (`currentColor`\r\n   there). */\r\n:where([mono-chip]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  height: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* The shadow build renders the icon wrapper on every chip and marks the empty\r\n   one; this hides it so both builds measure the same content box. */\r\n[mono-chip] [data-mono-slot=\"icon\"][mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* `[&>svg]:size-3!` — our icon is a slotted element or a mask span, sized by\r\n   the same token as the close glyph */\r\n:where([mono-chip]) [data-mono-slot=\"icon\"],\r\n:where([mono-chip]) [mono-main] > svg {\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-chip]) [data-mono-slot=\"icon\"] > * {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, [&>svg]:size-3.5 — the same affordance a field chip uses */\r\n:where([mono-chip]) [mono-close] {\r\n  appearance: none;\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-radius-full);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  opacity: 0.5;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-close-ring, 0 0 #0000);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-chip]) [mono-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n:where([mono-chip]) [mono-close]:focus-visible {\r\n  outline: none;\r\n  opacity: 1;\r\n  --_mono-chip-close-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, currentColor var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n:where([mono-chip]) [mono-close] :is([mono-glyph], svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n:where([mono-chip]) [mono-close] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Status dot — EXTENSION: `<mono-status-dot>`, a label with a state dot\r\n   ========================================= */\r\n\r\nmono-status-dot {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-status-dot] {\r\n  --_mono-status-dot-c: var(--mono-status-dot-color, var(--success));\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--mono-status-dot-gap, calc(var(--mono-spacing) * 1.5));\r\n  font-family: inherit;\r\n  font-size: var(--mono-status-dot-font-size, var(--mono-text-xs));\r\n  font-weight: var(--mono-status-dot-font-weight, var(--mono-font-weight-medium));\r\n  line-height: 1;\r\n  color: var(--_mono-status-dot-c);\r\n}\r\n\r\n[mono-status-dot][mono-status=\"offline\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--neutral)); }\r\n[mono-status-dot][mono-status=\"busy\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--destructive)); }\r\n[mono-status-dot][mono-status=\"away\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--warning)); }\r\n/* `custom` takes the colour from the `color` prop, which the element writes\r\n   inline as --mono-status-dot-color */\r\n[mono-status-dot][mono-status=\"custom\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--primary)); }\r\n\r\n:where([mono-status-dot]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  height: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n[mono-status-dot][mono-pulse] [mono-dot] {\r\n  animation: mono-status-pulse 1.8s var(--mono-ease) infinite;\r\n}\r\n\r\n@keyframes mono-status-pulse {\r\n  0%,\r\n  100% {\r\n    box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 40%, transparent);\r\n  }\r\n\r\n  50% {\r\n    box-shadow: 0 0 0 5px color-mix(in oklab, currentColor 0%, transparent);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-chip]) :is([mono-main], [mono-close]) {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-status-dot][mono-pulse] [mono-dot] {\r\n    animation: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/chip/mono-chip.ts
-var MonoChip = class MonoChip extends MonoChipCore(LitElement) {
+let MonoChip = class MonoChip extends MonoChipCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._buckets = /* @__PURE__ */ new Map();
 		this._slotsCaptured = false;
 	}
 	static {
-		this.styles = [unsafeCSS(chip_default)];
+		this.styles = [unsafeCSS(chip_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -310,8 +313,9 @@ var MonoChip = class MonoChip extends MonoChipCore(LitElement) {
 	}
 	_renderContent() {
 		const hasIcon = this._hasIcon;
+		const contentClass = this._cls(hasIcon ? this.iconPosition === "right" ? "chip-content icon-right" : "chip-content icon-left" : "chip-content", "content");
 		return html`
-      <span class=${this._cls(hasIcon ? this.iconPosition === "right" ? "chip-content icon-right" : "chip-content icon-left" : "chip-content", "content")} mono-content>
+      <span class=${contentClass} mono-content>
         ${this._renderDot()}
 
         ${when(hasIcon && this.iconPosition === "left", () => html`<span data-mono-slot="icon"></span>`, () => nothing)}
@@ -425,6 +429,7 @@ var MonoChip = class MonoChip extends MonoChipCore(LitElement) {
 	}
 };
 MonoChip = __decorate([customElement("mono-chip")], MonoChip);
+
 //#endregion
 //#region src/components/chip/mono-status-dot.ts
 /**
@@ -442,7 +447,7 @@ MonoChip = __decorate([customElement("mono-chip")], MonoChip);
 */
 var MonoStatusDot = class extends LitElement {
 	static {
-		this.styles = [unsafeCSS(chip_default)];
+		this.styles = [unsafeCSS(chip_css_raw_default)];
 	}
 	constructor() {
 		super();
@@ -494,6 +499,7 @@ __decorate([property({ type: String })], MonoStatusDot.prototype, "label", void
 __decorate([property({ type: String })], MonoStatusDot.prototype, "color", void 0);
 __decorate([query("span")], MonoStatusDot.prototype, "_statusElement", void 0);
 defineMonoElement("mono-status-dot", MonoStatusDot);
+
 //#endregion
 //#region src/components/chip/chip-utils.ts
 function generateChipRootClasses(props) {
@@ -554,5 +560,6 @@ function validateChipProps(props) {
 	if (props.rounded && !validRounded.includes(props.rounded)) return false;
 	return true;
 }
+
 //#endregion
-export { MonoChip, MonoStatusDot, generateChipRootClasses, isInteractive, validateChipProps };
+export { MonoChip, MonoStatusDot, generateChipRootClasses, isInteractive, validateChipProps };

package/dist/ui/date.js

@@ -1,14 +1,15 @@
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { t as buildSizeStyle } from "../css-size-DhHSVZJK.js";
-import { t as MonoFormControlCore } from "../form-control-core-eeRr0zLU.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+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-CRZPZ1ru.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";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/date/date-core.ts
-var numberStringConverter = {
+const numberStringConverter = {
 	fromAttribute(value) {
 		if (value === null || value === "") return void 0;
 		const parsed = Number(value);
@@ -18,7 +19,7 @@ var numberStringConverter = {
 		return value === void 0 || value === null ? null : String(value);
 	}
 };
-var _uid = 0;
+let _uid = 0;
 /**
 * `MonoDateCore` — render-mode-agnostic logic for `mono-date` (props, hybrid
 * aliases, flatpickr instance lifecycle, validation/state, and the full
@@ -33,7 +34,7 @@ var _uid = 0;
 * (appended to `<body>`, client-only, styled by the global bundle), so this needs
 * no `PopupPortalController`/`popup-stack`.
 */
-var MonoDateCore = (superClass) => {
+const MonoDateCore = (superClass) => {
 	class MonoDateCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -210,7 +211,7 @@ var MonoDateCore = (superClass) => {
 		async _ensurePicker() {
 			if (isServer || this._fp || !this._nativeEl) return;
 			const token = ++this._buildToken;
-			const { default: flatpickr } = await import("../esm-Ptok4SQZ.js");
+			const { default: flatpickr } = await import("../esm-D0We7ndD.js");
 			if (token !== this._buildToken || !this.isConnected || !this._nativeEl || this._fp) return;
 			this._fp = flatpickr(this._nativeEl, this._buildConfig());
 			this._hasValue = Boolean(this.modelValue);
@@ -314,7 +315,7 @@ var MonoDateCore = (superClass) => {
 			this._fp?.destroy();
 			this._fp = null;
 			const token = ++this._buildToken;
-			import("../esm-Ptok4SQZ.js").then(({ default: flatpickr }) => {
+			import("../esm-D0We7ndD.js").then(({ default: flatpickr }) => {
 				if (token !== this._buildToken || !this.isConnected || !this._nativeEl) return;
 				this._fp = flatpickr(this._nativeEl, this._buildConfig());
 				if (open) this._fp.open();
@@ -668,19 +669,22 @@ var MonoDateCore = (superClass) => {
 	__decorate([query(".mono-date-native")], MonoDateCoreClass.prototype, "_nativeEl", void 0);
 	return MonoDateCoreClass;
 };
+
 //#endregion
-//#region src/components/date/date.css?raw
-var date_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";
+//#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";
+
 //#endregion
 //#region src/components/date/mono-date.ts
-var MonoDate = class MonoDate extends MonoDateCore(LitElement) {
+let MonoDate = class MonoDate extends MonoDateCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(date_default)];
+		this.styles = [unsafeCSS(date_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoDate = __decorate([customElement("mono-date")], MonoDate);
+
 //#endregion
-export { MonoDate };
+export { MonoDate };