@revolist/ui 4.0.6-rc → 4.0.9

package/styles/_field-configurator.scss

@@ -102,8 +102,14 @@
     min-width: 0;
   }
   .rv-configurator-field-content > .rv-configurator-icon {
-    display: inline-flex; flex: 0 0 12px; width: 12px; height: 12px;
-    svg { width: 12px; height: 12px; }
+    display: inline-flex;
+    flex: 0 0 12px;
+    width: 12px;
+    height: 12px;
+    svg {
+      width: 12px;
+      height: 12px;
+    }
   }
   .rv-configurator-field-caption {
     min-width: 0;
@@ -161,7 +167,8 @@
     font-weight: 500;
     list-style: none;
     cursor: pointer;
-    transition: color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+    transition: color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
     &::-webkit-details-marker {
       display: none;
     }
@@ -174,7 +181,8 @@
       flex: none;
     }
     .rv-configurator-icon {
-      transition: transform var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+      transition: transform var(--rv-ui-motion-fast, 120ms)
+        var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
     }
     &:hover {
       color: var(--rv-configurator-accent-text, var(--rv-ui-accent));
@@ -210,7 +218,11 @@
     > .rv-configurator-field-row {
       @include field;
       position: relative;
-      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));
+      transition:
+        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));
       &[draggable='true'] {
         cursor: grab;
       }
@@ -236,38 +248,93 @@
   }
 }
 
-.rv-configurator-field-actions { display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 0; min-width: 0; }
-.rv-configurator-action-trigger { display: inline-flex; flex: none; min-width: 0; }
+.rv-configurator-field-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0;
+  min-width: 0;
+}
+.rv-configurator-action-trigger {
+  display: inline-flex;
+  flex: none;
+  min-width: 0;
+}
 .rv-configurator-status-badge {
-  display: inline-flex; flex: 0 0 auto; align-items: center; max-width: 7ch;
-  margin-inline-end: 4px; padding: 1px 4px; border-radius: 4px;
-  background: var(--rv-configurator-muted-bg, var(--rv-ui-surface-hover)); color: inherit;
-  font-size: 10px; font-weight: 600; line-height: 16px; white-space: nowrap;
-  transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
-  &[data-active='true'] { color: var(--rv-configurator-accent-text, var(--rv-ui-field-accent-text, var(--rv-ui-accent))); background: color-mix(in srgb, var(--rv-ui-accent) 12%, transparent); }
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  max-width: 7ch;
+  margin-inline-end: 4px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: var(--rv-configurator-muted-bg, var(--rv-ui-surface-hover));
+  color: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  white-space: nowrap;
+  transition:
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
+  &[data-active='true'] {
+    color: var(
+      --rv-configurator-accent-text,
+      var(--rv-ui-field-accent-text, var(--rv-ui-accent))
+    );
+    background: color-mix(in srgb, var(--rv-ui-accent) 12%, transparent);
+  }
 }
 
 // Native adapters and Preact examples use this same field action presentation.
 button.rv-configurator-action-button {
   @include icon-action.neutral;
   &[data-configurator-action='settings'] {
-    &:hover, &:active, &[aria-expanded='true'] { background: transparent; color: var(--rv-configurator-muted, var(--rv-ui-field-muted)); opacity: 1; transform: none; box-shadow: none; }
+    &:hover,
+    &:active,
+    &[aria-expanded='true'] {
+      background: transparent;
+      color: var(--rv-configurator-muted, var(--rv-ui-field-muted));
+      opacity: 1;
+      transform: none;
+      box-shadow: none;
+    }
   }
   &[data-configured='true'] {
     position: relative;
-    &::after { content: ''; position: absolute; inset-block-start: 2px; inset-inline-end: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--rv-ui-accent); pointer-events: none; }
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block-start: 2px;
+      inset-inline-end: 2px;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: var(--rv-ui-accent);
+      pointer-events: none;
+    }
   }
 }
 
 .rv-configurator-drop-indicator {
-  position: absolute; inset-inline: 4px; top: -2px; height: 2px;
-  border-radius: 999px; background: var(--rv-ui-accent);
+  position: absolute;
+  inset-inline: 4px;
+  top: -2px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--rv-ui-accent);
   box-shadow: 0 0 0 1px var(--rv-configurator-bg, var(--rv-ui-surface));
-  pointer-events: none; z-index: 2;
-  &[data-position='after'] { top: auto; bottom: -2px; }
+  pointer-events: none;
+  z-index: 2;
+  &[data-position='after'] {
+    top: auto;
+    bottom: -2px;
+  }
 }
 
-
 .rv-collapsible-section {
   min-width: 0;
   margin: 0;
@@ -276,7 +343,9 @@ button.rv-configurator-action-button {
   border-radius: 0;
   background: transparent;
 }
-.rv-collapsible-section > .rv-configurator-summary { min-height: 52px; }
+.rv-collapsible-section > .rv-configurator-summary {
+  min-height: 52px;
+}
 .rv-collapsible-section__content {
   display: grid;
   gap: 12px;
@@ -284,10 +353,14 @@ button.rv-configurator-action-button {
   padding: 0 0 14px;
   overflow-wrap: anywhere;
 }
-.rv-collapsible-section__description { margin: 0; }
+.rv-collapsible-section__description {
+  margin: 0;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  .rv-collapsible-section > .rv-configurator-summary svg { transition: none; }
+  .rv-collapsible-section > .rv-configurator-summary svg {
+    transition: none;
+  }
 }
 
 // Product-neutral panel shell; grid bodies remain rendering slots in their adapters.
@@ -298,8 +371,16 @@ button.rv-configurator-action-button {
   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); }
+  .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 {
@@ -321,15 +402,33 @@ button.rv-configurator-action-button {
   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; }
+  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-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;
@@ -338,7 +437,10 @@ button.rv-configurator-action-button {
   padding: 8px;
   justify-content: center;
 }
-.rv-configurator-rail__button .rv-configurator-icon svg { width: 18px; height: 18px; }
+.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;
@@ -358,6 +460,33 @@ button.rv-configurator-action-button {
   justify-content: flex-start;
 }
 
+.rv-configurator-panel[data-mini-mode='true'][data-compact='true'] {
+  box-sizing: border-box;
+  min-height: 0;
+  overflow: auto;
+}
+.rv-configurator-panel[data-mini-mode='true']
+  .rv-configurator-rail__button.rv-btn {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  height: auto;
+  min-height: 36px;
+}
+.rv-configurator-rail__label {
+  writing-mode: vertical-rl;
+  white-space: nowrap;
+}
+.rv-configurator-panel__toggle {
+  display: flex;
+  flex: none;
+  justify-content: flex-end;
+  padding: 4px 8px;
+}
+
+.rv-configurator-panel[data-resizable='true'] {
+  position: relative;
+}
 // Configurator hosts supply content; shared switches retain all control appearance.
 .rv-configurator-section-tabs.rv-segmented-switch {
   display: flex;
@@ -366,8 +495,12 @@ button.rv-configurator-action-button {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
-  &::-webkit-scrollbar { display: none; }
-  > button { flex: 1 0 auto; }
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  > button {
+    flex: 1 0 auto;
+  }
 }
 .rv-configurator-header {
   position: sticky;
@@ -390,7 +523,10 @@ button.rv-configurator-action-button {
     z-index: -1;
     background: inherit;
   }
-  > .rv-segmented-switch { flex: 1 1 0%; width: 0; }
+  > .rv-segmented-switch {
+    flex: 1 1 0%;
+    width: 0;
+  }
 }
 .rv-configurator-custom-section,
 .rv-configurator-section-content {
@@ -400,11 +536,16 @@ button.rv-configurator-action-button {
   min-width: 0;
   min-height: 0;
 }
-.rv-configurator-panel:has(> .rv-configurator-panel__content > .rv-configurator-custom-section:not([hidden])) {
+.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; }
+.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 {
@@ -415,15 +556,25 @@ button.rv-configurator-action-button {
   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); }
+  &:focus-within {
+    outline: 2px solid var(--rv-ui-accent);
+    outline-offset: 2px;
+  }
+  &:has(.rv-select-control.disabled) {
+    opacity: 0.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; }
+    .selected-value,
+    .dropdown-arrow {
+      display: none;
+    }
   }
   .rv-select-control {
     position: absolute;

package/styles/_fields-grid.scss

@@ -10,7 +10,10 @@ revo-grid.rv-configurator-fields-grid {
   border-radius: 0;
 
   revogr-data {
-    .rgRow, .groupingRow { box-shadow: none; }
+    .rgRow,
+    .groupingRow {
+      box-shadow: none;
+    }
     // Readonly theme rules also paint cell separators. Keep this surface borderless.
     .rgRow .rgCell,
     .rgRow .rgCell.disabled {
@@ -21,8 +24,15 @@ revo-grid.rv-configurator-fields-grid {
     }
   }
 
-  .rgRow .rv-configurator-field-reorder { display: flex; align-items: center; justify-content: center; }
-  .rv-configurator-field-actions { width: 100%; justify-content: flex-end; }
+  .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;
@@ -32,6 +42,8 @@ revo-grid.rv-configurator-fields-grid {
     height: 100%;
     min-width: 0;
     cursor: grab;
-    .rv-configurator-drag-handle { margin: 0; }
+    .rv-configurator-drag-handle {
+      margin: 0;
+    }
   }
 }

package/styles/_filter-controls.scss

@@ -14,7 +14,13 @@
   text-align: start;
   font: inherit;
   white-space: normal;
-  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)), color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition:
+    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)),
+    color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
   &:hover:not(:disabled) {
     border-color: var(--rv-ui-border-strong);
     background: var(--rv-ui-field-surface);
@@ -116,4 +122,6 @@ textarea.rv-highlighted-input__input::placeholder {
   box-shadow: inset 0 0 0 1px var(--rv-ui-danger);
 }
 
-.rv-option-button[aria-pressed="true"] .rv-option-button__detail { color: inherit; }
+.rv-option-button[aria-pressed='true'] .rv-option-button__detail {
+  color: inherit;
+}

package/styles/_icon-action.scss

@@ -3,26 +3,59 @@
 @mixin neutral {
   appearance: none;
   box-sizing: border-box;
-  display: inline-flex; align-items: center; justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex: 0 0 var(--rv-icon-action-size, 28px);
-  width: var(--rv-icon-action-size, 28px); height: var(--rv-icon-action-size, 28px);
-  min-width: var(--rv-icon-action-size, 28px); min-height: var(--rv-icon-action-size, 28px);
-  margin: 0; padding: var(--rv-icon-action-padding, 6px);
-  border: 0; border-radius: 6px; box-shadow: none; background: transparent;
+  width: var(--rv-icon-action-size, 28px);
+  height: var(--rv-icon-action-size, 28px);
+  min-width: var(--rv-icon-action-size, 28px);
+  min-height: var(--rv-icon-action-size, 28px);
+  margin: 0;
+  padding: var(--rv-icon-action-padding, 6px);
+  border: 0;
+  border-radius: 6px;
+  box-shadow: none;
+  background: transparent;
   color: var(--rv-configurator-muted, var(--rv-ui-field-muted));
-  font: inherit; font-size: 12px; line-height: 20px;
-  opacity: 1; cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  opacity: 1;
+  cursor: pointer;
   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),
     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);
-  > span { display: inline-flex; color: inherit; }
-  svg { display: block; width: 12px; height: 12px; fill: currentColor; transform-origin: center; }
-  &:hover:not(:disabled), &[aria-expanded='true'] {
-    color: var(--rv-configurator-accent-text, var(--rv-ui-field-accent-text, var(--rv-ui-accent)));
+  > span {
+    display: inline-flex;
+    color: inherit;
+  }
+  svg {
+    display: block;
+    width: 12px;
+    height: 12px;
+    fill: currentColor;
+    transform-origin: center;
+  }
+  &:hover:not(:disabled),
+  &[aria-expanded='true'] {
+    color: var(
+      --rv-configurator-accent-text,
+      var(--rv-ui-field-accent-text, var(--rv-ui-accent))
+    );
     background: color-mix(in srgb, var(--rv-ui-accent) 10%, transparent);
   }
-  &:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: 1px; }
-  &:disabled { opacity: .35; cursor: default; }
-  @media (prefers-reduced-motion: reduce) { transition: none; }
+  &:focus-visible {
+    outline: 2px solid var(--rv-ui-accent);
+    outline-offset: 1px;
+  }
+  &:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }

package/styles/_loading.scss

@@ -7,7 +7,8 @@
   border: $width solid var(--rv-ui-border);
   border-block-start-color: var(--rv-ui-accent);
   border-radius: 50%;
-  animation: rv-ui-spin calc(var(--rv-ui-motion-normal, 160ms) * 6.25) linear infinite;
+  animation: rv-ui-spin calc(var(--rv-ui-motion-normal, 160ms) * 6.25) linear
+    infinite;
 }
 @mixin overlay {
   position: absolute;
@@ -16,5 +17,13 @@
   justify-content: center;
   background: color-mix(in srgb, var(--rv-ui-surface, white) 70%, transparent);
 }
-@keyframes rv-ui-spin { to { transform: rotate(360deg); } }
-@media (prefers-reduced-motion: reduce) { .rv-spinner > span { animation: none; } }
+@keyframes rv-ui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .rv-spinner > span {
+    animation: none;
+  }
+}

package/styles/_motion.scss

@@ -5,11 +5,13 @@
   --rv-ui-motion-normal: 160ms;
   --rv-ui-motion-enter: 180ms;
   --rv-ui-motion-exit: 120ms;
-  --rv-ui-motion-ease: cubic-bezier(.2, 0, 0, 1);
+  --rv-ui-motion-ease: cubic-bezier(0.2, 0, 0, 1);
 }
 
 @mixin immediate {
-  &, &::before, &::after {
+  &,
+  &::before,
+  &::after {
     animation: none !important;
     transition: none !important;
     scroll-behavior: auto !important;
@@ -29,15 +31,22 @@
   --rv-ui-motion-exit: 0ms;
   --rv-ui-transition: 0s;
   @include immediate;
-  * { @include immediate; }
+  * {
+    @include immediate;
+  }
 }
 
 @keyframes rv-ui-surface-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 [data-rv-ui-surface]:not(.rv-status-feedback):not([data-status-feedback-exit]) {
-  animation: rv-ui-surface-in var(--rv-ui-motion-enter, 180ms) var(--rv-ui-motion-ease, ease-out);
+  animation: rv-ui-surface-in var(--rv-ui-motion-enter, 180ms)
+    var(--rv-ui-motion-ease, ease-out);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -50,9 +59,23 @@
     --rv-ui-transition: 0s;
   }
   // Shared controls can also be mounted independently or in body-level portals.
-  :where([class^='rv-'], [class*=' rv-'], [class^='revo-'], [class*=' revo-'],
-    .avatar-cell, .range_container, [data-rv-ui-surface]),
-  :where(.rv-ui, .rv-native-controls, .rv-dialog-overlay, .revo-calendar, .range_container) * {
+  :where(
+    [class^='rv-'],
+    [class*=' rv-'],
+    [class^='revo-'],
+    [class*=' revo-'],
+    .avatar-cell,
+    .range_container,
+    [data-rv-ui-surface]
+  ),
+  :where(
+      .rv-ui,
+      .rv-native-controls,
+      .rv-dialog-overlay,
+      .revo-calendar,
+      .range_container
+    )
+    * {
     @include immediate;
   }
 }