@axiapps/axi-design 1.37.1 → 1.39.0

package/README.md

@@ -144,6 +144,7 @@ not "what does the system look like". Everything else is
 | `--axi-pill-size` | an `.axi-pill`'s text size, which travels with its padding | `13px` | `<button class="axi-pill" style="--axi-pill-size: 10px">` |
 | `--axi-input-pad` | the padding inside an `.axi-input`, for a field that is furniture in a header rather than a control on a page | `11px 12px` | `<input class="axi-input" style="--axi-input-pad: 7px 12px">` |
 | `--axi-input-size` | an `.axi-input`'s text size, which travels with its padding | `14px` | `<input class="axi-input" style="--axi-input-size: 13px">` |
+| `--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-rail-w` | an `.axi-rail`'s width, for labels longer than the default holds | `208px` | `<aside class="axi-rail" style="--axi-rail-w: 260px">` |

package/dist/axi.css

@@ -786,6 +786,74 @@ button.axi-panel--tile:hover,
 .axi-link:where(:hover),
 .axi-prose a:where(:hover) { color: var(--axi-text); }
 
+/* ---------- quiet action ---------- */
+/* A control that is only its label. Not a button - it draws no box, takes no
+   padding and sits inside running text or a dense header where a box would be
+   the loudest thing on screen. Not a link either: a link goes somewhere and
+   says so with an underline and the accent, while this does something to the
+   view you are already looking at.
+
+   It exists because the first consumer counted had ninety of them and no class
+   for any of them, so each spelled out its own resting colour and - the part
+   that actually broke - its own hover colour. Fifteen different hover colours
+   across ninety sites, every one a literal from a utility palette rather than
+   a token, which means every one of them left the theme at the moment the
+   cursor arrived.
+
+   Three of those ninety did worse than leave the theme. A control resting on
+   the warning ink hovered to a neutral grey, and one resting on the danger ink
+   hovered to white: the verdict disappearing exactly when the reader reaches
+   for it. That is the same failure rule 6's addendum describes on .axi-btn,
+   arriving by a different road - not a component out-ranking its own modifier,
+   but an author naming a colour that had no business being named. The fix is
+   the same shape, and it is why the hover below is `:where(:hover)`: it weighs
+   one class, so `axi-action axi-ink-danger` stays red under the cursor and
+   takes its feedback from the underline instead.
+
+   `font: inherit` and not the label font: these land at 10px in a chart
+   legend, 11px in a section header and 14px in a modal, and a control that is
+   only its label has no business resizing the text around it. The weight is
+   inherited too, which is where this parts company with .axi-link - a link is
+   600 wherever it lands because it must be findable in a paragraph; an action
+   already sits where the reader is looking. */
+.axi-action {
+  padding: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  text-align: inherit;
+  color: var(--axi-text-dim);
+  cursor: pointer;
+  transition: color .1s;
+}
+/* Brighten for the uninked case, underline for every case. The colour change
+   is a fallback the ink layer beats by design, so an inked action would have
+   no hover feedback at all without a second signal that names no colour. An
+   underline is the one this language already trusts - it is how .axi-link
+   marks itself actionable - and it reads on amber, on red and on plain alike. */
+.axi-action:where(:hover) {
+  color: var(--axi-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* An action whose label is a single glyph: a clear-field cross, a stepper
+   arrow, a star that marks a favourite. Same control, but a glyph gives the
+   pointer almost nothing to land on, so this is the one thing the plain action
+   does not need - a hit target. The box stays invisible; only its size is
+   declared. */
+.axi-action--glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--axi-action-hit, 24px);
+  min-height: var(--axi-action-hit, 24px);
+  /* The label is a glyph, so there is no text to underline - the brighten is
+     the whole signal and the underline would draw a stray rule beside it. */
+  text-decoration: none;
+}
+.axi-action--glyph:where(:hover) { text-decoration: none; }
+
 /* ---------- keyboard key ---------- */
 /* A key on the keyboard, named in the interface: the Esc that closes a
    palette, the Ctrl K that opens it. Drawn as a small control rather than as a
@@ -2429,7 +2497,19 @@ textarea.axi-input {
    alternative of filling the container and leaving the cells transparent: a
    sticky head has to carry its own fill, because a fill on `thead` stays
    behind while the cells travel. */
-.axi-table tbody tr:hover :is(td, th) {
+/* Written to weigh exactly one class, which takes some doing for a rule that
+   has to reach a descendant. `.axi-table tbody tr:hover :is(td, th)` weighed
+   three classes and four elements, so it beat the ink layer's one - and the
+   consumer that found this had six cells inked danger and six inked ok, every
+   one of which went plain the moment its row was hovered. A red value and a
+   green value both losing their verdict exactly as the reader reaches for them
+   is rule 6's addendum again, arriving through a descendant selector.
+
+   `.axi-table` is the only thing here that counts, so this lands level with the
+   resting cell rule (`.axi-table :where(td, tbody th)`, also one class) and
+   wins on order, while an ink class in utilities.css - one class, later file -
+   wins over both. */
+.axi-table :where(tbody tr:hover) :where(td, th) {
   background: var(--axi-surface-raised);
   background-attachment: fixed;
   color: var(--axi-text);
@@ -2473,8 +2553,29 @@ textarea.axi-input {
   border-inline-start-color: var(--axi-accent);
 }
 .axi-table__num { color: var(--axi-text); }
-/* A name cell: an icon, a diamond or a rank beside the label. */
-.axi-table__who { display: flex; align-items: center; gap: 9px; }
+/* A name cell: an icon, a diamond or a rank beside the label.
+
+   The label truncates and the mark does not. A name is arbitrarily long - a
+   skill called "Chapter 4: Scorched Aftermath" measured 417px against a 183px
+   column - and with nothing said, a flex row lets it spill across its
+   neighbours rather than shrink. The same reasoning as the comment on
+   .axi-tabs__tab, and the same pair of requirements: min-width: 0 on the
+   container AND on the shrinking child, because a flex item's default
+   min-width is its content, so the ellipsis never appears without both.
+
+   Selected by element, not by a class the consumer adds: which child is the
+   icon and which is the label is visible in the markup, and asking every
+   consumer to label it invites exactly the omission this rule exists to fix.
+   The `flex: none` on the mark is the load-bearing half - without it the icon
+   squashes toward zero before the text gives up any room at all. */
+.axi-table__who { display: flex; align-items: center; gap: 9px; min-width: 0; }
+.axi-table__who > :where(img, svg) { flex: none; }
+.axi-table__who > :where(span, a, div, p) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 /* Rank is the only fill a table gets, and only where the position is real -
    a podium, not a row number. An outlined rank is the ordinary case. */
 .axi-table__rank {
@@ -2552,6 +2653,25 @@ textarea.axi-input {
    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); }
+/* Proportional columns, for a table inside a pane rather than a page.
+
+   `width: 100%` is a floor, not a cap. Under the default auto layout the
+   columns size to their content, and because every cell here is `nowrap`,
+   content wins: a three-column table measured 581px inside a 360px pane.
+   A page-width table absorbs that, and .axi-table__scroll turns it into a
+   horizontal scrollbar on purpose. A table sharing a 480px pane with a
+   selector list has neither option - it needs the columns to divide the room
+   it has, which is what a grid's `fr` gives for free and is the reason
+   hand-built tables in panes were grids.
+
+   The consumer sets the proportions in a <colgroup>, because they are facts
+   about one table's columns and nothing here can know them.
+
+   Cells get the clip, not just the ellipsis: fixed layout makes a cell
+   narrower than its content the normal case rather than the exception, and
+   an unclipped cell paints over the column beside it. */
+.axi-table--fixed { table-layout: fixed; }
+.axi-table--fixed :where(td, th) { overflow: hidden; text-overflow: ellipsis; }
 /* 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 -

package/dist/themes/flat.css

@@ -0,0 +1,27 @@
+/* axi design language - generated by scripts/build.mjs.
+   Edit the files in src/ and run `npm run build`; do not edit this file. */
+
+[data-axi-theme="flat"] {
+  --axi-ground: #090b10;
+  --axi-surface: linear-gradient(#1c2130, #181d2c);
+  --axi-surface-raised: linear-gradient(#242a3b, #202636);
+  --axi-well-fill: #141822;
+  --axi-ink-line: rgba(255, 255, 255, .10);
+  --axi-rule: rgba(255, 255, 255, .07);
+  --axi-ground-deep: #0c1015;
+  --axi-accent-ink: #0c1015;
+  --axi-ink-on-fill: #0c1015;
+  --axi-text: #e8eaed;
+  --axi-text-dim: #8b929e;
+  --axi-text-faint: #5d6577;
+  --axi-shadow-panel: 0 2px 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
+  --axi-shadow-control: 0 1px 4px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .045);
+  --axi-shadow-panel-hover: 0 6px 18px rgba(0, 0, 0, .5), 0 2px 5px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);
+  --axi-shadow-control-hover: 0 3px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
+  --axi-border-panel: 1px;
+  --axi-border-control: 1px;
+  --axi-border-hairline: 1px;
+  --axi-radius: 10px;
+  --axi-radius-sm: 6px;
+  --axi-radius-xs: 3px;
+}

package/package.json

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

@@ -127,7 +127,19 @@
    alternative of filling the container and leaving the cells transparent: a
    sticky head has to carry its own fill, because a fill on `thead` stays
    behind while the cells travel. */
-.axi-table tbody tr:hover :is(td, th) {
+/* Written to weigh exactly one class, which takes some doing for a rule that
+   has to reach a descendant. `.axi-table tbody tr:hover :is(td, th)` weighed
+   three classes and four elements, so it beat the ink layer's one - and the
+   consumer that found this had six cells inked danger and six inked ok, every
+   one of which went plain the moment its row was hovered. A red value and a
+   green value both losing their verdict exactly as the reader reaches for them
+   is rule 6's addendum again, arriving through a descendant selector.
+
+   `.axi-table` is the only thing here that counts, so this lands level with the
+   resting cell rule (`.axi-table :where(td, tbody th)`, also one class) and
+   wins on order, while an ink class in utilities.css - one class, later file -
+   wins over both. */
+.axi-table :where(tbody tr:hover) :where(td, th) {
   background: var(--axi-surface-raised);
   background-attachment: fixed;
   color: var(--axi-text);
@@ -171,8 +183,29 @@
   border-inline-start-color: var(--axi-accent);
 }
 .axi-table__num { color: var(--axi-text); }
-/* A name cell: an icon, a diamond or a rank beside the label. */
-.axi-table__who { display: flex; align-items: center; gap: 9px; }
+/* A name cell: an icon, a diamond or a rank beside the label.
+
+   The label truncates and the mark does not. A name is arbitrarily long - a
+   skill called "Chapter 4: Scorched Aftermath" measured 417px against a 183px
+   column - and with nothing said, a flex row lets it spill across its
+   neighbours rather than shrink. The same reasoning as the comment on
+   .axi-tabs__tab, and the same pair of requirements: min-width: 0 on the
+   container AND on the shrinking child, because a flex item's default
+   min-width is its content, so the ellipsis never appears without both.
+
+   Selected by element, not by a class the consumer adds: which child is the
+   icon and which is the label is visible in the markup, and asking every
+   consumer to label it invites exactly the omission this rule exists to fix.
+   The `flex: none` on the mark is the load-bearing half - without it the icon
+   squashes toward zero before the text gives up any room at all. */
+.axi-table__who { display: flex; align-items: center; gap: 9px; min-width: 0; }
+.axi-table__who > :where(img, svg) { flex: none; }
+.axi-table__who > :where(span, a, div, p) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 /* Rank is the only fill a table gets, and only where the position is real -
    a podium, not a row number. An outlined rank is the ordinary case. */
 .axi-table__rank {
@@ -250,6 +283,25 @@
    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); }
+/* Proportional columns, for a table inside a pane rather than a page.
+
+   `width: 100%` is a floor, not a cap. Under the default auto layout the
+   columns size to their content, and because every cell here is `nowrap`,
+   content wins: a three-column table measured 581px inside a 360px pane.
+   A page-width table absorbs that, and .axi-table__scroll turns it into a
+   horizontal scrollbar on purpose. A table sharing a 480px pane with a
+   selector list has neither option - it needs the columns to divide the room
+   it has, which is what a grid's `fr` gives for free and is the reason
+   hand-built tables in panes were grids.
+
+   The consumer sets the proportions in a <colgroup>, because they are facts
+   about one table's columns and nothing here can know them.
+
+   Cells get the clip, not just the ellipsis: fixed layout makes a cell
+   narrower than its content the normal case rather than the exception, and
+   an unclipped cell paints over the column beside it. */
+.axi-table--fixed { table-layout: fixed; }
+.axi-table--fixed :where(td, th) { overflow: hidden; text-overflow: ellipsis; }
 /* 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 -

package/src/primitives.css

@@ -493,6 +493,74 @@ button.axi-panel--tile:hover,
 .axi-link:where(:hover),
 .axi-prose a:where(:hover) { color: var(--axi-text); }
 
+/* ---------- quiet action ---------- */
+/* A control that is only its label. Not a button - it draws no box, takes no
+   padding and sits inside running text or a dense header where a box would be
+   the loudest thing on screen. Not a link either: a link goes somewhere and
+   says so with an underline and the accent, while this does something to the
+   view you are already looking at.
+
+   It exists because the first consumer counted had ninety of them and no class
+   for any of them, so each spelled out its own resting colour and - the part
+   that actually broke - its own hover colour. Fifteen different hover colours
+   across ninety sites, every one a literal from a utility palette rather than
+   a token, which means every one of them left the theme at the moment the
+   cursor arrived.
+
+   Three of those ninety did worse than leave the theme. A control resting on
+   the warning ink hovered to a neutral grey, and one resting on the danger ink
+   hovered to white: the verdict disappearing exactly when the reader reaches
+   for it. That is the same failure rule 6's addendum describes on .axi-btn,
+   arriving by a different road - not a component out-ranking its own modifier,
+   but an author naming a colour that had no business being named. The fix is
+   the same shape, and it is why the hover below is `:where(:hover)`: it weighs
+   one class, so `axi-action axi-ink-danger` stays red under the cursor and
+   takes its feedback from the underline instead.
+
+   `font: inherit` and not the label font: these land at 10px in a chart
+   legend, 11px in a section header and 14px in a modal, and a control that is
+   only its label has no business resizing the text around it. The weight is
+   inherited too, which is where this parts company with .axi-link - a link is
+   600 wherever it lands because it must be findable in a paragraph; an action
+   already sits where the reader is looking. */
+.axi-action {
+  padding: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  text-align: inherit;
+  color: var(--axi-text-dim);
+  cursor: pointer;
+  transition: color .1s;
+}
+/* Brighten for the uninked case, underline for every case. The colour change
+   is a fallback the ink layer beats by design, so an inked action would have
+   no hover feedback at all without a second signal that names no colour. An
+   underline is the one this language already trusts - it is how .axi-link
+   marks itself actionable - and it reads on amber, on red and on plain alike. */
+.axi-action:where(:hover) {
+  color: var(--axi-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* An action whose label is a single glyph: a clear-field cross, a stepper
+   arrow, a star that marks a favourite. Same control, but a glyph gives the
+   pointer almost nothing to land on, so this is the one thing the plain action
+   does not need - a hit target. The box stays invisible; only its size is
+   declared. */
+.axi-action--glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--axi-action-hit, 24px);
+  min-height: var(--axi-action-hit, 24px);
+  /* The label is a glyph, so there is no text to underline - the brighten is
+     the whole signal and the underline would draw a stray rule beside it. */
+  text-decoration: none;
+}
+.axi-action--glyph:where(:hover) { text-decoration: none; }
+
 /* ---------- keyboard key ---------- */
 /* A key on the keyboard, named in the interface: the Esc that closes a
    palette, the Ctrl K that opens it. Drawn as a small control rather than as a