@revolist/ui 4.0.2-rc → 4.0.2

package/styles/_theme.scss

@@ -8,121 +8,165 @@
   --rv-ui-shadow: color-mix(in srgb, black 10%, transparent);
   --rv-ui-disabled-bg: var(--rv-ui-surface-sunken);
   --rv-ui-disabled-fg: var(--rv-ui-text-muted);
-  --rv-ui-danger-surface: color-mix(in srgb, var(--rv-ui-danger) 10%, var(--rv-ui-surface));
-  --rv-ui-warning-surface: color-mix(in srgb, var(--rv-ui-warning) 10%, var(--rv-ui-surface));
-  --rv-ui-success-surface: color-mix(in srgb, var(--rv-ui-success) 10%, var(--rv-ui-surface));
+  --rv-ui-danger-surface: color-mix(
+    in srgb,
+    var(--rv-ui-danger) 10%,
+    var(--rv-ui-surface)
+  );
+  --rv-ui-warning-surface: color-mix(
+    in srgb,
+    var(--rv-ui-warning) 10%,
+    var(--rv-ui-surface)
+  );
+  --rv-ui-success-surface: color-mix(
+    in srgb,
+    var(--rv-ui-success) 10%,
+    var(--rv-ui-surface)
+  );
   --rv-ui-field-muted: var(--rv-ui-text-muted);
-  --rv-ui-field-accent-text: color-mix(in srgb, var(--rv-ui-accent, #{palette.$blue-600}) 90%, black);
+  --rv-ui-field-accent-text: color-mix(
+    in srgb,
+    var(--rv-ui-accent, #{palette.$blue-600}) 90%,
+    black
+  );
   --rv-ui-field-surface: #{palette.$gray-f6f6f6};
   --rv-ui-field-text: var(--rv-ui-text);
   /* Typography */
   --rv-ui-font-weight-medium: #{variables.$rv-font-weight-medium};
 
   /* Semantic surfaces and content */
-  --rv-ui-canvas:              #{palette.$neutral-100};
-  --rv-ui-surface:             #{palette.$white};
-  --rv-ui-surface-elevated:    #{palette.$white};
-  --rv-ui-surface-sunken:      #{palette.$gray-f8f8f8};
-  --rv-ui-surface-hover:       #{palette.$gray-f1f1f1};
-  --rv-ui-border:              #{palette.$neutral-200};
-  --rv-ui-border-strong:       #{palette.$neutral-300};
-  --rv-ui-text:                #{palette.$neutral-900};
-  --rv-ui-text-muted:          #{palette.$neutral-600};
-  --rv-ui-text-subtle:         #{palette.$neutral-500};
-  --rv-ui-selected-bg:         color-mix(in srgb, var(--rv-ui-accent) 12%, var(--rv-ui-surface));
+  --rv-ui-canvas: #{palette.$neutral-100};
+  --rv-ui-surface: #{palette.$white};
+  --rv-ui-surface-elevated: #{palette.$white};
+  --rv-ui-surface-sunken: #{palette.$gray-f8f8f8};
+  --rv-ui-surface-hover: #{palette.$gray-f1f1f1};
+  --rv-ui-border: #{palette.$neutral-200};
+  --rv-ui-border-strong: #{palette.$neutral-300};
+  --rv-ui-text: #{palette.$neutral-900};
+  --rv-ui-text-muted: #{palette.$neutral-600};
+  --rv-ui-text-subtle: #{palette.$neutral-500};
+  --rv-ui-selected-bg: color-mix(
+    in srgb,
+    var(--rv-ui-accent) 12%,
+    var(--rv-ui-surface)
+  );
   --rv-dropdown-container-tag-background: #{palette.$gray-eeeeee};
   --rv-dropdown-placeholder-color: var(--rv-ui-text-muted);
-  --rv-ui-selected-fg:         #{palette.$neutral-900};
-  --rv-ui-selected-accent-fg:  color-mix(in srgb, var(--rv-ui-accent) 65%, black);
+  --rv-ui-selected-fg: #{palette.$neutral-900};
+  --rv-ui-selected-accent-fg: color-mix(
+    in srgb,
+    var(--rv-ui-accent) 65%,
+    black
+  );
 
   --rv-ui-danger: #{palette.$red-700};
   --rv-ui-warning: #{palette.$amber-700};
   --rv-ui-success: #{palette.$green-700};
 
   /* Accent (primary / switch on) */
-  --rv-ui-accent:             #{palette.$blue-600};
-  --rv-ui-accent-hover:       #{palette.$blue-700};
-  --rv-ui-accent-fg:          #{palette.$white};
+  --rv-ui-accent: #{palette.$blue-600};
+  --rv-ui-accent-hover: #{palette.$blue-700};
+  --rv-ui-accent-fg: #{palette.$white};
   --rv-ui-accent-text-weight: 90%;
-  --rv-ui-accent-text-base:   black;
+  --rv-ui-accent-text-base: black;
   --rv-ui-accent-text: color-mix(in srgb, var(--rv-ui-accent) 90%, black);
 
   /* Outline button (default) */
-  --rv-ui-btn-outline-bg:     transparent;
-  --rv-ui-btn-outline-bg-hover:var(--rv-ui-surface-hover);
-  --rv-ui-btn-outline-fg:     var(--rv-ui-text);
+  --rv-ui-btn-outline-bg: transparent;
+  --rv-ui-btn-outline-bg-hover: var(--rv-ui-surface-hover);
+  --rv-ui-btn-outline-fg: var(--rv-ui-text);
   --rv-ui-btn-outline-border: var(--rv-ui-border);
-  --rv-ui-btn-outline-border-hover:var(--rv-ui-border-strong);
+  --rv-ui-btn-outline-border-hover: var(--rv-ui-border-strong);
 
   /* Filled neutral button */
-  --rv-ui-btn-bg:             #{palette.$neutral-800};
-  --rv-ui-btn-bg-hover:       #{palette.$neutral-700};
-  --rv-ui-btn-fg:             #{palette.$white};
+  --rv-ui-btn-bg: #{palette.$neutral-800};
+  --rv-ui-btn-bg-hover: #{palette.$neutral-700};
+  --rv-ui-btn-fg: #{palette.$white};
 
   /* Secondary button */
-  --rv-ui-btn-secondary-bg:       var(--rv-ui-border);
+  --rv-ui-btn-secondary-bg: var(--rv-ui-border);
   --rv-ui-btn-secondary-bg-hover: var(--rv-ui-border-strong);
-  --rv-ui-btn-secondary-fg:       var(--rv-ui-text);
+  --rv-ui-btn-secondary-fg: var(--rv-ui-text);
 
   /* Danger button */
-  --rv-ui-btn-danger-bg:          transparent;
-  --rv-ui-btn-danger-bg-hover:    #{palette.$red-overlay-8};
-  --rv-ui-btn-danger-fg:          var(--rv-ui-danger);
-  --rv-ui-btn-danger-outline:     #{palette.$gray-dc2626};
-  --rv-ui-btn-danger-outline-hover:#{palette.$red-overlay-8};
+  --rv-ui-btn-danger-bg: transparent;
+  --rv-ui-btn-danger-bg-hover: #{palette.$red-overlay-8};
+  --rv-ui-btn-danger-fg: var(--rv-ui-danger);
+  --rv-ui-btn-danger-outline: #{palette.$gray-dc2626};
+  --rv-ui-btn-danger-outline-hover: #{palette.$red-overlay-8};
 
   /* Ghost hover overlay */
-  --rv-ui-btn-ghost-hover-bg:     #{palette.$black-overlay-6};
-  --rv-ui-btn-ghost-active-bg:    #{palette.$black-overlay-10};
+  --rv-ui-btn-ghost-hover-bg: #{palette.$black-overlay-6};
+  --rv-ui-btn-ghost-active-bg: #{palette.$black-overlay-10};
 
   /* Toggle switch */
-  --rv-ui-switch-track-off:   #{palette.$gray-9ca3af};
-  --rv-ui-switch-thumb:       #{palette.$white};
+  --rv-ui-switch-track-off: #{palette.$gray-9ca3af};
+  --rv-ui-switch-thumb: #{palette.$white};
 
   /* Button group */
-  --rv-ui-group-border:       var(--rv-ui-border);
-  --rv-ui-group-hover-bg:     var(--rv-ui-surface-hover);
+  --rv-ui-group-border: var(--rv-ui-border);
+  --rv-ui-group-hover-bg: var(--rv-ui-surface-hover);
 
   /* Badge */
-  --rv-ui-badge-bg:           var(--rv-ui-accent);
-  --rv-ui-badge-fg:           var(--rv-ui-accent-fg);
-  --rv-ui-badge-disabled-bg:  #{palette.$gray-a1a1aa};
-  --rv-ui-badge-disabled-fg:  #{palette.$white};
+  --rv-ui-badge-bg: var(--rv-ui-accent);
+  --rv-ui-badge-fg: var(--rv-ui-accent-fg);
+  --rv-ui-badge-disabled-bg: #{palette.$gray-a1a1aa};
+  --rv-ui-badge-disabled-fg: #{palette.$white};
 
   /* Shared */
-  --rv-ui-radius:             6px;
-  --rv-ui-transition:         var(--rv-ui-motion-fast, 120ms);
-  --rv-ui-focus-ring:         color-mix(in srgb, var(--rv-ui-accent) 35%, transparent);
+  --rv-ui-radius: 6px;
+  --rv-ui-transition: var(--rv-ui-motion-fast, 120ms);
+  --rv-ui-focus-ring: color-mix(in srgb, var(--rv-ui-accent) 35%, transparent);
 }
 
 @mixin rv-ui-dark-tokens {
   --rv-ui-color-scheme: dark;
   --rv-ui-disabled-bg: var(--rv-ui-surface-sunken);
   --rv-ui-disabled-fg: var(--rv-ui-text-muted);
-  --rv-ui-danger-surface: color-mix(in srgb, var(--rv-ui-danger) 10%, var(--rv-ui-surface));
-  --rv-ui-warning-surface: color-mix(in srgb, var(--rv-ui-warning) 10%, var(--rv-ui-surface));
-  --rv-ui-success-surface: color-mix(in srgb, var(--rv-ui-success) 10%, var(--rv-ui-surface));
+  --rv-ui-danger-surface: color-mix(
+    in srgb,
+    var(--rv-ui-danger) 10%,
+    var(--rv-ui-surface)
+  );
+  --rv-ui-warning-surface: color-mix(
+    in srgb,
+    var(--rv-ui-warning) 10%,
+    var(--rv-ui-surface)
+  );
+  --rv-ui-success-surface: color-mix(
+    in srgb,
+    var(--rv-ui-success) 10%,
+    var(--rv-ui-surface)
+  );
   --rv-ui-overlay: color-mix(in srgb, black 60%, transparent);
   --rv-ui-shadow: color-mix(in srgb, black 32%, transparent);
   --rv-ui-field-muted: var(--rv-ui-text-muted);
-  --rv-ui-field-accent-text: color-mix(in srgb, var(--rv-ui-accent, #{palette.$blue-600}) 45%, white);
+  --rv-ui-field-accent-text: color-mix(
+    in srgb,
+    var(--rv-ui-accent, #{palette.$blue-600}) 45%,
+    white
+  );
   --rv-ui-field-surface: #{palette.$neutral-800};
   --rv-ui-field-text: var(--rv-ui-text);
-  --rv-ui-canvas:              #{palette.$neutral-950};
-  --rv-ui-surface:             #{palette.$gray-1f1f1f};
-  --rv-ui-surface-elevated:    #{palette.$neutral-800};
-  --rv-ui-surface-sunken:      #{palette.$gray-111111};
-  --rv-ui-surface-hover:       #{palette.$gray-2f2f2f};
-  --rv-ui-border:              #{palette.$gray-3a3a3a};
-  --rv-ui-border-strong:       #{palette.$gray-525252};
-  --rv-ui-text:                #{palette.$neutral-100};
-  --rv-ui-text-muted:          #{palette.$gray-a3a3a3};
-  --rv-ui-text-subtle:         #{palette.$neutral-500};
-  --rv-ui-selected-bg:         color-mix(in srgb, var(--rv-ui-accent) 12%, var(--rv-ui-surface));
+  --rv-ui-canvas: #{palette.$neutral-950};
+  --rv-ui-surface: #{palette.$gray-1f1f1f};
+  --rv-ui-surface-elevated: #{palette.$neutral-800};
+  --rv-ui-surface-sunken: #{palette.$gray-111111};
+  --rv-ui-surface-hover: #{palette.$gray-2f2f2f};
+  --rv-ui-border: #{palette.$gray-3a3a3a};
+  --rv-ui-border-strong: #{palette.$gray-525252};
+  --rv-ui-text: #{palette.$neutral-100};
+  --rv-ui-text-muted: #{palette.$gray-a3a3a3};
+  --rv-ui-text-subtle: #{palette.$neutral-500};
+  --rv-ui-selected-bg: color-mix(
+    in srgb,
+    var(--rv-ui-accent) 12%,
+    var(--rv-ui-surface)
+  );
   --rv-dropdown-container-tag-background: #{palette.$gray-2b2b2b};
   --rv-dropdown-placeholder-color: var(--rv-ui-text-muted);
-  --rv-ui-selected-fg:         #{palette.$neutral-100};
-  --rv-ui-selected-accent-fg:  var(--rv-ui-accent-text);
+  --rv-ui-selected-fg: #{palette.$neutral-100};
+  --rv-ui-selected-accent-fg: var(--rv-ui-accent-text);
   --rv-ui-danger: #{palette.$red-300};
   --rv-ui-warning: #{palette.$amber-300};
   --rv-ui-success: #{palette.$green-300};
@@ -130,34 +174,34 @@
   --rv-ui-btn-danger-outline-hover: #{palette.$red-light-overlay-10};
   color-scheme: dark;
 
-  --rv-ui-accent:             #{palette.$blue-600};
-  --rv-ui-accent-hover:       #{palette.$blue-700};
+  --rv-ui-accent: #{palette.$blue-600};
+  --rv-ui-accent-hover: #{palette.$blue-700};
   --rv-ui-accent-text-weight: 45%;
-  --rv-ui-accent-text-base:   white;
+  --rv-ui-accent-text-base: white;
   --rv-ui-accent-text: color-mix(in srgb, var(--rv-ui-accent) 45%, white);
 
-  --rv-ui-btn-outline-bg:         transparent;
-  --rv-ui-btn-outline-bg-hover:   var(--rv-ui-surface-hover);
-  --rv-ui-btn-outline-fg:         var(--rv-ui-text);
-  --rv-ui-btn-outline-border:     var(--rv-ui-border);
-  --rv-ui-btn-outline-border-hover:var(--rv-ui-border-strong);
+  --rv-ui-btn-outline-bg: transparent;
+  --rv-ui-btn-outline-bg-hover: var(--rv-ui-surface-hover);
+  --rv-ui-btn-outline-fg: var(--rv-ui-text);
+  --rv-ui-btn-outline-border: var(--rv-ui-border);
+  --rv-ui-btn-outline-border-hover: var(--rv-ui-border-strong);
 
-  --rv-ui-btn-bg:                 var(--rv-ui-surface-elevated);
-  --rv-ui-btn-bg-hover:           #{palette.$neutral-700};
+  --rv-ui-btn-bg: var(--rv-ui-surface-elevated);
+  --rv-ui-btn-bg-hover: #{palette.$neutral-700};
 
-  --rv-ui-btn-secondary-bg:       var(--rv-ui-surface);
+  --rv-ui-btn-secondary-bg: var(--rv-ui-surface);
   --rv-ui-btn-secondary-bg-hover: var(--rv-ui-surface-hover);
-  --rv-ui-btn-secondary-fg:       var(--rv-ui-text);
+  --rv-ui-btn-secondary-fg: var(--rv-ui-text);
 
-  --rv-ui-btn-ghost-hover-bg:     #{palette.$white-overlay-8};
-  --rv-ui-btn-ghost-active-bg:    #{palette.$white-overlay-14};
+  --rv-ui-btn-ghost-hover-bg: #{palette.$white-overlay-8};
+  --rv-ui-btn-ghost-active-bg: #{palette.$white-overlay-14};
 
-  --rv-ui-switch-track-off:   #{palette.$neutral-600};
-  --rv-ui-switch-thumb:       var(--rv-ui-text);
+  --rv-ui-switch-track-off: #{palette.$neutral-600};
+  --rv-ui-switch-thumb: var(--rv-ui-text);
 
-  --rv-ui-group-border:       var(--rv-ui-border);
-  --rv-ui-group-hover-bg:     var(--rv-ui-surface-hover);
-  --rv-ui-focus-ring:         color-mix(in srgb, var(--rv-ui-accent) 38%, transparent);
-  --rv-ui-badge-disabled-bg:  #{palette.$gray-52525b};
-  --rv-ui-badge-disabled-fg:  #{palette.$gray-e4e4e7};
+  --rv-ui-group-border: var(--rv-ui-border);
+  --rv-ui-group-hover-bg: var(--rv-ui-surface-hover);
+  --rv-ui-focus-ring: color-mix(in srgb, var(--rv-ui-accent) 38%, transparent);
+  --rv-ui-badge-disabled-bg: #{palette.$gray-52525b};
+  --rv-ui-badge-disabled-fg: #{palette.$gray-e4e4e7};
 }

package/styles/_thresholds.scss

@@ -1,28 +1,31 @@
 @use '../variables' as *;
 
 @mixin thresholds {
-    &.low {
-        --threshold-color: var(--progress-bar-low-color, #{$rv-low-color});
-        --progress-bar-text-color: #FFFFFF;
-    }
-    &.medium {
-        --threshold-color: var(--progress-bar-medium-color, #{$rv-medium-color});
-        --progress-bar-text-color: #000000;
-    }
-    &.high {
-        --threshold-color: var(--progress-bar-high-color, #{$rv-high-color});
-        --progress-bar-text-color: #FFFFFF;
-    }
-    &.critical {
-        --threshold-color: var(--progress-bar-critical-color, #{$rv-critical-color});
-        --progress-bar-text-color: #FFFFFF;
-    }
-    &.info {
-        --threshold-color: var(--progress-bar-info-color, #{$rv-info-color});
-        --progress-bar-text-color: #FFFFFF;
-    }
-    &.neutral {
-        --threshold-color: var(--progress-bar-neutral-color, #{$rv-neutral-color});
-        --progress-bar-text-color: #FFFFFF;
-    }
-}
+  &.low {
+    --threshold-color: var(--progress-bar-low-color, #{$rv-low-color});
+    --progress-bar-text-color: #ffffff;
+  }
+  &.medium {
+    --threshold-color: var(--progress-bar-medium-color, #{$rv-medium-color});
+    --progress-bar-text-color: #000000;
+  }
+  &.high {
+    --threshold-color: var(--progress-bar-high-color, #{$rv-high-color});
+    --progress-bar-text-color: #ffffff;
+  }
+  &.critical {
+    --threshold-color: var(
+      --progress-bar-critical-color,
+      #{$rv-critical-color}
+    );
+    --progress-bar-text-color: #ffffff;
+  }
+  &.info {
+    --threshold-color: var(--progress-bar-info-color, #{$rv-info-color});
+    --progress-bar-text-color: #ffffff;
+  }
+  &.neutral {
+    --threshold-color: var(--progress-bar-neutral-color, #{$rv-neutral-color});
+    --progress-bar-text-color: #ffffff;
+  }
+}

package/styles/_time-grid.scss

@@ -58,8 +58,10 @@
   background: var(--rv-matrix-working, var(--rv-ui-surface));
   cursor: crosshair;
   transition:
-    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(.2, 0, 0, 1));
+    border-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 .rv-time-grid__cell.is-outside-work-hours {
   background: var(--rv-matrix-outside, var(--rv-ui-surface-hover));
@@ -91,4 +93,7 @@
   z-index: 1;
 }
 
-.rv-time-grid__hours, .rv-time-grid__matrix { min-inline-size: var(--rv-time-grid-min-width, 500px); }
+.rv-time-grid__hours,
+.rv-time-grid__matrix {
+  min-inline-size: var(--rv-time-grid-min-width, 500px);
+}

package/styles/_tokens.scss

@@ -1,5 +1,10 @@
 @use './theme';
-:root, .light, [data-theme^='light'], revo-grid[theme^='light'] { @include theme.rv-ui-light-tokens; }
+:root,
+.light,
+[data-theme^='light'],
+revo-grid[theme^='light'] {
+  @include theme.rv-ui-light-tokens;
+}
 
 /* Explicit dark selectors */
 [data-theme^='dark'],

package/styles/configurator-actions.scss

@@ -0,0 +1,241 @@
+@use './built-in-palettes' as palettes;
+// Shared action surfaces for Grid and Pivot. Keep legacy classes and theme tokens compatible.
+.revo-dropdown-menu.pivot-field-action-popover {
+  --rv-dropdown-menu-max-height: 400px;
+  position: fixed;
+  box-sizing: border-box;
+  min-width: 0;
+  width: min(20rem, calc(100vw - 16px));
+  max-width: calc(100vw - 16px);
+  overflow: hidden;
+  padding: 0;
+  color: var(--rv-dropdown-menu-option-color);
+  .pivot-field-action-panel {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    max-width: 100%;
+    border-radius: 0.25rem;
+    font-weight: normal;
+    white-space: normal;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 0;
+    flex: 1 1 auto;
+    border: 0;
+    padding: 0;
+    gap: 0;
+    overflow: hidden;
+  }
+  .pivot-field-action-header {
+    flex-shrink: 0;
+    padding: 12px;
+    background: var(--rv-dropdown-menu-background);
+    border-bottom: 1px solid var(--rv-dropdown-menu-border);
+  }
+  .pivot-field-action-title {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+  .pivot-field-action-header .rv-search-input {
+    margin: 8px 0 0;
+  }
+  .pivot-field-action-body {
+    min-height: 0;
+    padding: 6px;
+    overflow: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .pivot-field-action-group {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .pivot-field-action-group + .pivot-field-action-group {
+    border-top: 1px solid var(--rv-dropdown-menu-border);
+    margin-top: 4px;
+    padding-top: 6px;
+  }
+  .rv-configurator-action-panel.pivot-field-action-panel button.rv-btn {
+    font-family: inherit;
+    font-size: 13px;
+    line-height: 1.5;
+    width: 100%;
+    min-height: 36px;
+    flex: 0 0 auto;
+    padding: 8px;
+    margin: 0;
+    align-items: center;
+    text-align: start;
+    white-space: normal;
+    flex-wrap: nowrap;
+    gap: 10px;
+    justify-content: flex-start;
+    opacity: 1;
+    appearance: none;
+    border: 0;
+    box-shadow: none;
+    background-image: none;
+    border-radius: 0.375rem;
+    color: inherit;
+    background: transparent;
+  }
+  .pivot-field-action-panel button.rv-btn:disabled {
+    color: var(--pv-action-muted, var(--rv-ui-text-muted));
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  .pivot-field-action-symbol,
+  .column-icon {
+    display: inline-flex;
+    flex: 0 0 16px;
+    align-items: center;
+    justify-content: center;
+    color: var(--pv-action-muted, var(--rv-ui-text-muted));
+  }
+  .pivot-field-action-symbol svg,
+  .column-icon svg {
+    display: block;
+    width: 12px;
+    height: 12px;
+    fill: currentColor;
+  }
+  .pivot-field-action-copy {
+    min-width: 0;
+  }
+  .pivot-field-action-check {
+    display: inline-flex;
+    flex: 0 0 12px;
+    margin-left: auto;
+    svg {
+      display: block;
+      width: 12px;
+      height: 12px;
+      fill: currentColor;
+    }
+  }
+  .pivot-field-action-panel button.rv-btn:not(:disabled):hover,
+  .pivot-field-action-panel button.rv-btn:focus-visible {
+    background: var(--rv-dropdown-container-hover-background);
+  }
+  .pivot-field-action-panel button.rv-btn:focus-visible {
+    outline: 2px solid var(--rv-ui-accent);
+    outline-offset: -2px;
+  }
+  .pivot-action-reason {
+    display: block;
+    font-size: 11px;
+    line-height: 16px;
+    font-weight: normal;
+  }
+  .pivot-field-picker-list {
+    max-height: none;
+    overflow: visible;
+  }
+  .pivot-aggregation-menu {
+    margin: 0;
+    padding: 0;
+  }
+  .pivot-aggregation-menu [role='menu'] {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .pivot-aggregation-heading {
+    padding: 6px 8px;
+    color: var(--pv-action-muted, var(--rv-ui-text-muted));
+    font-size: 11px;
+    font-weight: 500;
+  }
+  .pivot-aggregation-name {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .pivot-aggregation-check {
+    display: inline-flex;
+    flex: 0 0 12px;
+    svg {
+      display: block;
+      width: 12px;
+      height: 12px;
+      fill: currentColor;
+    }
+  }
+  .pivot-field-action-panel
+    button.pivot-aggregation-option[aria-checked='true'] {
+    background: color-mix(in srgb, var(--rv-ui-accent) 12%, transparent);
+    color: var(
+      --pv-inspector-accent-text,
+      var(--pv-action-accent-text, var(--rv-ui-accent))
+    );
+    .pivot-field-action-symbol {
+      color: inherit;
+    }
+  }
+  .rv-search-input {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+}
+
+// The shared popup is portalled outside the inspector, so it carries its palette.
+.revo-dropdown-menu.pivot-field-action-popover,
+.revo-dropdown-menu.pivot-editor-popover,
+.rv-pivot-member-filter-dialog {
+  --rv-dropdown-menu-background: var(--rv-ui-surface);
+  --rv-dropdown-menu-border: var(--rv-ui-border);
+  --rv-dropdown-menu-option-color: var(--rv-ui-text);
+  --rv-dropdown-container-hover-background: var(--rv-ui-surface-hover);
+  --pv-action-muted: var(--rv-ui-text-muted);
+  --pv-action-accent-text: color-mix(
+    in srgb,
+    var(--rv-ui-accent) 90%,
+    #{palettes.color('pivot-interface-mix', 'shade')}
+  );
+  --rv-search-input-bg: var(--rv-ui-surface-sunken);
+  --rv-search-input-focus-bg: var(--rv-search-input-bg);
+  --rv-search-input-border: var(--rv-ui-border);
+  --rv-search-input-color: var(--rv-ui-text);
+  --rv-search-input-icon-color: var(--rv-ui-text-muted);
+  --rv-search-input-placeholder-color: var(--rv-ui-text-muted);
+  --rv-search-input-focus-border: var(--rv-ui-accent);
+  // Progressive editors own their palette, even inside a differently themed host.
+  // Shared form controls and member lists must resolve this popup's surface.
+  --rv-control-bg: var(--rv-dropdown-menu-background);
+  --rv-control-border: var(--rv-dropdown-menu-border);
+  --rv-form-border: var(--rv-dropdown-menu-border);
+  font-family: inherit;
+  line-height: 1.5;
+  font-size: 13px;
+  &[data-theme^='dark'] {
+    --rv-dropdown-menu-background: var(--rv-ui-surface);
+    --rv-dropdown-menu-border: var(--rv-ui-border);
+    --rv-dropdown-menu-option-color: var(--rv-ui-text);
+    --rv-dropdown-container-hover-background: var(--rv-ui-surface-hover);
+    --pv-action-muted: var(--rv-ui-text-muted);
+    --pv-action-accent-text: color-mix(
+      in srgb,
+      var(--rv-ui-accent) 45%,
+      #{palettes.color('pivot-interface-mix', 'tint')}
+    );
+    --rv-search-input-bg: var(--rv-ui-surface-sunken);
+    --rv-search-input-border: var(--rv-ui-border);
+    --rv-search-input-color: var(--rv-ui-text);
+    --rv-search-input-icon-color: var(--rv-ui-text-muted);
+    --rv-search-input-placeholder-color: var(--rv-ui-text-muted);
+    --rv-search-input-focus-border: var(--rv-ui-accent);
+  }
+}