@revolist/ui 4.0.4-rc → 4.0.6-rc

package/styles/_field-configurator.scss

@@ -1,3 +1,4 @@
+@use './fields-grid';
 @use './motion';
 @use './disclosure';
 @use './icon-action';
@@ -288,3 +289,149 @@ button.rv-configurator-action-button {
 @media (prefers-reduced-motion: reduce) {
   .rv-collapsible-section > .rv-configurator-summary svg { transition: none; }
 }
+
+// Product-neutral panel shell; grid bodies remain rendering slots in their adapters.
+.rv-configurator-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  min-width: 0;
+  box-sizing: border-box;
+  .pivot-field-annotation { color: var(--rv-configurator-muted, var(--rv-ui-text-muted)); font-size: 12px; }
+  .pivot-filter-active { width: 6px; height: 6px; border-radius: 50%; background: var(--rv-ui-accent); }
+}
+
+.rv-configurator-panel--standalone {
+  @include presentation;
+  --rv-configurator-bg: var(--rv-ui-surface);
+  --rv-configurator-surface: var(--rv-ui-field-surface);
+  --rv-configurator-text: var(--rv-ui-text);
+  --rv-configurator-muted: var(--rv-ui-text-muted);
+  --rv-configurator-border: var(--rv-ui-border);
+  --rv-configurator-accent: var(--rv-ui-accent);
+  --rv-configurator-accent-text: var(--rv-ui-accent);
+  flex-shrink: 0;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  padding: 8px 16px 16px;
+  border: 1px solid var(--rv-ui-border);
+  border-radius: 10px;
+  background: var(--rv-ui-surface);
+  color: var(--rv-ui-text);
+  font: 13px/1.5 sans-serif;
+  ul { list-style: none; padding: 0; margin: 0; }
+  .rv-configurator-library-content > .rv-configurator-field-search { margin: 8px; width: auto; }
+  .rv-configurator-icon svg { width: 12px; height: 12px; }
+}
+
+// Compact rail presentation is shared by Grid, Pivot and Pivot Charts.
+.rv-configurator-panel__content { display: contents; }
+.rv-configurator-panel__content[hidden] { display: none; }
+.rv-configurator-rail { display: flex; justify-content: flex-end; gap: 8px; }
+.rv-configurator-rail__button.rv-btn {
+  position: relative;
+  flex: none;
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+  justify-content: center;
+}
+.rv-configurator-rail__button .rv-configurator-icon svg { width: 18px; height: 18px; }
+.rv-configurator-rail__count.rv-badge {
+  position: absolute;
+  inset: -4px -4px auto auto;
+}
+.rv-configurator-panel[data-compact='true'] {
+  border: 0;
+  border-left: 1px solid var(--rv-ui-border);
+  border-radius: 0;
+  width: 56px !important;
+  min-width: 56px;
+  padding: 8px;
+  flex: none;
+}
+.rv-configurator-panel[data-compact='true'] > .rv-configurator-rail {
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+// Configurator hosts supply content; shared switches retain all control appearance.
+.rv-configurator-section-tabs.rv-segmented-switch {
+  display: flex;
+  flex: none;
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+  > button { flex: 1 0 auto; }
+}
+.rv-configurator-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  padding-block: 8px;
+  margin-block: -8px 0;
+  margin-inline: var(--rv-configurator-header-inline-offset, 0px);
+  background: var(--rv-configurator-bg, var(--rv-ui-surface));
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -8px -16px 0;
+    z-index: -1;
+    background: inherit;
+  }
+  > .rv-segmented-switch { flex: 1 1 0%; width: 0; }
+}
+.rv-configurator-custom-section,
+.rv-configurator-section-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+.rv-configurator-panel:has(> .rv-configurator-panel__content > .rv-configurator-custom-section:not([hidden])) {
+  height: 100%;
+  min-height: 0;
+}
+.rv-configurator-custom-section[hidden] { display: none; }
+
+// A compact icon with a native/shared select hit target; field text stays in its popup.
+.rv-icon-select {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  border-radius: 6px;
+  &:focus-within { outline: 2px solid var(--rv-ui-accent); outline-offset: 2px; }
+  &:has(.rv-select-control.disabled) { opacity: .5; }
+  &:has(.rv-select-control:hover:not(.disabled)) { background: var(--rv-ui-surface-hover); }
+  // This icon composition must outrank the normal standalone form padding.
+  .dropdown-container.rv-select .dropdown-trigger {
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    .selected-value, .dropdown-arrow { display: none; }
+  }
+  .rv-select-control {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    min-height: 28px;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+}

package/styles/_fields-grid.scss

@@ -0,0 +1,37 @@
+// Shared Fields-grid presentation. Grid adapters supply rows and policy.
+revo-grid.rv-configurator-fields-grid {
+  // Checkboxes convey assignment; selected rows retain the neutral Fields surface.
+  --revo-selected-row: transparent;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  border: 0;
+  border-radius: 0;
+
+  revogr-data {
+    .rgRow, .groupingRow { box-shadow: none; }
+    // Readonly theme rules also paint cell separators. Keep this surface borderless.
+    .rgRow .rgCell,
+    .rgRow .rgCell.disabled {
+      padding-inline: var(--rv-configurator-field-cell-padding, 0);
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  .rgRow .rv-configurator-field-reorder { display: flex; align-items: center; justify-content: center; }
+  .rv-configurator-field-actions { width: 100%; justify-content: flex-end; }
+  .rv-configurator-field-drag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    cursor: grab;
+    .rv-configurator-drag-handle { margin: 0; }
+  }
+}

package/styles/_palette.scss

@@ -43,27 +43,3 @@ $white-overlay-8: palettes.color('common', 'rgba_255_255_255_0_08');
 $white-overlay-14: palettes.color('common', 'rgba_255_255_255_0_14');
 $gray-52525b: palettes.color('common', 'hex52525b');
 $gray-e4e4e7: palettes.color('common', 'hexe4e4e7');
-$legacy-007bff: palettes.color('common', 'hex007bff');
-$legacy-0d63e8: palettes.color('common', 'hex0d63e8');
-$legacy-000: palettes.color('common', 'hex000');
-$legacy-757575: palettes.color('common', 'hex757575');
-$legacy-999: palettes.color('common', 'hex999');
-$legacy-f6f6f7: palettes.color('common', 'hexf6f6f7');
-$legacy-ebebef: palettes.color('common', 'hexebebef');
-$legacy-e4e4e9: palettes.color('common', 'hexe4e4e9');
-$legacy-333333: palettes.color('common', 'hex333333');
-$legacy-f0f0f0: palettes.color('common', 'hexf0f0f0');
-$legacy-2d2d2d: palettes.color('common', 'hex2d2d2d');
-$legacy-d4d4d4: palettes.color('common', 'hexd4d4d4');
-$legacy-shadow-54: palettes.color('common', 'rgba_0_0_0_0_15');
-$legacy-1c1c1c: palettes.color('common', 'hex1c1c1c');
-$legacy-686868: palettes.color('common', 'hex686868');
-$legacy-shadow-57: palettes.color('common', 'rgba_0_0_0_0_5');
-$legacy-2c2c2c: palettes.color('common', 'hex2c2c2c');
-$legacy-fa2057: palettes.color('common', 'hexfa2057');
-$legacy-f7c605: palettes.color('common', 'hexf7c605');
-$legacy-01c26e: palettes.color('common', 'hex01c26e');
-$legacy-a8183c: palettes.color('common', 'hexa8183c');
-$legacy-5555fc: palettes.color('common', 'hex5555fc');
-$legacy-161a42: palettes.color('common', 'hex161a42');
-$legacy-252525: palettes.color('common', 'hex252525');

package/styles/_primitives.scss

@@ -52,6 +52,8 @@
   }
 }
 
+.rv-btn[hidden]:not([hidden='until-found']) { display: none; }
+
 /* Explicit filled neutral variant (use when outline is not desired). */
 .rv-btn-solid {
   @extend %rv-btn-base;
@@ -245,6 +247,14 @@ label.rv-switch-label {
 .rv-btn-group > .rv-btn:focus-visible {
   z-index: 1;
 }
+.rv-btn-group > .rv-btn-group-item:first-child > span {
+  border-start-start-radius: calc(var(--rv-ui-radius) - 1px);
+  border-end-start-radius: calc(var(--rv-ui-radius) - 1px);
+}
+.rv-btn-group > .rv-btn-group-item:last-child > span {
+  border-start-end-radius: calc(var(--rv-ui-radius) - 1px);
+  border-end-end-radius: calc(var(--rv-ui-radius) - 1px);
+}
 
 .rv-btn-group-item {
   position: relative;
@@ -343,7 +353,7 @@ label.rv-switch-label {
 /* ─── Small toggle switch (.rv-switch-sm) ─────────────────────────────────── */
 /*
  * Compact variant of .rv-switch for dense toolbars (28×16, 12px knob).
- * Supports both the shared button component and the legacy native-input markup.
+ * Supports both the shared button component and the native input adapters.
  *
  *   <label class="rv-switch-label rv-switch-sm">
  *     <input class="rv-switch-input" type="checkbox">
@@ -385,6 +395,23 @@ label.rv-switch-label {
   gap: 6px;
 }
 
+.rv-choice-chips--scrollable {
+  display: flex;
+  flex-wrap: nowrap;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-block: 3px;
+  --rv-choice-chips-fade-left: 0px;
+  --rv-choice-chips-fade-right: 0px;
+  mask-image: linear-gradient(to right, transparent, #000 var(--rv-choice-chips-fade-left), #000 calc(100% - var(--rv-choice-chips-fade-right)), transparent);
+  &[data-scroll-edges~='left'] { --rv-choice-chips-fade-left: 12px; }
+  &[data-scroll-edges~='right'] { --rv-choice-chips-fade-right: 36px; }
+  &::-webkit-scrollbar { display: none; }
+  > .rv-choice-chip { flex: none; }
+}
+
 .rv-choice-chip {
   appearance: none;
   min-height: 29px;
@@ -777,24 +804,6 @@ button.rv-badge--inline {
 // Square icon controls and their native hover/focus tooltips share one owner.
 .rv-btn-icon { box-sizing: border-box; flex: none; width: var(--rv-icon-button-size, 32px); height: var(--rv-icon-button-size, 32px); padding: 6px; }
 .rv-btn-icon[aria-pressed='true'], .rv-btn-icon[data-active='true'] { background: var(--rv-ui-selected-bg); color: var(--rv-ui-selected-fg); }
-.rv-control-tooltip { display: none; border: 0; position: absolute; bottom: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%); padding: 6px 9px; border-radius: 6px; white-space: nowrap; font: 12px sans-serif; color: var(--rv-ui-surface); background: var(--rv-ui-text); box-shadow: 0 3px 10px var(--rv-ui-shadow); pointer-events: none; visibility: hidden; z-index: 20; }
-.rv-icon-action:hover .rv-control-tooltip:not([data-visible]), .rv-icon-action:focus .rv-control-tooltip:not([data-visible]), .rv-btn-icon:hover .rv-control-tooltip:not([data-visible]), .rv-btn-icon:focus .rv-control-tooltip:not([data-visible]) { display: block; visibility: visible; }
-// Anchored tooltips stay outside scrollable surface geometry, including while visible.
-@supports (anchor-scope: --rv-control-action) {
-  .rv-icon-action, .rv-btn-icon {
-    anchor-name: --rv-control-action;
-    anchor-scope: --rv-control-action;
-  }
-  .rv-control-tooltip {
-    position: fixed;
-    position-anchor: --rv-control-action;
-    inset: auto;
-    position-area: top;
-    position-try-fallbacks: top span-left, top span-right;
-    margin-bottom: 8px;
-    transform: none;
-  }
-}
 
 
 .rv-btn-icon { position: relative; overflow: visible; }

package/styles/configurator-actions.scss

@@ -0,0 +1,141 @@
+@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: .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: .375rem;
+    color: inherit;
+    background: transparent;
+  }
+  .pivot-field-action-panel button.rv-btn:disabled { color: var(--pv-action-muted, var(--rv-ui-text-muted)); opacity: .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);
+  }
+}
+

package/styles/{legacy-pagination.css → pagination.css}

@@ -14,7 +14,7 @@
   line-height: 1.4;
   font-variant-numeric: tabular-nums;
 }
-.rv-pagination-panel { justify-content: space-between; }
+.rv-pagination-panel { box-sizing: border-box; padding: 8px 12px; justify-content: space-between; }
 .rv-pagination-panel > span {
   display: flex;
   align-items: center;
@@ -98,15 +98,32 @@
   .rv-pagination-summary--responsive { display: inline-flex; }
 }
 
-@container (max-width: 420px) {
+@container (max-width: 900px) {
   .rv-pagination-pages { gap: 2px; }
   .rv-pagination-button { min-width: 28px !important; width: 28px; height: 28px !important; padding: 4px !important; }
   .rv-pagination-panel .rv-pagination-button:not(.rv-pagination-button--icon):not([aria-current]),
   .rv-pagination-panel .rv-pagination-ellipsis { display: none; }
 }
 .rv-pagination-panel { container-type: inline-size; inline-size: 100%; }
+@container (max-width: 900px) {
+  .rv-pagination-panel > span:first-child { flex-wrap: nowrap; }
+  .rv-pagination-panel > span:last-child { margin-inline-start: auto; }
+}
+@container (max-width: 580px) {
+  .rv-pagination-panel .rv-pagination-selector { display: none; }
+}
 
 /* Numeric fractions keep their reading order inside an RTL navigation row. */
 .rv-pagination-summary { direction: ltr; unicode-bidi: isolate; }
 
 .rv-pagination-button--icon:dir(rtl) .rv-svg-icon { transform: rotate(180deg); }
+
+@container (max-width: 420px) {
+  .rv-pagination-panel > span:first-child > .rv-pagination-button--icon:first-child,
+  .rv-pagination-panel > span:first-child > .rv-pagination-button--icon:last-of-type { display: none; }
+}
+
+@container (min-width: 621px) and (max-width: 900px) {
+  .rv-pagination-panel .rv-pagination-button:not(.rv-pagination-button--icon):has(+ [aria-current='page']),
+  .rv-pagination-panel [aria-current='page'] + .rv-pagination-button:not(.rv-pagination-button--icon) { display: inline-flex; }
+}