@rojaostudio/ds 2.0.0-next.2 → 2.0.0-next.21

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,52 @@ 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: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, Checkbox, DropdownMenu,
+ * Popover and Drawer bring theirs. The bar is one row that never wraps, aligned to the top, 8 apart, 12 above the
+ * table: the `tools` group (the search, the quick filters, the filters, the view control) takes the free width and
+ * is what wraps, packed to the right, the search on the left taking the free width, at least 320 (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.
+ * 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: Separator, Buttons with labels); compact below it (the __narrow parts: the
+ * filter as an IconButton of 44), where the search accepts 200. On the IconButton, while a filter is on, a dot of 8
+ * (badge neutral fill, 6 in from the top right corner) or a neutral number Badge over the corner (-6 top, -12 right).
+ * In the Popover and the Drawer the filters stack 16 apart, each one a caption-sized label over its chips.
  */
 .rds-data-table-header {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: var(--space-8);
+  margin-bottom: var(--space-12);
+}
+
+/* Figma `tools`: horizontal, wrap, fill. */
+.rds-data-table-header__tools {
+  flex: 1 1 0;
+  min-width: 0;
   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);
+/* Figma `actions`: outside `tools`, at the end of the first line. */
+.rds-data-table-header__actions {
+  flex: none;
+  align-self: flex-start;
+}
+
+/* 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 {
@@ -3420,17 +3637,55 @@ 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;
+  }
+
+  /* Compact: the search accepts 200 (40 × 5), so it sits on one line with the filter and an IconButton at 390. */
+  .rds-data-table-header .rds-data-table-header__search {
+    flex-basis: calc(var(--space-40) * 5);
+    min-width: min(calc(var(--space-40) * 5), 100%);
+  }
+}
+
+/* The compact filter: the IconButton with its indicator on the corner. */
+.rds-data-table-header__trigger {
+  position: relative;
+  display: inline-flex;
+}
+
+.rds-data-table-header__dot,
+.rds-data-table-header__count {
+  position: absolute;
+  pointer-events: none;
+}
+
+.rds-data-table-header__dot {
+  top: calc(var(--space-4) * 1.5);
+  right: calc(var(--space-4) * 1.5);
+  width: var(--space-8);
+  height: var(--space-8);
+  border-radius: var(--radius-full);
+  background: var(--badge-neutral-fill-background);
+}
+
+.rds-data-table-header__count {
+  top: calc(var(--space-4) * -1.5);
+  right: calc(var(--space-12) * -1);
+}
+
+@media (forced-colors: active) {
+  .rds-data-table-header__dot {
+    background: CanvasText;
   }
 }
 
@@ -3590,6 +3845,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 +3858,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 +3882,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 +4374,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 +4418,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 +4465,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 +4473,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 +4483,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 */
 /*
@@ -4595,6 +4831,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 +4947,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 +4977,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 {
@@ -5298,6 +5602,23 @@ input:focus-visible + .rds-checkbox__box {
   font: inherit;
 }
 
+/*
+ * Browser autofill paints the control's own background (blue in light, yellow in dark) and the control is smaller
+ * than the box that draws the border: it showed as a patch in the middle of the field. Cover it with the box
+ * colour and keep the value colour. The background-color transition is the fallback for browsers that ignore the
+ * inset shadow on autofill.
+ */
+.rds-field__control:-webkit-autofill,
+.rds-field__control:-webkit-autofill:hover,
+.rds-field__control:-webkit-autofill:focus,
+.rds-field__control:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--_background) inset;
+  box-shadow: 0 0 0 1000px var(--_background) inset;
+  -webkit-text-fill-color: var(--_value);
+  caret-color: var(--_value);
+  transition: background-color 600000s 0s;
+}
+
 .rds-field__control::placeholder {
   color: var(--_placeholder);
   opacity: 1;
@@ -6319,7 +6640,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 {
@@ -6331,11 +6652,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);
 }
 
@@ -6361,7 +6682,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;
@@ -6371,7 +6692,7 @@ body:has(.rds-modal) {
   border-color: var(--item-border);
 }
 
-.rds-item--muted {
+.rds-item--soft {
   background: var(--item-muted-background);
 }
 
@@ -6417,7 +6738,7 @@ body:has(.rds-modal) {
 
 @media (forced-colors: active) {
   .rds-item--outline,
-  .rds-item--muted {
+  .rds-item--soft {
     border-color: CanvasText;
   }
 }
@@ -7109,8 +7430,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;
@@ -7129,10 +7451,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;
@@ -7145,7 +7463,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 {
@@ -7179,7 +7497,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 {
@@ -8143,15 +8460,20 @@ 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
- * 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;
-  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);
@@ -8160,18 +8482,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;
@@ -8202,10 +8540,74 @@ input:focus-visible + .rds-radio__circle {
 
 .rds-savingbar__actions {
   display: flex;
-  flex-wrap: wrap;
+  flex: none;
   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;
+    align-items: stretch;
+  }
+
+  .rds-savingbar__message {
+    flex: none;
+    min-width: 0;
+  }
+
+  .rds-savingbar__actions > * {
+    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) {
   .rds-savingbar {
     border-top: var(--border-width) solid CanvasText;
@@ -8573,9 +8975,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);
@@ -8601,21 +9006,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);
 }
@@ -8678,6 +9068,7 @@ input:focus-visible + .rds-radio__circle {
 }
 
 .rds-sidebar__item {
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -8737,8 +9128,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,
@@ -8772,9 +9176,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 {
@@ -8804,6 +9211,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 */
@@ -9197,6 +9608,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 {
@@ -9218,11 +9630,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);
 }
 
@@ -9230,6 +9642,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);
 }
@@ -9456,6 +9869,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 */
 /*
@@ -10390,23 +10832,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);
@@ -10420,6 +10852,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. */