@rojaostudio/ds 2.0.0-next.13 → 2.0.0-next.15

package/README.md

@@ -26,7 +26,7 @@ Add `dark` to `<html>` (or any element) for dark mode:
 <html class="dark">
 ```
 
-The stylesheet declares its layers first (`rds.theme`, `rds.tokens`, `rds.components`), so your own unlayered CSS
+The stylesheet declares its layers first (`rds.legacy`, `rds.theme`, `rds.tokens`, `rds.components`), so your own unlayered CSS
 always wins over the design system without `!important`. The components need no Tailwind and no other stylesheet.
 
 ### Legacy: `base.css` (deprecated)
@@ -42,6 +42,41 @@ utilities (`bg-surface-*`, `text-fg-*`, `h-control-*`…) and its CSS variables,
 @import "@rojaostudio/ds/styles/rds.css";
 ```
 
+Both stylesheets declare the same layer order, `rds.legacy, rds.theme, rds.tokens, rds.components`, and everything
+in `base.css` (its variables, the primitives, the `h1`–`h6` rule, the `rojao-*` animations) lives in `rds.legacy`.
+So, whatever the import order, the 2.0 wins wherever the two declare the same variable: 31 names, among them
+`--surface-page`, `--text-muted`, `--text-disabled`, `--border-default`, `--border-strong`, `--radius-card`,
+`--radius-control`, `--z-modal`, `--z-dropdown`, `--z-tooltip`, `--space-4` … `--space-64`, `--toast-text`,
+`--toast-border`. A 1.x utility that reads one of them (`bg-surface-page`, `text-fg-muted` through
+`--text-muted`) shows the 2.0 value while both are imported; the 1.x-only names (`--brand-primary`,
+`--surface-default`…) keep theirs. Tailwind's `@utility` and `@theme` blocks stay at the top level, as Tailwind
+requires, and the focus ring stays in Tailwind's `base` layer, so `outline-none` still wins over it. Your own
+unlayered CSS wins over all of it.
+
+## Theme scopes
+
+The shipped theme switches on `.dark`, `.ds-plate` and `.ds-scope`, and on three generic attributes:
+`data-rds-mode="dark"`, `data-rds-plate` and `data-rds-scope`. The component tokens are declared again on each of
+them (`RDS_SCOPE_SELECTORS` in `@rojaostudio/ds-core/generate`): a component token holds `var(--theme-role)`, which
+resolves where it is declared, so a theme switched on an element none of them match would repaint the roles but
+not the components inside.
+
+```html
+<section data-rds-mode="dark">…</section>   <!-- a dark section on a light page -->
+```
+
+For your own theme, `emitRdsCss(theme, { scope, dark, plate })` checks each selector against that list and throws
+on one the components would not follow:
+
+```ts
+emitRdsCss(theme, { scope: ".my-scope[data-rds-scope]" });          // <div class="my-scope" data-rds-scope>
+emitRdsCss(theme, { scope: ":root", dark: ':root[data-theme="dark"]' }); // next-themes, attribute="data-theme"
+emitRdsCss(theme, { scope: ".my-scope" });                           // throws: add data-rds-scope
+```
+
+A dark selector anchored at the root (`:root[…]`, `html…`) is used as is, which is where next-themes puts its
+attribute. `allowUncovered: true` skips the check, for a theme read only by your own CSS.
+
 ## Import the component, not the barrel
 
 ```tsx

package/dist/components/card.d.ts

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

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

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

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

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

package/dist/components/index.d.ts

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

package/dist/components/saving-bar.js

@@ -34,24 +34,24 @@ function SavingBar(_a) {
   ]);
   const saving = status === "saving";
   const error = status === "error";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
       role: "region",
       "aria-label": "Salvar altera\xE7\xF5es"
     }, rest), {
       className: ["rds-savingbar", className].filter(Boolean).join(" "),
-      children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__row", children: [
         /* @__PURE__ */ jsxs("p", { className: "rds-savingbar__message", role: "status", children: [
           saving && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon rds-savingbar__loader", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Loader, {}) }),
           error && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertIcon, {}) }),
-          /* @__PURE__ */ jsx("span", { children: saving ? savingMessage : error ? errorMessage : message })
+          /* @__PURE__ */ jsx("span", { className: "rds-savingbar__text", children: saving ? savingMessage : error ? errorMessage : message })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__actions", children: [
           onDiscard && /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
           /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "fill", disabled: saving, onClick: onSave, children: error ? retryLabel : saveLabel })
         ] })
-      ]
+      ] })
     })
   );
 }

package/package.json

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

package/styles/base.css

@@ -26,9 +26,17 @@
    Run `pnpm build:tokens` in the DS to regenerate.
    ───────────────────────────────────────────────────────────── */
 
+/* Cascade layers, lowest first: the same order rds.css declares, whichever of the two is imported first.
+   Everything of this file except Tailwind's @utility and @theme blocks (which Tailwind wants at the top level)
+   lives in rds.legacy, below rds.theme: with rds.css also imported, the 2.0 variables win wherever the names
+   collide (--surface-page, --text-muted, --border-default, --radius-card, --z-modal, --space-*, --toast-text…)
+   and the h1–h6 rule loses to the 2.0 components. */
+@layer rds.legacy, rds.theme, rds.tokens, rds.components;
+
 /* Primitives — auto-generated from tokens/index.ts */
-@import "./_primitives.generated.css";
+@import "./_primitives.generated.css" layer(rds.legacy);
 
+@layer rds.legacy {
 /* ── CSS Custom Properties — light (default, neutral theme) ── */
 /* .ds-scope: qualquer wrapper que precise recalcular tokens de COMPONENTE (ex.
    --option-tile-bg) sob um override local de token SEMÂNTICO (ex. --surface-default)
@@ -724,6 +732,7 @@ h1, h2, h3, h4, h5, h6 {
   .rojao-toast--enter-top, .rojao-toast--enter-bottom,
   .rojao-toast--exit-top,  .rojao-toast--exit-bottom { animation: none; }
 }
+} /* @layer rds.legacy */
 
 /* ── Control size utilities — h-control-sm/md/lg, size-control-sm/md/lg ── */
 @utility h-control-sm   { height: var(--space-control-height-sm); }
@@ -925,6 +934,9 @@ h1, h2, h3, h4, h5, h6 {
  * sem ele, num botão com borda da mesma família de cor, o anel some dentro da
  * borda. E ele é desenhado com a cor da superfície, então funciona igual sobre
  * fundo claro e sobre o escuro do chrome.
+ *
+ * Stays in Tailwind's `base` layer, not in rds.legacy: it sets no variable, and in `base` Tailwind's utilities
+ * (`outline-none`) still win over it, as they did in 1.x. Both layers sit below the rds.* ones.
  */
 @layer base {
   :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {

package/styles/rds/components-styles.css

@@ -1749,34 +1749,45 @@ button.rds-breadcrumb__link:focus-visible {
 /* components/card.css */
 /* @tokens card */
 /*
- * Card (Content collection, card/*): header, content and footer. default pads 16, sm pads 12. tint is the brand's
- * light background, with no border. Corners in radius/container, shadow elevation/raised.
+ * Card (Content collection, card/*): header, content and footer. default pads 24, sm pads 16; 24 between the
+ * header, the content and the actions (sm: 16). Corners in radius/container.
+ *   default: card/background, a card/border hairline and elevation/raised.
+ *   outline: only the hairline, no fill, no shadow; it takes the surface underneath (cards side by side in a grid,
+ *            inside a panel or a list, where stacked shadows turn into noise).
+ *   tint:    the brand's light plate (card/tint/background), no border, no shadow, title in card/tint/title.
+ * The footer has no band and no rule: the actions sit side by side, the main one last (on the right). The
+ * card/footer/background tokens are obsolete in Figma (03/10/2026) and not read here.
  */
 .rds-card {
-  --_pad: var(--space-16);
-  --_background: var(--card-background);
-  --_footer: var(--card-footer-background);
-  --_border: var(--card-border);
+  --_pad: var(--space-24);
+  --_title: var(--card-title);
 
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border: var(--border-width) solid var(--_border);
+  border: var(--border-width) solid var(--card-border);
   border-radius: var(--radius-container);
-  background: var(--_background);
+  background: var(--card-background);
   box-shadow: var(--elevation-raised);
   font-family: var(--type-font-stack);
 }
 
 .rds-card--sm {
-  --_pad: var(--space-12);
+  --_pad: var(--space-16);
+}
+
+.rds-card--outline {
+  background: transparent;
+  box-shadow: none;
 }
 
 .rds-card--tint {
-  --_background: var(--card-tint-background);
-  --_footer: var(--card-tint-footer-background);
-  --_border: transparent;
+  --_title: var(--card-tint-title);
+
+  border-color: transparent;
+  background: var(--card-tint-background);
+  box-shadow: none;
 }
 
 .rds-card__header {
@@ -1807,7 +1818,7 @@ button.rds-breadcrumb__link:focus-visible {
 
 .rds-card__title {
   margin: 0;
-  color: var(--card-title);
+  color: var(--_title);
   font-size: var(--type-label-size);
   line-height: var(--type-label-line);
   font-weight: 500;
@@ -1846,32 +1857,27 @@ button.rds-breadcrumb__link:focus-visible {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
-  padding: var(--_pad);
-  border-top: var(--border-width) solid var(--card-border);
-  background: var(--_footer);
-}
-
-.rds-card--tint .rds-card__footer {
-  border-top-color: transparent;
+  padding: 0 var(--_pad) var(--_pad);
 }
 
 .rds-card__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-16);
+  gap: var(--space-12);
 }
 
 .rds-card__footer--end .rds-card__actions {
   justify-content: flex-end;
 }
 
+/* full: the two actions side by side, half each, for a narrow card on a phone. */
 .rds-card__footer--full .rds-card__actions {
-  flex-direction: column;
-  gap: var(--space-8);
+  flex-wrap: nowrap;
 }
 
 .rds-card__footer--full .rds-card__actions > * {
-  width: 100%;
+  flex: 1 1 0;
+  min-width: 0;
 }
 
 .rds-card__note {
@@ -1882,8 +1888,7 @@ button.rds-breadcrumb__link:focus-visible {
 }
 
 @media (forced-colors: active) {
-  .rds-card,
-  .rds-card--tint .rds-card__footer {
+  .rds-card {
     border-color: CanvasText;
   }
 }
@@ -3229,7 +3234,7 @@ input:focus-visible + .rds-checkbox__box {
 .rds-color-input__swatch:focus-visible,
 .rds-color-input__swatch:has(.rds-color-input__native:focus-visible) {
   outline: var(--focus-ring-width) solid var(--_border-focus);
-  outline-offset: var(--border-width);
+  outline-offset: var(--focus-ring-width);
 }
 
 .rds-color-input__native {
@@ -3296,14 +3301,15 @@ input:focus-visible + .rds-checkbox__box {
   cursor: pointer;
 }
 
+/* Selected and focus: the ring of Button and Checkbox, focus-ring-width wide and as far off the swatch (a gap). */
 .rds-color-input__choice[aria-pressed='true'] {
-  outline: calc(var(--border-width) * 2) solid var(--color-input-swatch-selected);
-  outline-offset: var(--border-width);
+  outline: var(--focus-ring-width) solid var(--color-input-swatch-selected);
+  outline-offset: var(--focus-ring-width);
 }
 
 .rds-color-input__choice:focus-visible {
   outline: var(--focus-ring-width) solid var(--color-input-border-focus);
-  outline-offset: var(--border-width);
+  outline-offset: var(--focus-ring-width);
 }
 
 @media (forced-colors: active) {
@@ -3578,23 +3584,29 @@ input:focus-visible + .rds-checkbox__box {
 /* components/data-table-header.css */
 /* @tokens data-table-header */
 /*
- * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, DropdownMenu,
- * Popover and Drawer bring theirs. One row, 8 apart, 12 above the table; the search takes the free width. The wide
- * parts show from 768, the narrow ones below it. In the Popover and the Drawer the filters stack 16 apart, each
- * one a caption-sized label over its chips.
+ * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, Checkbox, DropdownMenu,
+ * Popover and Drawer bring theirs. One row, 8 apart, 12 above the table, packed to the right: the search on the left
+ * takes the free width, at least 320 (never wider than the bar); the quick filters, the filters, the view control
+ * and the actions follow it on the right, and what does not fit wraps. The wide parts show from 768, the narrow ones
+ * below it. In the Popover and the Drawer the filters stack 16 apart, each one a caption-sized label over its chips.
  */
 .rds-data-table-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: var(--space-8);
   margin-bottom: var(--space-12);
 }
 
-.rds-data-table-header__search {
-  flex: 1 1 calc(var(--space-64) * 4);
+/* Scoped to the bar: the field's own `min-width: 0` (internal/field.css) comes later in the bundle. */
+.rds-data-table-header .rds-data-table-header__search {
+  flex: 1 1 calc(var(--space-64) * 5);
+  min-width: min(calc(var(--space-64) * 5), 100%);
 }
 
+.rds-data-table-header__quick,
+.rds-data-table-header__view,
 .rds-data-table-header__wide,
 .rds-data-table-header__actions,
 .rds-data-table-header__narrow {
@@ -7347,7 +7359,7 @@ body:has(.rds-modal) {
 /*
  * PageSkeleton and CardsSkeleton: no tokens of their own; the Skeleton and the Card bring theirs. Blocks 24 apart
  * (24 padding when padded). The Cards keep their elevation/raised, as in the Figma. The table is a small Card: the
- * header row on the card's footer background, a line between rows. The cards: 2 per row (4 from 1024), the charts
+ * header row on the table header background (table/header/background), a line between rows. The cards: 2 per row (4 from 1024), the charts
  * 1 (2 from 1024), 16 apart.
  */
 .rds-page-skeleton {
@@ -7379,7 +7391,7 @@ body:has(.rds-modal) {
 }
 
 .rds-page-skeleton__row--head {
-  background: var(--card-footer-background);
+  background: var(--table-header-background);
 }
 
 .rds-page-skeleton__row .rds-skeleton {
@@ -8376,15 +8388,15 @@ input:focus-visible + .rds-radio__circle {
 /* @tokens savingbar */
 /*
  * SavingBar (Actions collection, savingbar/*): full width (at least 320), 12 24 padding, 16 between the
- * message (label, medium) and the actions (8 apart). The message grows. The Buttons use the inverse
+ * message (label, medium, at most 2 lines with an ellipsis) and the actions (8 apart). The Buttons use the inverse
  * tone, drawn for this band in both modes, so the bar needs no theme switch of its own.
+ * Two arrangements, by the bar's own width (a size container, as the Figma's viewport mode): expanded from 1024,
+ * the message grows (at least 160) beside the actions; compact below it, the message on top and Descartar and
+ * Salvar under it, sharing the width.
  */
 .rds-savingbar {
   box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-16);
+  container-type: inline-size;
   width: 100%;
   min-width: min(320px, 100%);
   padding: var(--space-12) var(--space-24);
@@ -8393,18 +8405,34 @@ input:focus-visible + .rds-radio__circle {
   font-family: var(--type-font-stack);
 }
 
+.rds-savingbar__row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-16);
+}
+
 .rds-savingbar__message {
   display: flex;
-  flex: 1;
+  flex: 1 1 160px;
   align-items: center;
   gap: var(--space-12);
-  min-width: 0;
+  min-width: 160px;
   margin: 0;
   font-size: var(--type-label-size);
   font-weight: 500;
   line-height: var(--type-label-line);
 }
 
+.rds-savingbar__text {
+  display: -webkit-box;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
 .rds-savingbar__icon {
   display: inline-flex;
   flex: none;
@@ -8435,10 +8463,27 @@ input:focus-visible + .rds-radio__circle {
 
 .rds-savingbar__actions {
   display: flex;
-  flex-wrap: wrap;
+  flex: none;
   gap: var(--space-8);
 }
 
+@container (max-width: 1023px) {
+  .rds-savingbar__row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .rds-savingbar__message {
+    flex: none;
+    min-width: 0;
+  }
+
+  .rds-savingbar__actions > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+
 @media (forced-colors: active) {
   .rds-savingbar {
     border-top: var(--border-width) solid CanvasText;
@@ -8806,7 +8851,9 @@ input:focus-visible + .rds-radio__circle {
 /*
  * Sidebar (Navigation collection, sidebar/*): 240 wide (64 collapsed), 12 × 8 inside, a 1px border on the right.
  * Header: the brand mark (24) and the module (16/24 medium), 10 apart, 44 tall. Entries of 44, 12 inside, 12 between
- * icon (20) and label (14/20 medium), 4 apart; the current one on the brand tint with the label in colors/primary.
+ * icon (20) and label (14/20 medium), 4 apart; the current one on the brand tint, its label semibold in
+ * sidebar/item/label/active and a 3 × 20 marker on the left in sidebar/item/indicator, so the current entry does not
+ * rest on colour alone.
  * Section labels 11/14 bold, 16 above and 6 below, with a 14 chevron. Foot: who is signed in (12/16) and Sair.
  * dark (deprecated in the Figma) reads sidebar/dark/*; the current entry stays the light pill.
  */
@@ -8911,6 +8958,7 @@ input:focus-visible + .rds-radio__circle {
 }
 
 .rds-sidebar__item {
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -8970,8 +9018,21 @@ input:focus-visible + .rds-radio__circle {
   color: var(--sidebar-item-label-active);
 }
 
-.rds-sidebar__item[aria-current='page'] .rds-sidebar__count {
-  color: var(--sidebar-item-label-active);
+.rds-sidebar__item[aria-current='page'] .rds-sidebar__label {
+  font-weight: 600;
+}
+
+/* Figma .sidebar/item state=active: the marker, 3 × 20, on the left edge, vertically centred, radius 2. */
+.rds-sidebar__item[aria-current='page']::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 50%;
+  width: 3px;
+  height: var(--size-20);
+  border-radius: 2px;
+  background: var(--sidebar-item-indicator);
+  transform: translateY(-50%);
 }
 
 .rds-sidebar__item:focus-visible,
@@ -9040,6 +9101,10 @@ input:focus-visible + .rds-radio__circle {
   .rds-sidebar__item[aria-current='page'] {
     outline: var(--border-width) solid CanvasText;
   }
+
+  .rds-sidebar__item[aria-current='page']::before {
+    background: Highlight;
+  }
 }
 
 /* components/skeleton.css */

package/styles/rds/components.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/build-rds-tokens.ts from tokens/figma/*.txt. Do not edit. */
 @layer rds.tokens {
-:root, .ds-scope, .dark, .ds-plate {
+:root, .ds-scope, [data-rds-scope], .dark, [data-rds-mode], .ds-plate, [data-rds-plate] {
   /* actions */
   --actionbar-background: var(--colors-primary-default);
   --actionbar-divider: var(--colors-primary-light);
@@ -292,9 +292,6 @@
   --chart-tooltip-border: var(--border-default);
   --chart-label: var(--text-body);
   --chart-tooltip-title: var(--text-heading);
-  --chart-bar-hover: var(--surface-muted);
-  --chart-focus-ring: var(--focus-ring);
-  --chart-tick: var(--border-strong);
   --carousel-slide-background: var(--surface-muted);
   --carousel-dot: var(--border-strong);
   --carousel-dot-active: var(--colors-primary-default);
@@ -374,6 +371,9 @@
   --choice-card-preview-background: var(--surface-muted);
   --choice-card-preview-border: var(--border-default);
   --choice-card-preview-icon: var(--text-subtle);
+  --chart-bar-hover: var(--surface-muted);
+  --chart-focus-ring: var(--focus-ring);
+  --chart-tick: var(--border-strong);
   --choice-list-item-background-hover: var(--surface-muted);
   --choice-list-item-background-selected: var(--surface-tint-default);
   --choice-list-item-indicator: var(--colors-primary-default);
@@ -385,9 +385,10 @@
   --choice-list-item-trailing-default: var(--text-body);
   --choice-list-item-trailing-disabled: var(--text-disabled);
   --choice-list-focus-ring: var(--focus-ring);
-  --choice-list-item-description-selected: var(--text-on-tint);
   --heading-default: var(--text-heading);
   --heading-accent: var(--colors-accent-default);
+  --choice-list-item-description-selected: var(--text-on-tint);
+  --card-tint-title: var(--text-on-tint);
 
   /* external */
   --google-button-light-background: #ffffff;
@@ -939,7 +940,7 @@
   --sidebar-item-background-active: var(--surface-tint-default);
   --sidebar-item-label-default: var(--text-muted);
   --sidebar-item-label-hover: var(--text-body);
-  --sidebar-item-label-active: var(--colors-primary-default);
+  --sidebar-item-label-active: var(--text-on-tint);
   --sidebar-module: var(--text-heading);
   --sidebar-user: var(--text-muted);
   --pagination-focus-ring: var(--focus-ring);
@@ -977,6 +978,7 @@
   --tabs-dot-indicator: var(--colors-state-success);
   --sidebar-section-label: var(--text-subtle);
   --sidebar-dark-section-label: var(--text-on-primary);
+  --sidebar-item-indicator: var(--colors-primary-default);
 
   /* overlays */
   --menu-background: var(--surface-card);

package/styles/rds/foundation.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/build-rds-tokens.ts from ds-core/figma/foundation.txt. Do not edit. */
 @layer rds.tokens {
-:root, .ds-scope, .dark, .ds-plate {
+:root, .ds-scope, [data-rds-scope], .dark, [data-rds-mode], .ds-plate, [data-rds-plate] {
   --radius-large: 12px;
   --radius-small: 8px;
   --radius-full: 9999px;

package/styles/rds/theme.css

@@ -1,13 +1,13 @@
-/* GENERATED by scripts/build-rds-tokens.ts from ds-core/figma/theme.txt. Do not edit. */
+/* GENERATED by scripts/build-rds-tokens.ts from ds-core/figma/brands/rojao.rds.json (the Figma [RDS] brand table, figma/export-brand.js). Do not edit. */
 @layer rds.theme {
-:root, .ds-scope {
+:root, .ds-scope, [data-rds-scope] {
   --colors-primary-light: #6b7488;
   --colors-primary-default: #1b2a4a;
   --colors-primary-dark: #1b2a4a;
   --colors-secondary-light: #6b7488;
   --colors-secondary-default: #1b2a4a;
   --colors-secondary-active: #26344f;
-  --colors-accent-highlight: #ffca96;
+  --colors-accent-highlight: #ffe2c6;
   --colors-accent-default: #ff6a00;
   --colors-accent-hover: #ff9640;
   --colors-accent-invert: #ffffff;
@@ -18,15 +18,15 @@
   --surface-card: #ffffff;
   --surface-panel: #fafafa;
   --border-default: #e4e4e7;
-  --surface-tint-default: #ffca96;
+  --surface-tint-default: #e2f0ff;
   --text-on-action-tonal: #3a465f;
   --text-on-primary: #ffffff;
   --text-on-secondary: #ffffff;
-  --text-on-accent: #000000;
-  --text-on-tint: #000000;
+  --text-on-accent: #1b2a4a;
+  --text-on-tint: #1b2a4a;
   --colors-state-error: #c50003;
   --colors-state-error-strong: #6f0000;
-  --surface-tint-strong: #ffb066;
+  --surface-tint-strong: #bddeff;
   --text-on-error: #ffffff;
   --surface-action-default: #e2f0ff;
   --surface-action-strong: #bddeff;
@@ -52,8 +52,8 @@
   --colors-state-success: #4caf50;
   --text-on-success: #000000;
   --colors-state-success-strong: #0a7e1c;
-  --surface-cover: #ff6a00;
-  --text-on-cover: #000000;
+  --surface-cover: #00518d;
+  --text-on-cover: #ffffff;
   --text-subtle: #52525b;
   --surface-muted: #f4f4f5;
   --surface-error: #ffe8e5;
@@ -65,7 +65,7 @@
   --border-strong: #71717a;
   --border-strong-hover: #52525b;
   --colors-state-info: #2196f3;
-  --text-on-info: #000000;
+  --text-on-info: #ffffff;
   --colors-state-warning: #ff9800;
   --colors-state-warning-strong: #dc7f00;
   --text-on-warning: #000000;
@@ -84,8 +84,8 @@
   --chart-series-3: #009688;
   --chart-series-4: #bc4ad0;
   --chart-series-5: #379c3d;
-  --colors-accent-mark: #ff9640;
-  --text-on-accent-mark: #000000;
+  --colors-accent-mark: #006bb5;
+  --text-on-accent-mark: #ffffff;
   --type-font-mono: "Roboto Mono", monospace;
   --surface-scrim: #00000080;
   --shadow-ambient: #0000000d;
@@ -103,16 +103,20 @@
   --colors-state-info-strong: #2196f3;
   --colors-state-neutral-strong: #52525b;
   --text-on-primary-subtle: #ffffff4d;
-  --surface-tint-subtle: #ffe2c6;
+  --surface-tint-subtle: #f4f6f9;
+  --rojao-primary: #1b2a4a;
+  --rojao-secondary: #1b2a4a;
+  --rojao-accent: #ff6a00;
+  --rojao-invert: #ffffff;
 }
 
-:root.dark, .dark, .ds-scope.dark, .dark .ds-scope {
+:root.dark, .dark, :root[data-rds-mode="dark"], [data-rds-mode="dark"], .ds-scope.dark, .dark .ds-scope, .ds-scope[data-rds-mode="dark"], [data-rds-mode="dark"] .ds-scope, [data-rds-scope].dark, .dark [data-rds-scope], [data-rds-scope][data-rds-mode="dark"], [data-rds-mode="dark"] [data-rds-scope] {
   --colors-primary-light: #8a91a1;
   --colors-primary-default: #c9cdd8;
   --colors-primary-dark: #e4e6ec;
-  --colors-secondary-default: #8a91a1;
-  --colors-secondary-active: #c9cdd8;
-  --colors-accent-highlight: #d95a00;
+  --colors-secondary-default: #8cc6ff;
+  --colors-secondary-active: #44a7ff;
+  --colors-accent-highlight: #3a465f;
   --colors-accent-default: #ffb066;
   --colors-accent-hover: #ffca96;
   --text-heading: #fafafa;
@@ -122,13 +126,14 @@
   --surface-card: #18181b;
   --surface-panel: #18181b;
   --border-default: #27272a;
-  --surface-tint-default: #b34b00;
+  --surface-tint-default: #003966;
   --text-on-action-tonal: #c9cdd8;
-  --text-on-primary: #000000;
-  --text-on-secondary: #000000;
+  --text-on-primary: #1b2a4a;
+  --text-on-secondary: #1b2a4a;
+  --text-on-accent: #000000;
   --text-on-tint: #ffffff;
   --colors-state-error-strong: #ff6c5c;
-  --surface-tint-strong: #d95a00;
+  --surface-tint-strong: #00518d;
   --surface-action-default: #002445;
   --surface-action-strong: #003966;
   --focus-ring: #f4f4f5;
@@ -142,7 +147,7 @@
   --text-on-lift-action: #ffffff;
   --surface-lift-action-strong: #3a465f;
   --text-on-primary-strong: #000000;
-  --colors-secondary-hover: #aeb6c4;
+  --colors-secondary-hover: #bddeff;
   --colors-state-success-strong: #82d982;
   --text-subtle: #a1a1aa;
   --surface-muted: #27272a;
@@ -166,7 +171,8 @@
   --chart-series-3: #45b7a8;
   --chart-series-4: #db6def;
   --chart-series-5: #4caf50;
-  --colors-accent-mark: #ffb066;
+  --colors-accent-mark: #8cc6ff;
+  --text-on-accent-mark: #000000;
   --surface-scrim: #000000b3;
   --shadow-ambient: #00000033;
   --shadow-key: #00000066;
@@ -179,30 +185,31 @@
   --colors-state-info-strong: #8cc6ff;
   --colors-state-neutral-strong: #a1a1aa;
   --text-on-primary-subtle: #0000004d;
-  --surface-tint-subtle: #b34b00;
+  --surface-tint-subtle: #002445;
 }
 
-.ds-plate {
+.ds-plate, [data-rds-plate] {
   --colors-primary-light: #aeb6c4;
   --colors-primary-default: #ffffff;
   --colors-primary-dark: #e4e6ec;
   --colors-secondary-light: #aeb6c4;
   --colors-secondary-default: #ffffff;
   --colors-secondary-active: #c9cdd8;
-  --colors-accent-highlight: #d95a00;
+  --colors-accent-highlight: #3a465f;
   --colors-accent-default: #ffb066;
   --colors-accent-hover: #ffca96;
   --text-heading: #ffffff;
   --text-body: #ffffff;
   --text-link: #ffffff;
   --surface-page: #1b2a4a;
-  --surface-card: #6b7488;
+  --surface-card: #26344f;
   --surface-panel: #1b2a4a;
   --border-default: #ffffff33;
   --surface-tint-default: #ffffff1a;
   --text-on-action-tonal: #ffffff;
   --text-on-primary: #1b2a4a;
   --text-on-secondary: #1b2a4a;
+  --text-on-accent: #000000;
   --text-on-tint: #ffffff;
   --colors-state-error-strong: #ff6c5c;
   --surface-tint-strong: #ffffff33;
@@ -244,7 +251,8 @@
   --chart-series-3: #45b7a8;
   --chart-series-4: #db6def;
   --chart-series-5: #4caf50;
-  --colors-accent-mark: #ffb066;
+  --colors-accent-mark: #8cc6ff;
+  --text-on-accent-mark: #000000;
   --surface-scrim: #000000b3;
   --shadow-ambient: #00000033;
   --shadow-key: #00000066;

package/styles/rds.css

@@ -1,5 +1,5 @@
 /* GENERATED by scripts/build-rds-tokens.ts. Import once: @import "@rojaostudio/ds/styles/rds.css". */
-@layer rds.theme, rds.tokens, rds.components;
+@layer rds.legacy, rds.theme, rds.tokens, rds.components;
 @import "./rds/theme.css";
 @import "./rds/foundation.css";
 @import "./rds/components.css";