@revolist/ui 4.0.2-rc → 4.0.2

package/buttons/svg-button.js

@@ -1,46 +1,46 @@
 import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
 import { SvgIcon as t } from "../icons/icon.js";
-import { controlClassName as n } from "../control-attributes.js";
-import { ButtonControl as r } from "../native-control.js";
-import { n as i } from "../_chunks/control-tooltip-ztgmsG7H.js";
+import { t as n } from "../_chunks/native-control-B_fVA5bL.js";
+import { controlClassName as r } from "../control-attributes.js";
+import { n as i } from "../_chunks/tooltip-D4xkio5G.js";
 //#region src/buttons/svg-button.tsx
-function a({ label: a, variant: o, icon: s, visibleLabel: c, className: l, iconClassName: u, labelClassName: d, children: f, iconContent: p, badge: m, badgeClassName: h = "", class: g, disabled: _, ...v }) {
-	let y = i(a, !0, {
+function a({ label: a, variant: o, icon: s, visibleLabel: c, className: l, iconClassName: u, labelClassName: d, children: f, iconContent: p, badge: m, badgeClassName: h = "", class: g, disabled: _, title: v, ...y }) {
+	let b = i(typeof v == "string" ? v : a, !0, {
 		className: "rv-control-tooltip",
 		placement: "above"
 	});
-	return /* @__PURE__ */ e(r, {
+	return /* @__PURE__ */ e(n, {
 		type: "button",
 		"aria-label": m === void 0 ? a : `${a} ${m}`,
-		...v,
+		...y,
 		disabled: _,
-		...y.triggerProps,
-		"aria-describedby": [v["aria-describedby"], y.id].filter(Boolean).join(" "),
+		...b.triggerProps,
+		"aria-describedby": [y["aria-describedby"], b.id].filter(Boolean).join(" "),
 		onFocus: (e) => {
-			y.triggerProps.onFocus(e), v.onFocus?.(e);
+			b.triggerProps.onFocus(e), y.onFocus?.(e);
 		},
 		onBlur: (e) => {
-			y.triggerProps.onBlur(), v.onBlur?.(e);
+			b.triggerProps.onBlur(), y.onBlur?.(e);
 		},
 		onMouseEnter: (e) => {
-			y.triggerProps.onMouseEnter(e), v.onMouseEnter?.(e);
+			b.triggerProps.onMouseEnter(e), y.onMouseEnter?.(e);
 		},
 		onMouseLeave: (e) => {
-			y.triggerProps.onMouseLeave(), v.onMouseLeave?.(e);
+			b.triggerProps.onMouseLeave(), y.onMouseLeave?.(e);
 		},
 		onPointerDown: (e) => {
-			y.triggerProps.onPointerDown(e), v.onPointerDown?.(e);
+			b.triggerProps.onPointerDown(e), y.onPointerDown?.(e);
 		},
 		onPointerCancel: (e) => {
-			y.triggerProps.onPointerCancel(), v.onPointerCancel?.(e);
+			b.triggerProps.onPointerCancel(), y.onPointerCancel?.(e);
 		},
 		onKeyDown: (e) => {
-			y.triggerProps.onKeyDown(e), v.onKeyDown?.(e);
+			b.triggerProps.onKeyDown(e), y.onKeyDown?.(e);
 		},
 		onClick: (e) => {
-			y.hide(), v.onClick?.(e);
+			b.hide(), y.onClick?.(e);
 		},
-		class: n(l ?? (o ? "" : "rv-btn-ghost"), o && `rv-btn-${o}`, g, "rv-icon-action", !c && "rv-btn-icon"),
+		class: r(l ?? (o ? "" : "rv-btn-ghost"), o && `rv-btn-${o}`, g, "rv-icon-action", !c && "rv-btn-icon"),
 		children: [
 			s ? /* @__PURE__ */ e(t, {
 				svg: s,
@@ -56,7 +56,7 @@ function a({ label: a, variant: o, icon: s, visibleLabel: c, className: l, iconC
 				children: m
 			}),
 			f,
-			y.tooltip
+			b.tooltip
 		]
 	});
 }

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;
 }
 
@@ -292,15 +283,20 @@
   gap: 2px;
   min-width: 0;
 }
-.revo-calendar__caption .rv-control {
+.revo-calendar__caption .dropdown-container {
+  flex: 1 1 0;
   min-width: 0;
-  width: auto;
   max-width: 58%;
+}
+.revo-calendar__caption .rv-select .dropdown-trigger {
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
   min-height: var(--calendar-cell-size);
   height: var(--calendar-cell-size);
   padding-block: 2px;
   padding-inline-start: 4px;
-  font-size: 12px;
+  font-size: var(--rv-control-font-size, 0.875rem);
   background-color: transparent;
   border-color: transparent;
 }
@@ -341,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-CpaUK7w1.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-CpaUK7w1.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-DpP7iQLA.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-Cs4D-3nH.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-BBMFmUNA.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-BBMFmUNA.js";
-import { t } from "../_chunks/color-picker-D90Jg-M8.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 };