@rojaostudio/ds 2.0.0-next.23 → 2.0.0-next.26

package/dist/components/form-actions.d.ts

@@ -1,28 +1,60 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type FormActionsLayout = 'inline' | 'stacked';
+type FormActionsLayout = 'inline' | 'stacked' | 'bar';
 interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The buttons (Figma: slot `actions`, up to 3), always in reading order: Cancelar first, the primary
      * last. In `stacked` the primary goes on top, and it is moved first in the page too, so the focus
-     * order follows what is seen.
+     * order follows what is seen. In `bar`, compact (below 1024), only the last one (the primary) is shown.
      */
     children: ReactNode;
-    /** A short supporting sentence beside the actions (Figma: `showHelper` + `helper`). */
+    /**
+     * A short supporting sentence beside the actions (Figma: `showHelper` + `helper`). It is a live region
+     * (`role="status"`): when it changes (say, "Falta preço e prazo"), it is said without moving focus.
+     */
     helper?: ReactNode;
     /**
-     * inline (desktop: floats and hugs its content, sentence left, actions right) or stacked (phone: edge
-     * to edge at the foot, primary full width on top) (Figma: `layout`).
+     * inline (desktop: floats and hugs its content, sentence left, actions right), stacked (phone, a task
+     * with no way out in the topbar: edge to edge at the foot, primary full width on top) or bar (the foot of
+     * a create form: the SavingBar's skeleton, neutral; expanded from 1024, compact in one row below it)
+     * (Figma: `layout`).
      */
     layout?: FormActionsLayout;
+    /**
+     * `bar` only, with a `helper`: turns the helper into a button that opens what is missing (a Drawer with
+     * the checklist), in the compact arrangement only; expanded, the helper stays text (Figma: `showDetails`).
+     */
+    onDetails?: () => void;
+    /** Said after the helper in the details button's accessible name, hidden on screen. */
+    detailsLabel?: string;
+    /** Whether the panel the details button opens is open (aria-expanded). */
+    detailsExpanded?: boolean;
+    /** The id of that panel (aria-controls). */
+    detailsControls?: string;
 }
 /**
  * FormActions — Figma [RDS] Actions/FormActions. The actions at the end of a create form or a task,
  * there from the first second. Where it sticks is the page's job: `position: sticky` at the bottom of
- * the scrolling container, with `scroll-padding-bottom` equal to its height, so a focused field is never
- * hidden behind it (WCAG 2.4.11). Styles: form-actions.css.
+ * the scrolling container. Styles: form-actions.css.
+ *
+ * `layout="bar"` is the foot of a create form: the SavingBar's skeleton (68 expanded, 64 plus the safe area
+ * compact, 24 at the sides, the primary in the same place), but neutral: form-actions/bar/background
+ * (surface/page) with the hairline form-actions/border on top, never the brand's colour (that is the
+ * SavingBar's signal, for a pending edit). Below 1024 (the screen width, as the SavingBar) it is one row:
+ * the helper on the left (at most 2 lines; with `onDetails`, the button that opens what is missing) and only
+ * the primary on the right.
+ *
+ * The app's rules around it:
+ * - The primary is never disabled: validate on click, show the error on the field and move the focus to the
+ *   first pending one.
+ * - The scrolling container takes `scroll-padding-bottom` equal to the bar's height plus
+ *   `env(safe-area-inset-bottom)`, so a focused field is never hidden behind it (WCAG 2.4.11).
+ * - On the phone the bar leaves while the on-screen keyboard is open (it would cover the field being typed).
+ * - Compact has no Cancelar: the way out is back or X in the topbar, with an AlertDialog "Sair sem criar?"
+ *   ([Continuar editando] [Sair sem criar]) when something was typed. Cancelar can also go in the footer of
+ *   the details Drawer.
  */
-declare function FormActions({ children, helper, layout, className, ...rest }: FormActionsProps): react.JSX.Element;
+declare function FormActions({ children, helper, layout, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: FormActionsProps): react.JSX.Element;
 
 export { FormActions, type FormActionsLayout, type FormActionsProps };

package/dist/components/form-actions.js

@@ -3,17 +3,65 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children } from "react";
+import { ChevronUpIcon } from "./internal/icons.js";
 function FormActions(_a) {
-  var _b = _a, { children, helper, layout = "inline", className } = _b, rest = __objRest(_b, ["children", "helper", "layout", "className"]);
+  var _b = _a, {
+    children,
+    helper,
+    layout = "inline",
+    onDetails,
+    detailsLabel = "Ver o que falta",
+    detailsExpanded,
+    detailsControls,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "helper",
+    "layout",
+    "onDetails",
+    "detailsLabel",
+    "detailsExpanded",
+    "detailsControls",
+    "className"
+  ]);
   const actions = Children.toArray(children);
+  const bar = layout === "bar";
+  const details = bar && helper != null && helper !== false && onDetails !== void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: ["rds-form-actions", `rds-form-actions--${layout}`, className].filter(Boolean).join(" "),
       children: [
-        helper && /* @__PURE__ */ jsx("p", { className: "rds-form-actions__helper", children: helper }),
+        helper && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: ["rds-form-actions__helper", details && "rds-form-actions__helper--details"].filter(Boolean).join(" "),
+            role: "status",
+            children: bar ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "rds-form-actions__text", children: helper }),
+              details && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "rds-form-actions__details",
+                  "aria-expanded": detailsExpanded != null ? detailsExpanded : false,
+                  "aria-controls": detailsControls,
+                  onClick: onDetails,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "rds-form-actions__text", children: helper }),
+                    /* @__PURE__ */ jsxs("span", { className: "rds-visually-hidden", children: [
+                      ", ",
+                      detailsLabel
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "rds-form-actions__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) })
+                  ]
+                }
+              )
+            ] }) : helper
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: "rds-form-actions__actions", children: layout === "stacked" ? actions.reverse() : actions })
       ]
     })

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@ export { HoverCard, HoverCardProps } from './hover-card.js';
 export { Dialog, DialogClose, DialogProps, DialogSize } from './dialog.js';
 export { Sheet, SheetClose, SheetProps, SheetSide } from './sheet.js';
 export { Drawer, DrawerClose, DrawerProps } from './drawer.js';
+export { LoadingOverlay, LoadingOverlayProps } from './loading-overlay.js';
 export { DropdownMenu, DropdownMenuAlign, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuItemTone, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSide } from './dropdown-menu.js';
 export { ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuItemTone, ContextMenuProps, ContextMenuSeparator } from './context-menu.js';
 export { Command, CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, CommandProps } from './command.js';

package/dist/components/index.js

@@ -5,6 +5,7 @@ import { HoverCard } from "./hover-card.js";
 import { Dialog, DialogClose } from "./dialog.js";
 import { Sheet, SheetClose } from "./sheet.js";
 import { Drawer, DrawerClose } from "./drawer.js";
+import { LoadingOverlay } from "./loading-overlay.js";
 import {
   DropdownMenu,
   DropdownMenuItem,
@@ -223,6 +224,7 @@ export {
   KbdGroup,
   Listbox,
   ListboxOption,
+  LoadingOverlay,
   Marker,
   MediaTile,
   Message,

package/dist/components/loading-overlay.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface LoadingOverlayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The action is running (Figma: `open`, code only). The overlay shows only if it is still true after `delay`:
+     * if the next page opens first, it never shows.
+     */
+    open: boolean;
+    /** What is happening, in the gerund with its object: "Criando o produto…" (Figma: `label`). It is the dialog's name and is said once (aria-live="polite"). */
+    label?: string;
+    /**
+     * How long (ms) `open` has to stay true before the overlay shows. Up to it, the wait is the main button in
+     * loading (`<Button loading>`, or the SavingBar in `status="saving"`); past it, the overlay comes in and stays
+     * until the other page opens. 400 by default; 0 shows it at once.
+     */
+    delay?: number;
+    /** Where the portal goes (default: document.body). Inside a `.ds-plate`, for example, to read the brand mode. */
+    container?: HTMLElement | null;
+}
+/**
+ * LoadingOverlay — Figma [RDS] Overlays/LoadingOverlay. The long wait of an action that leads to another page
+ * (create the product and land on its editing). A veil over the whole screen (loading-overlay/scrim) and, in the
+ * middle, a panel (loading-overlay/background, radius/container, elevation/modal) with the Spinner lg and one line
+ * saying what is happening. Styles: loading-overlay.css.
+ *
+ * Time: up to `delay` (~400 ms) only the main button is in loading ("Criando…", aria-busy on the button); past it,
+ * the overlay shows, and it stays until the other page opens. If the navigation comes first, it never shows. Do not
+ * use it for short waits (it only flashes), to load a page or a list (PageSkeleton), for a measured wait (Progress),
+ * or to save without changing page (the SavingBar in `status="saving"`). Never two indicators: with the overlay,
+ * the SavingBar keeps only its button in loading.
+ *
+ * Error: the app sets `open={false}` (the overlay leaves and the focus goes back to where it was, the main button)
+ * and returns the error to the SavingBar in `status="error"`, with the form untouched.
+ *
+ * Accessibility: role="dialog" aria-modal="true" named by `label`; the focus goes to the panel (tabindex=-1) and
+ * stays there; Escape does not close it (the action is running). While it is shown, the rest of the page is
+ * `inert` and `aria-busy="true"` (put back on close). The label is in an aria-live="polite" region. With
+ * prefers-reduced-motion: reduce, no fade, and the Spinner turns slowly (3 s a turn).
+ */
+declare function LoadingOverlay({ open, label, delay, container, className, ...rest }: LoadingOverlayProps): react.ReactPortal | null;
+
+export { LoadingOverlay, type LoadingOverlayProps };

package/dist/components/loading-overlay.js

@@ -0,0 +1,81 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Spinner } from "./spinner.js";
+function isolate(keep) {
+  const marked = [];
+  for (let node = keep; node && node !== document.body && node.parentElement; node = node.parentElement) {
+    for (const sibling of node.parentElement.children) {
+      if (sibling === node || sibling.hasAttribute("inert") || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sibling.tagName)) continue;
+      marked.push({ el: sibling, inert: sibling.getAttribute("inert"), busy: sibling.getAttribute("aria-busy") });
+      sibling.setAttribute("inert", "");
+      sibling.setAttribute("aria-busy", "true");
+    }
+  }
+  return marked;
+}
+function restore(marked) {
+  for (const { el, inert, busy } of marked) {
+    if (inert === null) el.removeAttribute("inert");
+    else el.setAttribute("inert", inert);
+    if (busy === null) el.removeAttribute("aria-busy");
+    else el.setAttribute("aria-busy", busy);
+  }
+}
+function LoadingOverlay(_a) {
+  var _b = _a, { open, label = "Carregando\u2026", delay = 400, container, className } = _b, rest = __objRest(_b, ["open", "label", "delay", "container", "className"]);
+  const [shown, setShown] = useState(false);
+  const veil = useRef(null);
+  const panel = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      setShown(false);
+      return;
+    }
+    if (delay <= 0) {
+      setShown(true);
+      return;
+    }
+    const timer = setTimeout(() => setShown(true), delay);
+    return () => clearTimeout(timer);
+  }, [open, delay]);
+  useLayoutEffect(() => {
+    if (!shown || !veil.current || !panel.current) return;
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const marked = isolate(veil.current);
+    const box = panel.current;
+    box.focus({ preventScroll: true });
+    const keep = (event) => {
+      if (!box.contains(event.target)) box.focus({ preventScroll: true });
+    };
+    document.addEventListener("focusin", keep);
+    return () => {
+      document.removeEventListener("focusin", keep);
+      restore(marked);
+      if (previous == null ? void 0 : previous.isConnected) previous.focus({ preventScroll: true });
+    };
+  }, [shown]);
+  if (!shown || typeof document === "undefined") return null;
+  const onKeyDown = (event) => {
+    if (event.key === "Escape" || event.key === "Tab") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), { ref: veil, className: ["rds-loading-overlay", className].filter(Boolean).join(" "), onKeyDown, children: /* @__PURE__ */ jsxs("div", { ref: panel, className: "rds-loading-overlay__panel", role: "dialog", "aria-modal": "true", "aria-label": label, tabIndex: -1, children: [
+      /* @__PURE__ */ jsx(Spinner, { size: "lg", tone: "neutral", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("p", { className: "rds-loading-overlay__label", "aria-live": "polite", children: label })
+    ] }) })),
+    container != null ? container : document.body
+  );
+}
+export {
+  LoadingOverlay
+};

package/dist/components/saving-bar.d.ts

@@ -4,19 +4,26 @@ import { HTMLAttributes, ReactNode } from 'react';
 type SavingBarStatus = 'unsaved' | 'saving' | 'error';
 interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * unsaved: the message and the actions; saving: a turning loader and `savingMessage`, buttons off;
-     * error: an alert, `errorMessage`, and Salvar becomes `retryLabel` (Figma: `status`).
+     * unsaved: the message and the actions; saving: `savingMessage`, Salvar in loading (`savingLabel`, the only
+     * indicator, no loader in the message) and Descartar disabled; error: an alert, `errorMessage`, and Salvar
+     * becomes `retryLabel` (Figma: `status`).
      */
     status?: SavingBarStatus;
     /** The unsaved text (Figma: `message`). */
     message?: ReactNode;
     /** The text while saving. */
     savingMessage?: ReactNode;
+    /** Salvar's label while saving, in loading (`<Button loading>`), also announced. */
+    savingLabel?: string;
     /** The error text. */
     errorMessage?: ReactNode;
     /** Called by Salvar (and by Tentar de novo, on error). */
     onSave: () => void;
-    /** Shows Descartar and is called when it is pressed (Figma: `showDiscard`). */
+    /**
+     * Shows Descartar and is called when it is pressed (Figma: `showDiscard`). Expanded only: in the compact
+     * arrangement (the phone) the bar has only the main button, and Descartar belongs to the app, in the footer of
+     * the details Drawer or in the confirmation when leaving with changes (AlertDialog).
+     */
     onDiscard?: () => void;
     saveLabel?: string;
     retryLabel?: string;
@@ -38,8 +45,11 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
  * saved, and leaves once saved. It is the brand's primary colour (savingbar/background, colors/primary/default),
  * in light and dark and in every brand: a state that waits for a decision, not a notice. It does not place itself:
  * put it sticky or fixed at the bottom. Its Buttons are Salvar in tone action and Descartar in tone neutral ghost,
- * with the bar's colours (savingbar/button/*). Styles: saving-bar.css.
+ * with the bar's colours (savingbar/button/*). Below 1024 (compact, the phone) it is one row, 64 tall plus the
+ * safe area: the message (or the details button) on the left and only Salvar on the right; Descartar is the app's
+ * there, in the footer of the details Drawer or in the confirmation when leaving. While saving, the indicator is
+ * Salvar in loading, alone (with the LoadingOverlay too). Styles: saving-bar.css.
  */
-declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: SavingBarProps): react.JSX.Element;
+declare function SavingBar({ status, message, savingMessage, savingLabel, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: SavingBarProps): react.JSX.Element;
 
 export { SavingBar, type SavingBarProps, type SavingBarStatus };

package/dist/components/saving-bar.js

@@ -6,13 +6,13 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
-import { Loader } from "./internal/button.js";
 import { AlertIcon, ChevronUpIcon } from "./internal/icons.js";
 function SavingBar(_a) {
   var _b = _a, {
     status = "unsaved",
     message = "Altera\xE7\xF5es n\xE3o salvas",
     savingMessage = "Salvando\u2026",
+    savingLabel = "Salvando\u2026",
     errorMessage = "N\xE3o salvou. Tente de novo.",
     onSave,
     onDiscard,
@@ -28,6 +28,7 @@ function SavingBar(_a) {
     "status",
     "message",
     "savingMessage",
+    "savingLabel",
     "errorMessage",
     "onSave",
     "onDiscard",
@@ -53,7 +54,6 @@ function SavingBar(_a) {
       className: ["rds-savingbar", className].filter(Boolean).join(" "),
       children: /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__row", children: [
         /* @__PURE__ */ jsxs("p", { className: ["rds-savingbar__message", details && "rds-savingbar__message--details"].filter(Boolean).join(" "), role: "status", children: [
-          saving && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon rds-savingbar__loader", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Loader, {}) }),
           error && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertIcon, {}) }),
           /* @__PURE__ */ jsx("span", { className: "rds-savingbar__text", children: text }),
           details && /* @__PURE__ */ jsxs(
@@ -76,8 +76,8 @@ function SavingBar(_a) {
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__actions", children: [
-          onDiscard && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
-          /* @__PURE__ */ jsx(Button, { tone: "action", variant: "fill", disabled: saving, onClick: onSave, children: error ? retryLabel : saveLabel })
+          onDiscard && /* @__PURE__ */ jsx(Button, { className: "rds-savingbar__discard", tone: "neutral", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
+          /* @__PURE__ */ jsx(Button, { tone: "action", variant: "fill", loading: saving, loadingLabel: savingLabel, onClick: onSave, children: saving ? savingLabel : error ? retryLabel : saveLabel })
         ] })
       ] })
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.23",
+  "version": "2.0.0-next.26",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -190,7 +190,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.9"
+    "@rojaostudio/ds-core": "1.1.0-next.10"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",

package/styles/rds/components-styles.css

@@ -4639,6 +4639,16 @@ input:focus-visible + .rds-checkbox__box {
  * FormActions (Actions collection, form-actions/*): the actions at the end of a form, on the card
  * surface with a hairline. inline floats (container radius, raised elevation, 16 24 padding, 24 between
  * sentence and actions); stacked sticks to the foot edge to edge (16 padding, hairline on top).
+ * bar is the foot of a create form, the SavingBar's skeleton but neutral: form-actions/bar/background
+ * (surface/page) with the hairline form-actions/border on top (drawn inside, so it adds no height), full
+ * width (at least 320), 16 between the helper and the actions (8 apart). Two arrangements by the screen
+ * width, as the SavingBar (layout/compact below lg 1024): expanded, 12 24 padding (68 = 12 + 44 + 12), the
+ * helper grows (at least 160) beside Cancelar and the primary; compact, one row, 10 24 padding
+ * (64 = 10 + 44 + 10) plus the safe area at the bottom, the helper (flex 1, at most 2 lines) on the left and
+ * only the last action (the primary) on the right.
+ * Details (showDetails, onDetails in code): compact, the helper becomes a text button with chevron-up 20 at
+ * the right (12 apart); hover underlines, focus draws form-actions/focus/ring (focus/ring-width, radius/focus);
+ * the touch area is 44 tall without changing the drawing. Expanded, the helper stays text.
  */
 .rds-form-actions {
   box-sizing: border-box;
@@ -4694,10 +4704,125 @@ input:focus-visible + .rds-checkbox__box {
   width: 100%;
 }
 
+/* bar: the foot of a create form, the SavingBar's skeleton, neutral. */
+.rds-form-actions--bar {
+  gap: var(--space-16);
+  justify-content: flex-end;
+  width: 100%;
+  min-width: min(320px, 100%);
+  padding: var(--space-12) var(--space-24);
+  background: var(--form-actions-bar-background);
+  /* The hairline on top, inside: the bar stays 68 / 64 tall. */
+  box-shadow: inset 0 var(--border-width) 0 var(--form-actions-border);
+}
+
+.rds-form-actions--bar .rds-form-actions__helper {
+  display: flex;
+  flex: 1 1 160px;
+  align-items: center;
+  min-width: 160px;
+}
+
+.rds-form-actions--bar .rds-form-actions__actions {
+  flex: none;
+  flex-wrap: nowrap;
+}
+
+.rds-form-actions__text {
+  display: -webkit-box;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.rds-form-actions__icon {
+  display: inline-flex;
+  flex: none;
+  width: var(--size-20);
+  height: var(--size-20);
+}
+
+.rds-form-actions__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.rds-form-actions__details {
+  position: relative;
+  display: none;
+  flex: 1;
+  align-items: center;
+  gap: var(--space-12);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-focus);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* The touch area: 44 tall around the helper, invisible. */
+.rds-form-actions__details::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  min-height: 44px;
+  height: 100%;
+  transform: translateY(-50%);
+}
+
+.rds-form-actions__details:hover .rds-form-actions__text {
+  text-decoration: underline;
+}
+
+.rds-form-actions__details:focus-visible {
+  outline: var(--focus-ring-width) solid var(--form-actions-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
+
+/* Compact: by the screen width (the Figma viewport mode), as the SavingBar, not a container query. */
+@media (max-width: 1023px) {
+  .rds-form-actions--bar {
+    padding-block: 10px;
+    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .rds-form-actions--bar .rds-form-actions__helper {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  /* Only the primary (the last action): Cancelar is the topbar's back or X, or the details Drawer's footer. */
+  .rds-form-actions--bar .rds-form-actions__actions > :not(:last-child) {
+    display: none;
+  }
+
+  .rds-form-actions__helper--details > .rds-form-actions__text {
+    display: none;
+  }
+
+  .rds-form-actions__details {
+    display: flex;
+  }
+}
+
 @media (forced-colors: active) {
   .rds-form-actions {
     border-color: CanvasText;
   }
+
+  .rds-form-actions--bar {
+    border-top: var(--border-width) solid CanvasText;
+  }
 }
 
 /* components/google-account-chooser.css */
@@ -6783,6 +6908,70 @@ body:has(.rds-modal) {
   }
 }
 
+/* components/loading-overlay.css */
+/* @tokens loading-overlay */
+/*
+ * LoadingOverlay (Overlays collection, loading-overlay/*): a veil over the whole screen (loading-overlay/scrim,
+ * surface/scrim) in the overlay layer (z/overlay), and a panel in the middle (loading-overlay/background,
+ * surface/card; radius/container, 24 padding, 16 between the Spinner lg and the label, at most 320 wide,
+ * elevation/modal). The label is type/label Medium in loading-overlay/text (text/body), centred. The panel gives the
+ * text its own surface, so it reads over any screen, light, dark or in the brand. It fades in; with reduced motion,
+ * no fade (and the Spinner turns slowly, spinner.css).
+ */
+.rds-loading-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-16);
+  background: var(--loading-overlay-scrim);
+  animation: rds-loading-overlay-in 150ms ease-out;
+}
+
+.rds-loading-overlay__panel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-16);
+  max-width: min(320px, 100%);
+  padding: var(--space-24);
+  border-radius: var(--radius-container);
+  background: var(--loading-overlay-background);
+  box-shadow: var(--elevation-modal);
+  color: var(--loading-overlay-text);
+  font-family: var(--type-font-stack);
+  outline: none;
+}
+
+.rds-loading-overlay__label {
+  margin: 0;
+  font-size: var(--type-label-size);
+  font-weight: 500;
+  line-height: var(--type-label-line);
+  text-align: center;
+}
+
+@keyframes rds-loading-overlay-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rds-loading-overlay {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .rds-loading-overlay__panel {
+    border: var(--border-width) solid CanvasText;
+  }
+}
+
 /* components/marker.css */
 /* @tokens marker */
 /*
@@ -8467,10 +8656,13 @@ input:focus-visible + .rds-radio__circle {
  * The bar redeclares the Button tokens those two read: the Salvar fill is savingbar/button/fill/background with
  * savingbar/button/fill/label, its hover the fill at 85% over the bar (active 70%); the Descartar label is
  * savingbar/button/ghost/label, its hover the label colour at 15% (active 25%); the focus ring is savingbar/focus/ring;
- * disabled (saving) is each Button at 40% over the bar, as the Figma layer opacity.
+ * disabled (Descartar while saving) is the Button at 40% over the bar, as the Figma layer opacity. While saving, Salvar
+ * is in loading (its loader in the label colour): the only indicator, none in the message.
  * Two arrangements, by the screen width, as the Figma viewport mode (layout/compact below lg 1024): expanded from 1024,
- * the message grows (at least 160) beside the actions; compact below it, the message on top and Descartar and
- * Salvar under it, sharing the width.
+ * 12 24 padding (68 tall), the message grows (at least 160) beside Descartar and Salvar; compact below it, one row,
+ * 10 24 padding (64 = 10 + 44 + 10) plus the safe area at the bottom, the message (flex 1, at most 2 lines) on the
+ * left and only the main button on the right: Descartar is not shown (it lives in the details Drawer's footer or in
+ * the confirmation when leaving).
  * Details (showDetails, onDetails in code): in compact, the unsaved message becomes a text button with chevron-up 20 at
  * the right (12 apart) that opens the Drawer with what is missing; hover underlines, focus draws the ring
  * savingbar/focus/ring (focus/ring-width, radius/focus) 4 around the message box, inside stroke, as the Figma
@@ -8543,22 +8735,6 @@ input:focus-visible + .rds-radio__circle {
   height: 100%;
 }
 
-.rds-savingbar__loader > svg {
-  animation: rds-savingbar-turn 1s linear infinite;
-}
-
-@keyframes rds-savingbar-turn {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .rds-savingbar__loader > svg {
-    animation-duration: 3s;
-  }
-}
-
 .rds-savingbar__actions {
   display: flex;
   flex: none;
@@ -8605,19 +8781,18 @@ input:focus-visible + .rds-radio__circle {
 }
 
 @media (max-width: 1023px) {
-  .rds-savingbar__row {
-    flex-direction: column;
-    align-items: stretch;
+  .rds-savingbar {
+    padding-block: 10px;
+    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
   }
 
   .rds-savingbar__message {
-    flex: none;
+    flex: 1 1 0;
     min-width: 0;
   }
 
-  .rds-savingbar__actions > * {
-    flex: 1 1 0;
-    min-width: 0;
+  .rds-savingbar .rds-savingbar__discard {
+    display: none;
   }
 
   .rds-savingbar__message--details > .rds-savingbar__text {

package/styles/rds/components.css

@@ -124,6 +124,8 @@
   --savingbar-button-fill-background: var(--text-on-primary);
   --savingbar-button-fill-label: var(--colors-primary-default);
   --savingbar-button-ghost-label: var(--text-on-primary);
+  --form-actions-bar-background: var(--surface-page);
+  --form-actions-focus-ring: var(--focus-ring);
 
   /* blocks */
   --topnav-background: var(--surface-card);
@@ -908,11 +910,11 @@
   --progress-fill: var(--chart-series-1);
   --progress-label: var(--text-body);
   --progress-value: var(--text-muted);
-  --spinner-indicator: var(--colors-primary-default);
+  --spinner-indicator: var(--colors-primary-dark);
   --spinner-track: var(--surface-tint-strong);
   --spinner-label: var(--text-muted);
-  --spinner-inverse-indicator: var(--text-on-primary-strong);
-  --spinner-inverse-label: var(--text-on-primary-strong);
+  --spinner-inverse-indicator: var(--text-on-primary);
+  --spinner-inverse-label: var(--text-on-primary);
   --rating-empty: var(--border-strong);
   --rating-label: var(--text-muted);
   --rating-star: var(--colors-state-warning);
@@ -1007,5 +1009,8 @@
   --image-crop-dialog-selection: var(--text-on-cover);
   --image-crop-dialog-handle: var(--text-on-cover);
   --image-crop-dialog-stage-background: var(--surface-muted);
+  --loading-overlay-scrim: var(--surface-scrim);
+  --loading-overlay-background: var(--surface-card);
+  --loading-overlay-text: var(--text-body);
 }
 }