@axiapps/axi-design 1.45.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

@@ -590,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.45.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/primitives.css

@@ -186,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;