@mediaradar/design-components 0.16.0 → 0.16.2

package/dist/index.d.cts

@@ -936,7 +936,9 @@ declare function BarChartPlaceholder({ height }: BarChartPlaceholderProps): reac
  * the card, and a stretched `<circle>` would go oval. Same no-results use
  * as `BarChartPlaceholder` -- no real value ever appears, and the shape
  * holds the card's layout steady so nothing jumps when real data arrives.
- * @tokens border-border-strong, bg-subtle, border-border-default, rounded-xs
+ * Paths and points share the `bg-subtle` fill of the axis labels, so the
+ * whole placeholder reads as one tint, the way the bars do.
+ * @tokens bg-subtle, border-border-default, rounded-xs
  * @behavior Purely presentational -- `role="presentation"` and
  * `aria-hidden="true"` throughout (inherited from `AxisFrame`). The series
  * count and shapes are fixed; `height` is the only variable.
@@ -963,10 +965,11 @@ declare function LineChartPlaceholder({ height }: LineChartPlaceholderProps): re
  * `BarChartPlaceholder`: an unsatisfiable filter reads as "a chart belongs
  * here" rather than a failed load, with no real value (names, media types,
  * dollar amounts, percentages, series colors) ever appearing.
- * @tokens bg-subtle, border-border-default, rounded-xs
+ * @tokens bg-subtle, bg-surface, rounded-xs
  * @behavior Purely presentational -- `role="presentation"` and
  * `aria-hidden="true"` throughout. `legendRows` controls the blank legend
- * only; the disc's seam count is a fixed shape.
+ * only; the disc's seam count is a fixed shape. Seams are cut in the
+ * card's `bg-surface` color, as `StackedColumnPlaceholder`'s bands are.
  * @a11y role="presentation" with aria-hidden marks: it is a visual stand-in with
  * no data, deliberately invisible to assistive tech. Don't add a caption
  * expecting it to be announced.
@@ -992,12 +995,12 @@ declare function PieChartPlaceholder({ height, legendRows }: PieChartPlaceholder
  * `axis`, a bare stack with no scale (e.g. a share-of-voice column) omits
  * it. Same no-results use as `BarChartPlaceholder` -- no real value ever
  * appears, and the shape holds the card's layout steady.
- * @tokens bg-subtle, border-border-strong, border-border-default, rounded-control
+ * @tokens bg-subtle, bg-surface, border-border-default, rounded-control
  * @behavior Purely presentational -- `role="presentation"` and
- * `aria-hidden="true"` throughout. Band seams use `border-border-strong`
- * rather than the softer `border-border-default` gridline color: on a
- * `bg-subtle` fill the default-strength seam disappears and the stack reads
- * as one undivided block. Legend rows are reversed (bottom-up) when `axis`
+ * `aria-hidden="true"` throughout. Band seams are 1px gaps in the card's
+ * `bg-surface` color rather than a border tone: a `border-border-default`
+ * seam disappears on the `bg-subtle` fill, and `border-border-strong` reads
+ * darker than the rest of the placeholder. Legend rows are reversed (bottom-up) when `axis`
  * is off, matching a bare stack's usual bottom-anchored reading order.
  * @a11y role="presentation" with aria-hidden marks: a visual stand-in with no
  * data, deliberately invisible to assistive tech.

package/dist/index.d.ts

@@ -936,7 +936,9 @@ declare function BarChartPlaceholder({ height }: BarChartPlaceholderProps): reac
  * the card, and a stretched `<circle>` would go oval. Same no-results use
  * as `BarChartPlaceholder` -- no real value ever appears, and the shape
  * holds the card's layout steady so nothing jumps when real data arrives.
- * @tokens border-border-strong, bg-subtle, border-border-default, rounded-xs
+ * Paths and points share the `bg-subtle` fill of the axis labels, so the
+ * whole placeholder reads as one tint, the way the bars do.
+ * @tokens bg-subtle, border-border-default, rounded-xs
  * @behavior Purely presentational -- `role="presentation"` and
  * `aria-hidden="true"` throughout (inherited from `AxisFrame`). The series
  * count and shapes are fixed; `height` is the only variable.
@@ -963,10 +965,11 @@ declare function LineChartPlaceholder({ height }: LineChartPlaceholderProps): re
  * `BarChartPlaceholder`: an unsatisfiable filter reads as "a chart belongs
  * here" rather than a failed load, with no real value (names, media types,
  * dollar amounts, percentages, series colors) ever appearing.
- * @tokens bg-subtle, border-border-default, rounded-xs
+ * @tokens bg-subtle, bg-surface, rounded-xs
  * @behavior Purely presentational -- `role="presentation"` and
  * `aria-hidden="true"` throughout. `legendRows` controls the blank legend
- * only; the disc's seam count is a fixed shape.
+ * only; the disc's seam count is a fixed shape. Seams are cut in the
+ * card's `bg-surface` color, as `StackedColumnPlaceholder`'s bands are.
  * @a11y role="presentation" with aria-hidden marks: it is a visual stand-in with
  * no data, deliberately invisible to assistive tech. Don't add a caption
  * expecting it to be announced.
@@ -992,12 +995,12 @@ declare function PieChartPlaceholder({ height, legendRows }: PieChartPlaceholder
  * `axis`, a bare stack with no scale (e.g. a share-of-voice column) omits
  * it. Same no-results use as `BarChartPlaceholder` -- no real value ever
  * appears, and the shape holds the card's layout steady.
- * @tokens bg-subtle, border-border-strong, border-border-default, rounded-control
+ * @tokens bg-subtle, bg-surface, border-border-default, rounded-control
  * @behavior Purely presentational -- `role="presentation"` and
- * `aria-hidden="true"` throughout. Band seams use `border-border-strong`
- * rather than the softer `border-border-default` gridline color: on a
- * `bg-subtle` fill the default-strength seam disappears and the stack reads
- * as one undivided block. Legend rows are reversed (bottom-up) when `axis`
+ * `aria-hidden="true"` throughout. Band seams are 1px gaps in the card's
+ * `bg-surface` color rather than a border tone: a `border-border-default`
+ * seam disappears on the `bg-subtle` fill, and `border-border-strong` reads
+ * darker than the rest of the placeholder. Legend rows are reversed (bottom-up) when `axis`
  * is off, matching a bare stack's usual bottom-anchored reading order.
  * @a11y role="presentation" with aria-hidden marks: a visual stand-in with no
  * data, deliberately invisible to assistive tech.

package/dist/index.js

@@ -1755,7 +1755,7 @@ function LineChartPlaceholder({ height = 280 }) {
         {
           points: toPath(pts, 0, LINE_FORECAST_FROM + 1),
           fill: "none",
-          stroke: "var(--mr-color-border-strong)",
+          stroke: "var(--mr-color-subtle)",
           strokeWidth: "2",
           vectorEffect: "non-scaling-stroke",
           strokeLinecap: "round",
@@ -1767,7 +1767,7 @@ function LineChartPlaceholder({ height = 280 }) {
         {
           points: toPath(pts, LINE_FORECAST_FROM, pts.length),
           fill: "none",
-          stroke: "var(--mr-color-border-strong)",
+          stroke: "var(--mr-color-subtle)",
           strokeWidth: "2",
           strokeDasharray: "5 4",
           vectorEffect: "non-scaling-stroke",
@@ -1784,7 +1784,7 @@ function LineChartPlaceholder({ height = 280 }) {
           style: {
             left: `${i / (pts.length - 1) * 100}%`,
             top: `${y}%`,
-            backgroundColor: "var(--mr-color-border-strong)"
+            backgroundColor: "var(--mr-color-subtle)"
           }
         },
         `${s}-${i}`
@@ -1810,7 +1810,7 @@ function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
             y1: "50",
             x2: 50 + r * Math.cos(rad),
             y2: 50 + r * Math.sin(rad),
-            stroke: "var(--mr-color-border-default)",
+            stroke: "var(--mr-color-surface)",
             strokeWidth: "1"
           },
           deg
@@ -1840,9 +1840,9 @@ function StackedColumnPlaceholder({
     {
       style: {
         height: `${pct}%`,
-        /* border-strong, not border-default: on a subtle fill the softer
-           seam disappears and the stack reads as one undivided block. */
-        borderTop: i === 0 ? void 0 : "1px solid var(--mr-color-border-strong)"
+        /* A gap in the card's color, not a border tone: border-default
+           disappears on the subtle fill, border-strong reads darker. */
+        borderTop: i === 0 ? void 0 : "1px solid var(--mr-color-surface)"
       }
     },
     i