@botiverse/raft-ui 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -1,8 +1,31 @@
+## [0.28.0](https://github.com/botiverse/raft-design/compare/v0.27.0...v0.28.0) (2026-10-23)
+
+### Design System
+
+- **Toasts: one at a time, no Dismiss, above the composer on a phone**: a toast shows alone; a new one replaces it at once and the replaced one is closed, not queued. It has no Dismiss: it closes by itself after 5 seconds, or 8 with an action or as an error, and can be swiped away or closed with Esc. It stays at the bottom center: at the bottom of the window on a desktop, and on a phone just above the composer, the tab bar or the keyboard, which the app sets with `--toast-viewport-bottom`. ([#675](https://github.com/botiverse/raft-design/pull/675))
+  - Why: stacked toasts and a × on each one asked people to manage messages that were only receipts; at the very bottom of a phone a toast sat under the composer and the keyboard (decided with stdrc).
+  - Affects: a rule for products; raft-ui's Toast defaults.
+  - Docs: https://raft-design.botiverse.build/components/toast/#where-it-appears
+
+- **Pull to refresh looks like Android's own on Android**: on Android web the indicator is Material 3's: a small disc with a shadow slides down over the list, which stays still; inside, a progress arc with an arrowhead grows with the pull, faint until the pull is armed and faint again when it is pulled back (disarmed); while refreshing the arc turns; at the end the disc scales away. iOS and everything else keep the Spinner. The disc is the one round surface besides switches, radios and grab handles, and its turning arc the one other looping animation. ([#765](https://github.com/botiverse/raft-design/pull/765))
+  - Why: a pull on Android should look the way it does in every Android app (decided by stdrc); armed and disarmed now look different.
+  - Affects: `PullToRefresh` (wip) on Android; shape, motion and navigation rules record the exception.
+  - Docs: https://raft-design.botiverse.build/components/pull-to-refresh/#on-android
+
+### Changed
+
+- **Toast defaults** ([#675](https://github.com/botiverse/raft-design/pull/675)):
+  - `limit` is 1 (was 3); a newer toast replaces the older and closes it.
+  - The command API shows `ToastClose` only with `dismissible: true`.
+  - `actionTimeout` (8s) applies to toasts with an action and to errors; `timeout` stays 5s.
+  - Bottom placements sit 16px above `max(var(--toast-viewport-bottom, 0px), env(safe-area-inset-bottom))`; `top-center` takes `--toast-viewport-top`. A toast swipes away toward the edge it came from.
+  - Migration: an app that passed its own `placement` or drew its own close can drop them; set `--toast-viewport-bottom` on a phone (from `visualViewport` while the keyboard is up on iOS).
+
 ## [0.27.0](https://github.com/botiverse/raft-design/compare/v0.26.0...v0.27.0) (2026-10-23)
 
 ### Design System
 
-- **Refreshing a snapshot page by pulling**: on a phone, a page that shows a snapshot (Activity, Tasks, Members, Computers) refreshes when pulled down past 100px; while it refreshes the indicator holds at 60px, and it snaps back in 300ms without overshoot. Realtime pages (a conversation) are never pulled. On iOS a pull that passed the trigger stays armed; on Android, as in Material 3, pulling back above it takes it back, and crossing it gives a short vibration. The indicator is the Spinner on every platform. Every such page also reloads when it is opened, so the gesture is never the only way. `PullToRefresh` is experimental, from `@botiverse/raft-ui/wip`. ([#743](https://github.com/botiverse/raft-design/pull/743))
+- **Refreshing a snapshot page by pulling**: on a phone, a page that shows a snapshot and doesn't update itself (Saved, search results, a conversation's files, the lists in Settings) refreshes when pulled down past 100px; while it refreshes the indicator holds at 60px, and it snaps back in 300ms without overshoot. Pages fed by realtime updates (conversations, Home, Activity, Tasks, Members, Computers) are never pulled: they stay current on their own. On iOS a pull that passed the trigger stays armed; on Android, as in Material 3, pulling back above it takes it back, and crossing it gives a short vibration. The indicator is the Spinner on every platform. Every such page also reloads when it is opened, so the gesture is never the only way. `PullToRefresh` is experimental, from `@botiverse/raft-ui/wip`. ([#743](https://github.com/botiverse/raft-design/pull/743))
   - Why: on a phone there was no way to ask a snapshot page for what is new without leaving it; the numbers match Raft's iOS app so the two feel the same.
   - Affects: a rule for products; raft-ui adds `PullToRefresh` (wip).
   - Docs: https://raft-design.botiverse.build/patterns/navigation/#refreshing

package/dist/index.d.mts

@@ -3291,16 +3291,16 @@ export declare function NotificationCenterEmptyState(props: NotificationCenterEm
 declare const toastStyles: import("tailwind-variants/lite").TVReturnType<{
   placement: {
     "bottom-center": {
-      viewport: string;
+      viewport: string[];
     };
     "bottom-right": {
-      viewport: string;
+      viewport: string[];
     };
     "top-center": {
-      viewport: string;
+      viewport: string[];
     };
     "top-right": {
-      viewport: string;
+      viewport: string[];
     };
     none: {
       viewport: string;
@@ -3338,16 +3338,16 @@ declare const toastStyles: import("tailwind-variants/lite").TVReturnType<{
 }, undefined, {
   placement: {
     "bottom-center": {
-      viewport: string;
+      viewport: string[];
     };
     "bottom-right": {
-      viewport: string;
+      viewport: string[];
     };
     "top-center": {
-      viewport: string;
+      viewport: string[];
     };
     "top-right": {
-      viewport: string;
+      viewport: string[];
     };
     none: {
       viewport: string;
@@ -3385,16 +3385,16 @@ declare const toastStyles: import("tailwind-variants/lite").TVReturnType<{
 }, import("tailwind-variants/lite").TVReturnTypeLike<{
   placement: {
     "bottom-center": {
-      viewport: string;
+      viewport: string[];
     };
     "bottom-right": {
-      viewport: string;
+      viewport: string[];
     };
     "top-center": {
-      viewport: string;
+      viewport: string[];
     };
     "top-right": {
-      viewport: string;
+      viewport: string[];
     };
     none: {
       viewport: string;
@@ -3448,6 +3448,10 @@ type ToastCommandOptions<Data extends object = ToastData> = Omit<Partial<ToastOb
     onClick?: ComponentPropsWithRef<"button">["onClick"];
   };
   contentClassName?: string;
+  /**
+   * Show `ToastClose` (Dismiss). Defaults to `false`: every toast closes by
+   * itself, swipes away and closes with Esc.
+   */
   dismissible?: boolean;
   /** Show the intent's icon in `ToastIcon`. Defaults to `true`. */
   icon?: boolean;
@@ -3472,13 +3476,19 @@ export declare const toast: {
   dismiss(id?: string): void;
 };
 type ToastProviderProps = Toast.Provider.Props & {
+  /**
+   * How long a toast from the `toast` command API stays when it has an action
+   * or is an `error`, in ms. Defaults to 8000, or to `timeout` when that is
+   * longer, and to 0 when `timeout` is 0.
+   */
+  actionTimeout?: number;
   portalContainer?: Toast.Portal.Props["container"];
   renderViewport?: boolean;
   viewportClassName?: string;
   viewportPlacement?: ToastViewportProps["placement"];
   viewportStrategy?: ToastViewportProps["strategy"];
 };
-export declare function ToastProvider({ children, portalContainer, renderViewport, toastManager, timeout, viewportClassName, viewportPlacement, viewportStrategy, ...props }: ToastProviderProps): import("react").JSX.Element;
+export declare function ToastProvider({ actionTimeout, children, limit, portalContainer, renderViewport, toastManager, timeout, viewportClassName, viewportPlacement, viewportStrategy, ...props }: ToastProviderProps): import("react").JSX.Element;
 type ToastPortalProps = Toast.Portal.Props;
 export declare function ToastPortal(props: ToastPortalProps): import("react").JSX.Element;
 type ToastViewportProps = StyledProps<Toast.Viewport.Props> & Pick<VariantProps<typeof toastStyles>, "placement" | "strategy">;
@@ -3486,7 +3496,13 @@ export declare function ToastViewport({ placement, strategy, className, ...props
 type ToastPositionerProps = StyledProps<Toast.Positioner.Props>;
 export declare function ToastPositioner({ className, ...props }: ToastPositionerProps): import("react").JSX.Element;
 type ToastRootProps = StyledProps<Toast.Root.Props> & Pick<VariantProps<typeof toastStyles>, "layout">;
-export declare function ToastRoot({ layout, className, toast: toastObject, ...props }: ToastRootProps): import("react").JSX.Element;
+/**
+ * A toast pushed past the provider's `limit` by a newer one is closed, not
+ * held back: toasts replace each other and never queue, so an older toast
+ * can't come back when the newer one goes. Its swipe direction follows the
+ * viewport's edge unless `swipeDirection` is passed.
+ */
+export declare function ToastRoot({ layout, className, swipeDirection, toast: toastObject, ...props }: ToastRootProps): import("react").JSX.Element;
 type ToastContentProps = StyledProps<Toast.Content.Props> & {
   ref?: Ref<HTMLDivElement>;
 };

package/dist/index.mjs

@@ -10143,10 +10143,10 @@ const toastStyles = tv({
 	},
 	variants: {
 		placement: {
-			"bottom-center": { viewport: "bottom-4 left-1/2 -translate-x-1/2" },
-			"bottom-right": { viewport: "right-4 bottom-4" },
-			"top-center": { viewport: "top-4 left-1/2 -translate-x-1/2" },
-			"top-right": { viewport: "top-4 right-4" },
+			"bottom-center": { viewport: ["bottom-[calc(max(var(--toast-viewport-bottom,0px),env(safe-area-inset-bottom))+1rem)]", "left-1/2 -translate-x-1/2"] },
+			"bottom-right": { viewport: ["bottom-[calc(max(var(--toast-viewport-bottom,0px),env(safe-area-inset-bottom))+1rem)]", "right-4"] },
+			"top-center": { viewport: ["top-[calc(max(var(--toast-viewport-top,0px),env(safe-area-inset-top))+1rem)]", "left-1/2 -translate-x-1/2"] },
+			"top-right": { viewport: ["top-[calc(max(var(--toast-viewport-top,0px),env(safe-area-inset-top))+1rem)]", "right-4"] },
 			none: { viewport: "contents" }
 		},
 		strategy: {
@@ -10215,7 +10215,22 @@ const toastProgressStyle = /* @__PURE__ */ jsx("style", {
 `
 });
 const DEFAULT_TOAST_TIMEOUT_MS = 5e3;
+const DEFAULT_TOAST_ACTION_TIMEOUT_MS = 8e3;
 const ToastProviderConfigContext = createContext({ timeout: DEFAULT_TOAST_TIMEOUT_MS });
+const ToastPlacementContext = createContext(void 0);
+const SWIPE_DIRECTION_BY_EDGE = {
+	top: ["up"],
+	bottom: ["down", "right"]
+};
+function getSwipeDirection(placement) {
+	if (placement?.startsWith("top-")) return [...SWIPE_DIRECTION_BY_EDGE.top];
+	if (placement?.startsWith("bottom-")) return [...SWIPE_DIRECTION_BY_EDGE.bottom];
+}
+function resolveActionTimeout(timeout, actionTimeout) {
+	if (actionTimeout !== void 0) return actionTimeout;
+	return timeout > 0 ? Math.max(timeout, DEFAULT_TOAST_ACTION_TIMEOUT_MS) : 0;
+}
+const defaultManagerTiming = { actionTimeout: DEFAULT_TOAST_ACTION_TIMEOUT_MS };
 const toastAction = tv({ slots: {
 	root: [
 		"relative order-2 inline-flex shrink-0 items-center justify-center whitespace-nowrap select-none",
@@ -10236,9 +10251,11 @@ const createToastManager = Toast.createToastManager;
 const useToastManager = Toast.useToastManager;
 const defaultToastManager = createToastManager();
 function addDefaultToast(intent, title, options = {}) {
-	const { action, contentClassName, dismissible, icon, leading, priority, progress, ...toastOptions } = options;
+	const { action, contentClassName, dismissible, icon, leading, priority, progress, timeout, ...toastOptions } = options;
+	const needsTimeToAct = Boolean(action) || intent === "error";
 	return defaultToastManager.add({
 		...toastOptions,
+		timeout: timeout ?? (needsTimeToAct ? defaultManagerTiming.actionTimeout : void 0),
 		actionProps: action ? {
 			children: action.label,
 			onClick: action.onClick
@@ -10281,13 +10298,22 @@ function getToastTone(type) {
 	if (type === "success" || type === "warning" || type === "error") return type;
 	return "info";
 }
-function ToastProvider({ children, portalContainer, renderViewport = true, toastManager = defaultToastManager, timeout = DEFAULT_TOAST_TIMEOUT_MS, viewportClassName, viewportPlacement = "bottom-center", viewportStrategy = "fixed", ...props }) {
+function ToastProvider({ actionTimeout, children, limit = 1, portalContainer, renderViewport = true, toastManager = defaultToastManager, timeout = DEFAULT_TOAST_TIMEOUT_MS, viewportClassName, viewportPlacement = "bottom-center", viewportStrategy = "fixed", ...props }) {
 	const config = useMemo(() => ({ timeout }), [timeout]);
+	const resolvedActionTimeout = resolveActionTimeout(timeout, actionTimeout);
+	useLayoutEffect(() => {
+		if (toastManager !== defaultToastManager) return;
+		defaultManagerTiming.actionTimeout = resolvedActionTimeout;
+		return () => {
+			defaultManagerTiming.actionTimeout = DEFAULT_TOAST_ACTION_TIMEOUT_MS;
+		};
+	}, [resolvedActionTimeout, toastManager]);
 	return /* @__PURE__ */ jsx(ToastProviderConfigContext.Provider, {
 		value: config,
 		children: /* @__PURE__ */ jsxs(Toast.Provider, {
 			toastManager,
 			timeout,
+			limit,
 			...props,
 			children: [children, renderViewport ? /* @__PURE__ */ jsx(DefaultToastLayer, {
 				placement: viewportPlacement,
@@ -10309,11 +10335,14 @@ function ToastViewport({ placement = "bottom-center", strategy = "fixed", classN
 		placement,
 		strategy
 	});
-	return /* @__PURE__ */ jsx(Toast.Viewport, {
-		"data-slot": "toast-viewport",
-		"data-toast-placement": placement,
-		className: viewport({ className }),
-		...props
+	return /* @__PURE__ */ jsx(ToastPlacementContext.Provider, {
+		value: placement,
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			"data-slot": "toast-viewport",
+			"data-toast-placement": placement,
+			className: viewport({ className }),
+			...props
+		})
 	});
 }
 function ToastPositioner({ className, ...props }) {
@@ -10324,11 +10353,28 @@ function ToastPositioner({ className, ...props }) {
 		...props
 	});
 }
-function ToastRoot({ layout = "stacked", className, toast: toastObject, ...props }) {
+/**
+* A toast pushed past the provider's `limit` by a newer one is closed, not
+* held back: toasts replace each other and never queue, so an older toast
+* can't come back when the newer one goes. Its swipe direction follows the
+* viewport's edge unless `swipeDirection` is passed.
+*/
+function ToastRoot({ layout = "stacked", className, swipeDirection, toast: toastObject, ...props }) {
 	const { root } = toastStyles({ layout });
+	const placement = useContext(ToastPlacementContext);
+	const { close } = useToastManager();
+	const replaced = toastObject.limited === true && toastObject.transitionStatus !== "ending";
+	useLayoutEffect(() => {
+		if (replaced) close(toastObject.id);
+	}, [
+		close,
+		replaced,
+		toastObject.id
+	]);
 	return /* @__PURE__ */ jsx(Toast.Root, {
 		"data-slot": "toast",
 		"data-toast-type": toastObject.type ?? "info",
+		swipeDirection: swipeDirection ?? getSwipeDirection(placement),
 		toast: toastObject,
 		className: root({ className }),
 		...props
@@ -10504,29 +10550,24 @@ function DefaultToastLayer({ placement, portalContainer, strategy, viewportClass
 			placement,
 			strategy,
 			className: viewportClassName,
-			children: /* @__PURE__ */ jsx(DefaultToastList, { placement })
+			children: /* @__PURE__ */ jsx(DefaultToastList, {})
 		})
 	});
 }
-function DefaultToastList({ placement }) {
+function DefaultToastList() {
 	const { toasts } = useToastManager();
-	return toasts.map((toastObject) => /* @__PURE__ */ jsx(DefaultToastItem, {
-		placement,
-		toast: toastObject
-	}, toastObject.id));
+	return toasts.map((toastObject) => /* @__PURE__ */ jsx(DefaultToastItem, { toast: toastObject }, toastObject.id));
 }
-const TOP_SWIPE_DIRECTION = ["up", "right"];
-function DefaultToastItem({ placement, toast: toastObject }) {
+function DefaultToastItem({ toast: toastObject }) {
 	const { timeout } = useContext(ToastProviderConfigContext);
 	const showDescription = Boolean(toastObject.description);
 	const showAction = Boolean(toastObject.actionProps?.children);
-	const showClose = toastObject.data?.hasClose !== false;
+	const showClose = toastObject.data?.hasClose === true;
 	const showIcon = hasLeading(toastObject) || toastObject.data?.hasIcon !== false;
 	const progressDuration = toastObject.timeout ?? timeout;
 	const showProgress = toastObject.data?.hasProgress === true && toastObject.type !== "loading" && progressDuration > 0;
 	return /* @__PURE__ */ jsx(ToastRoot, {
 		toast: toastObject,
-		swipeDirection: placement.startsWith("top-") ? TOP_SWIPE_DIRECTION : void 0,
 		children: /* @__PURE__ */ jsxs(ToastContent, {
 			className: toastObject.data?.contentClassName,
 			children: [

package/dist/wip.d.mts

@@ -698,11 +698,11 @@ type PullToRefreshIndicatorProps = Omit<ComponentProps<"div">, "children"> & {
   label: string;
 };
 /**
- * The pull's indicator, with the DS Spinner in it. Render it as the
- * scroller's first child: by default it is the space the pull opens, so the
- * content moves down with the pull; on Android it travels down over the
- * content instead (Material 3). It holds a polite live region that announces
- * `label` while refreshing.
+ * The pull's indicator. Render it as the scroller's first child: by default
+ * it is the space the pull opens, with the DS Spinner in it, so the content
+ * moves down with the pull; on Android it is Material 3's own indicator, a
+ * disc with a progress arc that travels down over the content. It holds a
+ * polite live region that announces `label` while refreshing.
  */
 export declare function PullToRefreshIndicator({ pull, label, className, style, ...props }: PullToRefreshIndicatorProps): import("react").JSX.Element;
 //#endregion

package/dist/wip.mjs

@@ -2034,6 +2034,153 @@ function usePullToRefresh(scrollRef, { onRefresh, disabled = false, threshold =
 	};
 }
 //#endregion
+//#region src/components/pull-to-refresh/pull-to-refresh-material-progress.tsx
+/**
+* Android's own pull-to-refresh progress, drawn as Material 3 draws it
+* (Compose's `PullToRefreshDefaults.Indicator`, the one Chrome on Android
+* shows too): a 2.5px arc of radius 7.5px in a 40px disc. While pulling the
+* arc grows to 0.8 of the circle and turns a little with the pull, with an
+* arrowhead at its end, at 0.3 opacity until the pull is armed and fully
+* opaque from then on. While refreshing it is Material's indeterminate arc,
+* which grows and shrinks as it turns. Internal: `PullToRefreshIndicator`
+* renders it on Android.
+*/
+/** The disc's centre, in its 40px box. */
+const CENTER = 20;
+const MATERIAL_ARC_RADIUS = 7.5;
+const MATERIAL_STROKE_WIDTH = 2.5;
+const ARROW_WIDTH = 10;
+const ARROW_HEIGHT = 5;
+/** The longest the arc gets while pulling, as a share of the circle. */
+const MATERIAL_MAX_ARC = .8;
+const CIRCUMFERENCE = 2 * Math.PI * MATERIAL_ARC_RADIUS;
+/**
+* The arc for a pull's progress (0 to 1), as Material computes it: nothing
+* for the first 40%, then the arc grows to `MATERIAL_MAX_ARC` of the circle
+* and its start turns from -45° to +27° (12 o'clock is -90°), and the
+* arrowhead grows with it.
+*/
+function materialArc(progress) {
+	const adjusted = Math.max(Math.min(1, progress) - .4, 0) * 5 / 3;
+	const rotation = (-.25 + .4 * adjusted) * .5;
+	return {
+		startAngle: rotation * 360,
+		endAngle: (rotation + adjusted * MATERIAL_MAX_ARC) * 360,
+		arrowScale: Math.min(1, adjusted)
+	};
+}
+const point = (degrees) => {
+	const radians = degrees * Math.PI / 180;
+	return `${CENTER + MATERIAL_ARC_RADIUS * Math.cos(radians)} ${CENTER + MATERIAL_ARC_RADIUS * Math.sin(radians)}`;
+};
+/** An SVG path for the arc, clockwise from `startAngle` to `endAngle`. */
+function arcPath({ startAngle, endAngle }) {
+	const sweep = endAngle - startAngle;
+	if (sweep <= .01) return "";
+	const large = sweep > 180 ? 1 : 0;
+	return `M ${point(startAngle)} A ${MATERIAL_ARC_RADIUS} ${MATERIAL_ARC_RADIUS} 0 ${large} 1 ${point(endAngle)}`;
+}
+/**
+* The arrowhead: a triangle whose base straddles the arc at 3 o'clock and
+* whose tip points clockwise, turned to the arc's end.
+*/
+function arrowPoints(scale) {
+	const half = ARROW_WIDTH * scale / 2;
+	const base = 17.5;
+	const x = 27.5;
+	return `${x - half},${base} ${x + half},${base} ${x},${base + ARROW_HEIGHT * scale}`;
+}
+const MATERIAL_STYLE = `
+@keyframes raft-ptr-material-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes raft-ptr-material-dash {
+  0% {
+    stroke-dasharray: 0.4 ${CIRCUMFERENCE};
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: ${CIRCUMFERENCE * .7} ${CIRCUMFERENCE};
+    stroke-dashoffset: ${-CIRCUMFERENCE * .1};
+  }
+  100% {
+    stroke-dasharray: ${CIRCUMFERENCE * .7} ${CIRCUMFERENCE};
+    stroke-dashoffset: ${-CIRCUMFERENCE * .99};
+  }
+}
+
+[data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] {
+  animation: raft-ptr-material-rotate 1.4s linear infinite;
+}
+
+[data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] [data-material-indeterminate] {
+  animation: raft-ptr-material-dash 1.4s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="pull-to-refresh-material-progress"][data-state="refreshing"],
+  [data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] [data-material-indeterminate] {
+    animation: none;
+  }
+
+  [data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] [data-material-indeterminate] {
+    stroke-dasharray: ${CIRCUMFERENCE * .75} ${CIRCUMFERENCE};
+  }
+}
+`;
+const materialStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-pull-to-refresh-material",
+	precedence: "default",
+	children: MATERIAL_STYLE
+});
+const materialProgress = tv({ slots: {
+	root: ["size-10 shrink-0 overflow-visible", "text-info-strong"],
+	determinate: ["transition-opacity duration-150 ease-out motion-reduce:transition-none", "opacity-30 data-armed:opacity-100"],
+	arc: ["fill-none stroke-current [stroke-linecap:butt]"],
+	arrow: ["fill-current"],
+	indeterminate: ["fill-none stroke-current [stroke-linecap:round]"]
+} });
+function PullToRefreshMaterialProgress({ state, progress }) {
+	const { root, determinate, arc, arrow, indeterminate } = materialProgress();
+	const refreshing = state === "refreshing";
+	const armed = progress >= 1;
+	const values = materialArc(refreshing ? 1 : progress);
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-slot": "pull-to-refresh-material-progress",
+		"data-state": state,
+		"data-armed": !refreshing && armed ? "" : void 0,
+		viewBox: "0 0 40 40",
+		"aria-hidden": "true",
+		className: root(),
+		children: [materialStyle, refreshing ? /* @__PURE__ */ jsx("circle", {
+			"data-material-indeterminate": "",
+			cx: CENTER,
+			cy: CENTER,
+			r: MATERIAL_ARC_RADIUS,
+			strokeWidth: MATERIAL_STROKE_WIDTH,
+			transform: `rotate(-90 ${CENTER} ${CENTER})`,
+			className: indeterminate()
+		}) : /* @__PURE__ */ jsxs("g", {
+			"data-armed": armed ? "" : void 0,
+			className: determinate(),
+			children: [/* @__PURE__ */ jsx("path", {
+				"data-material-arc": "",
+				d: arcPath(values),
+				strokeWidth: MATERIAL_STROKE_WIDTH,
+				className: arc()
+			}), values.arrowScale > 0 && /* @__PURE__ */ jsx("polygon", {
+				"data-material-arrow": "",
+				points: arrowPoints(values.arrowScale),
+				transform: `rotate(${values.endAngle - 2.5} ${CENTER} ${CENTER})`,
+				className: arrow()
+			})]
+		})]
+	});
+}
+//#endregion
 //#region src/components/pull-to-refresh/pull-to-refresh-indicator.tsx
 const pullStepStyle = /* @__PURE__ */ jsx("style", {
 	href: "raft-ui-pull-to-refresh",
@@ -2077,47 +2224,93 @@ const pullToRefreshIndicator = tv({
 		android: {
 			root: ["sticky top-0 z-10 h-0 overflow-visible"],
 			surface: [
-				"absolute inset-x-0 top-0 mx-auto size-10 rounded-md bg-layer-popover shadow-float ring-1 ring-line-seam",
+				"absolute inset-x-0 top-0 mx-auto size-10 rounded-full bg-layer-popover shadow-float",
 				"translate-y-[calc(var(--pull-distance)-100%)]",
-				"transition-[translate,opacity]",
+				"transition-[translate,opacity,scale]",
 				...SNAP_BACK,
-				"data-[state=idle]:opacity-0"
+				"data-[state=idle]:opacity-0",
+				"data-[exit=finish]:scale-0 data-[exit=finish]:duration-150 data-[exit=finish]:ease-out"
 			]
 		}
 	} },
 	defaultVariants: { platform: "default" }
 });
 /**
-* The pull's indicator, with the DS Spinner in it. Render it as the
-* scroller's first child: by default it is the space the pull opens, so the
-* content moves down with the pull; on Android it travels down over the
-* content instead (Material 3). It holds a polite live region that announces
-* `label` while refreshing.
+* How the Android disc leaves once idle: `finish` when a refresh has just
+* ended (it scales down where it held), `cancel` otherwise (it slides back
+* up). The finish keeps the distance it held, so it doesn't also slide.
+* `gone` once the scale-down has ended: the disc stays scaled away and its
+* arc stops turning.
+*/
+function useAndroidExit(state, distance) {
+	const [previous, setPrevious] = useState(state);
+	const [exit, setExit] = useState({
+		kind: "cancel",
+		distance: 0
+	});
+	const [held, setHeld] = useState(distance);
+	if (state !== previous) {
+		setPrevious(state);
+		if (state === "idle") setExit(previous === "refreshing" ? {
+			kind: "finish",
+			distance: held
+		} : {
+			kind: "cancel",
+			distance: 0
+		});
+	}
+	if (state === "refreshing" && distance !== held) setHeld(distance);
+	const settle = () => {
+		if (exit.kind === "finish") setExit({
+			...exit,
+			kind: "gone"
+		});
+	};
+	return {
+		...exit,
+		settle
+	};
+}
+/**
+* The pull's indicator. Render it as the scroller's first child: by default
+* it is the space the pull opens, with the DS Spinner in it, so the content
+* moves down with the pull; on Android it is Material 3's own indicator, a
+* disc with a progress arc that travels down over the content. It holds a
+* polite live region that announces `label` while refreshing.
 */
 function PullToRefreshIndicator({ pull, label, className, style, ...props }) {
 	const { state, distance, progress, platform } = pull;
 	const { root, surface, spinner, status } = pullToRefreshIndicator({ platform });
 	const android = platform === "android";
+	const exit = useAndroidExit(state, distance);
+	const finishing = android && state === "idle" && exit.kind !== "cancel";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "pull-to-refresh-indicator",
 		"data-state": state,
 		"data-platform": platform,
-		"data-pull-step": state === "pulling" ? pullStep(progress) : void 0,
+		"data-pull-step": !android && state === "pulling" ? pullStep(progress) : void 0,
 		className: root({ className }),
 		style: {
 			...style,
 			height: android ? void 0 : distance,
 			["--pull-progress"]: progress,
-			["--pull-distance"]: `${distance}px`
+			["--pull-distance"]: `${finishing ? exit.distance : distance}px`
 		},
 		...props,
 		children: [
-			pullStepStyle,
+			!android && pullStepStyle,
 			/* @__PURE__ */ jsx("div", {
 				"data-slot": "pull-to-refresh-surface",
 				"data-state": state,
+				"data-exit": finishing ? "finish" : void 0,
 				className: surface(),
-				children: /* @__PURE__ */ jsx(Spinner, {
+				onTransitionEnd: (event) => {
+					if (event.target === event.currentTarget && event.propertyName === "scale") exit.settle();
+				},
+				children: android ? /* @__PURE__ */ jsx(PullToRefreshMaterialProgress, {
+					state: finishing && exit.kind === "finish" ? "refreshing" : state,
+					progress
+				}) : /* @__PURE__ */ jsx(Spinner, {
 					"aria-hidden": "true",
 					role: "presentation",
 					"aria-label": void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",