@revolist/ui 4.0.3-rc → 4.0.5-rc

package/rich-text/style.scss

@@ -1,117 +1,212 @@
+@use '../styles/filter-controls';
+
 .rv-rich-text-editor {
-  width: min(560px, calc(100vw - 48px));
+  box-sizing: border-box;
+  width: min(560px, 100%);
+  max-width: calc(100vw - 48px);
+  min-width: 0;
   &__toolbar {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 6px;
-    padding-block: 8px;
-    margin-block: 8px;
-    border-block: 1px solid var(--rv-ui-border);
-    .rv-toolbar-group { gap: 2px; padding: 0; }
-    .rv-toolbar-separator { align-self: stretch; height: auto; }
+    gap: 8px;
+    margin-block: 10px;
+    .rv-icon-toolbar { flex: 0 0 auto; }
   }
-  &__command {
-    display: inline-flex;
+  .rv-editor-actions {
+    display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
-    gap: 2px;
-    min-width: 30px;
-    min-height: 30px;
-    padding: 6px;
-    border-color: transparent;
+    gap: 8px;
+    margin-block-start: 12px;
   }
-  &__level { --rv-icon-size: 9px; }
   &__link {
     display: flex;
+    flex-wrap: wrap;
     gap: 8px;
+    margin-block-end: 8px;
+    input { flex: 1; min-width: 0; }
   }
   &__visual,
   &__source {
     box-sizing: border-box;
     width: 100%;
-    min-height: 200px;
+    min-height: 220px;
     max-height: 50vh;
     overflow: auto;
-    padding: 10px;
+    padding: 16px;
     border: 1px solid var(--rv-ui-border);
     border-radius: 6px;
     background: var(--rv-ui-surface);
     color: var(--rv-ui-text);
-    font: inherit;
-    white-space: pre-wrap;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.6;
+    text-align: start;
+    overflow-wrap: anywhere;
+    &:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: 2px; }
   }
   &__source {
-    font-family: ui-monospace, monospace;
-  }
-  &__visual[hidden] {
-    display: none;
-  }
-  &__visual a {
-    color: var(--rv-ui-accent-text);
-    text-decoration: underline;
-  }
-  &__visual pre {
-    background: var(--rv-ui-surface-sunken);
-    padding: 8px;
-  }
-  &__visual blockquote {
-    border-inline-start: 3px solid var(--rv-ui-border);
-    padding-inline-start: 12px;
-    margin-inline: 0;
-  }
-  &__visual code {
-    font-family: ui-monospace, monospace;
-    background: var(--rv-ui-surface-sunken);
+    margin-block-start: 12px;
+    min-height: 0;
+    max-height: none;
+    padding: 0;
+    overflow: hidden;
+    &:focus-within { outline: 2px solid var(--rv-ui-accent); outline-offset: 2px; box-shadow: none; }
+    .rv-highlighted-input__highlight,
+    textarea.rv-highlighted-input__input {
+      padding: 16px;
+      font: 14px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
+      letter-spacing: normal;
+      white-space: pre;
+      overflow-wrap: normal;
+      tab-size: 2;
+      text-align: start;
+    }
+    .rv-highlighted-input__highlight {
+      position: absolute;
+      inset: 0;
+      height: 100%;
+      min-height: 0;
+      overflow: hidden;
+    }
+    textarea.rv-highlighted-input__input {
+      position: relative;
+      inset: auto;
+      display: block;
+      height: 220px;
+      min-height: 220px;
+      max-height: 50vh;
+      resize: vertical;
+      overflow: auto;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      caret-color: var(--rv-ui-text);
+    }
+  }
+  &__visual[hidden] { display: none; }
+  &__visual {
+    white-space: pre-wrap;
+    p, h1, h2, h3, h4, h5, h6, pre, blockquote, ul, ol {
+      margin: 0 0 0.75em;
+    }
+    > :first-child { margin-block-start: 0; }
+    > :last-child { margin-block-end: 0; }
+    p { font: inherit; }
+    h1, h2, h3, h4, h5, h6 {
+      margin-block-start: 1em;
+      font-family: inherit;
+      font-weight: 650;
+      line-height: 1.3;
+      letter-spacing: normal;
+      color: inherit;
+    }
+    h1 { font-size: 1.65em; }
+    h2 { font-size: 1.3em; }
+    h3, h4, h5, h6 { font-size: 1.1em; }
+    strong { font-weight: 700; }
+    em { font-style: italic; }
+    s { text-decoration: line-through; }
+    ul, ol { padding-inline-start: 1.75em; list-style-position: outside; }
+    ul { list-style-type: disc; }
+    ol { list-style-type: decimal; }
+    li { margin-block: 0.25em; padding-inline-start: 0.15em; }
+    li > p { margin-block: 0; }
+    li > ul, li > ol { margin-block: 0.25em 0; }
+    blockquote {
+      border-inline-start: 3px solid var(--rv-ui-border);
+      padding-inline-start: 14px;
+      margin-inline: 0;
+      color: var(--rv-ui-text-muted, var(--rv-ui-text));
+      > :last-child { margin-block-end: 0; }
+    }
+    code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
+    code { background: var(--rv-ui-surface-sunken); padding: 0.12em 0.3em; border-radius: 3px; font-size: 0.92em; }
+    pre {
+      background: var(--rv-ui-surface-sunken);
+      border: 1px solid var(--rv-ui-border);
+      border-radius: 6px;
+      padding: 12px 14px;
+      font-size: 0.92em;
+      font-weight: 400;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      tab-size: 2;
+      code { padding: 0; background: none; border-radius: 0; font: inherit; }
+    }
+    a { color: var(--rv-ui-accent-text); text-decoration: underline; text-underline-offset: 2px; }
+  }
+  &__help {
+    margin: 8px 0 12px;
+    color: var(--rv-ui-text-muted, var(--rv-ui-text));
+    font-size: 12px;
+    line-height: 1.5;
   }
 }
 
 .rv-rich-text-cell {
+  box-sizing: border-box;
+  max-height: 100%;
   color: inherit;
   font: inherit;
+  // Core uses row height as line-height to center plain cells. Rich blocks need
+  // text-sized lines so paragraphs, quotes and lists fit inside taller rows.
+  line-height: 1.5;
+  padding-block: min(8px, max(0px, calc((var(--rg-theme-row-size, 27px) - 1.5em) / 2)));
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   overflow: hidden;
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  pre,
-  blockquote,
-  ul,
-  ol {
-    margin-block: 0;
+  p, h1, h2, h3, h4, h5, h6, pre, blockquote, ul, ol {
+    margin: 0 0 0.35em;
+    &:last-child { margin-block-end: 0; }
   }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  p { font: inherit; }
+  h1, h2, h3, h4, h5, h6 {
+    font-family: inherit;
     font-size: inherit;
     font-weight: 600;
+    line-height: inherit;
+    color: inherit;
   }
-  ul,
-  ol {
-    padding-inline-start: 1.5em;
-  }
+  strong { font-weight: 700; }
+  em { font-style: italic; }
+  s { text-decoration: line-through; }
+  ul, ol { padding-inline-start: 1.5em; list-style-position: outside; }
+  ul { list-style-type: disc; }
+  ol { list-style-type: decimal; }
+  li > p { margin-block: 0; }
+  li > ul, li > ol { margin-block: 0.15em 0; }
   blockquote {
-    border-inline-start: 2px solid currentColor;
-    padding-inline-start: 8px;
+    border-inline-start: 2px solid var(--rv-ui-border, GrayText);
+    padding-inline-start: 10px;
     margin-inline: 0;
+    color: var(--rv-ui-text-muted, inherit);
   }
   a {
-    color: inherit;
+    color: var(--rv-ui-accent-text, LinkText);
     text-decoration: underline;
     text-underline-offset: 2px;
+    text-decoration-thickness: 1px;
+    &:focus-visible { outline: 2px solid var(--rv-ui-accent, Highlight); outline-offset: 2px; border-radius: 2px; }
   }
-  code {
-    font-family: ui-monospace, monospace;
-    font-size: 0.9em;
-  }
+  code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; }
+  code { background: var(--rv-ui-surface-sunken); padding-inline: 0.2em; border-radius: 3px; }
   pre {
     white-space: pre-wrap;
+    background: var(--rv-ui-surface-sunken);
+    padding: 3px 6px;
+    border-radius: 3px;
+    line-height: 1.5;
+    tab-size: 2;
+    code { font: inherit; background: none; padding: 0; }
   }
 }
+
+.rv-html-syntax {
+  font: inherit;
+  color: var(--rv-ui-text);
+  &__tag { color: var(--rv-ui-accent-text); }
+  &__attribute { color: var(--rv-ui-warning, var(--rv-ui-accent-text)); }
+  &__string { color: var(--rv-ui-success); }
+  &__comment { color: var(--rv-ui-text-muted); }
+}

package/rich-text/syntax.d.ts

@@ -0,0 +1,5 @@
+import { h } from '../_vendor/preact/src/index';
+/** Paint HTML source as escaped text; source is never interpreted as markup. */
+export declare function HtmlSyntax({ code }: {
+    code: string;
+}): h.JSX.Element;

package/rich-text/translations.d.ts

@@ -1,5 +1,7 @@
 /** Visible and accessible labels for the shared HTML editor. */
 export interface HtmlEditorText {
+    keyboardHelp?: string;
+    codeHelp?: string;
     visual: string;
     source: string;
     label: string;

package/select.d.ts

@@ -1,8 +1,10 @@
 import { ComponentChildren, JSX } from './_vendor/preact/src/index';
-import { DropdownOption } from './dropdown/dropdown.types';
+import { DropdownEnvironment, DropdownOption } from './dropdown/dropdown.types';
 export type SelectOptionProps = JSX.IntrinsicElements['option'];
 type Attributes = Omit<JSX.IntrinsicElements['select'], 'value' | 'defaultValue' | 'onChange' | 'onInput' | 'multiple' | 'ref'>;
 export type SelectProps = Attributes & {
+    /** Optional host integration for portalled popup lifecycle and pointer releases. */
+    environment?: DropdownEnvironment;
     value?: string | number | readonly string[];
     defaultValue?: string | number | readonly string[];
     /** Optional domain policy for option descriptors; no native option nodes are mounted. */

package/select.js

@@ -1 +1 @@
-export { s as Select, c as selectOptions } from "./_chunks/native-control-C_yok8_-.js";
+export { s as Select, c as selectOptions } from "./_chunks/native-control-DO0d1kgx.js";

package/status-feedback/exit-snapshot.js

@@ -1,10 +1,10 @@
-import { isUiMotionEnabled as e } from "../core/motion.js";
-import { showTopLayerPopup as t } from "../core/top-layer-popup.js";
+import { r as e } from "../_chunks/top-layer-popup-CNSDdfJV.js";
+import { isUiMotionEnabled as t } from "../core/motion.js";
 import { animateStatusFeedback as n } from "./motion.js";
 //#region src/status-feedback/exit-snapshot.ts
 function r(r) {
 	let i = r.ownerDocument.defaultView;
-	if (!i || typeof r.animate != "function" || !e(r)) return;
+	if (!i || typeof r.animate != "function" || !t(r)) return;
 	let a = r.getBoundingClientRect(), o = r.cloneNode(!0), s = [r, ...r.querySelectorAll("*")], c = [o, ...o.querySelectorAll("*")];
 	o.removeAttribute("popover"), o.removeAttribute("id"), o.querySelectorAll("[id]").forEach((e) => e.removeAttribute("id")), o.querySelectorAll("[role], [aria-live]").forEach((e) => {
 		e.removeAttribute("role"), e.removeAttribute("aria-live");
@@ -24,7 +24,7 @@ function r(r) {
 		borderColor: l.borderColor,
 		fontFamily: l.fontFamily,
 		boxShadow: l.boxShadow
-	}), r.ownerDocument.body.append(o), t(o), s.forEach((e, t) => {
+	}), r.ownerDocument.body.append(o), e(o), s.forEach((e, t) => {
 		e.scrollTop && (c[t].scrollTop = e.scrollTop), e.scrollLeft && (c[t].scrollLeft = e.scrollLeft);
 	});
 	let u = () => {

package/status-feedback/popover.js

@@ -1,6 +1,6 @@
 import { calculateAnchoredPopoverPosition as e } from "../core/anchored-popover.js";
-import { inheritUiMotion as t } from "../core/motion.js";
-import { hideTopLayerPopup as n, showTopLayerPopup as r } from "../core/top-layer-popup.js";
+import { r as t, t as n } from "../_chunks/top-layer-popup-CNSDdfJV.js";
+import { inheritUiMotion as r } from "../core/motion.js";
 import { statusFeedbackSize as i } from "./placement.js";
 import { animateStatusFeedback as a } from "./motion.js";
 import { statusFeedbackExit as o } from "./exit-snapshot.js";
@@ -58,9 +58,9 @@ var s = 0, c = class {
 			width: s.innerWidth,
 			height: s.innerHeight
 		}, c, this.collapsed, this.options), u = l.width;
-		n.style.width = `${u}px`, n.style.maxHeight = `${l.maxHeight}px`, this.releaseMotion ??= t(o, n);
+		n.style.width = `${u}px`, n.style.maxHeight = `${l.maxHeight}px`, this.releaseMotion ??= r(o, n);
 		let d = !this.mode;
-		d && (this.removeExit?.(), this.removeExit = void 0, this.mode = r(n));
+		d && (this.removeExit?.(), this.removeExit = void 0, this.mode = t(n));
 		let f = o.getBoundingClientRect(), p = e({
 			left: f.right - u,
 			right: f.right,

package/styles/_compositions.scss

@@ -23,12 +23,12 @@
 .rv-field__error { color: var(--rv-ui-danger); font-size: 12px; }
 .rv-panel, .rv-empty-state { padding: 16px; border: 1px solid var(--rv-ui-border); border-radius: var(--rv-ui-radius, 8px); background: var(--rv-ui-surface); color: var(--rv-ui-text); }
 .rv-empty-state { text-align: center; }
-.rv-popover, .rv-menu, .rv-tooltip { border: 1px solid var(--rv-ui-border); border-radius: var(--rv-ui-radius, 8px); background: var(--rv-ui-surface-elevated); color: var(--rv-ui-text); box-shadow: 0 8px 24px var(--rv-ui-shadow); padding: 8px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; z-index: 10000; }
+.rv-popover, .rv-menu { border: 1px solid var(--rv-ui-border); border-radius: var(--rv-ui-radius, 8px); background: var(--rv-ui-surface-elevated); color: var(--rv-ui-text); box-shadow: 0 8px 24px var(--rv-ui-shadow); padding: 8px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; z-index: 10000; }
 .rv-popover[hidden] { display: none; }
 .rv-menu { display: grid; gap: 2px; }
 .rv-menu > [role='menuitem'] { justify-content: start; text-align: start; }
 .rv-menu-separator { border-block-start: 1px solid var(--rv-ui-border); margin-block: 4px; }
-.rv-tooltip { font-size: 12px; padding: 6px 10px; pointer-events: none; }
+
 .rv-radio-group { display: flex; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; margin: 0; }
 .rv-radio-group label { display: inline-flex; align-items: center; gap: 6px; }
 .rv-loading-container { position: relative; }
@@ -38,7 +38,7 @@
 
 .rv-circular-progress { width: 36px; height: 36px; stroke-width: 3; color: var(--rv-ui-accent); }
 .rv-resize-handle { position: relative; width: 12px; min-height: 48px; flex: 0 0 12px; cursor: col-resize; touch-action: none; user-select: none; }
-.rv-resize-handle::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 5px; width: 2px; border-radius: 2px; background: var(--rv-ui-border-strong); transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)); }
+.rv-resize-handle::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 5px; width: 1px; border-radius: 2px; background: var(--rv-ui-border); transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)); }
 .rv-resize-handle:hover::after, .rv-resize-handle:focus-visible::after { background: var(--rv-ui-accent); }
 .rv-resize-handle:focus-visible { outline: 2px solid var(--rv-ui-accent); }
 .rv-btn[aria-pressed='true'] { background: var(--rv-ui-selected-bg); color: var(--rv-ui-selected-accent-fg, var(--rv-ui-accent-text)); border-color: transparent; font-weight: 500; }

package/styles/_field-configurator.scss

@@ -1,3 +1,4 @@
+@use './fields-grid';
 @use './motion';
 @use './disclosure';
 @use './icon-action';
@@ -288,3 +289,148 @@ 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); }
+  .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,35 @@
+// Shared Fields-grid presentation. Grid adapters supply rows and policy.
+revo-grid.rv-configurator-fields-grid {
+  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/_primitives.scss

@@ -245,6 +245,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;
@@ -385,6 +393,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 +802,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; }