@revolist/ui 4.0.4-rc → 4.0.6-rc

package/resource-picker/resource-picker.js

@@ -1,7 +1,7 @@
 import { c as e, i as t, n, o as r, t as i } from "../_chunks/hooks.module-CG3gN83z.js";
 import { t as a } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { t as o } from "../_chunks/chevron-down-GbplLa6s.js";
-import { createControlId as s } from "../core/control-id.js";
+import { createControlId as o } from "../core/control-id.js";
+import { t as s } from "../_chunks/chevron-down-GbplLa6s.js";
 import { t as ee } from "../_chunks/xmark-DD_PBvZI.js";
 import { SearchInput as c } from "../search-input/index.js";
 import { resourcePickerClasses as l, resourcePickerDataAttribute as u, resourcePickerIdKey as d } from "./resource-picker.utils.js";
@@ -10,7 +10,7 @@ import { ResourcePickerOption as p } from "./resource-picker-option.js";
 import { ResourcePickerPopup as m } from "./resource-picker-popup.js";
 //#region src/resource-picker/resource-picker.tsx
 function h({ resources: h, selectedResourceIds: v, text: y, onChange: b, classNames: x, disabled: S = !1, readOnly: C = !1, presentation: w = "inline", multiple: T = !0, preserveOrder: E = !1, unassigned: D, resourceDataAttribute: O, isResourceDisabled: k, getAvatarColor: A }) {
-	let j = i(null), M = i(null), N = i(null), P = i(null), F = i(!1), [I] = t(() => s("rv-resource-list")), L = `${I}-popup`, R = w === "dropdown", [z, B] = t(!1), [V, H] = t(""), [U, W] = t(0), G = r(() => {
+	let j = i(null), M = i(null), N = i(null), P = i(null), F = i(!1), [I] = t(() => o("rv-resource-list")), L = `${I}-popup`, R = w === "dropdown", [z, B] = t(!1), [V, H] = t(""), [U, W] = t(0), G = r(() => {
 		B(!1), H("");
 	}, []), K = new Set(v.map(d)), q = n(() => E ? [...h] : [...h].sort((e, t) => e.name.localeCompare(t.name, void 0, {
 		numeric: !0,
@@ -178,7 +178,7 @@ function h({ resources: h, selectedResourceIds: v, text: y, onChange: b, classNa
 			}), /* @__PURE__ */ a("span", {
 				class: "rv-resource-picker__chevron",
 				"aria-hidden": "true",
-				dangerouslySetInnerHTML: { __html: o }
+				dangerouslySetInnerHTML: { __html: s }
 			})]
 		}) : null, R ? z && Q ? /* @__PURE__ */ a(m, {
 			triggerRef: M,

package/rich-text/engine.d.ts

@@ -11,6 +11,7 @@ export declare function createHtmlEngine(root: HTMLElement, html: string, onChan
     setHtml: (value: string) => void;
     format: (mark: HtmlFormat) => void;
     block: (value: HtmlBlock) => void;
+    focus: () => void;
     captureSelection: () => void;
     link: (value: string) => boolean;
     destroy: () => void;

package/rich-text/format-html.d.ts

@@ -0,0 +1,2 @@
+/** Display-only indentation: keep inline phrases and preformatted content intact. */
+export declare function formatRichTextHtml(html: string, doc?: Document): string;

package/rich-text/index.d.ts

@@ -2,6 +2,8 @@ import { EditorActionText, EditorCommitOptions } from '../editor-actions';
 import { HtmlEditorText } from './translations';
 export { defaultHtmlEditorText, type HtmlEditorText } from './translations';
 export interface HtmlEditorProps extends EditorCommitOptions {
+    /** Override formatRichTextHtml for source presentation on entry, never while typing. */
+    formatSource?: (html: string) => string;
     value: string;
     onApply: (value: string) => void;
     onCancel: () => void;
@@ -13,3 +15,5 @@ export interface HtmlEditorProps extends EditorCommitOptions {
 export declare function HtmlEditor(props: HtmlEditorProps): import("../_vendor/preact/src/index").JSX.Element;
 export { sanitizeRichTextHtml, isSafeRichTextLink } from './model';
 export { htmlRenderNodes, type HtmlRenderNode } from './render-model';
+export { formatRichTextHtml } from './format-html';
+export { HtmlSyntax } from './syntax';

package/rich-text/index.js

@@ -1 +1 @@
-export { t as HtmlEditor, r as defaultHtmlEditorText, n as htmlRenderNodes, i as isSafeRichTextLink, a as sanitizeRichTextHtml } from "../_chunks/rich-text-CH7gIqOS.js";
+export { t as HtmlEditor, s as HtmlSyntax, r as defaultHtmlEditorText, i as formatRichTextHtml, n as htmlRenderNodes, a as isSafeRichTextLink, o as sanitizeRichTextHtml } from "../_chunks/rich-text-5rnc8lpI.js";

package/rich-text/model.d.ts

@@ -1,4 +1,6 @@
 export declare function isSafeRichTextLink(value: string): boolean;
+/** Remove rich marks inside code while preserving line breaks and selection markers. */
+export declare function flattenCode(element: Element): void;
 /** Parse inertly, then rebuild nodes; never mount user-provided HTML or attributes. */
 export declare function richTextFragment(html: string, doc?: Document): DocumentFragment;
 export declare function sanitizeRichTextHtml(html: string, doc?: Document): string;

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/search-input/index.js

@@ -1,6 +1,6 @@
 import { c as e } from "../_chunks/preact.module-BBM36DnO.js";
 import { t } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { n } from "../_chunks/native.view-ByyZ1CT5.js";
+import { n } from "../_chunks/native-Blr3byjO.js";
 //#region src/search-input/index.tsx
 function r() {
 	return /* @__PURE__ */ t("svg", {

package/search-input/native.d.ts

@@ -1,2 +1,21 @@
-/** Compatibility entry; markup is owned by the Preact TSX implementation. */
-export * from './native.view';
+export interface SearchPresentation {
+    rootClassName?: string;
+    inputClassName?: string;
+    iconClassName?: string;
+    shortcutClassName?: string;
+    hideIcon?: boolean;
+    icon?: any;
+    shortcut?: any;
+    leading?: any;
+    trailing?: any;
+    testId?: string;
+    inputAttributes?: Record<string, any>;
+}
+/** One search composition for native, grid and Preact rendering. */
+export declare function renderSearchInput<H extends (...args: any[]) => any>(h: H, options: SearchPresentation): ReturnType<H>;
+export declare function createSearchInput(document: Document, options: Omit<SearchPresentation, 'icon'> & {
+    iconSvg: string;
+}): {
+    root: HTMLElement;
+    input: HTMLInputElement;
+};

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-pFMuHf3G.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/_alert.scss

@@ -8,7 +8,7 @@
   padding: 12px 16px;
   border: 1px solid var(--rv-ui-border);
   border-radius: var(--rv-ui-radius, 8px);
-  background: var(--rv-ui-surface);
+  background: var(--rv-alert-surface, var(--rv-ui-surface));
   color: var(--rv-ui-text);
   font-size: 14px;
   font-weight: 400;
@@ -22,10 +22,24 @@
 .rv-alert__title { font-weight: 500; }
 .rv-alert__description { color: var(--rv-ui-text-muted); }
 .rv-alert__content > p, .rv-alert__description > p { margin: 0; }
-.rv-alert--danger { --rv-alert-tone: var(--rv-ui-danger); color: var(--rv-alert-tone); }
+.rv-alert--danger,
+.rv-alert--warning,
+.rv-alert--success { border: 0; }
+
+.rv-alert--danger {
+  --rv-alert-tone: var(--rv-ui-danger);
+  --rv-alert-surface: var(--rv-ui-danger-surface);
+  color: var(--rv-alert-tone);
+}
 .rv-alert--danger .rv-alert__description { color: inherit; }
-.rv-alert--warning { --rv-alert-tone: var(--rv-ui-warning); }
-.rv-alert--success { --rv-alert-tone: var(--rv-ui-success); }
+.rv-alert--warning {
+  --rv-alert-tone: var(--rv-ui-warning);
+  --rv-alert-surface: var(--rv-ui-warning-surface);
+}
+.rv-alert--success {
+  --rv-alert-tone: var(--rv-ui-success);
+  --rv-alert-surface: var(--rv-ui-success-surface);
+}
 
 .rv-alert--with-actions { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
 .rv-alert--with-icon.rv-alert--with-actions { grid-template-columns: 16px minmax(0, 1fr) auto; }

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/_editor-slider.scss

@@ -33,8 +33,6 @@ revo-grid, .rv-ui, :root {
       display: flex;
       align-items: center;
     }
-    // Retain the legacy hook; the shared input now owns the track fill.
-    &-fill { display: none; }
     &-input {
       @include single-slider.presentation;
       min-width: 0;