@axiapps/axi-design 1.19.0 → 1.21.0

package/dist/axi.css

@@ -144,6 +144,14 @@
      control-sized reads --axi-radius-sm. */
   --axi-radius: 0;
   --axi-radius-sm: 0;
+  /* The third step, for a box the size of the text beside it: a checkbox, a
+     radio. --axi-radius-sm is sized for something you press - a button, an
+     input, 36px tall - and a theme is free to set it to 10px. On a 22px
+     square 10px is most of the box: the checkbox stops being a square and
+     becomes a circle, and a circle next to rule 7's diamond radio is the one
+     shape confusion this pair exists to avoid. A theme that wants soft
+     corners sets all three. */
+  --axi-radius-xs: 0;
   /* Not a form step: a hairline used inside prose (inline code, table rules,
      the list bullet) where the two form steps above would read as too heavy
      for a line of running text. */
@@ -286,6 +294,15 @@ a { color: inherit; }
      fit is genuinely called for. */
   padding: var(--axi-panel-pad, 26px);
 }
+/* A panel that floats over moving content rather than sitting in the page: a
+   readout pinned to a chart, a popover over a scrolling table. Same object,
+   same everything else; the one thing that changes is the surface it is
+   printed on. --axi-surface is a translucent tint under a theme like glass,
+   which reads as a pane only while what is behind it holds still - the moment
+   the content scrolls, it shows through the panel. --axi-surface-float is the
+   surface for exactly that case. Says the same thing .axi-rail--float says,
+   on the other surface that needs it. */
+.axi-panel--float { background: var(--axi-surface-float); }
 
 /* ---------- well ---------- */
 /* The panel's inverse: a field sunk into the surface around it rather than
@@ -795,7 +812,10 @@ a { color: inherit; }
   place-items: center;
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: var(--axi-radius-sm);
+  /* The text-sized step, not the control-sized one - see --axi-radius-xs in
+     src/tokens.css for why a 22px box cannot take a corner scaled for a 36px
+     button. */
+  border-radius: var(--axi-radius-xs);
   cursor: pointer;
 }
 /* The mark is always in the DOM and revealed with opacity rather than being
@@ -1366,6 +1386,22 @@ textarea.axi-input {
   white-space: nowrap;
   pointer-events: none;
 }
+/* Positioned by the thing it describes rather than by the cursor. The <body>
+   contract above is what position: fixed costs; a tooltip that belongs to one
+   trigger can be a child of it instead, and then it wants the trigger's
+   coordinate space. Rule 4's transformed ancestor is the reason fixed cannot
+   live there - absolute is anchored to exactly that ancestor, so a hover lift
+   carries the tooltip with it instead of stranding it.
+
+   The consumer supplies the offsets (a `position: relative` trigger and the
+   left/top or inset the placement needs); this only changes which box those
+   offsets are measured from. */
+.axi-tooltip--anchored { position: absolute; }
+/* A tooltip carrying a sentence rather than a value. nowrap is right for a
+   reading - a number that breaks across two lines is harder to read than one
+   that runs past its trigger - and wrong for prose, which needs a width from
+   the consumer to wrap inside. */
+.axi-tooltip--wrap { white-space: normal; }
 
 /* ---------- card ---------- */
 .axi-card {
@@ -1806,7 +1842,11 @@ textarea.axi-input {
 .axi-table td { text-align: right; white-space: nowrap; }
 .axi-table th:first-child,
 .axi-table td:first-child { text-align: left; }
-.axi-table th {
+/* `thead th`, not `th`. A row's name is a `<th scope="row">` - that is what
+   tells a screen reader which cell labels the row - and it is a name, not a
+   column heading: uppercase micro type down the first column would shout every
+   row's label at the reader. A row header takes the cell treatment below. */
+.axi-table thead th {
   padding: 0 10px 10px;
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);
@@ -1814,7 +1854,8 @@ textarea.axi-input {
   color: var(--axi-text-faint);
   border-bottom: var(--axi-border-control) solid var(--axi-rule);
 }
-.axi-table td {
+.axi-table td,
+.axi-table tbody th {
   padding: 9px 10px;
   font: var(--axi-t-small);
   font-weight: 700;
@@ -1825,7 +1866,7 @@ textarea.axi-input {
    hovering a row is not a status, and forty rows that each flash a colour on
    the way past the one you want is the tinted-everything failure rule 2 is
    about. */
-.axi-table tbody tr:hover td { background: var(--axi-surface-raised); color: var(--axi-text); }
+.axi-table tbody tr:hover :is(td, th) { background: var(--axi-surface-raised); color: var(--axi-text); }
 /* The measured value in a row, as opposed to its supporting numbers. */
 .axi-table__num { color: var(--axi-text); }
 /* A name cell: an icon, a diamond or a rank beside the label. */
@@ -1843,6 +1884,93 @@ textarea.axi-input {
 }
 .axi-table__rank--top { background: var(--axi-accent); color: var(--axi-accent-ink); }
 
+/* A table too wide and too tall for the panel holding it: twenty numeric
+   columns against forty players, scrolled in both directions. Rule 8 still
+   decides what every line means - the head is a lid at the control step, the
+   rows are hairlines - and the only new thing here is that the lid and the
+   row's name have to stay put while the numbers move under them.
+
+   `border-collapse: separate` is load-bearing, not housekeeping. A collapsed
+   table hoists its cell borders onto the table itself, and a border owned by
+   the table scrolls away with it, so a sticky head drawn under `collapse`
+   loses the very line that makes it a lid. Separate borders stay with the
+   cell that declared them. Each modifier sets it, so either works alone.
+
+   Note what is NOT here. No block: an edge that has to hold under scrolling
+   is a border, and a block in this language is an offset rectangle, which is
+   not the shape of the top of a column. No scrolled-under state either - the
+   head's edge is drawn whether anything has moved beneath it or not, so there
+   is nothing for scrolling to reveal. */
+/* The isolation is the reason the three z-indexes below can be 1, 2 and 3:
+   they are resolved in here and cannot compete with the page stack. See the
+   layer table in docs/RULES.md. */
+.axi-table__scroll { overflow: auto; isolation: isolate; }
+/* The head stays. */
+.axi-table--sticky { border-collapse: separate; border-spacing: 0; }
+.axi-table--sticky thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  /* The float surface, not the raised one, and this is the whole reason
+     --axi-surface-float exists: rows travel behind both of these, and a glass
+     theme's ordinary surfaces are alpha, so a head at --axi-surface-raised
+     would have numbers sliding through it. Opaque is not a look here, it is
+     the requirement. */
+  background: var(--axi-surface-float);
+  border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The first column stays. It holds the row's name, and a name scrolled out of
+   sight makes every number left of it anonymous - which is the whole reason a
+   wide table is readable at all. Its edge is the cut the head carries, turned
+   ninety degrees. */
+.axi-table--pinned { border-collapse: separate; border-spacing: 0; }
+.axi-table--pinned :is(thead, tbody) :is(th, td):first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--axi-surface-float);
+  border-right: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The corner belongs to both and has to outrank both. */
+.axi-table--sticky.axi-table--pinned thead th:first-child { z-index: 3; }
+/* Twenty columns do not get a leaderboard's padding. The type steps down with
+   them; everything else about the table is unchanged, which is the point of
+   its being a modifier rather than a second table. */
+.axi-table--dense thead th { padding: 0 7px 6px; }
+.axi-table--dense :is(td, tbody th) { padding: 5px 7px; font: var(--axi-t-micro); }
+/* The sorted column, named with the attribute a screen reader already needs
+   in order to announce it. A class beside `aria-sort` would be a second
+   source of truth for one fact. The mark is ink on the head and its edge -
+   not a fill down the column, which is rule 2's tinted-everything failure
+   applied to the one column you are trying to read. */
+.axi-table th[aria-sort] {
+  color: var(--axi-accent);
+  border-bottom-color: var(--axi-accent);
+}
+/* CSS cannot reach "the cells under the sorted head", so the consumer marks
+   them. Full-strength text against the column's dimmed neighbours. */
+.axi-table__cell--sorted { color: var(--axi-text); }
+/* A sortable heading is a button, because sorting is an action and a <th> you
+   can click but not tab to is a column the keyboard cannot sort. It inherits
+   everything and adds nothing, so a heading looks the same whether it sorts or
+   not - the only thing that marks a sorted column is aria-sort above. */
+.axi-table__sort {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.axi-table th:first-child .axi-table__sort { justify-content: flex-start; }
+
 /* ---------- meter ---------- */
 /* Rule 9: a proportion is a length. The track is the ground, the fill is the
    value, and the fill is one ink at full strength - a tinted or faded bar is

package/dist/themes/glass.css

@@ -27,4 +27,5 @@
   --axi-border-hairline: 1px;
   --axi-radius: 16px;
   --axi-radius-sm: 10px;
+  --axi-radius-xs: 4px;
 }

package/docs/RULES.md

@@ -461,6 +461,9 @@ instead of joining it.
 
 | Layer | z-index | What sits here |
 |---|---|---|
+| Pinned column | 1 | `.axi-table--pinned`'s first column |
+| Sticky head | 2 | `.axi-table--sticky`'s `thead th` |
+| Table corner | 3 | where the two cross |
 | Sticky chrome | 40 | `.axi-mast` |
 | Popovers | 41 | `.axi-menu__pop`, `.axi-picker__pop` |
 | Scrim | 50 | `.axi-scrim` |
@@ -473,6 +476,15 @@ The modal has no number on purpose. A `<dialog>` opened with `showModal()` is
 promoted to the browser's top layer, which sits above every `z-index` there is;
 writing a number in that row would describe a competition the modal is not in.
 
+The first three are sealed rather than low. `.axi-table__scroll` sets
+`isolation: isolate`, so those numbers are resolved inside the scroll container
+and never compete with the page layers under them - a table's sticky head
+cannot climb over a mast, and a table inside a drawer cannot reach out of it.
+They are listed because a table needs three orderings among its own cells and a
+number that is never written down is a number that drifts; the isolation is
+what keeps 1, 2 and 3 from meaning anything outside the table that declares
+them.
+
 A negative `z-index` inside a component's own `isolation` context — the sigil's
 backing shape — is not a layer and is not listed. It is invisible outside the
 component that owns it.

package/package.json

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

package/src/data.css

@@ -64,7 +64,11 @@
 .axi-table td { text-align: right; white-space: nowrap; }
 .axi-table th:first-child,
 .axi-table td:first-child { text-align: left; }
-.axi-table th {
+/* `thead th`, not `th`. A row's name is a `<th scope="row">` - that is what
+   tells a screen reader which cell labels the row - and it is a name, not a
+   column heading: uppercase micro type down the first column would shout every
+   row's label at the reader. A row header takes the cell treatment below. */
+.axi-table thead th {
   padding: 0 10px 10px;
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);
@@ -72,7 +76,8 @@
   color: var(--axi-text-faint);
   border-bottom: var(--axi-border-control) solid var(--axi-rule);
 }
-.axi-table td {
+.axi-table td,
+.axi-table tbody th {
   padding: 9px 10px;
   font: var(--axi-t-small);
   font-weight: 700;
@@ -83,7 +88,7 @@
    hovering a row is not a status, and forty rows that each flash a colour on
    the way past the one you want is the tinted-everything failure rule 2 is
    about. */
-.axi-table tbody tr:hover td { background: var(--axi-surface-raised); color: var(--axi-text); }
+.axi-table tbody tr:hover :is(td, th) { background: var(--axi-surface-raised); color: var(--axi-text); }
 /* The measured value in a row, as opposed to its supporting numbers. */
 .axi-table__num { color: var(--axi-text); }
 /* A name cell: an icon, a diamond or a rank beside the label. */
@@ -101,6 +106,93 @@
 }
 .axi-table__rank--top { background: var(--axi-accent); color: var(--axi-accent-ink); }
 
+/* A table too wide and too tall for the panel holding it: twenty numeric
+   columns against forty players, scrolled in both directions. Rule 8 still
+   decides what every line means - the head is a lid at the control step, the
+   rows are hairlines - and the only new thing here is that the lid and the
+   row's name have to stay put while the numbers move under them.
+
+   `border-collapse: separate` is load-bearing, not housekeeping. A collapsed
+   table hoists its cell borders onto the table itself, and a border owned by
+   the table scrolls away with it, so a sticky head drawn under `collapse`
+   loses the very line that makes it a lid. Separate borders stay with the
+   cell that declared them. Each modifier sets it, so either works alone.
+
+   Note what is NOT here. No block: an edge that has to hold under scrolling
+   is a border, and a block in this language is an offset rectangle, which is
+   not the shape of the top of a column. No scrolled-under state either - the
+   head's edge is drawn whether anything has moved beneath it or not, so there
+   is nothing for scrolling to reveal. */
+/* The isolation is the reason the three z-indexes below can be 1, 2 and 3:
+   they are resolved in here and cannot compete with the page stack. See the
+   layer table in docs/RULES.md. */
+.axi-table__scroll { overflow: auto; isolation: isolate; }
+/* The head stays. */
+.axi-table--sticky { border-collapse: separate; border-spacing: 0; }
+.axi-table--sticky thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  /* The float surface, not the raised one, and this is the whole reason
+     --axi-surface-float exists: rows travel behind both of these, and a glass
+     theme's ordinary surfaces are alpha, so a head at --axi-surface-raised
+     would have numbers sliding through it. Opaque is not a look here, it is
+     the requirement. */
+  background: var(--axi-surface-float);
+  border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The first column stays. It holds the row's name, and a name scrolled out of
+   sight makes every number left of it anonymous - which is the whole reason a
+   wide table is readable at all. Its edge is the cut the head carries, turned
+   ninety degrees. */
+.axi-table--pinned { border-collapse: separate; border-spacing: 0; }
+.axi-table--pinned :is(thead, tbody) :is(th, td):first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--axi-surface-float);
+  border-right: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The corner belongs to both and has to outrank both. */
+.axi-table--sticky.axi-table--pinned thead th:first-child { z-index: 3; }
+/* Twenty columns do not get a leaderboard's padding. The type steps down with
+   them; everything else about the table is unchanged, which is the point of
+   its being a modifier rather than a second table. */
+.axi-table--dense thead th { padding: 0 7px 6px; }
+.axi-table--dense :is(td, tbody th) { padding: 5px 7px; font: var(--axi-t-micro); }
+/* The sorted column, named with the attribute a screen reader already needs
+   in order to announce it. A class beside `aria-sort` would be a second
+   source of truth for one fact. The mark is ink on the head and its edge -
+   not a fill down the column, which is rule 2's tinted-everything failure
+   applied to the one column you are trying to read. */
+.axi-table th[aria-sort] {
+  color: var(--axi-accent);
+  border-bottom-color: var(--axi-accent);
+}
+/* CSS cannot reach "the cells under the sorted head", so the consumer marks
+   them. Full-strength text against the column's dimmed neighbours. */
+.axi-table__cell--sorted { color: var(--axi-text); }
+/* A sortable heading is a button, because sorting is an action and a <th> you
+   can click but not tab to is a column the keyboard cannot sort. It inherits
+   everything and adds nothing, so a heading looks the same whether it sorts or
+   not - the only thing that marks a sorted column is aria-sort above. */
+.axi-table__sort {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.axi-table th:first-child .axi-table__sort { justify-content: flex-start; }
+
 /* ---------- meter ---------- */
 /* Rule 9: a proportion is a length. The track is the ground, the fill is the
    value, and the fill is one ink at full strength - a tinted or faded bar is

package/src/forms.css

@@ -36,7 +36,10 @@
   place-items: center;
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: var(--axi-radius-sm);
+  /* The text-sized step, not the control-sized one - see --axi-radius-xs in
+     src/tokens.css for why a 22px box cannot take a corner scaled for a 36px
+     button. */
+  border-radius: var(--axi-radius-xs);
   cursor: pointer;
 }
 /* The mark is always in the DOM and revealed with opacity rather than being

package/src/primitives.css

@@ -28,6 +28,15 @@
      fit is genuinely called for. */
   padding: var(--axi-panel-pad, 26px);
 }
+/* A panel that floats over moving content rather than sitting in the page: a
+   readout pinned to a chart, a popover over a scrolling table. Same object,
+   same everything else; the one thing that changes is the surface it is
+   printed on. --axi-surface is a translucent tint under a theme like glass,
+   which reads as a pane only while what is behind it holds still - the moment
+   the content scrolls, it shows through the panel. --axi-surface-float is the
+   surface for exactly that case. Says the same thing .axi-rail--float says,
+   on the other surface that needs it. */
+.axi-panel--float { background: var(--axi-surface-float); }
 
 /* ---------- well ---------- */
 /* The panel's inverse: a field sunk into the surface around it rather than

package/src/shells.css

@@ -467,6 +467,22 @@
   white-space: nowrap;
   pointer-events: none;
 }
+/* Positioned by the thing it describes rather than by the cursor. The <body>
+   contract above is what position: fixed costs; a tooltip that belongs to one
+   trigger can be a child of it instead, and then it wants the trigger's
+   coordinate space. Rule 4's transformed ancestor is the reason fixed cannot
+   live there - absolute is anchored to exactly that ancestor, so a hover lift
+   carries the tooltip with it instead of stranding it.
+
+   The consumer supplies the offsets (a `position: relative` trigger and the
+   left/top or inset the placement needs); this only changes which box those
+   offsets are measured from. */
+.axi-tooltip--anchored { position: absolute; }
+/* A tooltip carrying a sentence rather than a value. nowrap is right for a
+   reading - a number that breaks across two lines is harder to read than one
+   that runs past its trigger - and wrong for prose, which needs a width from
+   the consumer to wrap inside. */
+.axi-tooltip--wrap { white-space: normal; }
 
 /* ---------- card ---------- */
 .axi-card {

package/src/tokens.css

@@ -140,6 +140,14 @@
      control-sized reads --axi-radius-sm. */
   --axi-radius: 0;
   --axi-radius-sm: 0;
+  /* The third step, for a box the size of the text beside it: a checkbox, a
+     radio. --axi-radius-sm is sized for something you press - a button, an
+     input, 36px tall - and a theme is free to set it to 10px. On a 22px
+     square 10px is most of the box: the checkbox stops being a square and
+     becomes a circle, and a circle next to rule 7's diamond radio is the one
+     shape confusion this pair exists to avoid. A theme that wants soft
+     corners sets all three. */
+  --axi-radius-xs: 0;
   /* Not a form step: a hairline used inside prose (inline code, table rules,
      the list bullet) where the two form steps above would read as too heavy
      for a line of running text. */