@revolist/ui 4.0.3-rc → 4.0.3

package/calendar/_calendar.scss

@@ -33,7 +33,8 @@
   font: inherit;
   cursor: pointer;
   transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease-out),
     color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
     opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out);
 }
@@ -114,11 +115,11 @@
 }
 
 .revo-calendar__month.active {
-  background: var(
-    --revo-grid-filter-active-badge-bg,
-    var(--rv-ui-selected-bg)
+  background: var(--revo-grid-filter-active-badge-bg, var(--rv-ui-selected-bg));
+  color: var(
+    --rv-filter-active-icon-color,
+    var(--rv-ui-selected-accent-fg, var(--rv-ui-accent-text))
   );
-  color: var(--rv-filter-active-icon-color, var(--rv-ui-selected-accent-fg, var(--rv-ui-accent-text)));
   font-weight: 500;
 }
 
@@ -142,10 +143,7 @@
 
 .revo-calendar__weekdays span {
   min-height: 18px;
-  color: var(
-    --revo-grid-filter-popup-label-color,
-    var(--rv-ui-text-muted)
-  );
+  color: var(--revo-grid-filter-popup-label-color, var(--rv-ui-text-muted));
   font-size: 11px;
   font-weight: 500;
   line-height: 18px;
@@ -163,10 +161,7 @@
 }
 
 .revo-calendar__day.outside {
-  color: var(
-    --revo-grid-filter-popup-label-color,
-    var(--rv-ui-text-muted)
-  );
+  color: var(--revo-grid-filter-popup-label-color, var(--rv-ui-text-muted));
   opacity: 1;
 }
 
@@ -181,10 +176,7 @@
 }
 
 .revo-calendar__day.in-range {
-  background: var(
-    --revo-grid-filter-active-badge-bg,
-    var(--rv-ui-selected-bg)
-  );
+  background: var(--revo-grid-filter-active-badge-bg, var(--rv-ui-selected-bg));
 }
 
 .revo-calendar__day.in-preview:not(.in-range) {
@@ -248,8 +240,7 @@
 .revo-calendar__month:focus-visible,
 .revo-calendar__today:focus-visible {
   z-index: 1;
-  outline: 2px solid
-    var(--rv-filter-active-icon-color, var(--rv-ui-accent));
+  outline: 2px solid var(--rv-filter-active-icon-color, var(--rv-ui-accent));
   outline-offset: 1px;
 }
 
@@ -299,8 +290,8 @@
 }
 .revo-calendar__caption .rv-select .dropdown-trigger {
   min-width: 0;
-  width: auto;
-  max-width: 58%;
+  width: 100%;
+  max-width: 100%;
   min-height: var(--calendar-cell-size);
   height: var(--calendar-cell-size);
   padding-block: 2px;
@@ -346,21 +337,26 @@
   color: var(--rv-ui-danger);
   // Keep disabled dates from punching faded holes through the preview band.
   opacity: 1;
-  &.disabled { text-decoration: line-through; }
+  &.disabled {
+    text-decoration: line-through;
+  }
   // A connected band: shared horizontal edges, caps only at the real endpoints.
   box-shadow: none;
   border-radius: 0;
-  border-block: 1px solid color-mix(in srgb, var(--rv-ui-danger) 32%, transparent);
+  border-block: 1px solid
+    color-mix(in srgb, var(--rv-ui-danger) 32%, transparent);
   border-inline: 0;
   &.preview-start {
     border-start-start-radius: 7px;
     border-end-start-radius: 7px;
-    border-inline-start: 1px solid color-mix(in srgb, var(--rv-ui-danger) 32%, transparent);
+    border-inline-start: 1px solid
+      color-mix(in srgb, var(--rv-ui-danger) 32%, transparent);
   }
   &.preview-end {
     border-start-end-radius: 7px;
     border-end-end-radius: 7px;
-    border-inline-end: 1px solid color-mix(in srgb, var(--rv-ui-danger) 32%, transparent);
+    border-inline-end: 1px solid
+      color-mix(in srgb, var(--rv-ui-danger) 32%, transparent);
   }
 }
 .revo-calendar__feedback {

package/calendar/calendar.js

@@ -1 +1 @@
-export { t as Calendar } from "../_chunks/calendar-xpZ0v3xf.js";
+export { t as Calendar } from "../_chunks/calendar-CgXQgkga.js";

package/calendar/header.js

@@ -1,6 +1,5 @@
 import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { t } from "../_chunks/chevron-left-D0nc4Z5S.js";
-import { t as n } from "../_chunks/chevron-right-sxHQMSkq.js";
+import { n as t, t as n } from "../_chunks/chevron-right-CM3ljziP.js";
 //#region src/calendar/header.tsx
 function r({ label: r, previousLabel: i, nextLabel: a, labelAction: o, caption: s, showLabel: c = !0, showPrevious: l = !0, showNext: u = !0, previousDisabled: d = !1, nextDisabled: f = !1, onPrevious: p, onNext: m }) {
 	return /* @__PURE__ */ e("header", {

package/calendar/index.js

@@ -1,9 +1,9 @@
 import { DEFAULT_CALENDAR_TRANSLATIONS as e } from "./translations.js";
 import { a as t, i as n, n as r, o as i, r as a, t as o } from "../_chunks/model-mPO2tG2f.js";
 import { CalendarHeader as s, CalendarWeekdays as c } from "./header.js";
-import { t as l } from "../_chunks/calendar-xpZ0v3xf.js";
+import { t as l } from "../_chunks/calendar-CgXQgkga.js";
 import { CalendarDay as u } from "./day.js";
 import { CalendarMonthGrid as d } from "./month-grid.js";
 import { CalendarYearGrid as f } from "./year-grid.js";
-import { t as p } from "../_chunks/picker-h1P5RUgp.js";
+import { t as p } from "../_chunks/picker-DTqET-2W.js";
 export { l as Calendar, u as CalendarDay, s as CalendarHeader, d as CalendarMonthGrid, p as CalendarPicker, c as CalendarWeekdays, f as CalendarYearGrid, e as DEFAULT_CALENDAR_TRANSLATIONS, o as createCalendarMonth, r as isCalendarDateDisabled, a as isCalendarMonthDisabled, n as isDateInCalendarRange, t as moveCalendarFocus, i as orderCalendarRange };

package/cell-input.scss

@@ -1,3 +1,5 @@
+@use './styles/cell-editor-frame' as frame;
+
 input.rv-cell-input {
   box-sizing: border-box;
   width: 100%;
@@ -6,14 +8,8 @@ input.rv-cell-input {
   min-height: 0;
   margin: 0;
   padding: 0 8px;
-  border: 0;
-  border-radius: 0;
   background: var(--rg-theme-background, var(--rv-ui-surface, #fff));
   color: inherit;
   font: inherit;
-  outline: 2px solid var(--rv-ui-accent, #2563eb);
-  outline-offset: -2px;
-  &[aria-invalid='true'] {
-    outline-color: var(--rv-ui-danger, #dc2626);
-  }
+  @include frame.cell-editor-frame;
 }

package/cell-visuals/badge.style.scss

@@ -28,9 +28,12 @@
   text-align: center;
   white-space: nowrap;
   transition:
-    background-color var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)),
-    color var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)),
-    opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+    background-color var(--rv-ui-motion-normal, 160ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    color var(--rv-ui-motion-normal, 160ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    opacity var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
   line-height: 14px;
   &.rectangular {
     border-radius: 6px;

package/cell-visuals/bar-chart.style.scss

@@ -24,7 +24,8 @@
       ); /* Green color for bars */
       @include thresholds;
       margin-right: 1px; /* Space between bars */
-      transition: background-color var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+      transition: background-color var(--rv-ui-motion-normal, 160ms)
+        var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 
       &:hover {
         position: relative;

package/cell-visuals/column-type.style.css

@@ -3,6 +3,18 @@
   flex-direction: row;
   align-items: center;
   gap: 5px;
+  min-width: 0;
+}
+
+.column-icon {
+  flex: 0 0 auto;
+}
+
+.column-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .column-icon svg {

package/cell-visuals/progress-line-value.renderer.style.scss

@@ -34,7 +34,8 @@
     bottom: 0;
     z-index: 1;
     background-color: var(--threshold-color, #008620);
-    transition: background-color var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+    transition: background-color var(--rv-ui-motion-normal, 160ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
   }
 
   .progress-line-bar-shadow {
@@ -45,6 +46,7 @@
     z-index: 0;
     background-color: var(--threshold-color, #008620);
     opacity: 0.1;
-    transition: background-color var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+    transition: background-color var(--rv-ui-motion-normal, 160ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
   }
 }

package/cell-visuals/progress-line.style.scss

@@ -11,10 +11,7 @@
     width: 100%;
     height: 100%;
     --rv-progress-bar-height: 8px;
-    --rv-progress-bar-track: var(
-      --progress-bg-color,
-      var(--rv-ui-border)
-    );
+    --rv-progress-bar-track: var(--progress-bg-color, var(--rv-ui-border));
 
     /* The progress bar itself */
     .progress-line-bar {

package/cell-visuals/sparkline.style.scss

@@ -31,5 +31,6 @@
   stroke-width: 2;
   vector-effect: non-scaling-stroke;
   fill: none;
-  transition: stroke var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition: stroke var(--rv-ui-motion-normal, 160ms)
+    var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }

package/cell-visuals/timeline.style.css

@@ -47,8 +47,10 @@
   box-shadow: none;
   transform: translateY(-50%);
   transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)),
-    border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    border-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .rv-timeline-event-bar:hover {

package/checkbox/checkbox.scss

@@ -1,27 +1,6 @@
 @use '../styles/motion';
 @use './layout';
-/**
- * Shared native checkbox primitive.
- *
- * Legacy ColumnDialog and RowSelectPlugin variables remain supported as
- * fallbacks so existing customizations keep working after consumers move to
- * rv-checkbox.
- */
-revo-grid {
-  --rv-ui-checkbox-bg: var(--revo-row-select-checkbox-bg, var(--rv-ui-surface));
-  --rv-ui-checkbox-border: var(--rv-column-dialog-check-border, var(--revo-row-select-checkbox-border, var(--rv-ui-border-strong)));
-  --rv-ui-checkbox-checked: var(--rv-column-dialog-check-bg, var(--revo-row-select-checkbox-checked, var(--rv-ui-accent)));
-  --rv-ui-checkbox-check: var(--revo-row-select-checkbox-check, var(--rv-ui-accent-fg));
-  --rv-ui-checkbox-focus: var(--revo-row-select-checkbox-focus, var(--rv-ui-focus-ring));
-
-  &[theme^='dark'] {
-    --rv-ui-checkbox-bg: var(--revo-row-select-checkbox-bg, var(--rv-ui-surface-sunken));
-    --rv-ui-checkbox-border: var(--rv-column-dialog-check-border, var(--revo-row-select-checkbox-border, var(--rv-ui-border-strong)));
-    --rv-ui-checkbox-checked: var(--rv-column-dialog-check-bg, var(--revo-row-select-checkbox-checked, var(--rv-ui-accent)));
-    --rv-ui-checkbox-focus: var(--revo-row-select-checkbox-focus, var(--rv-ui-focus-ring));
-  }
-}
-
+/** Shared native checkbox primitive. */
 .rv-checkbox {
   appearance: none;
   -webkit-appearance: none;
@@ -39,7 +18,8 @@ revo-grid {
   vertical-align: middle;
   width: 17px;
   transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease),
     border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),
     opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
 
@@ -92,7 +72,9 @@ revo-grid {
   min-width: 0;
 }
 
-.rv-checkbox-control__label { line-height: 1.25; }
+.rv-checkbox-control__label {
+  line-height: 1.25;
+}
 .rv-checkbox-control__description {
   color: var(--rv-ui-text-muted);
   font-size: 0.85em;

package/choice-chips/index.d.ts

@@ -20,6 +20,8 @@ export type ChoiceChipsProps<T extends ChoiceChipValue = ChoiceChipValue> = {
     onChange: (value: T, option: ChoiceChipOption<T>) => void;
     ariaLabel: string;
     appearance?: 'soft' | 'outlined';
+    /** Keep choices on one scrollable row, with hidden scrollbars and soft edge fades. */
+    scrollable?: boolean;
     size?: 'small' | 'medium';
     className?: string;
     itemClassName?: string;
@@ -27,7 +29,7 @@ export type ChoiceChipsProps<T extends ChoiceChipValue = ChoiceChipValue> = {
     testId?: string;
 };
 /** Shared wrapping choice control for compact presets and granularities. */
-export declare function ChoiceChips<T extends ChoiceChipValue = ChoiceChipValue>({ value, options, onChange, ariaLabel, appearance, size, className, itemClassName, disabled, testId, }: ChoiceChipsProps<T>): any;
+export declare function ChoiceChips<T extends ChoiceChipValue = ChoiceChipValue>({ value, options, onChange, ariaLabel, appearance, scrollable, size, className, itemClassName, disabled, testId, }: ChoiceChipsProps<T>): any;
 export declare function ChoiceChipInfoButton({ 'data-tooltip': details, title, ref: forwardedRef, ...props }: JSX.IntrinsicElements['button'] & {
     'data-tooltip'?: string;
 }): h.JSX.Element;

package/choice-chips/index.js

@@ -1 +1 @@
-export { t as ChoiceChip, n as ChoiceChipInfoButton, r as ChoiceChips } from "../_chunks/choice-chips-CHQTUdLs.js";
+export { t as ChoiceChip, n as ChoiceChipInfoButton, r as ChoiceChips } from "../_chunks/choice-chips-SkllS5Kl.js";

package/color-palette/color-palette.js

@@ -1,3 +1,3 @@
-import { t as e } from "../_chunks/color-palette-D8vyPfld.js";
+import { t as e } from "../_chunks/color-palette-DMJUChWC.js";
 import { DEFAULT_COLOR_PALETTE_OPTIONS as t } from "./palette.js";
 export { e as ColorPalette, t as DEFAULT_COLOR_PALETTE_OPTIONS };

package/color-palette/color-palette.style.scss

@@ -113,15 +113,21 @@
   gap: 0;
 }
 
-revo-grid .rv-context-menu .rv-color-palette-menu__swatch-item[aria-checked='true'] {
+revo-grid
+  .rv-context-menu
+  .rv-color-palette-menu__swatch-item[aria-checked='true'] {
   min-height: 32px;
   margin: 0;
   padding: 2px;
   background: transparent;
 }
 
-revo-grid .rv-context-menu .rv-color-palette-menu__swatch-item[aria-checked='true']:hover,
-revo-grid .rv-context-menu .rv-color-palette-menu__swatch-item[aria-checked='true']:focus-visible {
+revo-grid
+  .rv-context-menu
+  .rv-color-palette-menu__swatch-item[aria-checked='true']:hover,
+revo-grid
+  .rv-context-menu
+  .rv-color-palette-menu__swatch-item[aria-checked='true']:focus-visible {
   background: var(--rv-context-menu-hover-bg-color, #eef1f5);
 }
 
@@ -209,9 +215,13 @@ revo-grid .rv-context-menu .rv-color-palette-menu__swatch-item[aria-checked='tru
   grid-template-columns: repeat(5, 28px);
   gap: 12px 18px;
 }
-.rv-color-palette__swatches { display: contents; }
+.rv-color-palette__swatches {
+  display: contents;
+}
 .rv-color-palette__swatch,
-.rv-color-palette-menu__swatch { border-radius: 8px; }
+.rv-color-palette-menu__swatch {
+  border-radius: 8px;
+}
 .rv-color-palette__swatch[aria-checked='true'] {
   border-color: var(--rv-color-palette-surface);
   outline: 2px solid var(--rv-color-palette-accent);
@@ -222,46 +232,99 @@ revo-grid .rv-context-menu .rv-color-palette-menu__swatch-item[aria-checked='tru
 }
 .rv-color-palette__default {
   position: relative;
-  width: 28px; height: 28px; min-height: 28px;
-  padding: 0; border-radius: 8px;
+  width: 28px;
+  height: 28px;
+  min-height: 28px;
+  padding: 0;
+  border-radius: 8px;
   background: var(--rv-color-palette-surface);
   &::before {
-    content: ''; position: absolute; inset: 3px;
-    background: linear-gradient(45deg, transparent calc(50% - 1px), var(--rv-color-palette-border) 50%, transparent calc(50% + 1px));
+    content: '';
+    position: absolute;
+    inset: 3px;
+    background: linear-gradient(
+      45deg,
+      transparent calc(50% - 1px),
+      var(--rv-color-palette-border) 50%,
+      transparent calc(50% + 1px)
+    );
   }
-  &[aria-checked='true'] { outline: 2px solid var(--rv-color-palette-accent); outline-offset: 2px; }
+  &[aria-checked='true'] {
+    outline: 2px solid var(--rv-color-palette-accent);
+    outline-offset: 2px;
+  }
+}
+.rv-color-palette__default-check {
+  display: none;
 }
-.rv-color-palette__default-check { display: none; }
 .rv-color-palette__default-label {
-  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 @media (max-width: 520px) {
-  .rv-color-palette { grid-template-columns: repeat(5, 32px); }
-  .rv-color-palette__default { width: 32px; height: 32px; min-height: 32px; }
+  .rv-color-palette {
+    grid-template-columns: repeat(5, 32px);
+  }
+  .rv-color-palette__default {
+    width: 32px;
+    height: 32px;
+    min-height: 32px;
+  }
 }
 
 .rv-color-palette-menu[aria-expanded='true'] > .rv-context-menu__submenu {
-  grid-template-columns: repeat(5, 32px); gap: 10px 14px; width: 240px;
+  grid-template-columns: repeat(5, 32px);
+  gap: 10px 14px;
+  width: 242px;
 }
 .rv-color-palette-menu__default-item {
-  grid-column: auto; width: 32px; min-width: 32px; min-height: 32px;
-  margin: 0; padding: 2px !important; background: transparent;
+  grid-column: auto;
+  width: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  margin: 0;
+  padding: 2px !important;
+  background: transparent;
 }
 .rv-color-palette-menu__default-content {
-  position: relative; width: 28px; height: 28px; border: 1px solid var(--rv-ui-border);
-  border-radius: 8px; box-sizing: border-box;
-  &::before { content: ''; position: absolute; inset: 3px; background: linear-gradient(45deg, transparent calc(50% - 1px), var(--rv-ui-border) 50%, transparent calc(50% + 1px)); }
-  > span { display: none; }
+  position: relative;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--rv-ui-border);
+  border-radius: 8px;
+  box-sizing: border-box;
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 3px;
+    background: linear-gradient(
+      45deg,
+      transparent calc(50% - 1px),
+      var(--rv-ui-border) 50%,
+      transparent calc(50% + 1px)
+    );
+  }
+  > span {
+    display: none;
+  }
 }
-.rv-color-palette-menu__default-item[aria-checked='true'] .rv-color-palette-menu__default-content {
-  outline: 2px solid var(--rv-ui-accent); outline-offset: 2px;
+.rv-color-palette-menu__default-item[aria-checked='true']
+  .rv-color-palette-menu__default-content {
+  outline: 2px solid var(--rv-ui-accent);
+  outline-offset: 2px;
 }
 
 // Swatch fills and checked outlines remain exact; soften only hover borders/disabled state.
 .rv-color-palette__swatch,
 .rv-color-palette__default {
   transition:
-    border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
+    border-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease-out),
     opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out);
 }

package/color-palette/color-picker.js

@@ -1,3 +1,3 @@
-import { n as e } from "../_chunks/color-palette-D8vyPfld.js";
-import { t } from "../_chunks/color-picker-CudqPYZo.js";
+import { n as e } from "../_chunks/color-palette-DMJUChWC.js";
+import { t } from "../_chunks/color-picker-BpCTuIdm.js";
 export { t as ColorPicker, e as normalizeHexColor };

package/color-palette/color-picker.style.scss

@@ -58,8 +58,11 @@
   height: 14px;
 }
 
-.rv-format-color-picker__trigger-swatch--empty .rv-format-color-picker__empty-icon,
-.rv-format-color-picker__trigger-swatch--empty .rv-format-color-picker__empty-icon svg {
+.rv-format-color-picker__trigger-swatch--empty
+  .rv-format-color-picker__empty-icon,
+.rv-format-color-picker__trigger-swatch--empty
+  .rv-format-color-picker__empty-icon
+  svg {
   display: inline-flex;
 }
 
@@ -86,14 +89,18 @@
   max-height: calc(100dvh - 24px);
   margin: 6px 0 0;
   padding: 12px;
-  border: 1px solid var(--rv-format-divider, var(--rv-dialog-border, var(--rv-ui-border)));
+  border: 1px solid
+    var(--rv-format-divider, var(--rv-dialog-border, var(--rv-ui-border)));
   border-radius: 10px;
   background: var(--rv-dialog-bg, var(--rv-ui-surface-elevated));
   color: var(--rv-dialog-color, var(--rv-ui-text));
   box-shadow: 0 16px 36px var(--rv-ui-shadow);
   overflow: auto;
   scrollbar-gutter: stable;
-  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  position-try-fallbacks:
+    flip-block,
+    flip-inline,
+    flip-block flip-inline;
 }
 
 .rv-format-color-picker__custom-action {
@@ -106,7 +113,8 @@
   margin: 12px -12px -12px;
   padding: 9px 12px;
   border: 0;
-  border-top: 1px solid var(--rv-format-divider, var(--rv-dialog-border, var(--rv-ui-border)));
+  border-top: 1px solid
+    var(--rv-format-divider, var(--rv-dialog-border, var(--rv-ui-border)));
   border-radius: 0 0 10px 10px;
   background: transparent;
   color: var(--rv-ui-accent-text, var(--rv-ui-accent));
@@ -166,26 +174,31 @@
 .rv-format-color-picker__custom-action:disabled,
 .rv-format-color-picker__native:disabled {
   cursor: default;
-  opacity: .55;
+  opacity: 0.55;
 }
 
 .rv-format-color-picker__custom-controls[data-selection-only] {
   grid-template-columns: minmax(0, 1fr);
 }
 
-.rv-format-color-picker__custom-controls[data-selection-only] .rv-format-color-picker__native {
+.rv-format-color-picker__custom-controls[data-selection-only]
+  .rv-format-color-picker__native {
   width: 100%;
 }
 
 @media (max-width: 520px) {
-  .rv-format-color-picker__popover { min-width: 258px; }
+  .rv-format-color-picker__popover {
+    min-width: 258px;
+  }
 }
 
 .rv-format-color-picker__trigger,
 .rv-format-color-picker__custom-action {
   transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
-    border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease-out),
+    border-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease-out),
     opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out);
 }
 

package/color-palette/common-palettes.d.ts

@@ -737,5 +737,5 @@ export declare const commonPalettes: readonly [{
     readonly colors: {
         [k: string]: "linear-gradient(135deg, #7dd3fc, #2563eb)" | "linear-gradient(135deg, #facc15, #b45309)" | "linear-gradient(135deg, #f9a8d4, #be185d)" | "linear-gradient(135deg, #a5b4fc, #4f46e5)" | "linear-gradient(135deg, #86efac, #15803d)" | "linear-gradient(135deg, #fda4af, #be123c)" | "linear-gradient(135deg, #c4b5fd, #7c3aed)" | "linear-gradient(135deg, #fdba74, #c2410c)";
     };
-    readonly consumers: readonly ["packages/ui/src/avatar/index.view.tsx", "packages/ui/src/avatar/avatar.style.scss"];
+    readonly consumers: readonly ["packages/ui/src/avatar/index.tsx", "packages/ui/src/avatar/avatar.style.scss"];
 }];

package/color-palette/common-palettes.js

@@ -380,7 +380,7 @@ var e = {
 	title: "Avatar backgrounds",
 	usage: "Indexed avatar gradients shared by runtime background helpers and avatar styles.",
 	colors: Object.fromEntries(t.map((e, t) => [String(t), e])),
-	consumers: ["packages/ui/src/avatar/index.view.tsx", "packages/ui/src/avatar/avatar.style.scss"]
+	consumers: ["packages/ui/src/avatar/index.tsx", "packages/ui/src/avatar/avatar.style.scss"]
 }];
 //#endregion
 export { t as AVATAR_CELL_BACKGROUNDS, e as commonColors, n as commonPalettes };

package/color-palette/native.d.ts

@@ -1,2 +1,15 @@
-/** Compatibility entry; markup is owned by the Preact TSX implementation. */
-export * from './native.view';
+export interface NativeColorPickerProps {
+    label: string;
+    value?: string;
+    disabled?: boolean;
+    optional?: boolean;
+    defaultLabel: string;
+    customLabel: string;
+    invalidColor?: string;
+    colorLabels: Readonly<Record<string, string>>;
+    onChange(value: string | undefined): void;
+}
+/** Native mount API; palette markup and interaction belong to ColorPicker. */
+export declare function mountColorPicker(host: HTMLElement, props: NativeColorPickerProps): {
+    destroy(): void;
+};