@mono-lit/helper 0.0.6 → 0.0.8

package/dist/ui/file-upload.js

@@ -1,11 +1,11 @@
-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, 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 { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
 import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -623,10 +623,6 @@ const MonoFileUploadCore = (superClass) => {
 	return MonoFileUploadCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\file-upload\file-upload.css?raw.js
-var file_upload_css_raw_default = "/* =========================================================================\r\n   mono-file-upload — a port of Basecoat's `.empty` (the dropzone) and `.item`\r\n   (the file rows) inside a `.field` (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-file-upload variant=\"compact\" label=\"Docs\" title=\"Drop here\" subtitle=\"PDF, DOCX\">\r\n     <div mono-file-upload mono-variant=\"compact\">\r\n       <label mono-label>Docs</label>\r\n       <label mono-dropzone>\r\n         <span mono-icon><span mono-glyph class=\"i-mdi-cloud-upload-outline\"></span></span>\r\n         <span mono-title>Drop here</span>\r\n         <span mono-subtitle>PDF, DOCX</span>\r\n         <input mono-native type=\"file\" />\r\n       </label>\r\n       <div mono-list>\r\n         <div mono-item>\r\n           <span mono-thumb>…</span>\r\n           <span mono-file><span mono-name>a.pdf</span><span mono-meta>12 KB</span></span>\r\n           <button mono-remove type=\"button\">…</button>\r\n         </div>\r\n       </div>\r\n       <div mono-message=\"helper\">…</div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-variant])` = default,\r\n   no `mono-validation-state` = default). The element renders these on its root\r\n   (both builds) plus the states `mono-disabled` / `mono-required` /\r\n   `mono-multiple` / `mono-no-dragdrop` (drag-drop is ON by default, so the\r\n   attribute marks the exception) and the live `mono-dragover`. The old\r\n   classes (`.mono-file-upload.compact.invalid`) 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-file-upload]              ≡ .field (flex w-full flex-col gap-3)\r\n     [mono-label]                    ≡ .field > label / .label (text-sm leading-snug font-medium)\r\n     [mono-dropzone]                 ≡ .empty (flex flex-col items-center justify-center text-center\r\n                                       text-balance, gap-4 rounded-lg border-dashed p-12) — the border\r\n                                       WIDTH is the `border` utility upstream puts in the markup, and\r\n                                       the gap is `.empty > header`'s gap-2 because our title and\r\n                                       subtext are flat siblings, not a nested <header>\r\n     [mono-icon]                     ≡ .empty figure + .empty figure:has(> svg:only-child)\r\n                                       (mb-2, bg-muted text-foreground size-10 rounded-lg, glyph size-6)\r\n     [mono-title]                    ≡ .empty :is(h2, h3, h4) (text-lg font-medium tracking-tight)\r\n     [mono-subtitle]/[mono-subtext]  ≡ .empty > header > p (text-sm/relaxed text-muted-foreground)\r\n     [mono-native]                   ≡ .field > input[type='file'] — HIDDEN here: the whole dropzone\r\n                                       is the picker, so the native control never shows\r\n     [mono-list]                     ≡ .item-group (flex w-full flex-col, gap-2.5 beside sm items)\r\n     [mono-item]                     ≡ .item[data-variant='outline'][data-size='sm']\r\n                                       (flex flex-wrap items-center border-border rounded-md text-sm,\r\n                                        gap-2.5 px-3 py-2.5, transition-colors)\r\n     [mono-thumb]                    ≡ .item > figure:has(> img) at sm (size-8 rounded-sm overflow-hidden,\r\n                                       img size-full object-cover) + figure:has(> svg:only-child) (glyph size-4)\r\n     [mono-file]                     ≡ .item > section (flex flex-1 flex-col gap-1)\r\n     [mono-name]                     ≡ .item :is(h2, h3, h4) (line-clamp-1 text-sm/snug font-medium)\r\n     [mono-meta]                     ≡ .item p (text-sm/normal text-muted-foreground line-clamp-2)\r\n     [mono-remove]                   ≡ .btn[data-variant='ghost'][data-size='icon-sm']\r\n                                       (size-8 rounded-[min(radius-md,10px)] hover:bg-muted, glyph size-4)\r\n     [mono-message=\"…\"]              ≡ .field > p / .field [role='alert'] (text-sm, destructive when invalid)\r\n     [mono-validation-state=\"invalid\"] ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-validation-state=\"valid|warning\"] ≡ EXTENSION (the same treatment in --success / --warning)\r\n     [mono-variant=\"compact\"]        ≡ the `.empty` + `.item` metrics the COMPACT styles use\r\n                                       (nova/lyra/mira: .empty p-6, figure size-8 with a size-4 glyph,\r\n                                        title text-sm; rows drop to .item[data-size='xs'])\r\n     [mono-dragover]                 ≡ EXTENSION (the .item focus-visible treatment: border-ring +\r\n                                       ring-[3px] ring-ring/50, plus an accent tint)\r\n     [mono-disabled]                 ≡ .btn disabled:opacity-50\r\n\r\n   Upstream's dropzone is genuinely large — `.empty` is `p-12` — so this port is\r\n   TALLER than the pre-Basecoat uploader (which padded 1.2rem). `compact` is the\r\n   short one, and `--mono-file-upload-dropzone-padding` is one line either way.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-file-upload]) [mono-item]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier and win over it.\r\n\r\n   The two variants own SEPARATE public knobs (`-dropzone-padding` vs\r\n   `-compact-padding`, `-item-padding-x` vs `-compact-item-padding-x`, …): a\r\n   flavor writing one shared knob would repaint both looks at once, which is the\r\n   bug that made every style's `underlined` textarea come out filled.\r\n\r\n   FLAVORS set `--mono-file-upload-{radius,dropzone-padding,dropzone-gap,\r\n   icon-offset,icon-size,icon-glyph-size,icon-radius,title-font-size,\r\n   title-transform,item-radius,item-padding-*,item-gap,list-gap,thumb-size,\r\n   thumb-radius,…}` — the DEFAULT variant's set; `compact` has its own\r\n   `--mono-file-upload-compact-*` twins so one look never repaints the other; every fallback\r\n   here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.(empty|item)\"`).\r\n   ========================================================================= */\r\n\r\nmono-file-upload {\r\n  display: block;\r\n}\r\n\r\n[mono-file-upload] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-file-upload-text: var(--mono-file-upload-text, var(--foreground));\r\n  --_mono-file-upload-muted: var(--mono-file-upload-muted, var(--muted-foreground));\r\n  /* the accent: the dropzone glyph, and the ring the dragover state paints */\r\n  --_mono-file-upload-primary: var(--mono-file-upload-primary, var(--primary));\r\n  --_mono-file-upload-success: var(--mono-file-upload-success, var(--success));\r\n  --_mono-file-upload-danger: var(--mono-file-upload-danger, var(--destructive));\r\n  --_mono-file-upload-warning: var(--mono-file-upload-warning, var(--warning));\r\n\r\n  /* `-border` is the pre-Basecoat public name for the dropzone edge — kept as\r\n     the fallback so a consumer that set it keeps working */\r\n  --_mono-file-upload-border-color: var(--mono-file-upload-border-color, var(--mono-file-upload-border, var(--border)));\r\n  --_mono-file-upload-border-width: var(--mono-file-upload-border-width, var(--mono-border-width));\r\n  --_mono-file-upload-border-style: var(--mono-file-upload-border-style, dashed);\r\n  /* .empty has no fill of its own; `-background` is the pre-Basecoat name */\r\n  --_mono-file-upload-dropzone-bg: var(--mono-file-upload-dropzone-bg, var(--mono-file-upload-background, transparent));\r\n  /* hover: the ghost treatment (bg-muted, dark:bg-muted/50) */\r\n  --_mono-file-upload-dropzone-hover-bg: var(--mono-file-upload-dropzone-hover-bg, var(--mono-mode-ghost-hover));\r\n  --_mono-file-upload-radius: var(--mono-file-upload-radius, var(--mono-radius-lg));\r\n\r\n  --_mono-file-upload-ring-color: var(--mono-file-upload-ring-color, var(--ring));\r\n  --_mono-file-upload-ring-width: var(--mono-file-upload-ring-width, var(--mono-ring-width));\r\n  --_mono-file-upload-ring-alpha: var(--mono-file-upload-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  /* the icon plate — .empty figure:has(> svg:only-child) is a muted square */\r\n  --_mono-file-upload-icon-bg: var(--mono-file-upload-icon-bg, var(--muted));\r\n  --_mono-file-upload-icon-color: var(--mono-file-upload-icon-color, var(--_mono-file-upload-text));\r\n  --_mono-file-upload-icon-radius: var(--mono-file-upload-icon-radius, var(--mono-radius-lg));\r\n\r\n  /* the file rows — .item[data-variant='outline'] rings, it does not fill.\r\n     `-surface` is the pre-Basecoat name for the row background. */\r\n  --_mono-file-upload-item-bg: var(--mono-file-upload-item-bg, var(--mono-file-upload-surface, transparent));\r\n  --_mono-file-upload-item-border-color: var(--mono-file-upload-item-border-color, var(--border));\r\n  --_mono-file-upload-item-border-width: var(--mono-file-upload-item-border-width, var(--mono-border-width));\r\n  --_mono-file-upload-item-radius: var(--mono-file-upload-item-radius, var(--mono-radius-md));\r\n  --_mono-file-upload-thumb-bg: var(--mono-file-upload-thumb-bg, var(--muted));\r\n  --_mono-file-upload-thumb-radius: var(--mono-file-upload-thumb-radius, var(--mono-radius-sm));\r\n\r\n  /* ── the DEFAULT variant's metrics; `compact` re-points every preset ───────\r\n     basecoat@1.0.2 styles/vega.css .empty — gap-4 rounded-lg border-dashed p-12;\r\n     .empty figure — mb-2; .empty figure:has(> svg:only-child) — size-10 rounded-lg\r\n     with a size-6 glyph; .empty :is(h2,h3,h4) — text-lg; .item[data-size='sm'] —\r\n     gap-2.5 px-3 py-2.5 with a size-8 image figure; .item-group — gap-2.5 */\r\n  --_mono-file-upload-dropzone-padding: var(--_mono-file-upload-dropzone-padding-preset, calc(var(--mono-spacing) * 12));\r\n  --_mono-file-upload-dropzone-gap: var(--_mono-file-upload-dropzone-gap-preset, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-icon-offset: var(--_mono-file-upload-icon-offset-preset, calc(var(--mono-spacing) * 4));\r\n  --_mono-file-upload-icon-size: var(--_mono-file-upload-icon-size-preset, calc(var(--mono-spacing) * 10));\r\n  --_mono-file-upload-icon-glyph-size: var(--_mono-file-upload-icon-glyph-size-preset, calc(var(--mono-spacing) * 6));\r\n  --_mono-file-upload-title-font-size: var(--_mono-file-upload-title-font-size-preset, var(--mono-text-lg));\r\n  --_mono-file-upload-title-line-height: var(--_mono-file-upload-title-line-height-preset, var(--mono-text-lg--lh));\r\n  --_mono-file-upload-list-gap: var(--_mono-file-upload-list-gap-preset, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-item-gap: var(--_mono-file-upload-item-gap-preset, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-item-padding-x: var(--_mono-file-upload-item-padding-x-preset, calc(var(--mono-spacing) * 3));\r\n  --_mono-file-upload-item-padding-y: var(--_mono-file-upload-item-padding-y-preset, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-file-gap: var(--_mono-file-upload-file-gap-preset, var(--mono-spacing));\r\n  --_mono-file-upload-thumb-size: var(--_mono-file-upload-thumb-size-preset, calc(var(--mono-spacing) * 8));\r\n  --_mono-file-upload-meta-font-size: var(--_mono-file-upload-meta-font-size-preset, var(--mono-text-sm));\r\n\r\n  /* basecoat@1.0.2 components/field.css .field — flex w-full flex-col;\r\n     styles/vega.css .field — gap-3 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  gap: var(--mono-file-upload-gap, calc(var(--mono-spacing) * 3));\r\n  color: var(--_mono-file-upload-text);\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-file-upload] *,\r\n[mono-file-upload] *::before,\r\n[mono-file-upload] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders every region and marks the empty ones; this hides\r\n   them. It must out-specify the region rules below, hence the root attribute. */\r\n[mono-file-upload] :is([mono-label], [mono-icon], [mono-title], [mono-subtitle], [mono-subtext], [mono-list], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Variants — the DEFAULT look, and the compact one\r\n   ========================================= */\r\n\r\n/* `default` is vega's `.empty` + `.item[data-size='sm']`. The knobs are scoped\r\n   to the variant so a flavor can restyle one look without touching the other. */\r\n[mono-file-upload]:not([mono-variant=\"compact\"]) {\r\n  --_mono-file-upload-dropzone-padding-preset: var(--mono-file-upload-dropzone-padding);\r\n  --_mono-file-upload-dropzone-gap-preset: var(--mono-file-upload-dropzone-gap);\r\n  --_mono-file-upload-icon-offset-preset: var(--mono-file-upload-icon-offset);\r\n  --_mono-file-upload-icon-size-preset: var(--mono-file-upload-icon-size);\r\n  --_mono-file-upload-icon-glyph-size-preset: var(--mono-file-upload-icon-glyph-size);\r\n  --_mono-file-upload-title-font-size-preset: var(--mono-file-upload-title-font-size);\r\n  --_mono-file-upload-title-line-height-preset: var(--mono-file-upload-title-line-height);\r\n  --_mono-file-upload-list-gap-preset: var(--mono-file-upload-list-gap);\r\n  --_mono-file-upload-item-gap-preset: var(--mono-file-upload-item-gap);\r\n  --_mono-file-upload-item-padding-x-preset: var(--mono-file-upload-item-padding-x);\r\n  --_mono-file-upload-item-padding-y-preset: var(--mono-file-upload-item-padding-y);\r\n  --_mono-file-upload-file-gap-preset: var(--mono-file-upload-file-gap);\r\n  --_mono-file-upload-thumb-size-preset: var(--mono-file-upload-thumb-size);\r\n  --_mono-file-upload-meta-font-size-preset: var(--mono-file-upload-meta-font-size);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/nova.css .empty — rounded-xl p-6;\r\n   styles/nova.css .empty figure:has(> svg:only-child) — size-8 with a size-4 glyph;\r\n   styles/nova.css .empty :is(h2, h3, h4) — text-sm;\r\n   styles/vega.css .item[data-size='xs'] — gap-2 px-2.5 py-2;\r\n   styles/vega.css .item[data-size='xs'] > section — gap-0;\r\n   styles/vega.css .item[data-size='xs'] p — text-xs;\r\n   styles/vega.css .item[data-size='xs'] > figure:has(> img) — size-6;\r\n   styles/vega.css .item-group:has(> .item[data-size='xs']) — gap-2\r\n   — DEVIATION: the radius stays the default variant's (a flavor owns that axis). */\r\n[mono-file-upload][mono-variant=\"compact\"] {\r\n  --_mono-file-upload-dropzone-padding-preset: var(--mono-file-upload-compact-padding, calc(var(--mono-spacing) * 6));\r\n  --_mono-file-upload-dropzone-gap-preset: var(--mono-file-upload-compact-gap, var(--mono-spacing));\r\n  --_mono-file-upload-icon-offset-preset: var(--mono-file-upload-compact-icon-offset, calc(var(--mono-spacing) * 3));\r\n  --_mono-file-upload-icon-size-preset: var(--mono-file-upload-compact-icon-size, calc(var(--mono-spacing) * 8));\r\n  --_mono-file-upload-icon-glyph-size-preset: var(--mono-file-upload-compact-icon-glyph-size, calc(var(--mono-spacing) * 4));\r\n  --_mono-file-upload-title-font-size-preset: var(--mono-file-upload-compact-title-font-size, var(--mono-text-sm));\r\n  --_mono-file-upload-title-line-height-preset: var(--mono-file-upload-compact-title-line-height, var(--mono-leading-snug));\r\n  --_mono-file-upload-list-gap-preset: var(--mono-file-upload-compact-list-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-item-gap-preset: var(--mono-file-upload-compact-item-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-item-padding-x-preset: var(--mono-file-upload-compact-item-padding-x, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-item-padding-y-preset: var(--mono-file-upload-compact-item-padding-y, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-file-gap-preset: var(--mono-file-upload-compact-file-gap, 0px);\r\n  --_mono-file-upload-thumb-size-preset: var(--mono-file-upload-compact-thumb-size, calc(var(--mono-spacing) * 6));\r\n  --_mono-file-upload-meta-font-size-preset: var(--mono-file-upload-compact-meta-font-size, var(--mono-text-xs));\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — text-sm leading-snug font-medium */\r\n:where([mono-file-upload]) > [mono-label] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: calc(var(--mono-spacing) * 1);\r\n  font-size: var(--mono-file-upload-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-label-line-height, var(--mono-leading-snug));\r\n  font-weight: var(--mono-file-upload-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--mono-file-upload-label-color, var(--_mono-file-upload-text));\r\n}\r\n\r\n[mono-file-upload][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--mono-file-upload-label-color, var(--_mono-file-upload-danger));\r\n}\r\n\r\n:where([mono-file-upload]) [mono-required-mark] {\r\n  color: var(--mono-file-upload-required-color, var(--destructive));\r\n}\r\n\r\n/* =========================================\r\n   Dropzone — `.empty`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/empty.css .empty — flex w-full min-w-0 flex-col\r\n   items-center justify-center text-center text-balance;\r\n   styles/vega.css .empty — gap-4 rounded-lg border-dashed p-12\r\n   — the border WIDTH comes from the `border` utility upstream writes in markup,\r\n   so it is a knob here; `transition-[color,box-shadow]` is the field treatment. */\r\n:where([mono-file-upload]) [mono-dropzone] {\r\n  display: flex;\r\n  width: 100%;\r\n  min-width: 0;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  text-wrap: balance;\r\n  gap: var(--_mono-file-upload-dropzone-gap);\r\n  padding: var(--_mono-file-upload-dropzone-padding);\r\n  border: var(--_mono-file-upload-border-width) var(--_mono-file-upload-border-style)\r\n    var(--_mono-file-upload-border-color);\r\n  border-radius: var(--_mono-file-upload-radius);\r\n  background-color: var(--_mono-file-upload-dropzone-bg);\r\n  cursor: pointer;\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  /* the two-slot stack the ports share: the ring is written by a state rule */\r\n  box-shadow: var(--_mono-file-upload-ring, 0 0 #0000);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   (dark:hover:bg-muted/50), carried by --mono-mode-ghost-hover */\r\n@media (hover: hover) {\r\n  [mono-file-upload]:not([mono-disabled]) [mono-dropzone]:hover {\r\n    border-color: var(--mono-file-upload-hover-border-color, var(--_mono-file-upload-primary));\r\n    background-color: var(--_mono-file-upload-dropzone-hover-bg);\r\n  }\r\n}\r\n\r\n/* EXTENSION — the drag-over state wears the `.item` focus treatment\r\n   (basecoat@1.0.2 components/item.css .item — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50) in the accent colour */\r\n[mono-file-upload][mono-dragover] [mono-dropzone] {\r\n  border-color: var(--_mono-file-upload-primary);\r\n  border-style: solid;\r\n  background-color: color-mix(in oklab, var(--_mono-file-upload-primary) var(--mono-mode-tint), transparent);\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-primary) var(--_mono-file-upload-ring-alpha), transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 components/button.css .btn — disabled:pointer-events-none disabled:opacity-50 */\r\n[mono-file-upload][mono-disabled] [mono-dropzone] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > textarea, .textarea —\r\n   aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3\r\n   (dark: destructive/50 and /40, carried by the mode tokens) */\r\n[mono-file-upload][mono-validation-state=\"invalid\"] [mono-dropzone] {\r\n  border-color: var(--mono-file-upload-invalid-border-color, var(--mono-mode-invalid-border));\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — the same treatment in --success / --warning */\r\n[mono-file-upload][mono-validation-state=\"valid\"] [mono-dropzone] {\r\n  border-color: var(--_mono-file-upload-success);\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-success) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n[mono-file-upload][mono-validation-state=\"warning\"] [mono-dropzone] {\r\n  border-color: var(--_mono-file-upload-warning);\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Dropzone contents — figure, title, subtext\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .empty figure — mb-2;\r\n   styles/vega.css .empty figure:has(> svg:only-child) — bg-muted text-foreground\r\n   flex size-10 shrink-0 items-center justify-center rounded-lg\r\n   — DEVIATION: keyed off the part attribute, not `:has(> svg:only-child)`: the\r\n   light build paints the glyph with an `i-*` MASK span and the shadow build with\r\n   an inline <svg>, so a shape test would style one build and not the other. */\r\n:where([mono-file-upload]) [mono-icon] {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-file-upload-icon-size);\r\n  height: var(--_mono-file-upload-icon-size);\r\n  margin-bottom: var(--_mono-file-upload-icon-offset);\r\n  border-radius: var(--_mono-file-upload-icon-radius);\r\n  background-color: var(--_mono-file-upload-icon-bg);\r\n  color: var(--_mono-file-upload-icon-color);\r\n  font-size: var(--_mono-file-upload-icon-glyph-size);\r\n  line-height: 1;\r\n  overflow: hidden;\r\n}\r\n\r\n/* `[&_svg:not([class*='size-'])]:size-6` — our glyph is a mask span (light) or an\r\n   inline SVG (shadow); both are sized by the same box. Only [mono-glyph] is\r\n   touched: a slotted custom icon is light DOM in BOTH builds, so a bare `svg`\r\n   descendant rule would reach it in light and not in shadow. */\r\n:where([mono-file-upload]) [mono-icon] [mono-glyph] {\r\n  display: block;\r\n  width: var(--_mono-file-upload-icon-glyph-size);\r\n  height: var(--_mono-file-upload-icon-glyph-size);\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-icon] [mono-glyph] > svg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .empty :is(h2, h3, h4) — text-lg font-medium tracking-tight */\r\n:where([mono-file-upload]) [mono-title] {\r\n  font-size: var(--_mono-file-upload-title-font-size);\r\n  line-height: var(--_mono-file-upload-title-line-height);\r\n  font-weight: var(--mono-file-upload-title-font-weight, var(--mono-font-weight-medium));\r\n  letter-spacing: var(--mono-file-upload-title-tracking, var(--mono-tracking-tight));\r\n  text-transform: var(--mono-file-upload-title-transform, none);\r\n  color: var(--_mono-file-upload-text);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .empty > header > p — text-muted-foreground text-sm/relaxed\r\n   `mono-subtitle` is the current part name; the element still emits the old\r\n   `mono-subtext` beside it, and hand-written markup may use either. The CSS vars\r\n   keep their `-subtext-` names. */\r\n:where([mono-file-upload]) :is([mono-subtitle], [mono-subtext]) {\r\n  font-size: var(--mono-file-upload-subtext-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-subtext-line-height, var(--mono-leading-relaxed));\r\n  color: var(--mono-file-upload-subtext-color, var(--_mono-file-upload-muted));\r\n}\r\n\r\n/* The whole dropzone IS the picker — the native control never shows. */\r\n:where([mono-file-upload]) [mono-native] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   File list — `.item-group` and `.item`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/item.css .item-group — flex w-full flex-col;\r\n   styles/vega.css .item-group:has(> .item[data-size='sm']) — gap-2.5 */\r\n:where([mono-file-upload]) [mono-list] {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: var(--_mono-file-upload-list-gap);\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item — flex w-full flex-wrap items-center\r\n   border transition-colors duration-100 outline-none;\r\n   styles/vega.css .item — rounded-md border text-sm;\r\n   styles/vega.css .item[data-variant='outline'] — border-border;\r\n   styles/vega.css .item[data-size='sm'] — gap-2.5 px-3 py-2.5 */\r\n:where([mono-file-upload]) [mono-item] {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-file-upload-item-gap);\r\n  padding-inline: var(--_mono-file-upload-item-padding-x);\r\n  padding-block: var(--_mono-file-upload-item-padding-y);\r\n  border: var(--_mono-file-upload-item-border-width) solid var(--_mono-file-upload-item-border-color);\r\n  border-radius: var(--_mono-file-upload-item-radius);\r\n  background-color: var(--_mono-file-upload-item-bg);\r\n  font-size: var(--mono-file-upload-item-font-size, var(--mono-text-sm));\r\n  transition:\r\n    background-color 100ms var(--mono-ease),\r\n    border-color 100ms var(--mono-ease);\r\n  outline: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .item[data-size='sm'] > figure:has(> img) — size-8;\r\n   styles/vega.css .item > figure:has(> img) — overflow-hidden rounded-sm;\r\n   components/item.css .item > figure:has(> img) — [&_img]:size-full [&_img]:object-cover;\r\n   styles/vega.css .item > figure:has(> svg:only-child) — a size-4 glyph */\r\n:where([mono-file-upload]) [mono-thumb] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-file-upload-thumb-size);\r\n  height: var(--_mono-file-upload-thumb-size);\r\n  overflow: hidden;\r\n  border-radius: var(--_mono-file-upload-thumb-radius);\r\n  background-color: var(--_mono-file-upload-thumb-bg);\r\n  color: var(--mono-file-upload-thumb-color, var(--_mono-file-upload-muted));\r\n  font-size: calc(var(--mono-spacing) * 4);\r\n  line-height: 1;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-thumb] > img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-thumb] [mono-glyph] {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 4);\r\n  height: calc(var(--mono-spacing) * 4);\r\n  flex-shrink: 0;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-thumb] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item > section — flex flex-1 flex-col;\r\n   styles/vega.css .item > section — gap-1 (gap-0 at data-size='xs') */\r\n:where([mono-file-upload]) [mono-file] {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  flex-direction: column;\r\n  gap: var(--_mono-file-upload-file-gap);\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item :is(h2, h3, h4) — line-clamp-1 flex\r\n   w-fit items-center;\r\n   styles/vega.css .item :is(h2, h3, h4) — text-sm leading-snug font-medium\r\n   — DEVIATION: one line ellipsised with `text-overflow`, not `line-clamp-1`: a\r\n   file name is a single line and must truncate mid-word, which the WebKit box\r\n   clamp does not do. */\r\n:where([mono-file-upload]) [mono-name] {\r\n  max-width: 100%;\r\n  font-size: var(--mono-file-upload-name-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-name-line-height, var(--mono-leading-snug));\r\n  font-weight: var(--mono-file-upload-name-font-weight, var(--mono-font-weight-medium));\r\n  color: var(--_mono-file-upload-text);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item p — text-muted-foreground line-clamp-2\r\n   text-start font-normal;\r\n   styles/vega.css .item p — text-sm leading-normal (text-xs at data-size='xs') */\r\n:where([mono-file-upload]) [mono-meta] {\r\n  font-size: var(--_mono-file-upload-meta-font-size);\r\n  line-height: var(--mono-file-upload-meta-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--mono-file-upload-meta-color, var(--_mono-file-upload-muted));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50);\r\n   styles/vega.css .btn[data-size='icon-sm'] — size-8 rounded-[min(var(--radius-md),10px)]\r\n   — DEVIATION: the hover ink is the DANGER role, not `--foreground`: this ghost\r\n   button deletes the row it sits in. */\r\n:where([mono-file-upload]) [mono-remove] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--mono-file-upload-remove-size, calc(var(--mono-spacing) * 8));\r\n  height: var(--mono-file-upload-remove-size, calc(var(--mono-spacing) * 8));\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-file-upload-remove-radius, min(var(--mono-radius-md), 10px));\r\n  background: transparent;\r\n  color: var(--_mono-file-upload-muted);\r\n  font: inherit;\r\n  font-size: calc(var(--mono-spacing) * 4);\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-file-upload-remove-ring, 0 0 #0000);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-file-upload]) [mono-remove]:hover {\r\n    background-color: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-file-upload-danger);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n:where([mono-file-upload]) [mono-remove]:focus-visible {\r\n  outline: none;\r\n  color: var(--_mono-file-upload-text);\r\n  --_mono-file-upload-remove-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-ring-color) var(--_mono-file-upload-ring-alpha), transparent);\r\n}\r\n\r\n:where([mono-file-upload]) [mono-remove] [mono-glyph] {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 4);\r\n  height: calc(var(--mono-spacing) * 4);\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-remove] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n[mono-file-upload][mono-disabled] [mono-remove] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Message\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n:where([mono-file-upload]) [mono-message] {\r\n  font-size: var(--mono-file-upload-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-message-line-height, var(--mono-leading-normal));\r\n  color: var(--mono-file-upload-message-color, var(--_mono-file-upload-muted));\r\n}\r\n\r\n/* basecoat@1.0.2 components/field.css .field >> [role='alert'] — the invalid message\r\n   is the destructive one (styles/vega.css gives it text-sm) */\r\n:where([mono-file-upload]) [mono-message=\"invalid\"] {\r\n  color: var(--_mono-file-upload-danger);\r\n}\r\n\r\n:where([mono-file-upload]) [mono-message=\"valid\"] {\r\n  color: var(--_mono-file-upload-success);\r\n}\r\n\r\n:where([mono-file-upload]) [mono-message=\"warning\"] {\r\n  color: var(--_mono-file-upload-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-file-upload]) :is([mono-dropzone], [mono-item], [mono-remove]) {\r\n    transition: none;\r\n  }\r\n}\r\n";
-
 //#endregion
 //#region src/components/file-upload/mono-file-upload.ts
 /** Named slots the light build captures: the dropzone icon and its two text lines. */
@@ -645,9 +641,6 @@ let MonoFileUpload = class MonoFileUpload extends MonoFileUploadCore(LitElement)
 			subtitle: []
 		};
 	}
-	static {
-		this.styles = [unsafeCSS(file_upload_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/filter.js

@@ -1,11 +1,11 @@
 import { c as splitMulti, d as OPERATOR_ARITY, l as treeToArray, m as operatorsFor, n as arrayToTree, s as odataStringToArray, t as arrayToODataString, u as DEFAULT_TEXTS } from "../filter-odata-Bi27XUpQ.js";
 import { t as monoFilterBuilder } from "../filter-builder-C0T3pMx2.js";
-import { d as buildSizeStyle } from "../mono-ui-KOBJcnXk.js";
+import { d as buildSizeStyle } from "../mono-ui-kvLVIf1V.js";
 import { n as detachEventHandlers, t as applyProps } from "../element-props-xvw0EB7H.js";
-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, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 
@@ -379,16 +379,9 @@ const MonoFilterBuilderCore = (superClass) => {
 	return MonoFilterBuilderCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\filter\filter.css?raw.js
-var filter_css_raw_default = "/* =========================================================================\r\n   mono-filter-builder — inline OData filter builder, a Basecoat EXTENSION\r\n\r\n   Upstream has no filter builder. Every surface here borrows the shape of the\r\n   Basecoat control it most resembles — the rule's field / operator / value\r\n   controls are `.field > select` and `.input`, Apply is `.btn`, Clear is\r\n   `.btn[data-variant='outline']`, the trash and \"add nested\" toggles are\r\n   `.btn[data-variant='ghost'][data-size='icon']`, and \"Add rule\" / \"Add group\"\r\n   are `.btn[data-variant='link']` — cited where each does.\r\n\r\n   The controls are styled HERE rather than by nesting three `<mono-input>`s per\r\n   row: that would couple this sheet to another component's PRIVATE resolvers.\r\n   They read the input's, select's and button's PUBLIC knobs instead —\r\n   `--mono-input-outline-radius`, `--mono-button-<size>-radius`,\r\n   `--mono-control-height-<size>` — which is exactly what a flavour writes, so\r\n   an `xs` builder matches an `xs` field and maia's pill, sera's square and\r\n   lyra's `text-xs` all arrive here by construction. There are no per-flavour\r\n   deltas for this component on purpose; there is nothing for them to drift from.\r\n\r\n   Styling is by ATTRIBUTE: the root is `[mono-filter-builder]` with `mono-size`\r\n   (`sm` is the default and emits nothing), and every part is family-unique\r\n   (`[mono-filter-row]`, `[mono-filter-control]`, …) so it needs no scoping and\r\n   cannot collide with the table's `[mono-th-filter-*]` / `[mono-search-filter-*]`.\r\n   The old classes are still emitted as inert hooks until 2.0.\r\n\r\n   Specificity: a part's resting rule is one attribute — (0,1,0) — so a\r\n   `cssClass` utility wins by source order; prop and state rules stay heavier.\r\n   ========================================================================= */\r\n\r\nmono-filter-builder,\r\nmono-shadow-filter-builder {\r\n  display: block;\r\n}\r\n\r\n[mono-filter-builder] {\r\n  /* ── ink and surface ────────────────────────────────────────────────────\r\n     Public `--mono-filter-*` → private resolvers (the library-wide pattern):\r\n     set any of them on the element, inline, or a wrapper — they inherit and\r\n     pierce the shadow boundary. */\r\n  --_mono-filter-primary: var(--mono-filter-primary, var(--primary));\r\n  --_mono-filter-on-primary: var(--mono-filter-on-primary, var(--primary-foreground));\r\n  /* the ink of the links and the group operator — upstream's `.btn[data-variant='link']` is `text-primary` */\r\n  --_mono-filter-accent: var(--mono-filter-accent, var(--primary));\r\n  --_mono-filter-text: var(--mono-filter-text, var(--foreground));\r\n  --_mono-filter-muted: var(--mono-filter-muted, var(--muted-foreground));\r\n  /* basecoat@1.0.2 styles/vega.css .field > select, select.select — border-input */\r\n  --_mono-filter-border: var(--mono-filter-border, var(--input));\r\n  /* the guide down a nested group — the page border, not the control edge */\r\n  --_mono-filter-guide: var(--mono-filter-guide, var(--border));\r\n  /* a control is `bg-transparent` upstream (`dark:bg-input/30` on the dark side) */\r\n  --_mono-filter-surface: var(--mono-filter-surface, var(--mono-mode-surface, transparent));\r\n  --_mono-filter-ring: var(--mono-filter-ring, var(--ring));\r\n  --_mono-filter-danger: var(--mono-filter-danger, var(--destructive));\r\n  --_mono-filter-indent: var(--mono-filter-indent, 1.25rem);\r\n\r\n  /* ── the size scale — sm on the unqualified root ON PURPOSE ─────────────\r\n     basecoat@1.0.2 styles/vega.css .btn[data-size='sm'] — h-8 gap-1 px-2.5 rounded-[min(var(--radius-md),10px)]\r\n     The metrics read the SAME public knobs mono-input / mono-select /\r\n     mono-button consume, so a flavour that retunes a field retunes these. */\r\n  --_mono-filter-height: var(--mono-filter-height-sm, var(--mono-input-height-sm, var(--mono-control-height-sm)));\r\n  --_mono-filter-font: var(--mono-filter-font-sm, var(--mono-input-font-sm, var(--mono-input-font-md, var(--mono-text-sm))));\r\n  /* outline → the field's own radius → the scale: lyra squares a field through\r\n     `--mono-input-radius`, sera and maia through `--mono-input-outline-radius` */\r\n  --_mono-filter-radius: var(--mono-filter-radius, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-sm, var(--mono-button-sm-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-sm, 0.875rem);\r\n  --_mono-filter-gap: var(--mono-filter-gap, calc(var(--mono-spacing) * 2));\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: calc(var(--_mono-filter-gap) * 1.5);\r\n  width: 100%;\r\n  /* Allow the rules region to shrink/scroll inside a bounded height. */\r\n  min-height: 0;\r\n  font-family: inherit;\r\n  color: var(--_mono-filter-text);\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-filter-builder][mono-size=\"xs\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-xs, var(--mono-input-height-xs, var(--mono-control-height-xs)));\r\n  --_mono-filter-font: var(--mono-filter-font-xs, var(--mono-input-font-xs, var(--mono-text-xs)));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-xs, var(--mono-button-xs-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-xs, 0.7rem);\r\n}\r\n[mono-filter-builder][mono-size=\"md\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-md, var(--mono-input-height-md, var(--mono-control-height-md)));\r\n  --_mono-filter-font: var(--mono-filter-font-md, var(--mono-input-font-md, var(--mono-text-sm)));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-md, var(--mono-button-md-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-md, 1rem);\r\n}\r\n[mono-filter-builder][mono-size=\"lg\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-lg, var(--mono-input-height-lg, var(--mono-control-height-lg)));\r\n  --_mono-filter-font: var(--mono-filter-font-lg, var(--mono-input-font-lg, var(--mono-input-font-md, var(--mono-text-sm))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-lg, var(--mono-button-lg-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-lg, 1.125rem);\r\n}\r\n[mono-filter-builder][mono-size=\"xl\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-xl, var(--mono-input-height-xl, var(--mono-control-height-xl)));\r\n  --_mono-filter-font: var(--mono-filter-font-xl, var(--mono-input-font-xl, var(--mono-input-font-md, var(--mono-text-base))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-xl, var(--mono-button-xl-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-xl, 1.25rem);\r\n}\r\n[mono-filter-builder][mono-size=\"xxl\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-xxl, var(--mono-input-height-xxl, var(--mono-control-height-xxl)));\r\n  --_mono-filter-font: var(--mono-filter-font-xxl, var(--mono-input-font-xxl, var(--mono-input-font-md, var(--mono-text-base))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-xxl, var(--mono-button-xxl-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-xxl, 1.375rem);\r\n}\r\n\r\n[mono-filter-builder] *,\r\n[mono-filter-builder] *::before,\r\n[mono-filter-builder] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* ── Scroll layout ─────────────────────────────────────────────────────────\r\n   Apply/Clear stay pinned at the top, Add rule/group at the bottom; the ROOT\r\n   group is the only scroll region, so a bounded `height` / `max-height` scrolls\r\n   JUST the rules. (Nested groups are deeper, so the child combinator skips them.) */\r\n[mono-filter-builder] > [mono-filter-actions],\r\n[mono-filter-builder] > [mono-filter-add] {\r\n  flex: 0 0 auto;\r\n}\r\n[mono-filter-builder] > [mono-filter-group] {\r\n  flex: 1 1 auto;\r\n  min-height: 0;\r\n  overflow: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen\r\n     (see `[mono-th-filter-list]`). */\r\n  overscroll-behavior: contain;\r\n  padding-right: calc(var(--mono-spacing) * 1);\r\n}\r\n\r\n/* ── Apply / Clear — ABOVE the rules, not below ─────────────────────────── */\r\n[mono-filter-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn — inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-3 disabled:opacity-50 */\r\n[mono-filter-btn] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 calc(var(--mono-spacing) * 2.5);\r\n  height: var(--_mono-filter-height);\r\n  border-radius: var(--_mono-filter-btn-radius);\r\n  border: var(--mono-border-width) solid transparent;\r\n  font: inherit;\r\n  font-size: var(--_mono-filter-font);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  white-space: nowrap;\r\n  cursor: pointer;\r\n  transition:\r\n    background-color var(--mono-duration-fast, 150ms) ease,\r\n    color var(--mono-duration-fast, 150ms) ease,\r\n    border-color var(--mono-duration-fast, 150ms) ease;\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn:not([data-variant]), .btn[data-variant='primary'] — bg-primary text-primary-foreground hover:bg-primary/90 */\r\n[mono-filter-btn]:not([mono-variant]) {\r\n  background: var(--_mono-filter-primary);\r\n  color: var(--_mono-filter-on-primary);\r\n}\r\n[mono-filter-btn]:not([mono-variant]):hover {\r\n  background: color-mix(in oklab, var(--_mono-filter-primary) 90%, transparent);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='outline'] — border bg-background hover:bg-accent hover:text-accent-foreground */\r\n[mono-filter-btn][mono-variant=\"ghost\"] {\r\n  background: var(--background);\r\n  border-color: var(--_mono-filter-border);\r\n  color: var(--_mono-filter-text);\r\n}\r\n[mono-filter-btn][mono-variant=\"ghost\"]:hover {\r\n  background: var(--accent);\r\n  color: var(--accent-foreground);\r\n}\r\n[mono-filter-btn]:focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n}\r\n\r\n/* ── Group ──────────────────────────────────────────────────────────────── */\r\n[mono-filter-group] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n/* Nested groups indent; the root sits flush. */\r\n[mono-filter-children] [mono-filter-group] {\r\n  padding-left: var(--_mono-filter-indent);\r\n  border-left: var(--mono-border-width) dashed var(--_mono-filter-guide);\r\n}\r\n[mono-filter-group-head] {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: calc(var(--_mono-filter-gap) * 0.75);\r\n  font-size: var(--_mono-filter-font);\r\n  color: var(--_mono-filter-muted);\r\n}\r\n[mono-filter-match] {\r\n  white-space: nowrap;\r\n}\r\n[mono-filter-group-actions] {\r\n  display: inline-flex;\r\n  gap: calc(var(--mono-spacing) * 0.5);\r\n  margin-left: auto;\r\n}\r\n\r\n[mono-filter-children] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n\r\n/* ── Rule row ───────────────────────────────────────────────────────────── */\r\n[mono-filter-row] {\r\n  display: grid;\r\n  /* field | operator | value | nested | trash */\r\n  grid-template-columns: minmax(8rem, 1.4fr) minmax(8rem, 1.2fr) minmax(8rem, 2fr) auto auto;\r\n  align-items: center;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n@media (max-width: 720px) {\r\n  [mono-filter-row] {\r\n    grid-template-columns: 1fr 1fr auto auto;\r\n  }\r\n  [mono-filter-value-cell] {\r\n    grid-column: 1 / -1;\r\n  }\r\n}\r\n\r\n[mono-filter-value-cell],\r\n[mono-filter-range] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--_mono-filter-gap) * 0.75);\r\n  min-width: 0;\r\n}\r\n\r\n/* ── Controls (selects + inputs) ─────────────────────────────────────────── */\r\n/* basecoat@1.0.2 styles/vega.css .field > select, select.select — border-input h-9 rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3\r\n   The text input is the same box; the flavour's outline knob decides the corner\r\n   for both, exactly as it does for `<mono-input>` and `<mono-select>`. */\r\n[mono-filter-control] {\r\n  width: 100%;\r\n  min-width: 0;\r\n  height: var(--_mono-filter-height);\r\n  padding: 0 calc(var(--mono-spacing) * 2.5);\r\n  border: var(--mono-border-width) solid var(--_mono-filter-border);\r\n  border-radius: var(--_mono-filter-radius);\r\n  background-color: var(--_mono-filter-surface);\r\n  color: var(--_mono-filter-text);\r\n  font: inherit;\r\n  font-size: var(--_mono-filter-font);\r\n  box-shadow: var(--mono-shadow-xs, none);\r\n  /* stated in both directions: a host page's preflight (Tailwind, UnoCSS) sets\r\n     `appearance: none` on a select and a shadow root escapes it — so without\r\n     this the light build lost its caret and the shadow build kept the native\r\n     one. Upstream draws its own; so does this. */\r\n  appearance: none;\r\n  outline: none;\r\n  transition:\r\n    border-color var(--mono-duration-fast, 150ms) ease,\r\n    box-shadow var(--mono-duration-fast, 150ms) ease;\r\n}\r\n[mono-filter-control]:focus,\r\n[mono-filter-control]:focus-visible {\r\n  border-color: var(--_mono-filter-ring);\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n  outline: none;\r\n}\r\n/* `disabled:opacity-50` */\r\n[mono-filter-control]:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n/* `placeholder:text-muted-foreground` — stated, so a host page's own placeholder\r\n   colour cannot reach a portaled builder */\r\n[mono-filter-control]::placeholder {\r\n  color: var(--_mono-filter-muted);\r\n  opacity: 1;\r\n}\r\n[mono-filter-range] > [mono-filter-control] {\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > select, select.select — pe-8 bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem]\r\n   The caret, drawn the way upstream draws it — the same token the ported\r\n   `<mono-select>` paints with, so it sits at the same place in every flavour. */\r\nselect[mono-filter-control] {\r\n  padding-right: calc(var(--mono-spacing) * 8);\r\n  background-image: var(--chevron-down-icon-50);\r\n  background-repeat: no-repeat;\r\n  background-position: right calc(var(--mono-spacing) * 2.5) center;\r\n  background-size: 1rem;\r\n}\r\n\r\n/* The group operator sits inline in a sentence, so it must NOT grow — otherwise it\r\n   pushes the trailing \"of the following rules:\" to the far edge. Otherwise it\r\n   is a control like every other: bordered, and at the control HEIGHT rather\r\n   than `auto` — a bare select's intrinsic height differs between a page under\r\n   a preflight and a shadow root, which put the shadow build's rows 5px higher. */\r\n[mono-filter-group-op] {\r\n  flex: 0 0 auto;\r\n  width: auto;\r\n  min-width: 6rem;\r\n  color: var(--_mono-filter-accent);\r\n  font-weight: var(--mono-font-weight-semibold);\r\n}\r\n\r\n/* ── Icon buttons ───────────────────────────────────────────────────────── */\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-accent hover:text-accent-foreground */\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='icon'] — size-9 */\r\n[mono-filter-icon-btn] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-filter-height);\r\n  height: var(--_mono-filter-height);\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--_mono-filter-btn-radius);\r\n  background: transparent;\r\n  color: var(--_mono-filter-muted);\r\n  line-height: 0;\r\n  cursor: pointer;\r\n  transition:\r\n    color var(--mono-duration-fast, 150ms) ease,\r\n    background-color var(--mono-duration-fast, 150ms) ease;\r\n}\r\n[mono-filter-icon-btn]:hover,\r\n[mono-filter-icon-btn]:focus-visible {\r\n  background: var(--accent);\r\n  color: var(--accent-foreground);\r\n  outline: none;\r\n}\r\n[mono-filter-icon-btn]:focus-visible {\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n}\r\n[mono-filter-icon-btn][mono-danger]:hover,\r\n[mono-filter-icon-btn][mono-danger]:focus-visible {\r\n  color: var(--_mono-filter-danger);\r\n}\r\n[mono-filter-icon-btn] .mono-icon,\r\n[mono-filter-icon-btn] > svg {\r\n  width: var(--_mono-filter-icon);\r\n  height: var(--_mono-filter-icon);\r\n}\r\n\r\n/* ── Add rule / group links ─────────────────────────────────────────────── */\r\n[mono-filter-add] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--_mono-filter-gap) * 2);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='link'] — text-primary underline-offset-4 hover:underline */\r\n[mono-filter-link] {\r\n  padding: 0;\r\n  border: 0;\r\n  background: none;\r\n  font: inherit;\r\n  font-size: var(--_mono-filter-font);\r\n  color: var(--_mono-filter-accent);\r\n  text-underline-offset: 4px;\r\n  cursor: pointer;\r\n}\r\n[mono-filter-link]:hover {\r\n  text-decoration: underline;\r\n}\r\n[mono-filter-link]:focus-visible {\r\n  outline: none;\r\n  border-radius: var(--mono-radius-sm);\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n}\r\n\r\n[mono-filter-empty] {\r\n  padding: calc(var(--mono-spacing) * 1) 0;\r\n  font-size: var(--_mono-filter-font);\r\n  color: var(--_mono-filter-muted);\r\n}\r\n";
-
 //#endregion
 //#region src/components/filter/mono-filter-builder.ts
 let MonoFilterBuilder = class MonoFilterBuilder extends MonoFilterBuilderCore(LitElement) {
-	static {
-		this.styles = [unsafeCSS(filter_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/form.js

@@ -1,4 +1,4 @@
-import { i as runRules, n as isBlank, r as runRule, t as monoForm } from "../mono-form-controller-BkMR8g14.js";
+import { i as runRules, n as isBlank, r as runRule, t as monoForm } from "../mono-form-controller-BrA10erm.js";
 import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
 
 export { MonoFormControlCore, monoForm as controlMonoForm, monoForm, isBlank, runRule, runRules };