@revolist/ui 4.0.4-rc → 4.0.4

package/styles/_primitives.scss

@@ -17,7 +17,8 @@
   text-decoration: none;
   white-space: nowrap;
   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),
     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);
@@ -41,25 +42,46 @@
   @extend %rv-btn-base;
   // Transparent adapters add the base class even when a variant is supplied.
   // Default colors must never override a variant's hover or active state.
-  &:where(:not(.rv-btn-solid, .rv-btn-primary, .rv-btn-danger, .rv-btn-danger-outline, .rv-btn-danger-ghost, .rv-btn-secondary, .rv-btn-ghost, .rv-btn-link, .rv-btn-tab)) {
+  &:where(
+    :not(
+      .rv-btn-solid,
+      .rv-btn-primary,
+      .rv-btn-danger,
+      .rv-btn-danger-outline,
+      .rv-btn-danger-ghost,
+      .rv-btn-secondary,
+      .rv-btn-ghost,
+      .rv-btn-link,
+      .rv-btn-tab
+    )
+  ) {
     background: var(--rv-ui-btn-outline-bg);
     border-color: var(--rv-ui-btn-outline-border);
     color: var(--rv-ui-btn-outline-fg);
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: var(--rv-ui-btn-outline-bg-hover);
       border-color: var(--rv-ui-btn-outline-border-hover);
     }
   }
 }
 
+.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;
   background: var(--rv-ui-btn-bg);
   color: var(--rv-ui-btn-fg);
 
-  &:hover  { background: var(--rv-ui-btn-bg-hover); }
-  &:active { background: var(--rv-ui-btn-bg-hover); }
+  &:hover {
+    background: var(--rv-ui-btn-bg-hover);
+  }
+  &:active {
+    background: var(--rv-ui-btn-bg-hover);
+  }
 }
 
 .rv-btn-primary {
@@ -67,8 +89,12 @@
   background: var(--rv-ui-accent);
   color: var(--rv-ui-accent-fg);
 
-  &:hover  { background: var(--rv-ui-accent-hover); }
-  &:active { background: var(--rv-ui-accent-hover); }
+  &:hover {
+    background: var(--rv-ui-accent-hover);
+  }
+  &:active {
+    background: var(--rv-ui-accent-hover);
+  }
 }
 
 .rv-btn-danger,
@@ -91,7 +117,9 @@
   color: var(--rv-ui-btn-danger-fg);
 
   &:hover,
-  &:active { background: var(--rv-ui-btn-danger-bg-hover); }
+  &:active {
+    background: var(--rv-ui-btn-danger-bg-hover);
+  }
 }
 
 .rv-btn-secondary {
@@ -99,8 +127,12 @@
   background: var(--rv-ui-btn-secondary-bg);
   color: var(--rv-ui-btn-secondary-fg);
 
-  &:hover  { background: var(--rv-ui-btn-secondary-bg-hover); }
-  &:active { background: var(--rv-ui-btn-secondary-bg-hover); }
+  &:hover {
+    background: var(--rv-ui-btn-secondary-bg-hover);
+  }
+  &:active {
+    background: var(--rv-ui-btn-secondary-bg-hover);
+  }
 }
 
 .rv-btn-ghost {
@@ -108,8 +140,12 @@
   background: transparent;
   color: inherit;
 
-  &:hover  { background: var(--rv-ui-btn-ghost-hover-bg); }
-  &:active { background: var(--rv-ui-btn-ghost-active-bg); }
+  &:hover {
+    background: var(--rv-ui-btn-ghost-hover-bg);
+  }
+  &:active {
+    background: var(--rv-ui-btn-ghost-active-bg);
+  }
 }
 
 /* ─── Toggle switch ───────────────────────────────────────────────────────── */
@@ -163,8 +199,12 @@ label.rv-switch-label {
   overflow: hidden;
   clip: rect(0 0 0 0);
 
-  &:checked + .rv-switch-track { background: var(--rv-ui-accent); }
-  &:checked + .rv-switch-track .rv-switch-thumb { inset-inline-start: 15px; }
+  &:checked + .rv-switch-track {
+    background: var(--rv-ui-accent);
+  }
+  &:checked + .rv-switch-track .rv-switch-thumb {
+    inset-inline-start: 15px;
+  }
   &:focus-visible + .rv-switch-track {
     outline: 2px solid var(--rv-ui-accent);
     outline-offset: 3px;
@@ -182,7 +222,8 @@ label.rv-switch-label {
   box-sizing: border-box;
   border-radius: 999px;
   background: var(--rv-ui-switch-track-off);
-  transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
+  transition: background-color var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, ease);
 }
 
 .rv-switch-thumb {
@@ -193,7 +234,8 @@ label.rv-switch-label {
   border-radius: 50%;
   background: var(--rv-ui-switch-thumb);
   box-shadow: 0 1px 3px var(--rv-ui-shadow);
-  transition: inset-inline-start var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, ease);
+  transition: inset-inline-start var(--rv-ui-motion-normal, 160ms)
+    var(--rv-ui-motion-ease, ease);
 }
 
 .rv-switch[aria-checked='true'] .rv-switch-track {
@@ -245,6 +287,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;
@@ -270,7 +320,10 @@ label.rv-switch-label {
     cursor: pointer;
     user-select: none;
     color: inherit;
-    transition: 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);
+    transition:
+      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);
   }
 
   & + & span {
@@ -301,7 +354,10 @@ label.rv-switch-label {
   line-height: 1;
   opacity: 0.5;
   padding: 0 2px;
-  transition: opacity 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);
+  transition:
+    opacity 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);
 
   &:hover:not(:disabled) {
     opacity: 1;
@@ -333,17 +389,26 @@ label.rv-switch-label {
   cursor: pointer;
   white-space: nowrap;
   line-height: 1.4;
-  transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
+  transition: background-color var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, ease);
 
-  &:hover  { background: var(--rv-ui-btn-secondary-bg-hover); }
-  &:active { opacity: 0.75; }
-  &:disabled, &[disabled] { pointer-events: none; opacity: 0.5; }
+  &:hover {
+    background: var(--rv-ui-btn-secondary-bg-hover);
+  }
+  &:active {
+    opacity: 0.75;
+  }
+  &:disabled,
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 }
 
 /* ─── 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">
@@ -374,7 +439,9 @@ label.rv-switch-label {
 
 @media (prefers-reduced-motion: reduce) {
   .rv-switch-track,
-  .rv-switch-thumb { transition: none; }
+  .rv-switch-thumb {
+    transition: none;
+  }
 }
 
 /* ─── Compact choice chips ───────────────────────────────────────────────── */
@@ -385,6 +452,37 @@ 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;
@@ -400,14 +498,18 @@ label.rv-switch-label {
   line-height: 1;
   white-space: nowrap;
   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),
     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);
 
-  &:hover:not(:disabled) { background: var(--rv-ui-surface-hover); }
+  &:hover:not(:disabled) {
+    background: var(--rv-ui-surface-hover);
+  }
 
-  &[aria-pressed='true'], &[data-selected='true'] {
+  &[aria-pressed='true'],
+  &[data-selected='true'] {
     border-color: transparent;
     background: var(--rv-ui-choice-chip-selected-bg, var(--rv-ui-selected-bg));
     color: var(--rv-ui-selected-fg);
@@ -429,7 +531,8 @@ label.rv-switch-label {
   border-color: var(--rv-ui-border);
   background: var(--rv-ui-surface);
 
-  &[aria-pressed='true'], &[data-selected='true'] {
+  &[aria-pressed='true'],
+  &[data-selected='true'] {
     border-color: transparent;
     background: var(--rv-ui-choice-chip-selected-bg, var(--rv-ui-selected-bg));
   }
@@ -472,8 +575,8 @@ label.rv-switch-label {
   line-height: 1;
   cursor: pointer;
   padding: 0;
-  transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
+  transition: background-color var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, ease);
 
   &:hover {
     background: var(--rv-ui-btn-ghost-hover-bg);
@@ -484,24 +587,39 @@ label.rv-switch-label {
 
 .rv-segmented-switch,
 .rv-value-selection-editor {
-  --rv-ui-accent-text: color-mix(in srgb, var(--rv-ui-accent) var(--rv-ui-accent-text-weight, 90%), var(--rv-ui-accent-text-base, black));
+  --rv-ui-accent-text: color-mix(
+    in srgb,
+    var(--rv-ui-accent) var(--rv-ui-accent-text-weight, 90%),
+    var(--rv-ui-accent-text-base, black)
+  );
 }
 
 .rv-segmented-switch {
-  --rv-segmented-theme-item-hover-bg: color-mix(in srgb, var(--rv-ui-text) 8%, var(--rv-ui-surface-sunken));
+  --rv-segmented-theme-item-hover-bg: color-mix(
+    in srgb,
+    var(--rv-ui-text) 8%,
+    var(--rv-ui-surface-sunken)
+  );
   display: inline-flex;
   box-sizing: border-box;
   height: 37px;
   align-items: center;
   gap: 2px;
-  background: var(--rv-segmented-bg, var(--rv-ah-bg-up, var(--rv-segmented-theme-bg, var(--rv-ui-surface-sunken))));
+  background: var(
+    --rv-segmented-bg,
+    var(
+      --rv-ah-bg-up,
+      var(--rv-segmented-theme-bg, var(--rv-ui-surface-sunken))
+    )
+  );
   border: 1px solid var(--rv-segmented-border, var(--rv-ah-border, transparent));
   border-radius: 10px;
   padding: 2px;
   box-shadow: none;
 }
 
-:where(.dark, [data-theme^='dark'], revo-grid[theme^='dark']) .rv-segmented-switch,
+:where(.dark, [data-theme^='dark'], revo-grid[theme^='dark'])
+  .rv-segmented-switch,
 .rv-segmented-switch[data-theme^='dark'] {
   --rv-segmented-theme-bg: var(--rv-ui-surface-sunken);
   --rv-segmented-theme-border: var(--rv-ui-border);
@@ -527,14 +645,18 @@ label.rv-switch-label {
   border-radius: 7px;
   padding: 0 14px;
   background: transparent;
-  color: var(--rv-segmented-item-color, var(--rv-ah-text-2, var(--rv-segmented-theme-item-color, var(--rv-ui-text))));
+  color: var(
+    --rv-segmented-item-color,
+    var(--rv-ah-text-2, var(--rv-segmented-theme-item-color, var(--rv-ui-text)))
+  );
   cursor: pointer;
   font: inherit;
   font-size: 13px;
   font-weight: 400;
   line-height: 1;
   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);
 }
@@ -553,21 +675,50 @@ label.rv-switch-label {
 }
 
 .rv-segmented-switch-item:where(:not(.on)):hover:not(:disabled) {
-  background: var(--rv-segmented-item-hover-bg, var(--rv-segmented-theme-item-hover-bg, var(--rv-ui-surface-hover)));
-  color: var(--rv-segmented-item-hover-color, var(--rv-ah-text-2, var(--rv-segmented-theme-item-hover-color, var(--rv-ui-text))));
+  background: var(
+    --rv-segmented-item-hover-bg,
+    var(--rv-segmented-theme-item-hover-bg, var(--rv-ui-surface-hover))
+  );
+  color: var(
+    --rv-segmented-item-hover-color,
+    var(
+      --rv-ah-text-2,
+      var(--rv-segmented-theme-item-hover-color, var(--rv-ui-text))
+    )
+  );
 }
 
 .rv-segmented-switch-item.on {
-  background: var(--rv-segmented-active-bg, var(--rv-ah-bg, var(--rv-segmented-theme-active-bg, var(--rv-ui-surface))));
-  color: var(--rv-segmented-active-color, var(--rv-ui-selected-accent-fg, var(--rv-ui-accent-text)));
+  background: var(
+    --rv-segmented-active-bg,
+    var(--rv-ah-bg, var(--rv-segmented-theme-active-bg, var(--rv-ui-surface)))
+  );
+  color: var(
+    --rv-segmented-active-color,
+    var(--rv-ui-selected-accent-fg, var(--rv-ui-accent-text))
+  );
   font-weight: 500;
-  border-color: var(--rv-segmented-active-border, var(--rv-segmented-theme-active-border, var(--rv-ui-border)));
+  border-color: var(
+    --rv-segmented-active-border,
+    var(--rv-segmented-theme-active-border, var(--rv-ui-border))
+  );
   box-shadow: none;
 }
 
 .rv-segmented-switch-item:focus-visible {
-  outline: 2px solid var(--rv-segmented-focus-outline, var(--rv-ah-bg, var(--rv-segmented-theme-focus-outline, var(--rv-ui-text-muted))));
-  box-shadow: 0 0 0 4px var(--rv-segmented-focus-ring, color-mix(in srgb, var(--rv-ui-accent) 28%, transparent));
+  outline: 2px solid
+    var(
+      --rv-segmented-focus-outline,
+      var(
+        --rv-ah-bg,
+        var(--rv-segmented-theme-focus-outline, var(--rv-ui-text-muted))
+      )
+    );
+  box-shadow: 0 0 0 4px
+    var(
+      --rv-segmented-focus-ring,
+      color-mix(in srgb, var(--rv-ui-accent) 28%, transparent)
+    );
 }
 
 .rv-segmented-switch-item:disabled {
@@ -581,14 +732,27 @@ label.rv-switch-label {
   font-size: 9.5px;
   padding: 1px 5px;
   border-radius: 4px;
-  background: var(--rv-segmented-count-bg, var(--rv-ah-bg-up, var(--rv-ui-surface-sunken)));
-  color: var(--rv-segmented-count-color, var(--rv-ah-text-2, var(--rv-ui-text-muted)));
-  border: 1px solid var(--rv-segmented-count-border, var(--rv-ah-border, var(--rv-ui-border)));
+  background: var(
+    --rv-segmented-count-bg,
+    var(--rv-ah-bg-up, var(--rv-ui-surface-sunken))
+  );
+  color: var(
+    --rv-segmented-count-color,
+    var(--rv-ah-text-2, var(--rv-ui-text-muted))
+  );
+  border: 1px solid
+    var(--rv-segmented-count-border, var(--rv-ah-border, var(--rv-ui-border)));
 }
 
 .rv-segmented-switch-item.on .rv-segmented-switch-count {
-  background: var(--rv-segmented-active-count-bg, var(--rv-ah-bg-hover, var(--rv-ui-surface-sunken)));
-  color: var(--rv-segmented-active-count-color, var(--rv-ah-text-2, var(--rv-ui-text-muted)));
+  background: var(
+    --rv-segmented-active-count-bg,
+    var(--rv-ah-bg-hover, var(--rv-ui-surface-sunken))
+  );
+  color: var(
+    --rv-segmented-active-count-color,
+    var(--rv-ah-text-2, var(--rv-ui-text-muted))
+  );
 }
 
 .rv-search-input {
@@ -604,7 +768,10 @@ label.rv-switch-label {
   align-items: center;
   justify-content: center;
   transform: translateY(-50%);
-  color: var(--rv-search-input-icon-color, var(--rv-ah-text-2, var(--rv-ui-text-muted)));
+  color: var(
+    --rv-search-input-icon-color,
+    var(--rv-ah-text-2, var(--rv-ui-text-muted))
+  );
   pointer-events: none;
 }
 
@@ -614,8 +781,12 @@ label.rv-switch-label {
   height: var(--rv-search-input-height, var(--rv-control-height, 32px));
   min-height: var(--rv-search-input-height, var(--rv-control-height, 32px));
   appearance: none;
-  background: var(--rv-search-input-bg, var(--rv-ah-bg-input, var(--rv-ui-surface-sunken)));
-  border: 1px solid var(--rv-search-input-border, var(--rv-ah-border, var(--rv-ui-border)));
+  background: var(
+    --rv-search-input-bg,
+    var(--rv-ah-bg-input, var(--rv-ui-surface-sunken))
+  );
+  border: 1px solid
+    var(--rv-search-input-border, var(--rv-ah-border, var(--rv-ui-border)));
   border-radius: 8px;
   padding-block: 0;
   padding-inline: 32px 38px;
@@ -625,7 +796,8 @@ label.rv-switch-label {
   font-size: var(--rv-control-font-size, 0.875rem);
   transition:
     border-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);
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease);
 }
 
 .rv-search-input > input[type='search']::-webkit-search-cancel-button {
@@ -633,13 +805,22 @@ label.rv-switch-label {
 }
 
 .rv-search-input > input:is([type='search'], [type='text'])::placeholder {
-  color: var(--rv-search-input-placeholder-color, var(--rv-ah-text-2, var(--rv-ui-text-muted)));
+  color: var(
+    --rv-search-input-placeholder-color,
+    var(--rv-ah-text-2, var(--rv-ui-text-muted))
+  );
 }
 
 .rv-search-input > input:is([type='search'], [type='text']):focus {
   transition: none;
-  border-color: var(--rv-search-input-focus-border, var(--rv-ah-border-strong, var(--rv-ui-border-strong)));
-  background: var(--rv-search-input-focus-bg, var(--rv-ah-bg, var(--rv-ui-surface)));
+  border-color: var(
+    --rv-search-input-focus-border,
+    var(--rv-ah-border-strong, var(--rv-ui-border-strong))
+  );
+  background: var(
+    --rv-search-input-focus-bg,
+    var(--rv-ah-bg, var(--rv-ui-surface))
+  );
 }
 
 .rv-search-input--no-icon > input:is([type='search'], [type='text']) {
@@ -656,9 +837,19 @@ label.rv-switch-label {
   top: 50%;
   transform: translateY(-50%);
   font-size: 10px;
-  color: var(--rv-search-input-shortcut-color, var(--rv-ah-text-2, var(--rv-ui-text-muted)));
-  background: var(--rv-search-input-shortcut-bg, var(--rv-ah-canvas, var(--rv-ui-surface-elevated)));
-  border: 1px solid var(--rv-search-input-shortcut-border, var(--rv-ah-border, var(--rv-ui-border)));
+  color: var(
+    --rv-search-input-shortcut-color,
+    var(--rv-ah-text-2, var(--rv-ui-text-muted))
+  );
+  background: var(
+    --rv-search-input-shortcut-bg,
+    var(--rv-ah-canvas, var(--rv-ui-surface-elevated))
+  );
+  border: 1px solid
+    var(
+      --rv-search-input-shortcut-border,
+      var(--rv-ah-border, var(--rv-ui-border))
+    );
   padding: 1px 5px;
   border-radius: 3px;
 }
@@ -749,7 +940,9 @@ button.rv-badge--inline {
   color: var(--rv-ui-selected-accent-fg, var(--rv-ui-accent-text));
 }
 
-.rv-badge--rounded { border-radius: 4px; }
+.rv-badge--rounded {
+  border-radius: 4px;
+}
 
 .rv-btn:disabled .rv-badge,
 .rv-btn[disabled] .rv-badge {
@@ -775,35 +968,47 @@ 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; }
-.rv-btn-icon .rv-badge { position: absolute; inset-block-start: -5px; inset-inline-end: -6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; pointer-events: none; }
+.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-btn-icon {
+  position: relative;
+  overflow: visible;
+}
+.rv-btn-icon .rv-badge {
+  position: absolute;
+  inset-block-start: -5px;
+  inset-inline-end: -6px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 10px;
+  line-height: 16px;
+  pointer-events: none;
+}
 // Reserve the icon badges' overhang so toolbars can center controls without clipping them.
-.rv-history-controls { display: flex; align-items: center; gap: 12px; padding-block: 5px; padding-inline-end: 6px; }
+.rv-history-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-block: 5px;
+  padding-inline-end: 6px;
+}
 
 // Native disabled buttons still expose their explanation on pointer hover.
-.rv-btn-icon:disabled { pointer-events: auto; }
+.rv-btn-icon:disabled {
+  pointer-events: auto;
+}
 
 // Contained tool strips share geometry across native Charts and Preact hosts.
 .rv-toolbar--surface {
@@ -827,8 +1032,9 @@ button.rv-badge--inline {
 .rv-toolbar--surface > .rv-btn-icon[aria-pressed='true']:hover:not(:disabled) {
   background: var(--rv-ui-selected-bg);
 }
-.rv-svg-icon > svg[fill='none'] { fill: none; }
-
+.rv-svg-icon > svg[fill='none'] {
+  fill: none;
+}
 
 .rv-choice-chip--composite {
   position: relative;
@@ -836,13 +1042,26 @@ button.rv-badge--inline {
   align-items: center;
   gap: 4px;
   cursor: default;
-  .rv-choice-chip-label { min-width: 0; }
+  .rv-choice-chip-label {
+    min-width: 0;
+  }
   button.rv-choice-chip-label {
-    appearance: none; border: 0; padding: 0; margin: 0;
-    background: transparent; color: inherit; font: inherit; cursor: pointer;
-    &:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: 2px; }
+    appearance: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    &:focus-visible {
+      outline: 2px solid var(--rv-ui-accent);
+      outline-offset: 2px;
+    }
+  }
+  &[aria-disabled='true'] {
+    opacity: 0.5;
   }
-  &[aria-disabled='true'] { opacity: .5; }
 }
 button.rv-choice-chip-info {
   box-sizing: border-box;
@@ -859,10 +1078,13 @@ button.rv-choice-chip-info {
   border-radius: 50%;
   background: transparent;
   color: var(--rv-ui-text-muted);
-  font: 600 13px/1 system-ui, sans-serif;
+  font:
+    600 13px/1 system-ui,
+    sans-serif;
   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);
 }
 
@@ -878,15 +1100,19 @@ button.rv-choice-chip-info:focus-visible,
   outline-offset: 1px;
 }
 
-
-
-.rv-choice-chip[data-color='true']:is([aria-pressed='true'], [data-selected='true']) {
+.rv-choice-chip[data-color='true']:is(
+    [aria-pressed='true'],
+    [data-selected='true']
+  ) {
   border-color: transparent;
-  background: color-mix(in srgb, var(--rv-choice-chip-color) 9%, var(--rv-ui-surface));
+  background: color-mix(
+    in srgb,
+    var(--rv-choice-chip-color) 9%,
+    var(--rv-ui-surface)
+  );
   color: var(--rv-ui-text);
 }
 
-
 .rv-btn-tab {
   @extend %rv-btn-base;
   min-height: 40px;
@@ -908,7 +1134,8 @@ button.rv-choice-chip-info:focus-visible,
     content: '';
   }
 
-  &:hover:not(:disabled), &[aria-selected='true'] {
+  &:hover:not(:disabled),
+  &[aria-selected='true'] {
     color: var(--rv-tab-accent, var(--rv-ui-accent-text));
   }
   &[aria-selected='true']::after {
@@ -934,31 +1161,63 @@ button.rv-choice-chip-info:focus-visible,
   color: var(--rv-ui-accent-text);
   font-weight: 400;
   text-decoration: none;
-  svg { width: 12px; height: 12px; fill: currentColor; }
-  &:hover:not(:disabled) { background: transparent; text-decoration: underline; }
-  &:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: 2px; box-shadow: none; }
+  svg {
+    width: 12px;
+    height: 12px;
+    fill: currentColor;
+  }
+  &:hover:not(:disabled) {
+    background: transparent;
+    text-decoration: underline;
+  }
+  &:focus-visible {
+    outline: 2px solid var(--rv-ui-accent);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
 }
 
 // Forced colors suppress box shadows; focus must remain a visible outline.
 @media (forced-colors: active) {
-  :is(.rv-btn, .rv-btn-solid, .rv-btn-primary, .rv-btn-ghost, .rv-btn-link,
-    .rv-control, .rv-choice-chip, .rv-segmented-switch-item, .rv-rating-choice):focus-visible {
+  :is(
+    .rv-btn,
+    .rv-btn-solid,
+    .rv-btn-primary,
+    .rv-btn-ghost,
+    .rv-btn-link,
+    .rv-control,
+    .rv-choice-chip,
+    .rv-segmented-switch-item,
+    .rv-rating-choice
+  ):focus-visible {
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
 }
 
 // Busy is unavailable for interaction but retains its enabled variant paint.
-.rv-btn.rv-btn-busy:disabled { pointer-events: auto; cursor: progress; }
-.rv-btn.rv-btn-busy:not(.rv-btn-busy-disabled):disabled { opacity: 1; }
+.rv-btn.rv-btn-busy:disabled {
+  pointer-events: auto;
+  cursor: progress;
+}
+.rv-btn.rv-btn-busy:not(.rv-btn-busy-disabled):disabled {
+  opacity: 1;
+}
 .rv-button-spinner {
   @include loading.ring(1em, 2px);
   flex: 0 0 auto;
   border-color: color-mix(in srgb, currentColor 30%, transparent);
   border-block-start-color: currentColor;
 }
-.rv-btn-busy.rv-btn-icon > :not(.rv-button-spinner) { display: none; }
+.rv-btn-busy.rv-btn-icon > :not(.rv-button-spinner) {
+  display: none;
+}
 
 // Applies uniformly to action variants, icon controls and navigation buttons.
-.rv-btn-rounded.rv-btn-rounded { border-radius: 9999px; }
-.rv-btn-rounded[aria-disabled='true'] { opacity: .5; pointer-events: none; }
+.rv-btn-rounded.rv-btn-rounded {
+  border-radius: 9999px;
+}
+.rv-btn-rounded[aria-disabled='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+}