@rojaostudio/ds 2.0.0-next.19 → 2.0.0-next.20

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

@@ -12,6 +12,8 @@ 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. */
@@ -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, 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 };

package/dist/components/internal/icons.js

@@ -21,6 +21,9 @@ 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" }),
@@ -287,6 +290,7 @@ export {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronUpIcon,
   CircleCheckIcon,
   ClockIcon,
   CloseIcon,

package/dist/components/internal/modal.js

@@ -4,6 +4,7 @@ import {
   __spreadValues
 } from "../../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Button } from "../button.js";
 import { IconButton } from "../icon-button.js";
@@ -32,6 +33,7 @@ function ModalShell({
   container,
   className
 }) {
+  const opener = useRef(null);
   const cancel = /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "outline", children: cancelLabel }) }, "cancel");
   const confirm = /* @__PURE__ */ jsx(Button, { onClick: onConfirm, children: confirmLabel }, "confirm");
   const actions = footer != null ? footer : confirmLabel ? stackedFooter ? [confirm, cancel] : [cancel, confirm] : null;
@@ -51,6 +53,7 @@ function ModalShell({
           className: ["rds-modal", prefix, ...modifiers, className].filter(Boolean).join(" "),
           style: boxStyle,
           onOpenAutoFocus: (event) => {
+            opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
             const box = event.currentTarget;
             const first = box.querySelector(
               '.rds-modal__body :is(input, textarea, select, button, a[href], [tabindex]:not([tabindex="-1"])):not(:disabled)'
@@ -59,6 +62,12 @@ function ModalShell({
               event.preventDefault();
               first.focus();
             }
+          },
+          onCloseAutoFocus: (event) => {
+            var _a;
+            if (trigger || !((_a = opener.current) == null ? void 0 : _a.isConnected)) return;
+            event.preventDefault();
+            opener.current.focus();
           }
         }, description ? {} : { "aria-describedby": void 0 }), {
           children: [

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

@@ -21,13 +21,25 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
     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`).
+     */
+    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;
 }
 /**
  * SavingBar — Figma [RDS] Actions/SavingBar. Shows at the foot of the screen while a change is not
- * saved, and leaves once saved. Painted with colors/primary on purpose: 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 use the inverse tone, drawn for the colors/primary band in both modes. Styles: saving-bar.css.
+ * saved, and leaves once saved. It is the brand plate on purpose (.ds-plate on the bar, in every brand and in
+ * light or dark alike): 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, read
+ * inside the plate. Styles: saving-bar.css.
  */
-declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, className, ...rest }: SavingBarProps): react.JSX.Element;
+declare function SavingBar({ status, message, savingMessage, 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

@@ -7,7 +7,7 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
 import { Loader } from "./internal/button.js";
-import { AlertIcon } from "./internal/icons.js";
+import { AlertIcon, ChevronUpIcon } from "./internal/icons.js";
 function SavingBar(_a) {
   var _b = _a, {
     status = "unsaved",
@@ -19,6 +19,10 @@ function SavingBar(_a) {
     saveLabel = "Salvar",
     retryLabel = "Tentar de novo",
     discardLabel = "Descartar",
+    onDetails,
+    detailsLabel = "Ver o que falta",
+    detailsExpanded,
+    detailsControls,
     className
   } = _b, rest = __objRest(_b, [
     "status",
@@ -30,26 +34,50 @@ function SavingBar(_a) {
     "saveLabel",
     "retryLabel",
     "discardLabel",
+    "onDetails",
+    "detailsLabel",
+    "detailsExpanded",
+    "detailsControls",
     "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",
     __spreadProps(__spreadValues({
       role: "region",
       "aria-label": "Salvar altera\xE7\xF5es"
     }, rest), {
-      className: ["rds-savingbar", className].filter(Boolean).join(" "),
+      className: ["rds-savingbar", "ds-plate", className].filter(Boolean).join(" "),
       children: /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__row", children: [
-        /* @__PURE__ */ jsxs("p", { className: "rds-savingbar__message", role: "status", 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: saving ? savingMessage : error ? errorMessage : message })
+          /* @__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__ */ jsxs("div", { className: "rds-savingbar__actions", children: [
-          onDiscard && /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
-          /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "fill", disabled: saving, onClick: onSave, children: error ? retryLabel : saveLabel })
+          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 })
         ] })
       ] })
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.19",
+  "version": "2.0.0-next.20",
   "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

@@ -3828,6 +3828,8 @@ input:focus-visible + .rds-checkbox__box {
  * Drawer (Overlays collection, drawer/*): stuck to the bottom, the top corners in radius/container; 12 above (the
  * handle, 40 × 4), 24 on the sides, 32 below, 20 between parts; no border and no ×. On a wide screen it stops at
  * 560 and centres (the Figma draws it on a 390 phone only).
+ * Height by the content, up to 85% of the screen (717 on an 844): past it, only the content scrolls inside; the
+ * handle, the title and the footer stay put.
  */
 .rds-drawer__scrim {
   background: var(--drawer-scrim);
@@ -3839,7 +3841,7 @@ input:focus-visible + .rds-checkbox__box {
   left: 0;
   gap: calc(var(--space-16) + var(--space-4));
   max-width: 560px;
-  max-height: calc(100dvh - var(--space-48));
+  max-height: 85dvh;
   margin-inline: auto;
   padding: var(--space-12) var(--space-24) var(--space-32);
   border-radius: var(--radius-container) var(--radius-container) 0 0;
@@ -3863,6 +3865,18 @@ input:focus-visible + .rds-checkbox__box {
   background: var(--drawer-handle);
 }
 
+.rds-drawer .rds-modal__header,
+.rds-drawer .rds-modal__footer {
+  flex: none;
+}
+
+.rds-drawer .rds-modal__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
 .rds-drawer .rds-modal__heading {
   padding-top: 0;
 }
@@ -8429,11 +8443,17 @@ input:focus-visible + .rds-radio__circle {
 /* @tokens savingbar */
 /*
  * 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 Buttons use the inverse
- * tone, drawn for this band in both modes, so the bar needs no theme switch of its own.
+ * message (label, medium, at most 2 lines with an ellipsis) and the actions (8 apart). The bar is the brand plate
+ * (.ds-plate on the element, set by the component): savingbar/background is surface/page and savingbar/text is text/body,
+ * read in the brand mode, so it comes out the same over a light or a dark page. The Buttons are tone action (Salvar)
+ * and tone neutral ghost (Descartar), read on the plate too.
  * 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.
+ * 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.
  */
 .rds-savingbar {
   box-sizing: border-box;
@@ -8507,6 +8527,45 @@ 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__row {
     flex-direction: column;
@@ -8522,6 +8581,14 @@ input:focus-visible + .rds-radio__circle {
     flex: 1 1 0;
     min-width: 0;
   }
+
+  .rds-savingbar__message--details > .rds-savingbar__text {
+    display: none;
+  }
+
+  .rds-savingbar__details {
+    display: flex;
+  }
 }
 
 @media (forced-colors: active) {

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);
+  --savingbar-background: var(--surface-page);
   --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);
+  --savingbar-text: var(--text-body);
   --fab-cta-background-default: var(--colors-primary-default);
   --fab-cta-background-hover: var(--colors-primary-active);
   --fab-cta-text: var(--text-on-primary);
@@ -120,6 +120,7 @@
   --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(--focus-ring);
 
   /* blocks */
   --topnav-background: var(--surface-card);