@12-apps/ui 1.21.1 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "1.21.1",
+  "version": "1.22.0",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",

package/src/components/data-display/Chart/Chart.md

@@ -67,6 +67,28 @@ import { Chart } from '@procurement/ui';
 - `curved` (boolean): Use curved lines for line/area charts (default: true)
 - `stacked` (boolean): Stack data series for bar/area charts
 - `showValues` (boolean): Display data values on chart
+- `valueFormatter` (function): Formats tooltip values and value-axis ticks
+- `allowDecimalTicks` (boolean): Allow half-steps on the value axis (default: true; set
+  false for a COUNT metric, or the axis repeats itself — `0, 1, 1, 2, 2`)
+
+### Axis & bar geometry
+
+Defaults that hold the chart to the visual-pass rules; every one is opt-out.
+
+- `maxCategoryTicks` (number): Cap on drawn category labels (default: 8). Above it every
+  nth label is kept and **the last one always is** — Recharts' own width-aware thinning
+  then runs on top, so a narrow viewport drops more. Full values stay in the tooltip.
+- `tickLabelMaxChars` (number): Category labels longer than this are truncated with an
+  ellipsis (default: 12)
+- `barRadius` (number): Bar corner radius in px, top corners only (default: 3). Stacked
+  segments stay square — a rounded top notches into the segment above it.
+- `maxBarWidth` (number): Cap on a bar's thickness in px (default: 38). It is also what
+  keeps the first and last bar clear of the chart frame in a wide card.
+
+Tick labels are laid out with a size-derived `tickMargin` (10–18px) rather than
+Recharts' default of 2. The bottom value tick is centred ON the x-axis line, so its box
+reaches below it; at the default margin it collides with the first category label at the
+axis corner, at every viewport.
 
 ### Display Options
 

package/src/components/data-display/Chart/Chart.types.ts

@@ -63,5 +63,31 @@ export interface ChartProps {
   centerLabel?: string | { label: string; value: string | number };
   /** Formats numeric tooltip values and y-axis ticks (e.g. centavos → BRL). */
   valueFormatter?: (value: number) => string;
+  /**
+   * Whether the value axis may place ticks between whole numbers. Default true.
+   *
+   * Set it false for a metric that only takes whole values — a COUNT. Recharts
+   * spaces ticks evenly across the domain, so a count topping out at 2 gets
+   * 0/0.5/1/1.5/2; an integer `valueFormatter` then renders that as
+   * `0, 1, 1, 2, 2`, and the axis reads as though it repeats itself (FUT-755).
+   * Formatting alone cannot fix it — the duplicate ticks are already chosen by
+   * the time the formatter runs.
+   */
+  allowDecimalTicks?: boolean;
+  /**
+   * Cap on how many category-axis labels are drawn. Default 8; above it every
+   * nth label is kept, the LAST one always among them. Recharts' own
+   * width-aware thinning still runs on top, so a narrow viewport drops more.
+   */
+  maxCategoryTicks?: number;
+  /** Category tick labels longer than this are truncated with an ellipsis. Default 12. */
+  tickLabelMaxChars?: number;
+  /** Bar corner radius in px (top corners only; stacked segments stay square). Default 3. */
+  barRadius?: number;
+  /**
+   * Cap on a single bar's thickness in px. Default 38 — it is also what keeps
+   * the first and last bar clear of the chart frame in a wide card.
+   */
+  maxBarWidth?: number;
   'data-testid'?: string;
 }

package/src/components/data-display/Chart/chart-axis.ts

@@ -0,0 +1,118 @@
+import type { ChartDataPoint, ChartProps } from './Chart.types';
+
+/**
+ * Cartesian axis + bar geometry: the rules that keep a chart readable rather
+ * than merely correct (FUT-391 visual pass).
+ *
+ * Three of them are pass/fail by looking at the rendered chart:
+ *
+ * - **No overlapping text.** The bottom value tick sits ON the x-axis line and
+ *   the first category tick sits ON the y-axis line, so the two labels meet at
+ *   the corner. Recharts' default `tickMargin` of 2 leaves the category label's
+ *   cap height inside the value label's descender — a few px of overlap at
+ *   every viewport. The margin has to clear the value label's box, which grows
+ *   with the font, hence a per-size value ({@link SIZE_PRESETS}).
+ * - **Skip every nth tick, always keep the last, truncate at ~12 chars.** With
+ *   more categories than fit, Recharts thins them only when it can measure text
+ *   (never server-side, where `getStringSize` returns 0 and every label renders
+ *   on top of its neighbour). Thinning here is deterministic and viewport-free.
+ * - **Bars rounded, capped, never touching the frame.** A two-category bar
+ *   chart in a wide card draws 150px slabs flush against the axis; the cap is
+ *   what turns them back into bars.
+ */
+
+/** Category ticks kept before thinning starts. */
+const DEFAULT_MAX_CATEGORY_TICKS = 8;
+/** Category tick labels longer than this are truncated with an ellipsis. */
+const DEFAULT_TICK_LABEL_MAX_CHARS = 12;
+/** Bar corner radius, px. */
+const DEFAULT_BAR_RADIUS = 3;
+/** Cap on a single bar's thickness, px. */
+const DEFAULT_MAX_BAR_WIDTH = 38;
+
+/**
+ * Thin a category axis to at most `maxTicks` labels, keeping every nth.
+ *
+ * The walk runs from the END so the last category is always labelled — the
+ * most recent day/bucket is the one a reader looks for first. Returns
+ * `undefined` when everything already fits, which leaves Recharts' own
+ * width-aware thinning in charge of the common small-data case.
+ *
+ * Also `undefined` when a value repeats: Recharts places an explicit tick by
+ * looking its value up in the scale, so a duplicate would land the label on
+ * the first row that carries it rather than on the row it was picked for.
+ */
+export function selectCategoryTicks(
+  values: ReadonlyArray<string | number>,
+  maxTicks: number,
+): Array<string | number> | undefined {
+  if (maxTicks < 1 || values.length <= maxTicks) return undefined;
+  if (new Set(values).size !== values.length) return undefined;
+  const step = Math.ceil(values.length / maxTicks);
+  const kept: Array<string | number> = [];
+  for (let index = values.length - 1; index >= 0; index -= step) {
+    const value = values[index];
+    if (value !== undefined) kept.push(value);
+  }
+  return kept.reverse();
+}
+
+/** The category-axis values of `data`, in row order, skipping empty cells. */
+export function categoryValues(
+  data: ReadonlyArray<ChartDataPoint>,
+  xAxisKey: string,
+): Array<string | number> {
+  const values: Array<string | number> = [];
+  for (const row of data) {
+    const value = row[xAxisKey];
+    if (value !== null && value !== undefined) values.push(value);
+  }
+  return values;
+}
+
+/** Shorten a tick label to `maxChars`, ellipsis included, never mid-render. */
+export function truncateTickLabel(value: unknown, maxChars: number): string {
+  const text = value === null || value === undefined ? '' : String(value);
+  if (maxChars < 1 || text.length <= maxChars) return text;
+  return `${text.slice(0, maxChars - 1)}…`;
+}
+
+/** Resolved geometry for the shared cartesian axes. */
+export interface CartesianAxisConfig {
+  /** Gap between an axis line and its tick labels, px. */
+  tickMargin: number;
+  /** Explicit category ticks once thinning applies; `undefined` = Recharts decides. */
+  categoryTicks: Array<string | number> | undefined;
+  /** Category tick label formatter (truncation). */
+  tickFormatter: (value: unknown) => string;
+}
+
+/** Resolved geometry for bar series. */
+export interface BarGeometry {
+  /** Per-corner radius, top corners only; `0` for stacked segments. */
+  radius: number | [number, number, number, number];
+  /** Cap on a bar's thickness, px — also what keeps bars off the frame. */
+  maxBarSize: number;
+}
+
+export function resolveAxisConfig(props: ChartProps, tickMargin: number): CartesianAxisConfig {
+  const maxChars = props.tickLabelMaxChars ?? DEFAULT_TICK_LABEL_MAX_CHARS;
+  return {
+    tickMargin,
+    categoryTicks: selectCategoryTicks(
+      categoryValues(props.data, props.xAxisKey ?? 'name'),
+      props.maxCategoryTicks ?? DEFAULT_MAX_CATEGORY_TICKS,
+    ),
+    tickFormatter: (value: unknown) => truncateTickLabel(value, maxChars),
+  };
+}
+
+export function resolveBarGeometry(props: ChartProps): BarGeometry {
+  const radius = props.barRadius ?? DEFAULT_BAR_RADIUS;
+  return {
+    // A stacked segment rounded on its top corners tears a notch out of the
+    // segment above it, so stacks stay square.
+    radius: props.stacked ? 0 : [radius, radius, 0, 0],
+    maxBarSize: props.maxBarWidth ?? DEFAULT_MAX_BAR_WIDTH,
+  };
+}

package/src/components/data-display/Chart/chart-context.ts

@@ -0,0 +1,75 @@
+import type { Theme } from '@mui/material';
+import type { CSSProperties } from 'react';
+
+import type { ChartDataPoint, ChartProps, ChartSeries } from './Chart.types';
+import { resolveAxisConfig, resolveBarGeometry, type BarGeometry, type CartesianAxisConfig } from './chart-axis';
+import {
+  getAxisStyles,
+  getDefaultColors,
+  getSizeStyles,
+  resolveSeries,
+  type SizeStyles,
+} from './chart-internals';
+
+/**
+ * Everything the per-type renderers in `chart-renderers.tsx` read, resolved
+ * once from props + theme. Kept out of that file so each renderer is a small
+ * JSX function over already-decided values — palette, series, axis geometry,
+ * bar geometry — rather than a place where those decisions get made again
+ * slightly differently.
+ */
+export interface ChartRenderContext {
+  props: ChartProps;
+  theme: Theme;
+  sizeStyles: SizeStyles;
+  chartColors: string[];
+  chartSeries: ChartSeries[];
+  strokeType: 'monotone' | 'linear';
+  axisStyle: CSSProperties;
+  gridStroke: string;
+  /** Multiplier on `gridStroke`'s alpha — see `getAxisStyles`. */
+  gridOpacity: number;
+  axisConfig: CartesianAxisConfig;
+  barGeometry: BarGeometry;
+  animationDuration: number;
+  commonProps: {
+    data: ChartDataPoint[];
+    margin: { top?: number; right?: number; bottom?: number; left?: number };
+    onClick: (payload: unknown) => void;
+  };
+}
+
+export function buildChartContext(props: ChartProps, theme: Theme): ChartRenderContext {
+  const sizeStyles = getSizeStyles(props.size, props.height);
+  const chartColors = getDefaultColors(theme, props.variant ?? 'default', props.colors);
+  const { axisStyle, gridStroke, gridOpacity } = getAxisStyles(
+    theme,
+    props.variant ?? 'default',
+    sizeStyles.fontSize,
+  );
+  const handleChartClick = (payload: unknown): void => {
+    const chartData = payload as { activePayload?: Array<{ payload: ChartDataPoint }> };
+    if (props.onClick && chartData?.activePayload?.[0]) {
+      props.onClick(chartData.activePayload[0].payload);
+    }
+  };
+  return {
+    props,
+    theme,
+    sizeStyles,
+    chartColors,
+    chartSeries: resolveSeries(props.data, props.series, props.xAxisKey ?? 'name', chartColors),
+    strokeType: (props.curved ?? true) ? 'monotone' : 'linear',
+    axisStyle: { ...axisStyle, fontSize: sizeStyles.fontSize },
+    gridStroke,
+    gridOpacity,
+    axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),
+    barGeometry: resolveBarGeometry(props),
+    animationDuration: (props.animate ?? true) ? (props.animationDuration ?? 1500) : 0,
+    commonProps: {
+      data: props.data,
+      margin: { top: 20, right: 30, left: 20, bottom: 20, ...props.margin },
+      onClick: handleChartClick,
+    },
+  };
+}

package/src/components/data-display/Chart/chart-internals.ts

@@ -12,19 +12,29 @@ import type { ChartProps, ChartSeries } from './Chart.types';
 export interface SizeStyles {
   height: number;
   fontSize: string;
+  /**
+   * Gap between an axis line and its tick labels, px.
+   *
+   * Recharts' default of 2 is not enough. The bottom VALUE tick is centred on
+   * the x-axis line, so its text box reaches ~0.79em BELOW that line, while
+   * the category labels begin 2px under the 6px tick mark — the two collide at
+   * the axis corner, at every viewport. Each value below is ~0.8em of its own
+   * font size, which clears the value label's descender with ~6px to spare.
+   */
+  tickMargin: number;
 }
 
 const SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizeStyles> = {
-  xs: { height: 200, fontSize: '0.75rem' },
-  sm: { height: 300, fontSize: '0.875rem' },
-  md: { height: 400, fontSize: '1rem' },
-  lg: { height: 500, fontSize: '1.125rem' },
-  xl: { height: 600, fontSize: '1.25rem' },
+  xs: { height: 200, fontSize: '0.75rem', tickMargin: 10 },
+  sm: { height: 300, fontSize: '0.875rem', tickMargin: 12 },
+  md: { height: 400, fontSize: '1rem', tickMargin: 14 },
+  lg: { height: 500, fontSize: '1.125rem', tickMargin: 16 },
+  xl: { height: 600, fontSize: '1.25rem', tickMargin: 18 },
 };
 
 export function getSizeStyles(size: ChartProps['size'], height?: number): SizeStyles {
   const preset = SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;
-  return { height: height ?? preset.height, fontSize: preset.fontSize };
+  return { ...preset, height: height ?? preset.height };
 }
 
 const NEON_PALETTE = ['#00ffff', '#ff00ff', '#ffff00', '#00ff00', '#ff0080', '#8000ff'];
@@ -135,14 +145,28 @@ export function resolveSeries(
 interface AxisTextStyles {
   axisStyle: CSSProperties;
   gridStroke: string;
+  /**
+   * Multiplier applied to `gridStroke`'s own alpha. Gridlines must read one
+   * step BELOW the card border — the border is `divider`, so half of it —
+   * without being dashed at data weight. Expressing the step as an opacity
+   * rather than a second colour keeps it derived from the theme's divider
+   * whatever form that takes (rgba, hex, or a CSS variable, which the colour
+   * helpers cannot decompose).
+   */
+  gridOpacity: number;
 }
 
 export function getAxisStyles(theme: Theme, variant: ChartProps['variant'], fontSize: string): AxisTextStyles {
+  const neon = variant === 'neon';
   return {
     axisStyle: {
       fontSize,
-      fill: variant === 'neon' ? '#00ffff' : theme.palette.text.secondary,
+      fill: neon ? '#00ffff' : theme.palette.text.secondary,
+      // Ticks are columns of digits: they have to line up between rows.
+      fontVariantNumeric: 'tabular-nums',
     },
-    gridStroke: variant === 'neon' ? alpha('#00ffff', 0.1) : theme.palette.divider,
+    gridStroke: neon ? alpha('#00ffff', 0.1) : theme.palette.divider,
+    // The neon grid is already a 10%-alpha cyan; halving it again would erase it.
+    gridOpacity: neon ? 1 : 0.5,
   };
 }

package/src/components/data-display/Chart/chart-renderers.tsx

@@ -25,15 +25,9 @@ import {
   YAxis,
 } from 'recharts';
 
-import type { ChartDataPoint, ChartProps, ChartSeries } from './Chart.types';
+import type { ChartProps, ChartSeries } from './Chart.types';
 import { ChartLegendContent, ChartTooltipContent } from './ChartComposables';
-import {
-  getAxisStyles,
-  getDefaultColors,
-  getSizeStyles,
-  resolveSeries,
-  type SizeStyles,
-} from './chart-internals';
+import { buildChartContext, type ChartRenderContext } from './chart-context';
 
 /**
  * Per-type Recharts renderers for the prop-driven Chart, dispatched from a
@@ -41,23 +35,6 @@ import {
  * {@link ChartRenderContext} so every function stays small.
  */
 
-interface ChartRenderContext {
-  props: ChartProps;
-  theme: Theme;
-  sizeStyles: SizeStyles;
-  chartColors: string[];
-  chartSeries: ChartSeries[];
-  strokeType: 'monotone' | 'linear';
-  axisStyle: React.CSSProperties;
-  gridStroke: string;
-  animationDuration: number;
-  commonProps: {
-    data: ChartDataPoint[];
-    margin: { top?: number; right?: number; bottom?: number; left?: number };
-    onClick: (payload: unknown) => void;
-  };
-}
-
 function chartExtras(ctx: ChartRenderContext): React.ReactNode[] {
   const { props } = ctx;
   const nodes: React.ReactNode[] = [];
@@ -72,15 +49,40 @@ function chartExtras(ctx: ChartRenderContext): React.ReactNode[] {
   return nodes;
 }
 
+/**
+ * Gridlines: solid, and one step below the card border. A dashed line at the
+ * border's own weight competes with the data drawn over it.
+ */
+function chartGrid(ctx: ChartRenderContext): React.ReactElement {
+  return <CartesianGrid key="grid" stroke={ctx.gridStroke} strokeOpacity={ctx.gridOpacity} />;
+}
+
 function cartesianAxes(ctx: ChartRenderContext): React.ReactNode[] {
-  const { props } = ctx;
+  const { props, axisConfig } = ctx;
   const nodes: React.ReactNode[] = [];
-  if (props.showCartesianGrid !== false) {
-    nodes.push(<CartesianGrid key="grid" strokeDasharray="3 3" stroke={ctx.gridStroke} />);
-  }
+  if (props.showCartesianGrid !== false) nodes.push(chartGrid(ctx));
   nodes.push(
-    <XAxis key="x" dataKey={props.xAxisKey ?? 'name'} style={ctx.axisStyle} label={props.xAxisLabel} />,
-    <YAxis key="y" style={ctx.axisStyle} label={props.yAxisLabel} tickFormatter={props.valueFormatter} />,
+    <XAxis
+      key="x"
+      dataKey={props.xAxisKey ?? 'name'}
+      style={ctx.axisStyle}
+      label={props.xAxisLabel}
+      tickMargin={axisConfig.tickMargin}
+      ticks={axisConfig.categoryTicks}
+      tickFormatter={axisConfig.tickFormatter}
+    />,
+    <YAxis
+      key="y"
+      style={ctx.axisStyle}
+      label={props.yAxisLabel}
+      // Sized from its own widest tick: a fixed 60px lets "R$ 1.234,56" spill
+      // out of the card, which is the other way axis text ends up on top of
+      // something.
+      width="auto"
+      tickMargin={axisConfig.tickMargin}
+      tickFormatter={props.valueFormatter}
+      allowDecimals={props.allowDecimalTicks !== false}
+    />,
   );
   return nodes;
 }
@@ -119,6 +121,8 @@ function renderBar(ctx: ChartRenderContext): React.ReactElement {
           name={s.name}
           fill={s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length]}
           stackId={ctx.props.stacked ? 'stack' : undefined}
+          radius={ctx.barGeometry.radius}
+          maxBarSize={ctx.barGeometry.maxBarSize}
           animationDuration={ctx.animationDuration}
         />
       ))}
@@ -233,11 +237,19 @@ function renderScatter(ctx: ChartRenderContext): React.ReactElement {
   const { props } = ctx;
   return (
     <ScatterChart {...ctx.commonProps}>
-      {props.showCartesianGrid !== false && (
-        <CartesianGrid strokeDasharray="3 3" stroke={ctx.gridStroke} />
-      )}
-      <XAxis dataKey={props.xAxisKey ?? 'name'} style={ctx.axisStyle} label={props.xAxisLabel} />
-      <YAxis dataKey={ctx.chartSeries[0]?.dataKey} style={ctx.axisStyle} label={props.yAxisLabel} />
+      {props.showCartesianGrid !== false && chartGrid(ctx)}
+      <XAxis
+        dataKey={props.xAxisKey ?? 'name'}
+        style={ctx.axisStyle}
+        label={props.xAxisLabel}
+        tickMargin={ctx.axisConfig.tickMargin}
+      />
+      <YAxis
+        dataKey={ctx.chartSeries[0]?.dataKey}
+        style={ctx.axisStyle}
+        label={props.yAxisLabel}
+        tickMargin={ctx.axisConfig.tickMargin}
+      />
       {chartExtras(ctx)}
       <Scatter
         name={ctx.chartSeries[0]?.name ?? 'Data'}
@@ -253,7 +265,15 @@ function composedSeries(ctx: ChartRenderContext, s: ChartSeries, index: number):
   const color = s.color ?? ctx.chartColors[index % ctx.chartColors.length];
   if (s.type === 'bar') {
     return (
-      <Bar key={s.dataKey} dataKey={s.dataKey} name={s.name} fill={color} animationDuration={ctx.animationDuration} />
+      <Bar
+        key={s.dataKey}
+        dataKey={s.dataKey}
+        name={s.name}
+        fill={color}
+        radius={ctx.barGeometry.radius}
+        maxBarSize={ctx.barGeometry.maxBarSize}
+        animationDuration={ctx.animationDuration}
+      />
     );
   }
   if (s.type === 'area') {
@@ -302,37 +322,9 @@ const RENDERERS: Record<string, (ctx: ChartRenderContext) => React.ReactElement>
   composed: renderComposed,
 };
 
-function buildContext(props: ChartProps, theme: Theme): ChartRenderContext {
-  const sizeStyles = getSizeStyles(props.size, props.height);
-  const chartColors = getDefaultColors(theme, props.variant ?? 'default', props.colors);
-  const { axisStyle, gridStroke } = getAxisStyles(theme, props.variant ?? 'default', sizeStyles.fontSize);
-  const handleChartClick = (payload: unknown): void => {
-    const chartData = payload as { activePayload?: Array<{ payload: ChartDataPoint }> };
-    if (props.onClick && chartData?.activePayload?.[0]) {
-      props.onClick(chartData.activePayload[0].payload);
-    }
-  };
-  return {
-    props,
-    theme,
-    sizeStyles,
-    chartColors,
-    chartSeries: resolveSeries(props.data, props.series, props.xAxisKey ?? 'name', chartColors),
-    strokeType: (props.curved ?? true) ? 'monotone' : 'linear',
-    axisStyle: { ...axisStyle, fontSize: sizeStyles.fontSize },
-    gridStroke,
-    animationDuration: (props.animate ?? true) ? (props.animationDuration ?? 1500) : 0,
-    commonProps: {
-      data: props.data,
-      margin: { top: 20, right: 30, left: 20, bottom: 20, ...props.margin },
-      onClick: handleChartClick,
-    },
-  };
-}
-
 /** Render the Recharts element for the requested chart type. */
 export function renderChartByType(props: ChartProps, theme: Theme): React.ReactElement {
   const renderer = RENDERERS[props.type ?? 'line'];
-  const ctx = buildContext(props, theme);
+  const ctx = buildChartContext(props, theme);
   return renderer ? renderer(ctx) : <></>;
 }

package/src/components/data-display/Chart/chart-spec.ts

@@ -166,6 +166,9 @@ export function specToChartProps(
     showTooltip: spec.tooltip ?? true,
     height: spec.height,
     valueFormatter: chartValueFormatter(spec.numberFormat),
+    // An integer metric is a COUNT: half a row does not exist, so the axis must
+    // not offer half-steps it would then round into duplicates (FUT-755).
+    allowDecimalTicks: spec.numberFormat !== 'integer',
     ...renderer(spec, ctx),
   };
 }

package/src/components/data-display/Table/Table.styles.ts

@@ -51,6 +51,27 @@ const getStripeColorFromTheme = (theme: { palette: { primary: { main: string };
   return colorMap[stripeColor];
 };
 
+/**
+ * The zebra stripe for one body row.
+ *
+ * `neutral` — the default — resolves to `palette.action.hover`, which ALREADY
+ * carries its subtlety in its own alpha (`rgba(0,0,0,0.04)` in the light
+ * theme). MUI's `alpha()` REPLACES that channel rather than multiplying it, so
+ * re-alpha-ing it at 0.5 amplified the tint 12.5× into `rgba(0,0,0,0.5)` —
+ * solid #808080 on a white card, which reads as a selected or errored row
+ * rather than as a stripe (FUT-755). It is used as-is instead.
+ *
+ * The named colours are opaque `*.main` values with no alpha of their own, so
+ * they still need one.
+ */
+const stripeRowColor = (
+  theme: Parameters<typeof getStripeColorFromTheme>[0],
+  stripeColor: TableStripeColor = 'neutral',
+): string => {
+  const color = getStripeColorFromTheme(theme, stripeColor);
+  return stripeColor === 'neutral' ? color : alpha(color, 0.15);
+};
+
 // One variant applies at a time, so a lookup replaces the mutually exclusive
 // spreads.
 const TABLE_VARIANTS: Record<string, (args: VariantArgs) => CSSObject> = {
@@ -61,7 +82,7 @@ const TABLE_VARIANTS: Record<string, (args: VariantArgs) => CSSObject> = {
   striped: ({ theme, stripeColor }) => ({
       backgroundColor: theme.palette.background.paper,
       '& .MuiTableBody-root .MuiTableRow-root:nth-of-type(even)': {
-        backgroundColor: alpha(getStripeColorFromTheme(theme, stripeColor), stripeColor === 'neutral' ? 0.5 : 0.15) } }),
+        backgroundColor: stripeRowColor(theme, stripeColor) } }),
   glass: ({ theme }) => ({
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
       backdropFilter: 'blur(20px)',

package/src/components/form/Input/Input.tsx

@@ -86,6 +86,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onFocus,
       onBlur,
       'data-testid': dataTestId,
+      'aria-label': ariaLabel,
       ...props
     },
     ref,
@@ -105,8 +106,17 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       {...interactionProps(loading, onClick, props.disabled)}
       onFocus={onFocus}
       onBlur={onBlur}
+      /*
+       * `aria-label` has to ride `inputProps` to reach the `<input>` (FUT-755).
+       * Spread with the rest it lands on the FormControl DIV that TextField
+       * renders as its root, which carries no role — so the field itself kept
+       * no accessible name, and a source grep saying "this input is labelled"
+       * disagreed with the DOM. The reports search box and the block-title
+       * inputs were both named in source and anonymous to a screen reader.
+       */
       inputProps={{
         'data-testid': dataTestId,
+        ...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel }),
       }}
       InputProps={{
         startAdornment: startAdornment && (

package/src/components/layout/Drawer/Drawer.md

@@ -42,10 +42,17 @@ The Drawer component is perfect for:
 
 ### Styling Props
 
-| Prop        | Type      | Default | Description                      |
-| ----------- | --------- | ------- | -------------------------------- |
-| `glass`     | `boolean` | `false` | Enable glass/blur effect styling |
-| `className` | `string`  | -       | Additional CSS class names       |
+| Prop        | Type        | Default | Description                                      |
+| ----------- | ----------- | ------- | ------------------------------------------------ |
+| `glass`     | `boolean`   | `false` | Enable glass/blur effect styling                 |
+| `paperSx`   | `CSSObject` | -       | Extra styles for the sliding surface (see below) |
+| `className` | `string`    | -       | Additional CSS class names                       |
+
+`paperSx` is merged after the width/height the drawer derives from its anchor,
+onto MUI's drawer paper. A temporary drawer PORTALS that surface, so a consumer
+cannot reach it with a wrapper's descendant selector — this is how a bottom
+sheet asks for rounded top corners, or a docked panel for its own offset. Omit
+it and the drawer renders exactly as before.
 
 ## Sub-components
 

package/src/components/layout/Drawer/Drawer.tsx

@@ -36,6 +36,11 @@ const buildDrawerStyles = (
   variant: DrawerProps['variant'],
   width: DrawerProps['width'],
   height: DrawerProps['height'],
+  // Merged LAST into the surface's own rules, so a caller can shape the sliding
+  // surface itself (rounded corners on a bottom sheet, a docked panel's offset)
+  // without reaching for the MUI paper class from outside. Undefined by default:
+  // omit it and the drawer styles exactly as it always has.
+  paperSx?: DrawerProps['paperSx'],
 ) => {
   const baseStyles = {
     width: ['left', 'right'].includes(anchor) ? width : '100%',
@@ -53,6 +58,7 @@ const buildDrawerStyles = (
         backdropFilter: 'blur(20px)',
         border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
         boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+        ...paperSx,
       },
     };
   }
@@ -63,6 +69,7 @@ const buildDrawerStyles = (
       width: ['left', 'right'].includes(anchor) ? width : '100%',
       height: ['top', 'bottom'].includes(anchor) ? height : '100%',
       boxSizing: 'border-box',
+      ...paperSx,
     },
   };
 };
@@ -79,6 +86,7 @@ export const Drawer: React.FC<DrawerProps> = ({
   backdrop = true,
   hideBackdrop = false,
   keepMounted = false,
+  paperSx,
   className,
   dataTestId,
   ...rest
@@ -99,7 +107,7 @@ export const Drawer: React.FC<DrawerProps> = ({
           invisible: !backdrop,
         },
       }}
-      sx={buildDrawerStyles(theme, drawerAnchor, variant, width, height)}
+      sx={buildDrawerStyles(theme, drawerAnchor, variant, width, height, paperSx)}
       className={className}
       data-testid={dataTestId || 'drawer'}
       {...rest}
@@ -113,6 +121,7 @@ export const DrawerHeader: React.FC<DrawerHeaderProps> = ({
   children,
   onClose,
   showCloseButton = true,
+  closeLabel,
   dataTestId,
 }) => {
   const theme = useTheme();
@@ -136,7 +145,7 @@ export const DrawerHeader: React.FC<DrawerHeaderProps> = ({
         <IconButton
           onClick={onClose}
           edge="end"
-          aria-label="Close drawer"
+          aria-label={closeLabel ?? 'Close drawer'}
           data-testid={dataTestId ? `${dataTestId}-close` : 'drawer-close'}
         >
           <Close />

package/src/components/layout/Drawer/Drawer.types.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@mui/material/styles';
 import type { HTMLAttributes,ReactNode } from 'react';
 
 export type DrawerVariant = 'left' | 'right' | 'top' | 'bottom' | 'glass';
@@ -16,6 +17,16 @@ export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
   backdrop?: boolean;
   hideBackdrop?: boolean;
   keepMounted?: boolean;
+  /**
+   * Extra styles for the sliding surface itself (MUI's drawer paper), merged
+   * after the width/height the drawer derives from its anchor.
+   *
+   * Opt-in and additive: omit it and the drawer renders exactly as it always
+   * has. It exists because a temporary drawer PORTALS its surface, so a
+   * consumer cannot reach it with a wrapper's descendant selector — a bottom
+   * sheet that wants rounded top corners has no other way to ask.
+   */
+  paperSx?: CSSObject;
   className?: string;
   dataTestId?: string;
 }
@@ -24,6 +35,15 @@ export interface DrawerHeaderProps {
   children: ReactNode;
   onClose?: () => void;
   showCloseButton?: boolean;
+  /**
+   * Accessible name for the close button. Defaults to "Close drawer".
+   *
+   * A drawer that is not a drawer to its user needs to say what it closes:
+   * the report builder's block panel is a docked side panel, and "Fechar
+   * painel" is what its spec asks to hear (FUT-755). Left unset the wording is
+   * unchanged, so existing consumers asserting on the default keep passing.
+   */
+  closeLabel?: string;
   dataTestId?: string;
 }