@revolist/ui 4.0.3-rc → 4.0.3

package/editor-layout/style.scss

@@ -2,7 +2,10 @@
 
 .rv-editor-split {
   display: grid;
-  grid-template-columns: var(--rv-editor-columns, minmax(0, 1fr) minmax(0, 1fr));
+  grid-template-columns: var(
+    --rv-editor-columns,
+    minmax(0, 1fr) minmax(0, 1fr)
+  );
   gap: var(--rv-editor-gap, 12px);
   min-width: 0;
   min-height: 0;
@@ -11,7 +14,8 @@
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  border: 1px solid var(--rv-editor-divider, var(--rv-dialog-border, var(--rv-ui-border)));
+  border: 1px solid
+    var(--rv-editor-divider, var(--rv-dialog-border, var(--rv-ui-border)));
   border-radius: var(--rv-editor-radius, 10px);
   background: var(--rv-dialog-bg, var(--rv-ui-surface));
 }
@@ -61,24 +65,84 @@
 }
 .rv-editor-list__item {
   transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease-out),
     color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
     opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out);
 }
-.rv-editor-list__item:hover { background: var(--rv-ui-surface-hover); }
-.rv-editor-list__item.rv-editor-list__item--selected { background: var(--rv-ui-selected-bg); color: var(--rv-ui-selected-fg); }
-.rv-editor-list__item:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: -2px; }
-@media (forced-colors: active) { .rv-editor-list__item--selected { outline: 2px solid Highlight; } }
+.rv-editor-list__item:hover {
+  background: var(--rv-ui-surface-hover);
+}
+.rv-editor-list__item.rv-editor-list__item--selected {
+  background: var(--rv-ui-selected-bg);
+  color: var(--rv-ui-selected-fg);
+}
+.rv-editor-list__item:focus-visible {
+  outline: 2px solid var(--rv-ui-accent);
+  outline-offset: -2px;
+}
+@media (forced-colors: active) {
+  .rv-editor-list__item--selected {
+    outline: 2px solid Highlight;
+  }
+}
 
-.rv-editor-list__item:disabled { opacity: .55; cursor: not-allowed; }
+.rv-editor-list__item:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
 
-.rv-editor-list__content { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; font-size: 12px; line-height: 1.4; grid-column: 1 / -1; min-width: 0; }
-.rv-editor-list__content--text { grid-template-columns: minmax(0, 1fr); }
-.rv-editor-list__icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
-.rv-editor-list__icon svg { display: block; width: 13px; height: 13px; fill: currentColor; }
-.rv-editor-list__copy { display: grid; min-width: 0; gap: 0; }
-.rv-editor-list__label, .rv-editor-list__description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.rv-editor-list__label { font-weight: var(--rv-editor-list-font-weight, 500); }
-.rv-editor-list__description { font-size: 11px; color: var(--rv-ui-text-muted); }
-.rv-editor-list__group { display: grid; gap: 2px; }
-.rv-editor-list__group-label { font-weight: var(--rv-editor-list-font-weight, inherit); padding: 8px 8px 4px; font-size: 11px; color: var(--rv-ui-text-muted); }
+.rv-editor-list__content {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  font-size: 12px;
+  line-height: 1.4;
+  grid-column: 1 / -1;
+  min-width: 0;
+}
+.rv-editor-list__content--text {
+  grid-template-columns: minmax(0, 1fr);
+}
+.rv-editor-list__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+.rv-editor-list__icon svg {
+  display: block;
+  width: 13px;
+  height: 13px;
+  fill: currentColor;
+}
+.rv-editor-list__copy {
+  display: grid;
+  min-width: 0;
+  gap: 0;
+}
+.rv-editor-list__label,
+.rv-editor-list__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rv-editor-list__label {
+  font-weight: var(--rv-editor-list-font-weight, 500);
+}
+.rv-editor-list__description {
+  font-size: 11px;
+  color: var(--rv-ui-text-muted);
+}
+.rv-editor-list__group {
+  display: grid;
+  gap: 2px;
+}
+.rv-editor-list__group-label {
+  font-weight: var(--rv-editor-list-font-weight, inherit);
+  padding: 8px 8px 4px;
+  font-size: 11px;
+  color: var(--rv-ui-text-muted);
+}

package/field-configurator.d.ts

@@ -8,8 +8,9 @@ export declare function FieldSummary({ children, className, ...attributes }: Omi
     children: ComponentChildren;
     className?: string;
 }): h.JSX.Element;
-export declare function FieldLibrary({ title, count, children, className, }: {
+export declare function FieldLibrary({ title, id, count, children, className, }: {
     title: string;
+    id?: string;
     count?: ComponentChildren;
     children: ComponentChildren;
     className?: string;
@@ -74,16 +75,53 @@ export declare function FieldDropIndicator({ position, index, className, }: {
     className?: string;
 }): h.JSX.Element;
 export interface CollapsibleSectionProps {
+    /** Heading displayed in the keyboard-accessible expand/collapse trigger. */
     title: ComponentChildren;
+    /** Supporting text displayed above the expanded content. */
     description?: ComponentChildren;
+    /** Expand initially. Later toggles are owned by the native disclosure. */
     defaultOpen?: boolean;
+    /** Section content; stays mounted when collapsed to preserve drafts. */
     children: ComponentChildren;
+    /** Additional CSS classes on the outer disclosure. */
     className?: string;
+    /** Additional CSS classes on the summary trigger. */
     summaryClassName?: string;
+    /** Additional CSS classes on the content container. */
     contentClassName?: string;
+    /** Additional CSS classes on the supporting description. */
     descriptionClassName?: string;
     /** Host policies can wrap the native details without owning its presentation. */
     renderRoot?: (props: JSX.IntrinsicElements['details']) => ComponentChildren;
 }
 /** Native disclosure; collapsed content stays mounted to preserve draft edits. */
 export declare function CollapsibleSection({ title, description, defaultOpen, children, className, summaryClassName, contentClassName, descriptionClassName, renderRoot, }: CollapsibleSectionProps): ComponentChildren;
+export interface ConfiguratorCompactItem {
+    id: string;
+    label: string;
+    icon?: string;
+    count?: number;
+    disabled?: boolean;
+    /** Optional section to focus after opening. */
+    targetId?: string;
+    /** Activate the corresponding product tab when reopening. */
+    onOpen?: () => void;
+}
+export interface ConfiguratorMiniModeConfig {
+    /** Starts the configurator as a narrow rail. Users can expand and collapse it. */
+    miniMode?: boolean;
+    /** Enables width resizing. Shrinking below 200px collapses to the rail. */
+    resizable?: boolean;
+}
+/** Shared panel shell. Collapsing preserves mounted controls and their drafts. */
+export declare function ConfiguratorPanel({ panelRef, standalone, children, compactItems, compact: compactProp, onExpand, miniMode, resizable, resizeParent, ...props }: Omit<JSX.HTMLAttributes<HTMLDivElement>, 'ref'> & ConfiguratorMiniModeConfig & {
+    panelRef?: import('./_vendor/preact/src/index').Ref<HTMLDivElement>;
+    standalone?: boolean;
+    compactItems?: readonly ConfiguratorCompactItem[];
+    /** Presentation state is owned by the host; the panel adds no toggle button. */
+    compact?: boolean;
+    onExpand?: () => void;
+    /** Apply the resized width to the product-owned parent as well. */
+    resizeParent?: boolean;
+}): h.JSX.Element;
+export { createFieldExpansion, fieldExpansionIds, recordFieldExpansion, type FieldExpansionState, } from './field-expansion';

package/field-configurator.js

@@ -1,170 +1,4 @@
-import { c as e } from "./_chunks/preact.module-BBM36DnO.js";
-import { t } from "./_chunks/hooks.module-CG3gN83z.js";
-import { t as n } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { SvgIcon as r } from "./icons/icon.js";
-import { n as i } from "./_chunks/delete-button-CW9vjLnk.js";
-import { RemoveButton as a } from "./buttons/remove-button.js";
-import { t as o } from "./_chunks/chevron-right-sxHQMSkq.js";
-import { DisclosureSummary as s } from "./form-controls/presentation.js";
-import { fieldDropIndex as c, reorderFields as l } from "./field-reorder.js";
-import { useFieldDropTarget as u, useFieldReorder as d } from "./field-reorder.hook.js";
-//#region src/field-configurator.tsx
-function f({ svg: e, className: t = "" }) {
-	return /* @__PURE__ */ n(r, {
-		svg: e,
-		className: `rv-configurator-icon ${t}`
-	});
-}
-function p({ children: e, className: t = "", ...r }) {
-	return /* @__PURE__ */ n(s, {
-		...r,
-		className: `rv-configurator-summary ${t}`,
-		iconPosition: "after",
-		icon: /* @__PURE__ */ n(f, { svg: o }),
-		children: e
-	});
-}
-function m({ title: e, count: t, children: r, className: i = "" }) {
-	return /* @__PURE__ */ n("details", {
-		class: `rv-configurator-available-fields ${i}`,
-		open: !0,
-		children: [/* @__PURE__ */ n(p, { children: [e, t != null && /* @__PURE__ */ n("span", {
-			class: "rv-configurator-field-count",
-			children: t
-		})] }), /* @__PURE__ */ n("div", {
-			class: "rv-configurator-library-content",
-			children: r
-		})]
-	});
-}
-function h({ children: e, actions: t, className: r = "" }) {
-	return /* @__PURE__ */ n("div", {
-		class: `rv-configurator-zone-heading ${r}`,
-		children: [/* @__PURE__ */ n("span", {
-			class: "rv-configurator-zone-label",
-			children: e
-		}), t && /* @__PURE__ */ n("span", {
-			class: "rv-configurator-zone-actions",
-			children: t
-		})]
-	});
-}
-function g({ heading: e, actions: t, headingClassName: r, className: i = "", children: a, ...o }) {
-	return /* @__PURE__ */ n("section", {
-		...o,
-		className: `rv-configurator-zone ${i}`,
-		children: [/* @__PURE__ */ n(h, {
-			className: r,
-			actions: t,
-			children: e
-		}), a]
-	});
-}
-function _({ empty: e, placeholder: t, className: r = "", children: i, ...a }) {
-	return /* @__PURE__ */ n("ul", {
-		...a,
-		className: `rv-configurator-field-list ${e ? "empty" : ""} ${r}`,
-		children: e ? /* @__PURE__ */ n("li", {
-			className: "rv-configurator-empty-zone empty",
-			children: t
-		}) : i
-	});
-}
-function v({ className: e = "", children: t, indicator: r, dropPosition: i, ...a }) {
-	return /* @__PURE__ */ n("li", {
-		...a,
-		className: `rv-configurator-field rv-configurator-field-row ${e}`,
-		children: [
-			r ?? (i && /* @__PURE__ */ n(D, { position: i })),
-			/* @__PURE__ */ n("span", {
-				className: "rv-configurator-drag-handle",
-				"aria-hidden": "true"
-			}),
-			t
-		]
-	});
-}
-function y({ icon: e, children: t, className: r = "" }) {
-	return /* @__PURE__ */ n("span", {
-		class: `rv-configurator-field-content ${r}`,
-		children: [e, /* @__PURE__ */ n("span", {
-			class: "rv-configurator-field-caption",
-			children: t
-		})]
-	});
-}
-function b({ as: t = "div", children: n, className: r = "", ...i }) {
-	return e(t, {
-		...i,
-		class: `rv-configurator-field ${r}`
-	}, n);
-}
-function x({ children: e, ...t }) {
-	return /* @__PURE__ */ n("div", {
-		...t,
-		className: `rv-configurator-library-list ${t.className ?? ""}`,
-		children: e
-	});
-}
-function S({ label: e, icon: t, actions: r, contentClassName: i, ...a }) {
-	return /* @__PURE__ */ n(v, {
-		...a,
-		children: [/* @__PURE__ */ n(y, {
-			className: i,
-			icon: t,
-			children: e
-		}), r]
-	});
-}
-function C({ children: e, className: t = "", ...r }) {
-	return /* @__PURE__ */ n("div", {
-		...r,
-		className: `rv-configurator-field-actions ${t}`,
-		children: e
-	});
-}
-function w({ children: e, active: t = !1, label: r, className: i = "" }) {
-	return /* @__PURE__ */ n("span", {
-		className: `rv-configurator-status-badge ${i}`,
-		"data-active": t ? "true" : void 0,
-		title: r,
-		"aria-label": r,
-		children: e
-	});
-}
-function T(e) {
-	return /* @__PURE__ */ n(a, {
-		...e,
-		className: `rv-configurator-remove-button ${e.className ?? ""}`
-	});
-}
-function E() {
-	return /* @__PURE__ */ n(r, { svg: i });
-}
-function D({ position: e, index: t, className: r = "" }) {
-	return /* @__PURE__ */ n("span", {
-		className: `rv-configurator-drop-indicator ${r}`,
-		"data-position": e,
-		"data-drop-index": t,
-		"aria-hidden": "true"
-	});
-}
-function O({ title: e, description: r, defaultOpen: i = !1, children: a, className: o = "", summaryClassName: s = "", contentClassName: c = "", descriptionClassName: l = "", renderRoot: u }) {
-	let d = t(i), f = {
-		class: `rv-collapsible-section rv-configurator-section ${o}`.trim(),
-		open: d.current,
-		children: [/* @__PURE__ */ n(p, {
-			className: s,
-			children: e
-		}), /* @__PURE__ */ n("div", {
-			class: `rv-collapsible-section__content ${c}`.trim(),
-			children: [r && /* @__PURE__ */ n("p", {
-				class: `rv-collapsible-section__description ${l}`.trim(),
-				children: r
-			}), a]
-		})]
-	};
-	return u ? u(f) : /* @__PURE__ */ n("details", { ...f });
-}
-//#endregion
-export { O as CollapsibleSection, C as FieldActions, y as FieldContent, D as FieldDropIndicator, g as FieldGroup, h as FieldGroupHeading, f as FieldIcon, b as FieldItem, m as FieldLibrary, x as FieldLibraryList, _ as FieldList, T as FieldRemoveButton, E as FieldRemoveIcon, v as FieldRow, w as FieldStatusBadge, p as FieldSummary, S as SelectedField, c as fieldDropIndex, l as reorderFields, u as useFieldDropTarget, d as useFieldReorder };
+import { _ as e, a as t, b as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v, x as y, y as b } from "./_chunks/field-configurator-D5dZRhDe.js";
+import { fieldDropIndex as x, reorderFields as S } from "./field-reorder.js";
+import { useFieldDropTarget as C, useFieldReorder as w } from "./field-reorder.hook.js";
+export { g as CollapsibleSection, d as ConfiguratorPanel, m as FieldActions, c as FieldContent, t as FieldDropIndicator, f as FieldGroup, h as FieldGroupHeading, r as FieldIcon, l as FieldItem, _ as FieldLibrary, i as FieldLibraryList, a as FieldList, p as FieldRemoveButton, u as FieldRemoveIcon, s as FieldRow, o as FieldStatusBadge, e as FieldSummary, v as SelectedField, b as createFieldExpansion, x as fieldDropIndex, n as fieldExpansionIds, y as recordFieldExpansion, S as reorderFields, C as useFieldDropTarget, w as useFieldReorder };

package/field-expansion.d.ts

@@ -0,0 +1,9 @@
+/** Expansion overlay shared by nested field libraries; searching never overwrites it. */
+export interface FieldExpansionState {
+    known: Set<string>;
+    expanded: Set<string>;
+    collapsed: Set<string>;
+}
+export declare function createFieldExpansion(): FieldExpansionState;
+export declare function fieldExpansionIds(state: FieldExpansionState, ids: readonly string[], searching: boolean): Set<string>;
+export declare function recordFieldExpansion(state: FieldExpansionState, expanded: Iterable<unknown>): void;

package/filter/filters/slider/_single-slider.scss

@@ -1,45 +1,64 @@
 /** One scalar thumb/track presentation for native, Stencil and Preact consumers. */
 @mixin presentation {
-    appearance: none;
-    position: static;
-    width: 100%;
-    height: var(--slider-thumb-size, 20px);
-    margin: 0;
-    border: 0;
-    border-radius: 0;
-    background: linear-gradient(
+  appearance: none;
+  position: static;
+  width: 100%;
+  height: var(--slider-thumb-size, 20px);
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: linear-gradient(
       to right,
-      var(--range-color, var(--rv-ui-accent)) 0 var(--rv-single-slider-value, 0%),
-      var(--slider-color, var(--rv-ui-border)) var(--rv-single-slider-value, 0%) 100%
-    ) center / 100% var(--slider-track-height, 4px) no-repeat;
-    cursor: pointer;
-    pointer-events: auto;
+      var(--range-color, var(--rv-ui-accent)) 0
+        var(--rv-single-slider-value, 0%),
+      var(--slider-color, var(--rv-ui-border)) var(--rv-single-slider-value, 0%)
+        100%
+    )
+    center / 100% var(--slider-track-height, 4px) no-repeat;
+  cursor: pointer;
+  pointer-events: auto;
 
-    &::-webkit-slider-thumb {
-      appearance: none;
-      box-sizing: border-box;
-      width: var(--slider-thumb-size, 20px);
-      height: var(--slider-thumb-size, 20px);
-      border: 3px solid var(--slider-thumb-border, var(--range-color, var(--rv-ui-accent)));
-      border-radius: 50%;
-      background: var(--slider-thumb-bg, var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface)));
-      box-shadow: 0 1px 3px var(--rv-ui-shadow);
-      transition: box-shadow var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
-      pointer-events: all;
-    }
+  &::-webkit-slider-thumb {
+    appearance: none;
+    box-sizing: border-box;
+    width: var(--slider-thumb-size, 20px);
+    height: var(--slider-thumb-size, 20px);
+    border: 3px solid
+      var(--slider-thumb-border, var(--range-color, var(--rv-ui-accent)));
+    border-radius: 50%;
+    background: var(
+      --slider-thumb-bg,
+      var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface))
+    );
+    box-shadow: 0 1px 3px var(--rv-ui-shadow);
+    transition: box-shadow var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease);
+    pointer-events: all;
+  }
 
-    &::-moz-range-thumb {
-      box-sizing: border-box;
-      width: var(--slider-thumb-size, 20px);
-      height: var(--slider-thumb-size, 20px);
-      border: 3px solid var(--slider-thumb-border, var(--range-color, var(--rv-ui-accent)));
-      border-radius: 50%;
-      background: var(--slider-thumb-bg, var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface)));
-      box-shadow: 0 1px 3px var(--rv-ui-shadow);
-      transition: box-shadow var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
-      pointer-events: all;
-    }
+  &::-moz-range-thumb {
+    box-sizing: border-box;
+    width: var(--slider-thumb-size, 20px);
+    height: var(--slider-thumb-size, 20px);
+    border: 3px solid
+      var(--slider-thumb-border, var(--range-color, var(--rv-ui-accent)));
+    border-radius: 50%;
+    background: var(
+      --slider-thumb-bg,
+      var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface))
+    );
+    box-shadow: 0 1px 3px var(--rv-ui-shadow);
+    transition: box-shadow var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease);
+    pointer-events: all;
+  }
 
-  &:disabled { opacity: .55; cursor: not-allowed; }
-  &:focus-visible { outline: 2px solid var(--range-color, var(--rv-ui-accent)); outline-offset: 2px; }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  &:focus-visible {
+    outline: 2px solid var(--range-color, var(--rv-ui-accent));
+    outline-offset: 2px;
+  }
 }

package/filter/filters/slider/_slider.scss

@@ -17,23 +17,6 @@
       color: var(--text-color, var(--rv-ui-text-muted));
     }
 
-    .slider-tooltip {
-      position: absolute;
-      top: -40px;
-      transform: translateX(-50%);
-      background: var(--tooltip-bg, var(--rv-ui-text));
-      color: var(--tooltip-color, var(--rv-ui-surface));
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-size: 12px;
-      line-height: 18px;
-      opacity: 0;
-      transition: opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
-      pointer-events: none;
-      white-space: nowrap;
-      z-index: 10;
-    }
-
     .range-inputs {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
@@ -72,7 +55,11 @@
     top: 0;
     margin: 0;
     border-radius: 999px;
-    background: linear-gradient(var(--slider-color, var(--rv-ui-border)), var(--slider-color, var(--rv-ui-border))) center / 100% 4px no-repeat;
+    background: linear-gradient(
+        var(--slider-color, var(--rv-ui-border)),
+        var(--slider-color, var(--rv-ui-border))
+      )
+      center / 100% 4px no-repeat;
     pointer-events: none;
 
     &:focus-visible {
@@ -85,41 +72,59 @@
       z-index: 1;
     }
 
-    $size: 24px;
-
     &::-webkit-slider-thumb {
       -webkit-appearance: none;
       pointer-events: all;
-      width: $size;
-      height: $size;
-      background-color: var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface));
-      border: 3px solid var(--range-color, var(--rv-ui-accent));
+      box-sizing: border-box;
+      width: var(--slider-thumb-size, 20px);
+      height: var(--slider-thumb-size, 20px);
+      background-color: var(
+        --revo-grid-filter-control-thumb-bg,
+        var(--rv-ui-surface)
+      );
+      border: var(--slider-thumb-border-width, 3px) solid
+        var(--range-color, var(--rv-ui-accent));
       border-radius: 50%;
       box-shadow: 0 1px 3px var(--rv-ui-shadow);
-      transition: box-shadow var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+      transition: box-shadow var(--rv-ui-motion-fast, 120ms)
+        var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
       cursor: pointer;
 
       &:hover {
-        background: var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface));
+        background: var(
+          --revo-grid-filter-control-thumb-bg,
+          var(--rv-ui-surface)
+        );
       }
 
       &:active {
         box-shadow:
           0 1px 3px var(--rv-ui-shadow),
-          0 0 0 4px color-mix(in srgb, var(--range-color, var(--rv-ui-accent)) 18%, transparent);
+          0 0 0 4px
+            color-mix(
+              in srgb,
+              var(--range-color, var(--rv-ui-accent)) 18%,
+              transparent
+            );
       }
     }
 
     &::-moz-range-thumb {
       -webkit-appearance: none;
       pointer-events: all;
-      width: $size;
-      height: $size;
-      background-color: var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface));
-      border: 3px solid var(--range-color, var(--rv-ui-accent));
+      box-sizing: border-box;
+      width: var(--slider-thumb-size, 20px);
+      height: var(--slider-thumb-size, 20px);
+      background-color: var(
+        --revo-grid-filter-control-thumb-bg,
+        var(--rv-ui-surface)
+      );
+      border: var(--slider-thumb-border-width, 3px) solid
+        var(--range-color, var(--rv-ui-accent));
       border-radius: 50%;
       box-shadow: 0 1px 3px var(--rv-ui-shadow);
-      transition: box-shadow var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+      transition: box-shadow var(--rv-ui-motion-fast, 120ms)
+        var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
       cursor: pointer;
     }
   }
@@ -129,4 +134,7 @@
   }
 }
 
-.rv-single-slider:disabled { opacity: .55; cursor: not-allowed; }
+.rv-single-slider:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}

package/filter/filters/slider/control.js

@@ -12,6 +12,7 @@ function l(r, s) {
 	let l = [], { minInt: u, maxInt: d, fromValueInt: f, toValueInt: p } = s.state;
 	return s.showTooltips && l.push(r("div", {
 		className: "slider-tooltip",
+		hidden: !0,
 		ref: (e) => s.refs.fromTooltip = e
 	})), l.push(r("input", {
 		ref: (e) => {
@@ -33,6 +34,7 @@ function l(r, s) {
 		onMouseOut: () => s.showTooltips && s.refs.fromTooltip && i(s.refs.fromTooltip)
 	})), s.showTooltips && l.push(r("div", {
 		className: "slider-tooltip",
+		hidden: !0,
 		ref: (e) => s.refs.toTooltip = e
 	})), l.push(r("input", {
 		ref: (e) => {