@rojaostudio/ds 2.0.0-next.30 → 2.0.0-next.31

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

@@ -6,19 +6,21 @@ type FormActionsPlacement = BottomBarPlacement;
 interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The actions (Figma: the exposed `cancel` and `primary` Buttons), in reading order: Cancelar (tone neutral, ghost)
-     * first, the primary (tone action, fill) last. Expanded (from 1024) they all show, on the right; compact (below
-     * 1024) only the last one, the primary: the others are `display: none`, and the way out is the topbar's X.
+     * first, the primary (tone action, fill) last. Expanded (from 1024) they all show, on the right, 8 apart. Compact
+     * (below 1024) the first one, Cancelar, becomes an IconButton with the X (tone neutral, ghost, md), named by its
+     * label and with its Tooltip, beside the primary: leading, X, primary. Any action between the two is `display: none` in compact.
      */
     children: ReactNode;
     /**
-     * docked (default: the container's width, against the foot) or floating (from 1024 up: off the foot, rounded, the
-     * overlay shadow, 24 of margin, at most 768, centred). Below 1024 floating is docked (Figma: `placement`).
+     * docked (default: the container's width, against the foot) or floating (from 1024 up: in the bottom right corner,
+     * 24 off the foot and the right, hugging its content, rounded, the overlay shadow). Below 1024 floating is docked
+     * (Figma: `placement`).
      */
     placement?: FormActionsPlacement;
     /**
-     * One ~44 control on the left, never running text (Figma: slot `leading`, `showLeading`). Present, even `null`
-     * while its control is hidden, it reserves 44 so the actions do not jump. Whoever fills it says its own changes
-     * (its own aria-live); the bar says nothing.
+     * One ~44 control on the left, never running text (Figma: slot `leading`, `showLeading`). Left out, no slot. Present,
+     * even `null` while its control is hidden, it reserves 44 so the actions do not jump. Whoever fills it says its own
+     * changes (its own aria-live); the bar says nothing.
      */
     leading?: ReactNode;
 }
@@ -29,8 +31,14 @@ interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
  * shell: a band in the brand's primary colour (bottom-bar/background), 64 plus the safe area compact, 68 expanded,
  * 24 at the sides, sticky at the bottom of the scrolling container. Styles: form-actions.css, internal/bottom-bar.css.
  *
- * `<FormActions placement="docked" leading={…}><Button tone="neutral" variant="ghost">Cancelar</Button><Button
- * tone="action">Criar produto</Button></FormActions>`: the last child is the primary; compact, the others leave.
+ * `<FormActions placement="docked" leading={…}><Button tone="neutral" variant="ghost" onClick={cancel}>Cancelar
+ * </Button><Button tone="action">Criar produto</Button></FormActions>`: the last child is the primary, the first
+ * (when there are two or more) is Cancelar.
+ *
+ * Compact, Cancelar is drawn as the X: an IconButton built from the first child's props, so give that child its
+ * label as text (or `aria-label`), its `onClick` and, if it has one, `disabled`. The X's `aria-label` is that label.
+ * With more than two children, the ones between Cancelar and the primary are not shown in compact (`display: none`):
+ * put them somewhere else on the phone, or keep two.
  *
  * 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
@@ -41,8 +49,8 @@ interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
  * - On the phone (below 1024) the bar leaves while the on-screen keyboard is open (a field is focused and the visible
  *   area shrinks): it slides down (no motion with prefers-reduced-motion) and comes back on blur; it never takes the
  *   focus.
- * - Compact has no Cancelar: the way out is the X in the topbar, with an AlertDialog "Sair sem criar?" ([Continuar
- *   editando] [Sair sem criar]) when something was typed.
+ * - Leaving with something typed (Cancelar or the X) asks first, with an AlertDialog "Sair sem criar?" ([Continuar
+ *   editando] [Sair sem criar]).
  * - Buttons at the end of a card or a dialog are loose Buttons or a ButtonGroup, not this.
  */
 declare function FormActions({ children, placement, leading, className, ...rest }: FormActionsProps): react.JSX.Element;

package/dist/components/form-actions.js

@@ -4,11 +4,41 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { IconButton } from "./icon-button.js";
 import { BottomBar } from "./internal/bottom-bar.js";
+import { CloseIcon } from "./internal/icons.js";
+import { Tooltip } from "./tooltip.js";
+function textOf(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (isValidElement(node)) return textOf(node.props.children);
+  return "";
+}
 function FormActions(_a) {
   var _b = _a, { children, placement = "docked", leading, className } = _b, rest = __objRest(_b, ["children", "placement", "leading", "className"]);
-  return /* @__PURE__ */ jsx(BottomBar, __spreadProps(__spreadValues({}, rest), { placement, leading, className: ["rds-form-actions", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx("div", { className: "rds-form-actions__actions", children }) }));
+  const actions = Children.toArray(children);
+  const cancel = actions.length > 1 && isValidElement(actions[0]) ? actions[0].props : null;
+  const cancelLabel = cancel ? cancel["aria-label"] || textOf(cancel.children) : "";
+  const primary = actions[actions.length - 1];
+  return /* @__PURE__ */ jsx(BottomBar, __spreadProps(__spreadValues({}, rest), { placement, leading, className: ["rds-form-actions", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-form-actions__actions", children: [
+    actions.slice(0, -1),
+    cancel && /* @__PURE__ */ jsx(Tooltip, { text: cancelLabel, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: "rds-form-actions__cancel-icon",
+        icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+        label: cancelLabel,
+        tone: "neutral",
+        variant: "ghost",
+        size: "md",
+        disabled: cancel.disabled,
+        onClick: cancel.onClick
+      }
+    ) }),
+    primary
+  ] }) }));
 }
 export {
   FormActions

package/dist/components/internal/bottom-bar.d.ts

@@ -4,15 +4,17 @@ import { HTMLAttributes, ReactNode } from 'react';
 type BottomBarPlacement = 'docked' | 'floating';
 interface BottomBarProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * docked (the container's width, against the foot, square corners) or floating (from lg 1024 up: off the foot by
-     * bottom-bar/floating/margin, at most bottom-bar/floating/max-width, centred, bottom-bar/floating/radius and the
-     * elevation/overlay shadow). Below 1024 floating is exactly docked (Figma: `placement`).
+     * docked (the container's width, against the foot, square corners) or floating (from lg 1024 up: in the bottom
+     * right corner of the scrolling container, bottom-bar/floating/margin off the foot and the right, hugging its
+     * content, bottom-bar/floating/padding-*, bottom-bar/floating/radius and the elevation/overlay shadow). Below 1024
+     * floating is exactly docked (Figma: `placement`).
      */
     placement?: BottomBarPlacement;
     /**
-     * The leading slot, on the left: one ~44 control, never running text. Present (even `null` or `false` while its
-     * control is hidden), the slot is there and reserves bottom-bar/leading/min-width, so what follows does not jump
-     * when the control comes and goes; left out (`undefined`), there is no slot. Whoever fills it says its own changes.
+     * The leading slot, on the left: one ~44 control, never running text. Left out (`undefined`), there is no slot: no
+     * wrapper is rendered. Present (even `null` or `false` while its control is hidden, as the Figma's showLeading on
+     * with the slot empty), the slot is there and reserves bottom-bar/leading/min-width (44, no minimum height), so what
+     * follows does not jump when the control comes and goes. Whoever fills it says its own changes.
      */
     leading?: ReactNode;
     children: ReactNode;
@@ -20,10 +22,11 @@ interface BottomBarProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * BottomBar — Figma [RDS] Actions/.bottom-bar, private: the shell at the foot of the screen under the FormActions and
  * the SavingBar. Not exported from the package. It owns the colour (bottom-bar/background, the brand's primary), the
- * height (64 plus env(safe-area-inset-bottom) compact, 68 expanded), the padding and gap, the place (sticky at the
- * bottom of the scrolling container), the placement, the leading slot, the Button tokens in the bar's colours and the
- * on-screen keyboard (compact: it slides away while a field is being typed in). Whoever builds on it puts the
- * actions. Styles: bottom-bar.css.
+ * height (64 plus env(safe-area-inset-bottom) compact, 68 expanded docked, 64 floating), the padding and gap, the
+ * place (sticky at the bottom of the scrolling container; floating, in its bottom right corner), the placement, the
+ * leading slot, the Button tokens in the bar's colours, the on-screen keyboard (compact: it slides away while a field
+ * is being typed in) and the Toaster's offset (--toast-offset-bottom, while it is on screen). Whoever builds on it
+ * puts the actions. Styles: bottom-bar.css.
  */
 declare function BottomBar({ placement, leading, className, children, ...rest }: BottomBarProps): react.JSX.Element;
 

package/dist/components/internal/bottom-bar.js

@@ -5,13 +5,52 @@ import {
   __spreadValues
 } from "../../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { useOnScreenKeyboard } from "./use-on-screen-keyboard.js";
+const TOAST_OFFSET = "--toast-offset-bottom";
+const onScreen = /* @__PURE__ */ new Map();
+function footprint(el) {
+  const bottom = Number.parseFloat(getComputedStyle(el).bottom);
+  return el.getBoundingClientRect().height + (Number.isFinite(bottom) ? bottom : 0);
+}
+function publishToastOffset() {
+  const root = document.documentElement;
+  if (!onScreen.size) {
+    root.style.removeProperty(TOAST_OFFSET);
+    return;
+  }
+  const taken = Math.max(...onScreen.values());
+  root.style.setProperty(TOAST_OFFSET, `calc(${taken}px + var(--space-16))`);
+}
+function useToastOffset(ref, visible) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !visible) return;
+    const measure = () => {
+      onScreen.set(el, footprint(el));
+      publishToastOffset();
+    };
+    measure();
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(measure) : null;
+    observer == null ? void 0 : observer.observe(el);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      window.removeEventListener("resize", measure);
+      onScreen.delete(el);
+      publishToastOffset();
+    };
+  }, [ref, visible]);
+}
 function BottomBar(_a) {
   var _b = _a, { placement = "docked", leading, className, children } = _b, rest = __objRest(_b, ["placement", "leading", "className", "children"]);
   const keyboard = useOnScreenKeyboard();
+  const ref = useRef(null);
+  useToastOffset(ref, !keyboard);
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({}, rest), {
+      ref,
       className: ["rds-bottom-bar", `rds-bottom-bar--${placement}`, keyboard && "rds-bottom-bar--keyboard", className].filter(Boolean).join(" "),
       children: [
         leading !== void 0 && /* @__PURE__ */ jsx("div", { className: "rds-bottom-bar__leading", children: leading }),

package/dist/components/internal/icons.d.ts

@@ -62,6 +62,8 @@ declare function ImageIcon(): react.JSX.Element;
 declare function ImageOffIcon(): react.JSX.Element;
 /** A circular arrow: try again. */
 declare function RotateCcwIcon(): react.JSX.Element;
+/** An arrow bending back (Lucide undo-2): undo, discard the changes. */
+declare function Undo2Icon(): react.JSX.Element;
 /** Sparkles: the assistant. */
 declare function SparklesIcon(): react.JSX.Element;
 /** A thumb up: a reaction. */
@@ -113,4 +115,4 @@ declare function RectangleHorizontalIcon(): react.JSX.Element;
 /** A dashed square: a free crop, no fixed aspect. */
 declare function SquareDashedIcon(): react.JSX.Element;
 
-export { AlertIcon, ArrowDownIcon, ArrowLeftIcon, ArrowUpDownIcon, ArrowUpIcon, BadgeCheckIcon, BuildingIcon, CalendarIcon, CameraIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleCheckIcon, ClockIcon, CloseIcon, CopyIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, ImageIcon, ImageOffIcon, ImagePlusIcon, InfoIcon, LockIcon, MapPinIcon, MegaphoneIcon, MenuIcon, MicIcon, MinusIcon, MoreVerticalIcon, PaperclipIcon, PencilIcon, PhoneIcon, PlusIcon, QuoteIcon, RectangleHorizontalIcon, RectangleVerticalIcon, ReplyIcon, RotateCcwIcon, SearchIcon, SearchXIcon, SlidersIcon, SmileIcon, SparklesIcon, SquareDashedIcon, SquareIcon, StarFilledIcon, StarIcon, TableIcon, ThumbsUpIcon, TriangleAlertIcon, UploadIcon, UserIcon };
+export { AlertIcon, ArrowDownIcon, ArrowLeftIcon, ArrowUpDownIcon, ArrowUpIcon, BadgeCheckIcon, BuildingIcon, CalendarIcon, CameraIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleCheckIcon, ClockIcon, CloseIcon, CopyIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, ImageIcon, ImageOffIcon, ImagePlusIcon, InfoIcon, LockIcon, MapPinIcon, MegaphoneIcon, MenuIcon, MicIcon, MinusIcon, MoreVerticalIcon, PaperclipIcon, PencilIcon, PhoneIcon, PlusIcon, QuoteIcon, RectangleHorizontalIcon, RectangleVerticalIcon, ReplyIcon, RotateCcwIcon, SearchIcon, SearchXIcon, SlidersIcon, SmileIcon, SparklesIcon, SquareDashedIcon, SquareIcon, StarFilledIcon, StarIcon, TableIcon, ThumbsUpIcon, TriangleAlertIcon, Undo2Icon, UploadIcon, UserIcon };

package/dist/components/internal/icons.js

@@ -150,6 +150,12 @@ function RotateCcwIcon() {
     /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
   ] });
 }
+function Undo2Icon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })
+  ] });
+}
 function SparklesIcon() {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx("path", { d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" }),
@@ -327,6 +333,7 @@ export {
   TableIcon,
   ThumbsUpIcon,
   TriangleAlertIcon,
+  Undo2Icon,
   UploadIcon,
   UserIcon
 };

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

@@ -22,17 +22,18 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
     /** Called by Salvar (and by Tentar de novo, on error). */
     onSave: () => void;
     /**
-     * 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 way out, in the
-     * confirmation when leaving with changes (AlertDialog).
+     * Shows Descartar and is called when it is pressed (Figma: `showDiscard`). Expanded, a Button (tone neutral,
+     * ghost); compact (the phone), an IconButton with the undo icon (undo-2), named `discardLabel`. Disabled while
+     * saving, in both.
      */
     onDiscard?: () => void;
     saveLabel?: string;
     retryLabel?: string;
     discardLabel?: string;
     /**
-     * docked (default: the container's width, against the foot) or floating (from 1024 up: off the foot, rounded, the
-     * overlay shadow, 24 of margin, at most 768, centred). Below 1024 floating is docked (Figma: `placement`).
+     * docked (default: the container's width, against the foot) or floating (from 1024 up: in the bottom right corner,
+     * 24 off the foot and the right, hugging its content but at least 320 wide, rounded, the overlay shadow). Below 1024
+     * floating is docked (Figma: `placement`).
      */
     placement?: SavingBarPlacement;
     /**
@@ -48,7 +49,8 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
  * primary colour (bottom-bar/background) in light, dark and every brand, 64 plus the safe area compact, 68 expanded,
  * 24 at the sides, sticky at the bottom of the scrolling container. Its Buttons are Salvar in tone action fill and
  * Descartar in tone neutral ghost, with the bar's colours (bottom-bar/button/*). Below 1024 (compact, the phone) it is
- * one row: the message on the left and only Salvar on the right; Descartar is in the confirmation when leaving. While
+ * one row: the message on the left, Descartar as an IconButton with the undo icon (aria-label `discardLabel`) and
+ * Salvar on the right. While
  * saving, the indicator is Salvar in loading, alone (with the LoadingOverlay too). On the phone it leaves while the
  * on-screen keyboard is open and comes back on blur, never taking the focus. The content needs room below as tall as
  * the bar (`scroll-padding-bottom`, plus `env(safe-area-inset-bottom)`). Styles: saving-bar.css,

package/dist/components/saving-bar.js

@@ -6,8 +6,10 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
+import { IconButton } from "./icon-button.js";
 import { BottomBar } from "./internal/bottom-bar.js";
-import { AlertIcon } from "./internal/icons.js";
+import { AlertIcon, Undo2Icon } from "./internal/icons.js";
+import { Tooltip } from "./tooltip.js";
 function SavingBar(_a) {
   var _b = _a, {
     status = "unsaved",
@@ -57,6 +59,19 @@ function SavingBar(_a) {
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__actions", children: [
           onDiscard && /* @__PURE__ */ jsx(Button, { className: "rds-savingbar__discard", tone: "neutral", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
+          onDiscard && /* @__PURE__ */ jsx(Tooltip, { text: discardLabel, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "rds-savingbar__discard-icon",
+              icon: /* @__PURE__ */ jsx(Undo2Icon, {}),
+              label: discardLabel,
+              tone: "neutral",
+              variant: "ghost",
+              size: "md",
+              disabled: saving,
+              onClick: onDiscard
+            }
+          ) }),
           /* @__PURE__ */ jsx(Button, { tone: "action", variant: "fill", loading: saving, loadingLabel: savingLabel, onClick: onSave, children: saving ? savingLabel : error ? retryLabel : saveLabel })
         ] })
       ]

package/dist/components/toast.d.ts

@@ -64,10 +64,12 @@ interface ToasterProps {
 /** @internal How long a toast stays: 5 s, or until closed when it has an action (WCAG 2.2.1). */
 declare const toastDuration: (duration: number | undefined, hasAction: boolean) => number;
 /**
- * Toaster — the region where the toasts of the Figma [RDS] Feedback/Toast appear (Radix Toast): the bottom-right
- * corner, up to three at a time (a fourth pushes the oldest out), each one announced in a live region (danger
- * assertively, the others politely). F8 takes the focus to the region; swiping right dismisses. A toast closes by
- * itself after 5 s; one with an action stays until the action or the × (WCAG 2.2.1). Styles: toast.css.
+ * Toaster — the region where the toasts of the Figma [RDS] Feedback/Toast appear (Radix Toast): bottom-center on
+ * every screen width (no switch by breakpoint; on the phone, the width minus 16 on each side), up to three at a time
+ * (a fourth pushes the oldest out). With a bar at the foot on screen (FormActions, SavingBar) the stack rises above
+ * it (--toast-offset-bottom, filled by the bar) and goes back to 16 when the bar leaves. Each one is announced in a
+ * live region (danger assertively, the others politely). F8 takes the focus to the region; swiping right dismisses.
+ * A toast closes by itself after 5 s; one with an action stays until the action or the × (WCAG 2.2.1). Styles: toast.css.
  */
 declare function Toaster({ label, closeLabel, children }: ToasterProps): react.JSX.Element;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.30",
+  "version": "2.0.0-next.31",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",

package/styles/rds/components-styles.css

@@ -4653,8 +4653,10 @@ input:focus-visible + .rds-checkbox__box {
 /* @tokens bottom-bar */
 /*
  * FormActions: no tokens of its own; the shell (internal/bottom-bar.css, bottom-bar/*) brings the colour, the height,
- * the padding, the place and the Buttons' colours. Here only the actions: on the right, 8 apart, Cancelar then the
- * primary. Compact (below lg 1024, by the screen width as the Figma viewport mode), only the last one, the primary.
+ * the padding, the place and the Buttons' colours (the X too: the neutral ghost reads bottom-bar/button/ghost/label,
+ * its hover that colour at 15%, its ring bottom-bar/focus/ring). Here only the actions: on the right, 8 apart,
+ * Cancelar then the primary. Compact (below lg 1024, by the screen width as the Figma viewport mode), Cancelar is the
+ * X (an IconButton) and the primary; the actions between them are not shown.
  */
 .rds-form-actions__actions {
   display: flex;
@@ -4663,11 +4665,20 @@ input:focus-visible + .rds-checkbox__box {
   margin-inline-start: auto;
 }
 
+/* Expanded: the labelled Cancelar; the X is the compact one. */
+.rds-form-actions__actions > .rds-form-actions__cancel-icon {
+  display: none;
+}
+
 @media (max-width: 1023px) {
-  /* Only the primary (the last action): Cancelar is the topbar's X. */
+  /* The X and the primary (the last action): every other action leaves. */
   .rds-form-actions__actions > :not(:last-child) {
     display: none;
   }
+
+  .rds-form-actions__actions > .rds-form-actions__cancel-icon {
+    display: inline-flex;
+  }
 }
 
 /* components/google-account-chooser.css */
@@ -5399,10 +5410,17 @@ input:focus-visible + .rds-checkbox__box {
  * container, bottom-bar/padding-x (24) at the sides, bottom-bar/gap (16) between the parts.
  * Height, by the screen width as the Figma viewport mode (layout/compact below lg 1024): compact, bottom-bar/padding-y
  * (10) above and below, 64 = 10 + 44 + 10, plus the safe area at the bottom; expanded, 2 more inside each side, 68.
- * The leading slot reserves bottom-bar/leading/min-width (44, the md Button height).
- * floating, from 1024 only: bottom-bar/floating/margin off the foot and the sides, at most
- * bottom-bar/floating/max-width, centred, bottom-bar/floating/radius and elevation/overlay. Below 1024 it is docked:
- * no radius, no shadow, no margin, the full width.
+ * The leading slot, only when there is one, reserves bottom-bar/leading/min-width (44, the md Button height) and no
+ * height of its own.
+ * floating, from 1024 only: in the bottom right corner of the scrolling container, bottom-bar/floating/margin (24) off
+ * the foot and the right; it hugs its content (width: fit-content, never wider than the container minus the margins),
+ * with bottom-bar/floating/padding-y (8) and padding-x (12) plus the 2 of the expanded arrangement above and below:
+ * 64 = 10 + 44 + 10; bottom-bar/floating/radius and elevation/overlay. Still sticky, not fixed: it stays inside the
+ * scrolling container (a page beside a sidebar never has the sidebar covered, a panel keeps its bar), and the room it
+ * takes at the end of the content is the room the content needs below. Below 1024 it is docked: no radius, no
+ * shadow, no margin, the full width.
+ * While it is on screen, BottomBar fills --toast-offset-bottom on the root (its height, plus the margin when
+ * floating, plus 16): the Toaster's stack rises above it (toast.css).
  * The Buttons on it stay the Button: the action fill and the neutral ghost read their tokens, redeclared here in the
  * bar's colours (bottom-bar/button/*): the fill's hover at 85% over the bar (active 70%), the ghost's hover the label
  * colour at 15% (active 25%), disabled at 40% over the bar (the Figma layer opacity), the focus ring
@@ -5461,10 +5479,12 @@ input:focus-visible + .rds-checkbox__box {
 @media (min-width: 1024px) {
   .rds-bottom-bar--floating {
     bottom: var(--bottom-bar-floating-margin);
-    width: calc(100% - 2 * var(--bottom-bar-floating-margin));
-    max-width: var(--bottom-bar-floating-max-width);
-    margin-inline: auto;
+    width: fit-content;
+    min-width: 0;
+    max-width: calc(100% - 2 * var(--bottom-bar-floating-margin));
+    margin-inline: auto var(--bottom-bar-floating-margin);
     margin-bottom: var(--bottom-bar-floating-margin);
+    padding: calc(var(--bottom-bar-floating-padding-y) + 2px) var(--bottom-bar-floating-padding-x);
     border-radius: var(--bottom-bar-floating-radius);
     box-shadow: var(--elevation-overlay);
   }
@@ -8614,9 +8634,10 @@ input:focus-visible + .rds-radio__circle {
  * SavingBar: no tokens of its own; the shell (internal/bottom-bar.css, bottom-bar/*) brings the colour, the height,
  * the padding, the place and the Buttons' colours. Here the message (label, medium, in bottom-bar/text, at most 2
  * lines with an ellipsis; on error the alert 20 before it, 12 apart) and the actions (8 apart, Descartar then Salvar).
- * Expanded (from lg 1024) the message grows (at least 160) beside Descartar and Salvar; compact (below 1024, by the
- * screen width as the Figma viewport mode) one row, the message (flex 1) on the left and only Salvar on the right:
- * Descartar is not shown (it lives in the confirmation when leaving).
+ * Expanded (from lg 1024) the message grows (at least 160) beside Descartar and Salvar; floating there, the bar hugs
+ * them but stays at least 320 wide. Compact (below 1024, by the screen width as the Figma viewport mode) one row, the
+ * message (flex 1) on the left, Descartar as the undo IconButton (its colours and ring from the shell's neutral ghost)
+ * and Salvar on the right.
  */
 .rds-savingbar__message {
   display: flex;
@@ -8658,15 +8679,30 @@ input:focus-visible + .rds-radio__circle {
   gap: var(--space-8);
 }
 
+/* Expanded: the labelled Descartar; the undo icon is the compact one. */
+.rds-savingbar__actions > .rds-savingbar__discard-icon {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .rds-savingbar.rds-bottom-bar--floating {
+    min-width: 320px;
+  }
+}
+
 @media (max-width: 1023px) {
   .rds-savingbar__message {
     flex: 1 1 0;
     min-width: 0;
   }
 
-  .rds-savingbar .rds-savingbar__discard {
+  .rds-savingbar__actions > .rds-savingbar__discard {
     display: none;
   }
+
+  .rds-savingbar__actions > .rds-savingbar__discard-icon {
+    display: inline-flex;
+  }
 }
 
 /* components/section-card.css */
@@ -10704,13 +10740,23 @@ tbody > tr:last-child > .rds-table__status {
 /*
  * Toast (Feedback collection, toast/*): 460 wide, 8 8 8 16 inside, 12 between icon, text, action and ×,
  * elevation/overlay. outline: white with a border, the icon in the tone; soft and fill: the tone's plate, and
- * everything on it (icon, text, action, ×) in the plate's text colour. Stacked in the bottom-right corner,
- * 16 from the edges and 8 apart.
+ * everything on it (icon, text, action, ×) in the plate's text colour. Stacked at the bottom centre on every screen
+ * width (bottom-center, no switch by breakpoint: the bottom right corner belongs to the floating bar at the foot),
+ * 16 from the foot and 8 apart; on the phone, the screen width minus 16 on each side (calc(100% - 32px)).
+ * With a bar at the foot on screen (FormActions, SavingBar), the stack rises above it: --toast-offset-bottom, filled
+ * on the root by the bar while it is mounted and visible (its height, plus its margin when floating, plus 16), and
+ * back to 16 when it leaves or the on-screen keyboard hides it. The default lives on the root; the bar sets it inline
+ * on the root (so it wins) and removes it.
  */
+:root {
+  --toast-offset-bottom: var(--space-16);
+}
+
 .rds-toast-viewport {
   position: fixed;
   right: 0;
   bottom: 0;
+  left: 0;
   z-index: var(--z-toast);
   box-sizing: border-box;
   display: flex;
@@ -10718,8 +10764,9 @@ tbody > tr:last-child > .rds-table__status {
   gap: var(--space-8);
   width: min(calc(460px + var(--space-16) * 2), 100vw);
   max-width: 100vw;
-  margin: 0;
+  margin: 0 auto;
   padding: var(--space-16);
+  padding-bottom: var(--toast-offset-bottom);
   list-style: none;
   outline: none;
 }

package/styles/rds/components.css

@@ -127,7 +127,8 @@
   --bottom-bar-leading-min-width: var(--button-size-md-height);
   --bottom-bar-floating-radius: var(--radius-container);
   --bottom-bar-floating-margin: var(--space-24);
-  --bottom-bar-floating-max-width: 768px;
+  --bottom-bar-floating-padding-y: var(--space-8);
+  --bottom-bar-floating-padding-x: var(--space-12);
 
   /* blocks */
   --topnav-background: var(--surface-card);