@revolist/ui 4.0.4-rc → 4.0.5-rc

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

@@ -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; }
+}