@mono-lit/helper 0.0.1 → 0.0.3

package/dist/ui/alert.js

@@ -1,10 +1,11 @@
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, i as defineHybridPropAlias, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { a as parkDetachedNodes, n as bucketHasContent, o as placeLightSlots, r as captureLightSlots } from "../light-slots-DW1WgfgT.js";
-import { t as isIconifyClass } from "../icon-dVhYJUIH.js";
-import { r as closeIcon } from "../field-icons-BoOG6KrL.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, i as defineHybridPropAlias, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { a as parkDetachedNodes, n as bucketHasContent, o as placeLightSlots, r as captureLightSlots } from "../light-slots-DdDdZ6zs.js";
+import { t as isIconifyClass } from "../icon-ClxnYhBG.js";
+import { r as closeIcon } from "../field-icons-FmyBWa0g.js";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
+
 //#region src/components/alert/alert-core.ts
 /**
 * `MonoAlertCore` — everything both builds share: props (with the `closeable`
@@ -18,7 +19,7 @@ import { property, state } from "lit/decorators.js";
 *
 * SSR-safe: no `document`/`window` access.
 */
-var MonoAlertCore = (superClass) => {
+const MonoAlertCore = (superClass) => {
 	class MonoAlertCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -130,26 +131,28 @@ var MonoAlertCore = (superClass) => {
 	__decorate([state()], MonoAlertCoreClass.prototype, "_hasBodySlot", void 0);
 	return MonoAlertCoreClass;
 };
+
 //#endregion
-//#region src/components/alert/alert.css?raw
-var alert_default = "/* =========================================================================\r\n   mono-alert — a port of Basecoat's `.alert` (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-alert color=\"danger\" variant=\"tonal\" icon=\"i-mdi-alert-outline\"\r\n                 title=\"Payment failed\" subtitle=\"Check the card details.\" clearable>\r\n     <div mono-alert mono-color=\"danger\" mono-variant=\"tonal\" mono-clearable role=\"alert\">\r\n       <span mono-icon><svg …></svg></span>\r\n       <div mono-title>Payment failed</div>\r\n       <div mono-subtitle>Check the card details.</div>\r\n       <button type=\"button\" mono-clear aria-label=\"Close\"><svg …></svg></button>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-variant])` = outline, `:not([mono-color])` = neutral).\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-alert]                           ≡ .alert (grid gap-0.5 rounded-lg border px-4 py-3 text-sm bg-card text-card-foreground)\r\n     [mono-alert]:has(> [mono-icon])        ≡ .alert has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5\r\n     [mono-icon]                            ≡ .alert > svg (row-span-2 translate-y-0.5 size-4 text-current)\r\n     [mono-title]                           ≡ .alert > :is(h2…h6, strong, [data-title]) (font-medium, col-start-2 beside an icon)\r\n     [mono-subtitle]                        ≡ .alert > section (text-sm text-muted-foreground text-balance)\r\n     [mono-body]                            ≡ EXTENSION (`slot=\"body\"`: the whole content, across both columns)\r\n     [mono-clear]                           ≡ .alert > footer position (top-2.5 end-3), drawn as a ghost ✕\r\n     [mono-variant=\"outline\"] (default)     ≡ .alert verbatim; with a colour ≡ .alert[data-variant='destructive'] for every hue\r\n     [mono-variant=\"tonal|solid|text\"]      ≡ EXTENSION — the same four looks as mono-button\r\n     [mono-color=\"…\"]                       ≡ EXTENSION (`danger` is upstream's destructive)\r\n     [mono-size=\"…\"]                        ≡ EXTENSION — ONE scale factor over the md metrics (see below)\r\n\r\n   Specificity contract: a part's RESTING rule is `:where([mono-alert]) > [part]`\r\n   = (0,1,0), so a utility class handed in through `cssClass` wins by order;\r\n   variant / colour / size rules are heavier and win over it.\r\n\r\n   The shadow build renders every region and marks the empty ones [mono-empty];\r\n   this sheet hides them.\r\n\r\n   FLAVORS set `--mono-alert-{radius,padding-x,padding-y,font-size,\r\n   subtitle-font-size,subtitle-line-height,icon-size,icon-gap,icon-offset,\r\n   title-weight,accent-bar-width}` — the md values only: every size is a multiple\r\n   of md, so a flavor never has to restate a ladder (and can never leave one step\r\n   behind). Every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.alert(?!-dialog)\"`).\r\n   ========================================================================= */\r\n\r\nmono-alert {\r\n  display: block;\r\n}\r\n\r\n/* The ✕ hides the alert with the native `hidden` attribute; the element's own\r\n   `display: block` would otherwise out-rank the UA's `[hidden]`. */\r\nmono-alert[hidden],\r\n[mono-alert][hidden] {\r\n  display: none;\r\n}\r\n\r\n[mono-alert] {\r\n  /* ── presets, RESET on every alert ───────────────────────────────────────\r\n     A preset is written by a [mono-size] / [mono-color] rule on the alert that\r\n     has the prop — and a custom property INHERITS. An alert nested in another\r\n     alert's body (a supported layout) would otherwise pick up the outer one's\r\n     size and colour: a plain alert inside a `danger` `lg` one came out large.\r\n     Declaring the defaults here gives every alert its own; the qualified rules\r\n     are heavier and still win on the element they target. */\r\n  --_mono-alert-scale-preset: 1;\r\n  --_mono-alert-c-preset: var(--card-foreground);\r\n  --_mono-alert-solid-bg-preset: var(--foreground);\r\n  --_mono-alert-solid-fg-preset: var(--background);\r\n\r\n  /* ── the size factor: md = 1; every metric below is md × this ───────────── */\r\n  --_mono-alert-scale: var(--_mono-alert-scale-preset);\r\n\r\n  /* ── palette ─────────────────────────────────────────────────────────────── */\r\n  --_mono-alert-bg: var(--mono-alert-bg, var(--card));\r\n  --_mono-alert-text: var(--mono-alert-text, var(--card-foreground));\r\n  --_mono-alert-subtext: var(--mono-alert-subtext, var(--muted-foreground));\r\n  --_mono-alert-border-color: var(--mono-alert-border-color, var(--border));\r\n  --_mono-alert-border-width: var(--mono-alert-border-width, var(--mono-border-width));\r\n  /* the colour in play — the plain card ink unless a [mono-color] rule re-points it */\r\n  --_mono-alert-c: var(--_mono-alert-c-preset);\r\n  --_mono-alert-solid-bg: var(--_mono-alert-solid-bg-preset);\r\n  --_mono-alert-solid-fg: var(--_mono-alert-solid-fg-preset);\r\n\r\n  /* ── shape + md metrics ──────────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .alert — grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4 */\r\n  --_mono-alert-radius: var(--mono-alert-radius, var(--mono-radius-lg));\r\n  --_mono-alert-padding-x: calc(var(--mono-alert-padding-x, calc(var(--mono-spacing) * 4)) * var(--_mono-alert-scale));\r\n  --_mono-alert-padding-y: calc(var(--mono-alert-padding-y, calc(var(--mono-spacing) * 3)) * var(--_mono-alert-scale));\r\n  --_mono-alert-gap: calc(var(--mono-alert-gap, calc(var(--mono-spacing) * 0.5)) * var(--_mono-alert-scale));\r\n  --_mono-alert-icon-gap: calc(var(--mono-alert-icon-gap, calc(var(--mono-spacing) * 2.5)) * var(--_mono-alert-scale));\r\n  --_mono-alert-icon-size: calc(var(--mono-alert-icon-size, calc(var(--mono-spacing) * 4)) * var(--_mono-alert-scale));\r\n  --_mono-alert-icon-offset: calc(var(--mono-alert-icon-offset, calc(var(--mono-spacing) * 0.5)) * var(--_mono-alert-scale));\r\n  --_mono-alert-font-size: calc(var(--mono-alert-font-size, var(--mono-text-sm)) * var(--_mono-alert-scale));\r\n  --_mono-alert-line-height: var(--mono-alert-line-height, var(--mono-text-sm--lh));\r\n  --_mono-alert-title-weight: var(--mono-alert-title-weight, var(--mono-font-weight-medium));\r\n  --_mono-alert-subtitle-font-size: calc(var(--mono-alert-subtitle-font-size, var(--mono-text-sm)) * var(--_mono-alert-scale));\r\n  --_mono-alert-subtitle-line-height: var(--mono-alert-subtitle-line-height, var(--mono-text-sm--lh));\r\n  /* sera's start-edge bar (`after:w-0.5 after:bg-foreground`); 0 everywhere else */\r\n  --_mono-alert-accent-bar-width: var(--mono-alert-accent-bar-width, 0px);\r\n  --_mono-alert-clear-size: calc(var(--mono-alert-clear-size, calc(var(--mono-spacing) * 6)) * var(--_mono-alert-scale));\r\n\r\n  /* ── the look, resolved per variant below ───────────────────────────────── */\r\n  --_mono-alert-surface: var(--_mono-alert-bg);\r\n  --_mono-alert-edge: var(--_mono-alert-border-color);\r\n  --_mono-alert-ink: var(--_mono-alert-text);\r\n  --_mono-alert-sub-ink: var(--_mono-alert-subtext);\r\n  --_mono-alert-bar: var(--_mono-alert-c);\r\n\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr);\r\n  align-items: start;\r\n  row-gap: var(--_mono-alert-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  padding: var(--_mono-alert-padding-y) var(--_mono-alert-padding-x);\r\n  border: var(--_mono-alert-border-width) solid var(--_mono-alert-edge);\r\n  border-radius: var(--_mono-alert-radius);\r\n  background-color: var(--_mono-alert-surface);\r\n  color: var(--_mono-alert-ink);\r\n  font-size: var(--_mono-alert-font-size);\r\n  line-height: var(--_mono-alert-line-height);\r\n  text-align: start;\r\n}\r\n\r\n/* sera — `relative after:-inset-y-px after:-start-px after:w-0.5 after:absolute\r\n   after:bg-foreground` (destructive: after:bg-destructive). Zero-width elsewhere. */\r\n[mono-alert]::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset-block: calc(var(--_mono-alert-border-width) * -1);\r\n  inset-inline-start: calc(var(--_mono-alert-border-width) * -1);\r\n  width: var(--_mono-alert-accent-bar-width);\r\n  background: var(--_mono-alert-bar);\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/alert.css .alert — relative w-full (the icon column\r\n   below is vega's `has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5`) */\r\n[mono-alert]:has(> [mono-icon]:not([mono-empty])) {\r\n  grid-template-columns: auto minmax(0, 1fr);\r\n  column-gap: var(--_mono-alert-icon-gap);\r\n}\r\n\r\n/* The shadow build renders every region and marks the empty ones. A child\r\n   combinator, so a nested component's own regions inside the body are left alone. */\r\n[mono-alert] > :is([mono-icon], [mono-title], [mono-subtitle], [mono-body])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Icon — `[&>svg]:row-span-2 translate-y-0.5 text-current size-4`\r\n   ========================================= */\r\n\r\n:where([mono-alert]) > [mono-icon] {\r\n  grid-row: span 2;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-alert-icon-size);\r\n  height: var(--_mono-alert-icon-size);\r\n  translate: 0 var(--_mono-alert-icon-offset);\r\n  color: currentColor;\r\n  line-height: 1;\r\n}\r\n\r\n/* Whatever paints the glyph fills the box: an inline svg (raw markup, a slotted\r\n   svg, the shadow build's bundled glyph) or the light build's iconify span.\r\n   Two attributes strong ON PURPOSE — UnoCSS's `i-*` sets width/height at (0,1,0)\r\n   and loads later — and scoped to the alert (a bare `[mono-glyph]` rule is global\r\n   and would resize every component's glyph).\r\n\r\n   DESCENDANT, not `>`: in the shadow build the glyph is the FALLBACK of\r\n   `<slot name=\"icon\">`, so the tree is [mono-icon] > slot > [mono-glyph] > svg.\r\n   A child combinator never matched it and the icon measured 0 × 0. (The slot is\r\n   `display: contents`, so the glyph is still the box's flex item.) */\r\n[mono-alert] > [mono-icon] :is(svg, img, [mono-glyph]) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* the light build's placeholder is invisible to layout, so the svg sizes against\r\n   the icon box, not against a zero-width span */\r\n[mono-alert] > [mono-icon] > [data-mono-slot='icon'] {\r\n  display: contents;\r\n}\r\n\r\n[mono-alert] > [mono-icon] slot::slotted(:is(svg, img, span)) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Title + subtitle\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .alert > :is(h2, h3, h4, h5, h6, strong, [data-title]), .alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) — font-medium\r\n   basecoat@1.0.2 components/alert.css .alert > :is(h2, h3, h4, h5, h6, strong, [data-title]) — min-h-4 */\r\n:where([mono-alert]) > [mono-title] {\r\n  min-height: var(--_mono-alert-icon-size);\r\n  margin: 0;\r\n  font-size: var(--_mono-alert-font-size);\r\n  line-height: var(--_mono-alert-line-height);\r\n  font-weight: var(--_mono-alert-title-weight);\r\n  color: inherit;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .alert > section — text-muted-foreground text-sm text-balance md:text-pretty */\r\n:where([mono-alert]) > [mono-subtitle] {\r\n  margin: 0;\r\n  font-size: var(--_mono-alert-subtitle-font-size);\r\n  line-height: var(--_mono-alert-subtitle-line-height);\r\n  color: var(--_mono-alert-sub-ink);\r\n  text-wrap: pretty;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) — col-start-2 */\r\n[mono-alert]:has(> [mono-icon]:not([mono-empty])) > :is([mono-title], [mono-subtitle]) {\r\n  grid-column-start: 2;\r\n}\r\n\r\n/* Raw markup puts the region attribute ON a prose tag, which a host page styles\r\n   by tag through a class selector (`.vp-doc h3`, (0,1,1)) — restate the type and\r\n   margin at (0,2,1) so the tag reads like the element's <div>. */\r\n[mono-alert] > :is(h1, h2, h3, h4, h5, h6, p, strong)[mono-title] {\r\n  margin: 0;\r\n  font-size: var(--_mono-alert-font-size);\r\n  line-height: var(--_mono-alert-line-height);\r\n  font-weight: var(--_mono-alert-title-weight);\r\n}\r\n\r\n[mono-alert] > :is(h1, h2, h3, h4, h5, h6, p, strong)[mono-subtitle] {\r\n  margin: 0;\r\n  font-size: var(--_mono-alert-subtitle-font-size);\r\n  line-height: var(--_mono-alert-subtitle-line-height);\r\n}\r\n\r\n/* =========================================\r\n   Body — `slot=\"body\"` / unslotted children: the whole content, both columns\r\n   ========================================= */\r\n\r\n:where([mono-alert]) > [mono-body] {\r\n  grid-column: 1 / -1;\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 components/alert.css .alert > section >> :where(p, ul, ol) — m-0\r\n   basecoat@1.0.2 components/alert.css .alert > section >> :where(p, ul, ol):not(:last-child) — mb-4 */\r\n:where([mono-alert]) > [mono-body] :where(p, ul, ol) {\r\n  margin: 0;\r\n}\r\n\r\n:where([mono-alert]) > [mono-body] :where(p, ul, ol):not(:last-child) {\r\n  margin-bottom: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   The ✕ — a ghost icon button at the top end, centred on the icon's line\r\n   basecoat@1.0.2 styles/vega.css .alert > footer, .alert[data-variant='destructive'] > footer — top-2.5 end-3\r\n   basecoat@1.0.2 components/alert.css .alert:has(> footer) — pe-[4.5rem] (here: just the button's room)\r\n   ========================================= */\r\n\r\n[mono-alert][mono-clearable] {\r\n  padding-inline-end: calc(var(--_mono-alert-padding-x) + var(--_mono-alert-clear-size));\r\n}\r\n\r\n:where([mono-alert]) > [mono-clear] {\r\n  position: absolute;\r\n  top: calc(\r\n    var(--_mono-alert-padding-y) + var(--_mono-alert-icon-offset) +\r\n      (var(--_mono-alert-icon-size) - var(--_mono-alert-clear-size)) / 2\r\n  );\r\n  inset-inline-end: calc(var(--_mono-alert-padding-x) - (var(--_mono-alert-clear-size) - var(--_mono-alert-icon-size)) / 2);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-alert-clear-size);\r\n  height: var(--_mono-alert-clear-size);\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-radius-md);\r\n  background: transparent;\r\n  color: inherit;\r\n  opacity: 0.7;\r\n  cursor: pointer;\r\n  transition:\r\n    opacity var(--mono-duration-fast, 100ms) var(--mono-ease),\r\n    background-color var(--mono-duration-fast, 100ms) var(--mono-ease);\r\n}\r\n\r\n:where([mono-alert]) > [mono-clear] > svg {\r\n  width: var(--_mono-alert-icon-size);\r\n  height: var(--_mono-alert-icon-size);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-alert]) > [mono-clear]:hover {\r\n    opacity: 1;\r\n    background-color: color-mix(in oklab, currentColor 10%, transparent);\r\n  }\r\n}\r\n\r\n:where([mono-alert]) > [mono-clear]:focus-visible {\r\n  opacity: 1;\r\n  outline: none;\r\n  box-shadow: 0 0 0 var(--mono-ring-width) color-mix(in oklab, var(--ring) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — one factor over the md metrics (md = 1, the unqualified root)\r\n   ========================================= */\r\n\r\n[mono-alert][mono-size='xs'] { --_mono-alert-scale-preset: 0.8; }\r\n[mono-alert][mono-size='sm'] { --_mono-alert-scale-preset: 0.9; }\r\n[mono-alert][mono-size='lg'] { --_mono-alert-scale-preset: 1.1; }\r\n[mono-alert][mono-size='xl'] { --_mono-alert-scale-preset: 1.25; }\r\n[mono-alert][mono-size='xxl'] { --_mono-alert-scale-preset: 1.4; }\r\n\r\n/* =========================================\r\n   Colours — `danger` is upstream's destructive; `secondary` is the grey\r\n   SURFACE pair (its ink is the foreground, its solid plate the surface)\r\n   ========================================= */\r\n\r\n[mono-alert][mono-color='primary'] { --_mono-alert-c-preset: var(--primary); --_mono-alert-solid-bg-preset: var(--primary); --_mono-alert-solid-fg-preset: var(--primary-foreground); }\r\n[mono-alert][mono-color='secondary'] { --_mono-alert-c-preset: var(--secondary-foreground); --_mono-alert-solid-bg-preset: var(--secondary); --_mono-alert-solid-fg-preset: var(--secondary-foreground); }\r\n[mono-alert][mono-color='success'] { --_mono-alert-c-preset: var(--success); --_mono-alert-solid-bg-preset: var(--success); --_mono-alert-solid-fg-preset: var(--success-foreground); }\r\n[mono-alert][mono-color='danger'] { --_mono-alert-c-preset: var(--destructive); --_mono-alert-solid-bg-preset: var(--destructive); --_mono-alert-solid-fg-preset: var(--destructive-foreground); }\r\n[mono-alert][mono-color='warning'] { --_mono-alert-c-preset: var(--warning); --_mono-alert-solid-bg-preset: var(--warning); --_mono-alert-solid-fg-preset: var(--warning-foreground); }\r\n[mono-alert][mono-color='info'] { --_mono-alert-c-preset: var(--info); --_mono-alert-solid-bg-preset: var(--info); --_mono-alert-solid-fg-preset: var(--info-foreground); }\r\n[mono-alert][mono-color='teal'] { --_mono-alert-c-preset: var(--teal); --_mono-alert-solid-bg-preset: var(--teal); --_mono-alert-solid-fg-preset: var(--teal-foreground); }\r\n[mono-alert][mono-color='purple'] { --_mono-alert-c-preset: var(--purple); --_mono-alert-solid-bg-preset: var(--purple); --_mono-alert-solid-fg-preset: var(--purple-foreground); }\r\n[mono-alert][mono-color='neutral'] { --_mono-alert-c-preset: var(--neutral); --_mono-alert-solid-bg-preset: var(--neutral); --_mono-alert-solid-fg-preset: var(--neutral-foreground); }\r\n[mono-alert][mono-color='dark'] { --_mono-alert-c-preset: var(--dark); --_mono-alert-solid-bg-preset: var(--dark); --_mono-alert-solid-fg-preset: var(--dark-foreground); }\r\n\r\n/* =========================================\r\n   Variants — each resolves surface / edge / ink / sub-ink\r\n   ========================================= */\r\n\r\n/* outline (default) WITH a colour —\r\n   basecoat@1.0.2 styles/vega.css .alert[data-variant='destructive'] — text-destructive bg-card [&>svg]:text-current\r\n   basecoat@1.0.2 styles/vega.css .alert[data-variant='destructive'] > section — text-destructive/90\r\n   generalised to every hue; the edge picks up the hue too (EXTENSION), mixed into\r\n   --border so it follows the mode. Without a colour it is `.alert` verbatim. */\r\n[mono-alert][mono-color]:is(:not([mono-variant]), [mono-variant='outline']) {\r\n  --_mono-alert-edge: color-mix(in oklab, var(--_mono-alert-c) 45%, var(--_mono-alert-border-color));\r\n  --_mono-alert-ink: var(--_mono-alert-c);\r\n  --_mono-alert-sub-ink: color-mix(in oklab, var(--_mono-alert-c) 90%, transparent);\r\n}\r\n\r\n/* tonal — the hue tinted over the card (chip `soft` / card `tonal`); dark mode\r\n   deepens the tint through --mono-mode-tint */\r\n[mono-alert][mono-variant='tonal'] {\r\n  --_mono-alert-surface: color-mix(in oklab, var(--_mono-alert-c) var(--mono-mode-tint), var(--_mono-alert-bg));\r\n  --_mono-alert-edge: transparent;\r\n  --_mono-alert-ink: var(--_mono-alert-c);\r\n  --_mono-alert-sub-ink: color-mix(in oklab, var(--_mono-alert-c) 90%, transparent);\r\n}\r\n\r\n/* solid — the hue as the plate */\r\n[mono-alert][mono-variant='solid'] {\r\n  --_mono-alert-surface: var(--_mono-alert-solid-bg);\r\n  --_mono-alert-edge: transparent;\r\n  --_mono-alert-ink: var(--_mono-alert-solid-fg);\r\n  --_mono-alert-sub-ink: color-mix(in oklab, var(--_mono-alert-solid-fg) 90%, transparent);\r\n  --_mono-alert-bar: var(--_mono-alert-solid-fg);\r\n}\r\n\r\n/* text — no plate, no edge: an inline notice in the hue */\r\n[mono-alert][mono-variant='text'] {\r\n  --_mono-alert-surface: transparent;\r\n  --_mono-alert-edge: transparent;\r\n  --_mono-alert-ink: var(--_mono-alert-c);\r\n  --_mono-alert-sub-ink: color-mix(in oklab, var(--_mono-alert-c) 90%, transparent);\r\n}\r\n\r\n/* =========================================\r\n   Stacking — consecutive visible alerts keep a gap; a hidden (✕-ed) one takes\r\n   no room, so the rest move up. `[mono-alert-group]` lays them out itself.\r\n   ========================================= */\r\n\r\n:where(mono-alert, mono-shadow-alert, [mono-alert]):not([hidden]) ~ :where(mono-alert, mono-shadow-alert, [mono-alert]):not([hidden]) {\r\n  margin-block-start: var(--mono-alert-stack-gap, calc(var(--mono-spacing) * 3));\r\n}\r\n\r\n[mono-alert-group] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-alert-group-gap, calc(var(--mono-spacing) * 3));\r\n}\r\n\r\n[mono-alert-group] > :is(mono-alert, mono-shadow-alert, [mono-alert]) {\r\n  margin-block-start: 0;\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\alert\alert.css?raw.js
+var alert_css_raw_default = "/* =========================================================================\r\n   mono-alert — a port of Basecoat's `.alert` (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-alert color=\"danger\" variant=\"tonal\" icon=\"i-mdi-alert-outline\"\r\n                 title=\"Payment failed\" subtitle=\"Check the card details.\" clearable>\r\n     <div mono-alert mono-color=\"danger\" mono-variant=\"tonal\" mono-clearable role=\"alert\">\r\n       <span mono-icon><svg …></svg></span>\r\n       <div mono-title>Payment failed</div>\r\n       <div mono-subtitle>Check the card details.</div>\r\n       <button type=\"button\" mono-clear aria-label=\"Close\"><svg …></svg></button>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-variant])` = outline, `:not([mono-color])` = neutral).\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-alert]                           ≡ .alert (grid gap-0.5 rounded-lg border px-4 py-3 text-sm bg-card text-card-foreground)\r\n     [mono-alert]:has(> [mono-icon])        ≡ .alert has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5\r\n     [mono-icon]                            ≡ .alert > svg (row-span-2 translate-y-0.5 size-4 text-current)\r\n     [mono-title]                           ≡ .alert > :is(h2…h6, strong, [data-title]) (font-medium, col-start-2 beside an icon)\r\n     [mono-subtitle]                        ≡ .alert > section (text-sm text-muted-foreground text-balance)\r\n     [mono-body]                            ≡ EXTENSION (`slot=\"body\"`: the whole content, across both columns)\r\n     [mono-clear]                           ≡ .alert > footer position (top-2.5 end-3), drawn as a ghost ✕\r\n     [mono-variant=\"outline\"] (default)     ≡ .alert verbatim; with a colour ≡ .alert[data-variant='destructive'] for every hue\r\n     [mono-variant=\"tonal|solid|text\"]      ≡ EXTENSION — the same four looks as mono-button\r\n     [mono-color=\"…\"]                       ≡ EXTENSION (`danger` is upstream's destructive)\r\n     [mono-size=\"…\"]                        ≡ EXTENSION — ONE scale factor over the md metrics (see below)\r\n\r\n   Specificity contract: a part's RESTING rule is `:where([mono-alert]) > [part]`\r\n   = (0,1,0), so a utility class handed in through `cssClass` wins by order;\r\n   variant / colour / size rules are heavier and win over it.\r\n\r\n   The shadow build renders every region and marks the empty ones [mono-empty];\r\n   this sheet hides them.\r\n\r\n   FLAVORS set `--mono-alert-{radius,padding-x,padding-y,font-size,\r\n   subtitle-font-size,subtitle-line-height,icon-size,icon-gap,icon-offset,\r\n   title-weight,accent-bar-width}` — the md values only: every size is a multiple\r\n   of md, so a flavor never has to restate a ladder (and can never leave one step\r\n   behind). Every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.alert(?!-dialog)\"`).\r\n   ========================================================================= */\r\n\r\nmono-alert {\r\n  display: block;\r\n}\r\n\r\n/* The ✕ hides the alert with the native `hidden` attribute; the element's own\r\n   `display: block` would otherwise out-rank the UA's `[hidden]`. */\r\nmono-alert[hidden],\r\n[mono-alert][hidden] {\r\n  display: none;\r\n}\r\n\r\n[mono-alert] {\r\n  /* ── presets, RESET on every alert ───────────────────────────────────────\r\n     A preset is written by a [mono-size] / [mono-color] rule on the alert that\r\n     has the prop — and a custom property INHERITS. An alert nested in another\r\n     alert's body (a supported layout) would otherwise pick up the outer one's\r\n     size and colour: a plain alert inside a `danger` `lg` one came out large.\r\n     Declaring the defaults here gives every alert its own; the qualified rules\r\n     are heavier and still win on the element they target. */\r\n  --_mono-alert-scale-preset: 1;\r\n  --_mono-alert-c-preset: var(--card-foreground);\r\n  --_mono-alert-solid-bg-preset: var(--foreground);\r\n  --_mono-alert-solid-fg-preset: var(--background);\r\n\r\n  /* ── the size factor: md = 1; every metric below is md × this ───────────── */\r\n  --_mono-alert-scale: var(--_mono-alert-scale-preset);\r\n\r\n  /* ── palette ─────────────────────────────────────────────────────────────── */\r\n  --_mono-alert-bg: var(--mono-alert-bg, var(--card));\r\n  --_mono-alert-text: var(--mono-alert-text, var(--card-foreground));\r\n  --_mono-alert-subtext: var(--mono-alert-subtext, var(--muted-foreground));\r\n  --_mono-alert-border-color: var(--mono-alert-border-color, var(--border));\r\n  --_mono-alert-border-width: var(--mono-alert-border-width, var(--mono-border-width));\r\n  /* the colour in play — the plain card ink unless a [mono-color] rule re-points it */\r\n  --_mono-alert-c: var(--_mono-alert-c-preset);\r\n  --_mono-alert-solid-bg: var(--_mono-alert-solid-bg-preset);\r\n  --_mono-alert-solid-fg: var(--_mono-alert-solid-fg-preset);\r\n\r\n  /* ── shape + md metrics ──────────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .alert — grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4 */\r\n  --_mono-alert-radius: var(--mono-alert-radius, var(--mono-radius-lg));\r\n  --_mono-alert-padding-x: calc(var(--mono-alert-padding-x, calc(var(--mono-spacing) * 4)) * var(--_mono-alert-scale));\r\n  --_mono-alert-padding-y: calc(var(--mono-alert-padding-y, calc(var(--mono-spacing) * 3)) * var(--_mono-alert-scale));\r\n  --_mono-alert-gap: calc(var(--mono-alert-gap, calc(var(--mono-spacing) * 0.5)) * var(--_mono-alert-scale));\r\n  --_mono-alert-icon-gap: calc(var(--mono-alert-icon-gap, calc(var(--mono-spacing) * 2.5)) * var(--_mono-alert-scale));\r\n  --_mono-alert-icon-size: calc(var(--mono-alert-icon-size, calc(var(--mono-spacing) * 4)) * var(--_mono-alert-scale));\r\n  --_mono-alert-icon-offset: calc(var(--mono-alert-icon-offset, calc(var(--mono-spacing) * 0.5)) * var(--_mono-alert-scale));\r\n  --_mono-alert-font-size: calc(var(--mono-alert-font-size, var(--mono-text-sm)) * var(--_mono-alert-scale));\r\n  --_mono-alert-line-height: var(--mono-alert-line-height, var(--mono-text-sm--lh));\r\n  --_mono-alert-title-weight: var(--mono-alert-title-weight, var(--mono-font-weight-medium));\r\n  --_mono-alert-subtitle-font-size: calc(var(--mono-alert-subtitle-font-size, var(--mono-text-sm)) * var(--_mono-alert-scale));\r\n  --_mono-alert-subtitle-line-height: var(--mono-alert-subtitle-line-height, var(--mono-text-sm--lh));\r\n  /* sera's start-edge bar (`after:w-0.5 after:bg-foreground`); 0 everywhere else */\r\n  --_mono-alert-accent-bar-width: var(--mono-alert-accent-bar-width, 0px);\r\n  --_mono-alert-clear-size: calc(var(--mono-alert-clear-size, calc(var(--mono-spacing) * 6)) * var(--_mono-alert-scale));\r\n\r\n  /* ── the look, resolved per variant below ───────────────────────────────── */\r\n  --_mono-alert-surface: var(--_mono-alert-bg);\r\n  --_mono-alert-edge: var(--_mono-alert-border-color);\r\n  --_mono-alert-ink: var(--_mono-alert-text);\r\n  --_mono-alert-sub-ink: var(--_mono-alert-subtext);\r\n  --_mono-alert-bar: var(--_mono-alert-c);\r\n\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr);\r\n  align-items: start;\r\n  row-gap: var(--_mono-alert-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  padding: var(--_mono-alert-padding-y) var(--_mono-alert-padding-x);\r\n  border: var(--_mono-alert-border-width) solid var(--_mono-alert-edge);\r\n  border-radius: var(--_mono-alert-radius);\r\n  background-color: var(--_mono-alert-surface);\r\n  color: var(--_mono-alert-ink);\r\n  font-size: var(--_mono-alert-font-size);\r\n  line-height: var(--_mono-alert-line-height);\r\n  text-align: start;\r\n}\r\n\r\n/* sera — `relative after:-inset-y-px after:-start-px after:w-0.5 after:absolute\r\n   after:bg-foreground` (destructive: after:bg-destructive). Zero-width elsewhere. */\r\n[mono-alert]::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset-block: calc(var(--_mono-alert-border-width) * -1);\r\n  inset-inline-start: calc(var(--_mono-alert-border-width) * -1);\r\n  width: var(--_mono-alert-accent-bar-width);\r\n  background: var(--_mono-alert-bar);\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/alert.css .alert — relative w-full (the icon column\r\n   below is vega's `has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5`) */\r\n[mono-alert]:has(> [mono-icon]:not([mono-empty])) {\r\n  grid-template-columns: auto minmax(0, 1fr);\r\n  column-gap: var(--_mono-alert-icon-gap);\r\n}\r\n\r\n/* The shadow build renders every region and marks the empty ones. A child\r\n   combinator, so a nested component's own regions inside the body are left alone. */\r\n[mono-alert] > :is([mono-icon], [mono-title], [mono-subtitle], [mono-body])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Icon — `[&>svg]:row-span-2 translate-y-0.5 text-current size-4`\r\n   ========================================= */\r\n\r\n:where([mono-alert]) > [mono-icon] {\r\n  grid-row: span 2;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-alert-icon-size);\r\n  height: var(--_mono-alert-icon-size);\r\n  translate: 0 var(--_mono-alert-icon-offset);\r\n  color: currentColor;\r\n  line-height: 1;\r\n}\r\n\r\n/* Whatever paints the glyph fills the box: an inline svg (raw markup, a slotted\r\n   svg, the shadow build's bundled glyph) or the light build's iconify span.\r\n   Two attributes strong ON PURPOSE — UnoCSS's `i-*` sets width/height at (0,1,0)\r\n   and loads later — and scoped to the alert (a bare `[mono-glyph]` rule is global\r\n   and would resize every component's glyph).\r\n\r\n   DESCENDANT, not `>`: in the shadow build the glyph is the FALLBACK of\r\n   `<slot name=\"icon\">`, so the tree is [mono-icon] > slot > [mono-glyph] > svg.\r\n   A child combinator never matched it and the icon measured 0 × 0. (The slot is\r\n   `display: contents`, so the glyph is still the box's flex item.) */\r\n[mono-alert] > [mono-icon] :is(svg, img, [mono-glyph]) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* the light build's placeholder is invisible to layout, so the svg sizes against\r\n   the icon box, not against a zero-width span */\r\n[mono-alert] > [mono-icon] > [data-mono-slot='icon'] {\r\n  display: contents;\r\n}\r\n\r\n[mono-alert] > [mono-icon] slot::slotted(:is(svg, img, span)) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Title + subtitle\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .alert > :is(h2, h3, h4, h5, h6, strong, [data-title]), .alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) — font-medium\r\n   basecoat@1.0.2 components/alert.css .alert > :is(h2, h3, h4, h5, h6, strong, [data-title]) — min-h-4 */\r\n:where([mono-alert]) > [mono-title] {\r\n  min-height: var(--_mono-alert-icon-size);\r\n  margin: 0;\r\n  font-size: var(--_mono-alert-font-size);\r\n  line-height: var(--_mono-alert-line-height);\r\n  font-weight: var(--_mono-alert-title-weight);\r\n  color: inherit;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .alert > section — text-muted-foreground text-sm text-balance md:text-pretty */\r\n:where([mono-alert]) > [mono-subtitle] {\r\n  margin: 0;\r\n  font-size: var(--_mono-alert-subtitle-font-size);\r\n  line-height: var(--_mono-alert-subtitle-line-height);\r\n  color: var(--_mono-alert-sub-ink);\r\n  text-wrap: pretty;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) — col-start-2 */\r\n[mono-alert]:has(> [mono-icon]:not([mono-empty])) > :is([mono-title], [mono-subtitle]) {\r\n  grid-column-start: 2;\r\n}\r\n\r\n/* Raw markup puts the region attribute ON a prose tag, which a host page styles\r\n   by tag through a class selector (`.vp-doc h3`, (0,1,1)) — restate the type and\r\n   margin at (0,2,1) so the tag reads like the element's <div>. */\r\n[mono-alert] > :is(h1, h2, h3, h4, h5, h6, p, strong)[mono-title] {\r\n  margin: 0;\r\n  font-size: var(--_mono-alert-font-size);\r\n  line-height: var(--_mono-alert-line-height);\r\n  font-weight: var(--_mono-alert-title-weight);\r\n}\r\n\r\n[mono-alert] > :is(h1, h2, h3, h4, h5, h6, p, strong)[mono-subtitle] {\r\n  margin: 0;\r\n  font-size: var(--_mono-alert-subtitle-font-size);\r\n  line-height: var(--_mono-alert-subtitle-line-height);\r\n}\r\n\r\n/* =========================================\r\n   Body — `slot=\"body\"` / unslotted children: the whole content, both columns\r\n   ========================================= */\r\n\r\n:where([mono-alert]) > [mono-body] {\r\n  grid-column: 1 / -1;\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 components/alert.css .alert > section >> :where(p, ul, ol) — m-0\r\n   basecoat@1.0.2 components/alert.css .alert > section >> :where(p, ul, ol):not(:last-child) — mb-4 */\r\n:where([mono-alert]) > [mono-body] :where(p, ul, ol) {\r\n  margin: 0;\r\n}\r\n\r\n:where([mono-alert]) > [mono-body] :where(p, ul, ol):not(:last-child) {\r\n  margin-bottom: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   The ✕ — a ghost icon button at the top end, centred on the icon's line\r\n   basecoat@1.0.2 styles/vega.css .alert > footer, .alert[data-variant='destructive'] > footer — top-2.5 end-3\r\n   basecoat@1.0.2 components/alert.css .alert:has(> footer) — pe-[4.5rem] (here: just the button's room)\r\n   ========================================= */\r\n\r\n[mono-alert][mono-clearable] {\r\n  padding-inline-end: calc(var(--_mono-alert-padding-x) + var(--_mono-alert-clear-size));\r\n}\r\n\r\n:where([mono-alert]) > [mono-clear] {\r\n  position: absolute;\r\n  top: calc(\r\n    var(--_mono-alert-padding-y) + var(--_mono-alert-icon-offset) +\r\n      (var(--_mono-alert-icon-size) - var(--_mono-alert-clear-size)) / 2\r\n  );\r\n  inset-inline-end: calc(var(--_mono-alert-padding-x) - (var(--_mono-alert-clear-size) - var(--_mono-alert-icon-size)) / 2);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-alert-clear-size);\r\n  height: var(--_mono-alert-clear-size);\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-radius-md);\r\n  background: transparent;\r\n  color: inherit;\r\n  opacity: 0.7;\r\n  cursor: pointer;\r\n  transition:\r\n    opacity var(--mono-duration-fast, 100ms) var(--mono-ease),\r\n    background-color var(--mono-duration-fast, 100ms) var(--mono-ease);\r\n}\r\n\r\n:where([mono-alert]) > [mono-clear] > svg {\r\n  width: var(--_mono-alert-icon-size);\r\n  height: var(--_mono-alert-icon-size);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-alert]) > [mono-clear]:hover {\r\n    opacity: 1;\r\n    background-color: color-mix(in oklab, currentColor 10%, transparent);\r\n  }\r\n}\r\n\r\n:where([mono-alert]) > [mono-clear]:focus-visible {\r\n  opacity: 1;\r\n  outline: none;\r\n  box-shadow: 0 0 0 var(--mono-ring-width) color-mix(in oklab, var(--ring) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — one factor over the md metrics (md = 1, the unqualified root)\r\n   ========================================= */\r\n\r\n[mono-alert][mono-size='xs'] { --_mono-alert-scale-preset: 0.8; }\r\n[mono-alert][mono-size='sm'] { --_mono-alert-scale-preset: 0.9; }\r\n[mono-alert][mono-size='lg'] { --_mono-alert-scale-preset: 1.1; }\r\n[mono-alert][mono-size='xl'] { --_mono-alert-scale-preset: 1.25; }\r\n[mono-alert][mono-size='xxl'] { --_mono-alert-scale-preset: 1.4; }\r\n\r\n/* =========================================\r\n   Colours — `danger` is upstream's destructive; `secondary` is the grey\r\n   SURFACE pair (its ink is the foreground, its solid plate the surface)\r\n   ========================================= */\r\n\r\n[mono-alert][mono-color='primary'] { --_mono-alert-c-preset: var(--primary); --_mono-alert-solid-bg-preset: var(--primary); --_mono-alert-solid-fg-preset: var(--primary-foreground); }\r\n[mono-alert][mono-color='secondary'] { --_mono-alert-c-preset: var(--secondary-foreground); --_mono-alert-solid-bg-preset: var(--secondary); --_mono-alert-solid-fg-preset: var(--secondary-foreground); }\r\n[mono-alert][mono-color='success'] { --_mono-alert-c-preset: var(--success); --_mono-alert-solid-bg-preset: var(--success); --_mono-alert-solid-fg-preset: var(--success-foreground); }\r\n[mono-alert][mono-color='danger'] { --_mono-alert-c-preset: var(--destructive); --_mono-alert-solid-bg-preset: var(--destructive); --_mono-alert-solid-fg-preset: var(--destructive-foreground); }\r\n[mono-alert][mono-color='warning'] { --_mono-alert-c-preset: var(--warning); --_mono-alert-solid-bg-preset: var(--warning); --_mono-alert-solid-fg-preset: var(--warning-foreground); }\r\n[mono-alert][mono-color='info'] { --_mono-alert-c-preset: var(--info); --_mono-alert-solid-bg-preset: var(--info); --_mono-alert-solid-fg-preset: var(--info-foreground); }\r\n[mono-alert][mono-color='teal'] { --_mono-alert-c-preset: var(--teal); --_mono-alert-solid-bg-preset: var(--teal); --_mono-alert-solid-fg-preset: var(--teal-foreground); }\r\n[mono-alert][mono-color='purple'] { --_mono-alert-c-preset: var(--purple); --_mono-alert-solid-bg-preset: var(--purple); --_mono-alert-solid-fg-preset: var(--purple-foreground); }\r\n[mono-alert][mono-color='neutral'] { --_mono-alert-c-preset: var(--neutral); --_mono-alert-solid-bg-preset: var(--neutral); --_mono-alert-solid-fg-preset: var(--neutral-foreground); }\r\n[mono-alert][mono-color='dark'] { --_mono-alert-c-preset: var(--dark); --_mono-alert-solid-bg-preset: var(--dark); --_mono-alert-solid-fg-preset: var(--dark-foreground); }\r\n\r\n/* =========================================\r\n   Variants — each resolves surface / edge / ink / sub-ink\r\n   ========================================= */\r\n\r\n/* outline (default) WITH a colour —\r\n   basecoat@1.0.2 styles/vega.css .alert[data-variant='destructive'] — text-destructive bg-card [&>svg]:text-current\r\n   basecoat@1.0.2 styles/vega.css .alert[data-variant='destructive'] > section — text-destructive/90\r\n   generalised to every hue; the edge picks up the hue too (EXTENSION), mixed into\r\n   --border so it follows the mode. Without a colour it is `.alert` verbatim. */\r\n[mono-alert][mono-color]:is(:not([mono-variant]), [mono-variant='outline']) {\r\n  --_mono-alert-edge: color-mix(in oklab, var(--_mono-alert-c) 45%, var(--_mono-alert-border-color));\r\n  --_mono-alert-ink: var(--_mono-alert-c);\r\n  --_mono-alert-sub-ink: color-mix(in oklab, var(--_mono-alert-c) 90%, transparent);\r\n}\r\n\r\n/* tonal — the hue tinted over the card (chip `soft` / card `tonal`); dark mode\r\n   deepens the tint through --mono-mode-tint */\r\n[mono-alert][mono-variant='tonal'] {\r\n  --_mono-alert-surface: color-mix(in oklab, var(--_mono-alert-c) var(--mono-mode-tint), var(--_mono-alert-bg));\r\n  --_mono-alert-edge: transparent;\r\n  --_mono-alert-ink: var(--_mono-alert-c);\r\n  --_mono-alert-sub-ink: color-mix(in oklab, var(--_mono-alert-c) 90%, transparent);\r\n}\r\n\r\n/* solid — the hue as the plate */\r\n[mono-alert][mono-variant='solid'] {\r\n  --_mono-alert-surface: var(--_mono-alert-solid-bg);\r\n  --_mono-alert-edge: transparent;\r\n  --_mono-alert-ink: var(--_mono-alert-solid-fg);\r\n  --_mono-alert-sub-ink: color-mix(in oklab, var(--_mono-alert-solid-fg) 90%, transparent);\r\n  --_mono-alert-bar: var(--_mono-alert-solid-fg);\r\n}\r\n\r\n/* text — no plate, no edge: an inline notice in the hue */\r\n[mono-alert][mono-variant='text'] {\r\n  --_mono-alert-surface: transparent;\r\n  --_mono-alert-edge: transparent;\r\n  --_mono-alert-ink: var(--_mono-alert-c);\r\n  --_mono-alert-sub-ink: color-mix(in oklab, var(--_mono-alert-c) 90%, transparent);\r\n}\r\n\r\n/* =========================================\r\n   Stacking — consecutive visible alerts keep a gap; a hidden (✕-ed) one takes\r\n   no room, so the rest move up. `[mono-alert-group]` lays them out itself.\r\n   ========================================= */\r\n\r\n:where(mono-alert, mono-shadow-alert, [mono-alert]):not([hidden]) ~ :where(mono-alert, mono-shadow-alert, [mono-alert]):not([hidden]) {\r\n  margin-block-start: var(--mono-alert-stack-gap, calc(var(--mono-spacing) * 3));\r\n}\r\n\r\n[mono-alert-group] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-alert-group-gap, calc(var(--mono-spacing) * 3));\r\n}\r\n\r\n[mono-alert-group] > :is(mono-alert, mono-shadow-alert, [mono-alert]) {\r\n  margin-block-start: 0;\r\n}\r\n";
+
 //#endregion
 //#region src/components/alert/mono-alert.ts
 /** Named regions. Unslotted children fall into `body` (the capture fallback). */
-var ALERT_NAMED_SLOTS = [
+const ALERT_NAMED_SLOTS = [
 	"icon",
 	"title",
 	"subtitle",
 	"body"
 ];
-var MonoAlert = class MonoAlert extends MonoAlertCore(LitElement) {
+let MonoAlert = class MonoAlert extends MonoAlertCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
 		this._buckets = /* @__PURE__ */ new Map();
 	}
 	static {
-		this.styles = [unsafeCSS(alert_default)];
+		this.styles = [unsafeCSS(alert_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -168,9 +171,12 @@ var MonoAlert = class MonoAlert extends MonoAlertCore(LitElement) {
       data-mono-slot="body"
       ?mono-empty=${!this._hasBodySlot}
     ></div>`;
-		return html`${this._showsIcon ? html`<span class=${this._cls("mono-alert-icon", "icon")} mono-icon aria-hidden="true"
+		const icon = this._showsIcon ? html`<span class=${this._cls("mono-alert-icon", "icon")} mono-icon aria-hidden="true"
           >${this._hasIconSlot ? html`<span data-mono-slot="icon"></span>` : this._renderIconGlyph()}</span
-        >` : nothing}${this._showsTitle ? this._hasTitleSlot ? html`<div class=${this._cls("mono-alert-title", "title")} mono-title data-mono-slot="title"></div>` : html`<div class=${this._cls("mono-alert-title", "title")} mono-title>${this.title}</div>` : nothing}${this._showsSubtitle ? this._hasSubtitleSlot ? html`<div class=${this._cls("mono-alert-subtitle", "subtitle")} mono-subtitle data-mono-slot="subtitle"></div>` : html`<div class=${this._cls("mono-alert-subtitle", "subtitle")} mono-subtitle>${this.subtitle}</div>` : nothing}${body}`;
+        >` : nothing;
+		const title = this._showsTitle ? this._hasTitleSlot ? html`<div class=${this._cls("mono-alert-title", "title")} mono-title data-mono-slot="title"></div>` : html`<div class=${this._cls("mono-alert-title", "title")} mono-title>${this.title}</div>` : nothing;
+		const subtitle = this._showsSubtitle ? this._hasSubtitleSlot ? html`<div class=${this._cls("mono-alert-subtitle", "subtitle")} mono-subtitle data-mono-slot="subtitle"></div>` : html`<div class=${this._cls("mono-alert-subtitle", "subtitle")} mono-subtitle>${this.subtitle}</div>` : nothing;
+		return html`${icon}${title}${subtitle}${body}`;
 	}
 	/** Re-read body presence from the placed region (late `v-if` content). */
 	_watchBody() {
@@ -217,5 +223,6 @@ var MonoAlert = class MonoAlert extends MonoAlertCore(LitElement) {
 	}
 };
 MonoAlert = __decorate([customElement("mono-alert")], MonoAlert);
+
 //#endregion
-export { MonoAlert };
+export { MonoAlert };

package/dist/ui/breadcrumb.js

@@ -1,11 +1,12 @@
-import { l as monoHostChildNodes } from "../mono-ui-CPV7rrdo.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, n as arrayHasChanged, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-DW1WgfgT.js";
-import { t as isIconifyClass } from "../icon-dVhYJUIH.js";
+import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, n as arrayHasChanged, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
+import { t as isIconifyClass } from "../icon-ClxnYhBG.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
+
 //#region src/components/breadcrumb/breadcrumb-utils.ts
 /**
 * Coerce any `items` input to a `BreadcrumbItem[]`. Accepts an array (pass-through),
@@ -97,6 +98,7 @@ function breadcrumbRootAttrs(props) {
 		variant: props.variant === "default" ? null : props.variant
 	};
 }
+
 //#endregion
 //#region src/components/breadcrumb/breadcrumb-render.ts
 function clsFor(base, key, cssClass) {
@@ -267,6 +269,7 @@ function renderBreadcrumbItemsLeadingSep(items, ctx, startIndex = 0) {
 	});
 	return out;
 }
+
 //#endregion
 //#region src/components/breadcrumb/breadcrumb-core.ts
 /**
@@ -280,7 +283,7 @@ function renderBreadcrumbItemsLeadingSep(items, ctx, startIndex = 0) {
 *
 * SSR-safe: no `document`/`window` access except `focus()` (guarded by isServer).
 */
-var MonoBreadcrumbCore = (superClass) => {
+const MonoBreadcrumbCore = (superClass) => {
 	class MonoBreadcrumbCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -405,7 +408,8 @@ var MonoBreadcrumbCore = (superClass) => {
 		}
 		_findRegisteredItem(id) {
 			for (const child of this._listChildren) {
-				const found = findItem(child.getBreadcrumbItems?.() ?? [], id);
+				const items = child.getBreadcrumbItems?.() ?? [];
+				const found = findItem(items, id);
 				if (found) return found;
 			}
 			return null;
@@ -567,12 +571,14 @@ var MonoBreadcrumbCore = (superClass) => {
 	__decorate([state()], MonoBreadcrumbCoreClass.prototype, "_slotIcons", void 0);
 	return MonoBreadcrumbCoreClass;
 };
+
 //#endregion
-//#region src/components/breadcrumb/breadcrumb.css?raw
-var breadcrumb_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-breadcrumb — a port of Basecoat's `.breadcrumb` (basecoat-css@1.0.2,\r\n   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-breadcrumb size=\"lg\" color=\"success\" variant=\"contained\" truncate>\r\n     <nav mono-breadcrumb mono-size=\"lg\" mono-color=\"success\"\r\n          mono-variant=\"contained\" mono-truncate aria-label=\"Breadcrumb\">\r\n       <ol mono-list>\r\n         <li mono-item>\r\n           <a mono-action href=\"/\">\r\n             <span mono-icon>…</span>\r\n             <span mono-content><span mono-title>Home</span></span>\r\n             <span mono-badge=\"info\">3</span>\r\n           </a>\r\n         </li>\r\n         <li mono-separator aria-hidden=\"true\">›</li>\r\n         <li mono-item mono-current aria-current=\"page\">\r\n           <span mono-action><span mono-content><span mono-title>Now</span></span></span>\r\n         </li>\r\n       </ol>\r\n     </nav>\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])` = default). The old\r\n   classes (`.mono-breadcrumb.md.primary.default`) are still emitted as inert\r\n   hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-breadcrumb]      ≡ .breadcrumb (the <nav>) — a var scope\r\n     [mono-list]            ≡ .breadcrumb > ol (m-0 flex list-none flex-wrap\r\n                              items-center p-0 break-words, text-muted-foreground\r\n                              gap-1.5 text-sm sm:gap-2.5)\r\n     [mono-item]            ≡ .breadcrumb li (inline-flex items-center gap-1.5)\r\n     [mono-separator]       ≡ .breadcrumb li[aria-hidden='true'] (select-none),\r\n                              its glyph ≡ li[aria-hidden='true'] > svg (size-3.5)\r\n     [mono-action]          ≡ .breadcrumb a (rounded-sm outline-none\r\n                              focus-visible:ring-[3px] focus-visible:ring-ring/50,\r\n                              transition-colors hover:text-foreground)\r\n     [mono-current]         ≡ .breadcrumb [aria-current='page'] (font-normal\r\n                              text-foreground, cursor-default)\r\n     [mono-icon]            ≡ .breadcrumb li > span[aria-hidden='true']\r\n                              (flex items-center justify-center size-5,\r\n                              [&>svg]:size-4)\r\n     [mono-badge]           ≡ .badge — EXTENSION here (upstream's breadcrumb has\r\n                              none), so it borrows the badge's own shape\r\n     [mono-content]/[mono-title]   ≡ EXTENSION (upstream puts the label straight\r\n                              in the <a>; mono wraps it so `truncate` has\r\n                              something to clamp)\r\n     [mono-variant=…]       ≡ EXTENSION (upstream ships one breadcrumb)\r\n\r\n   THE DEFAULT VARIANT IS NOW BARE TEXT. Upstream's breadcrumb links carry no\r\n   padding, no background and no border — `rounded-sm` exists only so the focus\r\n   ring has a shape. The pre-port default padded every segment into a 5px-radius\r\n   chip. `contained` is where that look lives now; `--mono-breadcrumb-pad-x`/`-y`\r\n   are still the knobs, they just start at 0.\r\n\r\n   COLOUR IS A DEVIATION. Upstream inks hover and the current segment in\r\n   `--foreground`. mono's breadcrumb has a `color` prop, so it inks them in the\r\n   ROLE instead — and `color=\"surface\"` resolves the accent back to\r\n   `--foreground`, which is upstream exactly.\r\n\r\n   NO GRADIENTS. The contained variant's current segment was a two-stop gradient\r\n   with a coloured glow; it is now the flat role fill on the role's own\r\n   `-foreground`, the way `.btn[data-variant='primary']` is.\r\n\r\n   DARK MODE comes free — every colour resolves through a Basecoat token that\r\n   already flips. A selector crosses neither the custom-element host nor the\r\n   shadow boundary, so no `.dark` rule can live in component CSS.\r\n\r\n   FLAVORS set `--mono-breadcrumb-{gap,font,icon-size,sep-*,radius,badge-*}`\r\n   (+ the per-size forms); every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \".breadcrumb > ol\"`).\r\n   ========================================================================= */\r\n\r\nmono-breadcrumb {\r\n  display: block;\r\n}\r\n\r\n/* A composed child list renders its <li>s straight into the parent's <ol>. */\r\nmono-breadcrumb-list {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Root — the var scope\r\n   ========================================= */\r\n\r\n[mono-breadcrumb] {\r\n  /* ── the roles, each a public knob over a Basecoat token ────────────────── */\r\n  --_mono-breadcrumb-primary: var(--mono-breadcrumb-primary, var(--primary));\r\n  --_mono-breadcrumb-secondary: var(--mono-breadcrumb-secondary, var(--secondary-foreground));\r\n  --_mono-breadcrumb-success: var(--mono-breadcrumb-success, var(--success));\r\n  --_mono-breadcrumb-danger: var(--mono-breadcrumb-danger, var(--destructive));\r\n  --_mono-breadcrumb-warning: var(--mono-breadcrumb-warning, var(--warning));\r\n  --_mono-breadcrumb-info: var(--mono-breadcrumb-info, var(--info));\r\n  --_mono-breadcrumb-teal: var(--mono-breadcrumb-teal, var(--teal));\r\n  --_mono-breadcrumb-purple: var(--mono-breadcrumb-purple, var(--purple));\r\n  --_mono-breadcrumb-neutral: var(--mono-breadcrumb-neutral, var(--neutral));\r\n  --_mono-breadcrumb-dark: var(--mono-breadcrumb-dark, var(--dark));\r\n\r\n  /* The colour in play. DEVIATION: upstream inks hover and the current segment\r\n     in `--foreground`; `color=\"surface\"` is that exactly. */\r\n  --_mono-breadcrumb-accent: var(--mono-breadcrumb-accent, var(--_mono-breadcrumb-accent-preset, var(--_mono-breadcrumb-primary)));\r\n  --_mono-breadcrumb-on-accent: var(--mono-breadcrumb-on-accent, var(--_mono-breadcrumb-on-accent-preset, var(--primary-foreground)));\r\n\r\n  /* ── ink ────────────────────────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .breadcrumb > ol — text-muted-foreground gap-1.5 text-sm sm:gap-2.5\r\n     basecoat@1.0.2 styles/vega.css .breadcrumb [aria-current='page'] — font-normal text-foreground */\r\n  --_mono-breadcrumb-text: var(--mono-breadcrumb-text, var(--muted-foreground));\r\n  --_mono-breadcrumb-text-strong: var(--mono-breadcrumb-text-strong, var(--foreground));\r\n  --_mono-breadcrumb-sep-color: var(--mono-breadcrumb-sep-color, var(--_mono-breadcrumb-text));\r\n  --_mono-breadcrumb-surface: var(--mono-breadcrumb-surface, var(--background));\r\n  --_mono-breadcrumb-border: var(--mono-breadcrumb-border, var(--border));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ──────────────────\r\n     `gap-1.5` is the mobile step; `sm:gap-2.5` widens it (see the @media below). */\r\n  --_mono-breadcrumb-gap: var(--mono-breadcrumb-gap, var(--_mono-breadcrumb-gap-preset, var(--mono-breadcrumb-gap-md, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-breadcrumb-gap-wide: var(--mono-breadcrumb-gap-wide, var(--_mono-breadcrumb-gap-wide-preset, var(--mono-breadcrumb-gap-wide-md, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-breadcrumb-font: var(--mono-breadcrumb-font, var(--_mono-breadcrumb-font-preset, var(--mono-breadcrumb-font-md, var(--mono-text-sm))));\r\n  --_mono-breadcrumb-line-height: var(--mono-breadcrumb-line-height, var(--_mono-breadcrumb-line-height-preset, var(--mono-breadcrumb-line-height-md, var(--mono-text-sm--lh))));\r\n  --_mono-breadcrumb-font-weight: var(--mono-breadcrumb-font-weight, var(--mono-font-weight-normal));\r\n  /* basecoat@1.0.2 styles/vega.css .breadcrumb [aria-current='page'] — font-normal text-foreground:\r\n     upstream does NOT bold the current segment. ONE restores the bold it had. */\r\n  --_mono-breadcrumb-current-weight: var(--mono-breadcrumb-current-weight, var(--mono-font-weight-normal));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear\r\n     A breadcrumb's current crumb is the page's own label, and each flavor has a\r\n     house style for one — sera sets its chrome headings uppercase +\r\n     tracking-wider + semibold, and this is what lets it say so. */\r\n  --_mono-breadcrumb-current-transform: var(--mono-breadcrumb-current-transform, none);\r\n  --_mono-breadcrumb-current-tracking: var(--mono-breadcrumb-current-tracking, normal);\r\n  /* basecoat@1.0.2 styles/vega.css .breadcrumb li > span[aria-hidden='true'] — size-5 [&>svg]:size-4 */\r\n  --_mono-breadcrumb-icon-size: var(--mono-breadcrumb-icon-size, var(--_mono-breadcrumb-icon-size-preset, var(--mono-breadcrumb-icon-size-md, calc(var(--mono-spacing) * 4))));\r\n  /* basecoat@1.0.2 styles/vega.css .breadcrumb li[aria-hidden='true'] > svg — size-3.5 */\r\n  --_mono-breadcrumb-sep-size: var(--mono-breadcrumb-sep-size, var(--_mono-breadcrumb-sep-size-preset, var(--mono-breadcrumb-sep-size-md, calc(var(--mono-spacing) * 3.5))));\r\n  --_mono-breadcrumb-sep-font: var(--mono-breadcrumb-sep-font, var(--_mono-breadcrumb-sep-font-preset, var(--mono-breadcrumb-sep-font-md, var(--mono-text-sm))));\r\n\r\n  /* ── the action box. Upstream's <a> is BARE — `rounded-sm` is only there to\r\n     shape the focus ring — so the padding starts at 0 and `contained` /\r\n     `underlined` are what turn it into a chip. ───────────────────────────── */\r\n  --_mono-breadcrumb-pad-x: var(--mono-breadcrumb-pad-x, var(--_mono-breadcrumb-pad-x-preset, 0px));\r\n  --_mono-breadcrumb-pad-y: var(--mono-breadcrumb-pad-y, var(--_mono-breadcrumb-pad-y-preset, 0px));\r\n  --_mono-breadcrumb-radius: var(--mono-breadcrumb-radius, var(--_mono-breadcrumb-radius-preset, var(--mono-breadcrumb-radius-md, var(--mono-radius-sm))));\r\n  --_mono-breadcrumb-border-width: var(--mono-breadcrumb-border-width, var(--mono-border-width));\r\n\r\n  /* ── the badge — EXTENSION, borrowing `.badge`'s shape ───────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! */\r\n  --_mono-breadcrumb-badge-height: var(--mono-breadcrumb-badge-height, calc(var(--mono-spacing) * 5));\r\n  --_mono-breadcrumb-badge-pad-x: var(--mono-breadcrumb-badge-pad-x, calc(var(--mono-spacing) * 2));\r\n  --_mono-breadcrumb-badge-radius: var(--mono-breadcrumb-badge-radius, var(--mono-radius-4xl));\r\n  --_mono-breadcrumb-badge-font: var(--mono-breadcrumb-badge-font, var(--mono-text-xs));\r\n  --_mono-breadcrumb-badge-weight: var(--mono-breadcrumb-badge-weight, var(--mono-font-weight-medium));\r\n  --_mono-breadcrumb-badge-bg: var(--mono-breadcrumb-badge-bg, var(--secondary));\r\n  --_mono-breadcrumb-badge-color: var(--mono-breadcrumb-badge-color, var(--secondary-foreground));\r\n\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-breadcrumb-text);\r\n}\r\n\r\n[mono-breadcrumb],\r\n:where([mono-breadcrumb]) *,\r\n:where([mono-breadcrumb]) *::before,\r\n:where([mono-breadcrumb]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: upstream ships one breadcrumb\r\n   ========================================= */\r\n\r\n[mono-breadcrumb][mono-size=\"xs\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-xs, var(--mono-spacing));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-xs, var(--mono-text-xs));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-xs, calc(var(--mono-spacing) * 3));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-xs, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-xs, var(--mono-text-xs));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-xs, var(--mono-radius-sm));\r\n}\r\n\r\n[mono-breadcrumb][mono-size=\"sm\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-sm, var(--mono-spacing));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-sm, calc(var(--mono-spacing) * 2));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-sm, var(--mono-text-xs));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-sm, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-sm, var(--mono-text-xs));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-sm, var(--mono-radius-sm));\r\n}\r\n\r\n[mono-breadcrumb][mono-size=\"lg\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-lg, calc(var(--mono-spacing) * 2));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-lg, calc(var(--mono-spacing) * 3));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-lg, var(--mono-text-base));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-lg, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-lg, calc(var(--mono-spacing) * 4));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-lg, var(--mono-text-base));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-lg, var(--mono-radius-md));\r\n}\r\n\r\n[mono-breadcrumb][mono-size=\"xl\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-xl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-xl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-xl, var(--mono-text-lg));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-xl, calc(var(--mono-spacing) * 5));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-xl, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-xl, var(--mono-text-lg));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-xl, var(--mono-radius-md));\r\n}\r\n\r\n[mono-breadcrumb][mono-size=\"xxl\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-xxl, calc(var(--mono-spacing) * 3));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-xxl, calc(var(--mono-spacing) * 4));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-xxl, var(--mono-text-xl));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-xl--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-xxl, calc(var(--mono-spacing) * 6));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-xxl, calc(var(--mono-spacing) * 5));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-xxl, var(--mono-text-xl));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-xxl, var(--mono-radius-lg));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION, and the one deviation from upstream's ink\r\n   ========================================= */\r\n\r\n[mono-breadcrumb][mono-color=\"primary\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-primary);\r\n  --_mono-breadcrumb-on-accent-preset: var(--primary-foreground);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"secondary\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-secondary);\r\n  --_mono-breadcrumb-on-accent-preset: var(--secondary);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"success\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-success);\r\n  --_mono-breadcrumb-on-accent-preset: var(--success-foreground);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"danger\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-danger);\r\n  --_mono-breadcrumb-on-accent-preset: var(--destructive-foreground);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"warning\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-warning);\r\n  --_mono-breadcrumb-on-accent-preset: var(--warning-foreground);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"info\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-info);\r\n  --_mono-breadcrumb-on-accent-preset: var(--info-foreground);\r\n}\r\n[mono-breadcrumb][mono-color=\"teal\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-teal);\r\n  --_mono-breadcrumb-on-accent-preset: var(--teal-foreground);\r\n}\r\n[mono-breadcrumb][mono-color=\"purple\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-purple);\r\n  --_mono-breadcrumb-on-accent-preset: var(--purple-foreground);\r\n}\r\n[mono-breadcrumb][mono-color=\"neutral\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-neutral);\r\n  --_mono-breadcrumb-on-accent-preset: var(--neutral-foreground);\r\n}\r\n[mono-breadcrumb][mono-color=\"dark\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-dark);\r\n  --_mono-breadcrumb-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n/* `surface` is upstream's own ink: hover and the current segment go to\r\n   `--foreground` and nothing is branded. */\r\n[mono-breadcrumb][mono-color=\"surface\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-text-strong);\r\n  --_mono-breadcrumb-on-accent-preset: var(--background);\r\n}\r\n\r\n/* =========================================\r\n   The list\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb > ol — m-0 flex list-none flex-wrap items-center p-0 break-words */\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb > ol — text-muted-foreground gap-1.5 text-sm sm:gap-2.5\r\n   The selector carries the root on purpose: `.vp-doc ul, .vp-doc ol` is (0,1,1)\r\n   and would otherwise inject the left padding that breaks a flush breadcrumb. */\r\n:where([mono-breadcrumb]) [mono-list] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-breadcrumb-gap);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  min-width: 0;\r\n  overflow-wrap: break-word;\r\n  font-size: var(--_mono-breadcrumb-font);\r\n  line-height: var(--_mono-breadcrumb-line-height);\r\n}\r\n\r\n/* `sm:gap-2.5` — the row breathes once there is room for it. */\r\n@media (min-width: 640px) {\r\n  :where([mono-breadcrumb]) [mono-list] {\r\n    gap: var(--_mono-breadcrumb-gap-wide);\r\n  }\r\n}\r\n\r\n/* `truncate` CLAMPS, it does not force one line. Forcing `nowrap` meant the\r\n   row either overflowed its container or — once the crumbs were allowed to\r\n   shrink — squeezed short labels that had room, so `Dashboard` came out as\r\n   `Dash…` next to a half-empty row. Wrapping keeps every label at its clamp and\r\n   breaks the line instead. */\r\n\r\n/* VitePress puts `margin-top: 8px` on `li + li` and `margin-bottom: .5em` on\r\n   every `li`; either one stops the separators centring with the actions. */\r\n:where([mono-breadcrumb]) [mono-list] :is([mono-item], [mono-separator]) {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/* A composed child list renders a separator BEFORE each of its items, since it\r\n   cannot know whether it is the first sibling. The very first one is dropped. */\r\n[mono-list] > mono-breadcrumb-list:first-child > [mono-separator]:first-child {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Item\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb li — gap-1.5 */\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb li — inline-flex items-center */\r\n:where([mono-breadcrumb]) [mono-item] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  align-self: center;\r\n  gap: var(--_mono-breadcrumb-gap);\r\n  min-width: 0;\r\n}\r\n\r\n/* =========================================\r\n   Action — the segment itself\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb a — rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb a — transition-colors hover:text-foreground\r\n   DEVIATION: upstream's <a> is bare text. The padding and the border are kept as\r\n   knobs at 0 so `contained` / `underlined` — and a consumer — can turn the\r\n   segment into a chip without a second rule. */\r\n:where([mono-breadcrumb]) [mono-action] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--_mono-breadcrumb-gap);\r\n  padding: var(--_mono-breadcrumb-pad-y) var(--_mono-breadcrumb-pad-x);\r\n  border: var(--_mono-breadcrumb-border-width) solid transparent;\r\n  border-radius: var(--_mono-breadcrumb-radius);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  font-weight: var(--_mono-breadcrumb-font-weight);\r\n  text-align: left;\r\n  text-decoration: none;\r\n  white-space: nowrap;\r\n  user-select: none;\r\n  outline: none;\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}\r\n\r\n:where([mono-breadcrumb]) :is(a, button)[mono-action] {\r\n  cursor: pointer;\r\n}\r\n\r\n:where([mono-breadcrumb]) span[mono-action] {\r\n  cursor: default;\r\n}\r\n\r\n/* VitePress's `.vp-doc a` (0,1,1) underlines and re-inks every link, and adds an\r\n   external-link glyph on `target=\"_blank\"`. The current segment renders as a\r\n   <span>, so it is never reached. */\r\n[mono-breadcrumb] a[mono-action] {\r\n  text-decoration: none;\r\n  color: inherit;\r\n  font-weight: var(--_mono-breadcrumb-font-weight);\r\n}\r\n\r\n[mono-breadcrumb] a[mono-action]::after {\r\n  display: none !important;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-breadcrumb] :is(a, button)[mono-action]:hover {\r\n    color: var(--_mono-breadcrumb-accent);\r\n  }\r\n}\r\n\r\n/* `focus-visible:ring-[3px] focus-visible:ring-ring/50` */\r\n[mono-breadcrumb] [mono-action]:focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 var(--mono-ring-width-lg, 3px)\r\n    color-mix(in oklab, var(--ring) 50%, transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb [aria-current='page'] — font-normal text-foreground */\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb [aria-current='page'] — cursor-default */\r\n[mono-breadcrumb] [mono-item][mono-current] > [mono-action] {\r\n  color: var(--_mono-breadcrumb-accent);\r\n  font-weight: var(--_mono-breadcrumb-current-weight);\r\n  text-transform: var(--_mono-breadcrumb-current-transform);\r\n  letter-spacing: var(--_mono-breadcrumb-current-tracking);\r\n  cursor: default;\r\n}\r\n\r\n[mono-breadcrumb] [mono-item][mono-disabled] > [mono-action],\r\n[mono-breadcrumb] [mono-action]:disabled,\r\n[mono-breadcrumb][mono-disabled] [mono-action] {\r\n  opacity: var(--mono-disabled-opacity, 0.5);\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Variant: contained — EXTENSION, the pre-port chip\r\n   ========================================= */\r\n\r\n[mono-breadcrumb][mono-variant=\"contained\"] {\r\n  --_mono-breadcrumb-pad-x-preset: var(--mono-breadcrumb-contained-pad-x, calc(var(--mono-spacing) * 2));\r\n  --_mono-breadcrumb-pad-y-preset: var(--mono-breadcrumb-contained-pad-y, calc(var(--mono-spacing) * 1));\r\n}\r\n\r\n[mono-breadcrumb][mono-variant=\"contained\"] [mono-action] {\r\n  background: var(--_mono-breadcrumb-surface);\r\n  border-color: var(--_mono-breadcrumb-border);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-breadcrumb][mono-variant=\"contained\"] :is(a, button)[mono-action]:hover {\r\n    background: color-mix(in oklab, var(--_mono-breadcrumb-accent) var(--mono-mode-tint), transparent);\r\n    border-color: color-mix(in oklab, var(--_mono-breadcrumb-accent) var(--mono-mode-checked-border), transparent);\r\n  }\r\n}\r\n\r\n/* The flat role fill, not the old gradient-and-glow. */\r\n[mono-breadcrumb][mono-variant=\"contained\"] [mono-item][mono-current] > [mono-action] {\r\n  background: var(--_mono-breadcrumb-accent);\r\n  border-color: transparent;\r\n  color: var(--_mono-breadcrumb-on-accent);\r\n}\r\n\r\n[mono-breadcrumb][mono-variant=\"contained\"] [mono-item][mono-current] > [mono-action] [mono-badge] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-on-accent) 22%, transparent);\r\n  color: var(--_mono-breadcrumb-on-accent);\r\n}\r\n\r\n/* =========================================\r\n   Variant: underlined — EXTENSION\r\n   ========================================= */\r\n\r\n[mono-breadcrumb][mono-variant=\"underlined\"] [mono-action] {\r\n  border-radius: 0;\r\n  border-bottom-color: transparent;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-breadcrumb][mono-variant=\"underlined\"] :is(a, button)[mono-action]:hover {\r\n    border-bottom-color: color-mix(in oklab, var(--_mono-breadcrumb-accent) var(--mono-mode-checked-border), transparent);\r\n  }\r\n}\r\n\r\n[mono-breadcrumb][mono-variant=\"underlined\"] [mono-item][mono-current] > [mono-action] {\r\n  border-bottom-color: var(--_mono-breadcrumb-accent);\r\n}\r\n\r\n/* =========================================\r\n   Icon\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb li > span[aria-hidden='true'] — flex items-center justify-center */\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb li > span[aria-hidden='true'] — size-5 [&>svg]:size-4 */\r\n:where([mono-breadcrumb]) [mono-icon] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-breadcrumb-icon-size);\r\n  height: var(--_mono-breadcrumb-icon-size);\r\n  font-size: var(--_mono-breadcrumb-icon-size);\r\n  line-height: 1;\r\n}\r\n\r\n/* Three shapes end up inside the box and all must fill it:\r\n     shadow build, user-slotted → <slot> → ::slotted(svg)\r\n     light build, user-slotted  → <span data-mono-slot=\"icon-<id>\"> → svg\r\n     inline `item.icon` markup  → a direct child svg\r\n   The light placeholder is the subtle one: it parks the captured child, so the\r\n   SVG is a GRANDchild and a `> svg` rule misses it entirely. */\r\n[mono-icon] > svg,\r\n[mono-icon] > [data-mono-slot] > svg,\r\n[mono-icon] slot::slotted(svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* The placeholder must not become a 0-width flex item between the box and the\r\n   SVG — `display: contents` drops it from layout so the SVG sizes against the\r\n   box instead of against a zero-width parent. */\r\n[mono-icon] > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* Class + attribute = specificity (0,2,0), deliberately. UnoCSS's `i-…`\r\n   utilities set `width`/`height: 1.2em` (presetIcons `scale: 1.2`) at (0,1,0)\r\n   and their sheet loads AFTER this one, so a single selector loses and the glyph\r\n   overflows its box. Two selectors win regardless of sheet order — and it is the\r\n   only thing that works for the SHADOW build, where this span is a LIGHT-DOM\r\n   child of the host that no shadow-scoped selector can reach.\r\n   Scoped to the breadcrumb: its OWN class (every build sets it on the span — the\r\n   shadow build's span is a light-DOM child of the host, outside [mono-breadcrumb])\r\n   OR anything inside a [mono-breadcrumb] root (raw CSS markup writes a bare\r\n   `<span mono-glyph class=\"i-…\">`). Still (0,2,0): `:is()` weighs its heaviest\r\n   argument. A bare `[mono-glyph][mono-glyph]` is global and stretched every other\r\n   component's `[mono-glyph]` to 100% — the accordion's icon chip filled its header. */\r\n:is(.mono-breadcrumb-iconify, [mono-breadcrumb] *)[mono-glyph] {\r\n  display: inline-block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n/* =========================================\r\n   Content / title\r\n   ========================================= */\r\n\r\n:where([mono-breadcrumb]) [mono-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-breadcrumb]) [mono-title] {\r\n  font-size: inherit;\r\n  font-weight: inherit;\r\n  color: inherit;\r\n  line-height: inherit;\r\n}\r\n\r\n/* A flex item's `min-width` is `auto` — its content — so without this the\r\n   crumbs could not shrink past their clamp and the row simply overflowed its\r\n   container (measured: 543px of crumbs in a 512px box). Letting the chain go to\r\n   zero turns the clamp into a CEILING: a crumb takes at most `truncate-width`,\r\n   and less when the row is tight. */\r\n[mono-breadcrumb][mono-truncate] :is([mono-item], [mono-action], [mono-content]) {\r\n  min-width: 0;\r\n}\r\n\r\n[mono-breadcrumb][mono-truncate] [mono-title] {\r\n  display: block;\r\n  max-width: var(--mono-breadcrumb-truncate-width, 12ch);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n[mono-breadcrumb][mono-truncate] [mono-item][mono-current] [mono-title] {\r\n  max-width: var(--mono-breadcrumb-truncate-width-current, 18ch);\r\n}\r\n\r\n/* =========================================\r\n   Badge — EXTENSION, borrowing `.badge`'s shape\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! */\r\n:where([mono-breadcrumb]) [mono-badge] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--mono-spacing);\r\n  height: var(--_mono-breadcrumb-badge-height);\r\n  padding: 0 var(--_mono-breadcrumb-badge-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-breadcrumb-badge-radius);\r\n  font-size: var(--_mono-breadcrumb-badge-font);\r\n  font-weight: var(--_mono-breadcrumb-badge-weight);\r\n  line-height: 1;\r\n  background: var(--_mono-breadcrumb-badge-bg);\r\n  color: var(--_mono-breadcrumb-badge-color);\r\n}\r\n\r\n/* The roles ink the pill tonally — the same wash the ported chip and menu use. */\r\n[mono-breadcrumb] [mono-badge=\"primary\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-primary) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-primary);\r\n}\r\n\r\n[mono-breadcrumb] [mono-badge=\"success\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-success) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-success);\r\n}\r\n\r\n[mono-breadcrumb] [mono-badge=\"danger\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-danger) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-danger);\r\n}\r\n\r\n[mono-breadcrumb] [mono-badge=\"warning\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-warning) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-warning);\r\n}\r\n\r\n[mono-breadcrumb] [mono-badge=\"info\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-info) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-info);\r\n}\r\n\r\n/* =========================================\r\n   Separator\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb li[aria-hidden='true'] — select-none */\r\n:where([mono-breadcrumb]) [mono-separator] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  align-self: center;\r\n  /* Upstream's separator is an SVG at `size-3.5`, so the slot between two\r\n     crumbs is 14px wide whatever is in it. A text glyph like `›` is barely 4px,\r\n     which — on a flavor with a tight gap — left the labels all but touching.\r\n     Reserving the same box is what keeps the row legible either way. */\r\n  min-width: var(--_mono-breadcrumb-sep-size);\r\n  font-size: var(--_mono-breadcrumb-sep-font);\r\n  line-height: 1;\r\n  color: var(--_mono-breadcrumb-sep-color);\r\n  user-select: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb li[aria-hidden='true'] > svg — size-3.5 */\r\n[mono-separator] > svg,\r\n[mono-separator] > [data-mono-slot] > svg,\r\n[mono-separator] slot::slotted(svg) {\r\n  display: block;\r\n  width: var(--_mono-breadcrumb-sep-size);\r\n  height: var(--_mono-breadcrumb-sep-size);\r\n}\r\n\r\n[mono-separator] > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb [data-rtl-flip] — rtl:rotate-180 */\r\n[dir=\"rtl\"] [mono-breadcrumb] [mono-separator] > svg {\r\n  rotate: 180deg;\r\n}\r\n\r\n/* =========================================\r\n   Reduced motion\r\n   ========================================= */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-breadcrumb] [mono-action] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\breadcrumb\breadcrumb.css?raw.js
+var breadcrumb_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-breadcrumb — a port of Basecoat's `.breadcrumb` (basecoat-css@1.0.2,\r\n   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-breadcrumb size=\"lg\" color=\"success\" variant=\"contained\" truncate>\r\n     <nav mono-breadcrumb mono-size=\"lg\" mono-color=\"success\"\r\n          mono-variant=\"contained\" mono-truncate aria-label=\"Breadcrumb\">\r\n       <ol mono-list>\r\n         <li mono-item>\r\n           <a mono-action href=\"/\">\r\n             <span mono-icon>…</span>\r\n             <span mono-content><span mono-title>Home</span></span>\r\n             <span mono-badge=\"info\">3</span>\r\n           </a>\r\n         </li>\r\n         <li mono-separator aria-hidden=\"true\">›</li>\r\n         <li mono-item mono-current aria-current=\"page\">\r\n           <span mono-action><span mono-content><span mono-title>Now</span></span></span>\r\n         </li>\r\n       </ol>\r\n     </nav>\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])` = default). The old\r\n   classes (`.mono-breadcrumb.md.primary.default`) are still emitted as inert\r\n   hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-breadcrumb]      ≡ .breadcrumb (the <nav>) — a var scope\r\n     [mono-list]            ≡ .breadcrumb > ol (m-0 flex list-none flex-wrap\r\n                              items-center p-0 break-words, text-muted-foreground\r\n                              gap-1.5 text-sm sm:gap-2.5)\r\n     [mono-item]            ≡ .breadcrumb li (inline-flex items-center gap-1.5)\r\n     [mono-separator]       ≡ .breadcrumb li[aria-hidden='true'] (select-none),\r\n                              its glyph ≡ li[aria-hidden='true'] > svg (size-3.5)\r\n     [mono-action]          ≡ .breadcrumb a (rounded-sm outline-none\r\n                              focus-visible:ring-[3px] focus-visible:ring-ring/50,\r\n                              transition-colors hover:text-foreground)\r\n     [mono-current]         ≡ .breadcrumb [aria-current='page'] (font-normal\r\n                              text-foreground, cursor-default)\r\n     [mono-icon]            ≡ .breadcrumb li > span[aria-hidden='true']\r\n                              (flex items-center justify-center size-5,\r\n                              [&>svg]:size-4)\r\n     [mono-badge]           ≡ .badge — EXTENSION here (upstream's breadcrumb has\r\n                              none), so it borrows the badge's own shape\r\n     [mono-content]/[mono-title]   ≡ EXTENSION (upstream puts the label straight\r\n                              in the <a>; mono wraps it so `truncate` has\r\n                              something to clamp)\r\n     [mono-variant=…]       ≡ EXTENSION (upstream ships one breadcrumb)\r\n\r\n   THE DEFAULT VARIANT IS NOW BARE TEXT. Upstream's breadcrumb links carry no\r\n   padding, no background and no border — `rounded-sm` exists only so the focus\r\n   ring has a shape. The pre-port default padded every segment into a 5px-radius\r\n   chip. `contained` is where that look lives now; `--mono-breadcrumb-pad-x`/`-y`\r\n   are still the knobs, they just start at 0.\r\n\r\n   COLOUR IS A DEVIATION. Upstream inks hover and the current segment in\r\n   `--foreground`. mono's breadcrumb has a `color` prop, so it inks them in the\r\n   ROLE instead — and `color=\"surface\"` resolves the accent back to\r\n   `--foreground`, which is upstream exactly.\r\n\r\n   NO GRADIENTS. The contained variant's current segment was a two-stop gradient\r\n   with a coloured glow; it is now the flat role fill on the role's own\r\n   `-foreground`, the way `.btn[data-variant='primary']` is.\r\n\r\n   DARK MODE comes free — every colour resolves through a Basecoat token that\r\n   already flips. A selector crosses neither the custom-element host nor the\r\n   shadow boundary, so no `.dark` rule can live in component CSS.\r\n\r\n   FLAVORS set `--mono-breadcrumb-{gap,font,icon-size,sep-*,radius,badge-*}`\r\n   (+ the per-size forms); every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \".breadcrumb > ol\"`).\r\n   ========================================================================= */\r\n\r\nmono-breadcrumb {\r\n  display: block;\r\n}\r\n\r\n/* A composed child list renders its <li>s straight into the parent's <ol>. */\r\nmono-breadcrumb-list {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Root — the var scope\r\n   ========================================= */\r\n\r\n[mono-breadcrumb] {\r\n  /* ── the roles, each a public knob over a Basecoat token ────────────────── */\r\n  --_mono-breadcrumb-primary: var(--mono-breadcrumb-primary, var(--primary));\r\n  --_mono-breadcrumb-secondary: var(--mono-breadcrumb-secondary, var(--secondary-foreground));\r\n  --_mono-breadcrumb-success: var(--mono-breadcrumb-success, var(--success));\r\n  --_mono-breadcrumb-danger: var(--mono-breadcrumb-danger, var(--destructive));\r\n  --_mono-breadcrumb-warning: var(--mono-breadcrumb-warning, var(--warning));\r\n  --_mono-breadcrumb-info: var(--mono-breadcrumb-info, var(--info));\r\n  --_mono-breadcrumb-teal: var(--mono-breadcrumb-teal, var(--teal));\r\n  --_mono-breadcrumb-purple: var(--mono-breadcrumb-purple, var(--purple));\r\n  --_mono-breadcrumb-neutral: var(--mono-breadcrumb-neutral, var(--neutral));\r\n  --_mono-breadcrumb-dark: var(--mono-breadcrumb-dark, var(--dark));\r\n\r\n  /* The colour in play. DEVIATION: upstream inks hover and the current segment\r\n     in `--foreground`; `color=\"surface\"` is that exactly. */\r\n  --_mono-breadcrumb-accent: var(--mono-breadcrumb-accent, var(--_mono-breadcrumb-accent-preset, var(--_mono-breadcrumb-primary)));\r\n  --_mono-breadcrumb-on-accent: var(--mono-breadcrumb-on-accent, var(--_mono-breadcrumb-on-accent-preset, var(--primary-foreground)));\r\n\r\n  /* ── ink ────────────────────────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .breadcrumb > ol — text-muted-foreground gap-1.5 text-sm sm:gap-2.5\r\n     basecoat@1.0.2 styles/vega.css .breadcrumb [aria-current='page'] — font-normal text-foreground */\r\n  --_mono-breadcrumb-text: var(--mono-breadcrumb-text, var(--muted-foreground));\r\n  --_mono-breadcrumb-text-strong: var(--mono-breadcrumb-text-strong, var(--foreground));\r\n  --_mono-breadcrumb-sep-color: var(--mono-breadcrumb-sep-color, var(--_mono-breadcrumb-text));\r\n  --_mono-breadcrumb-surface: var(--mono-breadcrumb-surface, var(--background));\r\n  --_mono-breadcrumb-border: var(--mono-breadcrumb-border, var(--border));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ──────────────────\r\n     `gap-1.5` is the mobile step; `sm:gap-2.5` widens it (see the @media below). */\r\n  --_mono-breadcrumb-gap: var(--mono-breadcrumb-gap, var(--_mono-breadcrumb-gap-preset, var(--mono-breadcrumb-gap-md, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-breadcrumb-gap-wide: var(--mono-breadcrumb-gap-wide, var(--_mono-breadcrumb-gap-wide-preset, var(--mono-breadcrumb-gap-wide-md, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-breadcrumb-font: var(--mono-breadcrumb-font, var(--_mono-breadcrumb-font-preset, var(--mono-breadcrumb-font-md, var(--mono-text-sm))));\r\n  --_mono-breadcrumb-line-height: var(--mono-breadcrumb-line-height, var(--_mono-breadcrumb-line-height-preset, var(--mono-breadcrumb-line-height-md, var(--mono-text-sm--lh))));\r\n  --_mono-breadcrumb-font-weight: var(--mono-breadcrumb-font-weight, var(--mono-font-weight-normal));\r\n  /* basecoat@1.0.2 styles/vega.css .breadcrumb [aria-current='page'] — font-normal text-foreground:\r\n     upstream does NOT bold the current segment. ONE restores the bold it had. */\r\n  --_mono-breadcrumb-current-weight: var(--mono-breadcrumb-current-weight, var(--mono-font-weight-normal));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear\r\n     A breadcrumb's current crumb is the page's own label, and each flavor has a\r\n     house style for one — sera sets its chrome headings uppercase +\r\n     tracking-wider + semibold, and this is what lets it say so. */\r\n  --_mono-breadcrumb-current-transform: var(--mono-breadcrumb-current-transform, none);\r\n  --_mono-breadcrumb-current-tracking: var(--mono-breadcrumb-current-tracking, normal);\r\n  /* basecoat@1.0.2 styles/vega.css .breadcrumb li > span[aria-hidden='true'] — size-5 [&>svg]:size-4 */\r\n  --_mono-breadcrumb-icon-size: var(--mono-breadcrumb-icon-size, var(--_mono-breadcrumb-icon-size-preset, var(--mono-breadcrumb-icon-size-md, calc(var(--mono-spacing) * 4))));\r\n  /* basecoat@1.0.2 styles/vega.css .breadcrumb li[aria-hidden='true'] > svg — size-3.5 */\r\n  --_mono-breadcrumb-sep-size: var(--mono-breadcrumb-sep-size, var(--_mono-breadcrumb-sep-size-preset, var(--mono-breadcrumb-sep-size-md, calc(var(--mono-spacing) * 3.5))));\r\n  --_mono-breadcrumb-sep-font: var(--mono-breadcrumb-sep-font, var(--_mono-breadcrumb-sep-font-preset, var(--mono-breadcrumb-sep-font-md, var(--mono-text-sm))));\r\n\r\n  /* ── the action box. Upstream's <a> is BARE — `rounded-sm` is only there to\r\n     shape the focus ring — so the padding starts at 0 and `contained` /\r\n     `underlined` are what turn it into a chip. ───────────────────────────── */\r\n  --_mono-breadcrumb-pad-x: var(--mono-breadcrumb-pad-x, var(--_mono-breadcrumb-pad-x-preset, 0px));\r\n  --_mono-breadcrumb-pad-y: var(--mono-breadcrumb-pad-y, var(--_mono-breadcrumb-pad-y-preset, 0px));\r\n  --_mono-breadcrumb-radius: var(--mono-breadcrumb-radius, var(--_mono-breadcrumb-radius-preset, var(--mono-breadcrumb-radius-md, var(--mono-radius-sm))));\r\n  --_mono-breadcrumb-border-width: var(--mono-breadcrumb-border-width, var(--mono-border-width));\r\n\r\n  /* ── the badge — EXTENSION, borrowing `.badge`'s shape ───────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! */\r\n  --_mono-breadcrumb-badge-height: var(--mono-breadcrumb-badge-height, calc(var(--mono-spacing) * 5));\r\n  --_mono-breadcrumb-badge-pad-x: var(--mono-breadcrumb-badge-pad-x, calc(var(--mono-spacing) * 2));\r\n  --_mono-breadcrumb-badge-radius: var(--mono-breadcrumb-badge-radius, var(--mono-radius-4xl));\r\n  --_mono-breadcrumb-badge-font: var(--mono-breadcrumb-badge-font, var(--mono-text-xs));\r\n  --_mono-breadcrumb-badge-weight: var(--mono-breadcrumb-badge-weight, var(--mono-font-weight-medium));\r\n  --_mono-breadcrumb-badge-bg: var(--mono-breadcrumb-badge-bg, var(--secondary));\r\n  --_mono-breadcrumb-badge-color: var(--mono-breadcrumb-badge-color, var(--secondary-foreground));\r\n\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-breadcrumb-text);\r\n}\r\n\r\n[mono-breadcrumb],\r\n:where([mono-breadcrumb]) *,\r\n:where([mono-breadcrumb]) *::before,\r\n:where([mono-breadcrumb]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: upstream ships one breadcrumb\r\n   ========================================= */\r\n\r\n[mono-breadcrumb][mono-size=\"xs\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-xs, var(--mono-spacing));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-xs, var(--mono-text-xs));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-xs, calc(var(--mono-spacing) * 3));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-xs, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-xs, var(--mono-text-xs));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-xs, var(--mono-radius-sm));\r\n}\r\n\r\n[mono-breadcrumb][mono-size=\"sm\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-sm, var(--mono-spacing));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-sm, calc(var(--mono-spacing) * 2));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-sm, var(--mono-text-xs));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-sm, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-sm, var(--mono-text-xs));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-sm, var(--mono-radius-sm));\r\n}\r\n\r\n[mono-breadcrumb][mono-size=\"lg\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-lg, calc(var(--mono-spacing) * 2));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-lg, calc(var(--mono-spacing) * 3));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-lg, var(--mono-text-base));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-lg, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-lg, calc(var(--mono-spacing) * 4));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-lg, var(--mono-text-base));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-lg, var(--mono-radius-md));\r\n}\r\n\r\n[mono-breadcrumb][mono-size=\"xl\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-xl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-xl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-xl, var(--mono-text-lg));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-xl, calc(var(--mono-spacing) * 5));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-xl, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-xl, var(--mono-text-lg));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-xl, var(--mono-radius-md));\r\n}\r\n\r\n[mono-breadcrumb][mono-size=\"xxl\"] {\r\n  --_mono-breadcrumb-gap-preset: var(--mono-breadcrumb-gap-xxl, calc(var(--mono-spacing) * 3));\r\n  --_mono-breadcrumb-gap-wide-preset: var(--mono-breadcrumb-gap-wide-xxl, calc(var(--mono-spacing) * 4));\r\n  --_mono-breadcrumb-font-preset: var(--mono-breadcrumb-font-xxl, var(--mono-text-xl));\r\n  --_mono-breadcrumb-line-height-preset: var(--mono-text-xl--lh);\r\n  --_mono-breadcrumb-icon-size-preset: var(--mono-breadcrumb-icon-size-xxl, calc(var(--mono-spacing) * 6));\r\n  --_mono-breadcrumb-sep-size-preset: var(--mono-breadcrumb-sep-size-xxl, calc(var(--mono-spacing) * 5));\r\n  --_mono-breadcrumb-sep-font-preset: var(--mono-breadcrumb-sep-font-xxl, var(--mono-text-xl));\r\n  --_mono-breadcrumb-radius-preset: var(--mono-breadcrumb-radius-xxl, var(--mono-radius-lg));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION, and the one deviation from upstream's ink\r\n   ========================================= */\r\n\r\n[mono-breadcrumb][mono-color=\"primary\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-primary);\r\n  --_mono-breadcrumb-on-accent-preset: var(--primary-foreground);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"secondary\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-secondary);\r\n  --_mono-breadcrumb-on-accent-preset: var(--secondary);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"success\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-success);\r\n  --_mono-breadcrumb-on-accent-preset: var(--success-foreground);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"danger\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-danger);\r\n  --_mono-breadcrumb-on-accent-preset: var(--destructive-foreground);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"warning\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-warning);\r\n  --_mono-breadcrumb-on-accent-preset: var(--warning-foreground);\r\n}\r\n\r\n[mono-breadcrumb][mono-color=\"info\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-info);\r\n  --_mono-breadcrumb-on-accent-preset: var(--info-foreground);\r\n}\r\n[mono-breadcrumb][mono-color=\"teal\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-teal);\r\n  --_mono-breadcrumb-on-accent-preset: var(--teal-foreground);\r\n}\r\n[mono-breadcrumb][mono-color=\"purple\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-purple);\r\n  --_mono-breadcrumb-on-accent-preset: var(--purple-foreground);\r\n}\r\n[mono-breadcrumb][mono-color=\"neutral\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-neutral);\r\n  --_mono-breadcrumb-on-accent-preset: var(--neutral-foreground);\r\n}\r\n[mono-breadcrumb][mono-color=\"dark\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-dark);\r\n  --_mono-breadcrumb-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n/* `surface` is upstream's own ink: hover and the current segment go to\r\n   `--foreground` and nothing is branded. */\r\n[mono-breadcrumb][mono-color=\"surface\"] {\r\n  --_mono-breadcrumb-accent-preset: var(--_mono-breadcrumb-text-strong);\r\n  --_mono-breadcrumb-on-accent-preset: var(--background);\r\n}\r\n\r\n/* =========================================\r\n   The list\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb > ol — m-0 flex list-none flex-wrap items-center p-0 break-words */\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb > ol — text-muted-foreground gap-1.5 text-sm sm:gap-2.5\r\n   The selector carries the root on purpose: `.vp-doc ul, .vp-doc ol` is (0,1,1)\r\n   and would otherwise inject the left padding that breaks a flush breadcrumb. */\r\n:where([mono-breadcrumb]) [mono-list] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-breadcrumb-gap);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  min-width: 0;\r\n  overflow-wrap: break-word;\r\n  font-size: var(--_mono-breadcrumb-font);\r\n  line-height: var(--_mono-breadcrumb-line-height);\r\n}\r\n\r\n/* `sm:gap-2.5` — the row breathes once there is room for it. */\r\n@media (min-width: 640px) {\r\n  :where([mono-breadcrumb]) [mono-list] {\r\n    gap: var(--_mono-breadcrumb-gap-wide);\r\n  }\r\n}\r\n\r\n/* `truncate` CLAMPS, it does not force one line. Forcing `nowrap` meant the\r\n   row either overflowed its container or — once the crumbs were allowed to\r\n   shrink — squeezed short labels that had room, so `Dashboard` came out as\r\n   `Dash…` next to a half-empty row. Wrapping keeps every label at its clamp and\r\n   breaks the line instead. */\r\n\r\n/* VitePress puts `margin-top: 8px` on `li + li` and `margin-bottom: .5em` on\r\n   every `li`; either one stops the separators centring with the actions. */\r\n:where([mono-breadcrumb]) [mono-list] :is([mono-item], [mono-separator]) {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/* A composed child list renders a separator BEFORE each of its items, since it\r\n   cannot know whether it is the first sibling. The very first one is dropped. */\r\n[mono-list] > mono-breadcrumb-list:first-child > [mono-separator]:first-child {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Item\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb li — gap-1.5 */\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb li — inline-flex items-center */\r\n:where([mono-breadcrumb]) [mono-item] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  align-self: center;\r\n  gap: var(--_mono-breadcrumb-gap);\r\n  min-width: 0;\r\n}\r\n\r\n/* =========================================\r\n   Action — the segment itself\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb a — rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb a — transition-colors hover:text-foreground\r\n   DEVIATION: upstream's <a> is bare text. The padding and the border are kept as\r\n   knobs at 0 so `contained` / `underlined` — and a consumer — can turn the\r\n   segment into a chip without a second rule. */\r\n:where([mono-breadcrumb]) [mono-action] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--_mono-breadcrumb-gap);\r\n  padding: var(--_mono-breadcrumb-pad-y) var(--_mono-breadcrumb-pad-x);\r\n  border: var(--_mono-breadcrumb-border-width) solid transparent;\r\n  border-radius: var(--_mono-breadcrumb-radius);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  font-weight: var(--_mono-breadcrumb-font-weight);\r\n  text-align: left;\r\n  text-decoration: none;\r\n  white-space: nowrap;\r\n  user-select: none;\r\n  outline: none;\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}\r\n\r\n:where([mono-breadcrumb]) :is(a, button)[mono-action] {\r\n  cursor: pointer;\r\n}\r\n\r\n:where([mono-breadcrumb]) span[mono-action] {\r\n  cursor: default;\r\n}\r\n\r\n/* VitePress's `.vp-doc a` (0,1,1) underlines and re-inks every link, and adds an\r\n   external-link glyph on `target=\"_blank\"`. The current segment renders as a\r\n   <span>, so it is never reached. */\r\n[mono-breadcrumb] a[mono-action] {\r\n  text-decoration: none;\r\n  color: inherit;\r\n  font-weight: var(--_mono-breadcrumb-font-weight);\r\n}\r\n\r\n[mono-breadcrumb] a[mono-action]::after {\r\n  display: none !important;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-breadcrumb] :is(a, button)[mono-action]:hover {\r\n    color: var(--_mono-breadcrumb-accent);\r\n  }\r\n}\r\n\r\n/* `focus-visible:ring-[3px] focus-visible:ring-ring/50` */\r\n[mono-breadcrumb] [mono-action]:focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 var(--mono-ring-width-lg, 3px)\r\n    color-mix(in oklab, var(--ring) 50%, transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb [aria-current='page'] — font-normal text-foreground */\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb [aria-current='page'] — cursor-default */\r\n[mono-breadcrumb] [mono-item][mono-current] > [mono-action] {\r\n  color: var(--_mono-breadcrumb-accent);\r\n  font-weight: var(--_mono-breadcrumb-current-weight);\r\n  text-transform: var(--_mono-breadcrumb-current-transform);\r\n  letter-spacing: var(--_mono-breadcrumb-current-tracking);\r\n  cursor: default;\r\n}\r\n\r\n[mono-breadcrumb] [mono-item][mono-disabled] > [mono-action],\r\n[mono-breadcrumb] [mono-action]:disabled,\r\n[mono-breadcrumb][mono-disabled] [mono-action] {\r\n  opacity: var(--mono-disabled-opacity, 0.5);\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Variant: contained — EXTENSION, the pre-port chip\r\n   ========================================= */\r\n\r\n[mono-breadcrumb][mono-variant=\"contained\"] {\r\n  --_mono-breadcrumb-pad-x-preset: var(--mono-breadcrumb-contained-pad-x, calc(var(--mono-spacing) * 2));\r\n  --_mono-breadcrumb-pad-y-preset: var(--mono-breadcrumb-contained-pad-y, calc(var(--mono-spacing) * 1));\r\n}\r\n\r\n[mono-breadcrumb][mono-variant=\"contained\"] [mono-action] {\r\n  background: var(--_mono-breadcrumb-surface);\r\n  border-color: var(--_mono-breadcrumb-border);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-breadcrumb][mono-variant=\"contained\"] :is(a, button)[mono-action]:hover {\r\n    background: color-mix(in oklab, var(--_mono-breadcrumb-accent) var(--mono-mode-tint), transparent);\r\n    border-color: color-mix(in oklab, var(--_mono-breadcrumb-accent) var(--mono-mode-checked-border), transparent);\r\n  }\r\n}\r\n\r\n/* The flat role fill, not the old gradient-and-glow. */\r\n[mono-breadcrumb][mono-variant=\"contained\"] [mono-item][mono-current] > [mono-action] {\r\n  background: var(--_mono-breadcrumb-accent);\r\n  border-color: transparent;\r\n  color: var(--_mono-breadcrumb-on-accent);\r\n}\r\n\r\n[mono-breadcrumb][mono-variant=\"contained\"] [mono-item][mono-current] > [mono-action] [mono-badge] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-on-accent) 22%, transparent);\r\n  color: var(--_mono-breadcrumb-on-accent);\r\n}\r\n\r\n/* =========================================\r\n   Variant: underlined — EXTENSION\r\n   ========================================= */\r\n\r\n[mono-breadcrumb][mono-variant=\"underlined\"] [mono-action] {\r\n  border-radius: 0;\r\n  border-bottom-color: transparent;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-breadcrumb][mono-variant=\"underlined\"] :is(a, button)[mono-action]:hover {\r\n    border-bottom-color: color-mix(in oklab, var(--_mono-breadcrumb-accent) var(--mono-mode-checked-border), transparent);\r\n  }\r\n}\r\n\r\n[mono-breadcrumb][mono-variant=\"underlined\"] [mono-item][mono-current] > [mono-action] {\r\n  border-bottom-color: var(--_mono-breadcrumb-accent);\r\n}\r\n\r\n/* =========================================\r\n   Icon\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb li > span[aria-hidden='true'] — flex items-center justify-center */\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb li > span[aria-hidden='true'] — size-5 [&>svg]:size-4 */\r\n:where([mono-breadcrumb]) [mono-icon] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-breadcrumb-icon-size);\r\n  height: var(--_mono-breadcrumb-icon-size);\r\n  font-size: var(--_mono-breadcrumb-icon-size);\r\n  line-height: 1;\r\n}\r\n\r\n/* Three shapes end up inside the box and all must fill it:\r\n     shadow build, user-slotted → <slot> → ::slotted(svg)\r\n     light build, user-slotted  → <span data-mono-slot=\"icon-<id>\"> → svg\r\n     inline `item.icon` markup  → a direct child svg\r\n   The light placeholder is the subtle one: it parks the captured child, so the\r\n   SVG is a GRANDchild and a `> svg` rule misses it entirely. */\r\n[mono-icon] > svg,\r\n[mono-icon] > [data-mono-slot] > svg,\r\n[mono-icon] slot::slotted(svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* The placeholder must not become a 0-width flex item between the box and the\r\n   SVG — `display: contents` drops it from layout so the SVG sizes against the\r\n   box instead of against a zero-width parent. */\r\n[mono-icon] > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* Class + attribute = specificity (0,2,0), deliberately. UnoCSS's `i-…`\r\n   utilities set `width`/`height: 1.2em` (presetIcons `scale: 1.2`) at (0,1,0)\r\n   and their sheet loads AFTER this one, so a single selector loses and the glyph\r\n   overflows its box. Two selectors win regardless of sheet order — and it is the\r\n   only thing that works for the SHADOW build, where this span is a LIGHT-DOM\r\n   child of the host that no shadow-scoped selector can reach.\r\n   Scoped to the breadcrumb: its OWN class (every build sets it on the span — the\r\n   shadow build's span is a light-DOM child of the host, outside [mono-breadcrumb])\r\n   OR anything inside a [mono-breadcrumb] root (raw CSS markup writes a bare\r\n   `<span mono-glyph class=\"i-…\">`). Still (0,2,0): `:is()` weighs its heaviest\r\n   argument. A bare `[mono-glyph][mono-glyph]` is global and stretched every other\r\n   component's `[mono-glyph]` to 100% — the accordion's icon chip filled its header. */\r\n:is(.mono-breadcrumb-iconify, [mono-breadcrumb] *)[mono-glyph] {\r\n  display: inline-block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n/* =========================================\r\n   Content / title\r\n   ========================================= */\r\n\r\n:where([mono-breadcrumb]) [mono-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-breadcrumb]) [mono-title] {\r\n  font-size: inherit;\r\n  font-weight: inherit;\r\n  color: inherit;\r\n  line-height: inherit;\r\n}\r\n\r\n/* A flex item's `min-width` is `auto` — its content — so without this the\r\n   crumbs could not shrink past their clamp and the row simply overflowed its\r\n   container (measured: 543px of crumbs in a 512px box). Letting the chain go to\r\n   zero turns the clamp into a CEILING: a crumb takes at most `truncate-width`,\r\n   and less when the row is tight. */\r\n[mono-breadcrumb][mono-truncate] :is([mono-item], [mono-action], [mono-content]) {\r\n  min-width: 0;\r\n}\r\n\r\n[mono-breadcrumb][mono-truncate] [mono-title] {\r\n  display: block;\r\n  max-width: var(--mono-breadcrumb-truncate-width, 12ch);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n[mono-breadcrumb][mono-truncate] [mono-item][mono-current] [mono-title] {\r\n  max-width: var(--mono-breadcrumb-truncate-width-current, 18ch);\r\n}\r\n\r\n/* =========================================\r\n   Badge — EXTENSION, borrowing `.badge`'s shape\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! */\r\n:where([mono-breadcrumb]) [mono-badge] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--mono-spacing);\r\n  height: var(--_mono-breadcrumb-badge-height);\r\n  padding: 0 var(--_mono-breadcrumb-badge-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-breadcrumb-badge-radius);\r\n  font-size: var(--_mono-breadcrumb-badge-font);\r\n  font-weight: var(--_mono-breadcrumb-badge-weight);\r\n  line-height: 1;\r\n  background: var(--_mono-breadcrumb-badge-bg);\r\n  color: var(--_mono-breadcrumb-badge-color);\r\n}\r\n\r\n/* The roles ink the pill tonally — the same wash the ported chip and menu use. */\r\n[mono-breadcrumb] [mono-badge=\"primary\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-primary) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-primary);\r\n}\r\n\r\n[mono-breadcrumb] [mono-badge=\"success\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-success) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-success);\r\n}\r\n\r\n[mono-breadcrumb] [mono-badge=\"danger\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-danger) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-danger);\r\n}\r\n\r\n[mono-breadcrumb] [mono-badge=\"warning\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-warning) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-warning);\r\n}\r\n\r\n[mono-breadcrumb] [mono-badge=\"info\"] {\r\n  background: color-mix(in oklab, var(--_mono-breadcrumb-info) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-breadcrumb-info);\r\n}\r\n\r\n/* =========================================\r\n   Separator\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb li[aria-hidden='true'] — select-none */\r\n:where([mono-breadcrumb]) [mono-separator] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  align-self: center;\r\n  /* Upstream's separator is an SVG at `size-3.5`, so the slot between two\r\n     crumbs is 14px wide whatever is in it. A text glyph like `›` is barely 4px,\r\n     which — on a flavor with a tight gap — left the labels all but touching.\r\n     Reserving the same box is what keeps the row legible either way. */\r\n  min-width: var(--_mono-breadcrumb-sep-size);\r\n  font-size: var(--_mono-breadcrumb-sep-font);\r\n  line-height: 1;\r\n  color: var(--_mono-breadcrumb-sep-color);\r\n  user-select: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .breadcrumb li[aria-hidden='true'] > svg — size-3.5 */\r\n[mono-separator] > svg,\r\n[mono-separator] > [data-mono-slot] > svg,\r\n[mono-separator] slot::slotted(svg) {\r\n  display: block;\r\n  width: var(--_mono-breadcrumb-sep-size);\r\n  height: var(--_mono-breadcrumb-sep-size);\r\n}\r\n\r\n[mono-separator] > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* basecoat@1.0.2 components/breadcrumb.css .breadcrumb [data-rtl-flip] — rtl:rotate-180 */\r\n[dir=\"rtl\"] [mono-breadcrumb] [mono-separator] > svg {\r\n  rotate: 180deg;\r\n}\r\n\r\n/* =========================================\r\n   Reduced motion\r\n   ========================================= */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-breadcrumb] [mono-action] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/breadcrumb/mono-breadcrumb.ts
-var MonoBreadcrumb = class MonoBreadcrumb extends MonoBreadcrumbCore(LitElement) {
+let MonoBreadcrumb = class MonoBreadcrumb extends MonoBreadcrumbCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
@@ -580,7 +586,7 @@ var MonoBreadcrumb = class MonoBreadcrumb extends MonoBreadcrumbCore(LitElement)
 		this._slotBody = [];
 	}
 	static {
-		this.styles = [unsafeCSS(breadcrumb_default)];
+		this.styles = [unsafeCSS(breadcrumb_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -678,9 +684,10 @@ var MonoBreadcrumb = class MonoBreadcrumb extends MonoBreadcrumbCore(LitElement)
 __decorate([state()], MonoBreadcrumb.prototype, "_slotsCaptured", void 0);
 __decorate([state()], MonoBreadcrumb.prototype, "_hasBodySlot", void 0);
 MonoBreadcrumb = __decorate([customElement("mono-breadcrumb")], MonoBreadcrumb);
+
 //#endregion
 //#region src/components/breadcrumb/breadcrumb-list-core.ts
-var autoBreadcrumbListId = 0;
+let autoBreadcrumbListId = 0;
 /**
 * `MonoBreadcrumbListCore` — render-mode-agnostic logic for the STANDALONE
 * `mono-breadcrumb-list`: reactive props (incl. the SSR `items` string→array
@@ -697,7 +704,7 @@ var autoBreadcrumbListId = 0;
 *
 * SSR-safe: no `document`/`window` access.
 */
-var MonoBreadcrumbListCore = (superClass) => {
+const MonoBreadcrumbListCore = (superClass) => {
 	class MonoBreadcrumbListCoreClass extends superClass {
 		constructor(..._args) {
 			super(..._args);
@@ -851,15 +858,16 @@ var MonoBreadcrumbListCore = (superClass) => {
 	__decorate([property({ type: Boolean })], MonoBreadcrumbListCoreClass.prototype, "truncate", void 0);
 	return MonoBreadcrumbListCoreClass;
 };
+
 //#endregion
 //#region src/components/breadcrumb/mono-breadcrumb-list.ts
-var MonoBreadcrumbList = class MonoBreadcrumbList extends MonoBreadcrumbListCore(LitElement) {
+let MonoBreadcrumbList = class MonoBreadcrumbList extends MonoBreadcrumbListCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._parent = null;
 	}
 	static {
-		this.styles = [unsafeCSS(breadcrumb_default)];
+		this.styles = [unsafeCSS(breadcrumb_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -892,11 +900,13 @@ var MonoBreadcrumbList = class MonoBreadcrumbList extends MonoBreadcrumbListCore
 	render() {
 		if (this._parent) {
 			const ctx = this._buildContext();
-			return html`${renderBreadcrumbItemsLeadingSep(this._getEffectiveItems(), ctx)}`;
+			const effectiveItems = this._getEffectiveItems();
+			return html`${renderBreadcrumbItemsLeadingSep(effectiveItems, ctx)}`;
 		}
 		return super.render();
 	}
 };
 MonoBreadcrumbList = __decorate([customElement("mono-breadcrumb-list")], MonoBreadcrumbList);
+
 //#endregion
-export { MonoBreadcrumb, MonoBreadcrumbList, findItemIndex, generateBreadcrumbRootClasses, renderBreadcrumbBadge, renderBreadcrumbIcon, renderBreadcrumbItemRow, renderBreadcrumbItemsLeadingSep, renderBreadcrumbList, renderBreadcrumbSeparator, resolveCurrentId, validateBreadcrumbProps };
+export { MonoBreadcrumb, MonoBreadcrumbList, findItemIndex, generateBreadcrumbRootClasses, renderBreadcrumbBadge, renderBreadcrumbIcon, renderBreadcrumbItemRow, renderBreadcrumbItemsLeadingSep, renderBreadcrumbList, renderBreadcrumbSeparator, resolveCurrentId, validateBreadcrumbProps };