@axiapps/axi-design 1.44.0 → 1.46.0

package/README.md

@@ -147,6 +147,7 @@ not "what does the system look like". Everything else is
 | `--axi-action-hit` | the hit target of an `.axi-action--glyph`, whose label is one character and gives the pointer nothing to land on | `24px` | `<button class="axi-action axi-action--glyph" style="--axi-action-hit: 32px">` |
 | `--axi-well-pad` | the padding inside an `.axi-well` | `10px` | `<div class="axi-well" style="--axi-well-pad: 18px">` |
 | `--axi-well-radius` | an `.axi-well`'s corner radius, for a well used at reading scale rather than page scale | `var(--axi-radius)` | `<div class="axi-well" style="--axi-well-radius: var(--axi-radius-sm)">` |
+| `--axi-empty-pad` | the padding inside an `.axi-empty`, for an empty state standing in a tighter space than a table would | `24px 16px` | `<div class="axi-empty" style="--axi-empty-pad: 12px">` |
 | `--axi-rail-w` | an `.axi-rail`'s width, for labels longer than the default holds | `208px` | `<aside class="axi-rail" style="--axi-rail-w: 260px">` |
 | `--axi-rail-pad` | the padding inside an `.axi-rail` | `10px` | `<aside class="axi-rail" style="--axi-rail-pad: 6px">` |
 | `--axi-toolbar-pad` | the padding inside an `.axi-toolbar` | `14px` | `<div class="axi-toolbar" style="--axi-toolbar-pad: 4px 7px">` |

package/dist/axi.css

@@ -122,6 +122,20 @@
      --axi-ink-on-fill below, on the other side of the same token. */
   --axi-ground-deep: var(--axi-ink-line);
   --axi-rule: #3a4250;            /* internal rules, inside an outlined panel */
+  /* A gridline is quieter than a rule. A rule divides two things; a grid is
+     scaffolding a value is read against, and it has to sit barely above the
+     ground it is drawn on or the chart becomes a grid of boxes with numbers
+     in them - the failure rule 3 names for tables, arriving in a plot.
+
+     Derived, not picked, and that is the point of its being a token. The one
+     consumer that had drawn a chart grid wrote #262c36 for it: the default
+     rule laid over the default ground at 47%, to within one step per channel,
+     and a fixed slate that stayed slate under glass and under flat while both
+     themes relit their rules. Mixing toward transparent rather than toward
+     the ground keeps it right on a panel fill too, and keeps it following
+     --axi-rule when a theme restates that - so a theme has nothing to say
+     here, and says nothing. */
+  --axi-grid: color-mix(in srgb, var(--axi-rule) 47%, transparent);
   /* --- the well --- */
   /* A field sunk INTO a surface rather than raised off one: a table picker's
      list, a bar's trough, a column of cards standing on the page. The language
@@ -347,6 +361,46 @@ a { color: inherit; }
   }
 }
 
+/* The scrollbar is chrome, and chrome is drawn in the language's own ink. A
+   browser's default bar is a light capsule on a light channel, which is two
+   things this language does not have: a colour at partial opacity over the
+   ground (rule 2) and the one radius the system refuses (see --axi-radius).
+   The consumer that first themed it had written both anyway - a 999px thumb
+   in white at 35% - in its own stylesheet, because the language said nothing
+   here, and a decision the language leaves unsaid is one every consumer makes
+   differently.
+
+   So: the thumb is the rule ink, a rectangle, in a transparent channel. The
+   channel is transparent rather than the ground for the reason the well's fill
+   gives: an opaque page colour inside a translucent pane is a black patch, and
+   a bar runs down the inside of panes and wells as often as down the page.
+
+   Two spellings, one per engine, and neither is a fallback for the other.
+   `::-webkit-scrollbar` is the only spelling that controls the SHAPE - the
+   standard `scrollbar-color` pair recolours whatever the engine draws, and
+   what Chromium draws is a capsule with arrow buttons, the shape this language
+   refuses. Worse, Chromium (121+) switches the pseudo-elements off entirely the
+   moment either standard property is set, so writing both does not combine
+   them: it hands Chromium the capsule and throws the rectangle away. (The
+   consumer this replaces had written both, and had been tuning a webkit block
+   Chromium stopped reading, for years.) So the standard pair is scoped to the
+   engines that have no pseudo-element to disable, which today is Firefox, and
+   the pseudo-elements carry the design everywhere else. scrollbar-color
+   inherits, so the root says it once; scrollbar-width does not, so it is set
+   on everything.
+
+   The quiet-scroll rule in utilities.css still wins where it applies: those
+   selectors carry a class and these carry none, so a strip that has asked for
+   no bar gets none, and everything else gets this one. */
+@supports not selector(::-webkit-scrollbar) {
+  html { scrollbar-color: var(--axi-rule) transparent; }
+  * { scrollbar-width: thin; }
+}
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--axi-rule); border-radius: 0; }
+
 /* --- primitives.css --- */
 /* axi design language - primitives.
    The pieces that recur in every property. Two rules govern the whole file:
@@ -425,6 +479,28 @@ a.axi-panel--tile:hover,
 button.axi-panel--tile:hover,
 .axi-panel--tile[role='button']:hover { box-shadow: var(--axi-shadow-control-hover); }
 
+/* The status cap rule 5 describes, as a thing you can write. A verdict about
+   the reading inside a panel, a tile or a stat is said once, across its head,
+   in the status ink - directly over the value it judges - and the rest of the
+   outline stays the ink line every other edge in the language is drawn in. Not
+   down the left: a full-height stripe is the box's frame, and five tiles in a
+   row become five coloured frames saying nothing about any one number.
+
+   It recolours the top edge the element already has rather than adding a bar,
+   so it is drawn at the element's own weight by construction - the panel step
+   on a panel, the control step on a tile or a stat - which is rule 5's own
+   argument against a heavy cap on a light frame. The state is an attribute the
+   consumer declares about its data (rule 13), read by the three objects a
+   reading lives in; a card's strip is a different claim (which category) and
+   keeps its own word.
+
+   Four values and no fifth: the accent is not a verdict, and a cap in it would
+   say "picked" about a thing nobody picked. */
+.axi-panel[data-status="ok"],     .axi-stat[data-status="ok"]     { border-top-color: var(--axi-ok); }
+.axi-panel[data-status="warn"],   .axi-stat[data-status="warn"]   { border-top-color: var(--axi-warn); }
+.axi-panel[data-status="danger"], .axi-stat[data-status="danger"] { border-top-color: var(--axi-danger); }
+.axi-panel[data-status="meta"],   .axi-stat[data-status="meta"]   { border-top-color: var(--axi-meta); }
+
 /* The one of these you picked. A grid of panels, tiles or cards where one is
    chosen - a theme picker, a fight picker, a leader you have opened - and the
    surface has to say which.
@@ -514,6 +590,30 @@ button.axi-panel--tile:hover,
    the pad knob is still the right way to say anything else. */
 .axi-well--sm { --axi-well-radius: var(--axi-radius-sm); }
 
+/* ---------- the empty state ---------- */
+/* A well with nothing in it but the sentence saying so.
+
+   Every view that can have no data has to say so somewhere, and the first
+   consumer counted said it eighty times - a dashed-border box, centred, small,
+   dim - in eighty copies of the same eleven utilities, none of them a word the
+   language had. Dashed, because the box was "provisional"; the language says
+   provisional with the outlined/filled distinction (rule 5), so the edge is
+   the well's own rule. It is a well because an absence is a recess: the place
+   a table would stand, sunk into the surface, with nothing standing in it.
+
+   Only the sentence's type and placement are added to the well, and the
+   generous pad is the point - an empty state that is as tall as a single row
+   reads as a row that failed to render. */
+.axi-empty {
+  background: var(--axi-well-fill);
+  border: var(--axi-border-control) solid var(--axi-well-line);
+  border-radius: var(--axi-radius-sm);
+  padding: var(--axi-empty-pad, 24px 16px);
+  text-align: center;
+  font: var(--axi-t-small);
+  color: var(--axi-text-dim);
+}
+
 /* ---------- button ---------- */
 .axi-btn {
   display: inline-flex; align-items: center; gap: 8px;
@@ -3380,6 +3480,135 @@ textarea.axi-input {
   color: var(--axi-text-faint);
 }
 
+/* ---------- library charts ---------- */
+/* The language draws its own bars, plot and ticks above. An app that needs a
+   stacked area, a brush or a pie reaches for a charting library instead, and
+   the library arrives with its own furniture: a dashed grey grid, a #666 axis,
+   a slate tooltip with a half-rem corner. Every series it draws is the
+   consumer's data and keeps its own colour (rule 10). Everything drawn AROUND
+   the series is furniture, and furniture is the language's.
+
+   This is the binding for recharts, which is the library the suite uses. It
+   is scoped to `.axi-chart` so a chart opts in by wrapping, and it reaches the
+   library's elements by the class names recharts puts on them. recharts spreads
+   stroke and fill onto its SVG as presentation attributes, which a stylesheet
+   outranks, so nothing here needs to be passed into the library - and nothing
+   here is written with !important. A consumer that hands the library an inline
+   `contentStyle` has written a second design for the tooltip, and the answer
+   is to stop writing it, not for the language to shout over it: the tooltip is
+   `.axi-tooltip--flow` as custom content, drawn once, like every other tooltip.
+
+   The grammar is the one every component here already follows. Furniture is
+   drawn in the neutral ramp and recedes: the grid at --axi-grid, a step below
+   the rule (see tokens.css); the axis as a rule at the hairline weight, the
+   same line the table draws between rows; tick labels in the faint ink with
+   tabular figures, so a y-axis whose digits change width holds still. Every
+   small object standing on a series - a point, a bar, a slice - takes the ink
+   edge rule 3 gives every other small object, at the hairline because it is a
+   mark and not a raised surface, and keeps its fill, because the fill is which
+   series it belongs to. The hover band is the raised step's -paint companion
+   (a `fill` cannot be a gradient) rather than a white wash, which is rule 2.
+
+   The brush is the one place an accent is spent. Its two travellers are the
+   only thing in any chart you can grab, and they are small: a target you have
+   to find before you can use it is what the accent is for, unlike the hover
+   band, which is already under the pointer. The slide between them is the
+   surface as one paint, the trough behind them a well. One accent in the plot,
+   on the one control.
+
+   Solid, never dashed. A dash is decoration, and fifteen charts of dashes is a
+   texture rather than a scale; the reference line - a threshold, a claim - is
+   solid too, because it is one of the few lines in a chart meant to be read. */
+.axi-chart {
+  /* Every figure in a chart is a label of a number, so the whole scope reads
+     tabular. Nothing else is declared on the scope: a chart's size belongs to
+     the library's container and the consumer's layout. */
+  font-variant-numeric: tabular-nums;
+}
+.axi-chart .recharts-cartesian-grid line {
+  stroke: var(--axi-grid);
+  stroke-dasharray: none;
+  stroke-width: 1;
+}
+/* Stripes are a second background inside a chart that already has one. */
+.axi-chart .recharts-cartesian-grid-bg,
+.axi-chart .recharts-cartesian-gridstripes-horizontal,
+.axi-chart .recharts-cartesian-gridstripes-vertical { display: none; }
+
+.axi-chart .recharts-cartesian-axis-line {
+  stroke: var(--axi-rule);
+  stroke-width: var(--axi-border-hairline);
+}
+.axi-chart .recharts-cartesian-axis-tick-line { stroke: var(--axi-rule); }
+.axi-chart .recharts-cartesian-axis-tick-value { fill: var(--axi-text-faint); }
+.axi-chart .recharts-label,
+.axi-chart .recharts-legend-item-text { fill: var(--axi-text-dim); color: var(--axi-text-dim); }
+/* The legend is a key, so it reads as labels rather than as chips - the same
+   type .axi-legend__key sets. */
+.axi-chart .recharts-legend-wrapper {
+  font: var(--axi-t-micro);
+  letter-spacing: var(--axi-ls-micro);
+  text-transform: uppercase;
+}
+
+/* The hover band. A fill change rather than a wash: the next surface up, as
+   one paint, edged with the rule at the hairline like every line here. */
+.axi-chart .recharts-tooltip-cursor {
+  fill: var(--axi-surface-raised-paint);
+  fill-opacity: 1;
+  stroke: var(--axi-rule);
+  stroke-width: var(--axi-border-hairline);
+}
+/* A line chart's cursor is a crosshair, not a band, so it stays a line. */
+.axi-chart .recharts-curve.recharts-tooltip-cursor {
+  fill: none;
+  stroke: var(--axi-rule);
+  stroke-dasharray: none;
+}
+
+/* Small objects standing on a series keep their fill and take the ink edge. */
+.axi-chart .recharts-line-dot,
+.axi-chart .recharts-scatter-symbol > path,
+.axi-chart .recharts-pie-sector > path,
+.axi-chart .recharts-bar-rectangle > path {
+  stroke: var(--axi-ink-line);
+  stroke-width: var(--axi-border-hairline);
+}
+.axi-chart .recharts-active-dot > * {
+  stroke: var(--axi-ink-line);
+  stroke-width: var(--axi-border-control);
+}
+.axi-chart .recharts-bar-background-rectangle { fill: var(--axi-well-fill); }
+
+.axi-chart .recharts-reference-line-line {
+  stroke: var(--axi-text-faint);
+  stroke-width: var(--axi-border-hairline);
+  stroke-dasharray: none;
+}
+
+/* The brush: a well, a slide, two travellers, and the preview curve dropped to
+   furniture weight because it is context rather than data you read off. */
+.axi-chart .recharts-brush > rect:first-of-type {
+  fill: var(--axi-well-fill);
+  stroke: var(--axi-well-line);
+  stroke-width: var(--axi-border-control);
+}
+.axi-chart .recharts-brush-slide {
+  fill: var(--axi-surface-paint);
+  fill-opacity: 1;
+}
+.axi-chart .recharts-brush-traveller > rect {
+  fill: var(--axi-accent);
+  stroke: var(--axi-ink-line);
+  stroke-width: var(--axi-border-hairline);
+}
+.axi-chart .recharts-brush-traveller > line { stroke: var(--axi-accent-ink); }
+.axi-chart .recharts-brush-texts { fill: var(--axi-text-faint); }
+.axi-chart .recharts-brush .recharts-curve {
+  stroke: var(--axi-text-faint);
+  fill: none;
+}
+
 /* --- feedback.css --- */
 /* axi design language - feedback.
    Things that report on work, and things that report on how work went. Rule

package/docs/RULES.md

@@ -506,6 +506,28 @@ their meanings inside a chart, so nothing else may borrow them for a category.
 The status inks still mean status inside a plot: a line drawn in `--axi-danger`
 is asserting that the quantity is bad, not that it is the third series.
 
+### A chart's furniture recedes
+
+Rule 10 is about the series. Everything drawn *around* a series - gridlines,
+the axis, tick labels, the hover band, a brush - is furniture, and furniture is
+drawn in the neutral ramp so the series are the only colour in the plot. The
+grid sits a step below the rule, at `--axi-grid`, because a rule divides two
+things and a grid is only what a value is read against; the axis is a rule at
+the hairline; tick labels are the faint ink with tabular figures. A point, a
+bar or a slice keeps its own fill and takes the hairline ink edge every small
+object takes under rule 3. Nothing in a chart is dashed: a dash is decoration,
+and a threshold is one of the few lines in a chart meant to be read.
+
+One accent is spent inside a plot, and only on the one thing in it you can
+grab - a brush's travellers. The hover band is already under the pointer and
+needs no colour to be found.
+
+An app that draws its charts with a library gets the same furniture by
+wrapping the chart in `.axi-chart`, which binds these decisions to the
+library's own element classes. The binding is written without `!important`:
+a consumer that hands the library an inline style has drawn a second design,
+and the remedy is to stop handing it, not for the language to shout over it.
+
 ## 11. An indicator of work animates a composited property
 
 Spinners, progress strips and pulses almost always report on something

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "description": "The design language for the axi suite — flat and outlined, dark, drawn in saturated ink.",
   "type": "module",
   "license": "MIT",

package/src/base.css

@@ -72,3 +72,43 @@ a { color: inherit; }
     transform: none !important;
   }
 }
+
+/* The scrollbar is chrome, and chrome is drawn in the language's own ink. A
+   browser's default bar is a light capsule on a light channel, which is two
+   things this language does not have: a colour at partial opacity over the
+   ground (rule 2) and the one radius the system refuses (see --axi-radius).
+   The consumer that first themed it had written both anyway - a 999px thumb
+   in white at 35% - in its own stylesheet, because the language said nothing
+   here, and a decision the language leaves unsaid is one every consumer makes
+   differently.
+
+   So: the thumb is the rule ink, a rectangle, in a transparent channel. The
+   channel is transparent rather than the ground for the reason the well's fill
+   gives: an opaque page colour inside a translucent pane is a black patch, and
+   a bar runs down the inside of panes and wells as often as down the page.
+
+   Two spellings, one per engine, and neither is a fallback for the other.
+   `::-webkit-scrollbar` is the only spelling that controls the SHAPE - the
+   standard `scrollbar-color` pair recolours whatever the engine draws, and
+   what Chromium draws is a capsule with arrow buttons, the shape this language
+   refuses. Worse, Chromium (121+) switches the pseudo-elements off entirely the
+   moment either standard property is set, so writing both does not combine
+   them: it hands Chromium the capsule and throws the rectangle away. (The
+   consumer this replaces had written both, and had been tuning a webkit block
+   Chromium stopped reading, for years.) So the standard pair is scoped to the
+   engines that have no pseudo-element to disable, which today is Firefox, and
+   the pseudo-elements carry the design everywhere else. scrollbar-color
+   inherits, so the root says it once; scrollbar-width does not, so it is set
+   on everything.
+
+   The quiet-scroll rule in utilities.css still wins where it applies: those
+   selectors carry a class and these carry none, so a strip that has asked for
+   no bar gets none, and everything else gets this one. */
+@supports not selector(::-webkit-scrollbar) {
+  html { scrollbar-color: var(--axi-rule) transparent; }
+  * { scrollbar-width: thin; }
+}
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--axi-rule); border-radius: 0; }

package/src/data.css

@@ -715,3 +715,132 @@
 .axi-legend:has([aria-pressed="true"]) .axi-legend__key:where(:not([aria-pressed="true"], :hover)) {
   color: var(--axi-text-faint);
 }
+
+/* ---------- library charts ---------- */
+/* The language draws its own bars, plot and ticks above. An app that needs a
+   stacked area, a brush or a pie reaches for a charting library instead, and
+   the library arrives with its own furniture: a dashed grey grid, a #666 axis,
+   a slate tooltip with a half-rem corner. Every series it draws is the
+   consumer's data and keeps its own colour (rule 10). Everything drawn AROUND
+   the series is furniture, and furniture is the language's.
+
+   This is the binding for recharts, which is the library the suite uses. It
+   is scoped to `.axi-chart` so a chart opts in by wrapping, and it reaches the
+   library's elements by the class names recharts puts on them. recharts spreads
+   stroke and fill onto its SVG as presentation attributes, which a stylesheet
+   outranks, so nothing here needs to be passed into the library - and nothing
+   here is written with !important. A consumer that hands the library an inline
+   `contentStyle` has written a second design for the tooltip, and the answer
+   is to stop writing it, not for the language to shout over it: the tooltip is
+   `.axi-tooltip--flow` as custom content, drawn once, like every other tooltip.
+
+   The grammar is the one every component here already follows. Furniture is
+   drawn in the neutral ramp and recedes: the grid at --axi-grid, a step below
+   the rule (see tokens.css); the axis as a rule at the hairline weight, the
+   same line the table draws between rows; tick labels in the faint ink with
+   tabular figures, so a y-axis whose digits change width holds still. Every
+   small object standing on a series - a point, a bar, a slice - takes the ink
+   edge rule 3 gives every other small object, at the hairline because it is a
+   mark and not a raised surface, and keeps its fill, because the fill is which
+   series it belongs to. The hover band is the raised step's -paint companion
+   (a `fill` cannot be a gradient) rather than a white wash, which is rule 2.
+
+   The brush is the one place an accent is spent. Its two travellers are the
+   only thing in any chart you can grab, and they are small: a target you have
+   to find before you can use it is what the accent is for, unlike the hover
+   band, which is already under the pointer. The slide between them is the
+   surface as one paint, the trough behind them a well. One accent in the plot,
+   on the one control.
+
+   Solid, never dashed. A dash is decoration, and fifteen charts of dashes is a
+   texture rather than a scale; the reference line - a threshold, a claim - is
+   solid too, because it is one of the few lines in a chart meant to be read. */
+.axi-chart {
+  /* Every figure in a chart is a label of a number, so the whole scope reads
+     tabular. Nothing else is declared on the scope: a chart's size belongs to
+     the library's container and the consumer's layout. */
+  font-variant-numeric: tabular-nums;
+}
+.axi-chart .recharts-cartesian-grid line {
+  stroke: var(--axi-grid);
+  stroke-dasharray: none;
+  stroke-width: 1;
+}
+/* Stripes are a second background inside a chart that already has one. */
+.axi-chart .recharts-cartesian-grid-bg,
+.axi-chart .recharts-cartesian-gridstripes-horizontal,
+.axi-chart .recharts-cartesian-gridstripes-vertical { display: none; }
+
+.axi-chart .recharts-cartesian-axis-line {
+  stroke: var(--axi-rule);
+  stroke-width: var(--axi-border-hairline);
+}
+.axi-chart .recharts-cartesian-axis-tick-line { stroke: var(--axi-rule); }
+.axi-chart .recharts-cartesian-axis-tick-value { fill: var(--axi-text-faint); }
+.axi-chart .recharts-label,
+.axi-chart .recharts-legend-item-text { fill: var(--axi-text-dim); color: var(--axi-text-dim); }
+/* The legend is a key, so it reads as labels rather than as chips - the same
+   type .axi-legend__key sets. */
+.axi-chart .recharts-legend-wrapper {
+  font: var(--axi-t-micro);
+  letter-spacing: var(--axi-ls-micro);
+  text-transform: uppercase;
+}
+
+/* The hover band. A fill change rather than a wash: the next surface up, as
+   one paint, edged with the rule at the hairline like every line here. */
+.axi-chart .recharts-tooltip-cursor {
+  fill: var(--axi-surface-raised-paint);
+  fill-opacity: 1;
+  stroke: var(--axi-rule);
+  stroke-width: var(--axi-border-hairline);
+}
+/* A line chart's cursor is a crosshair, not a band, so it stays a line. */
+.axi-chart .recharts-curve.recharts-tooltip-cursor {
+  fill: none;
+  stroke: var(--axi-rule);
+  stroke-dasharray: none;
+}
+
+/* Small objects standing on a series keep their fill and take the ink edge. */
+.axi-chart .recharts-line-dot,
+.axi-chart .recharts-scatter-symbol > path,
+.axi-chart .recharts-pie-sector > path,
+.axi-chart .recharts-bar-rectangle > path {
+  stroke: var(--axi-ink-line);
+  stroke-width: var(--axi-border-hairline);
+}
+.axi-chart .recharts-active-dot > * {
+  stroke: var(--axi-ink-line);
+  stroke-width: var(--axi-border-control);
+}
+.axi-chart .recharts-bar-background-rectangle { fill: var(--axi-well-fill); }
+
+.axi-chart .recharts-reference-line-line {
+  stroke: var(--axi-text-faint);
+  stroke-width: var(--axi-border-hairline);
+  stroke-dasharray: none;
+}
+
+/* The brush: a well, a slide, two travellers, and the preview curve dropped to
+   furniture weight because it is context rather than data you read off. */
+.axi-chart .recharts-brush > rect:first-of-type {
+  fill: var(--axi-well-fill);
+  stroke: var(--axi-well-line);
+  stroke-width: var(--axi-border-control);
+}
+.axi-chart .recharts-brush-slide {
+  fill: var(--axi-surface-paint);
+  fill-opacity: 1;
+}
+.axi-chart .recharts-brush-traveller > rect {
+  fill: var(--axi-accent);
+  stroke: var(--axi-ink-line);
+  stroke-width: var(--axi-border-hairline);
+}
+.axi-chart .recharts-brush-traveller > line { stroke: var(--axi-accent-ink); }
+.axi-chart .recharts-brush-texts { fill: var(--axi-text-faint); }
+.axi-chart .recharts-brush .recharts-curve {
+  stroke: var(--axi-text-faint);
+  fill: none;
+}

package/src/primitives.css

@@ -75,6 +75,28 @@ a.axi-panel--tile:hover,
 button.axi-panel--tile:hover,
 .axi-panel--tile[role='button']:hover { box-shadow: var(--axi-shadow-control-hover); }
 
+/* The status cap rule 5 describes, as a thing you can write. A verdict about
+   the reading inside a panel, a tile or a stat is said once, across its head,
+   in the status ink - directly over the value it judges - and the rest of the
+   outline stays the ink line every other edge in the language is drawn in. Not
+   down the left: a full-height stripe is the box's frame, and five tiles in a
+   row become five coloured frames saying nothing about any one number.
+
+   It recolours the top edge the element already has rather than adding a bar,
+   so it is drawn at the element's own weight by construction - the panel step
+   on a panel, the control step on a tile or a stat - which is rule 5's own
+   argument against a heavy cap on a light frame. The state is an attribute the
+   consumer declares about its data (rule 13), read by the three objects a
+   reading lives in; a card's strip is a different claim (which category) and
+   keeps its own word.
+
+   Four values and no fifth: the accent is not a verdict, and a cap in it would
+   say "picked" about a thing nobody picked. */
+.axi-panel[data-status="ok"],     .axi-stat[data-status="ok"]     { border-top-color: var(--axi-ok); }
+.axi-panel[data-status="warn"],   .axi-stat[data-status="warn"]   { border-top-color: var(--axi-warn); }
+.axi-panel[data-status="danger"], .axi-stat[data-status="danger"] { border-top-color: var(--axi-danger); }
+.axi-panel[data-status="meta"],   .axi-stat[data-status="meta"]   { border-top-color: var(--axi-meta); }
+
 /* The one of these you picked. A grid of panels, tiles or cards where one is
    chosen - a theme picker, a fight picker, a leader you have opened - and the
    surface has to say which.
@@ -164,6 +186,30 @@ button.axi-panel--tile:hover,
    the pad knob is still the right way to say anything else. */
 .axi-well--sm { --axi-well-radius: var(--axi-radius-sm); }
 
+/* ---------- the empty state ---------- */
+/* A well with nothing in it but the sentence saying so.
+
+   Every view that can have no data has to say so somewhere, and the first
+   consumer counted said it eighty times - a dashed-border box, centred, small,
+   dim - in eighty copies of the same eleven utilities, none of them a word the
+   language had. Dashed, because the box was "provisional"; the language says
+   provisional with the outlined/filled distinction (rule 5), so the edge is
+   the well's own rule. It is a well because an absence is a recess: the place
+   a table would stand, sunk into the surface, with nothing standing in it.
+
+   Only the sentence's type and placement are added to the well, and the
+   generous pad is the point - an empty state that is as tall as a single row
+   reads as a row that failed to render. */
+.axi-empty {
+  background: var(--axi-well-fill);
+  border: var(--axi-border-control) solid var(--axi-well-line);
+  border-radius: var(--axi-radius-sm);
+  padding: var(--axi-empty-pad, 24px 16px);
+  text-align: center;
+  font: var(--axi-t-small);
+  color: var(--axi-text-dim);
+}
+
 /* ---------- button ---------- */
 .axi-btn {
   display: inline-flex; align-items: center; gap: 8px;

package/src/tokens.css

@@ -118,6 +118,20 @@
      --axi-ink-on-fill below, on the other side of the same token. */
   --axi-ground-deep: var(--axi-ink-line);
   --axi-rule: #3a4250;            /* internal rules, inside an outlined panel */
+  /* A gridline is quieter than a rule. A rule divides two things; a grid is
+     scaffolding a value is read against, and it has to sit barely above the
+     ground it is drawn on or the chart becomes a grid of boxes with numbers
+     in them - the failure rule 3 names for tables, arriving in a plot.
+
+     Derived, not picked, and that is the point of its being a token. The one
+     consumer that had drawn a chart grid wrote #262c36 for it: the default
+     rule laid over the default ground at 47%, to within one step per channel,
+     and a fixed slate that stayed slate under glass and under flat while both
+     themes relit their rules. Mixing toward transparent rather than toward
+     the ground keeps it right on a panel fill too, and keeps it following
+     --axi-rule when a theme restates that - so a theme has nothing to say
+     here, and says nothing. */
+  --axi-grid: color-mix(in srgb, var(--axi-rule) 47%, transparent);
   /* --- the well --- */
   /* A field sunk INTO a surface rather than raised off one: a table picker's
      list, a bar's trough, a column of cards standing on the page. The language