Skip to content
AWC UI

Area Chart

A trend with cumulative volume. A line chart with the region under the curve filled — stacked by default, so composition over time is the natural reading. Same family surface as md-line-chart; the one meaningful difference is that stack defaults to normal here.

Live preview Open in Storybook
Show code for each technology 
<md-area-chart label="Traffic sources" stack="normal"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Direct",
      data: [10, 22, 28, 35, 41, 38, 52, 48, 56, 62, 70, 80]
    },
    {
      label: "Organic",
      data: [18, 24, 32, 40, 48, 45, 60, 65, 72, 78, 84, 92]
    },
    {
      label: "Paid",
      data: [8, 12, 14, 22, 30, 28, 36, 42, 48, 52, 58, 64]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Install

Section titled “Install”

Already installed? See the Installation guide for one-time package setup (core + tokens, fonts). Each tab below shows two patterns for using md-area-chart in your project: Option A registers every AWC UI component at once (simplest), Option B imports only this component for tree-shake-friendly bundles. 

<!-- ─── Option A: global registration (all components) ─── -->
<script type="module">
  import '@awc-ui/core/define';
</script>


<!-- ─── Option B: single import (tree-shake only md-area-chart) ─── -->
<script type="module">
  import '@awc-ui/core/components/md-area-chart';
</script>


<md-area-chart></md-area-chart>

When to use

Section titled “When to use”
  • A trend where total volume matters as much as the shape.
  • Composition over time — how a total splits between series (stack="normal", the default) or how shares move (stack="percentage").
  • A single cumulative measure: storage used, traffic, spend to date.
  • A 2–3 series comparison as overlapping translucent areas (stack="none", used sparingly), or a shape-of-the-data streamgraph (stack="silhouette" / stack="wiggle").
  • Dense or in-flight data: zoom="inside | slider | both" to focus a range, connect-nulls to bridge gaps, show-marks to expose the points, curve to pick the interpolation, and loading while the data is still arriving.

When not to use

Section titled “When not to use”
SituationUse instead
Comparing the shape of several independent seriesmd-line-chart
Discrete categoriesmd-bar-chart
Parts of a single, non-time wholemd-pie-chart
An inline micro-trendmd-sparkline
Exact values users must readmd-table
Series that cross each other frequentlymd-line-chart — fills would obscure
A share-of-total series that can go negativemd-line-chart — stack="percentage" pins the y axis to 0–100

Stack modes

Section titled “Stack modes”
stackVisualBest for
noneTranslucent overlapping areas2–3 series comparison
normalAdditive stack (default)Composition plus total
percentageEach x-tick sums to 100%Share-of-total story
silhouetteCentred streamgraphShape-of-the-data exploration
wiggleMinimum-slope streamgraphMany series of similar magnitude

Mixed signs are split, not flattened. Stacking keeps a separate cursor per sign, so positives accumulate upward from zero and negatives downward from zero; magnitudes are never summed into one misleading total. The exception is stack="percentage", which pins the y axis to a hard 0…100 — see Negative values.

Overlapping (un-stacked)

Section titled “Overlapping (un-stacked)”
stack=none with a lower fill opacity
Show code for each technology 
<md-area-chart stack="none" fill-opacity="0.35"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Direct",
      data: [10, 22, 28, 35, 41, 38, 52]
    },
    {
      label: "Organic",
      data: [18, 24, 32, 40, 48, 45, 60]
    }
  ];

  const xAxis = {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Percentage

Section titled “Percentage”
Share-of-total
Show code for each technology 
<md-area-chart stack="percentage"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Mobile",
      data: [40, 45, 48, 55, 62, 64]
    },
    {
      label: "Desktop",
      data: [45, 40, 35, 30, 25, 20]
    },
    {
      label: "Tablet",
      data: [15, 15, 17, 15, 13, 16]
    }
  ];

  const xAxis = {
    data: ["2020", "2021", "2022", "2023", "2024", "2025"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Streamgraph (silhouette)

Section titled “Streamgraph (silhouette)”
Streamgraph
Show code for each technology 
<md-area-chart stack="silhouette" curve="smooth" legend="none"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "A",
      data: [10, 22, 28, 35, 41, 38, 52, 48, 56, 62, 70, 80],
      color: "primary"
    },
    {
      label: "B",
      data: [18, 24, 32, 40, 48, 45, 60, 65, 72, 78, 84, 92],
      color: "tertiary"
    },
    {
      label: "C",
      data: [8, 12, 14, 22, 30, 28, 36, 42, 48, 52, 58, 64],
      color: "secondary"
    },
    {
      label: "D",
      data: [4, 7, 8, 13, 19, 18, 24, 28, 32, 35, 38, 42],
      color: "error"
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    hideTicks: true
  };

  const yAxis = {
    hidden: true
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis, yAxis });
</script>

The silhouette and wiggle modes default stroke to off per series — a band on a floating baseline has no meaningful top edge to trace.

Curve

Section titled “Curve”

curve decides how the band’s top edge is drawn between points. smooth reads as a trend; linear is honest about where the measurements actually are.

curve=smooth vs curve=linear Open in Storybook
Show code for each technology 
<md-area-chart label="Smooth" stack="none" curve="smooth"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Sessions",
      data: [12, 34, 22, 48, 30, 56, 41, 64]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>
The same data with curve=linear
Show code for each technology 
<md-area-chart label="Linear" stack="none" curve="linear"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Sessions",
      data: [12, 34, 22, 48, 30, 56, 41, 64]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Labels on the plot

Section titled “Labels on the plot”

show-labels prints each point’s value; series-labels puts the series name at its last point, so the name follows the end of the band instead of sitting in a legend the reader has to look back at.

show-labels — values on the plot Open in Storybook
Show code for each technology 
<md-area-chart label="Rainfall (mm)" stack="none" curve="smooth" show-labels></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Bergen",
      color: "primary",
      data: [190, 152, 170, 114, 106, 132]
    },
    {
      label: "Tromsø",
      color: "tertiary",
      data: [95, 87, 72, 64, 48, 59]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>
series-labels — the name follows the band Open in Storybook
Show code for each technology 
<md-area-chart label="Market share" stack="normal" curve="linear" series-labels></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Alpha",
      data: [30, 34, 38, 45, 52, 61]
    },
    {
      label: "Beta",
      data: [26, 28, 30, 31, 33, 36]
    },
    {
      label: "Gamma",
      data: [14, 16, 17, 19, 20, 22]
    }
  ];

  const xAxis = {
    data: ["2019", "2020", "2021", "2022", "2023", "2024"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Series colour

Section titled “Series colour”

color on a series takes an MD3 role name or any CSS colour. Prefer the role: it follows the theme and stays legible in dark mode, where a hardcoded hex will not.

Role names — primary, secondary, tertiary
Show code for each technology 
<md-area-chart label="Themed roles" stack="none"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "primary",
      color: "primary",
      data: [10, 22, 28, 35, 41, 38]
    },
    {
      label: "secondary",
      color: "secondary",
      data: [18, 24, 32, 40, 48, 45]
    },
    {
      label: "tertiary",
      color: "tertiary",
      data: [8, 12, 14, 22, 30, 28]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>
Explicit CSS colours — rgb, rgba and named Open in Storybook
Show code for each technology 
<md-area-chart label="Explicit colours" stack="none"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "rgb",
      color: "rgb(255, 87, 34)",
      data: [10, 22, 28, 35, 41, 38]
    },
    {
      label: "rgba",
      color: "rgba(0, 150, 136, 0.9)",
      data: [18, 24, 32, 40, 48, 45]
    },
    {
      label: "named",
      color: "goldenrod",
      data: [8, 12, 14, 22, 30, 28]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Axis breaks

Section titled “Axis breaks”

When one series dwarfs the rest, breaks: 'auto' on the axis cuts the empty stretch so the small values stay readable instead of flattening against the baseline.

yAxis.breaks = 'auto' Open in Storybook
Show code for each technology 
<md-area-chart label="Monthly active users" stack="none" curve="smooth"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "MAU (k)",
      color: "primary",
      data: [8, 12, 18, 25, 1150, 1320, 1280, 1400]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
  };

  const yAxis = {
    label: "MAU (k)",
    breaks: "auto"
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis, yAxis });
</script>

Range series

Section titled “Range series”

A series can carry a range of [low, high] pairs instead of data, filling the band between them rather than down to the baseline. It answers a different question than a line does: not how high a value was, but how wide it was.

range is its own field, not a shape data accepts, because [low, high] and the existing [x, y] point tuple are indistinguishable at runtime — a series says which it means by which field it fills in. Either form works per row:

const series = [
  { label: 'Daily spread', range: [[-4.8, 1], [0, 6], null] },        // tuples
  { label: 'Daily spread', range: [{ low: -4.8, high: 1 }] },         // objects
];

A range never joins the stack (a band has no single value to add to a column), takes the axis domain from both edges, and draws no stroke. Its tooltip reads low – high and the screen-reader table gives both edges in one cell. A null row — or a null edge — is a gap that breaks the band.

Daily minimum to maximum
Show code for each technology 
<md-area-chart curve="linear" legend="none"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Temperature",
      color: "secondary",
      range: [
        [-4, 2],
        [-2, 5],
        [1, 9],
        [3, 12],
        [2, 10],
        [-1, 6],
        [-3, 3]
      ]
    }
  ];

  const xAxis = {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

A line over a band

Section titled “A line over a band”

Layer a plain series on top and give it fill: false. Without that an area chart fills every series down to the axis, and the line’s own fill buries the band it is meant to sit inside. stroke: false is the mirror image — fill only, no line.

const series = [
  { label: 'Range', color: 'secondary', range: spread },
  { label: 'Mean', color: 'primary', data: means, fill: false, showMarks: true },
];

Give the two different colour roles. Sharing one leaves the legend showing two identical swatches, and the line has to fight the band for contrast.

Daily spread with the mean drawn over it Open in Storybook
Show code for each technology 
<md-area-chart curve="linear" legend="bottom" fill-opacity="0.45"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Daily range",
      color: "secondary",
      range: [
        [-6.1, 1.2],
        [-4.8, 3.4],
        [-1.2, 8.9],
        [2.4, 14.6],
        [6.8, 19.2],
        [10.4, 23.8],
        [12.9, 26.1],
        [11.8, 24.7],
        [7.2, 19.4],
        [2.6, 13.1],
        [-1.9, 6.3],
        [-5.2, 2.1]
      ]
    },
    {
      label: "Daily mean",
      color: "primary",
      data: [-2.4, -0.7, 3.8, 8.5, 13, 17.1, 19.5, 18.2, 13.3, 7.8, 2.2, -1.6],
      fill: false,
      showMarks: true
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  };

  const yAxis = {
    label: "°C"
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis, yAxis });
</script>

Fan chart

Section titled “Fan chart”

A fan chart is the range series used three times over: nested bands at 1σ, 2σ and 3σ around a forecast, so the uncertainty is drawn as width. Everything left of the split is measured and the bands are null there; from the last actual onward they open outward.

Three details make it read correctly:

  • The bands share an anchor. Each starts with a zero-width [m, m] pair at the last actual, so the fan opens from the present rather than appearing with a step.
  • σ grows with the square root of the horizon, the way a random walk’s uncertainty does. Linear growth would draw a cone, which claims a precision the model doesn’t have.
  • Each band gets its own tint, drawn opaque. Nested bands in one colour are told apart only by where they overlap — which a legend swatch and a tooltip row cannot show, so every swatch would come out identical.

An xAxis band shades the forecast half, labelling where measurement stops and projection starts.

Forecast with 1σ / 2σ / 3σ confidence bands Open in Storybook
Show code for each technology 
<md-area-chart label="Predicted net income" curve="linear" legend="none" grid="horizontal" fill-opacity="1" title-align="center"></md-area-chart>

<script type="module">
  const xAxis = {
    data: ["Q1 2024", "Q2 2024", "Q3 2024", "Q4 2024", "Q1 2025", "Q2 2025", "Q3 2025", "Q4 2025", "Q1 2026", "Q2 2026", "Q3 2026", "Q4 2026", "Q1 2027", "Q2 2027", "Q3 2027", "Q4 2027"],
    bands: [
      {
        from: 7,
        to: 15,
        color: "color-mix(in srgb, var(--md-sys-color-error) 6%, transparent)",
        label: "Forecast"
      }
    ]
  };

  const yAxis = {
    min: 0
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { xAxis, yAxis });

  const ACTUAL = [18.7, 19.1, 20.4, 21.6, 19.8, 19.4, 19.9, 21.7];
  const MEAN   = [21.6, 24.9, 23.4, 24.2, 24.5, 26.1, 27.2, 27.6];
  // Random-walk uncertainty: sigma grows with the SQUARE ROOT of the horizon.
  const SIGMA  = MEAN.map((_, i) => 0.9 * Math.sqrt(i + 1));
  const anchor = ACTUAL[ACTUAL.length - 1];

  const band = (k) => [
    ...ACTUAL.slice(0, -1).map(() => null),          // measured half: no band
    [anchor, anchor],                                 // zero width at the split
    ...MEAN.map((m, i) => [m - k * SIGMA[i], m + k * SIGMA[i]]),
  ];

  // Normalise the theme's error role to #rrggbb via a throwaway 2D context,
  // then tint by alpha — nested bands need distinguishable swatches.
  const probe = document.createElement('canvas').getContext('2d');
  probe.fillStyle = getComputedStyle(document.documentElement)
    .getPropertyValue('--md-sys-color-error').trim() || '#B3261E';
  const hex = probe.fillStyle;
  const n = parseInt(hex.slice(1), 16);
  const tint = (a) => 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + a + ')';

  el.valueFormatter = (v) => (v == null ? '—' : v.toFixed(1) + 'M');
  el.series = [
    { label: '3σ confidence', color: tint(0.18), range: band(3) },   // widest first
    { label: '2σ confidence', color: tint(0.3), range: band(2) },
    { label: '1σ confidence', color: tint(0.45), range: band(1) },
    { label: 'Net income', color: 'primary', data: [...ACTUAL, ...MEAN], fill: false },
  ];
</script>

Inverted axes

Section titled “Inverted axes”

inverted transposes the plot: the category / time axis runs down the side and values run across the bottom. Reach for it when the independent variable is naturally read as depth — altitude, a drill core, ocean depth — or when its labels are long enough that a horizontal axis would rotate them.

Stacking still applies along the value axis, so a percentage-stacked inverted chart reads as a composition profile: at any height, what is this made of?

Composition by height
Show code for each technology 
<md-area-chart inverted stack="percentage" curve="smooth" legend="bottom"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "N₂",
      data: [78, 69, 43, 12, 2, 0]
    },
    {
      label: "O₂",
      data: [21, 10, 4, 1, 0, 0]
    },
    {
      label: "O",
      data: [0, 20, 53, 84, 88, 60]
    },
    {
      label: "He",
      data: [0, 1, 0.3, 3, 8, 32]
    },
    {
      label: "H",
      data: [0, 0, 0, 0.3, 2, 8]
    }
  ];

  const xAxis = {
    data: [0, 150, 200, 300, 400, 600],
    scale: "value",
    label: "Height (km)"
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Gaps and negative values

Section titled “Gaps and negative values”

A null is a gap, not a zero: the fill and the line both break at it, so a hole in the record reads as a hole. Set connect-nulls to bridge it instead — right for a dropped sensor reading, wrong for a period a series genuinely did not exist, where bridging invents data.

Gaps left open vs bridged
Show code for each technology 
<md-area-chart stack="none" show-marks fill-opacity="0.3"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Bridged",
      data: [10, 18, null, null, 22, 28, null, 36],
      connectNulls: true
    },
    {
      label: "Left open",
      data: [6, 12, null, null, 15, 19, null, 24],
      connectNulls: false
    }
  ];

  const xAxis = {
    data: ["A", "B", "C", "D", "E", "F", "G", "H"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Negative values

Section titled “Negative values”

A series that crosses zero fills to the zero line, not to the bottom of the plot — so the band above the axis and the band below it read as opposite signs rather than as one continuous shape. The domain stretches to hold both, and the zero line stays where the data puts it.

Stacking splits by sign: positives stack upward from zero and negatives stack downward, each side accumulating separately. That’s the only way a stacked column with mixed signs can stay readable — summing them into one band would cancel contributions that the reader needs to see.

Net flow crossing zero Open in Storybook
Show code for each technology 
<md-area-chart label="Net cash flow" stack="none" curve="linear" show-marks fill-opacity="0.35" legend="bottom"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Operating",
      color: "primary",
      data: [12, 18, -6, -14, 4, 16, 22, 9]
    },
    {
      label: "Investing",
      color: "tertiary",
      data: [-8, -4, -12, 6, 14, -3, -9, 11]
    }
  ];

  const xAxis = {
    data: ["Q1", "Q2", "Q3", "Q4", "Q1", "Q2", "Q3", "Q4"]
  };

  const yAxis = {
    label: "€M"
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis, yAxis });
</script>

Animating a race

Section titled “Animating a race”

A “race” sweeps the plot from the first sample to the last, revealing the bands as it goes. There is no race prop — you reassign series and xAxis on every frame, and the chart redraws. Press play:

Press play, or drag the slider Open in Storybook
Show code for each technology 
<!-- index.html <head> — the icon font the components draw from -->
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap">

<!-- index.html — register the AWC UI elements once -->
<script type="module">
  import '@awc-ui/core/define';
</script>

<div style="inline-size:100%;display:flex;flex-direction:column;gap:12px;">
  <div style="display:flex;align-items:center;gap:16px;">
    <md-icon-button id="race-play" variant="filled" icon="play_arrow" aria-label="Play or pause"></md-icon-button>
    <md-slider id="race-slider" min="2000" max="2024" step="0.1" value="2024" style="flex:1;" aria-label="Progress"></md-slider>
  </div>
  <md-area-chart id="race-chart" label="Energy mix" stack="normal" curve="linear" style="inline-size:100%;block-size:280px;"></md-area-chart>
</div>

<script type="module">
  const YEARS  = [2000, 2004, 2008, 2012, 2016, 2020, 2024];
  const SOURCE = [
    { label: 'Coal',  color: 'tertiary',  data: [58, 54, 47, 40, 31, 22, 15] },
    { label: 'Gas',   color: 'secondary', data: [22, 26, 30, 33, 34, 32, 28] },
    { label: 'Solar', color: 'primary',   data: [1, 3, 7, 14, 24, 38, 55] },
  ];
  const FIRST = YEARS[0], LAST = YEARS[YEARS.length - 1];
  const chart  = document.getElementById('race-chart');
  const slider = document.getElementById('race-slider');
  const play   = document.getElementById('race-play');

  // Start COMPLETE, not empty: a docs page that greets you with a blank plot
  // reads as broken. Play resets to FIRST and sweeps (see the handler below).
  let progress = LAST, raf = 0, last = 0, dragging = false;
  const SPEED = (LAST - FIRST) / 8000;          // full sweep ≈ 8s

  function apply() {
    const xs = [];
    const rows = SOURCE.map(() => []);
    for (let i = 0; YEARS.length > i; i++) {
      const year = YEARS[i];
      xs.push(year);
      // Points past the leading edge are null, not dropped — the axis keeps its
      // full range so it does not rescale on every frame.
      SOURCE.forEach((s, k) => rows[k].push(progress >= year ? s.data[i] : null));
      // An interpolated sample exactly at the edge, so the sweep glides between
      // samples instead of stepping one whole year at a time.
      if (YEARS.length - 1 > i && progress >= year && YEARS[i + 1] > progress) {
        const span = YEARS[i + 1] - year;
        const f = span > 0 ? (progress - year) / span : 0;
        if (f > 1e-4) {
          xs.push(progress);
          SOURCE.forEach((s, k) => rows[k].push(s.data[i] + (s.data[i + 1] - s.data[i]) * f));
        }
      }
    }
    chart.xAxis = { data: xs, scale: 'value', valueFormatter: (v) => String(Math.round(v)) };
    chart.series = SOURCE.map((s, k) => ({ label: s.label, color: s.color, data: rows[k] }));
    if (!dragging) slider.value = progress;
  }

  function stop() { cancelAnimationFrame(raf); raf = 0; last = 0; play.icon = 'play_arrow'; }
  function frame(now) {
    if (!chart.isConnected) return stop();     // never leak a rAF into a dead node
    if (!last) last = now;
    progress = Math.min(LAST, progress + (now - last) * SPEED);
    last = now;
    apply();
    if (progress >= LAST) return stop();
    raf = requestAnimationFrame(frame);
  }
  play.addEventListener('mdClick', () => {
    if (raf) return stop();
    if (progress >= LAST) progress = FIRST;
    play.icon = 'pause'; last = 0; raf = requestAnimationFrame(frame);
  });
  slider.addEventListener('mdInput', (e) => {
    dragging = true; stop(); progress = e.detail.value ?? slider.value; apply();
  });
  slider.addEventListener('mdChange', () => { dragging = false; });

  apply();
</script>

Four things make the difference between a smooth race and a jerky one:

DoWhy
Drive progress in axis value space (the year), not the array indexReal series are rarely evenly sampled. Stepping by index sweeps ten years per tick where the data is decadal and one per tick where it is annual — the edge races, then crawls, and a slider bound to the index disagrees with what you see
Mask the future with null, do not slice the arrayThe axis keeps its full range, so it does not rescale on every frame
Insert an interpolated point at the edgeWithout it the band steps one whole sample at a time instead of gliding
Stop on !chart.isConnectedOtherwise the rAF loop outlives the element and keeps running after navigation

Zoom

Section titled “Zoom”

zoom turns on two independent gestures:

ValueGesture
noneOff (default)
insideDrag across the plot to select a range; double-click to reset
sliderA range slider under the plot; drag its middle to pan the window
bothBoth

Zoom is a view. The window slices what the engine draws and leaves your series array untouched, so nothing downstream has to know a window is applied — every event still reports absolute indices into the data you supplied.

Drag the plot, or use the slider
Show code for each technology 
<md-area-chart zoom="both" stack="normal" label="Sessions"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Sessions",
      data: [60, 66, 72, 78, 71, 76, 81, 86, 77, 81, 84, 86, 76, 78, 79, 80, 68, 68, 69, 69, 57, 57, 57, 58, 46, 48, 49, 51, 42, 45, 49, 53, 45, 50, 56, 61, 55, 61, 67, 73, 67, 72, 78, 83, 76, 80, 84, 87, 78, 80, 82, 83, 72, 73, 73, 74, 62, 62, 62, 62]
    },
    {
      label: "Signups",
      data: [40, 42, 44, 39, 40, 42, 37, 37, 38, 33, 33, 34, 29, 29, 30, 25, 25, 26, 22, 23, 24, 20, 22, 24, 20, 23, 26, 22, 25, 29, 26, 29, 33, 30, 33, 37, 34, 37, 41, 38, 40, 43, 40, 42, 44, 40, 42, 43, 38, 40, 41, 35, 36, 37, 31, 32, 33, 27, 28, 29]
    }
  ];

  const xAxis = {
    data: ["T1", "T2", "T3", "T4", "T5", "T6", "T7", "T8", "T9", "T10", "T11", "T12", "T13", "T14", "T15", "T16", "T17", "T18", "T19", "T20", "T21", "T22", "T23", "T24", "T25", "T26", "T27", "T28", "T29", "T30", "T31", "T32", "T33", "T34", "T35", "T36", "T37", "T38", "T39", "T40", "T41", "T42", "T43", "T44", "T45", "T46", "T47", "T48", "T49", "T50", "T51", "T52", "T53", "T54", "T55", "T56", "T57", "T58", "T59", "T60"],
    hideTicks: true
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>
await chart.setZoom(10, 40);   // absolute indices
await chart.resetZoom();

Label the slider’s thumbs with label-zoom-start / label-zoom-end.

Loading and empty states

Section titled “Loading and empty states”

loading shows an opaque overlay with a progress indicator over the plot — it has to be opaque, because the engine still draws a placeholder axis when there is no data. An empty series shows label-empty instead. The two never stack: “no data” is the wrong answer to “where is my data?” mid-load. Both accept slotted content (slot="loader", slot="empty") when text is not enough.

loading — the overlay, held on so you can see it
Show code for each technology 
<md-area-chart label="Traffic sources" loading loading-label="Loading traffic…"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Direct",
      data: [10, 22, 28, 35, 41, 38]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

loading-label names the state for screen readers and prints under the spinner. The demo above keeps loading on permanently; in practice you clear it when the fetch resolves:

const chart = document.querySelector('md-area-chart');


chart.loading = true;
const rows = await fetch('/api/traffic').then((r) => r.json());
chart.series = rows;
chart.loading = false;      // data first, then drop the overlay

Set series before clearing loading, not after: the overlay is what hides the placeholder axis the engine draws for absent data, so clearing it first flashes an empty grid between the spinner and the bands.

Replacing the loader

Section titled “Replacing the loader”

The default is a circular indicator plus the loading-label text. When that is not the right shape — a wide dashboard tile, a skeleton mirroring the chart’s own layout — slot your own into loader; it replaces the default entirely. (loading is kept as the older alias for the same slot, and loader wins if both are given.)

Slotted linear loader
Loading traffic…
Show code for each technology 
<md-area-chart label="Traffic sources" loading><div slot="loader" style="inline-size: min(320px, 70%); display: grid; gap: 12px; justify-items: center;">
<md-progress-indicator variant="linear" indeterminate label="Loading traffic" style="inline-size: 100%;"></md-progress-indicator>
<span>Loading traffic…</span>
</div></md-area-chart>

<script type="module">
  const series = [];

  const xAxis = {
    data: []
  };

  const yAxis = {
    label: "Sessions"
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis, yAxis });
</script>

Pick by tile shape, not by taste: circular reads as “this panel is busy” and survives a narrow column, while a linear bar spans a wide tile and implies the work moves left to right. Both are indeterminate here — use a determinate value only when you genuinely know the progress.

A circular md-progress-indicator slotted over the default loader
Show code for each technology 
<md-area-chart label="Traffic" loading loading-label="Fetching traffic…"><md-progress-indicator slot="loader" variant="circular" indeterminate size="40" label="Loading"></md-progress-indicator></md-area-chart>

<script type="module">
  const series = [];

  const xAxis = {
    data: []
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Empty state

Section titled “Empty state”

An empty series array shows label-empty in the middle of the plot. Slot empty when a sentence is not enough — an icon, a “create your first report” action.

Empty state
Show code for each technology 
<md-area-chart label-empty="No traffic recorded yet"></md-area-chart>

<script type="module">
  const series = [];

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series });
</script>

Tooltips

Section titled “Tooltips”

tooltip selects the trigger: axis (default) lists every series at the hovered x, item reports only the series under the pointer, none disables pointer hover — keyboard navigation and the live region keep working either way.

On a filled chart item is often the better default: a thick band means the pointer really is on one series, and an every-series list buries it.

Custom tooltip

Section titled “Custom tooltip”

tooltipRenderer replaces the card’s content — the chart keeps owning the card itself: its surface, elevation, and placement. It’s a property, not an attribute, so it’s set in JS (or bound with .prop / :prop / [prop] in a framework), never in markup.

const tooltipRenderer = (ctx) => `${ctx.axisLabel}: ${ctx.series.length} series`;

Hover the chart below. Nothing in this card is the default card with extra columns — it’s a different object: a spelled-out day overline, the day’s total as the headline with a day-over-day delta chip, a 100% stacked share bar that gives the composition at a glance, and per-series rows that dim away from the series you’re nearest.

Each piece leans on something the context hands you. The share bar and the percentages need every series at the hovered x — which is precisely what ctx.series is. The dimming reads focused (equivalently ctx.focusedSeriesIndex), so the card emphasises the same series the plot does. The swatches and bar segments reuse each series’ resolved color, so they track the theme with nothing hard-coded. The delta is the one thing the chart can’t tell you — yesterday’s total isn’t at today’s x — so the renderer closes over its own data, which is the normal way to pull in context the chart doesn’t have.

tooltipRenderer — totals and per-series share Open in Storybook
Show code for each technology 
<md-area-chart label="Traffic sources" stack="normal" tooltip="axis" legend="bottom"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Direct",
      data: [10, 22, 28, 35, 41, 38, 52]
    },
    {
      label: "Organic",
      data: [18, 24, 32, 40, 48, 45, 60]
    },
    {
      label: "Paid",
      data: [8, 12, 14, 22, 30, 28, 36]
    }
  ];

  const xAxis = {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  };

  const tooltipRenderer = (ctx) => {
    // Closed over, not passed in: the renderer is handed the hovered x only,
    // so anything comparative (yesterday's total) has to come from your data.
    const DATA = [
      [10, 22, 28, 35, 41, 38, 52],
      [18, 24, 32, 40, 48, 45, 60],
      [8, 12, 14, 22, 30, 28, 36],
    ];
    const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    const totalAt = (i) => (i < 0 ? null : DATA.reduce((sum, a) => sum + a[i], 0));

    const el = (tag, css, text) => {
      const n = document.createElement(tag);
      if (css) n.style.cssText = css;
      if (text != null) n.textContent = text;
      return n;
    };

    const rows = ctx.series;
    const total = rows.reduce((sum, r) => sum + (r.value ?? 0), 0);
    const prev = totalAt(ctx.dataIndex - 1);
    const delta = prev ? Math.round(((total - prev) / prev) * 100) : null;
    const lit = (r) => ctx.focusedSeriesIndex < 0 || r.focused;

    const card = el('div', 'min-width:212px;font-variant-numeric:tabular-nums');

    card.append(el('div',
      'font-size:0.68em;letter-spacing:0.1em;text-transform:uppercase;opacity:0.55',
      DAYS[ctx.dataIndex] ?? ctx.axisLabel));

    const head = el('div', 'display:flex;align-items:baseline;gap:5px;margin:1px 0 9px');
    head.append(el('span', 'font-size:1.5em;font-weight:700;line-height:1.05', total.toLocaleString()));
    head.append(el('span', 'font-size:0.76em;opacity:0.55', 'visits'));
    if (delta !== null) {
      const up = delta >= 0;
      head.append(el('span',
        'margin-inline-start:auto;font-size:0.72em;font-weight:700;padding:1px 7px;border-radius:999px;' +
        'background:' + (up ? 'rgba(64,186,128,0.18)' : 'rgba(224,106,106,0.18)') + ';' +
        'color:' + (up ? '#40ba80' : '#e06a6a'),
        (up ? '▲ ' : '▼ ') + Math.abs(delta) + '%'));
    }
    card.append(head);

    // Composition at a glance — the one view a row list can never give you.
    const bar = el('div', 'display:flex;gap:2px;height:6px;margin-bottom:9px');
    rows.forEach((r) => {
      const seg = el('div',
        'flex:' + ((r.value ?? 0) || 0.001) + ';border-radius:999px;background:' + r.color +
        ';opacity:' + (lit(r) ? '1' : '0.35'));
      bar.append(seg);
    });
    card.append(bar);

    rows.forEach((r) => {
      const row = el('div',
        'display:grid;grid-template-columns:9px 1fr auto 38px;gap:9px;align-items:center;' +
        'padding:2.5px 0;opacity:' + (lit(r) ? '1' : '0.45'));
      row.append(el('span', 'width:9px;height:9px;border-radius:3px;background:' + r.color));
      row.append(el('span', lit(r) && ctx.focusedSeriesIndex >= 0 ? 'font-weight:600' : null, r.label));
      row.append(el('span', 'font-weight:700', r.formattedValue));
      row.append(el('span', 'opacity:0.55;text-align:end',
        total ? Math.round(((r.value ?? 0) / total) * 100) + '%' : ''));
      card.append(row);
    });

    return card;
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis, tooltipRenderer });
</script>

The context describes the hovered x position:

FieldTypeMeaning
dataIndexnumberIndex of the hovered x slot
axisValuestring | number | Date | undefinedRaw x value there
axisLabelstringaxisValue through the x-axis formatter — the default card’s header
seriesMdChartTooltipSeries[]Visible series that have a value here, in series order
missingMdChartTooltipSeries[]Visible series with no value here — usually empty, populated for partial or irregular data
focusedSeriesIndexnumberThe emphasised series, or -1 when none is (a single-series chart never emphasises)

Each entry in series / missing carries seriesIndex, label, color (an already-resolved CSS colour, so it can go straight into a style), value, formattedValue, focused, and missing.

value distinguishes two kinds of absence, which is the whole reason missing is a separate list: null means the series has a datum here and it is null — measured, no value — while undefined means there is no datum at all, because the series starts later, ends earlier, or was never sampled at this x.

What you return decides what’s drawn:

ReturnResult
NodeInserted as-is — the safest option, and what framework renderers produce
stringSet as text. Markup is shown, not parsed
{ unsafeHtml }Assigned to innerHTML with no sanitising — only for markup you fully control
undefinedFall back to the built-in tooltip for this x
nullRender no tooltip at all for this x

Returning undefined for the ordinary case and a Node only where you need something special lets you override one column without reimplementing the card.

The card’s own surface stays the chart’s: restyle it with ::part(tooltip), which wraps whatever the renderer returns. (The engine creates that part at runtime, so it isn’t in the parts table below — the table lists only parts declared in the component’s own markup.)

md-area-chart::part(tooltip) {
  background: none;
  box-shadow: none;
}

The demo’s own code panel carries that whole card, in all five technologies. The part that actually differs between them is how you bind a function prop:

TechnologyBindingThe thing to watch
HTMLchart.tooltipRenderer = fnA property assignment — there is no attribute form
ReacttooltipRenderer={fn}Declare fn outside the component (or wrap it in useCallback) so its identity is stable between renders
Angular[tooltipRenderer]="fn"Make it an arrow property, so this stays bound when the chart calls it
Vue:tooltipRenderer="fn"A plain function, not a ref — Vue would try to unwrap a ref on access
Svelte{tooltipRenderer}Assigned as a property on the upgraded element

For a text-only card, returning a string is enough — and it’s safe by construction, since it is set as text:

const tooltipRenderer = (ctx) => {
  const total = ctx.series.reduce((sum, r) => sum + (r.value ?? 0), 0);
  return `${ctx.axisLabel} — ${total.toLocaleString()} total`;
};

Events

Section titled “Events”
EventCancelableDetailFires
mdMarkerClicknoMdChartClickDetail<MdChartSeries>A data-point marker is clicked
mdLineClicknoMdChartClickDetail<MdChartSeries>A series line is clicked between its points
mdAreaClicknoMdChartClickDetail<MdChartSeries>A filled band is clicked (its own band when stacked)
mdAxisClicknoMdChartAxisClickDetailThe plot background — nearest x plus every visible series’ value
mdLegendClickno{ seriesIndex, seriesId?, selected }A legend chip toggles a series
mdHovernoMdChartHoverDetailThe hovered data index changes (rAF-throttled)
mdZoomno{ startIndex, endIndex, reset }The zoom window changes (drag, slider, setZoom, resetZoom)
mdReadynovoidThe engine has mounted and drawn

Event payloads

Section titled “Event payloads”

The three click events share one payload, so a single handler can serve markers, lines and bands. Every field is present without re-mapping to chart-internal coordinates, which is what makes drill-down and selection straightforward.

type MdChartAxisValue = string | number | Date;
type MdChartDataPoint = number | null;


// mdMarkerClick, mdLineClick, mdAreaClick
interface MdChartClickDetail<T = unknown> {
  seriesIndex: number;                 // 0-based index within the `series` array
  seriesId?: string;                   // the series' id, when one was given
  dataIndex: number;                   // index of the point within that series
  value: MdChartDataPoint;             // raw value — null for an empty slot
  axisValue?: MdChartAxisValue;        // original x-axis value at that column
  series: T;                           // the series object you passed in
  nativeEvent: PointerEvent | MouseEvent | KeyboardEvent;
}

The area chart emits it as MdChartClickDetail<MdChartSeries>, so detail.series comes back typed as the object you handed to the series prop.

A click on the plot background instead reports the nearest x plus every visible series’ value there — one click gives you the whole column, the way the axis tooltip shows it. Series hidden by a legend toggle are left out.

// one row per visible series at the clicked x
interface MdChartAxisSeriesValue {
  seriesIndex: number;
  seriesId?: string;
  label: string;                       // as shown in the legend and tooltip
  dataIndex: number;                   // -1 when that series has no point there
  value: MdChartDataPoint;
}


// mdAxisClick
interface MdChartAxisClickDetail {
  dataIndex: number;                   // index of the nearest x position
  axisValue?: MdChartAxisValue;
  seriesValues: MdChartAxisSeriesValue[];
  nativeEvent: PointerEvent | MouseEvent | KeyboardEvent;
}


// mdHover — rAF-throttled
interface MdChartHoverDetail {
  dataIndex: number;                   // the highlighted x position
  axisValue?: MdChartAxisValue;
  // one entry under tooltip="item", every series at that x under tooltip="axis"
  seriesIndices: number[];
}

This is the chart the code below wires up. Click a band to fire mdAreaClick, click the plot background for mdAxisClick, toggle a legend chip for mdLegendClick, and drag the slider under the plot for mdZoom — open your console to watch the payloads described above arrive.

Click a band, the plot background or a legend chip — every payload is logged Open in Storybook
Show code for each technology 
<md-area-chart label="Storage by type" stack="normal" zoom="slider" legend="bottom"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Documents",
      data: [12, 19, 24, 31]
    },
    {
      label: "Media",
      data: [30, 34, 41, 52]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr"]
  };

  const valueFormatter = (v) => new Intl.NumberFormat('en-US').format(v ?? 0) + ' GB';

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis, valueFormatter });

  // One AbortController drops the whole set at once — and makes the wiring
  // idempotent, which this demo needs because it is re-run when it scrolls
  // back into view.
  el.logAbort?.abort();
  el.logAbort = new AbortController();
  const signal = el.logAbort.signal;

  el.addEventListener('mdAreaClick', (e) => console.log('mdAreaClick', e.detail), { signal });
  el.addEventListener('mdAxisClick', (e) => console.log('mdAxisClick', e.detail), { signal });
  el.addEventListener('mdLegendClick', (e) => console.log('mdLegendClick', e.detail), { signal });
  el.addEventListener('mdZoom', (e) => console.log('mdZoom', e.detail.startIndex, e.detail.endIndex, e.detail.reset), { signal });
</script>

API Reference

Section titled “API Reference”

Properties

PropertyAttributeTypeDefaultReflects
labellabelstring''—
subtitlesubtitlestring | undefined——
titleAligntitle-alignMdChartTitleAlign'start'—
seriesJS onlyMdChartSeries[][]—
xAxisJS onlyMdChartAxis | undefined——
yAxisJS onlyMdChartAxis | undefined——
curvecurve'linear' | 'smooth' | 'monotone' | 'step' | 'step-before' | 'step-middle''smooth'—
stackstackMdChartStackMode'normal'—
connectNullsconnect-nullsbooleanfalse—
showMarksshow-marksbooleanfalse—
lineWidthline-widthnumber——
markSizemark-sizenumber——
legendlegendMdChartLegendPosition | 'none''top-end'Yes
tooltiptooltipMdChartTooltipTrigger'axis'—
zoomzoom'none' | 'inside' | 'slider' | 'both''none'—
localelocalestring''—
valueFormatterJS only(value: number | null | undefined) => string——
tooltipRendererJS onlyMdChartTooltipRenderer——
heightPropheightstring——
noAnimationno-animationbooleanfalse—
animationanimationMdChartAnimation'expressive'—
animationDurationanimation-durationnumber——
fillOpacityfill-opacitynumber0.55—
showLineshow-linebooleantrue—
gridgrid'none' | 'horizontal' | 'vertical' | 'both''horizontal'—
invertedinvertedbooleanfalse—
seriesLabelsseries-labelsbooleanfalse—
summarysummarystring''—
tableLabelsJS only{ x?: string——
labelEmptylabel-emptystring'No data to display'—
loadingloadingbooleanfalse—
loadingLabelloading-labelstring'Loading chart…'—
labelZoomStartlabel-zoom-startstring'Zoom range start'—
labelZoomEndlabel-zoom-endstring'Zoom range end'—
axisTicksaxis-ticksbooleanfalse—
showLabelsshow-labelsbooleanfalse—
labelPlotlabel-plotstring'Chart data. Use the arrow keys to move between points, Home and End for the first and last, Escape to leave.'—
labelPointlabel-pointstring'%x%: %values%'—
densitydensity0 | -1 | -2 | -3 | -40Yes

Methods

MethodParameters
refreshTheme()none
resize()none
replay()none
toDataURL()none
getInstance()none
setZoom()startIndex: number, endIndex: number
resetZoom()none

Slots

SlotDescription
headerContent for the header row, replacing the default title block
emptyReplaces the empty-state message when there is no data
loader—
loadingReplaces the built-in spinner while `loading` is set
footerContent for the footer row below the plot

CSS Custom Properties

Override on the host element for per-instance theming:

PropertyDescription
--md-area-chart-block-sizeExplicit chart height, overriding the aspect ratio (default: auto)
--md-area-chart-min-block-sizeFloor the chart height never drops below (density-aware)
--md-area-chart-aspect-ratioWidth:height ratio used when no block-size is set (default: 16 / 9)
--md-area-chart-backgroundChart surface fill (default: surface-container-low)
--md-area-chart-paddingInset between the host edge and the plot canvas (density-aware)
--md-area-chart-shapeCorner radius of the chart surface (density-aware)
--md-area-chart-zoom-sizeHeight reserved for the zoom slider (default: 28px)
--md-area-chart-zoom-track-colorZoom slider track colour (md-slider inactive track)
--md-area-chart-zoom-window-colorZoom slider selected-window colour (md-slider active track)
--md-area-chart-zoom-handle-colorZoom slider thumb + drag-band edge colour
--md-area-chart-zoom-band-colorDrag-to-zoom selection fill
--md-area-chart-empty-colorEmpty-state text colour (default: on-surface-variant)
--md-area-chart-empty-backgroundEmpty-state overlay fill (defaults to the chart background)
--md-area-chart-empty-fontEmpty-state font family (default: body-medium)
--md-area-chart-empty-font-sizeEmpty-state font size (default: body-medium, 14px)
--md-area-chart-empty-icon-sizeSize of an icon slotted into the empty state (default: 40px)

CSS Shadow Parts

Style internal elements through shadow DOM with ::part():

PartDescription
zoomWrapper around the zoom slider
zoom-sliderThe zoom range slider itself
zoom-panGrip that drags the whole zoom window along the track
headerHeader row above the plot (hosts the `header` slot)
canvasThe plot surface the chart draws into
emptyEmpty-state overlay, shown when there is no data
loadingLoading overlay, shown while `loading` is set
zoom-bandLive selection band drawn while dragging across the plot
footerFooter row below the plot (hosts the `footer` slot)
zoom-trackZoom slider's inactive track (forwarded from md-slider)
zoom-windowZoom slider's selected window (forwarded from md-slider)
zoom-handleZoom slider's thumbs (forwarded from md-slider)

Accessibility

Section titled “Accessibility”
  • The canvas is opaque to assistive tech. label, summary, label-plot and label-point are the accessible description — they are the chart’s accessibility, not decoration.
  • A screen-reader-only data table mirrors every series. Provide the same data as a visible table for anything users must read precisely; the chart is a summary view.
  • The plot is a focus stop: arrow keys walk the data, Home / End jump to the ends, and each move is announced through a polite live region.
  • Stacked bands are distinguished by colour and order — provide the legend and don’t rely on hue alone. With stack="percentage", state that values are shares.
  • Honour prefers-reduced-motion with no-animation (or animation="none").
  • Zoom controls are md-sliders and need label-zoom-start / label-zoom-end translated.
Tab to the plot, then walk it with the arrow keys — Home and End jump to the ends
Show code for each technology 
<md-area-chart label="Weekly sessions" summary="Weekly sessions by channel, Monday to Sunday. Direct rises from 10 to 52, organic from 18 to 60." stack="normal" show-marks legend="bottom"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Direct",
      data: [10, 22, 28, 35, 41, 38, 52]
    },
    {
      label: "Organic",
      data: [18, 24, 32, 40, 48, 45, 60]
    }
  ];

  const xAxis = {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

RTL, density & i18n

Section titled “RTL, density & i18n”

RTL — inside a dir="rtl" parent the whole plot mirrors: the value axis and its labels move to the right, the category axis runs right-to-left, and the legend and zoom slider follow. Arrow keys follow the reading direction, so ← advances. dataIndex, axisValue and every event payload are identical in both directions — only pixels move. See RTL.

<md-area-chart dir="rtl" label="مصادر الزيارات"></md-area-chart>
Same markup, dir=ltr vs dir=rtl
ltr rtl
Show code for each technology 
<!-- index.html — register the AWC UI elements once -->
<script type="module">
  import '@awc-ui/core/define';
</script>

<md-area-chart id="traffic" dir="rtl" label="Traffic sources" stack="normal" legend="bottom"></md-area-chart>

<script type="module">
  const chart = document.getElementById('traffic');

  chart.xAxis = { data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] };
  chart.series = [
    { label: 'Direct', data: [10, 22, 28, 35, 41, 38] },
    { label: 'Organic', data: [18, 24, 32, 40, 48, 45] },
  ];
</script>

Mirror the plot, not the arrays

Section titled “Mirror the plot, not the arrays”

Direction is the engine’s job. series and xAxis stay in reading order — oldest first — in both directions, and the chart decides which edge index 0 is drawn at. Reversing the arrays yourself to “fix” RTL mirrors twice: the earliest sample lands back on the left while the axis still runs right-to-left, so time now reads backwards.

Reading-order data vs hand-reversed data, both under dir=rtl
correct wrong
Show code for each technology 
<!-- index.html — register the AWC UI elements once -->
<script type="module">
  import '@awc-ui/core/define';
</script>

<md-area-chart id="traffic-rtl" dir="rtl" label="Traffic sources" stack="normal"></md-area-chart>

<script type="module">
  const chart = document.getElementById('traffic-rtl');

  // Reading order — oldest first — exactly as it would be under dir="ltr".
  // The engine mirrors the plot; reversing the arrays yourself mirrors twice.
  chart.xAxis = { data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] };
  chart.series = [{ label: 'Direct', data: [10, 22, 28, 35, 41, 38] }];
</script>

Every density rung

Section titled “Every density rung”

density="-1…-4" tightens the surface padding, the corner radius, the height floor and the axis / title type sizes. A global data-density on an ancestor sets the same signal for every chart beneath it; a local density wins over it.

Density 0 through -4 — padding, corner radius and axis type all taper
0 -1 -2 -3 -4
Show code for each technology 
<!-- index.html — register the AWC UI elements once -->
<script type="module">
  import '@awc-ui/core/define';
</script>

<md-area-chart id="sessions" density="-2" label="Sessions" stack="normal"></md-area-chart>

<script type="module">
  const chart = document.getElementById('sessions');

  chart.xAxis = { data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] };
  chart.series = [
    { label: 'Direct', data: [10, 22, 28, 35, 41, 38] },
    { label: 'Organic', data: [18, 24, 32, 40, 48, 45] },
  ];
</script>

Density and direction together

Section titled “Density and direction together”

The two are independent signals: direction decides which edge index 0 sits at, density decides how much room the surface takes around the plot.

dir=rtl at density 0 and -3
rtl · 0 rtl · -3
Show code for each technology 
<!-- index.html — register the AWC UI elements once -->
<script type="module">
  import '@awc-ui/core/define';
</script>

<md-area-chart id="sessions-rtl" dir="rtl" density="-3" label="Sessions" stack="normal"></md-area-chart>

<script type="module">
  const chart = document.getElementById('sessions-rtl');

  chart.xAxis = { data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] };
  chart.series = [
    { label: 'Direct', data: [10, 22, 28, 35, 41, 38] },
    { label: 'Organic', data: [18, 24, 32, 40, 48, 45] },
  ];
</script>

Density — density="-1…-4" tightens padding and label sizes. See Density.

i18n — set locale for default number and date formatting (an explicit valueFormatter always wins over it), and translate every string the component renders itself:

PropCovers
summaryReplaces the generated aria-label outright
tableLabelsThe SR data table’s column chrome (a property — it takes an object)
label-plot, label-pointKeyboard instructions and the live region
label-empty, loading-labelThe empty and loading overlays
label-zoom-start, label-zoom-endThe zoom slider’s thumbs

label-point uses the %x% / %values% percent tokens — keep them when translating; they interpolate the values.

Theming

Section titled “Theming”
Custom propertyPurposeDefault
--md-area-chart-block-sizeExplicit chart height, overriding the aspect ratioauto
--md-area-chart-min-block-sizeFloor the height never drops below (density-aware)max(120px, 160px + density × 8px)
--md-area-chart-aspect-ratioWidth : height used when no block size is set16 / 9
--md-area-chart-backgroundChart surface fillsurface-container-low
--md-area-chart-paddingInset between the host edge and the plot (density-aware)max(8px, 16px + density × 2px)
--md-area-chart-shapeCorner radius of the surface (density-aware)max(8px, 16px + density × 2px)
--md-area-chart-zoom-sizeHeight reserved for the zoom slider28px
--md-area-chart-zoom-track-colorZoom slider tracksurface-container-highest
--md-area-chart-zoom-window-colorZoom slider selected windowsecondary-container
--md-area-chart-zoom-handle-colorZoom thumbs and the drag-band edgeprimary
--md-area-chart-zoom-band-colorDrag-to-zoom selection fill16% primary
--md-area-chart-empty-colorEmpty-state texton-surface-variant
--md-area-chart-empty-backgroundEmpty-state overlay fillthe chart background
--md-area-chart-empty-font / -empty-font-sizeEmpty-state typebody-medium, 14px
--md-area-chart-empty-icon-sizeIcon slotted into the empty state40px
md-area-chart.dashboard {
  --md-area-chart-background: var(--md-sys-color-surface-container);
  --md-area-chart-padding: 16px;
  --md-area-chart-shape: 16px;
}

Two more are not namespaced to this component. The axis line and the gridlines are drawn by the shared chart engine, so they read family-wide properties every chart type honours — set them on any ancestor and a whole dashboard retints at once.

Custom propertyDrawsDefault
--md-chart-axis-colorThe axis line and its ticks--md-sys-color-outline-variant
--md-chart-grid-colorThe gridlines across the plot--md-sys-color-outline-variant at 50% (an override is used verbatim)
Themed instance — surface, radius and a tinted axis and grid
Show code for each technology 
<md-area-chart label="Traffic sources" stack="normal" grid="both" legend="bottom" style="--md-area-chart-background: var(--md-sys-color-surface-container); --md-area-chart-padding: 20px; --md-area-chart-shape: 20px;"></md-area-chart>

<script type="module">
  const series = [
    {
      label: "Direct",
      color: "#7c6fd6",
      data: [10, 22, 28, 35, 41, 38]
    },
    {
      label: "Organic",
      color: "tertiary",
      data: [18, 24, 32, 40, 48, 45]
    }
  ];

  const xAxis = {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
  };

  const el = document.querySelector("md-area-chart");
  Object.assign(el, { series, xAxis });
</script>

Adjust gradient saturation per chart with the fill-opacity attribute (0–1). A band fill — a stacked layer or a range — keeps an even tint, while a fill that runs to the baseline fades toward the axis so it stops competing with it.

CSS parts — header, canvas, footer, empty, loading, zoom, zoom-slider, zoom-pan, zoom-band, and three forwarded from the zoom slider: zoom-track, zoom-window, zoom-handle.

::part() overrides — drag the zoom slider to see all four parts
Show code for each technology 
<!-- index.html — register the AWC UI elements once -->
<script type="module">
  import '@awc-ui/core/define';
</script>

<md-area-chart id="sessions-parts" class="parted" label="Sessions" stack="normal" zoom="slider"></md-area-chart>

<script type="module">
  const chart = document.getElementById('sessions-parts');

  chart.xAxis = { data: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'] };
  chart.series = [
    { label: 'Direct', data: [10, 22, 28, 35, 41, 38] },
    { label: 'Organic', data: [18, 24, 32, 40, 48, 45] },
  ];
</script>

The stylesheet that markup pairs with — ::part() reaches into the shadow root from ordinary CSS, so it works identically in every framework above:

md-area-chart.parted::part(canvas)      { outline: 1px dashed rgba(124, 111, 214, 0.55); outline-offset: 4px; }
md-area-chart.parted::part(zoom-window) { background: #7c6fd6; }
md-area-chart.parted::part(zoom-handle) { background: #4b3fa8; }
md-area-chart.parted::part(zoom-pan)    { background: rgba(75, 63, 168, 0.18); border-radius: 999px; }
Section titled “Related”

md-line-chart · md-bar-chart · md-pie-chart · md-sparkline · md-slider

AI / LLM Context

Section titled “AI / LLM Context”

For AI Agents — md-area-chart

Two artefacts to give your AI agent so it generates correct UI with this component. The per-component spec answers "how do I use this exact tag?". The main-llm spec answers "which tag should I pick in the first place?".

Per-component

md-area-chart spec card

Identity · when to use / when NOT · decision cues · behavioural contract · do/don't · anti-patterns · full API. Paste into your agent when you're implementing with this component.

Main-LLM spec

AWC UI Operator's Manual

System-prompt preamble · decision matrix · token reference · page recipes · anti-patterns. Paste into the system prompt at the start of a piece of work.

Open spec

md-area-chart readme.md 

# md-area-chart

<!-- llm:meta
tag: md-area-chart
category: charts
status: custom
m3-guidelines: none — M3 has no chart components
form-associated: false
depends-on: md-slider, md-progress-indicator
used-by: none
engine: in-house Canvas2D + DOM overlay (utils/charts/engine)
-->

**A trend with cumulative volume.** A line chart with the region under the
curve filled — **stacked by default**, so composition over time is the natural
reading. Also does streamgraphs and low/high range bands.

> ⚠️ **Not a Material Design 3 component.** M3 ships no charts. The engine is
> **in-house Canvas2D with a DOM overlay** (`utils/charts/engine`).

> Setup, theming, density and i18n are configured once for the whole library —
> see [`main-llm.md`](../../../../../main-llm.md), the library-wide guide that ships
> alongside these component docs.

---

## When to use

- A trend where **total volume** matters as much as the shape.
- **Composition over time** — how a total splits between series
  (`stack="normal"`) or how shares move (`stack="percentage"`).
- A streamgraph off a free baseline (`stack="silhouette"` / `"wiggle"`).
- A confidence interval or min/max envelope, as a `range` band.
- A single cumulative measure (storage used, traffic).

## When NOT to use

| Situation | Use instead |
|---|---|
| Comparing the shape of several independent series | `md-line-chart` |
| Series carrying their own x values (irregular sampling) | `md-line-chart` — only it accepts per-point x |
| Discrete categories | `md-bar-chart` |
| Parts of a single, non-time whole | `md-pie-chart` |
| An inline micro-trend | `md-sparkline` |
| Series that cross each other frequently | `md-line-chart` — fills would obscure |
| Stacking data that can be negative | `md-line-chart` — stacked areas assume non-negative |

## Decision cues

| Need | Setting |
|---|---|
| Composition of a total | `stack="normal"` (default) |
| Share of total over time | `stack="percentage"` |
| Overlapping translucent areas | `stack="none"` (use sparingly) |
| Streamgraph | `stack="silhouette"` or `stack="wiggle"` |
| A low/high band | `series[].range` (JS property) |
| Fill strength | `fill-opacity="0.55"` |
| Fill with no stroke | `show-line="false"` |
| Curve style | `curve="linear\|smooth\|monotone\|step\|step-before\|step-middle"` |
| Points visible | `show-marks` |
| Bridge missing data | `connect-nulls` |
| Zoom into a dense range | `zoom="inside\|slider\|both"` |
| Category axis down the side | `inverted` |
| Async data | `loading` (+ `loading-label`) |

## API contract

```html
<md-area-chart
  label="Storage by type"
  subtitle="Last 90 days"
  title-align="start|center|end"                 <!-- default: start -->
  curve="linear|smooth|monotone|step|step-before|step-middle"   <!-- default: smooth -->
  stack="normal|percentage|none|silhouette|wiggle"   <!-- default: normal -->
  fill-opacity="0.55"                            <!-- default: 0.55 -->
  show-line                                      <!-- default: ON; set show-line="false" for fill only -->
  connect-nulls                                  <!-- default: off -->
  show-marks                                     <!-- default: off -->
  show-labels                                    <!-- default: off -->
  series-labels                                  <!-- default: off -->
  inverted                                       <!-- default: off -->
  line-width="2.5"                               <!-- default: 2.5 -->
  mark-size="4"                                  <!-- default: per-symbol -->
  grid="none|horizontal|vertical|both"           <!-- default: horizontal -->
  axis-ticks                                     <!-- default: off -->
  legend="top|bottom|left|right|top-start|top-end|bottom-start|bottom-end|none"
                                                 <!-- default: top-end -->
  tooltip="axis|item|none"                       <!-- default: axis -->
  zoom="none|inside|slider|both"                 <!-- default: none -->
  locale="en-US"                                 <!-- default: "" (browser locale) -->
  height="320px"                                 <!-- default: aspect-ratio driven -->
  summary=""                                     <!-- replaces the generated aria-label -->
  loading                                        <!-- default: off -->
  loading-label="Loading chart…"
  label-empty="No data to display"
  label-plot="Chart data. Use the arrow keys to move between points, Home and End for the first and last, Escape to leave."
  label-point="%x%: %values%"
  label-zoom-start="Zoom range start"
  label-zoom-end="Zoom range end"
  animation="expressive|grow|fade|draw|stagger|none"   <!-- default: expressive -->
  animation-duration="700"                       <!-- default: engine default -->
  no-animation                                   <!-- default: off -->
  density="-1|-2|-3|-4"                          <!-- default: 0 (uncompacted) -->
></md-area-chart>
```

Objects, arrays and functions have no attribute form — set them as JS
properties:

```js
const chart = document.querySelector('md-area-chart');

chart.xAxis  = { data: ['Jan', 'Feb', 'Mar'], scale: 'category' };
chart.yAxis  = { label: 'GB', min: 0 };
chart.series = [
  { label: 'Documents', data: [12, 15, 14] },
  { label: 'Media',     data: [30, 34, 41] },
  // A low/high band instead of a line: `range` replaces `data`.
  { label: 'Forecast range', range: [[10, 20], [12, 24], [14, 29]] },
];
chart.tableLabels    = { x: 'Month', series: 'Type' };
chart.valueFormatter = (v) => `${new Intl.NumberFormat('en-US').format(v ?? 0)} GB`;
chart.tooltipRenderer = (ctx) => `${ctx.axisLabel} — ${ctx.series.length} series`;
```

**Events** — `mdMarkerClick`, `mdLineClick`, `mdAreaClick` (all
`MdChartClickDetail`), `mdAxisClick` (`MdChartAxisClickDetail`),
`mdLegendClick` (`{ seriesIndex, seriesId?, selected }`), `mdHover` (throttled
to one per frame), `mdZoom` (`{ startIndex, endIndex, reset }`), `mdReady`. All
are the Stencil default — they bubble and cross shadow boundaries.

**Methods** — `resize()`, `replay()`, `toDataURL()`, `getInstance()`,
`setZoom(startIndex, endIndex)`, `resetZoom()`. All are async. There is no
`drill()` here.

**Slots** — `header` (above the plot), `footer` (below it), `empty` (replaces
`label-empty`), and `loader` (replaces the built-in spinner; `loading` is the
older alias for the same slot — `loader` wins if both are filled).

**Parts** — `header`, `canvas`, `empty`, `loading`, `footer`, `zoom`,
`zoom-slider`, `zoom-pan`, `zoom-band`, plus `zoom-track` / `zoom-window` /
`zoom-handle` forwarded from the inner `md-slider`. The engine additionally
marks the `<canvas>` as `plot-canvas` and the DOM overlay's legend and hover
card as `legend` and `tooltip`.

### Behavioral contract worth knowing

- **`stack` defaults to `"normal"`.** This is the one prop where the area chart
  deliberately differs from `md-line-chart`. `stack="none"` gives overlapping
  translucent fills, which get muddy fast.
- Stacked areas assume **non-negative** values — mixed signs produce a
  misleading stack. Use `md-line-chart` for data that can go negative.
- **`series[].data` is a bare list of y values only**, positioned by index
  against `xAxis.data`. Unlike `md-line-chart`, this component does not accept
  points that carry their own x.
- **A `range` series is a band, not a line**: give `range` (a list of
  `[low, high]` pairs, `{ low, high }` objects, or `null` for a gap) and `data`
  is ignored. A range series never participates in stacking and draws with no
  stroke, so a plain line series layered after it reads as the value inside the
  band.
- **`silhouette` and `wiggle` drop the stroke by default** — a streamgraph rides
  a free baseline, so a layer's top edge is not a value anyone can read. An
  explicit `series[i].stroke` still wins.
- **Zoom is a view, not a mutation.** `series` / `xAxis` are untouched and every
  index reported back to you stays **absolute**. `setZoom()` takes absolute
  indices, not fractions; `zoom="inside"` also resets on a double-click in the
  plot.
- **Legend toggles survive a data re-feed** — a series the reader hid stays
  hidden when `series` is reassigned, keyed by `id`, else `label`, else
  position. An explicit `series[i].hidden` still wins.
- **`loading` covers the plot** with the loader and sets `aria-busy="true"`.
  Unlike `md-line-chart` and `md-bar-chart`, clearing it does **not** replay the
  entry motion on its own — call `replay()` after the data lands if you want the
  areas to draw themselves in.
- Objects and functions (`series`, `xAxis`, `yAxis`, `tableLabels`,
  `valueFormatter`, `tooltipRenderer`) are **JS properties**, never attributes.
- Call `resize()` after a container reveal; gate `toDataURL()` on `mdReady`.
- `label-point` uses **`%x%` / `%values%`** percent tokens — keep both when
  translating. `summary` replaces the whole generated `aria-label` sentence.
- Charts re-read the theme tokens and repaint on their own when
  `prefers-color-scheme` changes. Any *other* theme swap (a manual light/dark
  class, a brand-token change) needs a nudge: reassign `series`. `resize()` will not
  do it — it returns early when the box has not changed.

---

## Do / Don't

House rules — M3 ships no chart component, so the guidance below is this
library's own.

| ✅ Do | ❌ Don't |
|---|---|
| Use it when the total, not just the trend, matters | Don't use it to compare independent series' shapes — that's a line chart |
| Keep the series count small (≤ ~4) | Don't stack eight bands; the middle ones become unreadable |
| Order the stack consistently (largest or most stable at the bottom) | Don't reorder the stack between renders |
| Use `stack="percentage"` when share is the story | Don't use percent stacking when absolute totals matter |
| Start the value axis at zero | Don't truncate — filled area encodes magnitude |
| Stack only non-negative values | Don't stack data that can be negative |
| Provide a data table alternative | Don't make the chart the only access |
| Honour reduced motion | Don't force the entrance animation |

---

## Patterns

```html
<md-area-chart id="c" label="Storage by type" height="320px"></md-area-chart>

<script type="module">
  const c = document.getElementById('c');
  c.xAxis  = { data: ['Jan', 'Feb', 'Mar', 'Apr'] };
  c.series = [
    { label: 'Documents', data: [12, 15, 14, 18] },
    { label: 'Media',     data: [30, 34, 41, 44] },
    { label: 'Other',     data: [5, 6, 6, 7] },
  ];
  c.valueFormatter = (v) => `${new Intl.NumberFormat('en-US').format(v ?? 0)} GB`;
  c.addEventListener('mdReady', () => console.log('drawn'));
</script>
```

```html
<!-- A forecast band with the actual line inside it -->
<md-area-chart id="band" label="Load forecast" stack="none"></md-area-chart>
<script type="module">
  const band = document.getElementById('band');
  band.xAxis  = { data: ['Mon', 'Tue', 'Wed', 'Thu'] };
  band.series = [
    { label: 'Confidence', range: [[8, 14], [9, 16], [11, 19], [10, 21]] },
    { label: 'Actual', data: [11, 12, 15, 16] },
  ];
</script>
```

```html
<!-- Share of total over time -->
<md-area-chart stack="percentage" label="Traffic share"></md-area-chart>

<!-- Streamgraph -->
<md-area-chart stack="silhouette" legend="bottom" label="Genres over time"></md-area-chart>

<!-- Single cumulative measure -->
<md-area-chart stack="none" label="Disk used"></md-area-chart>

<!-- Dense range with a zoom band -->
<md-area-chart zoom="slider"></md-area-chart>
```

## Anti-patterns

| ❌ Wrong | ✅ Right | Why |
|---|---|---|
| Assuming `stack="none"` is the default | It is `"normal"` here | Differs from `md-line-chart`. |
| `stack="percent"` | `stack="percentage"` | `percent` is not a value the prop accepts. |
| Stacking values that can be negative | `md-line-chart` | Stacks assume non-negative. |
| `data: [{ x, y }]` on a series | Use `xAxis.data` + bare y values | Per-point x is `md-line-chart` only. |
| Setting both `data` and `range` on one series | Pick one | `range` wins; `data` is ignored. |
| `series` as an HTML attribute | Assign it in JS | Arrays don't cross the attribute boundary. |
| `chart.setZoom(0.6, 1)` | `chart.setZoom(24, 40)` | Zoom takes absolute data indices, not fractions. |
| Comparing independent series' shapes on a stacked area | `md-line-chart` | Only the bottom band reads truthfully. |
| Eight stacked bands | Aggregate to a few | Middle bands become unreadable. |
| Reordering the stack between renders | Keep the order stable | Readers track bands by position. |
| Truncated y-axis | Start at zero | Area encodes magnitude. |
| `toDataURL()` before `mdReady` | Wait for the event | Nothing drawn yet. |
| Chart in a hidden container with no `resize()` | Call it on reveal | Renders at zero size. |

## Accessibility, RTL, density, i18n

**Accessibility**
- The host is `role="figure"` with a generated `aria-label` summary (`summary`
  replaces it wholesale), and the plot is a focusable `role="application"`
  region named by `label-plot`. Arrow keys move a keyboard cursor, Home/End jump
  to the ends, Escape leaves; each move is announced through a polite live
  region built from `label-point`.
- A screen-reader-only data table is rendered inside the component;
  `tableLabels` translates its column headings. **Provide the numbers as a
  visible table** wherever precision matters.
- Stacked bands are distinguished by colour and order — provide the legend and
  don't rely on hue alone. With `stack="percentage"`, say in the surrounding
  copy that the values are shares.
- The zoom slider is an `md-slider`; translate `label-zoom-start` /
  `label-zoom-end`.
- `loading` names the overlay with `loading-label`.
- The engine already honours `prefers-reduced-motion`; `no-animation` turns the
  entrance off outright.

**RTL** — the finished frame is mirrored under `dir="rtl"`: the value axis and
its gutter move to the right, the x axis runs right-to-left, and the legend's
**logical** anchors (`top-start`, `top-end`, `bottom-start`, `bottom-end`) swap
sides. `legend="left"` and `legend="right"` are physical by name and do **not**
swap — they stay on the side they name. Glyphs are left to the browser, never
reversed.

**Density** — `density="-1"` through `density="-4"` tighten the padding, corner
radius and minimum height. Rung `0` is the uncompacted default and has no rule
of its own. To step *out* of an inherited `data-density` rung, set
`style="--md-sys-density-scale: 0"` — `density="0"` will not do it.

**i18n** — set `locale` for the default number/date formatting, or take it over
with `valueFormatter` / axis `valueFormatter`, which always win. Translate
`label`, `subtitle`, `summary`, `label-empty`, `loading-label`, `label-plot`,
`label-point` (keeping `%x%` / `%values%`), `tableLabels` and the zoom labels.

## Related components

`md-line-chart` · `md-bar-chart` · `md-pie-chart` · `md-sparkline` ·
`md-slider` · `md-progress-indicator`

## Theming

| Custom property | Purpose | Default |
|---|---|---|
| `--md-area-chart-block-size` | Explicit chart height | `auto` |
| `--md-area-chart-min-block-size` | Floor the height never drops below | `max(120px, 160px + density × 8px)` |
| `--md-area-chart-aspect-ratio` | Ratio used when no block-size is set | `16 / 9` |
| `--md-area-chart-background` | Chart surface fill | `--md-sys-color-surface-container-low` |
| `--md-area-chart-padding` | Inset between host edge and canvas | `max(8px, 16px + density × 2px)` |
| `--md-area-chart-shape` | Corner radius of the chart surface | `max(8px, 16px + density × 2px)` |
| `--md-area-chart-empty-color` | Empty-state text colour | `--md-sys-color-on-surface-variant` |
| `--md-area-chart-empty-background` | Empty-state overlay fill | the chart background |
| `--md-area-chart-empty-font` | Empty-state font family | body-medium family |
| `--md-area-chart-empty-font-size` | Empty-state font size | body-medium size (14px) |
| `--md-area-chart-empty-icon-size` | Icon slotted into the empty state | `40px` |
| `--md-area-chart-zoom-size` | Height reserved for the zoom slider | `28px` |
| `--md-area-chart-zoom-track-color` | Zoom slider track | `--md-sys-color-surface-container-highest` |
| `--md-area-chart-zoom-window-color` | Zoom slider selected window | `--md-sys-color-secondary-container` |
| `--md-area-chart-zoom-handle-color` | Zoom thumb + drag-band edge | `--md-sys-color-primary` |
| `--md-area-chart-zoom-band-color` | Drag-to-zoom selection fill | 16% `--md-sys-color-primary` |

The fill strength is the `fill-opacity` prop, not a custom property. Series
colours come from the MD3 palette: set `series[].color` to an MD3 role
(`'primary'`, `'tertiary'`, `'success'`, …) or any CSS colour, and it re-themes
with the tokens.

**CSS parts** — `header`, `canvas`, `empty`, `loading`, `footer`, `zoom`,
`zoom-slider`, `zoom-pan`, `zoom-band`, `zoom-track`, `zoom-window`,
`zoom-handle`, plus the engine-set `plot-canvas`, `legend` and `tooltip`.

```css
md-area-chart {
  --md-area-chart-background: transparent;
  --md-area-chart-aspect-ratio: 21 / 9;
}
```

<!-- Auto Generated Below -->


## Overview

md-area-chart — Material Design 3 area / streamgraph chart,
rendered by the in-house engine (Canvas2D + a DOM text
overlay). No ECharts.

Differences from `md-line-chart`:
  • the line is always filled with a gradient
  • stacking defaults to `'normal'` (areas stack additively)
  • supports the `silhouette` streamgraph baseline
  • markers are off by default

## Properties

| Property            | Attribute            | Description                                                                                                                                                                                                                                                                                           | Type                                                                                                                                    | Default                                                                                                          |
| ------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `animation`         | `animation`          | Entry-animation variant: `expressive` (default), `grow`, `fade`, `draw`, or `none`.                                                                                                                                                                                                                   | `"draw" \| "expressive" \| "fade" \| "grow" \| "none" \| "stagger"`                                                                     | `'expressive'`                                                                                                   |
| `animationDuration` | `animation-duration` | Entry-animation duration override in ms (≤ 0 disables).                                                                                                                                                                                                                                               | `number \| undefined`                                                                                                                   | `undefined`                                                                                                      |
| `axisTicks`         | `axis-ticks`         | Draw small perpendicular tick marks on the axes.                                                                                                                                                                                                                                                      | `boolean`                                                                                                                               | `false`                                                                                                          |
| `connectNulls`      | `connect-nulls`      |                                                                                                                                                                                                                                                                                                       | `boolean`                                                                                                                               | `false`                                                                                                          |
| `curve`             | `curve`              |                                                                                                                                                                                                                                                                                                       | `"linear" \| "monotone" \| "smooth" \| "step" \| "step-before" \| "step-middle"`                                                        | `'smooth'`                                                                                                       |
| `density`           | `density`            | Local density rung. Drives the same `--md-sys-density-scale` signal that a global `data-density` ancestor sets, so a local value simply overrides the inherited one. 0 = default, -4 = ultra-compact.                                                                                                 | `-1 \| -2 \| -3 \| -4 \| 0`                                                                                                             | `0`                                                                                                              |
| `fillOpacity`       | `fill-opacity`       | Fill opacity for the gradient (0..1).                                                                                                                                                                                                                                                                 | `number`                                                                                                                                | `0.55`                                                                                                           |
| `grid`              | `grid`               | Gridlines: horizontal (y ticks), vertical (x ticks), both, or none.                                                                                                                                                                                                                                   | `"both" \| "horizontal" \| "none" \| "vertical"`                                                                                        | `'horizontal'`                                                                                                   |
| `heightProp`        | `height`             |                                                                                                                                                                                                                                                                                                       | `string \| undefined`                                                                                                                   | `undefined`                                                                                                      |
| `inverted`          | `inverted`           | Transpose the axes: the category / time axis runs down the side and values run across the bottom. Suits long category names (they read horizontally instead of rotated) and quantities naturally read as depth — altitude, ocean depth, a drill core. `stack` applies as usual, along the value axis. | `boolean`                                                                                                                               | `false`                                                                                                          |
| `label`             | `label`              |                                                                                                                                                                                                                                                                                                       | `string`                                                                                                                                | `''`                                                                                                             |
| `labelEmpty`        | `label-empty`        | Message shown when `series` is empty. The `empty` slot overrides it.                                                                                                                                                                                                                                  | `string`                                                                                                                                | `'No data to display'`                                                                                           |
| `labelPlot`         | `label-plot`         | Instructions announced when the plot receives keyboard focus. The plot is focusable so a keyboard user can walk the data with the arrow keys; this is what tells them so.                                                                                                                             | `string`                                                                                                                                | `'Chart data. Use the arrow keys to move between points, Home and End for the first and last, Escape to leave.'` |
| `labelPoint`        | `label-point`        | Template for the live announcement as keyboard focus moves. `%x%` is the axis value, `%values%` the series readings at it.                                                                                                                                                                            | `string`                                                                                                                                | `'%x%: %values%'`                                                                                                |
| `labelZoomEnd`      | `label-zoom-end`     | Accessible name for the zoom slider's end thumb.                                                                                                                                                                                                                                                      | `string`                                                                                                                                | `'Zoom range end'`                                                                                               |
| `labelZoomStart`    | `label-zoom-start`   | Accessible name for the zoom slider's start thumb.                                                                                                                                                                                                                                                    | `string`                                                                                                                                | `'Zoom range start'`                                                                                             |
| `legend`            | `legend`             |                                                                                                                                                                                                                                                                                                       | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "none" \| "right" \| "top" \| "top-end" \| "top-start"`                        | `'top-end'`                                                                                                      |
| `lineWidth`         | `line-width`         | Line stroke width in px, for every series. Per-series `series[].lineWidth` wins.                                                                                                                                                                                                                      | `number \| undefined`                                                                                                                   | `undefined`                                                                                                      |
| `loading`           | `loading`            | Show the loading overlay instead of the plot.                                                                                                                                                                                                                                                         | `boolean`                                                                                                                               | `false`                                                                                                          |
| `loadingLabel`      | `loading-label`      | Text (and the spinner's accessible name) for the loading overlay.                                                                                                                                                                                                                                     | `string`                                                                                                                                | `'Loading chart…'`                                                                                               |
| `locale`            | `locale`             | BCP-47 locale for the DEFAULT number / date formatting (axis ticks, tooltip values, screen-reader table). Empty follows the browser; an explicit `valueFormatter` always wins.                                                                                                                        | `string`                                                                                                                                | `''`                                                                                                             |
| `markSize`          | `mark-size`          | Marker RADIUS in px, for every series. Per-series `series[].markSize` wins.                                                                                                                                                                                                                           | `number \| undefined`                                                                                                                   | `undefined`                                                                                                      |
| `noAnimation`       | `no-animation`       | Disable all animation (shorthand for `animation="none"`).                                                                                                                                                                                                                                             | `boolean`                                                                                                                               | `false`                                                                                                          |
| `series`            | --                   |                                                                                                                                                                                                                                                                                                       | `MdChartSeries[]`                                                                                                                       | `[]`                                                                                                             |
| `seriesLabels`      | `series-labels`      | Label each series at its last point, so the name follows the end of the band — for racing / progression charts.                                                                                                                                                                                       | `boolean`                                                                                                                               | `false`                                                                                                          |
| `showLabels`        | `show-labels`        | Print each point's value as a data label beside its marker.                                                                                                                                                                                                                                           | `boolean`                                                                                                                               | `false`                                                                                                          |
| `showLine`          | `show-line`          | Draw the line on top of each area's fill. Default `true`. Set `false` for a fill-only area — useful when `fillOpacity` is high (a fully-opaque fill is the same colour as the line, so the line reads as part of it). A per-series `series[].stroke` still wins over this.                            | `boolean`                                                                                                                               | `true`                                                                                                           |
| `showMarks`         | `show-marks`         |                                                                                                                                                                                                                                                                                                       | `boolean`                                                                                                                               | `false`                                                                                                          |
| `stack`             | `stack`              | Default stacking is `'normal'` (additive).                                                                                                                                                                                                                                                            | `"none" \| "normal" \| "percentage" \| "silhouette" \| "wiggle"`                                                                        | `'normal'`                                                                                                       |
| `subtitle`          | `subtitle`           | Sub-title, drawn under the title in the muted text colour.                                                                                                                                                                                                                                            | `string \| undefined`                                                                                                                   | `undefined`                                                                                                      |
| `summary`           | `summary`            | Replaces the generated `aria-label` outright. The default summary is assembled in English ("Traffic, Area chart, with 3 series, from Jan to Dec."); rather than translate it piecewise, hand over the whole sentence built in your own language.                                                      | `string`                                                                                                                                | `''`                                                                                                             |
| `tableLabels`       | --                   | Translatable chrome for the screen-reader data table. `%shown%` and `%total%` are substituted in `truncated`.                                                                                                                                                                                         | `undefined \| { x?: string \| undefined; index?: string \| undefined; series?: string \| undefined; truncated?: string \| undefined; }` | `undefined`                                                                                                      |
| `titleAlign`        | `title-align`        | Title alignment over the plot: `start` (left), `center`, or `end` (right).                                                                                                                                                                                                                            | `"center" \| "end" \| "start"`                                                                                                          | `'start'`                                                                                                        |
| `tooltip`           | `tooltip`            |                                                                                                                                                                                                                                                                                                       | `"axis" \| "item" \| "none"`                                                                                                            | `'axis'`                                                                                                         |
| `tooltipRenderer`   | --                   | Replace the tooltip's content. See `md-line-chart`'s `tooltipRenderer`.                                                                                                                                                                                                                               | `((context: MdChartTooltipContext) => MdChartTooltipContent) \| undefined`                                                              | `undefined`                                                                                                      |
| `valueFormatter`    | --                   |                                                                                                                                                                                                                                                                                                       | `((value: number \| null \| undefined) => string) \| undefined`                                                                         | `undefined`                                                                                                      |
| `xAxis`             | --                   |                                                                                                                                                                                                                                                                                                       | `MdChartAxis \| undefined`                                                                                                              | `undefined`                                                                                                      |
| `yAxis`             | --                   |                                                                                                                                                                                                                                                                                                       | `MdChartAxis \| undefined`                                                                                                              | `undefined`                                                                                                      |
| `zoom`              | `zoom`               |                                                                                                                                                                                                                                                                                                       | `"both" \| "inside" \| "none" \| "slider"`                                                                                              | `'none'`                                                                                                         |


## Events

| Event           | Description                                                                                                                                         | Type                                                                                       |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| `mdAreaClick`   | Fires when a series' filled area is clicked — the band between its line and its base (its own band when stacked), excluding its line and points.    | `CustomEvent<MdChartClickDetail<MdChartSeries>>`                                           |
| `mdAxisClick`   | Fires when the plot background is clicked (inside the plot, but not on a mark, line or area): the nearest x plus every visible series' value there. | `CustomEvent<MdChartAxisClickDetail>`                                                      |
| `mdHover`       |                                                                                                                                                     | `CustomEvent<MdChartHoverDetail>`                                                          |
| `mdLegendClick` |                                                                                                                                                     | `CustomEvent<{ seriesIndex: number; seriesId?: string \| undefined; selected: boolean; }>` |
| `mdLineClick`   | Fires when a series' drawn line is clicked *between* its data points (a click on a point emits `mdMarkerClick` instead).                            | `CustomEvent<MdChartClickDetail<MdChartSeries>>`                                           |
| `mdMarkerClick` |                                                                                                                                                     | `CustomEvent<MdChartClickDetail<MdChartSeries>>`                                           |
| `mdReady`       |                                                                                                                                                     | `CustomEvent<void>`                                                                        |
| `mdZoom`        | Fires when the zoom window changes (drag, slider or `setZoom`/`resetZoom`).                                                                         | `CustomEvent<{ startIndex: number; endIndex: number; reset: boolean; }>`                   |


## Methods

### `getInstance() => Promise<LineChartEngine | null>`



#### Returns

Type: `Promise<LineChartEngine | null>`



### `replay() => Promise<void>`

Replay the entry animation from the start (uses the current `animation`).

#### Returns

Type: `Promise<void>`



### `resetZoom() => Promise<void>`

Drop the zoom window and show the full range.

#### Returns

Type: `Promise<void>`



### `resize() => Promise<void>`



#### Returns

Type: `Promise<void>`



### `setZoom(startIndex: number, endIndex: number) => Promise<void>`

Zoom to an absolute index range.

#### Parameters

| Name         | Type     | Description |
| ------------ | -------- | ----------- |
| `startIndex` | `number` |             |
| `endIndex`   | `number` |             |

#### Returns

Type: `Promise<void>`



### `toDataURL() => Promise<string>`



#### Returns

Type: `Promise<string>`




## Shadow Parts

| Part            | Description |
| --------------- | ----------- |
| `"canvas"`      |             |
| `"empty"`       |             |
| `"footer"`      |             |
| `"header"`      |             |
| `"loading"`     |             |
| `"zoom"`        |             |
| `"zoom-band"`   |             |
| `"zoom-pan"`    |             |
| `"zoom-slider"` |             |


## Dependencies

### Depends on

- [md-slider](../md-slider)
- [md-progress-indicator](../md-progress-indicator)

### Graph
```mermaid
graph TD;
  md-area-chart --> md-slider
  md-area-chart --> md-progress-indicator
  style md-area-chart fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*

AWC UI Operator’s Manual 

# main-llm.md — AWC UI build director

<!-- llm:meta
role: director
audience: llm
library: "@awc-ui/core"
component-count: 57
sub-component-count: 24
manual-count: 81
per-component-docs: ./packages/core/src/components/<tag>/readme.md
-->

**You are building a web app with AWC UI, a Material Design 3 web-component
library.** This file is the entry point and the only document you need before
writing UI code. Everything here is self-contained: tokens, recipes,
composition rules and the ship checklist. Per-component detail lives in
`./packages/core/src/components/<tag>/readme.md` — e.g.
[`md-button`](./packages/core/src/components/md-button/readme.md).

Your job, in order:

1. **Interview** the user (§1). Do not skip it and do not guess.
2. **Lock the configuration** their answers imply (§2) and bootstrap it (§3–§4).
3. **Route every UI need through the decision matrix** (§5) — never pick a
   component by name-similarity.
4. **Load the component's readme.md before writing a single line of its
   markup** (§6). The file is
   `./packages/core/src/components/<tag>/readme.md` — read it in full, do not
   skim it, and do not write the markup from memory of a similar library. Each
   one has a `When NOT to use`, a `Do / Don't` table sourced from
   [m3.material.io](https://m3.material.io), and an `Anti-patterns` table of
   mistakes models actually make. If you are about to use three components,
   load all three readmes first.
5. **Check what nests inside what** (§7) and start from a recipe (§8) rather
   than from a blank page.
6. **Apply the universal rules** (§9) — the API, content and accessibility
   rules every component is bound by, and the ones §10 checks you against.
7. **Run the ship checklist** (§10) before declaring done.

**Fail closed.** If you cannot satisfy a step — no component fits, a token
doesn't exist, an accessible name has nowhere to come from — say so and ask.
Do not invent an `md-*` tag, a prop, or a token. If it is not in this file or
in the component's manual, it does not exist.

---

## §1 — Interview the user

Ask these **one at a time**, in this order. Each answer closes off decisions
downstream, so don't batch them into a wall of questions. Skip a question only
if the user has already answered it unprompted.

If the user says "just pick sensible defaults", use the **bold** option and tell
them what you chose.

### 1.1 Scope and shape

1. **What is the app?** One or two sentences — domain, primary job, who uses it.
2. **What kind of surface is it?**
   - Internal tool / admin console / dashboard
   - Data-heavy CRUD application
   - Consumer-facing product
   - Marketing or content site
   - Mobile-first / PWA
3. **Which framework?** React · Angular · Vue · Svelte · **plain HTML** ·
   Next · Nuxt · SvelteKit · Astro
4. **Does it server-render?** (SSR/SSG, or **client-only SPA**)
5. **Roughly how many distinct screens**, and what are the top 3?

### 1.2 Look and feel

6. **Density** — how much information per screen?
   - `0` — **default**, comfortable, touch-friendly
   - `-1` / `-2` — compact; typical for admin consoles
   - `-3` / `-4` — ultra-compact; dense data tables, trading/ops screens
7. **Theme** — light only, dark only, or **both with a user toggle**?
   Does it follow the OS preference?
8. **Brand color** — a seed/primary color, or **stock MD3 palette**?
9. **Expressive motion** — keep **ripple and shape-morph on** (default), or turn
   them off for a flatter, more utilitarian feel?
10. **Shape language** — **rounded** (MD3 default) or squared?

### 1.3 Internationalization

11. **How many locales**, and which?
12. **Any RTL locales** (Arabic, Hebrew, Farsi, Urdu)? — this changes layout
    verification and directional-icon handling.
13. **Which i18n engine?** (i18next, vue-i18n, ngx-translate, Paraglide, custom)
    Components are engine-agnostic — you localize in the consumer layer.
14. **Locale-formatted values** — dates, numbers, currency? Which locale drives
    `Intl`?

### 1.4 Data and forms

15. **Is there significant tabular data?** How many rows, and is it
    server-paged? (Drives how you page `md-table` — it holds the state, you
    supply each page of rows.)
16. **Are there charts?** Which questions should they answer?
17. **How heavy are the forms?** Validation rules, async validation, multi-step?
18. **Rich text editing anywhere?** — ⚠️ **AWC UI has no RTE component.** If yes,
    you must integrate a third-party editor (TipTap, Lexical, Quill) and style
    it to the MD3 tokens yourself. Confirm this with the user explicitly.

### 1.5 Constraints

19. **Accessibility target** — **WCAG 2.1 AA** (what the library is tested to),
    or stricter?
20. **Browser/device support floor?**
21. **Anything already decided** you must not change — existing design system,
    router, state library, CSS approach?

---

## §2 — Map answers to configuration

| Answer | What you set |
|---|---|
| Admin console / data-heavy | `data-density="-1"` or `-2` on `<html>`; prefer `size="xs"`/`"sm"` on actions |
| Consumer / marketing | leave density alone (`0` is the default); larger button sizes (`md`/`lg`) for CTAs |
| Mobile-first | `md-navigation-bar` + `md-fab`; avoid `md-navigation-rail`, `md-transfer-list`, wide tables |
| Desktop-first | `md-navigation-rail` or `md-app-bar`; rail over bottom bar |
| Dark mode | `data-theme="dark"` on `<html>`; wire a toggle, and mirror OS via `prefers-color-scheme` |
| Both themes with toggle | persist the choice; set the attribute before first paint to avoid a flash |
| Brand color | override the `--md-sys-color-*` roles in your own stylesheet, loaded after the tokens (§4.2) |
| Flat / utilitarian | `data-ripple="off"` and `data-shape-morph="off"` on `<html>` |
| Any RTL locale | `dir="rtl"` on `<html>`; add `mirror-icon` to `md-button`s with directional glyphs; swap the glyph name yourself everywhere else (§4.5) |
| Multiple locales | build a dictionary in the consumer layer and feed component text props from it; never hardcode strings in markup |
| `Intl`-formatted values | pass a `locale` prop where a component exposes one; format everything else before it reaches the component |
| SSR | import from `@awc-ui/core/hydrate` on the server; use the client/server wrappers in `@awc-ui/react` |
| Heavy forms | components are form-associated via `ElementInternals` — use a real `<form>`, `md-button type="submit"`, and native `required` (§4.7) |
| Rich text | integrate a third-party editor; there is no `md-rich-text` |

### 2.1 Global switches — the complete set

All are attributes on `<html>` (or any ancestor; the nearest one wins).

```html
<html
  lang="en"
  dir="ltr"                  <!-- or rtl -->
  data-theme="dark"          <!-- omit for light -->
  data-density="-1"          <!-- -1 … -4; see below -->
  data-ripple="off"          <!-- default on -->
  data-shape-morph="off"     <!-- default on -->
>
```

**`data-density="0"` is inert.** No `[density="0"]` rule exists — density `0` is
simply the base values on `:root`, and a `0` rule would pin them onto every
element (reflected props write `density="0"` almost everywhere) and break global
inheritance. So the *overriding* range is `-1 … -4`. To escape an inherited rung
for one subtree, reset the scale directly:

```css
.opt-out-of-density { --md-sys-density-scale: 0; }
```

Per-component overrides beat the global one: a `density` prop, or
`ripple="off"` / `shape-morph="off"` on the element. **53 of the 57 top-level
components expose a `density` prop.** The four that don't: `md-divider`,
`md-ripple`, `md-sparkline`, `md-tabs`. (Nine sub-components also lack one —
they inherit density from the parent that owns their layout.)

---

## §3 — Install and bootstrap

```bash
npm install @awc-ui/core
```

**Register everything (recommended).** Two imports, once per app entry — one
defines every component, one loads the tokens. Both come from `@awc-ui/core`
itself, so this path needs no second package:

```ts
import { defineCustomElements } from '@awc-ui/core/loader';
import '@awc-ui/core/css/tokens.css';

defineCustomElements(window);
```

`@awc-ui/core/css/tokens.css` is the complete, self-contained token sheet —
light and dark colour roles, shape, elevation, motion, typescale, spacing and
z-index. It is the same set documented in §4.1.

**One-line alternative.** `@awc-ui/core/define` does both steps in a single
import. It loads the package's own token sheet, so it needs nothing else
installed:

```ts
import '@awc-ui/core/define'; // defines every component + loads the token sheet
```

`define` is client-only (it eval-guards `window`) and, because it imports CSS,
it needs a bundler. Never import it into a server graph.

**Per-component registration**, for size-sensitive bundles — load the token
sheet once yourself:

```ts
import '@awc-ui/core/css/tokens.css';
import '@awc-ui/core/components/md-button';
import '@awc-ui/core/components/md-text-field';
```

**Framework wrappers** — use these instead of raw elements; they handle
registration, typed props, and event binding. Below the version floor, drop to
the raw custom elements and the `loader` import above.

| Framework | Package | Requires |
|---|---|---|
| React / Next | `@awc-ui/react` | React 18+ |
| Angular | `@awc-ui/angular` (`AwcUiModule`) | Angular 17+ |
| Vue / Nuxt | `@awc-ui/vue` | Vue 3 |
| Svelte / SvelteKit | `@awc-ui/svelte` | Svelte 4+ |
| Plain HTML / Astro | `@awc-ui/core/loader` | — |

**SSR** — `@awc-ui/core/hydrate` renders Declarative Shadow DOM on the server.
`@awc-ui/react` ships matching client/server wrappers. Keep `define` and
`loader` out of the server graph; both are browser entries.

**Fonts** — components expect Roboto and Material Symbols Outlined to be
available. The library does **not** inject them. Every `icon="…"` prop renders a
Material Symbols glyph inside shadow DOM, so the font must be registered at the
**document** level (font registration crosses shadow boundaries; class rules do
not — the components declare the class rule inside their own roots):

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
```

To swap the whole library to a different Material Symbols cut, set
`--md-sys-icon-font-family` on `:root` and load the matching `@font-face`.

---

## §4 — Global configuration reference

### 4.1 The token system

All AWC UI styling resolves to design tokens. **Never hardcode hex colours,
pixel radii, shadows, or font stacks** — they break theming, dark mode, density
and RTL in one stroke. Every value below is a real custom property defined by
`@awc-ui/tokens`; you may read them, and you may override them.

#### Color roles

Light is the default; `[data-theme="dark"]` swaps the palette. Every role has a
matching `on-` role for content drawn on top of it.

| Token | Light | Dark | Typical usage |
|---|---|---|---|
| `--md-sys-color-primary` | `#6750A4` | `#D0BCFF` | Filled buttons, active states |
| `--md-sys-color-on-primary` | `#FFFFFF` | `#381E72` | Text/icons on primary |
| `--md-sys-color-primary-container` | `#EADDFF` | `#4F378B` | FAB, selected segments |
| `--md-sys-color-on-primary-container` | `#21005D` | `#EADDFF` | Text on primary-container |
| `--md-sys-color-secondary` | `#625B71` | `#CCC2DC` | Secondary accents |
| `--md-sys-color-secondary-container` | `#E8DEF8` | `#4A4458` | Tonal buttons, chips |
| `--md-sys-color-tertiary` | `#7D5260` | `#EFB8C8` | Tertiary accents |
| `--md-sys-color-tertiary-container` | `#FFD8E4` | `#633B48` | Tertiary surfaces |
| `--md-sys-color-error` | `#B3261E` | `#F2B8B5` | Error / destructive |
| `--md-sys-color-on-error` | `#FFFFFF` | `#601410` | Content on error |
| `--md-sys-color-error-container` | `#F9DEDC` | `#8C1D18` | Error surfaces |
| `--md-sys-color-surface` | `#FFFBFE` | `#1C1B1F` | Page / card background |
| `--md-sys-color-on-surface` | `#1C1B1F` | `#E6E1E5` | Body text |
| `--md-sys-color-surface-variant` | `#E7E0EC` | `#49454F` | Muted fills |
| `--md-sys-color-on-surface-variant` | `#49454F` | `#CAC4D0` | Secondary text, icons |
| `--md-sys-color-surface-container-lowest` | `#FFFFFF` | `#0F0D13` | Lowest surface tier |
| `--md-sys-color-surface-container-low` | `#F7F2FA` | `#1D1B20` | Card / elevated button bg |
| `--md-sys-color-surface-container` | `#F3EDF7` | `#211F26` | Default container tier |
| `--md-sys-color-surface-container-high` | `#ECE6F0` | `#2B2930` | Dialog / menu surfaces |
| `--md-sys-color-surface-container-highest` | `#E6E0E9` | `#36343B` | Highest surface tier |
| `--md-sys-color-outline` | `#79747E` | `#938F99` | Borders (3:1 contrast) |
| `--md-sys-color-outline-variant` | `#CAC4D0` | `#49454F` | Dividers (low contrast) |
| `--md-sys-color-inverse-surface` | `#313033` | `#E6E1E5` | Snackbar, inverse chips |
| `--md-sys-color-inverse-on-surface` | `#F4EFF4` | `#313033` | Content on inverse-surface |
| `--md-sys-color-scrim` | `#000000` | `#000000` | Modal scrims |

**Semantic status roles** — beyond the baseline M3 palette, the library adds
`success`, `warning` and `info`, each with `on-`, `-container` and
`on-…-container` companions, in both themes, AA-verified. Used by `md-chip`,
`md-badge`, `md-meter`, `md-status-dot`.

| Token | Light | Dark |
|---|---|---|
| `--md-sys-color-success` | `#2E6B4F` | `#9DD5B0` |
| `--md-sys-color-success-container` | `#B8F0CE` | `#14512F` |
| `--md-sys-color-warning` | `#7A5900` | `#EFC148` |
| `--md-sys-color-warning-container` | `#FFDF9B` | `#5C4200` |
| `--md-sys-color-info` | `#38608F` | `#A2C9FE` |
| `--md-sys-color-info-container` | `#D3E4FF` | `#1E4975` |

#### Shape tokens

| Token | Value | Typical usage |
|---|---|---|
| `--md-sys-shape-corner-none` | `0px` | Square edges |
| `--md-sys-shape-corner-extra-small` | `4px` | Snackbar, small chips |
| `--md-sys-shape-corner-small` | `8px` | Cards (outlined), small surfaces |
| `--md-sys-shape-corner-medium` | `12px` | Cards (default), inputs |
| `--md-sys-shape-corner-large` | `16px` | Dialogs, large cards |
| `--md-sys-shape-corner-extra-large` | `28px` | Bottom sheets |
| `--md-sys-shape-corner-full` | `9999px` | Buttons, chips, FAB |

Partial-corner variants also exist for surfaces that meet an edge:
`--md-sys-shape-corner-extra-small-top`, `-large-top`, `-large-end`,
`-extra-large-top`. Their values are four-value `border-radius` shorthands
(e.g. `16px 16px 0px 0px`), so assign them to `border-radius`, not to a single
corner.

#### Elevation tokens

`-0` is the keyword `none`; `-1` through `-5` are complete `box-shadow` values,
and those five are **re-declared with deeper shadows under `[data-theme="dark"]`**
— so always use the token rather than copying its value.

| Token | When |
|---|---|
| `--md-sys-elevation-0` | `none` — resting cards, flat surfaces |
| `--md-sys-elevation-1` | Elevated buttons and cards at rest |
| `--md-sys-elevation-2` | Hover bump |
| `--md-sys-elevation-3` | FAB, menus, dialogs at rest |
| `--md-sys-elevation-4` – `-5` | Reserved for the most prominent surfaces |

#### Motion tokens

Durations come in four families of four: `short1…4` (50/100/150/200ms),
`medium1…4` (250/300/350/400ms), `long1…4` (450/500/550/600ms), and
`extra-long1…4` (700/800/900/1000ms).

| Token | Value | When |
|---|---|---|
| `--md-sys-motion-duration-short2` | `100ms` | Buttons, ripples, state layers |
| `--md-sys-motion-duration-medium2` | `300ms` | Dialogs, sheets, menus |
| `--md-sys-motion-duration-long2` | `500ms` | Large surface transitions |
| `--md-sys-motion-duration-extra-long1` | `700ms` | Ambient / chart entrances |
| `--md-sys-motion-easing-standard` | `cubic-bezier(0.2, 0, 0, 1)` | Small utility transitions |
| `--md-sys-motion-easing-standard-accelerate` | `cubic-bezier(0.3, 0, 1, 1)` | Exits |
| `--md-sys-motion-easing-standard-decelerate` | `cubic-bezier(0, 0, 0, 1)` | Entrances |
| `--md-sys-motion-easing-emphasized` | `cubic-bezier(0.2, 0, 0, 1)` | Expressive transitions |
| `--md-sys-motion-easing-emphasized-accelerate` | `cubic-bezier(0.3, 0, 0.8, 0.15)` | Expressive exits |
| `--md-sys-motion-easing-emphasized-decelerate` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | Expressive entrances |
| `--md-sys-motion-easing-linear` | `linear` | Progress, indeterminate loops |

> `--md-sys-motion-easing-emphasized` deliberately equals the standard curve:
> the full M3 emphasized curve is a two-phase path interpolator that CSS cannot
> express. The accelerate and decelerate halves *are* expressible, and are the
> ones to reach for.

MD3 Expressive also ships spring pairs, each an easing plus its natural
duration: `--md-sys-motion-spring-{spatial,effects}-{fast,default,slow}-easing`
and `…-duration`. Spatial = position/size/shape; effects = colour/opacity.

#### State-layer opacities

| Token | Value |
|---|---|
| `--md-sys-state-hover-state-layer-opacity` | `0.08` |
| `--md-sys-state-focus-state-layer-opacity` | `0.12` |
| `--md-sys-state-pressed-state-layer-opacity` | `0.12` |
| `--md-sys-state-dragged-state-layer-opacity` | `0.16` |
| `--md-sys-state-disabled-container-opacity` | `0.12` |
| `--md-sys-state-disabled-content-opacity` | `0.38` |

#### Typography, spacing and layering

- **Typescale** — `--md-sys-typescale-<role>-<size>-*` for
  `display`/`headline`/`title`/`label`/`body` × `large`/`medium`/`small`. Each
  role exposes `-font-family`, `-font-size`, `-line-height`, `-font-weight`,
  `-letter-spacing`, plus a `-font` shorthand
  (e.g. `--md-sys-typescale-headline-medium-font: 400 28px/36px Roboto, sans-serif`).
  Use the shorthand on the `font` property for headings you write yourself.
- **Spacing** — a 4px scale that tightens with density:
  `--md-sys-spacing-inset-{xs,sm,md,lg,xl}` (internal padding, 4/8/12/16/24px)
  and `--md-sys-spacing-gap-{xs,sm,md,lg}` (between siblings, 4/8/12/16px), plus
  `--md-sys-spacing-row-height` (`56px` at density 0).
- **Layering** — `--md-sys-z-index-app-bar` (100), `-navigation` (200),
  `-bottom-sheet` (300), `-popup` (1000), `-dialog-scrim` (1001), `-tooltip`
  (1500), `-snackbar` (2000). Use these instead of inventing z-indexes, or your
  overlay will land under a menu.

### 4.2 Theming and rebranding

To rebrand, redefine the role variables **after** the tokens stylesheet — both
themes, or dark mode inherits your light brand colour:

```css
:root {
  --md-sys-color-primary: #00629E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #CFE5FF;
  --md-sys-color-on-primary-container: #001D33;
}
[data-theme="dark"] {
  --md-sys-color-primary: #9BCBFF;
  --md-sys-color-on-primary: #003354;
  --md-sys-color-primary-container: #004A78;
  --md-sys-color-on-primary-container: #CFE5FF;
}
```

Per-component knobs are `--md-<component>-*` custom properties, listed in each
manual's Theming section (`--md-button-container-color`,
`--md-card-container-shape`, …). Prefer those over `::part()`, and prefer
`::part()` over reaching into shadow internals, which are unstable and will
break on any release.

**Overriding a colour role forfeits the library's contrast testing.** Re-verify
AA (4.5:1 text, 3:1 borders and dividers) after any palette change. The Theme
Generator at <https://awc-ui.dev/theme-generator> takes a seed colour, emits both
palettes as `--md-sys-color-*` overrides, and runs the WCAG checks live — use it
rather than hand-picking container and `on-` pairs.

### 4.3 Density

`data-density` steps `-1 → -4`; each rung trims ~4px of padding and touch
target, driving `--md-sys-density-scale` and the spacing tokens. `-4` is the
floor. Set it globally, override locally with the `density` prop. Do not go
below `-2` on touch-primary surfaces — you will break the 48px target.

Two details that bite:

- **`density="0"` does nothing** — see §2 for why, and for the
  `--md-sys-density-scale: 0` escape hatch.
- **`md-table` accepts two vocabularies**: the semantic `compact` / `standard` /
  `comfortable` (row heights 36 / 52 / 60px) *and* the numeric rungs. They
  compose — `density="compact"` inside a `data-density="-2"` region condenses
  further.

### 4.4 Dark mode

Set `data-theme="dark"` on `<html>` (or any ancestor — the nearest wins). The
tokens swap automatically and inherit across every shadow boundary; no
per-component code. To mirror the OS, read `prefers-color-scheme` and write the
attribute **before first paint**, or the page flashes light.

### 4.5 RTL

Layout is written with CSS logical properties, so it flips with `dir="rtl"`
without extra work. Two things still need you:

- **Directional glyphs do not flip.** Material Symbols are not auto-mirrored.
  `md-button` has a `mirror-icon` prop that mirrors its own leading/trailing
  glyph — set it on buttons using arrows, chevrons, `send`, `reply`, and leave
  it off for `add`, `search`, `favorite`. **`mirror-icon` exists only on
  `md-button`.** Everywhere else — `md-icon-button icon="…"`, `md-list-item`
  leading/trailing icons, `md-app-bar leading-icon` — swap the glyph name
  yourself (`arrow_back` ↔ `arrow_forward`).
- **Icon props you supply yourself** — e.g. `md-transfer-list`'s
  `move-right-icon` / `move-left-icon` / `move-all-*-icon` — must be swapped by
  you when the direction flips.

Never write physical CSS (`margin-left`, `padding-right`, `left`) around these
components. Use `margin-inline-start`, `padding-inline-end`, `inset-inline-end`.

### 4.6 Internationalization

Components are **i18n-engine-agnostic by design**. Every user-visible string is
either slotted content or a prop. Localize in the consumer layer: resolve your
dictionary to plain strings, then pass them in. Do not add a translation engine
inside a component. `locale` props exist only where a component computes an
`Intl`-formatted value itself: `md-date-picker`, `md-number-field`,
`md-meter`, `md-dialog`, and the charts (`md-bar-chart`, `md-line-chart`,
`md-area-chart`, `md-pie-chart`). `md-time-picker` has no
`locale` prop — it takes `format="12h" | "24h"` instead.

Templated strings keep their placeholder tokens when translated — translate
around the braces, don't remove them:

```html
<md-transfer-list count-template="{checked} / {total} ausgewählt"></md-transfer-list>
```

Other templated props: `md-autocomplete status-template`, `md-otp-field
cell-label-template`. Default prop values are English (`Search`, `Dismiss`,
`No results`, `Move selected to target`, …) — every one of them needs
translating in a localized app.

### 4.7 Forms and validation

Fourteen components are form-associated via `ElementInternals`, so they
participate in `FormData` and constraint validation like native controls:

`md-text-field` · `md-number-field` · `md-otp-field` · `md-select` ·
`md-multi-select` · `md-autocomplete` · `md-checkbox` · `md-radio` ·
`md-switch` · `md-slider` · `md-rating` · `md-date-picker` · `md-time-picker` ·
`md-button`

Rules:

- Use a real `<form>`. `md-button type="submit"` calls `form.requestSubmit()`
  (not `submit()`), so the `submit` event fires **and** built-in constraint
  validation runs. `required` genuinely blocks submit.
  `md-button type="reset"` calls `form.reset()`.
- Give every control a `name`, or it will not appear in `FormData`.
- Do **not** add hidden `<input>`s to mirror values — that's the old pattern and
  it double-submits.
- Validity changes are announced on a `mdValidityChange` event on the control.
  Error presentation is `error` + `error-text` on the field.
- Boolean state props differ by control — `md-checkbox` uses `checked`,
  `md-switch` uses **`selected`**, `md-select-option` uses `selected`. Check the
  manual; guessing `checked` on a switch silently does nothing.

---

## §5 — Component decision matrix

Route by **need**, not by name. If the need isn't listed, find the closest row
and read that component's `When NOT to use`.

### 5.1 Actions

| Need | Use | Don't use |
|---|---|---|
| Discrete labelled action | `md-button` | `md-chip`, raw `<button>` |
| Icon-only action | `md-icon-button` | `md-button` with no label |
| A destructive action | `md-button` + `md-dialog` to confirm | an unconfirmed `filled` button |
| The single most prominent screen action (mobile) | `md-fab` | a second `filled` `md-button` |
| One prominent action that expands to several | `md-fab-menu` + `md-fab-menu-item` | a stack of FABs |
| Primary action + variants of it | `md-split-button` | button + separate menu |
| 2–5 related actions as one unit | `md-button-group` | loose adjacent buttons |
| Mutually exclusive view/mode switch | `md-segmented-button-set` + `md-segmented-button` | radio buttons, tabs |
| Overflow / contextual actions | `md-menu` + `md-menu-item` | a row of text buttons |

### 5.2 Text input

| Need | Use | Don't use |
|---|---|---|
| Any single-line or multi-line text entry | `md-text-field` | raw `<input>` |
| A number with steppers and locale formatting | `md-number-field` | `md-text-field type="number"` |
| A one-time code / PIN | `md-otp-field` | a row of text fields |
| Text entry with suggestions | `md-autocomplete` | `md-select` |
| Site/app-wide search with a results surface | `md-search` | `md-text-field` with an icon |

### 5.3 Selection

| Need | Use | Don't use |
|---|---|---|
| One of many, from a list | `md-select` + `md-select-option` | radio group over ~7 options |
| One of few (2–5), all visible | `md-radio` | `md-select` |
| Several of many | `md-multi-select` | many `md-checkbox`es |
| Several of few, all visible | `md-checkbox` | `md-multi-select` |
| Instant on/off setting | `md-switch` | `md-checkbox` |
| A value in a numeric range | `md-slider` | `md-text-field type=number` |
| Subjective score | `md-rating` | slider |
| A color | `md-color-picker` | `<input type=color>` |
| Assign a subset from a bounded pool, side by side | `md-transfer-list` | two lists + buttons |
| Filter / attribute / removable entry | `md-chip` | small buttons |
| A date | `md-date-picker` | three selects |
| A time | `md-time-picker` | text field |

### 5.4 Navigation

| Need | Use | Don't use |
|---|---|---|
| Top-level destinations, mobile | `md-navigation-bar` + `md-navigation-tab` | tabs |
| Top-level destinations, desktop | `md-navigation-rail` + `md-navigation-rail-tab` | bottom bar |
| App header: title, actions, search | `md-app-bar` | a custom `<header>` |
| A dense action strip | `md-toolbar` | app bar |
| Sibling views **within** one screen | `md-tabs` + `md-tab` + `md-tab-panels` + `md-tab-panel` | navigation bar |
| Hierarchy / where-am-I | `md-breadcrumbs` + `md-breadcrumb-item` | text links |
| A linear multi-step flow | `md-stepper` + `md-step` | tabs |
| Contextual popup actions | `md-menu` + `md-menu-item`, `md-menu-item-group`, `md-sub-menu-item` | dialog |
| Hierarchical command menu (File → Export → PDF) | `md-menu` + `md-sub-menu-item` | nested dialogs |

### 5.5 Containment and feedback

| Need | Use | Don't use |
|---|---|---|
| Group related content | `md-card` | a bare `<div>` with a border |
| Blocking decision or focused task | `md-dialog` | a new page |
| Critical error the user must acknowledge | `md-dialog` | `md-snackbar` |
| Supplementary content from the bottom (mobile) | `md-bottom-sheet` | dialog |
| Supplementary content from the side (desktop) | `md-side-sheet` | dialog |
| Brief confirmation of an action, optionally undoable | `md-snackbar` | dialog, alert |
| Explain a control on hover/focus | `md-tooltip` | a dialog or inline hint |
| Progressive disclosure of sections | `md-accordion` + `md-accordion-item` | tabs |
| Visual separation | `md-divider` | a styled `<hr>` |
| A vertical set of records | `md-list` + `md-list-item` | a table |
| Determinate/indeterminate progress | `md-progress-indicator` | spinner GIF |
| Brand-consistent page/content loading | `md-loading-indicator` | custom spinner |
| Content-shaped loading placeholder | `md-skeleton` | a spinner over the whole page |
| Count or status on an element | `md-badge` | superscript text |
| Compact status dot | `md-status-dot` | a colored emoji |
| Read-only value within a known range (quota, battery) | `md-meter` | `md-progress-indicator` |
| A person or entity image/initials | `md-avatar` | a raw `<img>` |
| Touch feedback inside a custom control | `md-ripple` | custom CSS animation |

### 5.6 Data

| Need | Use | Don't use |
|---|---|---|
| Any table | `md-table-container` wrapping `md-table`, with `-head`/`-body`/`-row`/`-cell`/`-foot` inside the table and `-toolbar`/`-pagination` beside it in the container (§7.1) | a native `<table>` |
| Sorting, selection, paging on that table | the same parts — `md-table` carries the STATE (`sort-by`, `sort-order`, `selection`, `row-offset`, `row-count`, `loading`) and emits events; you own the data and do the actual sorting/paging | expecting it to sort an array for you |
| Hierarchy / reporting lines | `md-organization-chart` | nested lists |
| Compare categories | `md-bar-chart` | pie chart |
| Trend over time | `md-line-chart` | bar chart |
| Trend with cumulative volume | `md-area-chart` | line chart |
| Parts of a whole (≤ ~6 slices) | `md-pie-chart` | bar chart |
| Inline micro-trend in a cell or card | `md-sparkline` | a full chart |

> **There is no data-driven table component.** `md-table` is composable: you
> render the rows. It tracks and announces sort, selection and pagination state
> and emits events when the user changes them, but the sorting, filtering and
> slicing of your data is yours to perform. Render rows from your own array in
> response to those events.

### 5.7 Choosing the variant

The matrix picks the component; this picks its shape. Every value below is a
real enum member — anything not listed here is not a valid value.

| Component | Prop | Values, and when |
|---|---|---|
| `md-button` | `variant` | `filled` the one primary action · `tonal` a strong secondary · `outlined` secondary, and the safe choice for a destructive action behind a confirm · `text` low emphasis, dialog Cancel · `elevated` when it sits on a busy or coloured background (default `filled`) |
| `md-button` / `md-icon-button` / `md-button-group` | `size` | `xs` `sm` `md` `lg` `xl` — default `sm`; go `md`/`lg` for consumer CTAs, `xs`/`sm` for dense admin UI |
| `md-icon-button` | `variant` | `standard` (default) · `filled` · `tonal` · `outlined` |
| `md-button-group` | `variant` | `standard` spaced · `connected` fused into one bar |
| `md-fab` | `size` | `standard` (default) · `medium` · `large` |
| `md-fab` | `variant` | `primary-container` (default) · `secondary-container` · `tertiary-container` · `surface` · `primary` · `secondary` · `tertiary` |
| `md-card` | `variant` | `filled` for a group of comparable items · `elevated` (default) for a hero or featured item · `outlined` for a settings or form section |
| `md-text-field` / `md-select` | `variant` | `outlined` for forms on a surface · `filled` for dense or tinted layouts (`md-text-field` defaults to `filled`, `md-select` to `outlined`) — pick one and use it for every field on the screen |
| `md-text-field` | `type` | any native input type: `password`, `email`, `tel`, `url`, `search`, … (default `text`) |
| `md-text-field` | `multiline` | `"auto-grow"` grows with content · `"fixed"` with `rows` for a fixed comment box · `false` (default) single line |
| `md-search` | `variant` | `contained` (default) · `divided` |
| `md-app-bar` | `variant` | `small` (default) · `medium` · `large` for a prominent headline · `search` for a bar that hosts a field |
| `md-chip` | `variant` | `assist` (default) · `filter` for toggleable facets · `input` for user-entered removable values · `suggestion` |
| `md-chip` | `appearance` | `outlined` (default) · `filled` · `elevated` |
| `md-badge` | `variant` | `small` a bare dot · `large` (default) a count |
| `md-tooltip` | `variant` | `plain` (default) a short label on an icon control · `rich` an explanatory popover that may hold a link or action |
| `md-divider` | — | **no `variant`** — use the booleans `inset`, `inset-start`, `inset-end` |
| `md-side-sheet` | `variant` | `standard` coexists with page content · `modal` overlays with a scrim |
| `md-bottom-sheet` | `variant` | `standard` (default) · `detached` floating above the edge |
| `md-dialog` | `fullscreen` | boolean — a full-screen dialog for a long mobile task |
| `md-date-picker` | `variant` | `modal-input` (default) calendar plus a typed field · `modal` calendar only · `docked` inline, anchored to the field |
| `md-time-picker` | `variant` | `dial` · `input` (default) |
| `md-progress-indicator` | `variant` | `linear` (default) · `circular`; add `indeterminate` when the total is unknown |
| `md-list-item` | `lines` | `1` · `2` · `3` — must match how much supporting text you pass |
| `md-navigation-bar` | — | 3–5 destinations. Fewer than three: use `md-tabs`. More than five: a rail or a menu |
| `md-navigation-rail` | — | 3–7 destinations; cap the overflow with `max-visible` |

### 5.8 Not in the library

Rich text editor · file upload/dropzone · calendar/scheduler view · map ·
toast stack manager (use `md-snackbar` and manage the queue yourself) ·
data grid with virtualized columns. If the user needs one, say so plainly and
integrate a third-party component styled with the MD3 tokens.

**There is no `md-grid`, no `md-data-table`, no `md-layout`, no `md-icon`.**
If a tag is not listed in §6, it does not exist — do not emit it.

---

## §6 — Component inventory

**Every component has exactly one manual, and it is the readme.md in its own
source folder:**

```
./packages/core/src/components/<tag>/readme.md
```

e.g. [`md-select`](./packages/core/src/components/md-select/readme.md),
[`md-button`](./packages/core/src/components/md-button/readme.md).

**Load that file before you use the component.** There is no second, shorter
summary to rely on — this readme is the single source, so anything you do not
read there, you do not know. Each one carries When-to-use, a Do/Don't table
from M3, copy-paste patterns, an anti-patterns table, and the theming surface.

Work through them one at a time: pick the component from the decision matrix
(§5), load its readme, write that component's markup, then move to the next.

There are 81 manuals for 57 components: 24 of them document sub-components that
are only valid inside a parent (a table cell, a tab panel, a select option).
Every sub-component manual names its parent in the first line, and §7 below
summarises the nesting.

`status` in each manual's `llm:meta` block is one of:

- **`md3-mapped`** — has a Material Design 3 guidelines page; the Do/Don't is
  sourced from it.
- **`custom`** — an addition to MD3; guidance is derived house rules.
- **`sub-component`** — only valid inside a specific parent.

| Category | Components |
|---|---|
| Actions | `md-button` `md-icon-button` `md-fab` `md-fab-menu` `md-fab-menu-item` `md-split-button` `md-button-group` `md-segmented-button` `md-segmented-button-set` |
| Text input | `md-text-field` `md-number-field` `md-otp-field` `md-autocomplete` `md-search` |
| Selection | `md-select` `md-select-option` `md-multi-select` `md-checkbox` `md-radio` `md-switch` `md-slider` `md-rating` `md-color-picker` `md-transfer-list` `md-chip` |
| Pickers | `md-date-picker` `md-time-picker` |
| Navigation | `md-app-bar` `md-toolbar` `md-navigation-bar` `md-navigation-tab` `md-navigation-rail` `md-navigation-rail-tab` `md-tabs` `md-tab` `md-tab-panels` `md-tab-panel` `md-breadcrumbs` `md-breadcrumb-item` `md-menu` `md-menu-item` `md-menu-item-group` `md-sub-menu-item` `md-stepper` `md-step` |
| Containment | `md-card` `md-dialog` `md-bottom-sheet` `md-side-sheet` `md-snackbar` `md-tooltip` `md-accordion` `md-accordion-item` `md-divider` `md-list` `md-list-item` |
| Data | `md-table` `md-table-container` `md-table-head` `md-table-body` `md-table-row` `md-table-cell` `md-table-foot` `md-table-toolbar` `md-table-pagination` `md-table-sort-label` `md-table-expand-toggle` `md-organization-chart` |
| Charts | `md-bar-chart` `md-line-chart` `md-area-chart` `md-pie-chart` `md-sparkline` |
| Status & feedback | `md-progress-indicator` `md-loading-indicator` `md-skeleton` `md-badge` `md-status-dot` `md-meter` `md-avatar` `md-ripple` |

---

## §7 — Composition rules

### 7.1 What nests inside what

A sub-component is only valid inside its parent. Putting one anywhere else
produces an unstyled, unregistered-looking element with no keyboard behaviour,
because the parent is what wires roving tabindex, ARIA ids and selection.

| Parent | Children it manages |
|---|---|
| `md-button-group` | `md-button`, `md-icon-button` |
| `md-segmented-button-set` | `md-segmented-button` |
| `md-fab-menu` | `md-fab-menu-item` (anchored to an `md-fab` via `anchor="<id>"`) |
| `md-menu` | `md-menu-item`, `md-sub-menu-item`, `md-menu-item-group` — **not** `md-divider`; separate rows with `md-menu-item`'s own `divider` (or `gap`) prop |
| `md-menu-item-group` | `md-menu-item` |
| `md-sub-menu-item` | a nested `md-menu` in `slot="submenu"` — the items go in *that* menu. There is no default slot, so anything else you nest renders nothing |
| `md-select`, `md-multi-select`, `md-autocomplete` | `md-select-option` |
| `md-list` | `md-list-item`, `md-divider` |
| `md-tabs` | `md-tab` |
| `md-tab-panels` | `md-tab-panel` (one per tab, in tab order) |
| `md-navigation-bar` | `md-navigation-tab` |
| `md-navigation-rail` | `md-navigation-rail-tab`, plus an `md-fab` in `slot="fab"` |
| `md-accordion` | `md-accordion-item` |
| `md-stepper` | `md-step` (horizontal steppers also take `slot="content"`) |
| `md-breadcrumbs` | `md-breadcrumb-item` |
| `md-table-container` | `md-table` — **it wraps the table, not the other way round** — plus `md-table-toolbar` in `slot="top"` and `md-table-pagination` in `slot="bottom"`, which sit outside the scroll region |
| `md-table` | `md-table-head`, `md-table-body`, `md-table-foot` (and bare `md-table-row`). It does **not** accept the container, toolbar or pagination |
| `md-table-head` / `-body` / `-foot` | `md-table-row` |
| `md-table-row` | `md-table-cell`, plus `md-table-expand-toggle` for an expandable row |
| `md-table-cell` | `md-table-sort-label` in a header cell |
| `md-tooltip` | **its trigger** — the tooltip wraps the element it describes in its default slot |
| `md-dialog` | body content in the default slot; `md-button` in `slot="actions"` |
| `md-bottom-sheet` / `md-side-sheet` | content in the default slot; `md-button` in `slot="actions"`; headline in `slot="headline"` |
| `md-app-bar` | `md-icon-button` in `slot="leading"` and `slot="trailing"`; `md-menu` for overflow; a field in `slot="search"` on `variant="search"` |
| `md-toolbar` | `md-icon-button`, `md-button`, `md-button-group`; an `md-fab` in `slot="fab"`; `slot="leading"` / `slot="trailing"` for the end clusters |

### 7.2 Pairs that belong together

These don't nest — they sit next to each other in a working flow. Reaching for
one usually means you want the other.

| This | Goes with | Why |
|---|---|---|
| `md-icon-button` | `md-tooltip` | The tooltip supplies the visible meaning the icon lacks |
| `md-button` (`soft-disabled`) | `md-tooltip` | Explains *why* the action is unavailable |
| `md-fab` | `md-fab-menu` | The FAB is the menu's anchor |
| `md-split-button` | `md-menu` | The trailing half opens it |
| `md-card` | `md-button`, `md-icon-button`, `md-divider` | Footer actions, corner action, internal sections |
| `md-list-item` | `md-checkbox`, `md-switch`, `md-icon-button` | Trailing controls in a selectable or settings row |
| `md-bottom-sheet` / `md-side-sheet` | `md-list` | Action menus and filter panels inside the sheet |
| `md-search` | `md-list`, `md-avatar`, `md-icon-button` | Results in the panel; account and voice/filter affordances in the trailing slot |
| `md-date-picker` | `md-time-picker` | Date + time row for booking and scheduling forms |
| `md-time-picker` | `md-button` | The trigger, when `hide-trigger` is set. The picker **is** its own dialog — don't nest it in another one |
| `md-text-field` | `md-button` | Submit / cancel in the form footer |
| `md-multi-select` / `md-autocomplete` | `md-text-field`, `md-menu`, `md-chip` | The field is the trigger (and inherits its variant, density and error state), the menu is the option surface, chips are the selected values |
| `md-autocomplete` | `md-progress-indicator` | The loading row while suggestions are fetched |
| `md-transfer-list` | `md-checkbox`, `md-text-field`, `md-icon-button` | Per-row select, per-side search, mover controls |
| `md-number-field` | `md-text-field` hooks, `md-icon-button` | It *is* an `md-text-field` internally — every `--md-text-field-*` custom property passes through — and its steppers are `md-icon-button`s |
| `md-otp-field` | `md-button` | Verify action (`auto-submit` covers the no-button flow) |
| Any chart | `md-card` | Charts belong on a dashboard tile |
| `md-line-chart` | `md-segmented-button-set` | Period picker (1W / 1M / 1Y) driving the range |
| `md-sparkline` | `md-list-item`, `md-table-cell` | Trend column beside a value |
| `md-skeleton` | `md-card`, `md-list` | Render N placeholders in the real layout while fetching |
| `md-meter` | `md-chip`, `md-card` | Same semantic status colour on both; quota and usage summaries live on a card |
| `md-color-picker` | `md-text-field`, `md-button` | Label and helper text beside it in a form; save / cancel in the surrounding popover or dialog |
| `md-rating` | `md-text-field`, `md-card` | A rating row in a review form; aggregate scores on a review card |
| `md-accordion` | `md-divider` | Optional inner dividers inside long item content |
| `md-stepper` | `md-button` | Next / back / submit adjacent to the stepper |

### 7.3 Nesting that is always wrong

- A dialog opened from inside a dialog. Use `md-stepper` inside **one**
  `md-dialog`.
- A component inside a native interactive element (`<button>`, `<a>`) — it
  nests interactive controls and destroys the accessibility tree. Use the
  component's own `href` / `type` props.
- `md-tabs` used for top-level app navigation. Tabs switch sibling views of the
  same data; destinations are `md-navigation-bar` / `md-navigation-rail`.

---

## §8 — Page recipes

Complete, runnable screens. Each renders as-is once the components are
registered and the token sheet and font links from §3 are loaded — no
placeholder identifiers, no helper functions to write.

### 8.1 Login screen

`<form>` is load-bearing: it is what makes `required` block submit and what
`type="submit"` calls `requestSubmit()` on.

```html
<main style="display: grid; place-items: center; min-block-size: 100dvh; padding: 24px;">
  <form id="login-form" style="inline-size: min(420px, 100%);">
    <md-card variant="elevated" style="padding: 32px; display: flex; flex-direction: column; gap: 20px;">
      <h1 style="margin: 0; font: var(--md-sys-typescale-headline-medium-font);">Sign in</h1>

      <md-text-field
        variant="outlined"
        label="Email"
        type="email"
        name="email"
        autocomplete="username"
        required
      ></md-text-field>

      <md-text-field
        variant="outlined"
        label="Password"
        type="password"
        name="password"
        autocomplete="current-password"
        password-toggle="internal"
        required
      ></md-text-field>

      <md-button variant="filled" type="submit" full-width>Sign in</md-button>
      <md-button variant="text" href="/forgot-password">Forgot password?</md-button>
    </md-card>
  </form>
</main>

<script type="module">
  document.getElementById('login-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    console.log(data.get('email'), data.get('password'));
  });
</script>
```

### 8.2 Settings page (mobile)

Top app bar + grouped rows of instant-apply switches. `md-switch` uses
**`selected`**, not `checked`. The rows are `type="text"` (non-interactive), so
the switch is the only control — one tab stop per setting.

```html
<md-app-bar variant="small" headline="Settings">
  <md-icon-button slot="leading" icon="arrow_back" aria-label="Back"></md-icon-button>
</md-app-bar>

<main style="padding: 16px; display: flex; flex-direction: column; gap: 16px;">
  <md-card variant="outlined">
    <md-list>
      <md-list-item headline="Notifications" supporting-text="Push, email, in-app" lines="2">
        <md-switch slot="trailing" selected aria-label="Enable notifications" data-setting="notifications"></md-switch>
      </md-list-item>
      <md-divider></md-divider>
      <md-list-item headline="Dark mode" supporting-text="Match system" lines="2">
        <md-switch slot="trailing" aria-label="Enable dark mode" data-setting="dark"></md-switch>
      </md-list-item>
      <md-divider></md-divider>
      <md-list-item headline="Sync over cellular">
        <md-switch slot="trailing" selected aria-label="Sync over cellular" data-setting="cellular"></md-switch>
      </md-list-item>
    </md-list>
  </md-card>
</main>

<md-snackbar id="settings-toast" message="Setting saved"></md-snackbar>

<script type="module">
  const toast = document.getElementById('settings-toast');
  document.querySelectorAll('md-switch[data-setting]').forEach((sw) => {
    sw.addEventListener('mdChange', (e) => {
      if (sw.dataset.setting === 'dark') {
        document.documentElement.setAttribute('data-theme', e.detail.selected ? 'dark' : 'light');
      }
      toast.show();
    });
  });
</script>
```

### 8.3 Settings form (deferred save, with validation)

When settings are saved on submit rather than applied instantly, use a real
form. `required` blocks the submit; every control needs a `name` to reach
`FormData`.

```html
<form id="profile-form" style="max-inline-size: 560px; margin: 24px auto; padding: 0 16px;">
  <md-card variant="outlined" style="padding: 24px; display: flex; flex-direction: column; gap: 20px;">
    <h2 style="margin: 0; font: var(--md-sys-typescale-title-large-font);">Profile</h2>

    <md-text-field
      variant="outlined"
      label="Display name"
      name="displayName"
      required
      supporting-text="Shown on your public profile"
    ></md-text-field>

    <md-select variant="outlined" label="Language" name="language" value="en" required>
      <md-select-option value="en" label="English"></md-select-option>
      <md-select-option value="de" label="Deutsch"></md-select-option>
      <md-select-option value="ar" label="العربية"></md-select-option>
    </md-select>

    <!-- md-checkbox has NO label slot. It is a labelable, form-associated
         element: wrap it in a native <label> (which names it AND forwards
         clicks), or give the host an aria-label. Text between the tags is
         NOT rendered. -->
    <label style="display: inline-flex; align-items: center; gap: 12px; cursor: pointer;">
      <md-checkbox name="newsletter" value="yes" supporting-text="Monthly, no more"></md-checkbox>
      <span>Send me product news</span>
    </label>

    <div style="display: flex; gap: 8px; justify-content: flex-end;">
      <md-button variant="text" type="reset">Reset</md-button>
      <md-button variant="filled" type="submit">Save changes</md-button>
    </div>
  </md-card>
</form>

<md-snackbar id="saved-toast" message="Changes saved" action="Undo"></md-snackbar>

<script type="module">
  const form = document.getElementById('profile-form');
  const toast = document.getElementById('saved-toast');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(form));
    console.log(data); // { displayName, language, newsletter? }
    toast.show();
  });

  toast.addEventListener('mdAction', () => form.reset());
</script>
```

### 8.4 Dashboard with a FAB

```html
<md-app-bar variant="medium" headline="Inbox">
  <md-icon-button slot="trailing" icon="search" aria-label="Search"></md-icon-button>
  <md-icon-button slot="trailing" icon="filter_list" aria-label="Filter"></md-icon-button>
</md-app-bar>

<main style="padding: 16px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));">
  <md-card variant="filled" interactive style="padding: 16px;">
    <strong>Acme contract</strong>
    <p style="margin: 4px 0 0; color: var(--md-sys-color-on-surface-variant);">Renewal due in 5 days</p>
  </md-card>
  <md-card variant="filled" interactive style="padding: 16px;">
    <strong>Q4 report draft</strong>
    <p style="margin: 4px 0 0; color: var(--md-sys-color-on-surface-variant);">Shared by Alex</p>
  </md-card>
</main>

<md-fab
  icon="add"
  aria-label="New item"
  style="position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: var(--md-sys-z-index-navigation);"
></md-fab>
```

`inset-inline-end` (not `right`) is what keeps the FAB in the correct corner
under `dir="rtl"`.

### 8.5 Destructive confirmation dialog

`md-dialog` traps focus and returns it to the trigger on close — do not add your
own focus management. The error colouring goes through the button's own custom
properties, never a hex.

```html
<md-button id="open-delete" variant="outlined">Delete account</md-button>

<md-dialog id="confirm-delete" headline="Delete account?" icon="warning">
  <p style="margin: 0;">
    This will permanently delete your account and all associated data.
    This action cannot be undone.
  </p>
  <md-button id="cancel-delete" slot="actions" variant="text">Cancel</md-button>
  <md-button
    id="do-delete"
    slot="actions"
    variant="filled"
    style="--md-button-container-color: var(--md-sys-color-error);
           --md-button-label-color: var(--md-sys-color-on-error);"
  >Delete</md-button>
</md-dialog>

<script type="module">
  const dialog = document.getElementById('confirm-delete');
  document.getElementById('open-delete').addEventListener('mdClick', () => dialog.show());
  document.getElementById('cancel-delete').addEventListener('mdClick', () => dialog.close());
  document.getElementById('do-delete').addEventListener('mdClick', () => {
    dialog.close();
    // perform the deletion
  });
</script>
```

If you omit `slot="actions"` entirely, `md-dialog` renders its own Cancel / OK
pair (labels via `cancel-label` / `ok-label`) and closes itself.

### 8.6 Tabbed content page

`md-tab-panels` finds the nearest preceding `md-tabs` (or the one named by
`for`), follows its `mdTabChange`, and wires `aria-controls` /
`aria-labelledby` both ways. **No JavaScript is required**, and `md-tab` has no
`value` or `selected` prop — selection lives on `md-tabs` as `active-tab-index`.

```html
<md-tabs id="profile-tabs" aria-label="Profile sections" active-tab-index="0">
  <md-tab label="Posts"></md-tab>
  <md-tab label="Replies"></md-tab>
  <md-tab label="Likes" badge="3"></md-tab>
</md-tabs>

<md-tab-panels for="profile-tabs">
  <md-tab-panel style="padding: 16px;">
    <p style="margin: 0;">Your posts appear here.</p>
  </md-tab-panel>
  <md-tab-panel style="padding: 16px;">
    <p style="margin: 0;">Your replies appear here.</p>
  </md-tab-panel>
  <md-tab-panel style="padding: 16px;">
    <p style="margin: 0;">Posts you liked appear here.</p>
  </md-tab-panel>
</md-tab-panels>
```

To react to the switch (lazy-loading a panel, for example), listen on the tabs:

```js
document.getElementById('profile-tabs')
  .addEventListener('mdTabChange', (e) => console.log(e.detail.index, e.detail.previousIndex));
```

### 8.7 The full recipe library

Twenty-two more complete screens live in the documentation, each with a live
demo, the full markup, framework tabs, and production notes. When the user's
request matches one of these, read that page (append the slug to
`https://awc-ui.dev/recipes/`) instead of composing from scratch:

| Recipe slug | Screen |
|---|---|
| `two-factor-verification` | OTP entry, resend countdown, backup-codes dialog |
| `kpi-overview` | Stat tiles with sparklines + charts under a range switcher |
| `data-grid-console` | Bulk-action data table: filters, selection, undo |
| `server-fleet-status` | Table of hosts with meters, sparklines, status dots |
| `release-health-drilldown` | Table row → side-sheet master-detail with charts |
| `csv-import-wizard` | Stepper: upload, map columns, validate, import |
| `role-permission-assignment` | Transfer-list permissions with confirm dialog |
| `org-chart-explorer` | Searchable org chart with side-sheet profiles |
| `moderation-queue` | Verdict controls, confidence meter, card queue |
| `checkout-wizard` | Three-step commerce checkout with validation |
| `appointment-booking` | Date + time pickers inside a stepper flow |
| `survey-nps` | Paged survey using every input control |
| `notification-preferences` | Accordion × switch matrix, quiet hours |
| `app-shell` | Responsive rail/bar chrome, SSR-ready, zero CLS |
| `inbox-shell` | Three-zone list + reading-pane layout |
| `mobile-filter-sheet` | Bottom-sheet filters with applied-chip row |
| `product-reviews` | Rating input + per-star meter breakdown |
| `order-tracking` | Shipment timeline stepper with progress meter |
| `portfolio-markets` | Finance charts + holdings table + trade ticket |
| `pricing-page` | Plan cards, billing toggle, comparison table |
| `async-feedback-patterns` | Skeleton/progress/snackbar choreography rules |
| `charts-gallery` | Every chart component, live-retheming palette |

---

## §9 — Universal do's and don'ts

Apply to every component. Component-specific rules live in each manual.

### 9.1 API and styling

| ✅ Do | ❌ Don't |
|---|---|
| Use the custom element directly — it *is* the control, with its own `href` / `type` props | Wrap it in a native `<button>` / `<a>` (§7.3) |
| Set arrays and objects as **JS properties** (`el.items = [...]`) | Pass them as HTML attributes — they won't parse |
| Theme via `--md-<component>-*` properties, then `::part()` | Reach into shadow internals or override `.md-*` classes |
| Change appearance through design tokens (§4.1) | Hardcode hex colors, px spacing, shadows, or font stacks |
| Use `--md-sys-z-index-*` for your own overlays | Invent z-indexes that land under a menu |
| Use logical CSS (`margin-inline-start`, `inset-inline-end`) | Use `margin-left`, `right`, `padding-right` |
| Set `data-density` / `data-theme` / `dir` once, globally | Set them per component unless you mean a local exception |
| Listen to the component's `md*` events | Rely on native `click` — it fires even when the component's `disabled` / `loading` guard suppressed the action |
| Check the manual for the state prop name | Assume `checked`; `md-switch` uses `selected` |
| Render the element, then call its `@Method` | Call `.show()` on an element not yet in the DOM |

Toggling components flip their own state on activation and *then* emit. On
`md-button`, `mdClick` is cancelable — `preventDefault()` on it vetoes the
toggle and any navigation. `mdChange` fires after the flip and is not
cancelable. If a controlled parent rejects a change it must revert the child
explicitly.

`md-button` has a **toggle mode**: set `toggle` and the button flips its own
`selected` on each activation and exposes `aria-pressed`. `selected` is the
state, not the switch — set it for the initial pressed state and read it back
from `mdClick`'s `detail.selected`. Setting `toggle` and then styling
"pressed" yourself, or setting `selected` without `toggle` (which emits no
`aria-pressed` at all), both produce a control that lies to assistive tech.

### 9.2 Content and hierarchy

| ✅ Do | ❌ Don't |
|---|---|
| Use sentence case for all labels | Uppercase or title-case UI text |
| Keep one high-emphasis action per screen region | Compete `filled` buttons against each other |
| Use `soft-disabled` + `md-tooltip` for contextually-unavailable actions | Use `disabled` and remove it from tab order with no explanation |
| Localize every text prop and `aria-label` | Leave default English prop values in a translated app |

**`disabled` vs `soft-disabled`.** Both render the disabled appearance, but
`disabled` also removes the control from the tab order, so a keyboard or screen
reader user can never find out *why* it is off. `soft-disabled` keeps the
control focusable and announced while still blocking activation — which is what
lets an `md-tooltip` on it explain the gate. Use it whenever the reason is
informative rather than obvious.

Nesting rules — dialog inside a dialog, a component inside a native
`<button>` / `<a>`, tabs used as app navigation — live in §7.3.

### 9.3 Accessibility contract

The library ships WCAG 2.1 AA keyboard and ARIA wiring by default. These are the
rules you must not break:

1. **Every icon-only control gets an accessible name.** `md-icon-button`,
   `md-fab`, and icon-only `md-tab` are nameless without `aria-label` (or
   `aria-labelledby`). `md-fab` will also accept `label`, and warns in the
   console when it has neither.
2. **Every form field gets a `label` prop.** `placeholder` is not a label — it
   disappears on type.
3. **Don't break the tab order.** Every interactive control must be reachable by
   Tab and operable by Enter/Space. If you add `tabindex="-1"` to anything,
   have a reason.
4. **Don't write your own focus trap.** `md-dialog`, `md-bottom-sheet` and
   `md-side-sheet` trap focus while open and restore it to the trigger on
   close — including across shadow boundaries. Adding your own fights theirs.
5. **Don't wrap components in your own live regions.** `md-snackbar` announces
   itself (`politeness="polite"` by default, `"assertive"` when the message must
   interrupt). For an error that blocks the task, use `md-dialog`.
6. **Don't disable motion yourself.** Components honour
   `prefers-reduced-motion: reduce` internally.
7. **Directional icons do not auto-flip in RTL** — see §4.5.
8. **Re-verify contrast after overriding any colour role** — the library's AA
   testing covers the shipped palette only. The Theme Generator at
   <https://awc-ui.dev/theme-generator> runs the WCAG checks live (§4.2).

---

## §10 — Before you ship

1. **Every icon-only control has an accessible name.**
2. **Keyboard-only pass**: reach and operate every control; focus is always
   visible; no traps in dialogs/menus/sheets; focus returns to the trigger.
3. **Theme pass**: light *and* dark, if both are supported — and the attribute
   is set before first paint.
4. **RTL pass**, if an RTL locale ships — check directional icons specifically,
   and grep your own CSS for physical properties.
5. **Density pass** at the configured rung — no clipped labels, touch targets
   still adequate. Remember `density="0"` is inert; use
   `--md-sys-density-scale: 0` to opt a subtree out.
6. **Forms**: every control has a `name`; `required` blocks submit; `FormData`
   contains every field; reset works.
7. **No hardcoded strings** left in markup if the app is localized — including
   default prop values like `Search`, `Dismiss`, `No results`.
8. **No hardcoded design values** — grep the diff for hex colours, `px` radii,
   `box-shadow`, and `z-index` literals.
9. **Contrast** re-verified against AA if colour roles were overridden.
10. **SSR**: if server-rendered, confirm no hydration mismatch and that content
    is present with JS disabled.
11. **No shadow-internal CSS** — only tokens, custom properties, and `::part()`.
12. **Every `md-*` tag you emitted appears in §6.** If it doesn't, it doesn't
    exist.