@mono-lit/helper 0.0.6 → 0.0.7

package/dist/src/components/table/mono-table-paging-group.d.ts

@@ -12,7 +12,6 @@ declare const MonoTablePagingGroup_base: Constructor<MonoTablePagingGroupCoreInt
  * <mono-table-paging-group :data-grid.prop="table" :group.prop="node" page-size="5" />
  */
 export declare class MonoTablePagingGroup extends MonoTablePagingGroup_base {
-  static styles: import("lit").CSSResult[];
   protected createRenderRoot(): HTMLElement;
 }
 declare global {

package/dist/src/components/table/mono-table-paging.d.ts

@@ -8,7 +8,6 @@ declare const MonoTablePaging_base: Constructor<MonoTablePagingCoreInterface> &
  * All logic lives in `MonoTablePagingCore`; the shadow build shares the mixin.
  */
 export declare class MonoTablePaging extends MonoTablePaging_base {
-  static styles: import("lit").CSSResult[];
   protected createRenderRoot(): HTMLElement;
 }
 declare global {

package/dist/src/components/table/mono-table-search.d.ts

@@ -12,7 +12,6 @@ declare const MonoTableSearch_base: Constructor<MonoTableSearchCoreInterface> &
  * `dist/ui/index.css` — so no extra stylesheet is needed for the light build.
  */
 export declare class MonoTableSearch extends MonoTableSearch_base {
-  static styles: import("lit").CSSResult[];
   protected createRenderRoot(): HTMLElement;
   /**
    * Light-DOM slot capture (mirrors `mono-dropdown-table`): a real `<slot>` can't

package/dist/src/components/table/mono-table-sort.d.ts

@@ -20,7 +20,6 @@ declare const MonoTableSort_base: Constructor<MonoTableSortCoreInterface> & type
  * <th><mono-table-sort :data-grid.prop="table" field="Nama">Name</mono-table-sort></th>
  */
 export declare class MonoTableSort extends MonoTableSort_base {
-  static styles: import("lit").CSSResult[];
   protected createRenderRoot(): HTMLElement;
   /** The captured label nodes (the element's original light-DOM children). */
   private _buckets;

package/dist/src/components/table/mono-table-summary.d.ts

@@ -16,7 +16,6 @@ declare const MonoTableSummary_base: Constructor<MonoTableSummaryCoreInterface>
  * build shares the mixin. Both register the same tag, so a document loads one.
  */
 export declare class MonoTableSummary extends MonoTableSummary_base {
-  static styles: import("lit").CSSResult[];
   protected createRenderRoot(): HTMLElement;
 }
 declare global {

package/dist/src/components/table/mono-table-th.d.ts

@@ -23,7 +23,6 @@ declare const MonoTableTh_base: Constructor<MonoTableThCoreInterface> & typeof L
  *      :editable.prop="{ type: 'string', editor: 'input-text' }">Name</mono-table-th></th>
  */
 export declare class MonoTableTh extends MonoTableTh_base {
-  static styles: import("lit").CSSResult[];
   protected createRenderRoot(): HTMLElement;
   /** The captured label nodes (the element's original light-DOM children). */
   private _buckets;

package/dist/src/components/table/table-controller-core.d.ts

@@ -19,6 +19,8 @@ export declare class MonoTableControllerCoreInterface {
    */
   protected _propsSlot?: MonoTablePropsSlot;
   protected _applyControllerProps(): void;
+  /** What the element renders from the controller; a notify with an unchanged key is skipped. */
+  protected _stateKey(): unknown[] | undefined;
 }
 /** The `props` key an element reads — see {@link MonoTableProps}. */
 export type MonoTablePropsSlot = 'th' | 'sort' | 'summary' | 'search' | 'info' | 'paging' | 'loading' | 'empty' | 'error' | 'pageSize' | 'pagingGroup' | 'detail' | 'checkbox';

package/dist/src/components/tabs/mono-tabs.d.ts

@@ -16,7 +16,6 @@ declare const MonoTabs_base: Constructor<MonoTabsCoreInterface> & typeof LitElem
  * so a document loads only one.
  */
 export declare class MonoTabs extends MonoTabs_base {
-  static styles: import("lit").CSSResult[];
   protected createRenderRoot(): HTMLElement;
   private _slotsCaptured;
   private _slotIcons;

package/dist/src/components/tag-input/mono-tag-input.d.ts

@@ -14,7 +14,6 @@ declare const MonoTagInput_base: Constructor<MonoTagInputCoreInterface> & typeof
  * `MonoTagInputCore`; both register `mono-tag-input`, so a document loads one.
  */
 export declare class MonoTagInput extends MonoTagInput_base {
-  static styles: import("lit").CSSResult[];
   protected createRenderRoot(): HTMLElement;
   private _slotsCaptured;
   private _slotLabel;

package/dist/src/components/textarea/mono-textarea.d.ts

@@ -14,7 +14,6 @@ declare const MonoTextarea_base: Constructor<MonoTextareaCoreInterface> & typeof
  * `MonoTextareaCore`; both register `mono-textarea`, so a document loads one.
  */
 export declare class MonoTextarea extends MonoTextarea_base {
-  static styles: import("lit").CSSResult[];
   protected createRenderRoot(): HTMLElement;
   private _slotsCaptured;
   private _slotLabel;

package/dist/src/components/tooltip/field-tooltip-addon.d.ts

@@ -0,0 +1,5 @@
+import { controlMonoTooltip } from "./control-tooltip.js";
+//#region src/components/tooltip/field-tooltip-addon.d.ts
+/** `controlMonoTooltip` once the optional `@floating-ui/dom` peer has loaded; rejects without it. */
+export declare function loadFieldTooltipAddon(): Promise<typeof controlMonoTooltip>;
+//#endregion

package/dist/src/composables/popup-portal.d.ts

@@ -146,7 +146,26 @@ export declare class PopupPortalController implements ReactiveController, PopupL
   constructor(host: PopupHost, opts: PopupPortalOptions);
   hostConnected(): void;
   hostDisconnected(): void;
+  /**
+   * Position SYNCHRONOUSLY only on the open edge; every later update of an open popup is
+   * coalesced into one frame (`scheduleReposition`), and the custom-property carry-over
+   * (`_syncPortalVars`, two `getComputedStyle`) runs on the open edge only.
+   *
+   * `reposition()` is a write-then-read forced layout, and hosts update constantly while open —
+   * every keystroke in a search box, every arrow-key cursor move, every controller notify — so
+   * running it per update cost one synchronous layout each. A frame callback still runs before
+   * that frame paints, so nothing visibly lags; a panel whose content resizes WITHOUT a host
+   * update (a consumer re-rendering its rows) is caught by the ResizeObserver instead.
+   */
   hostUpdated(): void;
+  /** Whether the last `hostUpdated` saw the popup open — the open edge is the change. */
+  private _wasOpen;
+  private _sizeObserver;
+  /** Reposition when the panel or its anchor changes size while open (content, chips wrapping). */
+  private _observeSize;
+  private _unobserveSize;
+  /** Reposition on the next frame, coalesced with any viewport movement already pending. */
+  scheduleReposition(): void;
   /**
    * Only relocate to `<body>` when the host renders into light DOM
    * (`renderRoot === host`). Shadow hosts keep the panel in their shadow root.
@@ -155,7 +174,11 @@ export declare class PopupPortalController implements ReactiveController, PopupL
   private _ensurePortal;
   /** Move the panel into the body portal on first open; keep it there after. */
   private _adopt;
-  /** Mirror the style-scope element's classes and `mono-*` attributes onto the portal. */
+  /**
+   * Mirror the style-scope element's classes and `mono-*` attributes onto the portal.
+   * `withVars` also carries the custom properties across — a computed-style read, so only on
+   * the open edge and on a scope attribute change, not on every host update.
+   */
   private _syncPortalClass;
   /**
    * Carry the component's public custom properties across the portal (see

package/dist/{styles-BODNpZV1.js → styles-D-ergrfR.js}

@@ -20353,4 +20353,4 @@ function toExcelStyle(style) {
 }
 
 //#endregion
-export { flattenInline as a, escapeCellText as c, __exportAll as d, __toESM as f, toExcelStyle as i, stripDirectives as l, combineStyles as n, parseMarkdown as o, mergeStyles as r, encodeDirective as s, DEFAULT_STYLES as t, __commonJSMin as u };
+export { flattenInline as a, escapeCellText as c, __toESM as d, toExcelStyle as i, stripDirectives as l, combineStyles as n, parseMarkdown as o, mergeStyles as r, encodeDirective as s, DEFAULT_STYLES as t, __commonJSMin as u };

package/dist/{tooltip-Drekihf5.js → tooltip-Cu5IrDS9.js}

@@ -1,5 +1,4 @@
-import { a as hasLiveDocument, i as destroyAllTooltipControllers, r as createTooltipController, u as setMonoTooltipGlobal } from "./control-tooltip-C3rA_nSH.js";
-import "./tooltip-loader-Dcp9AUZn.js";
+import { i as hasLiveDocument, n as createTooltipController, r as destroyAllTooltipControllers, u as setMonoTooltipGlobal } from "./control-tooltip-CoPD37_h.js";
 
 //#region src/components/tooltip/tooltip-declarative.ts
 /** The two text attributes — `message` is an alias of `content`. */

package/dist/tooltip.js

@@ -1,5 +1,4 @@
-import { c as getMonoTooltipGlobal, l as resolveTooltipOptions, o as monoTooltip, s as DEFAULT_TOOLTIP_OPTIONS, t as controlMonoTooltip } from "./control-tooltip-C3rA_nSH.js";
-import { t as loadFloatingUi } from "./tooltip-loader-Dcp9AUZn.js";
-import { a as resetMonoTooltip, i as readTooltipAttributes, n as createMonoTooltip, r as destroyAllMonoTooltips, t as TOOLTIP_ATTRIBUTE_SELECTOR } from "./tooltip-Drekihf5.js";
+import { a as monoTooltip, c as getMonoTooltipGlobal, l as resolveTooltipOptions, o as loadFloatingUi, s as DEFAULT_TOOLTIP_OPTIONS, t as controlMonoTooltip } from "./control-tooltip-CoPD37_h.js";
+import { a as resetMonoTooltip, i as readTooltipAttributes, n as createMonoTooltip, r as destroyAllMonoTooltips, t as TOOLTIP_ATTRIBUTE_SELECTOR } from "./tooltip-Cu5IrDS9.js";
 
 export { DEFAULT_TOOLTIP_OPTIONS, TOOLTIP_ATTRIBUTE_SELECTOR, controlMonoTooltip, createMonoTooltip, destroyAllMonoTooltips, getMonoTooltipGlobal, loadFloatingUi, monoTooltip, readTooltipAttributes, resetMonoTooltip, resolveTooltipOptions };

package/dist/ui/accordion.js

@@ -1,10 +1,10 @@
-import { g as monoHostChildNodes } from "../mono-ui-KOBJcnXk.js";
-import { t as customElement } from "../mono-element-Bc9wElPy.js";
+import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, i as defineHybridPropAlias, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
 import { t as isIconifyClass } from "../icon-ClxnYhBG.js";
-import { a as parkDetachedNodes, i as guardHostTextContent, s as placeSlotNode } from "../light-slots-BnBR29E7.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { a as parkDetachedNodes, i as guardHostTextContent, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
+import { LitElement, html, isServer, nothing } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { property, query, state } from "lit/decorators.js";
 
@@ -277,10 +277,6 @@ const MonoAccordionCore = (superClass) => {
 	return MonoAccordionCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\accordion\accordion.css?raw.js
-var accordion_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-accordion — a port of Basecoat's `.accordion`\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-accordion size=\"lg\" color=\"success\" model-value>\r\n     <div mono-accordion mono-size=\"lg\" mono-color=\"success\" mono-open>\r\n       <button mono-head type=\"button\" aria-expanded=\"true\">\r\n         <span mono-glyph>…</span>\r\n         <span mono-heading>\r\n           <span mono-title>Question</span>\r\n           <span mono-subtitle>Sub-text</span>\r\n         </span>\r\n         <span mono-actions>…</span>\r\n         <span mono-arrow><svg …></svg></span>\r\n       </button>\r\n       <div mono-body role=\"region\"><div>…</div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary). The element writes them on its root — the\r\n   host in the light build, an inner root `<div>` in the shadow one — plus the\r\n   states `mono-open` and `mono-disabled`. The old classes\r\n   (`.mono-accordion.md.primary.open`) are still emitted as inert hooks until\r\n   2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-accordion-group]        ≡ .accordion (flex w-full flex-col; maia /\r\n                                     mira / luma / rhea add the frame, which is\r\n                                     the `-group-*` knobs below)\r\n     [mono-accordion]              ≡ .accordion > details (not-last:border-b, and\r\n                                     `open:bg-muted/50` on four flavors)\r\n                                     — EXTENSION when standalone: upstream has no\r\n                                     accordion outside a group, so on its own it\r\n                                     keeps this component's frame (border, radius,\r\n                                     shadow-xs). Inside a group the frame moves to\r\n                                     the group and the item flattens to a divider.\r\n     [mono-head]                   ≡ > summary (relative flex w-full items-start\r\n                                     justify-between border border-transparent\r\n                                     cursor-pointer outline-none, rounded-md py-4\r\n                                     text-left text-sm font-medium hover:underline,\r\n                                     focus-visible:ring-3 ring-ring/50 border-ring)\r\n                                     — DEVIATION: a real <button>, so the row is a\r\n                                     button for a11y rather than a <summary> whose\r\n                                     open state the element would have to fight\r\n     [mono-glyph]                  ≡ EXTENSION (the leading icon chip)\r\n     [mono-heading] > [mono-title] ≡ the summary's own text\r\n     [mono-subtitle]               ≡ EXTENSION (a second line under the title;\r\n                                     `[mono-description]` is its old name, and the\r\n                                     element still renders both)\r\n     [mono-actions]                ≡ EXTENSION (trailing controls in the row)\r\n     [mono-arrow]                  ≡ summary > svg:last-child (text-muted-foreground\r\n                                     ms-auto size-4, rotate-180 while open)\r\n     [mono-body]                   ≡ details > :not(summary) (overflow-hidden,\r\n                                     pt-0 pb-4 text-sm) — plus the animated\r\n                                     collapse, which upstream's <details> gets free\r\n     [mono-size]/[mono-color]      ≡ EXTENSION (upstream ships one size, no colour)\r\n     [mono-disabled]               ≡ details[aria-disabled] > summary\r\n                                     (pointer-events-none opacity-50)\r\n\r\n   PART NAMES ARE PATH-SCOPED. `[mono-title]`, `[mono-body]`, `[mono-actions]`\r\n   and `[mono-icon]` are also card's, dropdown's and button's part names, and an\r\n   accordion BODY is a place consumers put cards and buttons. Every rule here is\r\n   therefore written as an explicit child path from the root — `:where([mono-accordion]\r\n   > [mono-head] > [mono-heading]) > [mono-title]` — so a nested component's parts\r\n   are never reached. The `:where()` keeps that path at (0,1,0), the same weight a\r\n   one-attribute rule would have, so a `cssClass` utility still wins by source order.\r\n\r\n   FLAVORS set `--mono-accordion-{radius,shadow,pad-x-<size>,pad-y-<size>,\r\n   title-font-<size>,body-font-<size>,open-bg,group-radius,group-border-width,\r\n   arrow-size,ring-width}`; every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"accordion\"` prints the matrix).\r\n   ========================================================================= */\r\n\r\nmono-accordion {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the item\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details — not-last:border-b */\r\n[mono-accordion] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-accordion-primary: var(--mono-accordion-primary, var(--primary));\r\n  --_mono-accordion-secondary: var(--mono-accordion-secondary, var(--secondary-foreground));\r\n  --_mono-accordion-success: var(--mono-accordion-success, var(--success));\r\n  --_mono-accordion-danger: var(--mono-accordion-danger, var(--destructive));\r\n  --_mono-accordion-warning: var(--mono-accordion-warning, var(--warning));\r\n  --_mono-accordion-info: var(--mono-accordion-info, var(--info));\r\n  --_mono-accordion-teal: var(--mono-accordion-teal, var(--teal));\r\n  --_mono-accordion-purple: var(--mono-accordion-purple, var(--purple));\r\n  --_mono-accordion-neutral: var(--mono-accordion-neutral, var(--neutral));\r\n  --_mono-accordion-dark: var(--mono-accordion-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-accordion-accent: var(--mono-accordion-accent, var(--_mono-accordion-accent-preset, var(--_mono-accordion-primary)));\r\n\r\n  /* ── surfaces ──────────────────────────────────────────────────────────── */\r\n  --_mono-accordion-bg: var(--mono-accordion-bg, var(--mono-accordion-surface, var(--card)));\r\n  --_mono-accordion-text: var(--mono-accordion-text, var(--card-foreground));\r\n  --_mono-accordion-border: var(--mono-accordion-border, var(--border));\r\n  --_mono-accordion-shadow: var(--mono-accordion-shadow, var(--mono-shadow-xs));\r\n  /* `open:bg-muted/50` — vega does NOT tint an open item; maia, mira, luma and\r\n     rhea do, and set this knob. `--mono-accordion-head-bg` is the pre-port name,\r\n     honoured until 2.0: it tinted the open HEAD, where this tints the open item\r\n     (head and body alike), which is what upstream's `open:` variant does. */\r\n  /* An OPAQUE fill, not an overlay: it replaces the item's own surface while\r\n     open, so a flavor's `bg-muted/50` is written as that mix OVER `--card`.\r\n     Defaulting to the item's surface is what makes vega's \"no tint\" a no-op. */\r\n  --_mono-accordion-open-bg: var(--mono-accordion-open-bg, var(--mono-accordion-head-bg, var(--_mono-accordion-bg)));\r\n  --_mono-accordion-open-border-color: var(--mono-accordion-open-border-color,\r\n    color-mix(in oklab, var(--_mono-accordion-accent) 32%, var(--_mono-accordion-border)));\r\n  --_mono-accordion-open-shadow: var(--mono-accordion-open-shadow,\r\n    0 3px 14px color-mix(in oklab, var(--_mono-accordion-accent) 9%, transparent));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .accordion > details > summary — py-4 text-sm\r\n     — DEVIATION: the inline padding is ours. Upstream's summary has none because\r\n     its group is edge-to-edge in the page; this item can stand alone inside its\r\n     own frame, where text flush against the border reads as a bug. maia / luma /\r\n     rhea say `p-4`, which is exactly the value used here. */\r\n  --_mono-accordion-pad-x: var(--mono-accordion-pad-x, var(--_mono-accordion-pad-x-preset, var(--mono-accordion-pad-x-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-accordion-pad-y: var(--mono-accordion-pad-y, var(--_mono-accordion-pad-y-preset, var(--mono-accordion-pad-y-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-accordion-radius: var(--mono-accordion-radius, var(--_mono-accordion-radius-preset, var(--mono-accordion-radius-md, var(--mono-radius-md))));\r\n  --_mono-accordion-gap: var(--mono-accordion-gap, var(--_mono-accordion-gap-preset, calc(var(--mono-spacing) * 3)));\r\n\r\n  /* ── type ──────────────────────────────────────────────────────────────── */\r\n  --_mono-accordion-title-font: var(--mono-accordion-title-font, var(--_mono-accordion-title-font-preset, var(--mono-accordion-title-font-md, var(--mono-text-sm))));\r\n  --_mono-accordion-title-line-height: var(--mono-accordion-title-line-height, var(--_mono-accordion-title-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-accordion-title-weight: var(--mono-accordion-title-weight, var(--mono-font-weight-medium));\r\n  /* `hover:underline` — the whole row is the control, so the hover cue is on its\r\n     label. A flavor (or a consumer) sets `none` to drop it. */\r\n  --_mono-accordion-title-hover-decoration: var(--mono-accordion-title-hover-decoration, underline);\r\n  --_mono-accordion-description-font: var(--mono-accordion-description-font, var(--_mono-accordion-description-font-preset, var(--mono-text-xs)));\r\n  --_mono-accordion-description-color: var(--mono-accordion-description-color, var(--muted-foreground));\r\n  --_mono-accordion-body-font: var(--mono-accordion-body-font, var(--_mono-accordion-body-font-preset, var(--mono-accordion-body-font-md, var(--mono-text-sm))));\r\n  --_mono-accordion-body-line-height: var(--mono-accordion-body-line-height, var(--_mono-accordion-body-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-accordion-body-color: var(--mono-accordion-body-color, inherit);\r\n\r\n  /* ── the chevron — `text-muted-foreground size-4` ──────────────────────── */\r\n  --_mono-accordion-arrow-size: var(--mono-accordion-arrow-size, var(--_mono-accordion-arrow-size-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-accordion-arrow-color: var(--mono-accordion-arrow-color, var(--muted-foreground));\r\n  /* EXTENSION: the role reads the open state at a glance. Set it to\r\n     `--muted-foreground` for upstream's single-colour chevron. */\r\n  --_mono-accordion-arrow-open-color: var(--mono-accordion-arrow-open-color, var(--_mono-accordion-accent));\r\n\r\n  /* ── the leading chip (EXTENSION) ──────────────────────────────────────── */\r\n  --_mono-accordion-glyph-size: var(--mono-accordion-glyph-size, var(--_mono-accordion-glyph-size-preset, calc(var(--mono-spacing) * 7)));\r\n  --_mono-accordion-glyph-radius: var(--mono-accordion-glyph-radius, var(--_mono-accordion-glyph-radius-preset, var(--mono-radius-sm)));\r\n  --_mono-accordion-glyph-bg: var(--mono-accordion-glyph-bg, color-mix(in oklab, var(--_mono-accordion-accent) 14%, transparent));\r\n  --_mono-accordion-glyph-color: var(--mono-accordion-glyph-color, var(--_mono-accordion-accent));\r\n\r\n  /* ── focus — `focus-visible:ring-3 ring-ring/50 border-ring` ───────────── */\r\n  --_mono-accordion-ring-color: var(--mono-accordion-ring-color, var(--_mono-accordion-accent));\r\n\r\n  /* The head's hover fill. Upstream has none — it underlines the label instead —\r\n     so the tint is 0% on vega. A flavor sets the ALPHA (`-head-hover-tint`) and\r\n     the wash is built HERE: a flavor writing the colour itself would have to\r\n     reference `--_mono-accordion-accent`, which is declared on this element, and\r\n     a `:root` declaration that references it is invalid at computed-value time. */\r\n  --_mono-accordion-head-hover-bg: var(--mono-accordion-head-hover-bg,\r\n    color-mix(in oklab, var(--_mono-accordion-accent) var(--mono-accordion-head-hover-tint, 0%), transparent));\r\n  --_mono-accordion-ring-width: var(--mono-accordion-ring-width, var(--mono-ring-width));\r\n  /* A slot, so a state can neutralise the resting shadow without `box-shadow: none`. */\r\n  --_mono-accordion-ring: 0 0 #0000;\r\n\r\n  /* Open/close animation duration, shared by the body collapse and the chevron so\r\n     `--mono-accordion-duration: 0s` means a fully instant toggle.\r\n\r\n     This is THE lever for a slow open/close. `grid-template-rows: 0fr → 1fr` is the\r\n     only animated LAYOUT property in the library, and it re-lays-out the whole slotted\r\n     subtree on every frame of the transition, so its cost scales with what is inside\r\n     the body — and, because the panel's own height changes, with whatever follows it\r\n     in the document too. Measured with ~320-node bodies (Chromium, median of 3), one\r\n     open+close cycle: 24.8ms animated vs 3.6ms at `0s` — the animation is ~85% of the\r\n     toggle's cost. Set this to `0s` on accordions whose bodies (or whose pages) are\r\n     heavy.\r\n\r\n     THREE approaches that look like fixes and are NOT. All were built and measured\r\n     (Chromium, LayoutDuration + RecalcStyleDuration, min of 9 toggles, two scenarios:\r\n     40 panels with ~320-node bodies, and one small panel above a 2000-row sticky\r\n     table). Recorded so nobody spends the afternoon on them again:\r\n\r\n       1. Pin the track to a measured PIXEL height for the transition, so the `fr`\r\n          never has to be resolved against content. Landed inside the noise across\r\n          three runs (+11%, -2%, -17%) and cost two extra forced layouts per toggle to\r\n          measure and release. The per-frame cost is NOT the `fr` resolution — it is\r\n          that the row's block size changes at all, which re-lays-out the grid item\r\n          however the target size was expressed.\r\n       2. Also give the inner region a definite `height`, so its own constraint space\r\n          stops changing and its subtree layout can be cached. No effect either.\r\n       3. Don't animate a layout property at all: snap the box to its final size and\r\n          slide the content in on `transform`/`opacity`. A quick CSS prototype looked\r\n          like a 50% win, but only because it had no `content-visibility` transition\r\n          and so dropped the subtree instantly on close — the close animation was\r\n          simply invisible. Made to actually work, it measured 14.6/18.3ms vs\r\n          collapse's 20.0/18.4ms on heavy bodies (i.e. unreliable), and 17.4/19.6ms vs\r\n          12.6/12.8ms on the heavy-page scenario — reliably WORSE, because the\r\n          transform/opacity pass costs more than the box animation it replaced.\r\n\r\n     So `--mono-accordion-duration: 0s` really is the lever, and there is no cleverer\r\n     one. Measured against it: heavy bodies 7.0/10.8ms vs 20.0/18.4ms (~45-65% off);\r\n     heavy page 11.1/11.7ms vs 12.6/12.8ms (~10% off — on a page like that the\r\n     accordion is nearly irrelevant and the page's own weight is the cost). */\r\n  --_mono-accordion-duration: var(--mono-accordion-duration, var(--mono-duration));\r\n\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-accordion-text);\r\n\r\n  /* EXTENSION — the standalone frame. Inside a group this is flattened below and\r\n     the frame moves to the group, which is upstream's arrangement. */\r\n  border: var(--mono-border-width) solid var(--_mono-accordion-border);\r\n  border-radius: var(--_mono-accordion-radius);\r\n  background: var(--_mono-accordion-bg);\r\n  box-shadow: var(--_mono-accordion-shadow);\r\n  overflow: hidden;\r\n  transition:\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion],\r\n:where([mono-accordion]) *,\r\n:where([mono-accordion]) *::before,\r\n:where([mono-accordion]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders EVERY region up front (so DSD can project into them\r\n   server-side) and marks the ones with nothing in them; the light build renders\r\n   only what exists. Hiding them here is what keeps the two builds identical.\r\n\r\n   NOT wrapped in `:where()`, unlike the other parts: a region rule is two\r\n   attributes strong, so a zero-weight hide would tie and lose on source order. */\r\n[mono-accordion] :is(\r\n  [mono-glyph],\r\n  [mono-heading],\r\n  [mono-title],\r\n  [mono-subtitle],\r\n  [mono-description],\r\n  [mono-actions]\r\n)[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Group — `.accordion`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion — flex w-full flex-col\r\n   The GROUP is consumer markup — the element renders one item, not the list — so\r\n   unlike every part below, its pre-port CLASS is public API and keeps working\r\n   beside the attribute until 2.0.\r\n   The frame knobs are inert on vega (0 width, no radius) and set by the four\r\n   flavors whose `.accordion` says `overflow-hidden rounded-2xl border`. */\r\n:is([mono-accordion-group], .mono-accordion-group) {\r\n  --_mono-accordion-group-gap: var(--mono-accordion-group-gap, 0px);\r\n  --_mono-accordion-group-radius: var(--mono-accordion-group-radius, 0px);\r\n  --_mono-accordion-group-border-width: var(--mono-accordion-group-border-width, 0px);\r\n  --_mono-accordion-group-border-color: var(--mono-accordion-group-border-color, var(--border));\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: var(--_mono-accordion-group-gap);\r\n  box-sizing: border-box;\r\n  border: var(--_mono-accordion-group-border-width) solid var(--_mono-accordion-group-border-color);\r\n  border-radius: var(--_mono-accordion-group-radius);\r\n  overflow: hidden;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details — not-last:border-b\r\n   In a group the ITEM stops being a card: the frame is the group's, and all an\r\n   item carries is the hairline to the next one.\r\n\r\n   TWO selectors for one rule, because the item is not always a child of the\r\n   group. Hand-written markup nests `[mono-accordion]` directly, so the `>`\r\n   path matches; the ELEMENT puts a custom-element host in between (light) or a\r\n   shadow boundary (shadow), which no selector crosses — so it detects the group\r\n   itself and writes `mono-grouped` / `mono-last` on its root. */\r\n:where([mono-accordion-group], .mono-accordion-group) > [mono-accordion],\r\n[mono-accordion][mono-grouped] {\r\n  border-width: 0;\r\n  border-radius: 0;\r\n  box-shadow: none;\r\n}\r\n\r\n/* The divider rides the group's own CHILD, whatever that is — the item itself in\r\n   hand-written markup, the custom-element host when the element renders it. That\r\n   is what makes `:last-child` reliable: the host is a child of the group in both\r\n   builds, where the ITEM is one only in raw markup, and an item that asked \"am I\r\n   last?\" itself would answer from however many siblings existed when it rendered. */\r\n:where([mono-accordion-group], .mono-accordion-group)\r\n  > :is([mono-accordion], mono-accordion, mono-shadow-accordion) {\r\n  border-bottom: var(--mono-border-width) solid var(--mono-accordion-border, var(--border));\r\n}\r\n\r\n:where([mono-accordion-group], .mono-accordion-group)\r\n  > :is([mono-accordion], mono-accordion, mono-shadow-accordion):last-child {\r\n  border-bottom-width: 0;\r\n}\r\n\r\n/* A group with a GAP has separate boxes again, and a divider would float in the\r\n   space between them — so a gap is a consumer's own arrangement, not upstream's,\r\n   and they set `--mono-accordion-group-gap` knowing the dividers go with it. */\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE accordion size; md is its `summary`\r\n   ========================================= */\r\n\r\n[mono-accordion][mono-size=\"xs\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-xs, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-xs, var(--mono-radius-sm));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 1.5);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-xs, var(--mono-text-xs));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-xs);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-xs, var(--mono-text-xs));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 3);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 4.5);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-sm);\r\n}\r\n\r\n[mono-accordion][mono-size=\"sm\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-sm, var(--mono-radius-md));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 2);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-sm, var(--mono-text-xs));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-xs);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-sm, var(--mono-text-xs));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 3.5);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 6);\r\n}\r\n\r\n[mono-accordion][mono-size=\"lg\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-lg, var(--mono-radius-lg));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 3.5);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-lg, var(--mono-text-base));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-lg, var(--mono-text-sm));\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 5);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 8);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-md);\r\n}\r\n\r\n[mono-accordion][mono-size=\"xl\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-xl, var(--mono-radius-xl));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 4);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-xl, var(--mono-text-lg));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-sm);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-xl, var(--mono-text-base));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 5.5);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 9);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-lg);\r\n}\r\n\r\n[mono-accordion][mono-size=\"xxl\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 4.5);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-xxl, var(--mono-text-xl));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-xl--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-sm);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-xxl, var(--mono-text-lg));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 6);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 10);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-lg);\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the chevron, the ring and the open edge\r\n   ========================================= */\r\n\r\n[mono-accordion][mono-color=\"primary\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-primary); }\r\n[mono-accordion][mono-color=\"secondary\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-secondary); }\r\n[mono-accordion][mono-color=\"success\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-success); }\r\n[mono-accordion][mono-color=\"danger\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-danger); }\r\n[mono-accordion][mono-color=\"warning\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-warning); }\r\n[mono-accordion][mono-color=\"info\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-info); }\r\n[mono-accordion][mono-color=\"teal\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-teal); }\r\n[mono-accordion][mono-color=\"purple\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-purple); }\r\n[mono-accordion][mono-color=\"neutral\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-neutral); }\r\n[mono-accordion][mono-color=\"dark\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-dark); }\r\n\r\n/* =========================================\r\n   States\r\n   ========================================= */\r\n\r\n[mono-accordion][mono-open] {\r\n  border-color: var(--_mono-accordion-open-border-color);\r\n  box-shadow: var(--_mono-accordion-open-shadow);\r\n  background: var(--_mono-accordion-open-bg);\r\n}\r\n\r\n/* In a group the item has no frame to tint — only the open wash survives. */\r\n:where([mono-accordion-group], .mono-accordion-group) > [mono-accordion][mono-open],\r\n[mono-accordion][mono-grouped][mono-open] {\r\n  border-color: var(--_mono-accordion-border);\r\n  box-shadow: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details[aria-disabled='true'] > summary, .accordion > details > summary[aria-disabled='true']\r\n   — pointer-events-none opacity-50. DEVIATION: 0.6, this component's pre-port\r\n   value, and on the whole item rather than the summary alone (the body is\r\n   equally unusable). */\r\n[mono-accordion][mono-disabled] {\r\n  opacity: 0.6;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* =========================================\r\n   Head — `> summary`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details > summary —\r\n   relative flex w-full flex-1 cursor-pointer list-none items-start\r\n   justify-between border border-transparent transition-all outline-none */\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > summary — rounded-md py-4\r\n   text-left text-sm font-medium hover:underline focus-visible:ring-3\r\n   focus-visible:ring-ring/50 focus-visible:border-ring\r\n   — DEVIATIONS: a real <button> (so it needs the UA button reset), and\r\n   `items-center` rather than `items-start`: this row can carry a glyph chip and\r\n   trailing actions, which upstream's text-only summary never does. */\r\n:where([mono-accordion]) > [mono-head] {\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-accordion-gap);\r\n  padding: var(--_mono-accordion-pad-y) var(--_mono-accordion-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-accordion-radius);\r\n  background: none;\r\n  color: inherit;\r\n  font: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  outline: none;\r\n  appearance: none;\r\n  box-shadow: var(--_mono-accordion-ring);\r\n  transition:\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion] > [mono-head]:focus-visible {\r\n  border-color: var(--_mono-accordion-ring-color);\r\n  --_mono-accordion-ring: 0 0 0 var(--_mono-accordion-ring-width)\r\n    color-mix(in oklab, var(--_mono-accordion-ring-color) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* `hover:underline` — on the label, which is the only text in upstream's summary. */\r\n@media (hover: hover) {\r\n  [mono-accordion] > [mono-head]:hover:not(:disabled) {\r\n    background: var(--_mono-accordion-head-hover-bg);\r\n  }\r\n\r\n  [mono-accordion] > [mono-head]:hover:not(:disabled) [mono-title] {\r\n    text-decoration-line: var(--_mono-accordion-title-hover-decoration);\r\n  }\r\n}\r\n\r\n[mono-accordion] > [mono-head]:disabled {\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* =========================================\r\n   Leading chip — EXTENSION\r\n   ========================================= */\r\n\r\n:where([mono-accordion] > [mono-head]) > [mono-glyph] {\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-accordion-glyph-size);\r\n  height: var(--_mono-accordion-glyph-size);\r\n  border-radius: var(--_mono-accordion-glyph-radius);\r\n  background: var(--_mono-accordion-glyph-bg);\r\n  color: var(--_mono-accordion-glyph-color);\r\n  line-height: 1;\r\n}\r\n\r\n/* The glyph itself fills the chip at 62% — light: the `[data-mono-slot]`\r\n   placeholder the icon is moved into; shadow: the projected icon. \"Icon\" is an\r\n   svg OR an element painted by a class (a UnoCSS/Iconify mask span such as\r\n   `<span slot=\"icon\" class=\"i-tabler-filter-search\">`), so the shadow rule takes\r\n   any slotted element, not just svg. */\r\n[mono-accordion] > [mono-head] > [mono-glyph] > [data-mono-slot=\"icon\"],\r\n[mono-accordion] > [mono-head] > [mono-glyph] > svg,\r\n[mono-accordion] > [mono-head] > [mono-glyph] slot[name=\"icon\"]::slotted(*),\r\n[mono-accordion] > [mono-head] > [mono-glyph] .mono-accordion-iconify {\r\n  display: block;\r\n  width: 62%;\r\n  height: 62%;\r\n}\r\n\r\n/* …and the light build's icon fills that placeholder (chip.css's\r\n   `[data-mono-slot=\"icon\"] > *`). It used to lean on a global\r\n   `[data-mono-slot='icon'] > svg` rule in chip.css; since the Basecoat port that\r\n   rule is scoped to chips, and an unsized inline svg falls back to 300×150. Only\r\n   svg was sized here, so a mask span stayed `display: inline` — its icon-class\r\n   `width/height: 1em` did not apply and it rendered 0×0. */\r\n[mono-accordion] > [mono-head] > [mono-glyph] > [data-mono-slot=\"icon\"] > *,\r\n[mono-accordion] > [mono-head] > [mono-glyph] .mono-accordion-iconify > svg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Title + description\r\n   ========================================= */\r\n\r\n:where([mono-accordion] > [mono-head]) > [mono-heading] {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: calc(var(--mono-spacing) * 0.25);\r\n}\r\n\r\n/* `> slot[name=\"header\"]`: in the shadow build the title/subtitle are the\r\n   FALLBACK content of `<slot name=\"header\">`, so they sit one element deeper. */\r\n:where(\r\n  [mono-accordion] > [mono-head] > [mono-heading],\r\n  [mono-accordion] > [mono-head] > [mono-heading] > slot[name=\"header\"]\r\n) > [mono-title] {\r\n  font-size: var(--_mono-accordion-title-font);\r\n  line-height: var(--_mono-accordion-title-line-height);\r\n  font-weight: var(--_mono-accordion-title-weight);\r\n  color: var(--_mono-accordion-text);\r\n}\r\n\r\n:where(\r\n  [mono-accordion] > [mono-head] > [mono-heading],\r\n  [mono-accordion] > [mono-head] > [mono-heading] > slot[name=\"header\"]\r\n) > :is([mono-subtitle], [mono-description]) {\r\n  font-size: var(--_mono-accordion-description-font);\r\n  line-height: var(--mono-leading-normal);\r\n  color: var(--_mono-accordion-description-color);\r\n}\r\n\r\n:where([mono-accordion] > [mono-head]) > [mono-actions] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 1.5);\r\n}\r\n\r\n/* =========================================\r\n   Chevron — `summary > svg:last-child`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > summary > svg:last-child\r\n   — text-muted-foreground ms-auto size-4 */\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details > summary > svg:last-child\r\n   — pointer-events-none shrink-0 transition-transform */\r\n:where([mono-accordion] > [mono-head]) > [mono-arrow] {\r\n  flex-shrink: 0;\r\n  margin-inline-start: auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-accordion-arrow-size);\r\n  height: var(--_mono-accordion-arrow-size);\r\n  color: var(--_mono-accordion-arrow-color);\r\n  pointer-events: none;\r\n  transition:\r\n    rotate var(--_mono-accordion-duration) var(--mono-ease),\r\n    color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion] > [mono-head] > [mono-arrow] > :is(svg, span) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details[open] > summary > svg:last-child\r\n   — rotate-180 */\r\n[mono-accordion][mono-open] > [mono-head] > [mono-arrow] {\r\n  rotate: 180deg;\r\n  color: var(--_mono-accordion-arrow-open-color);\r\n}\r\n\r\n/* =========================================\r\n   Body — `details > :not(summary)`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details > :not(summary) — overflow-hidden */\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > :not(summary) — pt-0 pb-4 text-sm\r\n   A <details> collapses for free; a div has to be animated. The\r\n   `grid-template-rows: 0fr → 1fr` trick measures the content's natural height\r\n   through the grid track and interpolates the row size, with the vertical padding\r\n   and the top border collapsing in lockstep so the entrance feels of-a-piece.\r\n   `> * { min-height: 0 }` lets grid items shrink below their intrinsic height when\r\n   the row is 0fr — without it the body would refuse to collapse. */\r\n:where([mono-accordion]) > [mono-body] {\r\n  display: grid;\r\n  grid-template-rows: 0fr;\r\n  overflow: hidden;\r\n  padding: 0 var(--_mono-accordion-pad-x);\r\n  font-size: var(--_mono-accordion-body-font);\r\n  line-height: var(--_mono-accordion-body-line-height);\r\n  color: var(--_mono-accordion-body-color);\r\n  border-top: var(--mono-border-width) solid transparent;\r\n\r\n  /* Scope this body's layout/paint work to its own box. Measured effect: neutral on\r\n     toggle cost, a modest win on the initial layout of a long list of accordions.\r\n     (It is NOT what fixes sibling cost — Chrome already does not re-lay-out sibling\r\n     subtrees when one accordion animates; that was measured, not assumed.)\r\n     `paint` adds no new clipping — `overflow: hidden` above already clips. `layout`\r\n     does make this a containing block + stacking context for absolutely positioned\r\n     descendants, which is safe here because that same `overflow: hidden` already\r\n     confined them, and mono's own popups are moved to a <body> portal. */\r\n  contain: layout paint;\r\n\r\n  transition:\r\n    grid-template-rows var(--_mono-accordion-duration) var(--mono-ease),\r\n    padding-top var(--_mono-accordion-duration) var(--mono-ease),\r\n    padding-bottom var(--_mono-accordion-duration) var(--mono-ease),\r\n    border-top-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion] > [mono-body] > * {\r\n  min-width: 0;\r\n  min-height: 0;\r\n}\r\n\r\n/* Shadow build: the body's native <slot>s (`body` + the default one) default to\r\n   `display: contents` and so have no box — slotted content would become the grid\r\n   items directly (un-targetable by `> * { min-height: 0 }`) and keep the\r\n   `grid-template-rows: 0fr → 1fr` track from ever collapsing. They sit in ONE\r\n   `[mono-body-slots]` block, the single grid item (like the light build's\r\n   <span data-mono-slot=\"body\">), so the open/close collapse works. A bare `slot`\r\n   child is kept for markup that still renders one. */\r\n[mono-accordion] > [mono-body] > :is(slot, [mono-body-slots]) {\r\n  display: block;\r\n  min-width: 0;\r\n  min-height: 0;\r\n}\r\n\r\n/* Standalone, the item IS the frame, so the open body is separated from the head\r\n   by a hairline the way a card's footer is — EXTENSION, and the reason the top\r\n   padding is not upstream's `pt-0` here. */\r\n[mono-accordion][mono-open] > [mono-body] {\r\n  grid-template-rows: 1fr;\r\n  padding-top: var(--_mono-accordion-pad-y);\r\n  padding-bottom: var(--_mono-accordion-pad-y);\r\n  border-top-color: var(--_mono-accordion-border);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > :not(summary) — pt-0.\r\n   In a group the head and its body are one run of text between two dividers,\r\n   exactly as upstream renders it, so the top gap and the hairline both go. */\r\n:where([mono-accordion-group], .mono-accordion-group) > [mono-accordion][mono-open] > [mono-body],\r\n[mono-accordion][mono-grouped][mono-open] > [mono-body] {\r\n  padding-top: 0;\r\n  border-top-color: transparent;\r\n}\r\n\r\n/* A collapsed body is still fully rendered — the `0fr` track only hides it — so\r\n   without this every closed accordion keeps its whole slotted subtree in the style,\r\n   layout and paint trees. `content-visibility: hidden` drops it entirely.\r\n\r\n   What this buys, measured with ~320-node bodies (Chromium, median of 3):\r\n     initial layout, 40 panels: 157ms → 18ms, and flat in the panel count\r\n     (5 panels: 52ms → 23ms). That is the cost of putting a long list of heavy\r\n     accordions on screen at all — e.g. opening a modal that builds N entry forms.\r\n   What it does NOT buy: a cheaper toggle. Skipping the subtree means an opening\r\n   panel is laid out from scratch, so one open+close costs slightly MORE\r\n   (23ms → 31ms at 40 panels). The toggle's real cost is the animation above —\r\n   see `--mono-accordion-duration`.\r\n\r\n   `allow-discrete` is what makes it safe to animate. Opening flips the property to\r\n   `visible` at 0%, so the grid can still measure the content it is expanding to;\r\n   closing holds it `visible` until 100%, so the collapse plays out before the content\r\n   is dropped. Get that backwards and a closing body vanishes instantly instead of\r\n   collapsing.\r\n\r\n   Gated behind @supports deliberately. `content-visibility … allow-discrete` inside\r\n   the `transition` SHORTHAND is a parse error to a browser without the feature, and a\r\n   single bad entry drops the WHOLE declaration — which would take every accordion\r\n   transition with it. Inside the guard the shorthand is known to parse, so the list is\r\n   restated in full rather than patched with the `transition-behavior` longhand.\r\n   Browsers without support keep exactly the previous behaviour.\r\n\r\n   Must stay ABOVE the reduced-motion block: @supports adds no specificity, so source\r\n   order is the only thing keeping `transition: none` the winner down there. */\r\n@supports (transition-behavior: allow-discrete) {\r\n  :where([mono-accordion]) > [mono-body] {\r\n    content-visibility: hidden;\r\n    /* Must stay `0`, NOT `auto 0`. `content-visibility: hidden` skips this element's\r\n       own contents, so its size comes from HERE — and the `auto` keyword's remembered\r\n       size is the panel's last OPEN height, which leaves a closed accordion holding\r\n       full height with nothing in it. Tried, measured, reverted: a closed body read\r\n       656px instead of collapsing. The scrollbar-stability that `auto` normally buys\r\n       does not apply to an element that is itself the skipped one. */\r\n    contain-intrinsic-size: 0;\r\n    transition:\r\n      grid-template-rows var(--_mono-accordion-duration) var(--mono-ease),\r\n      padding-top var(--_mono-accordion-duration) var(--mono-ease),\r\n      padding-bottom var(--_mono-accordion-duration) var(--mono-ease),\r\n      border-top-color var(--mono-duration) var(--mono-ease),\r\n      content-visibility var(--_mono-accordion-duration) allow-discrete;\r\n  }\r\n\r\n  [mono-accordion][mono-open] > [mono-body] {\r\n    content-visibility: visible;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-accordion],\r\n  [mono-accordion] > [mono-head],\r\n  [mono-accordion] > [mono-head] > [mono-arrow],\r\n  [mono-accordion] > [mono-body] {\r\n    transition: none;\r\n  }\r\n}\r\n";
-
 //#endregion
 //#region src/components/accordion/mono-accordion.ts
 let MonoAccordion = class MonoAccordion extends MonoAccordionCore(LitElement) {
@@ -295,9 +291,6 @@ let MonoAccordion = class MonoAccordion extends MonoAccordionCore(LitElement) {
 		this._slotActions = [];
 		this._slotBody = [];
 	}
-	static {
-		this.styles = [unsafeCSS(accordion_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/alert.js

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

package/dist/ui/breadcrumb.js

@@ -1,10 +1,10 @@
-import { g as monoHostChildNodes } from "../mono-ui-KOBJcnXk.js";
-import { t as customElement } from "../mono-element-Bc9wElPy.js";
+import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.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 { t as isIconifyClass } from "../icon-ClxnYhBG.js";
-import { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-BnBR29E7.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
 //#region src/components/breadcrumb/breadcrumb-utils.ts
@@ -572,10 +572,6 @@ const MonoBreadcrumbCore = (superClass) => {
 	return MonoBreadcrumbCoreClass;
 };
 
-//#endregion
-//#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
 let MonoBreadcrumb = class MonoBreadcrumb extends MonoBreadcrumbCore(LitElement) {
@@ -585,9 +581,6 @@ let MonoBreadcrumb = class MonoBreadcrumb extends MonoBreadcrumbCore(LitElement)
 		this._hasBodySlot = false;
 		this._slotBody = [];
 	}
-	static {
-		this.styles = [unsafeCSS(breadcrumb_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -866,9 +859,6 @@ let MonoBreadcrumbList = class MonoBreadcrumbList extends MonoBreadcrumbListCore
 		super(..._args);
 		this._parent = null;
 	}
-	static {
-		this.styles = [unsafeCSS(breadcrumb_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}