@revolist/ui 4.0.1-rc → 4.0.1

package/calendar/year-grid.js

@@ -1,31 +1,31 @@
-import { f as e, l as t, r as n, u as r } from "../_chunks/model-mPO2tG2f.js";
-import { jsx as i } from "preact/jsx-runtime";
+import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
+import { f as t, l as n, r, u as i } from "../_chunks/model-mPO2tG2f.js";
 //#region src/calendar/year-grid.tsx
 function a({ month: a, system: o = "gregory", referenceDate: s, minDate: c, maxDate: l, isMonthDisabled: u, locale: d, ariaLabel: f, onSelect: p, onEscape: m }) {
-	let h = t(a, o);
-	return /* @__PURE__ */ i("div", {
+	let h = n(a, o);
+	return /* @__PURE__ */ e("div", {
 		class: "revo-calendar__year-grid",
 		role: "group",
 		"aria-label": f,
 		onKeyDown: (e) => {
 			e.key === "Escape" && (e.preventDefault(), m());
 		},
-		children: h.map((t) => {
-			let f = n(t, {
+		children: h.map((n) => {
+			let f = r(n, {
 				minDate: c,
 				maxDate: l,
 				isMonthDisabled: u,
 				calendarSystem: o
-			}), m = t === a, h = s ? e(s, o) === t : !1;
-			return /* @__PURE__ */ i("button", {
+			}), m = n === a, h = s ? t(s, o) === n : !1;
+			return /* @__PURE__ */ e("button", {
 				type: "button",
 				class: `revo-calendar__month${m ? " active" : ""}${h ? " current" : ""}`,
-				"data-calendar-month": t,
+				"data-calendar-month": n,
 				"aria-pressed": m ? "true" : "false",
 				disabled: f,
-				onClick: () => p(t),
-				children: r(t, d, { month: "long" }, o)
-			}, t);
+				onClick: () => p(n),
+				children: i(n, d, { month: "long" }, o)
+			}, n);
 		})
 	});
 }

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/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/checkbox/index.d.ts

@@ -3,8 +3,8 @@ export type SharedCheckboxAttributes = Record<string, unknown> & {
     class?: string;
     className?: string;
 };
-type PreactH = typeof import('preact').h;
-type PreactVNode = import('preact').VNode;
+type PreactH = typeof import('../_vendor/preact/src/index').h;
+type PreactVNode = import('../_vendor/preact/src/index').VNode;
 export type CheckboxProps = Omit<SharedCheckboxAttributes, 'onChange'> & {
     checked?: boolean;
     indeterminate?: boolean;

package/checkbox/index.js

@@ -1,25 +1,25 @@
-import { renderControl as e } from "../control-presentation.js";
-import { h as t } from "preact";
+import { c as e } from "../_chunks/preact.module-BBM36DnO.js";
+import { renderControl as t } from "../control-presentation.js";
 //#region src/checkbox/index.ts
 var n = "rv-checkbox";
-function r(t, r = {}) {
+function r(e, r = {}) {
 	let { class: i, className: a, ...o } = r, s = [
 		n,
 		i,
 		a
 	].filter(Boolean).join(" ");
-	return e(t, "input", {
+	return t(e, "input", {
 		...o,
 		class: s,
 		type: "checkbox"
 	});
 }
-function i({ checked: e, indeterminate: n = !1, label: i, description: a, ariaLabel: o, controlClassName: s = "", inputRef: c, onChange: l, ...u }) {
-	let d = r(t, {
+function i({ checked: t, indeterminate: n = !1, label: i, description: a, ariaLabel: o, controlClassName: s = "", inputRef: c, onChange: l, ...u }) {
+	let d = r(e, {
 		...u,
-		checked: e,
+		checked: t,
 		"aria-label": o,
-		"aria-checked": n ? "mixed" : !!e,
+		"aria-checked": n ? "mixed" : !!t,
 		ref: (e) => {
 			e && (e.indeterminate = n), c?.(e);
 		},
@@ -27,7 +27,7 @@ function i({ checked: e, indeterminate: n = !1, label: i, description: a, ariaLa
 			l?.(e.currentTarget.checked, e);
 		}
 	});
-	return i === void 0 && a === void 0 ? d : t("label", { class: `rv-checkbox-control ${s}`.trim() }, [d, t("span", { class: "rv-checkbox-control__copy" }, [i === void 0 ? null : t("span", { class: "rv-checkbox-control__label" }, i), a === void 0 ? null : t("span", { class: "rv-checkbox-control__description" }, a)])]);
+	return i === void 0 && a === void 0 ? d : e("label", { class: `rv-checkbox-control ${s}`.trim() }, [d, e("span", { class: "rv-checkbox-control__copy" }, [i === void 0 ? null : e("span", { class: "rv-checkbox-control__label" }, i), a === void 0 ? null : e("span", { class: "rv-checkbox-control__description" }, a)])]);
 }
 //#endregion
 export { i as Checkbox, n as SHARED_CHECKBOX_CLASS, r as renderCheckbox };

package/choice-chips/index.d.ts

@@ -1,4 +1,4 @@
-import { h, ComponentChildren, JSX } from 'preact';
+import { h, ComponentChildren, JSX } from '../_vendor/preact/src/index';
 export type ChoiceChipValue = string | number;
 export type ChoiceChipOption<T extends ChoiceChipValue = ChoiceChipValue> = {
     value: T;
@@ -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-0HfOnK_4.js";
+export { t as ChoiceChip, n as ChoiceChipInfoButton, r as ChoiceChips } from "../_chunks/choice-chips-yr6Uzmof.js";

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

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h } from '../_vendor/preact/src/index';
 import { ColorPaletteOption, ColorPaletteValue } from './palette';
 export * from './palette';
 export interface ColorPaletteProps {

package/color-palette/color-palette.js

@@ -1,3 +1,3 @@
-import { t as e } from "../_chunks/color-palette-BmZ7kH9R.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.d.ts

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h } from '../_vendor/preact/src/index';
 export declare function ColorPicker({ label, value, defaultLabel, customLabel, customHexLabel, invalidColor, colorLabels, optional, allowHexInput, disabled, onChange, }: {
     readonly label: string;
     readonly value?: string;

package/color-palette/color-picker.js

@@ -1,3 +1,3 @@
-import { n as e } from "../_chunks/color-palette-BmZ7kH9R.js";
-import { t } from "../_chunks/color-picker-BRv-__AM.js";
+import { n as e } from "../_chunks/color-palette-DMJUChWC.js";
+import { t } from "../_chunks/color-picker-CMWxQlWt.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;
+};