@revolist/ui 4.0.2-rc → 4.0.4-rc

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; }