@revolist/ui 4.0.2-rc → 4.0.3-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 { createControlId as o } from "../core/control-id.js";
-import { t as s } from "../_chunks/chevron-down-GbplLa6s.js";
+import { t as o } from "../_chunks/chevron-down-GbplLa6s.js";
+import { createControlId as s } from "../core/control-id.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(() => o("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(() => s("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: s }
+				dangerouslySetInnerHTML: { __html: o }
 			})]
 		}) : null, R ? z && Q ? /* @__PURE__ */ a(m, {
 			triggerRef: M,

package/resource-picker/resource-picker.scss

@@ -18,7 +18,7 @@
   --rv-control-border: var(--rv-resource-picker-border, var(--rv-ui-border));
 }
 .rv-resource-picker__search-control input {
-  min-height: var(--rv-resource-picker-search-height, 36px);
+  min-height: var(--rv-resource-picker-search-height, var(--rv-control-height, 32px));
 }
 
 .rv-resource-picker__list {
@@ -133,13 +133,16 @@
 }
 
 .rv-resource-picker__control {
+  font-family: inherit;
+  font-size: var(--rv-control-font-size, 0.875rem);
+  line-height: 1;
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  min-height: var(--rv-resource-picker-control-height, 42px);
+  min-height: var(--rv-resource-picker-control-height, var(--rv-control-height, 32px));
   align-items: center;
   gap: 8px;
-  padding: var(--rv-resource-picker-control-padding, 5px 10px);
+  padding: var(--rv-resource-picker-control-padding, 1px 10px);
   border: 1px solid var(
     --rv-resource-picker-border,
     color-mix(in srgb, currentColor 14%, transparent)

package/rich-text/engine.d.ts

@@ -1,21 +1,18 @@
-import { LexicalEditor, TextFormatType } from 'lexical';
-export type MarkdownBlock = 'paragraph' | 'h1' | 'h2' | 'quote' | 'code' | 'bullet' | 'ordered';
-export interface MarkdownSelection {
-    formats: TextFormatType[];
-    block: MarkdownBlock | null;
+export type HtmlFormat = 'bold' | 'italic' | 'strikethrough' | 'code';
+export type HtmlBlock = 'paragraph' | 'h1' | 'h2' | 'quote' | 'code' | 'bullet' | 'ordered';
+export interface HtmlSelection {
+    formats: HtmlFormat[];
+    block: HtmlBlock | null;
     link: boolean;
 }
-export declare const emptyMarkdownSelection: MarkdownSelection;
-export interface MarkdownEngine {
-    editor: LexicalEditor;
-    setMarkdown(value: string): void;
-    format(mark: TextFormatType): void;
-    block(value: MarkdownBlock): void;
-    captureSelection(): void;
-    link(value: string): boolean;
-    destroy(): void;
-}
-/** Framework-independent Lexical adapter; consumers own toolbar and mode presentation. */
-export declare function createMarkdownEngine(root: HTMLElement, markdown: string, onChange: (value: string, unsafe: boolean) => void, onSelectionChange?: (selection: MarkdownSelection) => void): MarkdownEngine;
-/** Parse through Lexical so escaped/entity-encoded Markdown link URLs are checked after decoding. */
-export declare function hasUnsafeMarkdownLinks(markdown: string): boolean;
+export declare const emptyHtmlSelection: HtmlSelection;
+/** Native Range editing and bounded local history. No browser execCommand or editor library. */
+export declare function createHtmlEngine(root: HTMLElement, html: string, onChange: (html: string) => void, onSelectionChange?: (selection: HtmlSelection) => void): {
+    setHtml: (value: string) => void;
+    format: (mark: HtmlFormat) => void;
+    block: (value: HtmlBlock) => void;
+    captureSelection: () => void;
+    link: (value: string) => boolean;
+    destroy: () => void;
+};
+export type HtmlEngine = ReturnType<typeof createHtmlEngine>;

package/rich-text/index.d.ts

@@ -1,15 +1,15 @@
 import { EditorActionText, EditorCommitOptions } from '../editor-actions';
-import { MarkdownEditorText } from './translations';
-export { defaultMarkdownEditorText, type MarkdownEditorText, } from './translations';
-export interface MarkdownEditorProps extends EditorCommitOptions {
+import { HtmlEditorText } from './translations';
+export { defaultHtmlEditorText, type HtmlEditorText } from './translations';
+export interface HtmlEditorProps extends EditorCommitOptions {
     value: string;
     onApply: (value: string) => void;
     onCancel: () => void;
     required?: boolean;
     maxLength?: number;
-    text?: Partial<MarkdownEditorText>;
+    text?: Partial<HtmlEditorText>;
     actions?: Partial<EditorActionText>;
 }
-export declare function MarkdownEditor(props: MarkdownEditorProps): import("../_vendor/preact/src/index").JSX.Element;
-export { markdownVisualIssues, isSafeMarkdownLink } from './model';
-export { markdownRenderNodes, type MarkdownRenderNode } from './render-model';
+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';

package/rich-text/index.js

@@ -1 +1 @@
-export { t as MarkdownEditor, r as defaultMarkdownEditorText, i as isSafeMarkdownLink, n as markdownRenderNodes, a as markdownVisualIssues } from "../_chunks/rich-text-BzI1DyfF.js";
+export { t as HtmlEditor, r as defaultHtmlEditorText, n as htmlRenderNodes, i as isSafeRichTextLink, a as sanitizeRichTextHtml } from "../_chunks/rich-text-CH7gIqOS.js";

package/rich-text/model.d.ts

@@ -1,3 +1,4 @@
-/** Supported Markdown boundaries: unsupported syntax remains editable as lossless source. */
-export declare function markdownVisualIssues(markdown: string): string[];
-export declare function isSafeMarkdownLink(value: string): boolean;
+export declare function isSafeRichTextLink(value: string): boolean;
+/** 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/render-model.d.ts

@@ -1,9 +1,8 @@
-/** Framework-neutral, allowlisted content. Text is always rendered as text, never HTML. */
-export interface MarkdownRenderNode {
+export interface HtmlRenderNode {
     tag?: string;
     text?: string;
     attrs?: Record<string, string | number>;
-    children?: readonly MarkdownRenderNode[];
+    children?: readonly HtmlRenderNode[];
 }
-/** The renderer accepts exactly the same Markdown subset as the Visual editor. */
-export declare function markdownRenderNodes(markdown: string): readonly MarkdownRenderNode[];
+/** Only allowlisted nodes reach a framework renderer; fresh VNodes are created per cell. */
+export declare function htmlRenderNodes(html: string): readonly HtmlRenderNode[];

package/rich-text/style.scss

@@ -1,4 +1,4 @@
-.rv-markdown-editor {
+.rv-rich-text-editor {
   width: min(560px, calc(100vw - 48px));
   &__toolbar {
     display: flex;
@@ -60,22 +60,13 @@
     padding-inline-start: 12px;
     margin-inline: 0;
   }
-  .rv-markdown-bold {
-    font-weight: 700;
-  }
-  .rv-markdown-italic {
-    font-style: italic;
-  }
-  .rv-markdown-strike {
-    text-decoration: line-through;
-  }
-  .rv-markdown-inline-code {
+  &__visual code {
     font-family: ui-monospace, monospace;
     background: var(--rv-ui-surface-sunken);
   }
 }
 
-.rv-markdown-cell {
+.rv-rich-text-cell {
   color: inherit;
   font: inherit;
   white-space: pre-wrap;

package/rich-text/toolbar.d.ts

@@ -1,9 +1,9 @@
-import { MarkdownEngine, MarkdownSelection } from './engine';
-import { MarkdownEditorText } from './translations';
-export declare function MarkdownToolbar({ engine, selection, text, showLink, onLink }: {
-    engine: () => MarkdownEngine | undefined;
-    selection: MarkdownSelection;
-    text: Required<MarkdownEditorText>;
+import { HtmlEngine, HtmlSelection } from './engine';
+import { HtmlEditorText } from './translations';
+export declare function HtmlToolbar({ engine, selection, text, showLink, onLink }: {
+    engine: () => HtmlEngine | undefined;
+    selection: HtmlSelection;
+    text: Required<HtmlEditorText>;
     showLink: boolean;
     onLink: () => void;
 }): import("../_vendor/preact/src/index").JSX.Element;

package/rich-text/translations.d.ts

@@ -1,9 +1,8 @@
-/** All visible and accessible copy for the deliberately small Markdown editor. */
-export interface MarkdownEditorText {
+/** Visible and accessible labels for the shared HTML editor. */
+export interface HtmlEditorText {
     visual: string;
     source: string;
     label: string;
-    unsupported: string;
     unsafeLink: string;
     requiredValue?: string;
     tooLong?: string;
@@ -25,16 +24,5 @@ export interface MarkdownEditorText {
     numberedList?: string;
     quote?: string;
     codeBlock?: string;
-    images?: string;
-    tables?: string;
-    html?: string;
-    referenceLinks?: string;
-    taskLists?: string;
-    horizontalRules?: string;
-    alternateHeadings?: string;
-    highlight?: string;
-    extensions?: string;
-    indentedCode?: string;
 }
-export declare const defaultMarkdownEditorText: Required<MarkdownEditorText>;
-export declare function markdownIssueLabels(issues: string[], text: Required<MarkdownEditorText>): string;
+export declare const defaultHtmlEditorText: Required<HtmlEditorText>;

package/select.d.ts

@@ -0,0 +1,20 @@
+import { ComponentChildren, JSX } from './_vendor/preact/src/index';
+import { 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 & {
+    value?: string | number | readonly string[];
+    defaultValue?: string | number | readonly string[];
+    /** Optional domain policy for option descriptors; no native option nodes are mounted. */
+    optionPolicy?: (props: SelectOptionProps) => SelectOptionProps;
+} & ({
+    multiple?: false;
+    onValueChange?: (value: string) => void;
+} | {
+    multiple: true;
+    onValueChange?: (value: string[]) => void;
+});
+/** JSX options are data descriptors for Dropdown, never browser-native controls. */
+export declare function selectOptions(children: ComponentChildren, policy?: SelectProps['optionPolicy'], group?: string, disabled?: boolean): DropdownOption<string>[];
+export declare function Select(props: SelectProps): JSX.Element;
+export {};

package/select.js

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

package/status-feedback/exit-snapshot.js

@@ -1,10 +1,10 @@
-import { showTopLayerPopup as e } from "../core/top-layer-popup.js";
-import { isUiMotionEnabled as t } from "../core/motion.js";
+import { isUiMotionEnabled as e } from "../core/motion.js";
+import { showTopLayerPopup as t } from "../core/top-layer-popup.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" || !t(r)) return;
+	if (!i || typeof r.animate != "function" || !e(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), e(o), s.forEach((e, t) => {
+	}), r.ownerDocument.body.append(o), t(o), s.forEach((e, t) => {
 		e.scrollTop && (c[t].scrollTop = e.scrollTop), e.scrollLeft && (c[t].scrollLeft = e.scrollLeft);
 	});
 	let u = () => {

package/status-feedback/index.js

@@ -1,4 +1,4 @@
 import { renderStatusBadge as e } from "./badge.js";
-import { StatusBadge as t, StatusFeedbackPanel as n, renderStatusFeedbackPanel as r } from "./render.js";
+import { n as t, r as n, t as r } from "../_chunks/render-m5eMMwFR.js";
 import { StatusFeedbackPopoverController as i } from "./popover.js";
-export { t as StatusBadge, n as StatusFeedbackPanel, i as StatusFeedbackPopoverController, e as renderStatusBadge, r as renderStatusFeedbackPanel };
+export { r as StatusBadge, t as StatusFeedbackPanel, i as StatusFeedbackPopoverController, e as renderStatusBadge, n as renderStatusFeedbackPanel };

package/status-feedback/popover.js

@@ -1,6 +1,6 @@
 import { calculateAnchoredPopoverPosition as e } from "../core/anchored-popover.js";
-import { hideTopLayerPopup as t, showTopLayerPopup as n } from "../core/top-layer-popup.js";
-import { inheritUiMotion as r } from "../core/motion.js";
+import { inheritUiMotion as t } from "../core/motion.js";
+import { hideTopLayerPopup as n, showTopLayerPopup as r } from "../core/top-layer-popup.js";
 import { statusFeedbackSize as i } from "./placement.js";
 import { animateStatusFeedback as a } from "./motion.js";
 import { statusFeedbackExit as o } from "./exit-snapshot.js";
@@ -46,34 +46,34 @@ var s = 0, c = class {
 		})));
 	};
 	hide(e = !1) {
-		(!e || this.mode) && (this.removeExit?.(), this.removeExit = void 0), e && this.panel?.isConnected && this.mode && (this.removeExit = o(this.panel)), this.animation?.cancel(), this.animation = void 0, this.releaseMotion?.(), this.releaseMotion = void 0, this.panel && this.mode && t(this.panel, this.mode), this.mode = void 0, this.stopWatching();
+		(!e || this.mode) && (this.removeExit?.(), this.removeExit = void 0), e && this.panel?.isConnected && this.mode && (this.removeExit = o(this.panel)), this.animation?.cancel(), this.animation = void 0, this.releaseMotion?.(), this.releaseMotion = void 0, this.panel && this.mode && n(this.panel, this.mode), this.mode = void 0, this.stopWatching();
 	}
 	destroy() {
 		this.hide(), this.disposed = !0, this.panel = null, this.anchor = null;
 	}
 	position() {
-		let t = this.panel, o = this.anchor, s = this.window;
-		if (!t?.isConnected || !o?.isConnected || !s || this.disposed) return;
+		let n = this.panel, o = this.anchor, s = this.window;
+		if (!n?.isConnected || !o?.isConnected || !s || this.disposed) return;
 		let c = this.options.boundary?.getBoundingClientRect(), l = i({
 			width: s.innerWidth,
 			height: s.innerHeight
 		}, c, this.collapsed, this.options), u = l.width;
-		t.style.width = `${u}px`, t.style.maxHeight = `${l.maxHeight}px`, this.releaseMotion ??= r(o, t);
+		n.style.width = `${u}px`, n.style.maxHeight = `${l.maxHeight}px`, this.releaseMotion ??= t(o, n);
 		let d = !this.mode;
-		d && (this.removeExit?.(), this.removeExit = void 0, this.mode = n(t));
+		d && (this.removeExit?.(), this.removeExit = void 0, this.mode = r(n));
 		let f = o.getBoundingClientRect(), p = e({
 			left: f.right - u,
 			right: f.right,
 			top: f.bottom,
 			bottom: f.bottom
 		}, {
-			width: t.offsetWidth,
-			height: t.offsetHeight
+			width: n.offsetWidth,
+			height: n.offsetHeight
 		}, {
 			width: s.innerWidth,
 			height: s.innerHeight
 		}, 0);
-		t.style.left = `${p.left}px`, t.style.top = `${p.top}px`, d && (this.animation?.cancel(), this.animation = a(t, [{ opacity: 0 }, { opacity: 1 }], "rv-status-enter"));
+		n.style.left = `${p.left}px`, n.style.top = `${p.top}px`, d && (this.animation?.cancel(), this.animation = a(n, [{ opacity: 0 }, { opacity: 1 }], "rv-status-enter"));
 	}
 	stopWatching() {
 		this.frame !== void 0 && this.window?.cancelAnimationFrame(this.frame), this.frame = void 0, this.observer?.disconnect(), this.observer = void 0, this.window?.removeEventListener("resize", this.refresh), this.window?.removeEventListener("scroll", this.refresh, !0), this.window = null;

package/status-feedback/render.js

@@ -1,44 +1,3 @@
-import { c as e } from "../_chunks/preact.module-BBM36DnO.js";
-import { renderHeader as t } from "./header.js";
-import { renderItem as n } from "./item.js";
-import { renderStatusBadge as r } from "./badge.js";
-//#region src/status-feedback/render.ts
-function i(e, r) {
-	let { title: i, items: a, ariaLabel: o, className: s, popover: c, onCollapsedChange: l } = r;
-	if (!a.length) return c?.hide(!0), null;
-	let u = c?.collapsed ?? r.collapsed ?? !1, d = !!(c || l), f = (e, t) => {
-		if (e && !c) {
-			let e = t.currentTarget.closest(".rv-status-feedback"), n = e?.ownerDocument.activeElement;
-			n && e?.contains(n) && e.querySelector(".rv-status-feedback__toggle")?.focus({ preventScroll: !0 });
-		}
-		c?.setCollapsed(e), l?.(e);
-	};
-	return c?.refresh(), e("section", {
-		onKeyDown: (e) => {
-			e.key === "Escape" && d && !u && (e.preventDefault(), e.stopPropagation(), f(!0, e));
-		},
-		ref: c?.panelRef,
-		id: c?.id,
-		class: [
-			"rv-status-feedback",
-			s,
-			r.compact ? "rv-status-feedback--compact" : "",
-			c ? "rv-status-feedback--popover" : "",
-			u ? "rv-status-feedback--collapsed" : ""
-		].filter(Boolean).join(" "),
-		"aria-label": o ?? i,
-		"data-collapsed": String(u)
-	}, [t(e, r, u, d, f), e("div", {
-		id: c ? `${c.id}-items` : void 0,
-		class: "rv-status-feedback__items",
-		hidden: u
-	}, a.map((t) => n(e, t)))]);
-}
-function a(t) {
-	return i(e, t);
-}
-function o(t) {
-	return r(e, t);
-}
-//#endregion
-export { o as StatusBadge, a as StatusFeedbackPanel, r as renderStatusBadge, i as renderStatusFeedbackPanel };
+import { renderStatusBadge as e } from "./badge.js";
+import { n as t, r as n, t as r } from "../_chunks/render-m5eMMwFR.js";
+export { r as StatusBadge, t as StatusFeedbackPanel, e as renderStatusBadge, n as renderStatusFeedbackPanel };

package/status-feedback/status-feedback.scss

@@ -1,4 +1,11 @@
 @use '../styles/motion';
+@keyframes rv-status-item-exit {
+  to { opacity: 0; transform: translateY(4px); }
+}
+.rv-status-feedback__item[data-exiting='true'] {
+  animation: rv-status-item-exit 160ms ease-in both;
+  pointer-events: none;
+}
 .rv-status-feedback,
 .rv-status-badge {
   --rv-status-warning: var(--rv-ui-warning);

package/status-feedback/types.d.ts

@@ -29,6 +29,10 @@ export interface StatusFeedbackLocaleText {
     readonly formatCount: (count: number) => string;
 }
 export interface StatusFeedbackPanelProps {
+    /** Component adapters only: dismiss settled neutral/success items after this delay. Disabled by default. */
+    readonly autoDismissMs?: number;
+    /** The owner removes the item after its exit animation. */
+    readonly onDismissItem?: (id: string) => void;
     readonly compact?: boolean;
     readonly onClose?: () => void;
     readonly closeLabel?: string;

package/status-feedback/use-auto-dismiss.d.ts

@@ -0,0 +1,3 @@
+import { StatusFeedbackItem } from './types';
+/** Timers follow individual items; the consumer remains the owner of removal. */
+export declare function useAutoDismiss(items: readonly StatusFeedbackItem[], duration?: number, onDismiss?: (id: string) => void): StatusFeedbackItem[];

package/styles/_compositions.scss

@@ -2,6 +2,7 @@
 @use './disclosure';
 @use './alert';
 @use './loading';
+@use './control';
 
 .rv-example-card {
   box-sizing: border-box;
@@ -52,7 +53,8 @@
 
 .rv-control { color-scheme: var(--rv-ui-color-scheme, normal); }
 .rv-combobox .dropdown-trigger, .rv-multi-select .dropdown-trigger {
-  min-height: 38px; padding: 8px 24px 8px 10px;
+  @include control.action-size;
+  padding-inline-end: 24px;
   border: 1px solid var(--rv-ui-border); border-radius: 8px;
   background: var(--rv-ui-surface-sunken); color: var(--rv-ui-text);
 }

package/styles/_control.scss

@@ -1,18 +1,26 @@
 @use './motion';
+// Standalone actions and dropdowns share dimensions and typography across adapters.
+@mixin action-size {
+  box-sizing: border-box;
+  min-height: var(--rv-control-height, 32px);
+  padding: var(--rv-control-padding, 6px 12px);
+  font-family: inherit;
+  font-size: var(--rv-control-font-size, 0.875rem);
+  line-height: 1;
+}
+
 // One native field presentation, also available to legacy consumer selectors.
 @mixin field {
   appearance: none;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  min-height: var(--rv-control-height, 38px);
-  padding: var(--rv-control-padding, 8px 10px);
+  @include action-size;
   border: 1px solid var(--rv-control-border, var(--rv-ui-border));
   border-radius: var(--rv-control-radius, 8px);
   background-color: var(--rv-control-bg, var(--rv-ui-surface-sunken));
   color: var(--rv-control-color, inherit);
-  font: inherit;
-  line-height: 1.25;
+
   color-scheme: var(--rv-ui-color-scheme, normal);
   transition:
     border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),

package/styles/_primitives.scss

@@ -1,5 +1,6 @@
 @use './motion';
 @use './loading';
+@use './control';
 %rv-btn-base {
   position: relative;
   display: inline-flex;
@@ -7,13 +8,9 @@
   justify-content: center;
   gap: 4px;
   border-radius: var(--rv-ui-radius);
-  min-height: 32px;
-  padding: 6px 12px;
+  @include control.action-size;
   border: 1px solid transparent;
-  font-family: inherit;
-  font-size: 0.875rem;
   font-weight: var(--rv-ui-button-font-weight, 500);
-  line-height: 1;
   cursor: pointer;
   user-select: none;
   box-shadow: none;
@@ -614,8 +611,8 @@ label.rv-switch-label {
 .rv-search-input > input:is([type='search'], [type='text']) {
   box-sizing: border-box;
   width: 100%;
-  height: var(--rv-search-input-height, 32px);
-  min-height: var(--rv-search-input-height, 32px);
+  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)));
@@ -625,7 +622,7 @@ label.rv-switch-label {
   color: var(--rv-search-input-color, var(--rv-ah-text, var(--rv-ui-text)));
   outline: none;
   font: inherit;
-  font-size: 12px;
+  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);
@@ -961,3 +958,7 @@ button.rv-choice-chip-info:focus-visible,
   border-block-start-color: currentColor;
 }
 .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; }