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

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

@@ -1,60 +1,50 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { BottomBarPlacement } from './internal/bottom-bar.js';
 
-type FormActionsLayout = 'inline' | 'stacked' | 'bar';
+type FormActionsPlacement = BottomBarPlacement;
 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. In `bar`, compact (below 1024), only the last one (the primary) is shown.
+     * 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.
      */
     children: ReactNode;
     /**
-     * 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.
+     * 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`).
      */
-    helper?: ReactNode;
+    placement?: FormActionsPlacement;
     /**
-     * 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`).
+     * 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.
      */
-    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;
+    leading?: ReactNode;
 }
 /**
- * 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. Styles: form-actions.css.
+ * FormActions — Figma [RDS] Actions/FormActions. The actions at the end of a create form or of a long task (Cancelar
+ * and the primary), at the foot of the screen from the first second. Only actions: what is missing is the project's
+ * (if it needs a control, it goes in `leading`). Built on the private BottomBar (.rds-bottom-bar), the SavingBar's
+ * 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.
  *
- * `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.
+ * `<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.
  *
  * 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.
+ * - 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` (and the content `padding-bottom`) equal to the bar's height
+ *   (plus the margin when floating) plus `env(safe-area-inset-bottom)`, so a focused field is never hidden behind it
+ *   (WCAG 2.4.11).
+ * - 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.
+ * - Buttons at the end of a card or a dialog are loose Buttons or a ButtonGroup, not this.
  */
-declare function FormActions({ children, helper, layout, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: FormActionsProps): react.JSX.Element;
+declare function FormActions({ children, placement, leading, className, ...rest }: FormActionsProps): react.JSX.Element;
 
-export { FormActions, type FormActionsLayout, type FormActionsProps };
+export { FormActions, type FormActionsPlacement, type FormActionsProps };

package/dist/components/form-actions.js

@@ -1,71 +1,14 @@
+"use client";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children } from "react";
-import { ChevronUpIcon } from "./internal/icons.js";
+import { jsx } from "react/jsx-runtime";
+import { BottomBar } from "./internal/bottom-bar.js";
 function FormActions(_a) {
-  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", 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 })
-      ]
-    })
-  );
+  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 }) }));
 }
 export {
   FormActions

package/dist/components/index.d.ts

@@ -69,7 +69,7 @@ export { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps
 export { PageHeader, PageHeaderHeading, PageHeaderProps } from './page-header.js';
 export { Sidebar, SidebarHeader, SidebarItem, SidebarItemProps, SidebarProps, SidebarSection, SidebarSectionProps, SidebarSeparator } from './sidebar.js';
 export { NavigationMenu, NavigationMenuEntry, NavigationMenuLink, NavigationMenuLinkComponent, NavigationMenuProps } from './navigation-menu.js';
-export { SavingBar, SavingBarProps, SavingBarStatus } from './saving-bar.js';
+export { SavingBar, SavingBarPlacement, SavingBarProps, SavingBarStatus } from './saving-bar.js';
 export { SavingBarProvider, SavingBarRegistration, SavingBarRoot, usePageSavingBar } from './saving-bar-context.js';
 export { FAB, FABConfig, FABProps, FABProvider, FABRoot, useFAB, usePageFAB } from './fab.js';
 export { Table, TableAlign, TableBody, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeader, TableProps, TableRow, TableSort, TableStatus, TableStatusProps } from './table.js';
@@ -84,7 +84,7 @@ export { Avatar, AvatarContent, AvatarGroup, AvatarGroupProps, AvatarGroupSize,
 export { IconButton, IconButtonProps } from './icon-button.js';
 export { ButtonGroup, ButtonGroupOrientation, ButtonGroupProps } from './button-group.js';
 export { ActionBar, ActionBarProps } from './action-bar.js';
-export { FormActions, FormActionsLayout, FormActionsProps } from './form-actions.js';
+export { FormActions, FormActionsPlacement, FormActionsProps } from './form-actions.js';
 export { Breadcrumb, BreadcrumbItem, BreadcrumbLinkComponent, BreadcrumbProps, BreadcrumbTone } from './breadcrumb.js';
 export { Pagination, PaginationLinkComponent, PaginationProps, pageItems } from './pagination.js';
 export { Popover, PopoverAlign, PopoverClose, PopoverProps, PopoverSide } from './popover.js';
@@ -136,6 +136,7 @@ import '@radix-ui/react-dialog';
 import './internal/modal.js';
 import './internal/menu.js';
 import './internal/fieldset.js';
+import './internal/bottom-bar.js';
 import '@radix-ui/react-toggle';
 import '@radix-ui/react-tooltip';
 import '@radix-ui/react-popover';

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

@@ -0,0 +1,30 @@
+import * as react from 'react';
+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`).
+     */
+    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.
+     */
+    leading?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * 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.
+ */
+declare function BottomBar({ placement, leading, className, children, ...rest }: BottomBarProps): react.JSX.Element;
+
+export { BottomBar, type BottomBarPlacement, type BottomBarProps };

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

@@ -0,0 +1,25 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useOnScreenKeyboard } from "./use-on-screen-keyboard.js";
+function BottomBar(_a) {
+  var _b = _a, { placement = "docked", leading, className, children } = _b, rest = __objRest(_b, ["placement", "leading", "className", "children"]);
+  const keyboard = useOnScreenKeyboard();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      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 }),
+        children
+      ]
+    })
+  );
+}
+export {
+  BottomBar
+};

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

@@ -12,8 +12,6 @@ declare function CheckIcon(): react.JSX.Element;
 declare function MinusIcon(): react.JSX.Element;
 /** A chevron pointing down: opens a list. */
 declare function ChevronDownIcon(): react.JSX.Element;
-/** A chevron pointing up: opens a panel that comes up from below (the SavingBar's details). */
-declare function ChevronUpIcon(): react.JSX.Element;
 /** An open eye: shows what is hidden (a password). */
 declare function EyeIcon(): react.JSX.Element;
 /** A crossed eye: hides again what was shown. */
@@ -115,4 +113,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, ChevronUpIcon, 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, UploadIcon, UserIcon };

package/dist/components/internal/icons.js

@@ -21,9 +21,6 @@ function MinusIcon() {
 function ChevronDownIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
 }
-function ChevronUpIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
-}
 function EyeIcon() {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
@@ -290,7 +287,6 @@ export {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  ChevronUpIcon,
   CircleCheckIcon,
   ClockIcon,
   CloseIcon,

package/dist/components/internal/use-on-screen-keyboard.d.ts

@@ -0,0 +1,12 @@
+/** Whether focusing this element brings up the on-screen keyboard: a text field, a text area or contenteditable. */
+declare function isEditable(el: Element | null): boolean;
+/**
+ * Whether the phone's on-screen keyboard is open: compact screen (below 1024), an editable field focused, and the
+ * visible area (visualViewport, scaled back from a pinch zoom) well short of the layout viewport. For the bars at the
+ * foot of the screen (FormActions, SavingBar), which leave while it is open so they do not cover the field being
+ * typed in. Without visualViewport (old browsers) or on the server it is always false: the bar stays.
+ * `enabled` false skips the listeners (a layout that does not sit at the foot).
+ */
+declare function useOnScreenKeyboard(enabled?: boolean): boolean;
+
+export { isEditable, useOnScreenKeyboard };

package/dist/components/internal/use-on-screen-keyboard.js

@@ -0,0 +1,49 @@
+"use client";
+import "../../chunk-ORMEWXMH.js";
+import { useEffect, useState } from "react";
+const COMPACT = "(max-width: 1023px)";
+const KEYBOARD_RATIO = 0.75;
+const NO_KEYBOARD = /* @__PURE__ */ new Set(["button", "checkbox", "color", "file", "hidden", "image", "radio", "range", "reset", "submit"]);
+function isEditable(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  if (el.isContentEditable) return true;
+  if (el instanceof HTMLTextAreaElement) return !el.readOnly && !el.disabled;
+  if (el instanceof HTMLInputElement) return !NO_KEYBOARD.has(el.type) && !el.readOnly && !el.disabled;
+  return false;
+}
+function useOnScreenKeyboard(enabled = true) {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!enabled || !viewport || typeof window.matchMedia !== "function") {
+      setOpen(false);
+      return;
+    }
+    const compact = window.matchMedia(COMPACT);
+    let frame = 0;
+    const measure = () => compact.matches && isEditable(document.activeElement) && viewport.height * viewport.scale < window.innerHeight * KEYBOARD_RATIO;
+    const check = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => setOpen(measure()));
+    };
+    check();
+    viewport.addEventListener("resize", check);
+    window.addEventListener("resize", check);
+    document.addEventListener("focusin", check);
+    document.addEventListener("focusout", check);
+    compact.addEventListener("change", check);
+    return () => {
+      cancelAnimationFrame(frame);
+      viewport.removeEventListener("resize", check);
+      window.removeEventListener("resize", check);
+      document.removeEventListener("focusin", check);
+      document.removeEventListener("focusout", check);
+      compact.removeEventListener("change", check);
+    };
+  }, [enabled]);
+  return enabled && open;
+}
+export {
+  isEditable,
+  useOnScreenKeyboard
+};

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

@@ -1,7 +1,9 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { BottomBarPlacement } from './internal/bottom-bar.js';
 
 type SavingBarStatus = 'unsaved' | 'saving' | 'error';
+type SavingBarPlacement = BottomBarPlacement;
 interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * unsaved: the message and the actions; saving: `savingMessage`, Salvar in loading (`savingLabel`, the only
@@ -9,7 +11,7 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
      * becomes `retryLabel` (Figma: `status`).
      */
     status?: SavingBarStatus;
-    /** The unsaved text (Figma: `message`). */
+    /** The unsaved text, at most 2 lines with an ellipsis (Figma: `message`). */
     message?: ReactNode;
     /** The text while saving. */
     savingMessage?: ReactNode;
@@ -21,35 +23,37 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
     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 app, in the footer of
-     * the details Drawer or in the confirmation when leaving with changes (AlertDialog).
+     * 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).
      */
     onDiscard?: () => void;
     saveLabel?: string;
     retryLabel?: string;
     discardLabel?: string;
     /**
-     * Turns the unsaved message into a button that opens what is missing (a Drawer with the checklist), in the
-     * compact arrangement only; expanded, the message stays text (Figma: `showDetails`).
+     * 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`).
      */
-    onDetails?: () => void;
-    /** Said after the message 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;
+    placement?: SavingBarPlacement;
+    /**
+     * One ~44 control on the left of the message, never running text (Figma: slot `leading`, `showLeading`). Present,
+     * even `null` while its control is hidden, it reserves 44 so the message and the buttons do not jump. Whoever fills
+     * it says its own changes (its own aria-live); the bar does not repeat them.
+     */
+    leading?: ReactNode;
 }
 /**
- * SavingBar — Figma [RDS] Actions/SavingBar. Shows at the foot of the screen while a change is not
- * 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/*). 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.
+ * SavingBar — Figma [RDS] Actions/SavingBar. Shows at the foot of the screen while a change is not saved, and leaves
+ * once saved (a Toast confirms). Built on the private BottomBar (.rds-bottom-bar), the FormActions' shell: the brand's
+ * 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
+ * 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,
+ * internal/bottom-bar.css.
  */
-declare function SavingBar({ status, message, savingMessage, savingLabel, 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, placement, leading, className, ...rest }: SavingBarProps): react.JSX.Element;
 
-export { SavingBar, type SavingBarProps, type SavingBarStatus };
+export { SavingBar, type SavingBarPlacement, type SavingBarProps, type SavingBarStatus };

package/dist/components/saving-bar.js

@@ -6,7 +6,8 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
-import { AlertIcon, ChevronUpIcon } from "./internal/icons.js";
+import { BottomBar } from "./internal/bottom-bar.js";
+import { AlertIcon } from "./internal/icons.js";
 function SavingBar(_a) {
   var _b = _a, {
     status = "unsaved",
@@ -19,10 +20,8 @@ function SavingBar(_a) {
     saveLabel = "Salvar",
     retryLabel = "Tentar de novo",
     discardLabel = "Descartar",
-    onDetails,
-    detailsLabel = "Ver o que falta",
-    detailsExpanded,
-    detailsControls,
+    placement = "docked",
+    leading,
     className
   } = _b, rest = __objRest(_b, [
     "status",
@@ -35,51 +34,32 @@ function SavingBar(_a) {
     "saveLabel",
     "retryLabel",
     "discardLabel",
-    "onDetails",
-    "detailsLabel",
-    "detailsExpanded",
-    "detailsControls",
+    "placement",
+    "leading",
     "className"
   ]);
   const saving = status === "saving";
   const error = status === "error";
   const text = saving ? savingMessage : error ? errorMessage : message;
-  const details = status === "unsaved" && onDetails !== void 0;
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsxs(
+    BottomBar,
     __spreadProps(__spreadValues({
       role: "region",
       "aria-label": "Salvar altera\xE7\xF5es"
     }, rest), {
+      placement,
+      leading,
       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: [
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "rds-savingbar__message", role: "status", children: [
           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(
-            "button",
-            {
-              type: "button",
-              className: "rds-savingbar__details",
-              "aria-expanded": detailsExpanded != null ? detailsExpanded : false,
-              "aria-controls": detailsControls,
-              onClick: onDetails,
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "rds-savingbar__text", children: text }),
-                /* @__PURE__ */ jsxs("span", { className: "rds-visually-hidden", children: [
-                  ", ",
-                  detailsLabel
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsx("span", { className: "rds-savingbar__text", children: text })
         ] }),
         /* @__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 }),
           /* @__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.27",
+  "version": "2.0.0-next.30",
   "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

@@ -4650,195 +4650,24 @@ input:focus-visible + .rds-checkbox__box {
 }
 
 /* components/form-actions.css */
-/* @tokens form-actions */
+/* @tokens bottom-bar */
 /*
- * 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.
+ * 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.
  */
-.rds-form-actions {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  background: var(--form-actions-background);
-  color: var(--form-actions-text);
-  font-family: var(--type-font-stack);
-}
-
-.rds-form-actions__helper {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  font-size: var(--type-label-size);
-  line-height: var(--type-label-line);
-}
-
 .rds-form-actions__actions {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-8);
-}
-
-/* inline: floats and hugs its content; the page decides where. */
-.rds-form-actions--inline {
-  display: inline-flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--space-24);
-  max-width: 100%;
-  padding: var(--space-16) var(--space-24);
-  border: var(--border-width) solid var(--form-actions-border);
-  border-radius: var(--radius-container);
-  box-shadow: var(--elevation-raised);
-}
-
-/* stacked: edge to edge at the foot, the buttons full width. */
-.rds-form-actions--stacked {
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--space-8);
-  width: 100%;
-  padding: var(--space-16);
-  border-top: var(--border-width) solid var(--form-actions-border);
-}
-
-.rds-form-actions--stacked .rds-form-actions__actions {
-  flex-direction: column;
-}
-
-.rds-form-actions--stacked .rds-form-actions__actions > * {
-  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);
+  gap: var(--space-8);
+  margin-inline-start: auto;
 }
 
-/* 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) {
+  /* Only the primary (the last action): Cancelar is the topbar's X. */
+  .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 */
@@ -5561,6 +5390,124 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
+/* components/internal/bottom-bar.css */
+/* @tokens bottom-bar */
+/*
+ * The shell at the foot of the screen (Actions collection, bottom-bar/*), private, under the FormActions and the
+ * SavingBar. The brand's primary colour: bottom-bar/background (colors/primary/default) with bottom-bar/text
+ * (text/on/primary), in light, dark and every brand. Full width (at least 320), sticky at the bottom of the scrolling
+ * 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 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
+ * bottom-bar/focus/ring (the default focus/ring would vanish on the band).
+ */
+.rds-bottom-bar {
+  position: sticky;
+  bottom: 0;
+  z-index: var(--z-sticky);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bottom-bar-gap);
+  width: 100%;
+  min-width: min(320px, 100%);
+  padding: calc(var(--bottom-bar-padding-y) + 2px) var(--bottom-bar-padding-x);
+  background: var(--bottom-bar-background);
+  color: var(--bottom-bar-text);
+  font-family: var(--type-font-stack);
+
+  /* The Button tokens the action fill and the neutral ghost read, in the bar's colours. */
+  --button-focus-ring: var(--bottom-bar-focus-ring);
+  --button-action-fill-background-default: var(--bottom-bar-button-fill-background);
+  --button-action-fill-background-hover: color-mix(in srgb, var(--bottom-bar-button-fill-background) 85%, var(--bottom-bar-background));
+  --button-action-fill-background-active: color-mix(in srgb, var(--bottom-bar-button-fill-background) 70%, var(--bottom-bar-background));
+  --button-action-fill-label: var(--bottom-bar-button-fill-label);
+  --button-action-fill-icon: var(--bottom-bar-button-fill-label);
+  --button-neutral-ghost-label: var(--bottom-bar-button-ghost-label);
+  --button-neutral-ghost-icon: var(--bottom-bar-button-ghost-label);
+  --button-neutral-ghost-background-hover: color-mix(in srgb, var(--bottom-bar-button-ghost-label) 15%, transparent);
+  --button-neutral-ghost-background-active: color-mix(in srgb, var(--bottom-bar-button-ghost-label) 25%, transparent);
+  --button-disabled-fill-background: color-mix(in srgb, var(--bottom-bar-button-fill-background) 40%, var(--bottom-bar-background));
+  --button-disabled-fill-label: color-mix(in srgb, var(--bottom-bar-button-fill-label) 40%, var(--bottom-bar-background));
+  --button-disabled-fill-icon: var(--button-disabled-fill-label);
+  --button-disabled-ghost-label: color-mix(in srgb, var(--bottom-bar-button-ghost-label) 40%, var(--bottom-bar-background));
+  --button-disabled-ghost-icon: var(--button-disabled-ghost-label);
+}
+
+/* The leading slot: one ~44 control; its width stays reserved while the control comes and goes. */
+.rds-bottom-bar__leading {
+  display: flex;
+  flex: none;
+  align-items: center;
+  min-width: var(--bottom-bar-leading-min-width);
+}
+
+/* Compact: by the screen width (the Figma viewport mode), not a container query. */
+@media (max-width: 1023px) {
+  .rds-bottom-bar {
+    padding-block: var(--bottom-bar-padding-y);
+    padding-bottom: calc(var(--bottom-bar-padding-y) + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* floating: only from lg 1024; below it the bar is docked, square, edge to edge. */
+@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;
+    margin-bottom: var(--bottom-bar-floating-margin);
+    border-radius: var(--bottom-bar-floating-radius);
+    box-shadow: var(--elevation-overlay);
+  }
+}
+
+@media (forced-colors: active) {
+  .rds-bottom-bar {
+    border-top: var(--border-width) solid CanvasText;
+  }
+}
+
+@media (forced-colors: active) and (min-width: 1024px) {
+  .rds-bottom-bar--floating {
+    border: var(--border-width) solid CanvasText;
+  }
+}
+
+/*
+ * The on-screen keyboard (compact only, the class comes from useOnScreenKeyboard): the bar slides down out of the way
+ * while a field is being typed in, and comes back when the keyboard closes. visibility takes it out of the tab order
+ * and the accessibility tree meanwhile; it waits for the slide to end before hiding.
+ */
+@media (max-width: 1023px) {
+  .rds-bottom-bar--keyboard {
+    visibility: hidden;
+    transform: translateY(100%);
+  }
+}
+
+@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
+  .rds-bottom-bar {
+    transition:
+      transform var(--motion-duration-base) var(--motion-easing-enter),
+      visibility 0s;
+  }
+
+  .rds-bottom-bar--keyboard {
+    transition:
+      transform var(--motion-duration-base) var(--motion-easing-exit),
+      visibility 0s var(--motion-duration-base);
+  }
+}
+
 /* components/internal/choice.css */
 /* @tokens internal */
 /*
@@ -8662,61 +8609,15 @@ input:focus-visible + .rds-radio__circle {
 }
 
 /* components/saving-bar.css */
-/* @tokens savingbar */
+/* @tokens bottom-bar */
 /*
- * SavingBar (Actions collection, savingbar/*): full width (at least 320), 12 24 padding, 16 between the
- * message (label, medium, at most 2 lines with an ellipsis) and the actions (8 apart). The bar is the brand's
- * primary colour: savingbar/background is colors/primary/default and savingbar/text is text/on/primary (the text,
- * the error alert, the chevron and the loader), so it follows the theme, light or dark, and every brand.
- * The Buttons stay the Button: Salvar tone action fill and Descartar tone neutral ghost, with the bar's colours.
- * 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 (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,
- * 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
- * focus-ring frame. The touch area is 44 tall without changing the drawing. Expanded, the message stays text.
+ * 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).
  */
-.rds-savingbar {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: min(320px, 100%);
-  padding: var(--space-12) var(--space-24);
-  background: var(--savingbar-background);
-  color: var(--savingbar-text);
-  font-family: var(--type-font-stack);
-
-  /* The Button tokens Salvar (action fill) and Descartar (neutral ghost) read, in the bar's colours. */
-  --button-focus-ring: var(--savingbar-focus-ring);
-  --button-action-fill-background-default: var(--savingbar-button-fill-background);
-  --button-action-fill-background-hover: color-mix(in srgb, var(--savingbar-button-fill-background) 85%, var(--savingbar-background));
-  --button-action-fill-background-active: color-mix(in srgb, var(--savingbar-button-fill-background) 70%, var(--savingbar-background));
-  --button-action-fill-label: var(--savingbar-button-fill-label);
-  --button-action-fill-icon: var(--savingbar-button-fill-label);
-  --button-neutral-ghost-label: var(--savingbar-button-ghost-label);
-  --button-neutral-ghost-icon: var(--savingbar-button-ghost-label);
-  --button-neutral-ghost-background-hover: color-mix(in srgb, var(--savingbar-button-ghost-label) 15%, transparent);
-  --button-neutral-ghost-background-active: color-mix(in srgb, var(--savingbar-button-ghost-label) 25%, transparent);
-  --button-disabled-fill-background: color-mix(in srgb, var(--savingbar-button-fill-background) 40%, var(--savingbar-background));
-  --button-disabled-fill-label: color-mix(in srgb, var(--savingbar-button-fill-label) 40%, var(--savingbar-background));
-  --button-disabled-fill-icon: var(--button-disabled-fill-label);
-  --button-disabled-ghost-label: color-mix(in srgb, var(--savingbar-button-ghost-label) 40%, var(--savingbar-background));
-  --button-disabled-ghost-icon: var(--button-disabled-ghost-label);
-}
-
-.rds-savingbar__row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-16);
-}
-
 .rds-savingbar__message {
   display: flex;
   flex: 1 1 160px;
@@ -8757,51 +8658,7 @@ input:focus-visible + .rds-radio__circle {
   gap: var(--space-8);
 }
 
-.rds-savingbar__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 message, invisible. */
-.rds-savingbar__details::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 0;
-  left: 0;
-  min-height: 44px;
-  height: 100%;
-  transform: translateY(-50%);
-}
-
-.rds-savingbar__details:hover .rds-savingbar__text {
-  text-decoration: underline;
-}
-
-.rds-savingbar__details:focus-visible {
-  outline: var(--focus-ring-width) solid var(--savingbar-focus-ring);
-  outline-offset: var(--focus-ring-width);
-}
-
 @media (max-width: 1023px) {
-  .rds-savingbar {
-    padding-block: 10px;
-    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
-  }
-
   .rds-savingbar__message {
     flex: 1 1 0;
     min-width: 0;
@@ -8810,20 +8667,6 @@ input:focus-visible + .rds-radio__circle {
   .rds-savingbar .rds-savingbar__discard {
     display: none;
   }
-
-  .rds-savingbar__message--details > .rds-savingbar__text {
-    display: none;
-  }
-
-  .rds-savingbar__details {
-    display: flex;
-  }
-}
-
-@media (forced-colors: active) {
-  .rds-savingbar {
-    border-top: var(--border-width) solid CanvasText;
-  }
 }
 
 /* components/section-card.css */
@@ -10289,8 +10132,18 @@ input:focus-visible + .rds-switch__track {
  * A line under every row but the last: the Table's border closes it. Corners in radius/container; the sort button in
  * radius/xs. The status rows hold an Empty, 32 24 around it.
  */
+/*
+ * The scroll region is a one-column grid, minmax(0, 1fr), so it does not hand the table's min-content up to the page:
+ * as a plain block it did, and any ancestor sized by its content (a flex item without min-width: 0, a grid item in an
+ * auto track, a start-aligned stack, an inline-block) grew to the table's width, so a Card holding a wide table went
+ * past the screen and was cut instead of the table scrolling. Under a min-content constraint the fr track is 0; under
+ * max-content it is the table's max-content (a hugging parent still hugs the table); with a definite width it fills,
+ * and the table, never narrower than its min-content, scrolls inside.
+ */
 .rds-table {
   box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
   max-width: 100%;
   overflow-x: auto;
   border: var(--border-width) solid var(--table-border);

package/styles/rds/components.css

@@ -73,7 +73,7 @@
   --button-inverse-focus-ring: var(--text-on-primary-strong);
   --button-inverse-disabled-fill-background: var(--colors-primary-light);
   --button-inverse-disabled-label: var(--text-disabled-invert);
-  --savingbar-background: var(--colors-primary-default);
+  --bottom-bar-background: var(--colors-primary-default);
   --toggle-label: var(--text-body);
   --toggle-border: var(--border-strong);
   --toggle-background-hover: var(--surface-muted);
@@ -83,7 +83,7 @@
   --toggle-label-disabled: var(--text-disabled);
   --toggle-border-pressed: var(--colors-primary-default);
   --toggle-border-disabled: var(--border-default);
-  --savingbar-text: var(--text-on-primary);
+  --bottom-bar-text: var(--text-on-primary);
   --fab-cta-background-default: var(--colors-primary-default);
   --fab-cta-background-hover: var(--colors-primary-active);
   --fab-cta-text: var(--text-on-primary);
@@ -93,9 +93,6 @@
   --chip-label: var(--text-body);
   --chip-icon: var(--text-muted);
   --chip-label-disabled: var(--text-disabled);
-  --form-actions-background: var(--surface-card);
-  --form-actions-border: var(--border-default);
-  --form-actions-text: var(--text-subtle);
   --button-size-sm-height: 36px;
   --button-size-sm-padding-x: var(--space-16);
   --button-size-sm-padding-y: var(--space-8);
@@ -120,12 +117,17 @@
   --button-size-lg-icon-only: var(--size-24);
   --button-size-lg-text-size: var(--type-body-size);
   --button-size-lg-text-line: var(--type-body-line);
-  --savingbar-focus-ring: var(--text-on-primary);
-  --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);
+  --bottom-bar-focus-ring: var(--text-on-primary);
+  --bottom-bar-button-fill-background: var(--text-on-primary);
+  --bottom-bar-button-fill-label: var(--colors-primary-default);
+  --bottom-bar-button-ghost-label: var(--text-on-primary);
+  --bottom-bar-padding-x: var(--space-24);
+  --bottom-bar-padding-y: 10px;
+  --bottom-bar-gap: var(--space-16);
+  --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;
 
   /* blocks */
   --topnav-background: var(--surface-card);