@rojaostudio/ds 2.0.0-next.14 → 2.0.0-next.16

package/dist/components/card.d.ts

@@ -1,13 +1,17 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type CardSurface = 'default' | 'tint';
+type CardSurface = 'default' | 'outline' | 'tint';
 type CardSize = 'default' | 'sm';
 type Heading = 'h2' | 'h3' | 'h4';
 interface CardProps extends HTMLAttributes<HTMLElement> {
-    /** tint is the brand's light background, with no border, for a card that stands out. */
+    /**
+     * default: white, with a border and elevation/raised; the default, for a topic on its own on the page.
+     * outline: only the border, no fill nor shadow, it takes the surface underneath; for cards side by side in a grid,
+     * inside a panel or a list. tint: the brand's light plate, no border nor shadow; a rare highlight, one per screen.
+     */
     surface?: CardSurface;
-    /** sm aligns everything on 12 and makes the header text smaller, for dense lists and indicators. */
+    /** sm pads 16 (default 24) and makes the header text smaller, for dense lists and indicators. */
     size?: CardSize;
     /** article (default) for a topic that reads on its own; section or div when it is part of something larger. */
     as?: 'article' | 'section' | 'div';
@@ -31,7 +35,7 @@ interface CardHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     description?: ReactNode;
     /** A Tile before the text (Figma: `showIcon`): variant soft, size default (sm on a small card). */
     icon?: ReactNode;
-    /** One action on the right (Figma: `showAction` + `action`): a ghost Button or an IconButton. */
+    /** Opt-in: one action on the right (Figma: `showAction` + `action`), a ghost Button or an IconButton. None by default. */
     action?: ReactNode;
     /** start: side by side; center: stacked and centred. */
     align?: 'start' | 'center';
@@ -42,14 +46,17 @@ type CardContentProps = HTMLAttributes<HTMLDivElement>;
 /** The card's content (Figma: the `cardContent` slot). */
 declare function CardContent({ className, ...rest }: CardContentProps): react.JSX.Element;
 interface CardFooterProps extends HTMLAttributes<HTMLElement> {
-    /** One or two Buttons (Figma: `actions` one · two). A third action goes into the content, as a link. */
+    /**
+     * One or two Buttons (Figma: `actions` one · two), side by side: the main one (action fill) last, the secondary one
+     * a neutral ghost Button before it. A third action goes into the content, as a link.
+     */
     children: ReactNode;
-    /** start, end, or full (buttons stacked across the whole width). */
+    /** start, end (default), or full (the two side by side, half each, for a narrow card on a phone). */
     align?: 'start' | 'end' | 'full';
     /** A line under the buttons (Figma: `showTertiaryContent` + `tertiaryContent`), such as a sign-up link. */
     note?: ReactNode;
 }
-/** The card's footer, with its actions (Figma: .card/footer). */
+/** The card's footer, with its actions (Figma: .card/footer). No band and no rule: spacing sets it apart. */
 declare function CardFooter({ align, note, className, children, ...rest }: CardFooterProps): react.JSX.Element;
 
 export { Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardSize, type CardSurface };

package/dist/components/data-table-header.d.ts

@@ -20,19 +20,21 @@ type DataTableFilterDef = {
     options: DataTableFilterOption[];
     onChange: (v: string) => void;
 };
-type DataTablePillDef = {
-    key: string;
-    label: string;
-    active: boolean;
-    count?: number;
-    onClick: () => void;
-};
 type DataTableHeaderProps = {
     search?: DataTableHeaderSearch;
     filters?: DataTableFilterDef[];
-    /** Quick filters, always in view: FilterChips. */
-    pillFilters?: DataTablePillDef[];
+    /**
+     * Quick filters, always in view (Figma: `showQuickFilters` + the `quickFilters` slot): up to three, a
+     * FilterChipGroup with its FilterChips; four or more, one Button with a menu (DropdownMenu), "Categoria: Todas".
+     */
+    quickFilters?: ReactNode;
+    /** Clears the `filters` (the quick filters are cleared where they are, in view). */
     onClear?: () => void;
+    /**
+     * A view control after the filters and before the actions (Figma: `showView` + the `view` slot), such as a
+     * Checkbox "Agrupar por produto". In view on a narrow screen too.
+     */
+    view?: ReactNode;
     actions?: ReactNode;
     className?: string;
     /** On a narrow screen, moves the filters and the actions into a Drawer. The quick filters stay in view. */
@@ -45,10 +47,13 @@ declare function FilterDropdown({ f, placement }: {
 }): react.JSX.Element;
 /**
  * DataTableHeader — a composition of the Input (search), FilterChips, Buttons, the DropdownMenu, the Popover and
- * the Drawer: the bar above a table. The search fills the row; quick filters are FilterChips; one filter is a
- * dropdown, two or more collapse into "Filtros" (the active ones stay in view as removable Chips). From 768 the
- * wide layout shows; below it, the filters open in a Drawer or a Popover. Styles: data-table-header.css.
+ * the Drawer: the bar above a table. The search is always on the left and takes the free width (at least 320); the
+ * filters are always on the right; what does not fit wraps. Quick filters go in the `quickFilters` slot; one filter
+ * is a dropdown, two or more collapse into "Filtros" (the active ones stay in view as removable Chips); the `view`
+ * control comes after the filters, before the actions. From 768 the wide layout shows; below it, the filters open
+ * in a Drawer or a Popover. "Filtros · N" counts the active `filters`, the ones that button opens.
+ * Styles: data-table-header.css.
  */
-declare function DataTableHeader({ search, filters, pillFilters, onClear, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;
+declare function DataTableHeader({ search, filters, quickFilters, onClear, view, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;
 
-export { type DataTableFilterDef, type DataTableFilterOption, DataTableHeader, type DataTableHeaderProps, type DataTableHeaderSearch, type DataTablePillDef, FilterDropdown };
+export { type DataTableFilterDef, type DataTableFilterOption, DataTableHeader, type DataTableHeaderProps, type DataTableHeaderSearch, FilterDropdown };

package/dist/components/data-table-header.js

@@ -100,19 +100,20 @@ function MobileSingleFilter({ f }) {
 function DataTableHeader({
   search,
   filters = [],
-  pillFilters = [],
+  quickFilters,
   onClear,
+  view,
   actions,
   className,
   mobileCollapse = false
 }) {
   var _a, _b;
   const [sheetOpen, setSheetOpen] = useState(false);
-  const activeFilterCount = filters.filter((f) => f.value !== "").length + pillFilters.filter((p) => p.active).length;
+  const activeFilterCount = filters.filter((f) => f.value !== "").length;
   const collapseDesktop = filters.length >= 2;
   const activeFilters = filters.filter((f) => f.value !== "");
   const singleFilter = filters.length === 1 ? filters[0] : null;
-  const lead = Boolean(search || pillFilters.length > 0);
+  const lead = Boolean(search || quickFilters);
   return /* @__PURE__ */ jsxs("div", { className: ["rds-data-table-header", className].filter(Boolean).join(" "), children: [
     search && /* @__PURE__ */ jsx(
       Input,
@@ -128,7 +129,7 @@ function DataTableHeader({
         onChange: (e) => search.onChange(e.target.value)
       }
     ),
-    pillFilters.length > 0 && /* @__PURE__ */ jsx(FilterChipGroup, { "aria-label": "Filtros r\xE1pidos", "data-pill-filter": "", children: pillFilters.map((p) => /* @__PURE__ */ jsx(FilterChip, { active: p.active, count: p.count, onClick: p.onClick, children: p.label }, p.key)) }),
+    quickFilters && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__quick", children: quickFilters }),
     filters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__wide", children: [
       lead && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
       collapseDesktop ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -176,6 +177,7 @@ function DataTableHeader({
         actions && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__drawer-actions", children: actions })
       ] }) })
     ] }),
+    view && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__view", children: view }),
     actions && /* @__PURE__ */ jsx("div", { className: mobileCollapse ? "rds-data-table-header__wide" : "rds-data-table-header__actions", children: actions })
   ] });
 }

package/dist/components/index.d.ts

@@ -8,7 +8,7 @@ export { DropdownMenu, DropdownMenuAlign, DropdownMenuItem, DropdownMenuItemProp
 export { ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuItemTone, ContextMenuProps, ContextMenuSeparator } from './context-menu.js';
 export { Command, CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, CommandProps } from './command.js';
 export { FilterChip, FilterChipGroup, FilterChipGroupProps, FilterChipProps } from './filter-chip.js';
-export { DataTableFilterDef, DataTableFilterOption, DataTableHeader, DataTableHeaderProps, DataTableHeaderSearch, DataTablePillDef, FilterDropdown } from './data-table-header.js';
+export { DataTableFilterDef, DataTableFilterOption, DataTableHeader, DataTableHeaderProps, DataTableHeaderSearch, FilterDropdown } from './data-table-header.js';
 export { Button, ButtonIconPosition, ButtonProps } from './button.js';
 export { Badge, BadgeProps, BadgeTone, BadgeVariant, formatBadgeValue } from './badge.js';
 export { Status, StatusProps, StatusSize, StatusTone, StatusVariant } from './status.js';

package/dist/components/saving-bar.js

@@ -34,24 +34,24 @@ function SavingBar(_a) {
   ]);
   const saving = status === "saving";
   const error = status === "error";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
       role: "region",
       "aria-label": "Salvar altera\xE7\xF5es"
     }, rest), {
       className: ["rds-savingbar", className].filter(Boolean).join(" "),
-      children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__row", children: [
         /* @__PURE__ */ jsxs("p", { className: "rds-savingbar__message", 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", { children: saving ? savingMessage : error ? errorMessage : message })
+          /* @__PURE__ */ jsx("span", { className: "rds-savingbar__text", children: saving ? savingMessage : error ? errorMessage : message })
         ] }),
         /* @__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 })
         ] })
-      ]
+      ] })
     })
   );
 }

package/package.json

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

package/styles/rds/components-styles.css

@@ -1749,34 +1749,45 @@ button.rds-breadcrumb__link:focus-visible {
 /* components/card.css */
 /* @tokens card */
 /*
- * Card (Content collection, card/*): header, content and footer. default pads 16, sm pads 12. tint is the brand's
- * light background, with no border. Corners in radius/container, shadow elevation/raised.
+ * Card (Content collection, card/*): header, content and footer. default pads 24, sm pads 16; 24 between the
+ * header, the content and the actions (sm: 16). Corners in radius/container.
+ *   default: card/background, a card/border hairline and elevation/raised.
+ *   outline: only the hairline, no fill, no shadow; it takes the surface underneath (cards side by side in a grid,
+ *            inside a panel or a list, where stacked shadows turn into noise).
+ *   tint:    the brand's light plate (card/tint/background), no border, no shadow, title in card/tint/title.
+ * The footer has no band and no rule: the actions sit side by side, the main one last (on the right). The
+ * card/footer/background tokens are obsolete in Figma (03/10/2026) and not read here.
  */
 .rds-card {
-  --_pad: var(--space-16);
-  --_background: var(--card-background);
-  --_footer: var(--card-footer-background);
-  --_border: var(--card-border);
+  --_pad: var(--space-24);
+  --_title: var(--card-title);
 
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border: var(--border-width) solid var(--_border);
+  border: var(--border-width) solid var(--card-border);
   border-radius: var(--radius-container);
-  background: var(--_background);
+  background: var(--card-background);
   box-shadow: var(--elevation-raised);
   font-family: var(--type-font-stack);
 }
 
 .rds-card--sm {
-  --_pad: var(--space-12);
+  --_pad: var(--space-16);
+}
+
+.rds-card--outline {
+  background: transparent;
+  box-shadow: none;
 }
 
 .rds-card--tint {
-  --_background: var(--card-tint-background);
-  --_footer: var(--card-tint-footer-background);
-  --_border: transparent;
+  --_title: var(--card-tint-title);
+
+  border-color: transparent;
+  background: var(--card-tint-background);
+  box-shadow: none;
 }
 
 .rds-card__header {
@@ -1807,7 +1818,7 @@ button.rds-breadcrumb__link:focus-visible {
 
 .rds-card__title {
   margin: 0;
-  color: var(--card-title);
+  color: var(--_title);
   font-size: var(--type-label-size);
   line-height: var(--type-label-line);
   font-weight: 500;
@@ -1846,32 +1857,27 @@ button.rds-breadcrumb__link:focus-visible {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
-  padding: var(--_pad);
-  border-top: var(--border-width) solid var(--card-border);
-  background: var(--_footer);
-}
-
-.rds-card--tint .rds-card__footer {
-  border-top-color: transparent;
+  padding: 0 var(--_pad) var(--_pad);
 }
 
 .rds-card__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-16);
+  gap: var(--space-12);
 }
 
 .rds-card__footer--end .rds-card__actions {
   justify-content: flex-end;
 }
 
+/* full: the two actions side by side, half each, for a narrow card on a phone. */
 .rds-card__footer--full .rds-card__actions {
-  flex-direction: column;
-  gap: var(--space-8);
+  flex-wrap: nowrap;
 }
 
 .rds-card__footer--full .rds-card__actions > * {
-  width: 100%;
+  flex: 1 1 0;
+  min-width: 0;
 }
 
 .rds-card__note {
@@ -1882,8 +1888,7 @@ button.rds-breadcrumb__link:focus-visible {
 }
 
 @media (forced-colors: active) {
-  .rds-card,
-  .rds-card--tint .rds-card__footer {
+  .rds-card {
     border-color: CanvasText;
   }
 }
@@ -2672,10 +2677,10 @@ input:focus-visible + .rds-checkbox__box {
  * an 8 dot. Selected fills the card with the brand. Disabled is the same card at half opacity (as in Figma).
  * tile: a grid cell, 16 inside, centred: the icon, then the label 14/20 semibold and the description 12/16 (8 below
  * the icon). Selected fills it with the brand, the icon square at 10% of choice-card/icon/background/selected, the
- * description at 70%, and a 16 check (11 glyph) 8 from the top right corner.
+ * description at full opacity, and a 16 check (11 glyph) 8 from the top right corner.
  * preview: 8 inside, the picture on top (16:9, a 1px border, corners radius/container, a 24 placeholder icon), then
  * the label 16/24 semibold and the description 14/20, 4 in from the sides. Selected keeps the surface: a 2px border
- * in the brand, the description at 70% and a 20 check (12 glyph) in the picture's bottom right corner.
+ * in the brand, the description at full opacity and a 20 check (12 glyph) in the picture's bottom right corner.
  * The group stacks rows 8 apart; tiles and previews go in a grid (cells of at least 160 and 240), 8 apart.
  */
 .rds-choice-card-group {
@@ -2867,11 +2872,6 @@ input:focus-visible + .rds-checkbox__box {
   color: var(--choice-card-icon-color-selected);
 }
 
-.rds-choice-card--tile.rds-choice-card--selected .rds-choice-card__description,
-.rds-choice-card--preview.rds-choice-card--selected .rds-choice-card__description {
-  color: color-mix(in srgb, var(--_description) 70%, transparent);
-}
-
 .rds-choice-card--tile .rds-choice-card__check {
   position: absolute;
   top: calc(var(--space-8) - var(--border-width));
@@ -3229,7 +3229,7 @@ input:focus-visible + .rds-checkbox__box {
 .rds-color-input__swatch:focus-visible,
 .rds-color-input__swatch:has(.rds-color-input__native:focus-visible) {
   outline: var(--focus-ring-width) solid var(--_border-focus);
-  outline-offset: var(--border-width);
+  outline-offset: var(--focus-ring-width);
 }
 
 .rds-color-input__native {
@@ -3296,14 +3296,15 @@ input:focus-visible + .rds-checkbox__box {
   cursor: pointer;
 }
 
+/* Selected and focus: the ring of Button and Checkbox, focus-ring-width wide and as far off the swatch (a gap). */
 .rds-color-input__choice[aria-pressed='true'] {
-  outline: calc(var(--border-width) * 2) solid var(--color-input-swatch-selected);
-  outline-offset: var(--border-width);
+  outline: var(--focus-ring-width) solid var(--color-input-swatch-selected);
+  outline-offset: var(--focus-ring-width);
 }
 
 .rds-color-input__choice:focus-visible {
   outline: var(--focus-ring-width) solid var(--color-input-border-focus);
-  outline-offset: var(--border-width);
+  outline-offset: var(--focus-ring-width);
 }
 
 @media (forced-colors: active) {
@@ -3578,23 +3579,29 @@ input:focus-visible + .rds-checkbox__box {
 /* components/data-table-header.css */
 /* @tokens data-table-header */
 /*
- * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, DropdownMenu,
- * Popover and Drawer bring theirs. One row, 8 apart, 12 above the table; the search takes the free width. The wide
- * parts show from 768, the narrow ones below it. In the Popover and the Drawer the filters stack 16 apart, each
- * one a caption-sized label over its chips.
+ * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, Checkbox, DropdownMenu,
+ * Popover and Drawer bring theirs. One row, 8 apart, 12 above the table, packed to the right: the search on the left
+ * takes the free width, at least 320 (never wider than the bar); the quick filters, the filters, the view control
+ * and the actions follow it on the right, and what does not fit wraps. The wide parts show from 768, the narrow ones
+ * below it. In the Popover and the Drawer the filters stack 16 apart, each one a caption-sized label over its chips.
  */
 .rds-data-table-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: var(--space-8);
   margin-bottom: var(--space-12);
 }
 
-.rds-data-table-header__search {
-  flex: 1 1 calc(var(--space-64) * 4);
+/* Scoped to the bar: the field's own `min-width: 0` (internal/field.css) comes later in the bundle. */
+.rds-data-table-header .rds-data-table-header__search {
+  flex: 1 1 calc(var(--space-64) * 5);
+  min-width: min(calc(var(--space-64) * 5), 100%);
 }
 
+.rds-data-table-header__quick,
+.rds-data-table-header__view,
 .rds-data-table-header__wide,
 .rds-data-table-header__actions,
 .rds-data-table-header__narrow {
@@ -4289,7 +4296,7 @@ input:focus-visible + .rds-checkbox__box {
  * FilterChip (Forms collection, filter-chip/*): 32 tall, pill, 12 inside, 4 between icon, label and count;
  * label 14/20 medium. inactive: card fill and a hairline; hover: muted fill, strong hairline; active: the brand
  * at 12% over what is behind, brand border and label; disabled: the whole chip at 50%, the label at 40%.
- * The count reads at 60% of the label. Icon 14, in the label's colour.
+ * The count reads in the label's colour, at full opacity. Icon 14, in the label's colour.
  */
 .rds-filter-chip-group {
   display: flex;
@@ -4380,7 +4387,6 @@ input:focus-visible + .rds-checkbox__box {
 }
 
 .rds-filter-chip__count {
-  color: color-mix(in srgb, currentColor 60%, transparent);
   font-variant-numeric: tabular-nums;
 }
 
@@ -7347,7 +7353,7 @@ body:has(.rds-modal) {
 /*
  * PageSkeleton and CardsSkeleton: no tokens of their own; the Skeleton and the Card bring theirs. Blocks 24 apart
  * (24 padding when padded). The Cards keep their elevation/raised, as in the Figma. The table is a small Card: the
- * header row on the card's footer background, a line between rows. The cards: 2 per row (4 from 1024), the charts
+ * header row on the table header background (table/header/background), a line between rows. The cards: 2 per row (4 from 1024), the charts
  * 1 (2 from 1024), 16 apart.
  */
 .rds-page-skeleton {
@@ -7379,7 +7385,7 @@ body:has(.rds-modal) {
 }
 
 .rds-page-skeleton__row--head {
-  background: var(--card-footer-background);
+  background: var(--table-header-background);
 }
 
 .rds-page-skeleton__row .rds-skeleton {
@@ -8376,15 +8382,15 @@ 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) and the actions (8 apart). The message grows. The Buttons use the inverse
+ * 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.
+ * Two arrangements, by the bar's own width (a size container, as the Figma's viewport mode): 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.
  */
 .rds-savingbar {
   box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-16);
+  container-type: inline-size;
   width: 100%;
   min-width: min(320px, 100%);
   padding: var(--space-12) var(--space-24);
@@ -8393,18 +8399,34 @@ input:focus-visible + .rds-radio__circle {
   font-family: var(--type-font-stack);
 }
 
+.rds-savingbar__row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-16);
+}
+
 .rds-savingbar__message {
   display: flex;
-  flex: 1;
+  flex: 1 1 160px;
   align-items: center;
   gap: var(--space-12);
-  min-width: 0;
+  min-width: 160px;
   margin: 0;
   font-size: var(--type-label-size);
   font-weight: 500;
   line-height: var(--type-label-line);
 }
 
+.rds-savingbar__text {
+  display: -webkit-box;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
 .rds-savingbar__icon {
   display: inline-flex;
   flex: none;
@@ -8435,10 +8457,27 @@ input:focus-visible + .rds-radio__circle {
 
 .rds-savingbar__actions {
   display: flex;
-  flex-wrap: wrap;
+  flex: none;
   gap: var(--space-8);
 }
 
+@container (max-width: 1023px) {
+  .rds-savingbar__row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .rds-savingbar__message {
+    flex: none;
+    min-width: 0;
+  }
+
+  .rds-savingbar__actions > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+
 @media (forced-colors: active) {
   .rds-savingbar {
     border-top: var(--border-width) solid CanvasText;
@@ -8806,7 +8845,9 @@ input:focus-visible + .rds-radio__circle {
 /*
  * Sidebar (Navigation collection, sidebar/*): 240 wide (64 collapsed), 12 × 8 inside, a 1px border on the right.
  * Header: the brand mark (24) and the module (16/24 medium), 10 apart, 44 tall. Entries of 44, 12 inside, 12 between
- * icon (20) and label (14/20 medium), 4 apart; the current one on the brand tint with the label in colors/primary.
+ * icon (20) and label (14/20 medium), 4 apart; the current one on the brand tint, its label semibold in
+ * sidebar/item/label/active and a 3 × 20 marker on the left in sidebar/item/indicator, so the current entry does not
+ * rest on colour alone.
  * Section labels 11/14 bold, 16 above and 6 below, with a 14 chevron. Foot: who is signed in (12/16) and Sair.
  * dark (deprecated in the Figma) reads sidebar/dark/*; the current entry stays the light pill.
  */
@@ -8911,6 +8952,7 @@ input:focus-visible + .rds-radio__circle {
 }
 
 .rds-sidebar__item {
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -8970,8 +9012,21 @@ input:focus-visible + .rds-radio__circle {
   color: var(--sidebar-item-label-active);
 }
 
-.rds-sidebar__item[aria-current='page'] .rds-sidebar__count {
-  color: var(--sidebar-item-label-active);
+.rds-sidebar__item[aria-current='page'] .rds-sidebar__label {
+  font-weight: 600;
+}
+
+/* Figma .sidebar/item state=active: the marker, 3 × 20, on the left edge, vertically centred, radius 2. */
+.rds-sidebar__item[aria-current='page']::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 50%;
+  width: 3px;
+  height: var(--size-20);
+  border-radius: 2px;
+  background: var(--sidebar-item-indicator);
+  transform: translateY(-50%);
 }
 
 .rds-sidebar__item:focus-visible,
@@ -9040,6 +9095,10 @@ input:focus-visible + .rds-radio__circle {
   .rds-sidebar__item[aria-current='page'] {
     outline: var(--border-width) solid CanvasText;
   }
+
+  .rds-sidebar__item[aria-current='page']::before {
+    background: Highlight;
+  }
 }
 
 /* components/skeleton.css */

package/styles/rds/components.css

@@ -183,7 +183,7 @@
   /* chat */
   --attachment-background: var(--surface-card);
   --attachment-border: var(--border-default);
-  --attachment-border-error: var(--colors-state-error);
+  --attachment-border-error: var(--border-error);
   --attachment-description: var(--text-muted);
   --attachment-error: var(--text-error);
   --attachment-media: var(--surface-muted);
@@ -292,9 +292,6 @@
   --chart-tooltip-border: var(--border-default);
   --chart-label: var(--text-body);
   --chart-tooltip-title: var(--text-heading);
-  --chart-bar-hover: var(--surface-muted);
-  --chart-focus-ring: var(--focus-ring);
-  --chart-tick: var(--border-strong);
   --carousel-slide-background: var(--surface-muted);
   --carousel-dot: var(--border-strong);
   --carousel-dot-active: var(--colors-primary-default);
@@ -374,6 +371,9 @@
   --choice-card-preview-background: var(--surface-muted);
   --choice-card-preview-border: var(--border-default);
   --choice-card-preview-icon: var(--text-subtle);
+  --chart-bar-hover: var(--surface-muted);
+  --chart-focus-ring: var(--focus-ring);
+  --chart-tick: var(--border-strong);
   --choice-list-item-background-hover: var(--surface-muted);
   --choice-list-item-background-selected: var(--surface-tint-default);
   --choice-list-item-indicator: var(--colors-primary-default);
@@ -385,9 +385,10 @@
   --choice-list-item-trailing-default: var(--text-body);
   --choice-list-item-trailing-disabled: var(--text-disabled);
   --choice-list-focus-ring: var(--focus-ring);
-  --choice-list-item-description-selected: var(--text-on-tint);
   --heading-default: var(--text-heading);
   --heading-accent: var(--colors-accent-default);
+  --choice-list-item-description-selected: var(--text-on-tint);
+  --card-tint-title: var(--text-on-tint);
 
   /* external */
   --google-button-light-background: #ffffff;
@@ -550,7 +551,7 @@
   --input-border-default: var(--border-strong);
   --input-border-hover: var(--border-strong-hover);
   --input-border-focus: var(--focus-ring);
-  --input-border-error: var(--colors-state-error);
+  --input-border-error: var(--border-error);
   --input-border-disabled: var(--border-default);
   --input-value-default: var(--text-body);
   --input-value-disabled: var(--text-disabled);
@@ -579,7 +580,7 @@
   --textarea-border-default: var(--border-strong);
   --textarea-border-hover: var(--border-strong-hover);
   --textarea-border-focus: var(--focus-ring);
-  --textarea-border-error: var(--colors-state-error);
+  --textarea-border-error: var(--border-error);
   --textarea-border-disabled: var(--border-default);
   --textarea-value-default: var(--text-body);
   --textarea-value-disabled: var(--text-disabled);
@@ -600,7 +601,7 @@
   --select-border-default: var(--border-strong);
   --select-border-hover: var(--border-strong-hover);
   --select-border-focus: var(--focus-ring);
-  --select-border-error: var(--colors-state-error);
+  --select-border-error: var(--border-error);
   --select-border-disabled: var(--border-default);
   --select-value-default: var(--text-body);
   --select-value-disabled: var(--text-disabled);
@@ -628,7 +629,7 @@
   --checkbox-control-background-checked-disabled: var(--text-disabled);
   --checkbox-control-border-default: var(--border-strong);
   --checkbox-control-border-hover: var(--border-strong-hover);
-  --checkbox-control-border-error: var(--colors-state-error);
+  --checkbox-control-border-error: var(--border-error);
   --checkbox-control-border-disabled: var(--border-default);
   --checkbox-control-mark: var(--text-on-secondary);
   --checkbox-control-mark-disabled: var(--surface-card);
@@ -649,7 +650,7 @@
   --radio-control-background-checked-disabled: var(--text-disabled);
   --radio-control-border-default: var(--border-strong);
   --radio-control-border-hover: var(--border-strong-hover);
-  --radio-control-border-error: var(--colors-state-error);
+  --radio-control-border-error: var(--border-error);
   --radio-control-border-disabled: var(--border-default);
   --radio-control-dot: var(--text-on-secondary);
   --radio-control-dot-disabled: var(--surface-card);
@@ -716,7 +717,7 @@
   --otp-slot-background-disabled: var(--surface-disabled);
   --otp-slot-border-default: var(--border-strong);
   --otp-slot-border-active: var(--focus-ring);
-  --otp-slot-border-error: var(--colors-state-error);
+  --otp-slot-border-error: var(--border-error);
   --otp-slot-border-disabled: var(--border-default);
   --combobox-empty: var(--text-muted);
   --calendar-background: var(--surface-card);
@@ -748,7 +749,7 @@
   --file-input-area-border-default: var(--border-strong);
   --file-input-area-border-hover: var(--focus-ring);
   --file-input-area-border-focus: var(--focus-ring);
-  --file-input-area-border-error: var(--colors-state-error);
+  --file-input-area-border-error: var(--border-error);
   --file-input-area-border-disabled: var(--border-default);
   --file-input-area-icon-default: var(--colors-primary-default);
   --file-input-area-icon-disabled: var(--text-disabled);
@@ -771,7 +772,7 @@
   --chip-input-border-default: var(--border-strong);
   --chip-input-border-hover: var(--border-strong-hover);
   --chip-input-border-focus: var(--focus-ring);
-  --chip-input-border-error: var(--colors-state-error);
+  --chip-input-border-error: var(--border-error);
   --chip-input-border-disabled: var(--border-default);
   --chip-input-value-default: var(--text-body);
   --chip-input-value-disabled: var(--text-disabled);
@@ -790,7 +791,7 @@
   --number-input-border-default: var(--border-strong);
   --number-input-border-hover: var(--border-strong-hover);
   --number-input-border-focus: var(--focus-ring);
-  --number-input-border-error: var(--colors-state-error);
+  --number-input-border-error: var(--border-error);
   --number-input-border-disabled: var(--border-default);
   --number-input-value-default: var(--text-body);
   --number-input-value-disabled: var(--text-disabled);
@@ -811,7 +812,7 @@
   --color-input-border-default: var(--border-strong);
   --color-input-border-hover: var(--border-strong-hover);
   --color-input-border-focus: var(--focus-ring);
-  --color-input-border-error: var(--colors-state-error);
+  --color-input-border-error: var(--border-error);
   --color-input-border-disabled: var(--border-default);
   --color-input-value-default: var(--text-body);
   --color-input-value-disabled: var(--text-disabled);
@@ -939,7 +940,7 @@
   --sidebar-item-background-active: var(--surface-tint-default);
   --sidebar-item-label-default: var(--text-muted);
   --sidebar-item-label-hover: var(--text-body);
-  --sidebar-item-label-active: var(--colors-primary-default);
+  --sidebar-item-label-active: var(--text-on-tint);
   --sidebar-module: var(--text-heading);
   --sidebar-user: var(--text-muted);
   --pagination-focus-ring: var(--focus-ring);
@@ -972,11 +973,12 @@
   --navmenu-trigger-background-open: var(--surface-muted);
   --navmenu-trigger-label: var(--text-body);
   --tabs-soon-background: var(--surface-muted);
-  --tabs-soon-text: var(--text-disabled);
+  --tabs-soon-text: var(--text-subtle);
   --tabs-dot-background: var(--colors-state-success);
   --tabs-dot-indicator: var(--colors-state-success);
   --sidebar-section-label: var(--text-subtle);
   --sidebar-dark-section-label: var(--text-on-primary);
+  --sidebar-item-indicator: var(--colors-primary-default);
 
   /* overlays */
   --menu-background: var(--surface-card);

package/styles/rds/theme.css

@@ -65,7 +65,7 @@
   --border-strong: #71717a;
   --border-strong-hover: #52525b;
   --colors-state-info: #2196f3;
-  --text-on-info: #ffffff;
+  --text-on-info: #000000;
   --colors-state-warning: #ff9800;
   --colors-state-warning-strong: #dc7f00;
   --text-on-warning: #000000;
@@ -80,7 +80,7 @@
   --surface-neutral: #f4f4f5;
   --text-neutral: #27272a;
   --chart-series-1: #5a6478;
-  --chart-series-2: #dc7f00;
+  --chart-series-2: #bd6a00;
   --chart-series-3: #009688;
   --chart-series-4: #bc4ad0;
   --chart-series-5: #379c3d;
@@ -104,6 +104,7 @@
   --colors-state-neutral-strong: #52525b;
   --text-on-primary-subtle: #ffffff4d;
   --surface-tint-subtle: #f4f6f9;
+  --border-error: #c50003;
   --rojao-primary: #1b2a4a;
   --rojao-secondary: #1b2a4a;
   --rojao-accent: #ff6a00;
@@ -186,6 +187,7 @@
   --colors-state-neutral-strong: #a1a1aa;
   --text-on-primary-subtle: #0000004d;
   --surface-tint-subtle: #002445;
+  --border-error: #ff6c5c;
 }
 
 .ds-plate, [data-rds-plate] {
@@ -265,5 +267,6 @@
   --colors-state-info-strong: #8cc6ff;
   --colors-state-neutral-strong: #a1a1aa;
   --surface-tint-subtle: #ffffff0d;
+  --border-error: #ffa598;
 }
 }