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

package/styles/rds/components-styles.css

@@ -554,7 +554,7 @@
   line-height: var(--type-body-line);
 }
 
-.rds-avatar--brand.rds-avatar--default {
+.rds-avatar--brand.rds-avatar--md {
   font-size: var(--type-body-size);
   line-height: var(--type-body-line);
 }
@@ -665,8 +665,8 @@
   --_background: var(--badge-accent-fill-background);
   --_label: var(--badge-accent-fill-label);
 }
-/* The brand's highlighter: the one badge that reads as a marker. */
-.rds-badge--accent-highlight {
+/* accent soft: the brand's highlighter, the one badge that reads as a marker (the old `highlight`). */
+.rds-badge--accent-soft {
   --_background: var(--badge-accent-highlight-background);
   --_label: var(--badge-accent-highlight-label);
 }
@@ -1156,27 +1156,30 @@ button.rds-breadcrumb__link:focus-visible {
   --_text: var(--bubble-fill-text);
 }
 
-.rds-bubble--muted {
+/* soft + neutral (the old `muted`): the one answering. */
+.rds-bubble--soft {
   --_background: var(--bubble-muted-background);
   --_text: var(--bubble-muted-text);
 }
 
-.rds-bubble--tinted {
+/* soft + action (the old `tinted`): the one answering, on the brand tint. */
+.rds-bubble--soft.rds-bubble--action {
   --_background: var(--bubble-tinted-background);
   --_text: var(--bubble-tinted-text);
 }
 
+/* soft + danger (the old `error`): it was not sent. */
+.rds-bubble--soft.rds-bubble--danger {
+  --_background: var(--bubble-error-background);
+  --_text: var(--bubble-error-text);
+}
+
 .rds-bubble--outline {
   --_background: var(--bubble-outline-background);
   --_text: var(--bubble-outline-text);
   border-color: var(--bubble-outline-border);
 }
 
-.rds-bubble--error {
-  --_background: var(--bubble-error-background);
-  --_text: var(--bubble-error-text);
-}
-
 .rds-bubble--ghost {
   --_background: transparent;
   --_text: var(--bubble-ghost-text);
@@ -1749,34 +1752,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. md pads 24, sm pads 16; 24 between the
+ * header, the content and the actions (sm: 16). Corners in radius/container. The Figma `variant`:
+ *   surface: card/background, a card/border hairline and elevation/raised (the default).
+ *   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).
+ *   soft:    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--tint {
-  --_background: var(--card-tint-background);
-  --_footer: var(--card-tint-footer-background);
-  --_border: transparent;
+.rds-card--outline {
+  background: transparent;
+  box-shadow: none;
+}
+
+.rds-card--soft {
+  --_title: var(--card-tint-title);
+
+  border-color: transparent;
+  background: var(--card-tint-background);
+  box-shadow: none;
 }
 
 .rds-card__header {
@@ -1807,7 +1821,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 +1860,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 +1891,7 @@ button.rds-breadcrumb__link:focus-visible {
 }
 
 @media (forced-colors: active) {
-  .rds-card,
-  .rds-card--tint .rds-card__footer {
+  .rds-card {
     border-color: CanvasText;
   }
 }
@@ -1992,6 +2000,8 @@ button.rds-breadcrumb__link:focus-visible {
  * in --_series: chart.tsx picks one of the --_series-N locals below, each one a chart/series-color/N token.
  */
 .rds-chart {
+  /* Anchors the hidden alternative table (and any absolute part) to the chart, not to the page. */
+  position: relative;
   --_series-1: var(--chart-series-color-1);
   --_series-2: var(--chart-series-color-2);
   --_series-3: var(--chart-series-color-3);
@@ -2180,14 +2190,31 @@ button.rds-breadcrumb__link:focus-visible {
   white-space: nowrap;
 }
 
-.rds-chart__labels-track--line .rds-chart__label:first-child {
+.rds-chart__labels-track--line .rds-chart__label:first-of-type {
   transform: none;
 }
 
-.rds-chart__labels-track--line .rds-chart__label:last-child {
+.rds-chart__labels-track--line .rds-chart__label:last-of-type {
   transform: translateX(-100%);
 }
 
+/* dateEvery: a 1x4 tick on every point, the labels under them. */
+.rds-chart__labels-track--ticks {
+  height: calc(var(--type-caption-line) + var(--space-4));
+}
+
+.rds-chart__labels-track--ticks .rds-chart__label {
+  top: var(--space-4);
+}
+
+.rds-chart__tick {
+  position: absolute;
+  top: 0;
+  width: 1px;
+  height: var(--space-4);
+  background: var(--chart-tick);
+}
+
 /* Bars: label, track, value. */
 .rds-chart__bars {
   display: flex;
@@ -2218,6 +2245,50 @@ button.rds-breadcrumb__link:focus-visible {
   background: var(--_series);
 }
 
+/* A bar with a destination (hrefs or onSelect): the row is the link or button. */
+.rds-chart__bar-row--link {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-focus);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.rds-chart__bar-row--link:hover .rds-chart__track {
+  background: var(--chart-bar-hover);
+}
+
+.rds-chart__bar-row--link:hover .rds-chart__bar-label {
+  text-decoration: underline;
+}
+
+.rds-chart__bar-row--link:focus-visible,
+.rds-chart__table-link:focus-visible {
+  outline: var(--focus-ring-width) solid var(--chart-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
+
+.rds-chart--linked.rds-chart--column .rds-chart__plot {
+  cursor: pointer;
+}
+
+.rds-chart__table-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 .rds-chart__bar-value {
   color: var(--chart-axis);
   font-variant-numeric: tabular-nums;
@@ -2251,7 +2322,8 @@ button.rds-breadcrumb__link:focus-visible {
     background: CanvasText;
   }
 
-  .rds-chart__plot:focus-visible {
+  .rds-chart__plot:focus-visible,
+  .rds-chart__bar-row--link:focus-visible {
     outline-color: Highlight;
   }
 }
@@ -2608,10 +2680,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 {
@@ -2803,11 +2875,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));
@@ -2914,7 +2981,7 @@ input:focus-visible + .rds-checkbox__box {
 /*
  * ChoiceCarousel: no tokens of its own; the IconButtons bring theirs. A row that scrolls sideways and snaps to each
  * option (160 wide, 200 from 768), 12 apart, no scrollbar. From 768 the outline arrows sit on the row's edges, half
- * outside, and fade away when there is nothing more that way.
+ * outside, and are not there when there is nothing more that way.
  */
 .rds-choice-carousel {
   position: relative;
@@ -2968,7 +3035,6 @@ input:focus-visible + .rds-checkbox__box {
     display: inline-flex;
     border-radius: var(--radius-full);
     box-shadow: var(--elevation-raised);
-    transition: opacity var(--motion-duration-base) var(--motion-easing-standard);
   }
 
   .rds-choice-carousel__arrow--prev {
@@ -2980,11 +3046,6 @@ input:focus-visible + .rds-checkbox__box {
     right: 0;
     transform: translate(50%, -50%);
   }
-
-  .rds-choice-carousel__arrow[aria-disabled='true'] {
-    opacity: 0;
-    pointer-events: none;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2993,6 +3054,132 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
+/* components/choice-list.css */
+/* @tokens choice-list */
+/*
+ * ChoiceList (Content collection, choice-list/*): the dense list to choose one from. Each row pads 12 16 with 12
+ * between media, text and trailing; a line of border-width only at the bottom (padding-bottom gives it back, so the
+ * row is 60 with a description, 44 without). Title small medium, description caption, trailing small.
+ * Hover: choice-list/item/background/hover. Chosen: the tint and a bar of border-width-strong on the left, no hover.
+ * Focus: the list holds it (aria-activedescendant); the active row draws the ring inside its box, as the rows touch.
+ * Disabled: text in the disabled tokens, media at half; it stays chosen if it was.
+ */
+.rds-choice-list {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  font-family: var(--type-font-stack);
+  list-style: none;
+  outline: none;
+}
+
+.rds-choice-list__item {
+  --_background: transparent;
+  --_title: var(--choice-list-item-title-default);
+  --_description: var(--choice-list-item-description-default);
+  --_trailing: var(--choice-list-item-trailing-default);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  min-height: calc(var(--space-12) * 2 + var(--type-button-line));
+  padding: var(--space-12) var(--space-16) calc(var(--space-12) - var(--border-width));
+  border-bottom: var(--border-width) solid var(--choice-list-item-border);
+  background: var(--_background);
+  cursor: pointer;
+  user-select: none;
+}
+
+@media (hover: hover) {
+  .rds-choice-list__item:not([aria-selected='true'], [aria-disabled='true']):hover {
+    --_background: var(--choice-list-item-background-hover);
+  }
+}
+
+.rds-choice-list__item[aria-selected='true'] {
+  --_background: var(--choice-list-item-background-selected);
+  /* On the tint the muted line does not hold contrast in dark: it takes text/on/tint. */
+  --_description: var(--choice-list-item-description-selected);
+
+  box-shadow: inset var(--border-width-strong) 0 0 var(--choice-list-item-indicator);
+}
+
+.rds-choice-list:focus-visible .rds-choice-list__item[data-active] {
+  outline: var(--focus-ring-width) solid var(--choice-list-focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-width));
+}
+
+.rds-choice-list__item[aria-disabled='true'] {
+  --_title: var(--choice-list-item-title-disabled);
+  --_description: var(--choice-list-item-description-disabled);
+  --_trailing: var(--choice-list-item-trailing-disabled);
+
+  cursor: not-allowed;
+}
+
+.rds-choice-list__media {
+  display: inline-flex;
+  flex: none;
+}
+
+.rds-choice-list__item[aria-disabled='true'] .rds-choice-list__media {
+  opacity: 0.5;
+}
+
+.rds-choice-list__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.rds-choice-list__title,
+.rds-choice-list__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rds-choice-list__title {
+  color: var(--_title);
+  font-size: var(--type-small-size);
+  line-height: var(--type-small-line);
+  font-weight: 500;
+}
+
+.rds-choice-list__description {
+  color: var(--_description);
+  font-size: var(--type-caption-size);
+  line-height: var(--type-caption-line);
+}
+
+.rds-choice-list__trailing {
+  flex: none;
+  color: var(--_trailing);
+  font-size: var(--type-small-size);
+  line-height: var(--type-small-line);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+@media (forced-colors: active) {
+  .rds-choice-list__item[aria-selected='true'] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .rds-choice-list__item[aria-selected='true'] :is(.rds-choice-list__title, .rds-choice-list__description, .rds-choice-list__trailing) {
+    color: HighlightText;
+  }
+
+  .rds-choice-list:focus-visible .rds-choice-list__item[data-active] {
+    outline-color: CanvasText;
+  }
+}
+
 /* components/color-input.css */
 /* @tokens color-input */
 /*
@@ -3045,7 +3232,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 {
@@ -3112,14 +3299,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) {
@@ -3394,23 +3582,79 @@ 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, Badge, 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 (Figma [RDS] DataTableHeader, no variants). One component token, local to this stylesheet:
+ * --data-table-header-search-min, the search's minimum width (Figma `data-table-header/search-min`, viewport
+ * collection of the Base Tokens, not published yet): 320 from lg 1024, 200 below it. Everything else comes from the
+ * Input, FilterChip, Chip, Button, IconButton, Checkbox, DropdownMenu, Popover and Drawer; the count borrows the
+ * table's muted label (--table-header-label, text/muted), the bar being the table's.
+ *
+ * The bar is a column, 8 apart, 12 above the table:
+ * - `row`, which never wraps, aligned to the top: the `tools` group (the search, the quick filters, the filter
+ *   trigger, the view control, the count) takes the free width and is what wraps, packed to the start, the search
+ *   first taking the free width, at least search-min (never wider than the group); the action sits outside it,
+ *   fixed at the end of the FIRST line, on the right, and never goes down.
+ * - `active`, only while a filter is on: the `chips` (wrapping, at least 280 before "Limpar filtros" goes down)
+ *   and "Limpar filtros" at the end.
+ * Two arrangements, by the screen width, as the Figma viewport mode (layout/compact below lg 1024; the SavingBar's
+ * cut): expanded from 1024 (the __wide parts: the trigger as a Button with its label); compact below it (the __narrow
+ * parts: the trigger as an IconButton of 44, or a fill Button with the number while a filter is on).
+ * In the Popover and the Drawer the filters stack 16 apart, each one a caption-sized label over its chips.
  */
 .rds-data-table-header {
+  --data-table-header-search-min: 320px;
+
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  margin-bottom: var(--space-12);
+}
+
+@media (max-width: 1023px) {
+  .rds-data-table-header {
+    --data-table-header-search-min: 200px;
+  }
+}
+
+/* Figma `row`: tools + actions, never wraps. */
+.rds-data-table-header__row {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: var(--space-8);
+}
+
+/* Figma `tools`: horizontal, wrap, fill, packed to the start. */
+.rds-data-table-header__tools {
+  flex: 1 1 0;
+  min-width: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-start;
   gap: var(--space-8);
-  margin-bottom: var(--space-12);
 }
 
+/* Figma `actions`: outside `tools`, at the end of the first line. */
+.rds-data-table-header__actions {
+  flex: none;
+  align-self: flex-start;
+}
+
+/* The search takes the free width, at least search-min, never wider than the group: it wraps before it squeezes. */
 .rds-data-table-header__search {
-  flex: 1 1 calc(var(--space-64) * 4);
+  flex: 1 1 var(--data-table-header-search-min);
+  min-width: min(var(--data-table-header-search-min), 100%);
+  display: flex;
+}
+
+.rds-data-table-header__search > * {
+  flex: 1 1 auto;
 }
 
+.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 {
@@ -3420,20 +3664,47 @@ input:focus-visible + .rds-checkbox__box {
   gap: var(--space-8);
 }
 
-.rds-data-table-header__wide {
+.rds-data-table-header__narrow {
   display: none;
 }
 
-@media (min-width: 768px) {
+@media (max-width: 1023px) {
   .rds-data-table-header__wide {
-    display: flex;
+    display: none;
   }
 
   .rds-data-table-header__narrow {
-    display: none;
+    display: flex;
   }
 }
 
+/* Figma `count`: "128 resultados", a live region at the end of the tools. */
+.rds-data-table-header__count {
+  font-family: var(--type-font-stack);
+  font-size: var(--type-small-size);
+  line-height: var(--type-small-line);
+  color: var(--table-header-label);
+  white-space: nowrap;
+}
+
+/* Figma `activeFilters`: its own line, wrap, 8 apart. */
+.rds-data-table-header__active {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8);
+}
+
+/* Figma `chips`: fill, wrap, at least 280 before "Limpar filtros" goes down. */
+.rds-data-table-header__chips {
+  flex: 1 1 280px;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8);
+}
+
 .rds-data-table-header__scroll {
   max-height: 70vh;
   overflow-y: auto;
@@ -3590,6 +3861,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);
@@ -3601,7 +3874,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;
@@ -3625,6 +3898,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;
 }
@@ -4105,7 +4390,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;
@@ -4149,14 +4434,14 @@ input:focus-visible + .rds-checkbox__box {
 }
 
 @media (hover: hover) {
-  .rds-filter-chip:not(.rds-filter-chip--active, [aria-disabled='true']):hover {
+  .rds-filter-chip:not(.rds-filter-chip--pressed, [aria-disabled='true']):hover {
     --_surface: var(--filter-chip-surface-hover);
     --_stroke: var(--filter-chip-stroke-hover);
     --_text: var(--filter-chip-text-hover);
   }
 }
 
-.rds-filter-chip--active {
+.rds-filter-chip--pressed {
   --_surface: color-mix(in srgb, var(--filter-chip-surface-active) 12%, transparent);
   --_stroke: var(--filter-chip-stroke-active);
   --_text: var(--filter-chip-text-active);
@@ -4196,7 +4481,6 @@ input:focus-visible + .rds-checkbox__box {
 }
 
 .rds-filter-chip__count {
-  color: color-mix(in srgb, currentColor 60%, transparent);
   font-variant-numeric: tabular-nums;
 }
 
@@ -4205,7 +4489,7 @@ input:focus-visible + .rds-checkbox__box {
     border-color: CanvasText;
   }
 
-  .rds-filter-chip--active {
+  .rds-filter-chip--pressed {
     border-color: Highlight;
     outline: var(--border-width) solid Highlight;
   }
@@ -4215,38 +4499,6 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
-/* components/floating-stepper.css */
-/* @tokens floating-stepper */
-/*
- * FloatingStepper: no tokens of its own; the Card and the Buttons bring theirs. A pill (radius/full) of 44 Buttons,
- * 4 inside and 4 apart, raised by elevation/overlay because it floats over the page. A 1 × 24 line in the card's
- * border colour before the action.
- */
-.rds-floating-stepper {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-4);
-  width: max-content;
-  max-width: 100%;
-  padding: var(--space-4);
-  border-radius: var(--radius-full);
-  box-shadow: var(--elevation-overlay);
-  overflow-x: auto;
-}
-
-.rds-floating-stepper > .rds-button {
-  flex: none;
-  border-radius: var(--radius-full);
-}
-
-.rds-floating-stepper__divider {
-  flex: none;
-  width: var(--border-width);
-  height: var(--size-24);
-  margin-inline: var(--space-4);
-  background: var(--card-border);
-}
-
 /* components/footer.css */
 /* @tokens footer */
 /*
@@ -4376,91 +4628,45 @@ input:focus-visible + .rds-checkbox__box {
 
 @container (max-width: 639px) {
   .rds-footer__inner {
-    gap: var(--space-32);
-    padding: var(--space-32) var(--space-16) var(--space-24);
-  }
-
-  .rds-footer__sitemap,
-  .rds-footer__columns {
-    flex-direction: column;
-    gap: var(--space-32);
-  }
-
-  .rds-footer__brand {
-    width: auto;
-  }
-}
-
-@media (forced-colors: active) {
-  .rds-footer a:focus-visible {
-    outline-color: Highlight;
-  }
-}
-
-/* components/form-actions.css */
-/* @tokens form-actions */
-/*
- * 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).
- */
-.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);
-}
+    gap: var(--space-32);
+    padding: var(--space-32) var(--space-16) var(--space-24);
+  }
 
-/* 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-footer__sitemap,
+  .rds-footer__columns {
+    flex-direction: column;
+    gap: var(--space-32);
+  }
+
+  .rds-footer__brand {
+    width: auto;
+  }
 }
 
-.rds-form-actions--stacked .rds-form-actions__actions {
-  flex-direction: column;
+@media (forced-colors: active) {
+  .rds-footer a:focus-visible {
+    outline-color: Highlight;
+  }
 }
 
-.rds-form-actions--stacked .rds-form-actions__actions > * {
-  width: 100%;
+/* components/form-actions.css */
+/* @tokens bottom-bar */
+/*
+ * FormActions: no tokens of its own; the shell (internal/bottom-bar.css, bottom-bar/*) brings the colour, the height,
+ * the padding, the place and the Buttons' colours. Here only the actions: on the right, 8 apart, Cancelar then the
+ * primary. Compact (below lg 1024, by the screen width as the Figma viewport mode), only the last one, the primary.
+ */
+.rds-form-actions__actions {
+  display: flex;
+  flex: none;
+  gap: var(--space-8);
+  margin-inline-start: auto;
 }
 
-@media (forced-colors: active) {
-  .rds-form-actions {
-    border-color: CanvasText;
+@media (max-width: 1023px) {
+  /* Only the primary (the last action): Cancelar is the topbar's X. */
+  .rds-form-actions__actions > :not(:last-child) {
+    display: none;
   }
 }
 
@@ -4595,6 +4801,48 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
+/* components/heading.css */
+/* @tokens heading */
+/*
+ * Heading (Content collection, heading/*): a title in the brand pair. heading/default is text/heading, heading/accent
+ * the logo orange; .heading/mark paints a stretch in the other one. level follows the type scale (band, heading,
+ * value), all bold.
+ */
+.rds-heading {
+  margin: 0;
+  font-family: var(--type-font-stack);
+  font-weight: var(--type-heading-weight);
+  color: var(--heading-default);
+  text-wrap: balance;
+}
+
+.rds-heading--band {
+  font-size: var(--type-band-size);
+  line-height: var(--type-band-line);
+}
+
+.rds-heading--heading {
+  font-size: var(--type-heading-size);
+  line-height: var(--type-heading-line);
+}
+
+.rds-heading--value {
+  font-size: var(--type-value-size);
+  line-height: var(--type-value-line);
+}
+
+.rds-heading--accent {
+  color: var(--heading-accent);
+}
+
+.rds-heading__mark {
+  color: var(--heading-accent);
+}
+
+.rds-heading--accent .rds-heading__mark {
+  color: var(--heading-default);
+}
+
 /* components/hover-card.css */
 /* @tokens hovercard */
 /* HoverCard (Feedback collection, hovercard/*): 320 wide, 16 inside, 12 between avatar and text, elevation/overlay. */
@@ -4669,13 +4917,14 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
-/* components/image-crop-modal.css */
-/* @tokens image-crop-modal */
+/* components/image-crop-dialog.css */
+/* @tokens image-crop-dialog */
 /*
- * ImageCropModal: no tokens of its own; the Dialog, the ToggleGroup, the Alert and the Spinner bring theirs. 12
- * apart: the presets (they share the width), the stage (at least 300, at most 60% of the viewport, the image
- * letterboxed inside 16 of padding, a line in the dialog's border colour), the error or the hint. While sending,
- * the dialog's scrim covers the image.
+ * ImageCropDialog (Figma [RDS] Overlays/ImageCropDialog): the Dialog, the ToggleGroup, the Alert and the Spinner bring
+ * their tokens; the crop brings its own (Overlays, image-crop-dialog/*). 12 apart: the presets (they share the
+ * width), the stage (320 tall, on image-crop-dialog/stage/background, the image letterboxed inside 16 of padding, a
+ * line in the dialog's border colour), the error or the hint. Over the image, outside the crop, the shade; the crop's
+ * line and its handles in their own colours. While sending, the dialog's scrim covers the stage.
  */
 .rds-image-crop {
   display: flex;
@@ -4698,17 +4947,42 @@ input:focus-visible + .rds-checkbox__box {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 300px;
+  height: 320px;
+  /* On a short viewport (a phone on its side) the stage gives way so the footer stays in view. */
   max-height: 60vh;
   padding: var(--space-16);
   overflow: hidden;
+  background: var(--image-crop-dialog-stage-background);
   border: var(--border-width) solid var(--dialog-border);
   border-radius: var(--radius-control);
 }
 
+/*
+ * react-image-crop's own stylesheet is unlayered, so it wins over these layered rules wherever both set the same
+ * property. The shade is an SVG rect with fill as an attribute (black at 50%): any CSS beats it. The handles read
+ * the library's variables, set here. The selection's marching ants are hard-coded: the two !important take them
+ * off so the crop is one solid line in the selection colour (the library's focus outline stays).
+ */
 .rds-image-crop__crop {
   max-width: 100%;
-  max-height: calc(60vh - var(--space-32));
+  max-height: calc(min(320px, 60vh) - var(--space-32));
+  --rc-drag-handle-bg-colour: var(--image-crop-dialog-handle);
+  --rc-border-color: var(--image-crop-dialog-handle);
+}
+
+.rds-image-crop__crop .ReactCrop__crop-mask > rect {
+  fill: var(--image-crop-dialog-shade);
+  fill-opacity: 1;
+}
+
+.rds-image-crop__crop .ReactCrop__crop-selection {
+  background-image: none !important;
+  border: var(--border-width) solid var(--image-crop-dialog-selection);
+  animation: none !important;
+}
+
+.rds-image-crop__crop .ReactCrop__drag-handle {
+  border-radius: var(--radius-xs);
 }
 
 .rds-image-crop__image {
@@ -5116,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 */
 /*
@@ -6336,7 +6728,7 @@ body:has(.rds-modal) {
 /* components/item.css */
 /* @tokens item */
 /*
- * Item (Content collection, item/*): one list row, at least 44 tall. default pads 12 16, gap 16; sm pads 8 12,
+ * Item (Content collection, item/*): one list row, at least 44 tall. md pads 12 16, gap 16; sm pads 8 12,
  * gap 12. Corners in radius/container. Title in label (16/24 medium), description in small (14/20); sm one step down.
  */
 .rds-item-group {
@@ -6348,11 +6740,11 @@ body:has(.rds-modal) {
   list-style: none;
 }
 
-.rds-item-group:has(> .rds-item--default) {
+.rds-item-group:has(> .rds-item--ghost) {
   gap: 0;
 }
 
-.rds-item-group > .rds-item--default + .rds-item--default {
+.rds-item-group > .rds-item--ghost + .rds-item--ghost {
   border-top: var(--border-width) solid var(--item-border);
 }
 
@@ -6378,7 +6770,7 @@ body:has(.rds-modal) {
   --_gap: var(--space-12);
 }
 
-.rds-item--default {
+.rds-item--ghost {
   padding: var(--_pad-y) var(--_pad-x);
   border-width: 0;
   border-radius: 0;
@@ -6388,7 +6780,7 @@ body:has(.rds-modal) {
   border-color: var(--item-border);
 }
 
-.rds-item--muted {
+.rds-item--soft {
   background: var(--item-muted-background);
 }
 
@@ -6434,7 +6826,7 @@ body:has(.rds-modal) {
 
 @media (forced-colors: active) {
   .rds-item--outline,
-  .rds-item--muted {
+  .rds-item--soft {
     border-color: CanvasText;
   }
 }
@@ -6479,6 +6871,70 @@ body:has(.rds-modal) {
   }
 }
 
+/* components/loading-overlay.css */
+/* @tokens loading-overlay */
+/*
+ * LoadingOverlay (Overlays collection, loading-overlay/*): a veil over the whole screen (loading-overlay/scrim,
+ * surface/scrim) in the overlay layer (z/overlay), and a panel in the middle (loading-overlay/background,
+ * surface/card; radius/container, 24 padding, 16 between the Spinner lg and the label, at most 320 wide,
+ * elevation/modal). The label is type/label Medium in loading-overlay/text (text/body), centred. The panel gives the
+ * text its own surface, so it reads over any screen, light, dark or in the brand. It fades in; with reduced motion,
+ * no fade (and the Spinner turns slowly, spinner.css).
+ */
+.rds-loading-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-16);
+  background: var(--loading-overlay-scrim);
+  animation: rds-loading-overlay-in 150ms ease-out;
+}
+
+.rds-loading-overlay__panel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-16);
+  max-width: min(320px, 100%);
+  padding: var(--space-24);
+  border-radius: var(--radius-container);
+  background: var(--loading-overlay-background);
+  box-shadow: var(--elevation-modal);
+  color: var(--loading-overlay-text);
+  font-family: var(--type-font-stack);
+  outline: none;
+}
+
+.rds-loading-overlay__label {
+  margin: 0;
+  font-size: var(--type-label-size);
+  font-weight: 500;
+  line-height: var(--type-label-line);
+  text-align: center;
+}
+
+@keyframes rds-loading-overlay-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rds-loading-overlay {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .rds-loading-overlay__panel {
+    border: var(--border-width) solid CanvasText;
+  }
+}
+
 /* components/marker.css */
 /* @tokens marker */
 /*
@@ -7126,8 +7582,9 @@ body:has(.rds-modal) {
 /* @tokens page-skeleton */
 /*
  * PageSkeleton and CardsSkeleton: no tokens of their own; the Skeleton and the Card bring theirs. Blocks 24 apart
- * (24 padding when padded). 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 1 (2 from 1024), 16 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 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 {
   display: flex;
@@ -7146,10 +7603,6 @@ body:has(.rds-modal) {
   gap: var(--space-16);
 }
 
-.rds-page-skeleton__table {
-  box-shadow: none;
-}
-
 .rds-page-skeleton__row {
   display: flex;
   align-items: center;
@@ -7162,7 +7615,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 {
@@ -7196,7 +7649,6 @@ body:has(.rds-modal) {
 .rds-page-skeleton__card {
   gap: var(--space-12);
   padding: var(--space-16);
-  box-shadow: none;
 }
 
 .rds-page-skeleton__card .rds-skeleton {
@@ -8157,38 +8609,37 @@ 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) and the actions (8 apart). The message grows. The Buttons use the inverse
- * tone, drawn for this band in both modes, so the bar needs no theme switch of its own.
+ * 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;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-16);
-  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);
-}
-
 .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;
@@ -8201,31 +8652,20 @@ input:focus-visible + .rds-radio__circle {
   height: 100%;
 }
 
-.rds-savingbar__loader > svg {
-  animation: rds-savingbar-turn 1s linear infinite;
-}
-
-@keyframes rds-savingbar-turn {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .rds-savingbar__loader > svg {
-    animation-duration: 3s;
-  }
-}
-
 .rds-savingbar__actions {
   display: flex;
-  flex-wrap: wrap;
+  flex: none;
   gap: var(--space-8);
 }
 
-@media (forced-colors: active) {
-  .rds-savingbar {
-    border-top: var(--border-width) solid CanvasText;
+@media (max-width: 1023px) {
+  .rds-savingbar__message {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .rds-savingbar .rds-savingbar__discard {
+    display: none;
   }
 }
 
@@ -8590,9 +9030,12 @@ 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.
+ * No tone: the Sidebar follows its container's mode. The brand-coloured bar is a `.ds-plate` around it (the brand
+ * mode), the dark one a `.dark`.
  */
 .rds-sidebar {
   --_background: var(--sidebar-background);
@@ -8618,21 +9061,6 @@ input:focus-visible + .rds-radio__circle {
   font-family: var(--type-font-stack);
 }
 
-.rds-sidebar--dark {
-  --_background: var(--sidebar-dark-background);
-  --_label: var(--sidebar-dark-item-label-default);
-  --_label-hover: var(--sidebar-dark-item-label-hover);
-  --_hover: var(--sidebar-dark-item-background-hover);
-  --_module: var(--sidebar-dark-module);
-  --_user: var(--sidebar-dark-user);
-  --_section: var(--sidebar-dark-section-label);
-  --_count: var(--sidebar-dark-item-label-default);
-  /* No dark ring token: the strongest text over the brand, which is what the ring needs to show there. */
-  --_ring: var(--sidebar-dark-module);
-
-  border-right-color: transparent;
-}
-
 .rds-sidebar--collapsed {
   width: var(--space-64);
 }
@@ -8695,6 +9123,7 @@ input:focus-visible + .rds-radio__circle {
 }
 
 .rds-sidebar__item {
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -8754,8 +9183,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,
@@ -8789,9 +9231,12 @@ input:focus-visible + .rds-radio__circle {
   cursor: pointer;
 }
 
+/* Figma .sidebar/section: label in caps with 6% tracking; the count keeps its own case and no tracking. */
 .rds-sidebar__section-label {
   flex: 1;
   min-width: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
 .rds-sidebar__section-count {
@@ -8821,6 +9266,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 */
@@ -9214,6 +9663,7 @@ input:focus-visible + .rds-radio__circle {
 /*
  * Stat (Content collection, stat/*): 8 between the text and the sparkline. Text: the label 14/20, the row (the
  * value in type/value bold and the Delta, 8 apart, wrapping 4 below) and the caption 12/16, 4 apart.
+ * tone neutral (default), success, danger, warning; muted greys a zero out.
  * framed=true: 16 inside, a 1px border, corners radius/container. framed=false (the SummaryBar cell): 12 16, no border.
  */
 .rds-stat {
@@ -9235,11 +9685,11 @@ input:focus-visible + .rds-radio__circle {
   border-radius: var(--radius-container);
 }
 
-.rds-stat--positive {
+.rds-stat--success {
   --_value: var(--stat-value-positive);
 }
 
-.rds-stat--negative {
+.rds-stat--danger {
   --_value: var(--stat-value-negative);
 }
 
@@ -9247,6 +9697,7 @@ input:focus-visible + .rds-radio__circle {
   --_value: var(--stat-value-warning);
 }
 
+/* muted (zero, nothing to see) wins over the tone: the Figma draws it only on neutral. */
 .rds-stat--muted {
   --_value: var(--stat-value-muted);
 }
@@ -9473,6 +9924,35 @@ input:focus-visible + .rds-radio__circle {
   }
 }
 
+/* components/stepper.css */
+/* @tokens stepper */
+/*
+ * Stepper: no tokens of its own; the Card and the Buttons bring theirs. A pill (radius/full) of 44 Buttons,
+ * 4 inside and 4 apart, raised by elevation/overlay because it floats over the page. A vertical Separator, 24
+ * tall, before the action.
+ */
+.rds-stepper {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-4);
+  width: max-content;
+  max-width: 100%;
+  padding: var(--space-4);
+  border-radius: var(--radius-full);
+  box-shadow: var(--elevation-overlay);
+  overflow-x: auto;
+}
+
+.rds-stepper > .rds-button {
+  flex: none;
+  border-radius: var(--radius-full);
+}
+
+.rds-stepper > .rds-stepper__divider {
+  align-self: center;
+  height: var(--size-24);
+}
+
 /* components/summary-bar.css */
 /* @tokens summary-bar */
 /*
@@ -9652,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);
@@ -10407,23 +10897,13 @@ tbody > tr:last-child > .rds-table__status {
   }
 }
 
-/* components/toggle-card-compact.css */
-/* @tokens toggle-card-compact */
-/*
- * ToggleCardCompact: no tokens of its own; the Item, the Switch and the IconButton bring theirs. The pencil and the
- * Switch 8 apart at the end of the row.
- */
-.rds-toggle-card-compact__actions {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-8);
-}
-
 /* components/toggle-card.css */
 /* @tokens toggle-card */
 /*
- * ToggleCard: no tokens of its own; the Card and the Switch bring theirs. The Switch row pads 16 on the sides (4 top and
- * bottom); the options under it pad 16, 16 apart, after a line in the card's border colour.
+ * ToggleCard: no tokens of its own; the Card, the Item, the Switch and the IconButton bring theirs.
+ * layout=default: the Switch row pads 16 on the sides (4 top and bottom); the options under it pad 16, 16 apart,
+ * after a line in the card's border colour.
+ * layout=compact: the outline Item; the pencil and the Switch 8 apart at the end of the row.
  */
 .rds-toggle-card__header {
   padding: var(--space-4) var(--space-16);
@@ -10437,6 +10917,12 @@ tbody > tr:last-child > .rds-table__status {
   border-top: var(--border-width) solid var(--card-border);
 }
 
+.rds-toggle-card__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8);
+}
+
 /* components/toggle-group.css */
 /* @tokens toggle-group */
 /* ToggleGroup: Toggles side by side, 4 apart (Figma: slot items, gap space/4). No tokens of its own. */