@rojaostudio/ds 2.0.0-next.4 → 2.0.0-next.6

package/dist/components/chart.js

@@ -235,20 +235,24 @@ function Chart(_a) {
               return /* @__PURE__ */ jsx(TableCell, { align: "end", children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
             })
           ] }, name)) })
-        ] }) : /* @__PURE__ */ jsxs("table", { className: "rds-visually-hidden", children: [
-          /* @__PURE__ */ jsx("caption", { children: label }),
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { scope: "col", children: firstColumn }),
-            shown.map((s) => /* @__PURE__ */ jsx("th", { scope: "col", children: legendName(s) }, s.name))
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: labels.map((name, i) => /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { scope: "row", children: name }),
-            shown.map((s) => {
-              var _a3;
-              return /* @__PURE__ */ jsx("td", { children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
-            })
-          ] }, name)) })
-        ] })
+        ] }) : (
+          // The clip goes on a wrapper: a <table> ignores the 1px box and overflow of .rds-visually-hidden, so it
+          // kept its full size, anchored to the page and stretched the page scroll.
+          /* @__PURE__ */ jsx("div", { className: "rds-visually-hidden", children: /* @__PURE__ */ jsxs("table", { children: [
+            /* @__PURE__ */ jsx("caption", { children: label }),
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "col", children: firstColumn }),
+              shown.map((s) => /* @__PURE__ */ jsx("th", { scope: "col", children: legendName(s) }, s.name))
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: labels.map((name, i) => /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "row", children: name }),
+              shown.map((s) => {
+                var _a3;
+                return /* @__PURE__ */ jsx("td", { children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
+              })
+            ] }, name)) })
+          ] }) })
+        )
       ]
     })
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.4",
+  "version": "2.0.0-next.6",
   "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.1"
+    "@rojaostudio/ds-core": "1.1.0-next.2"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",

package/styles/rds/components-styles.css

@@ -1992,6 +1992,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);