@mono-lit/helper 0.0.2 → 0.0.3

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 };

package/dist/ui/button-dropdown.js

@@ -1,14 +1,15 @@
-import { t as applyProps } from "../element-props-CLB6yvbm.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, o as numberStringConverter, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { a as rateLimitHasChanged } from "../rate-limit-BBa2PO79.js";
-import { n as button_default } from "../mono-button-simcTQdW.js";
-import { t as PopupPortalController } from "../popup-portal-BziRX1yG.js";
+import { t as applyProps } from "../element-props-xvw0EB7H.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, o as numberStringConverter, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { a as rateLimitHasChanged } from "../rate-limit-e9Jlpl5l.js";
+import { n as button_css_raw_default } from "../mono-button-CeDB9khW.js";
+import { t as PopupPortalController } from "../popup-portal-HWhkd7oy.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
+
 //#region src/components/button/button-dropdown-core.ts
 /**
 * Would these two entry lists RENDER identically?
@@ -67,7 +68,7 @@ function sameButtonItems(a, b) {
 *
 * Kept in step with button-dropdown.css by tests/button-dropdown-attributes.test.ts.
 */
-var BUTTON_DROPDOWN_STYLE_VARS = [
+const BUTTON_DROPDOWN_STYLE_VARS = [
 	"--mono-button-dropdown-bg",
 	"--mono-button-dropdown-border",
 	"--mono-button-dropdown-dark",
@@ -128,7 +129,7 @@ var BUTTON_DROPDOWN_STYLE_VARS = [
 	"--mono-button-dropdown-text",
 	"--mono-button-dropdown-warning"
 ];
-var MonoButtonDropdownCore = (superClass) => {
+const MonoButtonDropdownCore = (superClass) => {
 	class MonoButtonDropdownCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -636,14 +637,16 @@ var MonoButtonDropdownCore = (superClass) => {
 	__decorate([state()], MonoButtonDropdownCoreClass.prototype, "_resolvedSide", void 0);
 	return MonoButtonDropdownCoreClass;
 };
+
 //#endregion
-//#region src/components/button/button-dropdown.css?raw
-var button_dropdown_default = "/* =========================================================================\r\n   mono-button-dropdown — a port of Basecoat's `.dropdown-menu`\r\n   (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-button-dropdown size=\"sm\" placement=\"bottom-end\" model-value>\r\n     <div mono-button-dropdown mono-size=\"sm\" mono-side=\"bottom\" mono-align=\"end\" mono-open>\r\n       <div mono-row hidden></div>\r\n       <div mono-button mono-trigger mono-icon-only>…the ⋮ button…</div>\r\n       <div mono-panel role=\"menu\" aria-hidden=\"false\">\r\n         <ul mono-list>\r\n           <li mono-item role=\"none\" mono-item-color=\"success\">\r\n             <div mono-button>…a real button…</div>\r\n           </li>\r\n         </ul>\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md, no\r\n   `mono-side` = bottom, no `mono-align` = start, no `mono-item-color` = the\r\n   panel's own ink). The element writes them on the inner root in BOTH builds;\r\n   the old classes (`.mono-button-dropdown-panel`, `.mono-bd-c-danger`) are still\r\n   emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-button-dropdown]          ≡ .dropdown-menu (relative inline-flex)\r\n     [mono-row]                      ≡ EXTENSION (the INLINE row — upstream has\r\n                                       no \"stay flat while short\" mode)\r\n     [mono-trigger]                  ≡ .dropdown-menu > button (a real mono-button,\r\n                                       styled by button.css — nothing to add here)\r\n     [mono-panel]                    ≡ .dropdown-menu > [data-popover]\r\n                                       (bg-popover text-popover-foreground\r\n                                        ring-1 ring-foreground/10 gap-0 rounded-md\r\n                                        p-1 shadow-md overflow-x-hidden\r\n                                        overflow-y-auto duration-100)\r\n     [mono-list]                     ≡ [role='menu'] (outline-hidden)\r\n     [mono-item]                     ≡ [role='menuitem'] (gap-2 rounded-sm px-2\r\n                                       py-1.5 text-sm, hover bg-accent\r\n                                       text-accent-foreground)\r\n     [mono-item][mono-item-color=…]  ≡ .dropdown-menu [data-variant='destructive']\r\n                                       (text-destructive, hover bg-destructive/10,\r\n                                        dark /20) — generalised to all ten roles\r\n     [mono-side] / [mono-align]      ≡ [data-popover][data-side] / [data-align]\r\n     [mono-size=\"…\"]                 ≡ EXTENSION (upstream ships one menu size)\r\n\r\n   THE ROW IS A REAL BUTTON. Each entry renders as a `<mono-button>`, so the\r\n   menu cannot paint it with a selector — in the shadow build the control sits\r\n   behind a boundary. It is flattened with the button's own PUBLIC knobs, set on\r\n   the `<li mono-item>`: custom properties inherit, so one declaration reaches\r\n   both builds. `--mono-button-width` / `-justify` exist for exactly this.\r\n\r\n   COLOUR: an entry's `color` is NOT a button colour in here — a row of solid,\r\n   outlined and tonal buttons reads as noise rather than a list. It is the\r\n   Basecoat `[data-variant='destructive']` treatment generalised: the row's INK\r\n   (label and glyph alike, the glyph being a `currentColor` mask) becomes the\r\n   role, and hover lays that role down at `--mono-mode-tint` (10% light / 20%\r\n   dark). Never the role as a solid fill — a full-strength background under a\r\n   full-strength glyph is the one combination that makes the glyph vanish.\r\n\r\n   THE PANEL IS PORTALED in the light build: `composables/popup-portal` moves it\r\n   into a `<body>` portal and mirrors the root's class AND `mono-*` attributes\r\n   onto that portal, so `[mono-button-dropdown] > [mono-panel]` keeps matching.\r\n   Every panel rule is therefore written as a CHILD of the root, and every public\r\n   knob it reads is listed in `BUTTON_DROPDOWN_STYLE_VARS` (button-dropdown-core)\r\n   so an ancestor's override travels with it.\r\n\r\n   Specificity contract: a part's RESTING rule is exactly one attribute strong —\r\n   `:where([mono-button-dropdown]) > [mono-panel]` = (0,1,0) — so a utility class\r\n   handed in through `cssClass` wins by source order, while the prop and state\r\n   rules stay heavier.\r\n\r\n   FLAVORS set `--mono-button-dropdown-{radius,padding,min-width,offset,shadow,\r\n   ring-*,item-radius,item-font-weight}` (+ the per-size forms); every fallback\r\n   here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"dropdown-menu\"`).\r\n   ========================================================================= */\r\n\r\nmono-button-dropdown {\r\n  display: inline-flex;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dropdown-menu.css .dropdown-menu — relative inline-flex */\r\n[mono-button-dropdown] {\r\n  /* ── the ten entry roles, each a public knob over a Basecoat token ───────\r\n     `secondary`, `light` and `dark` are SURFACES upstream, and a surface makes\r\n     no ink: `--dark` is a near-black in light mode and STILL a dark grey in dark\r\n     mode (the role is a fill, paired with `--dark-foreground`), so inking a row\r\n     with it turns that row invisible on a dark popover. The three resolve to a\r\n     foreground instead, which flips with the mode. */\r\n  --_mono-bd-primary: var(--mono-button-dropdown-primary, var(--primary));\r\n  --_mono-bd-secondary: var(--mono-button-dropdown-secondary, var(--secondary-foreground));\r\n  --_mono-bd-success: var(--mono-button-dropdown-success, var(--success));\r\n  --_mono-bd-danger: var(--mono-button-dropdown-danger, var(--destructive));\r\n  --_mono-bd-warning: var(--mono-button-dropdown-warning, var(--warning));\r\n  --_mono-bd-info: var(--mono-button-dropdown-info, var(--info));\r\n  --_mono-bd-teal: var(--mono-button-dropdown-teal, var(--teal));\r\n  --_mono-bd-purple: var(--mono-button-dropdown-purple, var(--purple));\r\n  --_mono-bd-dark: var(--mono-button-dropdown-dark, var(--foreground));\r\n  --_mono-bd-light: var(--mono-button-dropdown-light, var(--foreground));\r\n\r\n  /* ── panel paint — `bg-popover text-popover-foreground ring-foreground/10` ── */\r\n  --_mono-bd-bg: var(--mono-button-dropdown-bg, var(--mono-button-dropdown-surface, var(--popover)));\r\n  --_mono-bd-text: var(--mono-button-dropdown-text, var(--popover-foreground));\r\n  --_mono-bd-ring-width: var(--mono-button-dropdown-ring-width, var(--mono-border-width));\r\n  --_mono-bd-ring-color: var(--mono-button-dropdown-ring-color, var(--mono-button-dropdown-border,\r\n    color-mix(in oklab, var(--foreground) 10%, transparent)));\r\n  --_mono-bd-shadow: var(--mono-button-dropdown-shadow, var(--mono-shadow-md));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .dropdown-menu > [data-popover] — rounded-md p-1 gap-0 */\r\n  --_mono-bd-radius: var(--mono-button-dropdown-radius, var(--_mono-bd-radius-preset, var(--mono-button-dropdown-radius-md, var(--mono-radius-md))));\r\n  --_mono-bd-padding: var(--mono-button-dropdown-padding, var(--_mono-bd-padding-preset, var(--mono-button-dropdown-padding-md, var(--mono-spacing))));\r\n  --_mono-bd-list-gap: var(--mono-button-dropdown-list-gap, var(--_mono-bd-list-gap-preset, 0px));\r\n  /* DEVIATION: upstream is `min-width: anchor-size(width)` — the panel is at\r\n     least as wide as its trigger. Anchor positioning is not the mechanism here\r\n     (the panel is portaled and placed from measurements), so the floor is a\r\n     plain length; maia/luma/sera's `min-w-48` is the per-size knob. */\r\n  --_mono-bd-min-width: var(--mono-button-dropdown-min-width, var(--_mono-bd-min-width-preset, var(--mono-button-dropdown-min-width-md, 9rem)));\r\n  /* The static offset — the JS path uses the `offset` PROP; keep them in step. */\r\n  --_mono-bd-offset: var(--mono-button-dropdown-offset, var(--_mono-bd-offset-preset, var(--mono-button-dropdown-offset-md, var(--mono-spacing))));\r\n\r\n  /* ── the inline row (NOT the menu): the gap between loose buttons ───────── */\r\n  --_mono-bd-gap: var(--mono-button-dropdown-gap, calc(var(--mono-spacing) * 1.5));\r\n\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-button-dropdown] *,\r\n[mono-button-dropdown] *::before,\r\n[mono-button-dropdown] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE menu; md is its `[data-popover]`\r\n   ========================================= */\r\n\r\n[mono-button-dropdown][mono-size=\"xs\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xs, var(--mono-radius-sm));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xs, calc(var(--mono-spacing) * 0.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xs, 7rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xs, calc(var(--mono-spacing) * 0.75));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"sm\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-sm, var(--mono-radius-md));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-sm, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-sm, 8rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-sm, var(--mono-spacing));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"lg\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-lg, var(--mono-radius-lg));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-lg, 11rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-lg, var(--mono-radius-md));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"xl\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xl, var(--mono-radius-xl));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xl, 13rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-xl, var(--mono-radius-md));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"xxl\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xxl, 15rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-xxl, var(--mono-radius-lg));\r\n}\r\n\r\n/* =========================================\r\n   Inline row — EXTENSION: the entries before they collapse\r\n   ========================================= */\r\n\r\n:where([mono-button-dropdown]) > [mono-row] {\r\n  display: inline-flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-bd-gap);\r\n}\r\n\r\n/* `hidden` is a UA rule, and an author `display` beats it whatever the\r\n   specificity — so the hidden state has to be stated here. */\r\n[mono-button-dropdown] > [mono-row][hidden] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `.dropdown-menu > [data-popover]`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 w-max\r\n   overflow-x-hidden overflow-y-auto outline-hidden\r\n   basecoat@1.0.2 styles/vega.css .dropdown-menu > [data-popover] — bg-popover\r\n   text-popover-foreground ring-foreground/10 gap-0 rounded-md p-1 shadow-md ring-1\r\n   — DEVIATIONS: the z-index is the shared popup stack's `--mono-popup-z` rather\r\n   than a flat z-50, and the height cap is the room the portal measured. */\r\n:where([mono-button-dropdown]) > [mono-panel] {\r\n  position: absolute;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-bd-list-gap);\r\n  width: max-content;\r\n  min-width: var(--_mono-bd-min-width);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  outline: none;\r\n  padding: var(--_mono-bd-padding);\r\n  border-radius: var(--_mono-bd-radius);\r\n  background: var(--_mono-bd-bg);\r\n  color: var(--_mono-bd-text);\r\n  box-shadow:\r\n    0 0 0 var(--_mono-bd-ring-width) var(--_mono-bd-ring-color),\r\n    var(--_mono-bd-shadow);\r\n}\r\n\r\n/* Same UA-`hidden` story as the row, and it has to out-specify the rule above\r\n   even once the panel has been portaled (where it is still a `>` child). */\r\n[mono-button-dropdown] > [mono-panel][hidden] {\r\n  display: none;\r\n}\r\n\r\n/* Once the element takes over it measures and writes inline top/left, so the\r\n   static placement rules below must stand aside. */\r\n[mono-button-dropdown][mono-fixed] > [mono-panel] {\r\n  position: fixed;\r\n}\r\n\r\n/* =========================================\r\n   Static placement — `[data-side]` / `[data-align]`, verbatim\r\n   -----------------------------------------------------------------------------\r\n   What hand-written markup positions with (and SSR, before hydration). The\r\n   element overrides all of it with inline top/left once it has measured.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &:not([data-side]), &[data-side='bottom'] — mt-1 top-full */\r\n[mono-button-dropdown]:not([mono-side]):not([mono-fixed]) > [mono-panel],\r\n[mono-button-dropdown][mono-side=\"bottom\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 100%;\r\n  margin-top: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='top'] — mb-1 bottom-full */\r\n[mono-button-dropdown][mono-side=\"top\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 100%;\r\n  margin-bottom: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='left'] — me-1 end-full */\r\n[mono-button-dropdown][mono-side=\"left\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 100%;\r\n  margin-inline-end: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='right'] — ms-1 start-full */\r\n[mono-button-dropdown][mono-side=\"right\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 100%;\r\n  margin-inline-start: var(--_mono-bd-offset);\r\n}\r\n\r\n/* The top/bottom pair aligns on the inline axis: start-0 / end-0 / start-1/2 -translate-x-1/2.\r\n   DEVIATION from `mono-dropdown`: the default here is `end`, matching the\r\n   `placement=\"bottom-end\"` default — a row of actions hangs off the right. */\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"start\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"]):is(:not([mono-align]), [mono-align=\"end\"]):not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 50%;\r\n  translate: -50% 0;\r\n}\r\n\r\n/* …and the left/right pair on the block axis: top-0 / bottom-0 / top-1/2 -translate-y-1/2 */\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  top: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 50%;\r\n  translate: 0 -50%;\r\n}\r\n\r\n/* =========================================\r\n   List — `[role='menu']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dropdown-menu.css .dropdown-menu [role='menu'] — outline-hidden */\r\n:where([mono-button-dropdown]) [mono-list] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-bd-list-gap);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  outline: none;\r\n}\r\n\r\n/* =========================================\r\n   Item — `[role='menuitem']`\r\n   -----------------------------------------------------------------------------\r\n   The `<li>` paints nothing itself: it hands the entry button a flattened\r\n   palette through the button's PUBLIC knobs, which is the only route that\r\n   reaches the control in BOTH builds (the shadow one keeps it behind a\r\n   boundary). The entry's own `variant` and `color` presets are overridden by\r\n   construction — inside the menu every row is one flat strip.\r\n   ========================================= */\r\n\r\n:where([mono-button-dropdown]) [mono-item] {\r\n  /* ── the row's ink and its hover wash ──────────────────────────────────────\r\n     FOUR tiers, not three, because the middle one belongs to a PER-ENTRY prop:\r\n\r\n       --mono-button-dropdown-item-<x>       consumer, wins over everything\r\n       --_mono-bd-item-<x>-preset            the entry's `color` (mono-item-color)\r\n       --mono-button-dropdown-item-base-<x>  a FLAVOR's neutral row\r\n       the Basecoat value\r\n\r\n     A flavor must write the `-base-` tier: writing the consumer knob would\r\n     out-rank every role and freeze all ten colours at one ink. */\r\n  --_mono-bd-item-color: var(--mono-button-dropdown-item-color, var(--_mono-bd-item-color-preset, var(--mono-button-dropdown-item-base-color, var(--_mono-bd-text))));\r\n  /* basecoat@1.0.2 styles/vega.css .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) — focus-visible:bg-accent */\r\n  --_mono-bd-item-hover-bg: var(--mono-button-dropdown-item-hover-bg, var(--_mono-bd-item-hover-bg-preset, var(--mono-button-dropdown-item-base-hover-bg, var(--mono-button-dropdown-item-hover, var(--accent)))));\r\n  --_mono-bd-item-hover-color: var(--mono-button-dropdown-item-hover-color, var(--_mono-bd-item-hover-color-preset, var(--mono-button-dropdown-item-base-hover-color, var(--accent-foreground))));\r\n  /* basecoat@1.0.2 styles/vega.css .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) — rounded-sm */\r\n  --_mono-bd-item-radius: var(--mono-button-dropdown-item-radius, var(--_mono-bd-item-radius-preset, var(--mono-radius-sm)));\r\n\r\n  /* ── flatten the entry: the button's own public knobs, set on its ancestor ─ */\r\n  --mono-button-bg: transparent;\r\n  --mono-button-color: var(--_mono-bd-item-color);\r\n  --mono-button-border-color: transparent;\r\n  --mono-button-shadow: 0 0 #0000;\r\n  --mono-button-hover-bg: var(--_mono-bd-item-hover-bg);\r\n  --mono-button-hover-color: var(--_mono-bd-item-hover-color);\r\n  --mono-button-hover-border-color: transparent;\r\n  --mono-button-hover-shadow: 0 0 #0000;\r\n  --mono-button-radius: var(--_mono-bd-item-radius);\r\n  /* A menu row is a strip, not a chip: full width, label against the start edge. */\r\n  --mono-button-width: 100%;\r\n  --mono-button-justify: flex-start;\r\n  /* No press twitch in a list — right for a standalone button, wrong for a row. */\r\n  --mono-button-press-translate: 0 0;\r\n  --mono-button-font-weight: var(--mono-button-dropdown-item-font-weight, var(--mono-font-weight-medium));\r\n\r\n  display: block;\r\n  min-width: 0;\r\n}\r\n\r\n/* The entry element itself — `<mono-button>` / `<mono-shadow-button>`, both\r\n   `display: inline-block` hosts — has to fill the row for the whole strip to be\r\n   clickable rather than just the label's width. */\r\n:where([mono-button-dropdown]) [mono-item] > * {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dropdown-menu [data-variant='destructive'] —\r\n   `text-destructive`, and `:is(:focus-visible, .active)` lays the same colour\r\n   down at `bg-destructive/10` (dark `/20`, carried by `--mono-mode-tint`).\r\n   EXTENSION: generalised from destructive to all ten roles. The tint is the\r\n   whole point — a solid role fill under a role-coloured glyph erases it. */\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"primary\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-primary);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-primary) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-primary);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"success\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-success);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-success) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-success);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"danger\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-danger);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-danger) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-danger);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"warning\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-warning);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-warning) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-warning);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"info\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-info);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-info) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-info);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"teal\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-teal);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-teal) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-teal);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"purple\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-purple);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-purple) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-purple);\r\n}\r\n\r\n/* The three surface roles: their ink is a foreground, and a 10% wash of a\r\n   near-background colour is invisible — so they hover on `--accent`, the\r\n   neutral row wash, exactly like an uncoloured entry. */\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"dark\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-dark);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-dark);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"secondary\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-secondary);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-secondary);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"light\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-light);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-light);\r\n}\r\n\r\n/**\r\n * Icon glyphs inside a shadow root.\r\n *\r\n * `adoptIconStyles` copies the page's `.i-mdi-…` rules through CSSOM `cssText`,\r\n * and that read-back DROPS the mask declarations — `mask-image: ;` comes back\r\n * empty whenever the value is a `var()`. What survives is `--un-icon`, the data\r\n * URI itself. So the copy leaves `background-color: currentColor` with no mask,\r\n * painting a solid square: the \"black cube\".\r\n *\r\n * Re-declaring the mask here fixes it, because this sheet is authored source\r\n * rather than a CSSOM copy — it consumes the custom property that DID survive.\r\n * Harmless in the light build, where it merely restates what the page already\r\n * says. The glyph's BOX is left to `[mono-button] [mono-icon]` (Basecoat's\r\n * `size-4`): sizing it here as well used to out-specify that and hand every\r\n * menu icon a 1.1em box the button never asked for.\r\n */\r\n[mono-button-dropdown] [class*='i-'].mono-icon {\r\n  -webkit-mask: var(--un-icon) no-repeat;\r\n  mask: var(--un-icon) no-repeat;\r\n  -webkit-mask-size: 100% 100%;\r\n  mask-size: 100% 100%;\r\n  background-color: currentColor;\r\n  display: inline-block;\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\button\button-dropdown.css?raw.js
+var button_dropdown_css_raw_default = "/* =========================================================================\r\n   mono-button-dropdown — a port of Basecoat's `.dropdown-menu`\r\n   (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-button-dropdown size=\"sm\" placement=\"bottom-end\" model-value>\r\n     <div mono-button-dropdown mono-size=\"sm\" mono-side=\"bottom\" mono-align=\"end\" mono-open>\r\n       <div mono-row hidden></div>\r\n       <div mono-button mono-trigger mono-icon-only>…the ⋮ button…</div>\r\n       <div mono-panel role=\"menu\" aria-hidden=\"false\">\r\n         <ul mono-list>\r\n           <li mono-item role=\"none\" mono-item-color=\"success\">\r\n             <div mono-button>…a real button…</div>\r\n           </li>\r\n         </ul>\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md, no\r\n   `mono-side` = bottom, no `mono-align` = start, no `mono-item-color` = the\r\n   panel's own ink). The element writes them on the inner root in BOTH builds;\r\n   the old classes (`.mono-button-dropdown-panel`, `.mono-bd-c-danger`) are still\r\n   emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-button-dropdown]          ≡ .dropdown-menu (relative inline-flex)\r\n     [mono-row]                      ≡ EXTENSION (the INLINE row — upstream has\r\n                                       no \"stay flat while short\" mode)\r\n     [mono-trigger]                  ≡ .dropdown-menu > button (a real mono-button,\r\n                                       styled by button.css — nothing to add here)\r\n     [mono-panel]                    ≡ .dropdown-menu > [data-popover]\r\n                                       (bg-popover text-popover-foreground\r\n                                        ring-1 ring-foreground/10 gap-0 rounded-md\r\n                                        p-1 shadow-md overflow-x-hidden\r\n                                        overflow-y-auto duration-100)\r\n     [mono-list]                     ≡ [role='menu'] (outline-hidden)\r\n     [mono-item]                     ≡ [role='menuitem'] (gap-2 rounded-sm px-2\r\n                                       py-1.5 text-sm, hover bg-accent\r\n                                       text-accent-foreground)\r\n     [mono-item][mono-item-color=…]  ≡ .dropdown-menu [data-variant='destructive']\r\n                                       (text-destructive, hover bg-destructive/10,\r\n                                        dark /20) — generalised to all ten roles\r\n     [mono-side] / [mono-align]      ≡ [data-popover][data-side] / [data-align]\r\n     [mono-size=\"…\"]                 ≡ EXTENSION (upstream ships one menu size)\r\n\r\n   THE ROW IS A REAL BUTTON. Each entry renders as a `<mono-button>`, so the\r\n   menu cannot paint it with a selector — in the shadow build the control sits\r\n   behind a boundary. It is flattened with the button's own PUBLIC knobs, set on\r\n   the `<li mono-item>`: custom properties inherit, so one declaration reaches\r\n   both builds. `--mono-button-width` / `-justify` exist for exactly this.\r\n\r\n   COLOUR: an entry's `color` is NOT a button colour in here — a row of solid,\r\n   outlined and tonal buttons reads as noise rather than a list. It is the\r\n   Basecoat `[data-variant='destructive']` treatment generalised: the row's INK\r\n   (label and glyph alike, the glyph being a `currentColor` mask) becomes the\r\n   role, and hover lays that role down at `--mono-mode-tint` (10% light / 20%\r\n   dark). Never the role as a solid fill — a full-strength background under a\r\n   full-strength glyph is the one combination that makes the glyph vanish.\r\n\r\n   THE PANEL IS PORTALED in the light build: `composables/popup-portal` moves it\r\n   into a `<body>` portal and mirrors the root's class AND `mono-*` attributes\r\n   onto that portal, so `[mono-button-dropdown] > [mono-panel]` keeps matching.\r\n   Every panel rule is therefore written as a CHILD of the root, and every public\r\n   knob it reads is listed in `BUTTON_DROPDOWN_STYLE_VARS` (button-dropdown-core)\r\n   so an ancestor's override travels with it.\r\n\r\n   Specificity contract: a part's RESTING rule is exactly one attribute strong —\r\n   `:where([mono-button-dropdown]) > [mono-panel]` = (0,1,0) — so a utility class\r\n   handed in through `cssClass` wins by source order, while the prop and state\r\n   rules stay heavier.\r\n\r\n   FLAVORS set `--mono-button-dropdown-{radius,padding,min-width,offset,shadow,\r\n   ring-*,item-radius,item-font-weight}` (+ the per-size forms); every fallback\r\n   here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"dropdown-menu\"`).\r\n   ========================================================================= */\r\n\r\nmono-button-dropdown {\r\n  display: inline-flex;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dropdown-menu.css .dropdown-menu — relative inline-flex */\r\n[mono-button-dropdown] {\r\n  /* ── the ten entry roles, each a public knob over a Basecoat token ───────\r\n     `secondary`, `light` and `dark` are SURFACES upstream, and a surface makes\r\n     no ink: `--dark` is a near-black in light mode and STILL a dark grey in dark\r\n     mode (the role is a fill, paired with `--dark-foreground`), so inking a row\r\n     with it turns that row invisible on a dark popover. The three resolve to a\r\n     foreground instead, which flips with the mode. */\r\n  --_mono-bd-primary: var(--mono-button-dropdown-primary, var(--primary));\r\n  --_mono-bd-secondary: var(--mono-button-dropdown-secondary, var(--secondary-foreground));\r\n  --_mono-bd-success: var(--mono-button-dropdown-success, var(--success));\r\n  --_mono-bd-danger: var(--mono-button-dropdown-danger, var(--destructive));\r\n  --_mono-bd-warning: var(--mono-button-dropdown-warning, var(--warning));\r\n  --_mono-bd-info: var(--mono-button-dropdown-info, var(--info));\r\n  --_mono-bd-teal: var(--mono-button-dropdown-teal, var(--teal));\r\n  --_mono-bd-purple: var(--mono-button-dropdown-purple, var(--purple));\r\n  --_mono-bd-dark: var(--mono-button-dropdown-dark, var(--foreground));\r\n  --_mono-bd-light: var(--mono-button-dropdown-light, var(--foreground));\r\n\r\n  /* ── panel paint — `bg-popover text-popover-foreground ring-foreground/10` ── */\r\n  --_mono-bd-bg: var(--mono-button-dropdown-bg, var(--mono-button-dropdown-surface, var(--popover)));\r\n  --_mono-bd-text: var(--mono-button-dropdown-text, var(--popover-foreground));\r\n  --_mono-bd-ring-width: var(--mono-button-dropdown-ring-width, var(--mono-border-width));\r\n  --_mono-bd-ring-color: var(--mono-button-dropdown-ring-color, var(--mono-button-dropdown-border,\r\n    color-mix(in oklab, var(--foreground) 10%, transparent)));\r\n  --_mono-bd-shadow: var(--mono-button-dropdown-shadow, var(--mono-shadow-md));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .dropdown-menu > [data-popover] — rounded-md p-1 gap-0 */\r\n  --_mono-bd-radius: var(--mono-button-dropdown-radius, var(--_mono-bd-radius-preset, var(--mono-button-dropdown-radius-md, var(--mono-radius-md))));\r\n  --_mono-bd-padding: var(--mono-button-dropdown-padding, var(--_mono-bd-padding-preset, var(--mono-button-dropdown-padding-md, var(--mono-spacing))));\r\n  --_mono-bd-list-gap: var(--mono-button-dropdown-list-gap, var(--_mono-bd-list-gap-preset, 0px));\r\n  /* DEVIATION: upstream is `min-width: anchor-size(width)` — the panel is at\r\n     least as wide as its trigger. Anchor positioning is not the mechanism here\r\n     (the panel is portaled and placed from measurements), so the floor is a\r\n     plain length; maia/luma/sera's `min-w-48` is the per-size knob. */\r\n  --_mono-bd-min-width: var(--mono-button-dropdown-min-width, var(--_mono-bd-min-width-preset, var(--mono-button-dropdown-min-width-md, 9rem)));\r\n  /* The static offset — the JS path uses the `offset` PROP; keep them in step. */\r\n  --_mono-bd-offset: var(--mono-button-dropdown-offset, var(--_mono-bd-offset-preset, var(--mono-button-dropdown-offset-md, var(--mono-spacing))));\r\n\r\n  /* ── the inline row (NOT the menu): the gap between loose buttons ───────── */\r\n  --_mono-bd-gap: var(--mono-button-dropdown-gap, calc(var(--mono-spacing) * 1.5));\r\n\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-button-dropdown] *,\r\n[mono-button-dropdown] *::before,\r\n[mono-button-dropdown] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE menu; md is its `[data-popover]`\r\n   ========================================= */\r\n\r\n[mono-button-dropdown][mono-size=\"xs\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xs, var(--mono-radius-sm));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xs, calc(var(--mono-spacing) * 0.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xs, 7rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xs, calc(var(--mono-spacing) * 0.75));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"sm\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-sm, var(--mono-radius-md));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-sm, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-sm, 8rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-sm, var(--mono-spacing));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"lg\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-lg, var(--mono-radius-lg));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-lg, 11rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-lg, var(--mono-radius-md));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"xl\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xl, var(--mono-radius-xl));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xl, 13rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-xl, var(--mono-radius-md));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"xxl\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xxl, 15rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-xxl, var(--mono-radius-lg));\r\n}\r\n\r\n/* =========================================\r\n   Inline row — EXTENSION: the entries before they collapse\r\n   ========================================= */\r\n\r\n:where([mono-button-dropdown]) > [mono-row] {\r\n  display: inline-flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-bd-gap);\r\n}\r\n\r\n/* `hidden` is a UA rule, and an author `display` beats it whatever the\r\n   specificity — so the hidden state has to be stated here. */\r\n[mono-button-dropdown] > [mono-row][hidden] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `.dropdown-menu > [data-popover]`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 w-max\r\n   overflow-x-hidden overflow-y-auto outline-hidden\r\n   basecoat@1.0.2 styles/vega.css .dropdown-menu > [data-popover] — bg-popover\r\n   text-popover-foreground ring-foreground/10 gap-0 rounded-md p-1 shadow-md ring-1\r\n   — DEVIATIONS: the z-index is the shared popup stack's `--mono-popup-z` rather\r\n   than a flat z-50, and the height cap is the room the portal measured. */\r\n:where([mono-button-dropdown]) > [mono-panel] {\r\n  position: absolute;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-bd-list-gap);\r\n  width: max-content;\r\n  min-width: var(--_mono-bd-min-width);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  outline: none;\r\n  padding: var(--_mono-bd-padding);\r\n  border-radius: var(--_mono-bd-radius);\r\n  background: var(--_mono-bd-bg);\r\n  color: var(--_mono-bd-text);\r\n  box-shadow:\r\n    0 0 0 var(--_mono-bd-ring-width) var(--_mono-bd-ring-color),\r\n    var(--_mono-bd-shadow);\r\n}\r\n\r\n/* Same UA-`hidden` story as the row, and it has to out-specify the rule above\r\n   even once the panel has been portaled (where it is still a `>` child). */\r\n[mono-button-dropdown] > [mono-panel][hidden] {\r\n  display: none;\r\n}\r\n\r\n/* Once the element takes over it measures and writes inline top/left, so the\r\n   static placement rules below must stand aside. */\r\n[mono-button-dropdown][mono-fixed] > [mono-panel] {\r\n  position: fixed;\r\n}\r\n\r\n/* =========================================\r\n   Static placement — `[data-side]` / `[data-align]`, verbatim\r\n   -----------------------------------------------------------------------------\r\n   What hand-written markup positions with (and SSR, before hydration). The\r\n   element overrides all of it with inline top/left once it has measured.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &:not([data-side]), &[data-side='bottom'] — mt-1 top-full */\r\n[mono-button-dropdown]:not([mono-side]):not([mono-fixed]) > [mono-panel],\r\n[mono-button-dropdown][mono-side=\"bottom\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 100%;\r\n  margin-top: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='top'] — mb-1 bottom-full */\r\n[mono-button-dropdown][mono-side=\"top\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 100%;\r\n  margin-bottom: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='left'] — me-1 end-full */\r\n[mono-button-dropdown][mono-side=\"left\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 100%;\r\n  margin-inline-end: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='right'] — ms-1 start-full */\r\n[mono-button-dropdown][mono-side=\"right\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 100%;\r\n  margin-inline-start: var(--_mono-bd-offset);\r\n}\r\n\r\n/* The top/bottom pair aligns on the inline axis: start-0 / end-0 / start-1/2 -translate-x-1/2.\r\n   DEVIATION from `mono-dropdown`: the default here is `end`, matching the\r\n   `placement=\"bottom-end\"` default — a row of actions hangs off the right. */\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"start\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"]):is(:not([mono-align]), [mono-align=\"end\"]):not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 50%;\r\n  translate: -50% 0;\r\n}\r\n\r\n/* …and the left/right pair on the block axis: top-0 / bottom-0 / top-1/2 -translate-y-1/2 */\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  top: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 50%;\r\n  translate: 0 -50%;\r\n}\r\n\r\n/* =========================================\r\n   List — `[role='menu']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dropdown-menu.css .dropdown-menu [role='menu'] — outline-hidden */\r\n:where([mono-button-dropdown]) [mono-list] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-bd-list-gap);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  outline: none;\r\n}\r\n\r\n/* =========================================\r\n   Item — `[role='menuitem']`\r\n   -----------------------------------------------------------------------------\r\n   The `<li>` paints nothing itself: it hands the entry button a flattened\r\n   palette through the button's PUBLIC knobs, which is the only route that\r\n   reaches the control in BOTH builds (the shadow one keeps it behind a\r\n   boundary). The entry's own `variant` and `color` presets are overridden by\r\n   construction — inside the menu every row is one flat strip.\r\n   ========================================= */\r\n\r\n:where([mono-button-dropdown]) [mono-item] {\r\n  /* ── the row's ink and its hover wash ──────────────────────────────────────\r\n     FOUR tiers, not three, because the middle one belongs to a PER-ENTRY prop:\r\n\r\n       --mono-button-dropdown-item-<x>       consumer, wins over everything\r\n       --_mono-bd-item-<x>-preset            the entry's `color` (mono-item-color)\r\n       --mono-button-dropdown-item-base-<x>  a FLAVOR's neutral row\r\n       the Basecoat value\r\n\r\n     A flavor must write the `-base-` tier: writing the consumer knob would\r\n     out-rank every role and freeze all ten colours at one ink. */\r\n  --_mono-bd-item-color: var(--mono-button-dropdown-item-color, var(--_mono-bd-item-color-preset, var(--mono-button-dropdown-item-base-color, var(--_mono-bd-text))));\r\n  /* basecoat@1.0.2 styles/vega.css .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) — focus-visible:bg-accent */\r\n  --_mono-bd-item-hover-bg: var(--mono-button-dropdown-item-hover-bg, var(--_mono-bd-item-hover-bg-preset, var(--mono-button-dropdown-item-base-hover-bg, var(--mono-button-dropdown-item-hover, var(--accent)))));\r\n  --_mono-bd-item-hover-color: var(--mono-button-dropdown-item-hover-color, var(--_mono-bd-item-hover-color-preset, var(--mono-button-dropdown-item-base-hover-color, var(--accent-foreground))));\r\n  /* basecoat@1.0.2 styles/vega.css .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) — rounded-sm */\r\n  --_mono-bd-item-radius: var(--mono-button-dropdown-item-radius, var(--_mono-bd-item-radius-preset, var(--mono-radius-sm)));\r\n\r\n  /* ── flatten the entry: the button's own public knobs, set on its ancestor ─ */\r\n  --mono-button-bg: transparent;\r\n  --mono-button-color: var(--_mono-bd-item-color);\r\n  --mono-button-border-color: transparent;\r\n  --mono-button-shadow: 0 0 #0000;\r\n  --mono-button-hover-bg: var(--_mono-bd-item-hover-bg);\r\n  --mono-button-hover-color: var(--_mono-bd-item-hover-color);\r\n  --mono-button-hover-border-color: transparent;\r\n  --mono-button-hover-shadow: 0 0 #0000;\r\n  --mono-button-radius: var(--_mono-bd-item-radius);\r\n  /* A menu row is a strip, not a chip: full width, label against the start edge. */\r\n  --mono-button-width: 100%;\r\n  --mono-button-justify: flex-start;\r\n  /* No press twitch in a list — right for a standalone button, wrong for a row. */\r\n  --mono-button-press-translate: 0 0;\r\n  --mono-button-font-weight: var(--mono-button-dropdown-item-font-weight, var(--mono-font-weight-medium));\r\n\r\n  display: block;\r\n  min-width: 0;\r\n}\r\n\r\n/* The entry element itself — `<mono-button>` / `<mono-shadow-button>`, both\r\n   `display: inline-block` hosts — has to fill the row for the whole strip to be\r\n   clickable rather than just the label's width. */\r\n:where([mono-button-dropdown]) [mono-item] > * {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dropdown-menu [data-variant='destructive'] —\r\n   `text-destructive`, and `:is(:focus-visible, .active)` lays the same colour\r\n   down at `bg-destructive/10` (dark `/20`, carried by `--mono-mode-tint`).\r\n   EXTENSION: generalised from destructive to all ten roles. The tint is the\r\n   whole point — a solid role fill under a role-coloured glyph erases it. */\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"primary\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-primary);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-primary) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-primary);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"success\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-success);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-success) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-success);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"danger\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-danger);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-danger) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-danger);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"warning\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-warning);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-warning) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-warning);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"info\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-info);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-info) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-info);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"teal\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-teal);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-teal) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-teal);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"purple\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-purple);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-purple) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-purple);\r\n}\r\n\r\n/* The three surface roles: their ink is a foreground, and a 10% wash of a\r\n   near-background colour is invisible — so they hover on `--accent`, the\r\n   neutral row wash, exactly like an uncoloured entry. */\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"dark\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-dark);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-dark);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"secondary\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-secondary);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-secondary);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"light\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-light);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-light);\r\n}\r\n\r\n/**\r\n * Icon glyphs inside a shadow root.\r\n *\r\n * `adoptIconStyles` copies the page's `.i-mdi-…` rules through CSSOM `cssText`,\r\n * and that read-back DROPS the mask declarations — `mask-image: ;` comes back\r\n * empty whenever the value is a `var()`. What survives is `--un-icon`, the data\r\n * URI itself. So the copy leaves `background-color: currentColor` with no mask,\r\n * painting a solid square: the \"black cube\".\r\n *\r\n * Re-declaring the mask here fixes it, because this sheet is authored source\r\n * rather than a CSSOM copy — it consumes the custom property that DID survive.\r\n * Harmless in the light build, where it merely restates what the page already\r\n * says. The glyph's BOX is left to `[mono-button] [mono-icon]` (Basecoat's\r\n * `size-4`): sizing it here as well used to out-specify that and hand every\r\n * menu icon a 1.1em box the button never asked for.\r\n */\r\n[mono-button-dropdown] [class*='i-'].mono-icon {\r\n  -webkit-mask: var(--un-icon) no-repeat;\r\n  mask: var(--un-icon) no-repeat;\r\n  -webkit-mask-size: 100% 100%;\r\n  mask-size: 100% 100%;\r\n  background-color: currentColor;\r\n  display: inline-block;\r\n}\r\n";
+
 //#endregion
 //#region src/components/button/mono-button-dropdown.ts
-var MonoButtonDropdown = class MonoButtonDropdown extends MonoButtonDropdownCore(LitElement) {
+let MonoButtonDropdown = class MonoButtonDropdown extends MonoButtonDropdownCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(button_default), unsafeCSS(button_dropdown_default)];
+		this.styles = [unsafeCSS(button_css_raw_default), unsafeCSS(button_dropdown_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -675,5 +678,6 @@ var MonoButtonDropdown = class MonoButtonDropdown extends MonoButtonDropdownCore
 	}
 };
 MonoButtonDropdown = __decorate([customElement("mono-button-dropdown")], MonoButtonDropdown);
+
 //#endregion
-export { MonoButtonDropdown, MonoButtonDropdownCore };
+export { MonoButtonDropdown, MonoButtonDropdownCore };

package/dist/ui/button.js

@@ -1,4 +1,5 @@
-import { t as MonoButton } from "../mono-button-simcTQdW.js";
+import { t as MonoButton } from "../mono-button-CeDB9khW.js";
+
 //#region src/components/button/button-utils.ts
 /**
 * Generate badge CSS classes
@@ -59,5 +60,6 @@ function validateButtonProps(props) {
 	if (props.rounded && !validRounded.includes(props.rounded)) return false;
 	return true;
 }
+
 //#endregion
-export { MonoButton, generateBadgeClasses, processIconContent, validateButtonProps };
+export { MonoButton, generateBadgeClasses, processIconContent, validateButtonProps };