@mono-lit/helper 0.0.5 → 0.0.7

package/dist/ui/shadow/slider.js

@@ -1,10 +1,9 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, v as toCssSize } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { n as cssPart } from "../../css-class-B6Tc_MAx.js";
 import { a as parseFormat, t as applyFormat } from "../../input-format-GrRCJBqV.js";
-import { n as toCssSize } from "../../css-size-DWAPgQdT.js";
-import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
-import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-DEctHXKm.js";
+import { t as MonoFormControlCore } from "../../form-control-core-BbiACMtL.js";
+import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-U5UeTa2d.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -1012,7 +1011,7 @@ const MonoSliderCore = (superClass) => {
 
 //#endregion
 //#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\slider\slider.css?raw.js
-var slider_css_raw_default = "/* =========================================================================\n   mono-slider — a multi-thumb slider drawn in the look of Basecoat's range\n   (basecoat-css@1.0.2 components/range.css + each style's `input[type='range']`),\n   the same look `<mono-input type=\"range\">` has.\n\n   Styled by ATTRIBUTE, like mono-input:\n\n     <div mono-slider mono-size mono-color mono-type=\"vertical\"\n          mono-validation-state mono-value-tooltip=\"always|never\"\n          mono-track-gap mono-marks-labelled mono-disabled mono-readonly mono-dragging>\n       <div mono-label-row><label mono-label>…</label><span mono-slider-value>20 – 80</span></div>\n       <div mono-slider-field>\n         <div mono-slider-control>                 the pointer target\n           <div mono-slider-track>                 the rail; it holds the pieces\n             <span mono-slider-piece mono-filled? mono-cut-start? mono-cut-end? style=\"--a;--b\">\n           <div mono-slider-marks><span mono-slider-mark mono-active? style=\"--p\">\n             <span mono-slider-mark-label>\n           <div mono-slider-thumb role=\"slider\" mono-active? mono-dragging? style=\"--p\">\n             <span mono-slider-tooltip>\n       <div mono-message-wrap><div mono-message=\"helper|valid|invalid|warning\">\n\n   GEOMETRY. `--p` / `--a` / `--b` are 0–1 positions (unitless). A thumb's CENTRE travels\n   from half a thumb in to half a thumb short of the end — exactly where a native range\n   thumb sits — so the slider lines up with `<mono-input type=\"range\">` under every flavor.\n   The track is cut into pieces at every thumb: that is what lets a piece be filled or not\n   (`fill`), and what lets `track-gap` cut the track back around each thumb (M3 style).\n\n   KNOBS. Every look value resolves `--mono-slider-x` → `--mono-input-range-x` → vega,\n   so the eight Basecoat styles and ONE (which write the input-range knobs in\n   flavors/*.css) restyle the slider with no slider entries of their own — the\n   \"flavor via public knobs\" pattern (filter.css). Slider-only knobs: --mono-slider-\n   {length, track-gap, accent, mark-size, mark-color, mark-active-color, mark-label-*,\n   tooltip-bg, tooltip-color, tooltip-radius, tooltip-font-*}.\n\n   The track/thumb rules cite Basecoat; marks, tooltips, track gaps, multiple\n   thumbs and the vertical type are EXTENSIONs.\n   ========================================================================= */\n\nmono-slider {\n  display: block;\n}\n\n[mono-slider] {\n  /* ── palette ─────────────────────────────────────────────────────────── */\n  --_mono-slider-text: var(--mono-slider-color, var(--foreground));\n  --_mono-slider-muted: var(--mono-slider-muted, var(--muted-foreground));\n  /* the fill + thumb colour: the `color` prop, a validation state outranks it */\n  --_mono-slider-accent: var(--mono-slider-accent, var(--_mono-slider-accent-preset, var(--primary)));\n  /* the hover / focus halo: Basecoat's ring-ring/50 (the role colour for a non-primary `color`) */\n  --_mono-slider-ring-color: var(--mono-slider-ring-color, var(--_mono-slider-ring-preset, var(--ring)));\n  --_mono-slider-ring-c: color-mix(in oklab, var(--_mono-slider-ring-color) var(--mono-slider-ring-alpha, var(--mono-ring-alpha, 50%)), transparent);\n\n  /* ── geometry: md here, `size` multiplies ────────────────────────────── */\n  --_mono-slider-scale: 1;\n  --_mono-slider-track-h: round(nearest, calc(var(--mono-slider-track-height, var(--mono-input-range-track-height, 0.375rem)) * var(--_mono-slider-scale)), 1px);\n  /* along = the thumb's size in the direction of travel, across = the other one */\n  --_mono-slider-across: round(nearest, calc(var(--mono-slider-thumb-size, var(--mono-input-range-thumb-size, 1rem)) * var(--_mono-slider-scale)), 1px);\n  --_mono-slider-along: round(nearest, calc(var(--mono-slider-thumb-width, var(--mono-input-range-thumb-width, var(--mono-slider-thumb-size, var(--mono-input-range-thumb-size, 1rem)))) * var(--_mono-slider-scale)), 1px);\n  --_mono-slider-box: max(round(nearest, calc(var(--mono-slider-height, var(--mono-input-range-height, 1.25rem)) * var(--_mono-slider-scale)), 1px), var(--_mono-slider-across));\n  --_mono-slider-track-radius: var(--mono-slider-track-radius, var(--mono-input-range-track-radius, 9999px));\n  --_mono-slider-track-bg: var(--mono-slider-track-bg, var(--mono-input-range-track-bg, var(--muted)));\n  --_mono-slider-fill: var(--mono-slider-fill, var(--mono-input-range-fill, currentColor));\n  --_mono-slider-cut: calc(var(--_mono-slider-track-gap, 0px) + var(--_mono-slider-along) / 2);\n\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 (the input range's gap) */\n  display: flex;\n  flex-direction: column;\n  gap: var(--mono-slider-gap, var(--mono-input-range-gap, var(--mono-input-gap, calc(var(--mono-spacing) * 3))));\n  width: 100%;\n  font-family: inherit;\n  color: var(--_mono-slider-text);\n}\n\n[mono-slider],\n:where([mono-slider]) *,\n:where([mono-slider]) *::before,\n:where([mono-slider]) *::after {\n  box-sizing: border-box;\n}\n\n/* the shadow build renders every region and marks an empty one */\n[mono-slider] [mono-empty] {\n  display: none;\n}\n\n[mono-slider][mono-size=\"xs\"] { --_mono-slider-scale: 0.75; }\n[mono-slider][mono-size=\"sm\"] { --_mono-slider-scale: 0.875; }\n[mono-slider][mono-size=\"lg\"] { --_mono-slider-scale: 1.125; }\n[mono-slider][mono-size=\"xl\"] { --_mono-slider-scale: 1.25; }\n[mono-slider][mono-size=\"xxl\"] { --_mono-slider-scale: 1.375; }\n\n/* ── colours: the accent + halo per role (primary is Basecoat's --primary / --ring) ── */\n[mono-slider][mono-color=\"secondary\"] { --_mono-slider-accent-preset: var(--muted-foreground); --_mono-slider-ring-preset: var(--muted-foreground); }\n[mono-slider][mono-color=\"success\"] { --_mono-slider-accent-preset: var(--success); --_mono-slider-ring-preset: var(--success); }\n[mono-slider][mono-color=\"danger\"] { --_mono-slider-accent-preset: var(--destructive); --_mono-slider-ring-preset: var(--destructive); }\n[mono-slider][mono-color=\"warning\"] { --_mono-slider-accent-preset: var(--warning); --_mono-slider-ring-preset: var(--warning); }\n[mono-slider][mono-color=\"info\"] { --_mono-slider-accent-preset: var(--info); --_mono-slider-ring-preset: var(--info); }\n[mono-slider][mono-color=\"teal\"] { --_mono-slider-accent-preset: var(--teal); --_mono-slider-ring-preset: var(--teal); }\n[mono-slider][mono-color=\"purple\"] { --_mono-slider-accent-preset: var(--purple); --_mono-slider-ring-preset: var(--purple); }\n[mono-slider][mono-color=\"neutral\"] { --_mono-slider-accent-preset: var(--neutral); --_mono-slider-ring-preset: var(--neutral); }\n[mono-slider][mono-color=\"dark\"] { --_mono-slider-accent-preset: var(--dark); --_mono-slider-ring-preset: var(--dark); }\n\n/* a validation state recolours the fill + thumb (after the colours, so it wins) */\n[mono-slider][mono-validation-state=\"invalid\"] { --_mono-slider-accent-preset: var(--destructive); --_mono-slider-ring-preset: var(--destructive); }\n[mono-slider][mono-validation-state=\"valid\"] { --_mono-slider-accent-preset: var(--success); --_mono-slider-ring-preset: var(--success); }\n[mono-slider][mono-validation-state=\"warning\"] { --_mono-slider-accent-preset: var(--warning); --_mono-slider-ring-preset: var(--warning); }\n\n/* =========================================\n   Label row — the label, and the value at its end (EJI ONE `.eji-range__row`)\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center gap-2 text-sm\n   leading-none font-medium select-none; the row spans so the value can end it */\n:where([mono-slider]) > [mono-label-row] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: calc(var(--mono-spacing) * 4);\n  min-width: 0;\n}\n\n:where([mono-slider]) [mono-label] {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: var(--mono-input-label-gap, calc(var(--mono-spacing) * 2));\n  font-size: var(--mono-slider-label-font-size, var(--mono-input-range-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm))));\n  line-height: var(--mono-slider-label-line-height, var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1)));\n  font-weight: var(--mono-slider-label-font-weight, var(--mono-input-range-label-font-weight, var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)))));\n  color: var(--mono-slider-label-color, var(--mono-input-range-label-color, var(--_mono-slider-text)));\n  user-select: none;\n}\n\n:where([mono-slider]) [mono-required-mark] {\n  color: var(--destructive);\n}\n\n/* the label ⓘ (`tooltip` prop) — same as mono-input's */\n:where([mono-slider]) [mono-label] > [mono-label-tooltip] {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mono-input-label-tooltip-size, 1.1em);\n  color: var(--mono-input-label-tooltip-color, currentColor);\n  opacity: var(--mono-input-label-tooltip-opacity, 0.6);\n  border-radius: 9999px;\n  cursor: help;\n  pointer-events: auto;\n  outline: none;\n  transition: opacity 150ms ease;\n\n  &:is(:hover, :focus-visible) {\n    opacity: 1;\n  }\n  &:focus-visible {\n    outline: 2px solid currentColor;\n    outline-offset: 2px;\n  }\n  & > [mono-icon] {\n    width: 1em;\n    height: 1em;\n  }\n}\n\n/* EXTENSION — the value readout (EJI ONE `.eji-range__val`); tabular so it does not shimmer */\n:where([mono-slider]) [mono-slider-value] {\n  flex: none;\n  font-family: var(--mono-slider-value-font-family, var(--mono-input-range-value-font-family, inherit));\n  font-size: var(--mono-slider-value-font-size, var(--mono-input-range-value-font-size, var(--mono-slider-label-font-size, var(--mono-input-range-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm))))));\n  font-weight: var(--mono-slider-value-font-weight, var(--mono-input-range-value-font-weight, var(--mono-font-weight-medium)));\n  line-height: var(--mono-slider-label-line-height, var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1)));\n  font-variant-numeric: tabular-nums;\n  color: var(--mono-slider-value-color, var(--mono-input-range-value-color, var(--_mono-slider-muted)));\n  white-space: nowrap;\n  user-select: none;\n}\n\n/* no label: the readout follows the control, in reserved room */\n:where([mono-slider]) > [mono-slider-field] > [mono-slider-value] {\n  min-width: var(--mono-slider-value-min-width, var(--mono-input-range-value-min-width, 3ch));\n  text-align: end;\n}\n\n/* =========================================\n   Field + control\n   ========================================= */\n\n:where([mono-slider]) > [mono-slider-field] {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--mono-spacing) * 3);\n  min-width: 0;\n}\n\n/* basecoat@1.0.2 components/range.css .field > input[type='range'], .input[type='range'] — flex appearance-none\n   items-center p-0 outline-none disabled:pointer-events-none disabled:opacity-50 */\n/* basecoat@1.0.2 styles/vega.css .field > input[type='range'], .input[type='range'] — h-5 (the box), --slider-track-height,\n   --slider-thumb-size; mono: the box also grows to fit a taller thumb */\n:where([mono-slider]) [mono-slider-control] {\n  position: relative;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: var(--_mono-slider-box);\n  color: var(--_mono-slider-accent);\n  cursor: pointer;\n  touch-action: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* room for mark labels under the track */\n[mono-slider][mono-marks-labelled] [mono-slider-control] {\n  margin-block-end: calc(var(--mono-slider-mark-label-gap, calc(var(--mono-spacing) * 1.5)) + var(--mono-slider-mark-label-line-height, 1rem));\n}\n\n/* =========================================\n   Track — the rail, cut into pieces at every thumb\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-runnable-track — bg-muted h-1.5\n   rounded-full (+ components/range.css: the --primary / --muted gradient stop, here one piece each) */\n:where([mono-slider]) [mono-slider-track] {\n  position: absolute;\n  inset-inline: 0;\n  top: 50%;\n  height: var(--_mono-slider-track-h);\n  margin-top: calc(var(--_mono-slider-track-h) / -2);\n}\n\n:where([mono-slider]) [mono-slider-piece] {\n  /* piece ends: a thumb centre, or the very end of the rail */\n  --_x0: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--a));\n  --_x1: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--b));\n  --_cs: 0px;\n  --_ce: 0px;\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--_x0) + var(--_cs));\n  inline-size: max(0px, calc(var(--_x1) - var(--_x0) - var(--_cs) - var(--_ce)));\n  border-radius: var(--_mono-slider-track-radius);\n  background: var(--_mono-slider-track-bg);\n}\n:where([mono-slider]) [mono-slider-piece]:not([mono-cut-start]) { --_x0: 0%; }\n:where([mono-slider]) [mono-slider-piece]:not([mono-cut-end]) { --_x1: 100%; }\n:where([mono-slider]) [mono-slider-piece][mono-filled] {\n  background: var(--_mono-slider-fill);\n}\n\n/* joins at a thumb are square unless `track-gap` opens them (then each piece is a\n   whole rounded bar, Material 3's look) */\n[mono-slider]:not([mono-track-gap]) [mono-slider-piece][mono-cut-start] {\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n[mono-slider]:not([mono-track-gap]) [mono-slider-piece][mono-cut-end] {\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n}\n[mono-slider][mono-track-gap] [mono-slider-piece][mono-cut-start] { --_cs: var(--_mono-slider-cut); }\n[mono-slider][mono-track-gap] [mono-slider-piece][mono-cut-end] { --_ce: var(--_mono-slider-cut); }\n\n/* =========================================\n   Thumb\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb — border-primary ring-ring/50\n   size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4;\n   mono: the three box-shadow slots of mono-input's range — a resting ring, the halo, the shadow */\n:where([mono-slider]) [mono-slider-thumb] {\n  --_halo: 0 0 #0000;\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  inset-inline-start: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--p));\n  width: var(--_mono-slider-along);\n  height: var(--_mono-slider-across);\n  margin-top: calc(var(--_mono-slider-across) / -2);\n  margin-inline-start: calc(var(--_mono-slider-along) / -2);\n  border: var(--mono-slider-thumb-border-width, var(--mono-input-range-thumb-border-width, 1px)) solid\n    var(--mono-slider-thumb-border-color, var(--mono-input-range-thumb-border-color, currentColor));\n  border-radius: var(--mono-slider-thumb-radius, var(--mono-input-range-thumb-radius, 9999px));\n  background: var(--mono-slider-thumb-bg, var(--mono-input-range-thumb-bg, #fff));\n  box-shadow:\n    0 0 0 var(--mono-slider-thumb-ring-width, var(--mono-input-range-thumb-ring-width, 0px))\n      var(--mono-slider-thumb-ring-color, var(--mono-input-range-thumb-ring-color, transparent)),\n    var(--_halo),\n    var(--mono-slider-thumb-shadow, var(--mono-input-range-thumb-shadow, var(--mono-shadow-sm)));\n  outline: none;\n  transition-property: color, box-shadow, background-color, border-color;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n}\n\n/* the last-touched thumb rides on top, so a stack lifts the one being moved */\n:where([mono-slider]) [mono-slider-thumb][mono-active] {\n  z-index: 2;\n}\n\n/* focus-visible:ring-4 focus-visible:outline-hidden; a drag keeps the halo on */\n:where([mono-slider]) [mono-slider-thumb]:is(:focus-visible, [mono-dragging]) {\n  --_halo: 0 0 0 var(--mono-slider-ring-width, var(--mono-input-range-ring-width, 4px)) var(--_mono-slider-ring-c);\n}\n\n/* hover:ring-4 */\n@media (hover: hover) {\n  [mono-slider]:not([mono-disabled], [mono-readonly]) [mono-slider-thumb]:hover:not(:focus-visible, [mono-dragging]) {\n    --_halo: 0 0 0 var(--mono-slider-hover-ring-width, var(--mono-input-range-hover-ring-width, var(--mono-slider-ring-width, var(--mono-input-range-ring-width, 4px)))) var(--_mono-slider-ring-c);\n  }\n}\n\n/* =========================================\n   EXTENSION — marks\n   ========================================= */\n\n:where([mono-slider]) [mono-slider-marks] {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n:where([mono-slider]) [mono-slider-mark] {\n  --_size: var(--mono-slider-mark-size, max(4px, calc(var(--_mono-slider-track-h) * 0.5)));\n  position: absolute;\n  top: 50%;\n  inset-inline-start: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--p));\n  width: var(--_size);\n  height: var(--_size);\n  margin-top: calc(var(--_size) / -2);\n  margin-inline-start: calc(var(--_size) / -2);\n  border-radius: 9999px;\n  background: var(--mono-slider-mark-color, color-mix(in oklab, var(--_mono-slider-muted) 55%, transparent));\n}\n\n:where([mono-slider]) [mono-slider-mark][mono-active] {\n  background: var(--mono-slider-mark-active-color, color-mix(in oklab, var(--primary-foreground) 85%, transparent));\n}\n\n:where([mono-slider]) [mono-slider-mark-label] {\n  position: absolute;\n  top: calc(var(--_mono-slider-box) / 2 + var(--mono-slider-mark-label-gap, calc(var(--mono-spacing) * 1.5)));\n  left: 50%;\n  translate: -50% 0;\n  font-size: var(--mono-slider-mark-label-font-size, var(--mono-text-xs));\n  line-height: var(--mono-slider-mark-label-line-height, 1rem);\n  font-weight: var(--mono-slider-mark-label-font-weight, var(--mono-font-weight-normal));\n  color: var(--mono-slider-mark-label-color, var(--_mono-slider-muted));\n  white-space: nowrap;\n}\n\n/* =========================================\n   EXTENSION — the value bubble on each thumb (shadcn's tooltip: bg-foreground text-background)\n   ========================================= */\n\n:where([mono-slider]) [mono-slider-tooltip] {\n  position: absolute;\n  left: 50%;\n  bottom: calc(100% + var(--mono-slider-tooltip-offset, calc(var(--mono-spacing) * 2)));\n  translate: -50% 0;\n  padding: calc(var(--mono-spacing) * 0.5) calc(var(--mono-spacing) * 2);\n  border-radius: var(--mono-slider-tooltip-radius, var(--mono-radius-md));\n  background: var(--mono-slider-tooltip-bg, var(--foreground));\n  color: var(--mono-slider-tooltip-color, var(--background));\n  font-family: var(--mono-slider-tooltip-font-family, inherit);\n  font-size: var(--mono-slider-tooltip-font-size, var(--mono-text-xs));\n  line-height: var(--mono-slider-tooltip-line-height, 1rem);\n  font-weight: var(--mono-slider-tooltip-font-weight, var(--mono-font-weight-medium));\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity var(--mono-duration) var(--mono-ease), visibility var(--mono-duration);\n\n  /* the arrow */\n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    width: 0.5rem;\n    height: 0.25rem;\n    translate: -50% 0;\n    background: inherit;\n    clip-path: polygon(0 0, 100% 0, 50% 100%);\n  }\n}\n\n/* `value-tooltip=\"always\"`: the bubbles are permanent, so the label row must not sit under them */\n[mono-slider][mono-value-tooltip=\"always\"]:not([mono-type=\"vertical\"]) [mono-slider-control] {\n  margin-block-start: max(0px, calc(var(--mono-slider-tooltip-line-height, 1rem) + var(--mono-spacing) * 3 + var(--mono-slider-tooltip-offset, calc(var(--mono-spacing) * 2)) - (var(--_mono-slider-box) - var(--_mono-slider-across)) / 2));\n}\n\n/* `value-tooltip=\"auto\"`: on focus, while dragging, and on hover */\n:where([mono-slider]) [mono-slider-thumb]:is(:focus-visible, [mono-dragging]) > [mono-slider-tooltip],\n[mono-slider][mono-value-tooltip=\"always\"] [mono-slider-tooltip] {\n  opacity: 1;\n  visibility: visible;\n}\n@media (hover: hover) {\n  [mono-slider]:not([mono-disabled]) [mono-slider-thumb]:hover > [mono-slider-tooltip] {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n/* =========================================\n   EXTENSION — type=\"vertical\": the same parts with the axes swapped, min at the bottom\n   ========================================= */\n\n[mono-slider][mono-type=\"vertical\"] {\n  width: auto;\n}\n\n[mono-slider][mono-type=\"vertical\"] > [mono-slider-field] {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n[mono-slider][mono-type=\"vertical\"] [mono-slider-control] {\n  flex: none;\n  width: var(--_mono-slider-box);\n  height: var(--_mono-slider-length, var(--mono-slider-length, 200px));\n}\n\n[mono-slider][mono-type=\"vertical\"][mono-marks-labelled] [mono-slider-control] {\n  margin-block-end: 0;\n}\n\n[mono-slider][mono-type=\"vertical\"] [mono-slider-track] {\n  inset-inline: auto;\n  inset-block: 0;\n  left: 50%;\n  top: 0;\n  width: var(--_mono-slider-track-h);\n  height: auto;\n  margin-top: 0;\n  margin-left: calc(var(--_mono-slider-track-h) / -2);\n}\n\n[mono-slider][mono-type=\"vertical\"] [mono-slider-piece] {\n  --_x0: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--a));\n  --_x1: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--b));\n  inset-block: auto;\n  inset-inline: 0;\n  bottom: calc(var(--_x0) + var(--_cs));\n  inline-size: auto;\n  block-size: max(0px, calc(var(--_x1) - var(--_x0) - var(--_cs) - var(--_ce)));\n}\n[mono-slider][mono-type=\"vertical\"] [mono-slider-piece]:not([mono-cut-start]) { --_x0: 0%; }\n[mono-slider][mono-type=\"vertical\"] [mono-slider-piece]:not([mono-cut-end]) { --_x1: 100%; }\n/* vertical joins: the piece's START is its bottom, its END its top */\n[mono-slider][mono-type=\"vertical\"]:not([mono-track-gap]) [mono-slider-piece][mono-cut-start] {\n  border-radius: var(--_mono-slider-track-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n[mono-slider][mono-type=\"vertical\"]:not([mono-track-gap]) [mono-slider-piece][mono-cut-end] {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n[mono-slider][mono-type=\"vertical\"]:not([mono-track-gap]) [mono-slider-piece][mono-cut-start][mono-cut-end] {\n  border-radius: 0;\n}\n\n[mono-slider][mono-type=\"vertical\"] [mono-slider-thumb],\n[mono-slider][mono-type=\"vertical\"] [mono-slider-mark] {\n  /* the logical reset goes FIRST: written after `left` it would reset it too */\n  inset-inline-start: auto;\n  top: auto;\n  left: 50%;\n  bottom: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--p));\n  margin: 0;\n}\n[mono-slider][mono-type=\"vertical\"] [mono-slider-thumb] {\n  width: var(--_mono-slider-across);\n  height: var(--_mono-slider-along);\n  margin-left: calc(var(--_mono-slider-across) / -2);\n  margin-bottom: calc(var(--_mono-slider-along) / -2);\n}\n[mono-slider][mono-type=\"vertical\"] [mono-slider-mark] {\n  margin-left: calc(var(--_size) / -2);\n  margin-bottom: calc(var(--_size) / -2);\n}\n[mono-slider][mono-type=\"vertical\"] [mono-slider-mark-label] {\n  top: 50%;\n  left: calc(var(--_mono-slider-box) / 2 + var(--mono-slider-mark-label-gap, calc(var(--mono-spacing) * 2)));\n  translate: 0 -50%;\n}\n[mono-slider][mono-type=\"vertical\"] [mono-slider-tooltip] {\n  left: auto;\n  right: calc(100% + var(--mono-slider-tooltip-offset, calc(var(--mono-spacing) * 2)));\n  bottom: 50%;\n  translate: 0 50%;\n\n  &::after {\n    top: 50%;\n    left: 100%;\n    width: 0.25rem;\n    height: 0.5rem;\n    translate: 0 -50%;\n    clip-path: polygon(0 0, 100% 50%, 0 100%);\n  }\n}\n\n/* =========================================\n   States\n   ========================================= */\n\n/* in-data-[disabled=true]:opacity-50 */\n[mono-slider][mono-disabled] > :is([mono-label-row], [mono-slider-field]) {\n  opacity: 0.5;\n}\n[mono-slider][mono-disabled] [mono-slider-control] {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n[mono-slider][mono-readonly] [mono-slider-control] {\n  cursor: default;\n}\n\n[mono-slider][mono-dragging] [mono-slider-control] {\n  cursor: grabbing;\n}\n\n/* =========================================\n   Message — helper / validation text (mono-input's)\n   ========================================= */\n\n:where([mono-slider]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\n  display: none;\n}\n\n:where([mono-slider]) [mono-message] {\n  font-size: var(--mono-input-message-font-size, var(--mono-text-sm));\n  line-height: var(--mono-input-message-line-height, var(--mono-leading-normal));\n  color: var(--_mono-slider-muted);\n}\n:where([mono-slider]) [mono-message=\"invalid\"] { color: var(--destructive); }\n:where([mono-slider]) [mono-message=\"valid\"] { color: var(--success); }\n:where([mono-slider]) [mono-message=\"warning\"] { color: var(--warning); }\n\n[mono-slider][mono-validation-state=\"invalid\"] [mono-label] {\n  color: var(--destructive);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where([mono-slider]) :is([mono-slider-thumb], [mono-slider-tooltip]) {\n    transition: none;\n  }\n}\n";
+var slider_css_raw_default = "/* =========================================================================\r\n   mono-slider — a multi-thumb slider drawn in the look of Basecoat's range\r\n   (basecoat-css@1.0.2 components/range.css + each style's `input[type='range']`),\r\n   the same look `<mono-input type=\"range\">` has.\r\n\r\n   Styled by ATTRIBUTE, like mono-input:\r\n\r\n     <div mono-slider mono-size mono-color mono-type=\"vertical\"\r\n          mono-validation-state mono-value-tooltip=\"always|never\"\r\n          mono-track-gap mono-marks-labelled mono-disabled mono-readonly mono-dragging>\r\n       <div mono-label-row><label mono-label>…</label><span mono-slider-value>20 – 80</span></div>\r\n       <div mono-slider-field>\r\n         <div mono-slider-control>                 the pointer target\r\n           <div mono-slider-track>                 the rail; it holds the pieces\r\n             <span mono-slider-piece mono-filled? mono-cut-start? mono-cut-end? style=\"--a;--b\">\r\n           <div mono-slider-marks><span mono-slider-mark mono-active? style=\"--p\">\r\n             <span mono-slider-mark-label>\r\n           <div mono-slider-thumb role=\"slider\" mono-active? mono-dragging? style=\"--p\">\r\n             <span mono-slider-tooltip>\r\n       <div mono-message-wrap><div mono-message=\"helper|valid|invalid|warning\">\r\n\r\n   GEOMETRY. `--p` / `--a` / `--b` are 0–1 positions (unitless). A thumb's CENTRE travels\r\n   from half a thumb in to half a thumb short of the end — exactly where a native range\r\n   thumb sits — so the slider lines up with `<mono-input type=\"range\">` under every flavor.\r\n   The track is cut into pieces at every thumb: that is what lets a piece be filled or not\r\n   (`fill`), and what lets `track-gap` cut the track back around each thumb (M3 style).\r\n\r\n   KNOBS. Every look value resolves `--mono-slider-x` → `--mono-input-range-x` → vega,\r\n   so the eight Basecoat styles and ONE (which write the input-range knobs in\r\n   flavors/*.css) restyle the slider with no slider entries of their own — the\r\n   \"flavor via public knobs\" pattern (filter.css). Slider-only knobs: --mono-slider-\r\n   {length, track-gap, accent, mark-size, mark-color, mark-active-color, mark-label-*,\r\n   tooltip-bg, tooltip-color, tooltip-radius, tooltip-font-*}.\r\n\r\n   The track/thumb rules cite Basecoat; marks, tooltips, track gaps, multiple\r\n   thumbs and the vertical type are EXTENSIONs.\r\n   ========================================================================= */\r\n\r\nmono-slider {\r\n  display: block;\r\n}\r\n\r\n[mono-slider] {\r\n  /* ── palette ─────────────────────────────────────────────────────────── */\r\n  --_mono-slider-text: var(--mono-slider-color, var(--foreground));\r\n  --_mono-slider-muted: var(--mono-slider-muted, var(--muted-foreground));\r\n  /* the fill + thumb colour: the `color` prop, a validation state outranks it */\r\n  --_mono-slider-accent: var(--mono-slider-accent, var(--_mono-slider-accent-preset, var(--primary)));\r\n  /* the hover / focus halo: Basecoat's ring-ring/50 (the role colour for a non-primary `color`) */\r\n  --_mono-slider-ring-color: var(--mono-slider-ring-color, var(--_mono-slider-ring-preset, var(--ring)));\r\n  --_mono-slider-ring-c: color-mix(in oklab, var(--_mono-slider-ring-color) var(--mono-slider-ring-alpha, var(--mono-ring-alpha, 50%)), transparent);\r\n\r\n  /* ── geometry: md here, `size` multiplies ────────────────────────────── */\r\n  --_mono-slider-scale: 1;\r\n  --_mono-slider-track-h: round(nearest, calc(var(--mono-slider-track-height, var(--mono-input-range-track-height, 0.375rem)) * var(--_mono-slider-scale)), 1px);\r\n  /* along = the thumb's size in the direction of travel, across = the other one */\r\n  --_mono-slider-across: round(nearest, calc(var(--mono-slider-thumb-size, var(--mono-input-range-thumb-size, 1rem)) * var(--_mono-slider-scale)), 1px);\r\n  --_mono-slider-along: round(nearest, calc(var(--mono-slider-thumb-width, var(--mono-input-range-thumb-width, var(--mono-slider-thumb-size, var(--mono-input-range-thumb-size, 1rem)))) * var(--_mono-slider-scale)), 1px);\r\n  --_mono-slider-box: max(round(nearest, calc(var(--mono-slider-height, var(--mono-input-range-height, 1.25rem)) * var(--_mono-slider-scale)), 1px), var(--_mono-slider-across));\r\n  --_mono-slider-track-radius: var(--mono-slider-track-radius, var(--mono-input-range-track-radius, 9999px));\r\n  --_mono-slider-track-bg: var(--mono-slider-track-bg, var(--mono-input-range-track-bg, var(--muted)));\r\n  --_mono-slider-fill: var(--mono-slider-fill, var(--mono-input-range-fill, currentColor));\r\n  --_mono-slider-cut: calc(var(--_mono-slider-track-gap, 0px) + var(--_mono-slider-along) / 2);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 (the input range's gap) */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-slider-gap, var(--mono-input-range-gap, var(--mono-input-gap, calc(var(--mono-spacing) * 3))));\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-slider-text);\r\n}\r\n\r\n[mono-slider],\r\n:where([mono-slider]) *,\r\n:where([mono-slider]) *::before,\r\n:where([mono-slider]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* the shadow build renders every region and marks an empty one */\r\n[mono-slider] [mono-empty] {\r\n  display: none;\r\n}\r\n\r\n[mono-slider][mono-size=\"xs\"] { --_mono-slider-scale: 0.75; }\r\n[mono-slider][mono-size=\"sm\"] { --_mono-slider-scale: 0.875; }\r\n[mono-slider][mono-size=\"lg\"] { --_mono-slider-scale: 1.125; }\r\n[mono-slider][mono-size=\"xl\"] { --_mono-slider-scale: 1.25; }\r\n[mono-slider][mono-size=\"xxl\"] { --_mono-slider-scale: 1.375; }\r\n\r\n/* ── colours: the accent + halo per role (primary is Basecoat's --primary / --ring) ── */\r\n[mono-slider][mono-color=\"secondary\"] { --_mono-slider-accent-preset: var(--muted-foreground); --_mono-slider-ring-preset: var(--muted-foreground); }\r\n[mono-slider][mono-color=\"success\"] { --_mono-slider-accent-preset: var(--success); --_mono-slider-ring-preset: var(--success); }\r\n[mono-slider][mono-color=\"danger\"] { --_mono-slider-accent-preset: var(--destructive); --_mono-slider-ring-preset: var(--destructive); }\r\n[mono-slider][mono-color=\"warning\"] { --_mono-slider-accent-preset: var(--warning); --_mono-slider-ring-preset: var(--warning); }\r\n[mono-slider][mono-color=\"info\"] { --_mono-slider-accent-preset: var(--info); --_mono-slider-ring-preset: var(--info); }\r\n[mono-slider][mono-color=\"teal\"] { --_mono-slider-accent-preset: var(--teal); --_mono-slider-ring-preset: var(--teal); }\r\n[mono-slider][mono-color=\"purple\"] { --_mono-slider-accent-preset: var(--purple); --_mono-slider-ring-preset: var(--purple); }\r\n[mono-slider][mono-color=\"neutral\"] { --_mono-slider-accent-preset: var(--neutral); --_mono-slider-ring-preset: var(--neutral); }\r\n[mono-slider][mono-color=\"dark\"] { --_mono-slider-accent-preset: var(--dark); --_mono-slider-ring-preset: var(--dark); }\r\n\r\n/* a validation state recolours the fill + thumb (after the colours, so it wins) */\r\n[mono-slider][mono-validation-state=\"invalid\"] { --_mono-slider-accent-preset: var(--destructive); --_mono-slider-ring-preset: var(--destructive); }\r\n[mono-slider][mono-validation-state=\"valid\"] { --_mono-slider-accent-preset: var(--success); --_mono-slider-ring-preset: var(--success); }\r\n[mono-slider][mono-validation-state=\"warning\"] { --_mono-slider-accent-preset: var(--warning); --_mono-slider-ring-preset: var(--warning); }\r\n\r\n/* =========================================\r\n   Label row — the label, and the value at its end (EJI ONE `.eji-range__row`)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center gap-2 text-sm\r\n   leading-none font-medium select-none; the row spans so the value can end it */\r\n:where([mono-slider]) > [mono-label-row] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: calc(var(--mono-spacing) * 4);\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-slider]) [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: var(--mono-input-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-slider-label-font-size, var(--mono-input-range-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm))));\r\n  line-height: var(--mono-slider-label-line-height, var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1)));\r\n  font-weight: var(--mono-slider-label-font-weight, var(--mono-input-range-label-font-weight, var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)))));\r\n  color: var(--mono-slider-label-color, var(--mono-input-range-label-color, var(--_mono-slider-text)));\r\n  user-select: none;\r\n}\r\n\r\n:where([mono-slider]) [mono-required-mark] {\r\n  color: var(--destructive);\r\n}\r\n\r\n/* the label ⓘ (`tooltip` prop) — same as mono-input's */\r\n:where([mono-slider]) [mono-label] > [mono-label-tooltip] {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: var(--mono-input-label-tooltip-size, 1.1em);\r\n  color: var(--mono-input-label-tooltip-color, currentColor);\r\n  opacity: var(--mono-input-label-tooltip-opacity, 0.6);\r\n  border-radius: 9999px;\r\n  cursor: help;\r\n  pointer-events: auto;\r\n  outline: none;\r\n  transition: opacity 150ms ease;\r\n\r\n  &:is(:hover, :focus-visible) {\r\n    opacity: 1;\r\n  }\r\n  &:focus-visible {\r\n    outline: 2px solid currentColor;\r\n    outline-offset: 2px;\r\n  }\r\n  & > [mono-icon] {\r\n    width: 1em;\r\n    height: 1em;\r\n  }\r\n}\r\n\r\n/* EXTENSION — the value readout (EJI ONE `.eji-range__val`); tabular so it does not shimmer */\r\n:where([mono-slider]) [mono-slider-value] {\r\n  flex: none;\r\n  font-family: var(--mono-slider-value-font-family, var(--mono-input-range-value-font-family, inherit));\r\n  font-size: var(--mono-slider-value-font-size, var(--mono-input-range-value-font-size, var(--mono-slider-label-font-size, var(--mono-input-range-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm))))));\r\n  font-weight: var(--mono-slider-value-font-weight, var(--mono-input-range-value-font-weight, var(--mono-font-weight-medium)));\r\n  line-height: var(--mono-slider-label-line-height, var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1)));\r\n  font-variant-numeric: tabular-nums;\r\n  color: var(--mono-slider-value-color, var(--mono-input-range-value-color, var(--_mono-slider-muted)));\r\n  white-space: nowrap;\r\n  user-select: none;\r\n}\r\n\r\n/* no label: the readout follows the control, in reserved room */\r\n:where([mono-slider]) > [mono-slider-field] > [mono-slider-value] {\r\n  min-width: var(--mono-slider-value-min-width, var(--mono-input-range-value-min-width, 3ch));\r\n  text-align: end;\r\n}\r\n\r\n/* =========================================\r\n   Field + control\r\n   ========================================= */\r\n\r\n:where([mono-slider]) > [mono-slider-field] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 3);\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 components/range.css .field > input[type='range'], .input[type='range'] — flex appearance-none\r\n   items-center p-0 outline-none disabled:pointer-events-none disabled:opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .field > input[type='range'], .input[type='range'] — h-5 (the box), --slider-track-height,\r\n   --slider-thumb-size; mono: the box also grows to fit a taller thumb */\r\n:where([mono-slider]) [mono-slider-control] {\r\n  position: relative;\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  height: var(--_mono-slider-box);\r\n  color: var(--_mono-slider-accent);\r\n  cursor: pointer;\r\n  touch-action: none;\r\n  user-select: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n/* room for mark labels under the track */\r\n[mono-slider][mono-marks-labelled] [mono-slider-control] {\r\n  margin-block-end: calc(var(--mono-slider-mark-label-gap, calc(var(--mono-spacing) * 1.5)) + var(--mono-slider-mark-label-line-height, 1rem));\r\n}\r\n\r\n/* =========================================\r\n   Track — the rail, cut into pieces at every thumb\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-runnable-track — bg-muted h-1.5\r\n   rounded-full (+ components/range.css: the --primary / --muted gradient stop, here one piece each) */\r\n:where([mono-slider]) [mono-slider-track] {\r\n  position: absolute;\r\n  inset-inline: 0;\r\n  top: 50%;\r\n  height: var(--_mono-slider-track-h);\r\n  margin-top: calc(var(--_mono-slider-track-h) / -2);\r\n}\r\n\r\n:where([mono-slider]) [mono-slider-piece] {\r\n  /* piece ends: a thumb centre, or the very end of the rail */\r\n  --_x0: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--a));\r\n  --_x1: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--b));\r\n  --_cs: 0px;\r\n  --_ce: 0px;\r\n  position: absolute;\r\n  inset-block: 0;\r\n  inset-inline-start: calc(var(--_x0) + var(--_cs));\r\n  inline-size: max(0px, calc(var(--_x1) - var(--_x0) - var(--_cs) - var(--_ce)));\r\n  border-radius: var(--_mono-slider-track-radius);\r\n  background: var(--_mono-slider-track-bg);\r\n}\r\n:where([mono-slider]) [mono-slider-piece]:not([mono-cut-start]) { --_x0: 0%; }\r\n:where([mono-slider]) [mono-slider-piece]:not([mono-cut-end]) { --_x1: 100%; }\r\n:where([mono-slider]) [mono-slider-piece][mono-filled] {\r\n  background: var(--_mono-slider-fill);\r\n}\r\n\r\n/* joins at a thumb are square unless `track-gap` opens them (then each piece is a\r\n   whole rounded bar, Material 3's look) */\r\n[mono-slider]:not([mono-track-gap]) [mono-slider-piece][mono-cut-start] {\r\n  border-start-start-radius: 0;\r\n  border-end-start-radius: 0;\r\n}\r\n[mono-slider]:not([mono-track-gap]) [mono-slider-piece][mono-cut-end] {\r\n  border-start-end-radius: 0;\r\n  border-end-end-radius: 0;\r\n}\r\n[mono-slider][mono-track-gap] [mono-slider-piece][mono-cut-start] { --_cs: var(--_mono-slider-cut); }\r\n[mono-slider][mono-track-gap] [mono-slider-piece][mono-cut-end] { --_ce: var(--_mono-slider-cut); }\r\n\r\n/* =========================================\r\n   Thumb\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb — border-primary ring-ring/50\r\n   size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4;\r\n   mono: the three box-shadow slots of mono-input's range — a resting ring, the halo, the shadow */\r\n:where([mono-slider]) [mono-slider-thumb] {\r\n  --_halo: 0 0 #0000;\r\n  position: absolute;\r\n  z-index: 1;\r\n  top: 50%;\r\n  inset-inline-start: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--p));\r\n  width: var(--_mono-slider-along);\r\n  height: var(--_mono-slider-across);\r\n  margin-top: calc(var(--_mono-slider-across) / -2);\r\n  margin-inline-start: calc(var(--_mono-slider-along) / -2);\r\n  border: var(--mono-slider-thumb-border-width, var(--mono-input-range-thumb-border-width, 1px)) solid\r\n    var(--mono-slider-thumb-border-color, var(--mono-input-range-thumb-border-color, currentColor));\r\n  border-radius: var(--mono-slider-thumb-radius, var(--mono-input-range-thumb-radius, 9999px));\r\n  background: var(--mono-slider-thumb-bg, var(--mono-input-range-thumb-bg, #fff));\r\n  box-shadow:\r\n    0 0 0 var(--mono-slider-thumb-ring-width, var(--mono-input-range-thumb-ring-width, 0px))\r\n      var(--mono-slider-thumb-ring-color, var(--mono-input-range-thumb-ring-color, transparent)),\r\n    var(--_halo),\r\n    var(--mono-slider-thumb-shadow, var(--mono-input-range-thumb-shadow, var(--mono-shadow-sm)));\r\n  outline: none;\r\n  transition-property: color, box-shadow, background-color, border-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* the last-touched thumb rides on top, so a stack lifts the one being moved */\r\n:where([mono-slider]) [mono-slider-thumb][mono-active] {\r\n  z-index: 2;\r\n}\r\n\r\n/* focus-visible:ring-4 focus-visible:outline-hidden; a drag keeps the halo on */\r\n:where([mono-slider]) [mono-slider-thumb]:is(:focus-visible, [mono-dragging]) {\r\n  --_halo: 0 0 0 var(--mono-slider-ring-width, var(--mono-input-range-ring-width, 4px)) var(--_mono-slider-ring-c);\r\n}\r\n\r\n/* hover:ring-4 */\r\n@media (hover: hover) {\r\n  [mono-slider]:not([mono-disabled], [mono-readonly]) [mono-slider-thumb]:hover:not(:focus-visible, [mono-dragging]) {\r\n    --_halo: 0 0 0 var(--mono-slider-hover-ring-width, var(--mono-input-range-hover-ring-width, var(--mono-slider-ring-width, var(--mono-input-range-ring-width, 4px)))) var(--_mono-slider-ring-c);\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   EXTENSION — marks\r\n   ========================================= */\r\n\r\n:where([mono-slider]) [mono-slider-marks] {\r\n  position: absolute;\r\n  inset: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-slider]) [mono-slider-mark] {\r\n  --_size: var(--mono-slider-mark-size, max(4px, calc(var(--_mono-slider-track-h) * 0.5)));\r\n  position: absolute;\r\n  top: 50%;\r\n  inset-inline-start: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--p));\r\n  width: var(--_size);\r\n  height: var(--_size);\r\n  margin-top: calc(var(--_size) / -2);\r\n  margin-inline-start: calc(var(--_size) / -2);\r\n  border-radius: 9999px;\r\n  background: var(--mono-slider-mark-color, color-mix(in oklab, var(--_mono-slider-muted) 55%, transparent));\r\n}\r\n\r\n:where([mono-slider]) [mono-slider-mark][mono-active] {\r\n  background: var(--mono-slider-mark-active-color, color-mix(in oklab, var(--primary-foreground) 85%, transparent));\r\n}\r\n\r\n:where([mono-slider]) [mono-slider-mark-label] {\r\n  position: absolute;\r\n  top: calc(var(--_mono-slider-box) / 2 + var(--mono-slider-mark-label-gap, calc(var(--mono-spacing) * 1.5)));\r\n  left: 50%;\r\n  translate: -50% 0;\r\n  font-size: var(--mono-slider-mark-label-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-slider-mark-label-line-height, 1rem);\r\n  font-weight: var(--mono-slider-mark-label-font-weight, var(--mono-font-weight-normal));\r\n  color: var(--mono-slider-mark-label-color, var(--_mono-slider-muted));\r\n  white-space: nowrap;\r\n}\r\n\r\n/* =========================================\r\n   EXTENSION — the value bubble on each thumb (shadcn's tooltip: bg-foreground text-background)\r\n   ========================================= */\r\n\r\n:where([mono-slider]) [mono-slider-tooltip] {\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: calc(100% + var(--mono-slider-tooltip-offset, calc(var(--mono-spacing) * 2)));\r\n  translate: -50% 0;\r\n  padding: calc(var(--mono-spacing) * 0.5) calc(var(--mono-spacing) * 2);\r\n  border-radius: var(--mono-slider-tooltip-radius, var(--mono-radius-md));\r\n  background: var(--mono-slider-tooltip-bg, var(--foreground));\r\n  color: var(--mono-slider-tooltip-color, var(--background));\r\n  font-family: var(--mono-slider-tooltip-font-family, inherit);\r\n  font-size: var(--mono-slider-tooltip-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-slider-tooltip-line-height, 1rem);\r\n  font-weight: var(--mono-slider-tooltip-font-weight, var(--mono-font-weight-medium));\r\n  font-variant-numeric: tabular-nums;\r\n  white-space: nowrap;\r\n  pointer-events: none;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transition: opacity var(--mono-duration) var(--mono-ease), visibility var(--mono-duration);\r\n\r\n  /* the arrow */\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 50%;\r\n    width: 0.5rem;\r\n    height: 0.25rem;\r\n    translate: -50% 0;\r\n    background: inherit;\r\n    clip-path: polygon(0 0, 100% 0, 50% 100%);\r\n  }\r\n}\r\n\r\n/* `value-tooltip=\"always\"`: the bubbles are permanent, so the label row must not sit under them */\r\n[mono-slider][mono-value-tooltip=\"always\"]:not([mono-type=\"vertical\"]) [mono-slider-control] {\r\n  margin-block-start: max(0px, calc(var(--mono-slider-tooltip-line-height, 1rem) + var(--mono-spacing) * 3 + var(--mono-slider-tooltip-offset, calc(var(--mono-spacing) * 2)) - (var(--_mono-slider-box) - var(--_mono-slider-across)) / 2));\r\n}\r\n\r\n/* `value-tooltip=\"auto\"`: on focus, while dragging, and on hover */\r\n:where([mono-slider]) [mono-slider-thumb]:is(:focus-visible, [mono-dragging]) > [mono-slider-tooltip],\r\n[mono-slider][mono-value-tooltip=\"always\"] [mono-slider-tooltip] {\r\n  opacity: 1;\r\n  visibility: visible;\r\n}\r\n@media (hover: hover) {\r\n  [mono-slider]:not([mono-disabled]) [mono-slider-thumb]:hover > [mono-slider-tooltip] {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   EXTENSION — type=\"vertical\": the same parts with the axes swapped, min at the bottom\r\n   ========================================= */\r\n\r\n[mono-slider][mono-type=\"vertical\"] {\r\n  width: auto;\r\n}\r\n\r\n[mono-slider][mono-type=\"vertical\"] > [mono-slider-field] {\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n}\r\n\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-control] {\r\n  flex: none;\r\n  width: var(--_mono-slider-box);\r\n  height: var(--_mono-slider-length, var(--mono-slider-length, 200px));\r\n}\r\n\r\n[mono-slider][mono-type=\"vertical\"][mono-marks-labelled] [mono-slider-control] {\r\n  margin-block-end: 0;\r\n}\r\n\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-track] {\r\n  inset-inline: auto;\r\n  inset-block: 0;\r\n  left: 50%;\r\n  top: 0;\r\n  width: var(--_mono-slider-track-h);\r\n  height: auto;\r\n  margin-top: 0;\r\n  margin-left: calc(var(--_mono-slider-track-h) / -2);\r\n}\r\n\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-piece] {\r\n  --_x0: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--a));\r\n  --_x1: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--b));\r\n  inset-block: auto;\r\n  inset-inline: 0;\r\n  bottom: calc(var(--_x0) + var(--_cs));\r\n  inline-size: auto;\r\n  block-size: max(0px, calc(var(--_x1) - var(--_x0) - var(--_cs) - var(--_ce)));\r\n}\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-piece]:not([mono-cut-start]) { --_x0: 0%; }\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-piece]:not([mono-cut-end]) { --_x1: 100%; }\r\n/* vertical joins: the piece's START is its bottom, its END its top */\r\n[mono-slider][mono-type=\"vertical\"]:not([mono-track-gap]) [mono-slider-piece][mono-cut-start] {\r\n  border-radius: var(--_mono-slider-track-radius);\r\n  border-bottom-left-radius: 0;\r\n  border-bottom-right-radius: 0;\r\n}\r\n[mono-slider][mono-type=\"vertical\"]:not([mono-track-gap]) [mono-slider-piece][mono-cut-end] {\r\n  border-top-left-radius: 0;\r\n  border-top-right-radius: 0;\r\n}\r\n[mono-slider][mono-type=\"vertical\"]:not([mono-track-gap]) [mono-slider-piece][mono-cut-start][mono-cut-end] {\r\n  border-radius: 0;\r\n}\r\n\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-thumb],\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-mark] {\r\n  /* the logical reset goes FIRST: written after `left` it would reset it too */\r\n  inset-inline-start: auto;\r\n  top: auto;\r\n  left: 50%;\r\n  bottom: calc(var(--_mono-slider-along) / 2 + (100% - var(--_mono-slider-along)) * var(--p));\r\n  margin: 0;\r\n}\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-thumb] {\r\n  width: var(--_mono-slider-across);\r\n  height: var(--_mono-slider-along);\r\n  margin-left: calc(var(--_mono-slider-across) / -2);\r\n  margin-bottom: calc(var(--_mono-slider-along) / -2);\r\n}\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-mark] {\r\n  margin-left: calc(var(--_size) / -2);\r\n  margin-bottom: calc(var(--_size) / -2);\r\n}\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-mark-label] {\r\n  top: 50%;\r\n  left: calc(var(--_mono-slider-box) / 2 + var(--mono-slider-mark-label-gap, calc(var(--mono-spacing) * 2)));\r\n  translate: 0 -50%;\r\n}\r\n[mono-slider][mono-type=\"vertical\"] [mono-slider-tooltip] {\r\n  left: auto;\r\n  right: calc(100% + var(--mono-slider-tooltip-offset, calc(var(--mono-spacing) * 2)));\r\n  bottom: 50%;\r\n  translate: 0 50%;\r\n\r\n  &::after {\r\n    top: 50%;\r\n    left: 100%;\r\n    width: 0.25rem;\r\n    height: 0.5rem;\r\n    translate: 0 -50%;\r\n    clip-path: polygon(0 0, 100% 50%, 0 100%);\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   States\r\n   ========================================= */\r\n\r\n/* in-data-[disabled=true]:opacity-50 */\r\n[mono-slider][mono-disabled] > :is([mono-label-row], [mono-slider-field]) {\r\n  opacity: 0.5;\r\n}\r\n[mono-slider][mono-disabled] [mono-slider-control] {\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n[mono-slider][mono-readonly] [mono-slider-control] {\r\n  cursor: default;\r\n}\r\n\r\n[mono-slider][mono-dragging] [mono-slider-control] {\r\n  cursor: grabbing;\r\n}\r\n\r\n/* =========================================\r\n   Message — helper / validation text (mono-input's)\r\n   ========================================= */\r\n\r\n:where([mono-slider]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n:where([mono-slider]) [mono-message] {\r\n  font-size: var(--mono-input-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-input-message-line-height, var(--mono-leading-normal));\r\n  color: var(--_mono-slider-muted);\r\n}\r\n:where([mono-slider]) [mono-message=\"invalid\"] { color: var(--destructive); }\r\n:where([mono-slider]) [mono-message=\"valid\"] { color: var(--success); }\r\n:where([mono-slider]) [mono-message=\"warning\"] { color: var(--warning); }\r\n\r\n[mono-slider][mono-validation-state=\"invalid\"] [mono-label] {\r\n  color: var(--destructive);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-slider]) :is([mono-slider-thumb], [mono-slider-tooltip]) {\r\n    transition: none;\r\n  }\r\n}\r\n";
 
 //#endregion
 //#region src/components/slider/mono-slider.shadow.ts

package/dist/ui/shadow/switch.js

@@ -1,6 +1,6 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
-import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
+import { t as MonoFormControlCore } from "../../form-control-core-BbiACMtL.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";

package/dist/ui/shadow/table.js

@@ -1,17 +1,16 @@
-import { _ as monoPendingActive, a as __decorate, c as defineHybridPropAlias, f as customElement, l as defineHybridPropAliases, m as monoApplyPhantomOptions, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, u as numberStringConverter, v as monoPendingGrace, y as monoPhantomOptions } from "../../hydration-flush-DHrl4_KK.js";
+import { C as monoPendingGrace, S as monoPendingActive, _ as buildSizeStyle, a as __decorate, c as defineHybridPropAlias, f as customElement, g as cssLengthToPx, h as ColumnAutoSize, l as defineHybridPropAliases, m as startMonoSizeAttributes, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, u as numberStringConverter, w as monoPhantomOptions, y as monoApplyPhantomOptions } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { t as isIconifyClass } from "../../icon-BM9N-jOt.js";
 import { n as cssPart } from "../../css-class-B6Tc_MAx.js";
-import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
 import { n as detachEventHandlers, t as applyProps } from "../../element-props-xvw0EB7H.js";
-import { t as input_css_raw_default } from "../../input.css_raw-CQu2fAsU.js";
-import { t as PopupPortalController } from "../../popup-portal-C8ttHDRX.js";
+import { t as input_css_raw_default } from "../../input.css_raw-Br-T8RWv.js";
+import { t as PopupPortalController } from "../../popup-portal-CINuVjNY.js";
 import { C as resolveSearchEntries, S as plainSearchColumns, _ as expandWildcard, b as isWildcardPattern, c as resolveErrorMessages, f as mergeSearchFields, l as setErrorMessages, n as describeError, r as errorStatus, s as normalizeError, t as DEFAULT_ERROR_MESSAGES, x as normalizeSearchExpr } from "../../normalize-error-BmLbgANw.js";
-import { a as seedFromRanges, i as minimize, n as buildDateTree, o as setAllChecked, r as checkState, s as setChecked, t as monoDataGrid } from "../../mono-data-grid-KDpu4d4_.js";
-import { n as captureLightSlots, r as placeLightSlots } from "../../light-slots-4ZCjOcBg.js";
+import { a as seedFromRanges, i as minimize, n as buildDateTree, o as setAllChecked, r as checkState, s as setChecked, t as monoDataGrid } from "../../mono-data-grid-CZFjpnOD.js";
+import { n as captureLightSlots, r as placeLightSlots } from "../../light-slots-_no0r2Z-.js";
 import { t as checkbox_css_raw_default } from "../../checkbox.css_raw-AYtSbUtY.js";
-import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "../../data-source-read-i6CYSUEl.js";
-import { h as monoArraySource } from "../../data-source-options-Cz9fVLK8.js";
+import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "../../data-source-read-DTJ_Mnez.js";
+import { h as monoArraySource } from "../../data-source-options-CS0w0wlO.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -71,13 +70,32 @@ const MonoTableControllerCore = (superClass) => {
 		_subscribe() {
 			this._off?.();
 			detachEventHandlers(this);
+			this._lastStateKey = void 0;
 			this._off = this.dataGrid?.subscribe(() => {
+				if (this._stateUnchanged()) return;
 				this._scheduleApplyProps();
 				this.requestUpdate();
 			});
 			this._scheduleApplyProps();
 		}
 		/**
+		* What this element renders from the CONTROLLER, as a flat list — or `undefined` (the
+		* default) for "re-render on every notify", which is what every element did.
+		*
+		* An element that defines it skips a notify whose key equals the last one. Worth it for the
+		* per-row elements: every `<mono-table-checkbox>` re-rendered on every notify (a load flag, a
+		* summary, another row's tick), N updates for a change that moves one box. Its own props are
+		* unaffected — a Lit property change still updates it the normal way.
+		*/
+		_stateKey() {}
+		_stateUnchanged() {
+			const key = this._stateKey();
+			if (!key) return false;
+			const last = this._lastStateKey;
+			this._lastStateKey = key;
+			return !!last && last.length === key.length && key.every((v, i) => Object.is(v, last[i]));
+		}
+		/**
 		* Drive the apply from `update()` as well as `_subscribe()`.
 		*
 		* `mono-table-paging` and `mono-table-loading` REPLACE `_subscribe` without
@@ -1708,7 +1726,7 @@ const MonoTablePagingCore = (superClass) => {
 			this._off?.();
 			this._off = this.dataGrid?.subscribe(() => {
 				this.requestUpdate();
-				if (this.type === "virtual-scroll") this._recomputeWindow();
+				if (this.type === "virtual-scroll") this._scheduleScroll();
 			});
 		}
 		_scrollActive() {
@@ -1806,8 +1824,11 @@ const MonoTablePagingCore = (superClass) => {
 			const rh = Math.max(1, Number(this.rowHeight) || 44);
 			const over = Math.max(0, Math.floor(Number(this.overscan) || 0));
 			const loaded = grid.loadedCount;
-			let start = Math.floor(el.scrollTop / rh) - over;
-			let end = Math.ceil((el.scrollTop + el.clientHeight) / rh) + over;
+			const first = Math.floor(el.scrollTop / rh);
+			const last = Math.ceil((el.scrollTop + el.clientHeight) / rh);
+			const stride = Math.max(1, over);
+			let start = Math.floor(first / stride) * stride - over;
+			let end = Math.ceil(last / stride) * stride + over;
 			start = Math.max(0, start);
 			end = Math.min(loaded, Math.max(start, end));
 			const padTop = start * rh;
@@ -2247,6 +2268,8 @@ const MonoTableThCore = (superClass) => {
 			this._tree = [];
 			this._expanded = /* @__PURE__ */ new Set();
 			this._exclusiveWarned = false;
+			this._lastLoaded = 0;
+			this._sizeSig = [];
 			this._seededSort = false;
 			this._filterOpen = false;
 			this._values = [];
@@ -2255,7 +2278,11 @@ const MonoTableThCore = (superClass) => {
 			this._valuesError = false;
 			this._search = "";
 			this._fromIcon = false;
-			defineHybridPropAliases(this, ["editableTrigger"]);
+			defineHybridPropAliases(this, [
+				"editableTrigger",
+				"minWidth",
+				"maxWidth"
+			]);
 		}
 		/** The sort config as an object: `true` → `{}`, `false` → `undefined`. */
 		get _sortObj() {
@@ -2267,9 +2294,12 @@ const MonoTableThCore = (superClass) => {
 		connectedCallback() {
 			super.connectedCallback();
 			this._register();
+			if (!isServer) startMonoSizeAttributes();
 		}
 		disconnectedCallback() {
 			this.dataGrid?.unregisterColumn(this);
+			this._autoSize?.stop();
+			this._sizeSig = [];
 			super.disconnectedCallback();
 		}
 		willUpdate(changed) {
@@ -2281,6 +2311,47 @@ const MonoTableThCore = (superClass) => {
 			this.dataGrid.registerColumn(this);
 			this._seedSort();
 		}
+		/**
+		* `width="auto"` → hand the column to the auto-sizer (re-run on every update: each controller
+		* notify lands here). A fixed width → written as before, and an auto-sizer left over from an
+		* earlier `'auto'` is stopped with its px cleared. The bounds go onto the cell either way —
+		* the auto-sizer clamps with them, an auto-layout table honours them.
+		*/
+		_syncWidth(cell) {
+			if (String(this.width ?? "").trim().toLowerCase() === "auto") {
+				const fresh = !this._autoSize;
+				const sizer = this._autoSize ??= new ColumnAutoSize(this);
+				const grid = this.dataGrid;
+				const loaded = grid?.loadedCount ?? 0;
+				if (loaded < this._lastLoaded) sizer.resetFloor();
+				this._lastLoaded = loaded;
+				const sig = [
+					this.minWidth,
+					this.maxWidth,
+					grid?.scrollMode,
+					loaded,
+					this.caption,
+					cell.closest("table")
+				];
+				const moved = sig.length !== this._sizeSig.length || sig.some((v, i) => !Object.is(v, this._sizeSig[i]));
+				if (fresh || moved) {
+					this._sizeSig = sig;
+					sizer.min = cssLengthToPx(this.minWidth ?? null, cell);
+					sizer.max = cssLengthToPx(this.maxWidth ?? null, cell);
+					sizer.growOnly = grid?.scrollMode === "virtual";
+					sizer.schedule();
+				}
+			} else {
+				if (this._autoSize) {
+					this._autoSize.stop(true);
+					this._autoSize = void 0;
+					this._sizeSig = [];
+				}
+				if (this.width != null && this.width !== "") cell.style.width = toCssSize(this.width);
+			}
+			cell.style.minWidth = this.minWidth != null && this.minWidth !== "" ? toCssSize(this.minWidth) : "";
+			cell.style.maxWidth = this.maxWidth != null && this.maxWidth !== "" ? toCssSize(this.maxWidth) : "";
+		}
 		/** Apply `sort.order` once, unless THIS column is already sorted (don't fight a user sort). */
 		_seedSort() {
 			if (this._seededSort) return;
@@ -2297,7 +2368,7 @@ const MonoTableThCore = (superClass) => {
 			const cell = this.closest("th, td");
 			if (cell) {
 				cell.setAttribute("aria-sort", ariaSort(this._current));
-				if (this.width != null && this.width !== "") cell.style.width = toCssSize(this.width);
+				this._syncWidth(cell);
 				if (this.height != null && this.height !== "") cell.style.height = toCssSize(this.height);
 				cell.style.textAlign = this.align ?? "";
 			}
@@ -2686,8 +2757,7 @@ const MonoTableThCore = (superClass) => {
 		* the table body — the checkbox still carries the RAW value, so
 		* `setColumnFilter` keeps matching the real data.
 		*/
-		_display(value) {
-			const map = this.dataGrid?.columnMap?.(this.field);
+		_display(value, map = this.dataGrid?.columnMap?.(this.field)) {
 			if (map) try {
 				const mapped = map(value, { [this.field]: value }, 0);
 				if (mapped != null && mapped !== "") return String(mapped);
@@ -2707,7 +2777,8 @@ const MonoTableThCore = (superClass) => {
 		_filteredValues() {
 			const q = this._search.trim().toLowerCase();
 			if (!q) return this._values;
-			return this._values.filter((v) => this._display(v.value).toLowerCase().includes(q));
+			const map = this.dataGrid?.columnMap?.(this.field);
+			return this._values.filter((v) => this._display(v.value, map).toLowerCase().includes(q));
 		}
 		_toggleValue(key, on) {
 			const next = new Set(this._checked);
@@ -2826,10 +2897,12 @@ const MonoTableThCore = (superClass) => {
       `;
 		}
 		_renderFilterPanel() {
-			const list = this._filteredValues();
+			const open = this._filterOpen;
+			const list = open ? this._filteredValues() : [];
+			const map = open ? this.dataGrid?.columnMap?.(this.field) : void 0;
 			const allChecked = list.length > 0 && list.every((v) => this._checked.has(String(v.value)));
 			const multi = this._filterMulti;
-			const filteredColumns = this.dataGrid?.filteredColumns?.() ?? [];
+			const filteredColumns = open ? this.dataGrid?.filteredColumns?.() ?? [] : [];
 			const otherFiltered = filteredColumns.filter((f) => f !== this.field).length;
 			const clearAllCount = otherFiltered + (filteredColumns.includes(this.field) ? 1 : 0);
 			return html`
@@ -2853,7 +2926,7 @@ const MonoTableThCore = (superClass) => {
                 </div>
               `}
           <div class="mono-th-filter-list" mono-th-filter-list>
-            ${this._valuesLoading ? html`<div class="mono-th-filter-msg" mono-th-filter-msg><span class="mono-th-filter-spin" mono-th-filter-spin></span>Loading…</div>` : this._valuesError ? this._renderMessage("Failed to load values.") : this._hf.date ? this._tree.length === 0 ? this._renderMessage("No values.") : this._renderDateTree() : list.length === 0 ? this._renderMessage("No values.") : html`
+            ${!open ? nothing : this._valuesLoading ? html`<div class="mono-th-filter-msg" mono-th-filter-msg><span class="mono-th-filter-spin" mono-th-filter-spin></span>Loading…</div>` : this._valuesError ? this._renderMessage("Failed to load values.") : this._hf.date ? this._tree.length === 0 ? this._renderMessage("No values.") : this._renderDateTree() : list.length === 0 ? this._renderMessage("No values.") : html`
                       <label class="mono-th-check mono-th-check-all" mono-th-check mono-th-check-all>
                         <input
                           type="checkbox"
@@ -2874,7 +2947,7 @@ const MonoTableThCore = (superClass) => {
                               @change=${(e) => this._toggleValue(key, e.target.checked)}
                             />
                             <span class="mono-th-check-box" mono-th-check-box></span>
-                            <span class="mono-th-check-label" mono-th-check-label>${this._display(v.value)}</span>
+                            <span class="mono-th-check-label" mono-th-check-label>${this._display(v.value, map)}</span>
                             <span class="mono-th-check-count" mono-th-check-count>${v.count}</span>
                           </label>
                         `;
@@ -2937,6 +3010,8 @@ const MonoTableThCore = (superClass) => {
 	__decorate([state()], MonoTableThCoreClass.prototype, "_tree", void 0);
 	__decorate([state()], MonoTableThCoreClass.prototype, "_expanded", void 0);
 	__decorate([property()], MonoTableThCoreClass.prototype, "width", void 0);
+	__decorate([property({ attribute: "min-width" })], MonoTableThCoreClass.prototype, "minWidth", void 0);
+	__decorate([property({ attribute: "max-width" })], MonoTableThCoreClass.prototype, "maxWidth", void 0);
 	__decorate([property({ reflect: true })], MonoTableThCoreClass.prototype, "align", void 0);
 	__decorate([property()], MonoTableThCoreClass.prototype, "height", void 0);
 	__decorate([state()], MonoTableThCoreClass.prototype, "_filterOpen", void 0);
@@ -4600,6 +4675,24 @@ const MonoTableCheckboxCore = (superClass) => {
 			if (this._checked) row?.setAttribute("mono-selected", "");
 			else row?.removeAttribute("mono-selected");
 		}
+		/**
+		* All this box draws from the controller: ticked, mixed (select-all), and the drain's
+		* `pending`. A notify that moves none of them — another row's tick, a load flag, a summary —
+		* no longer re-renders every row's checkbox (see the base's `_stateKey`).
+		*/
+		_stateKey() {
+			return this.type === "all" ? [
+				this.type,
+				this._checked,
+				this._indeterminate,
+				this._pending
+			] : [
+				this.type,
+				this._checked,
+				this._pending,
+				this.item
+			];
+		}
 		/** Whether this box is ticked right now. */
 		get _checked() {
 			const check = this.dataGrid?.check?.();

package/dist/ui/shadow/tabs.js

@@ -1,4 +1,4 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";