@axiapps/axi-design 1.37.0 → 1.38.0

package/dist/axi.css

@@ -2442,31 +2442,60 @@ textarea.axi-input {
    the row is the whole fact, and a class beside it would be a second source of
    truth for one thing.
 
-   The fill is the float step, not the raised one, and the reason is the hover
-   directly above: hovering a row ALREADY raises it, so a selection drawn at the
-   raised step is indistinguishable from the row under the cursor -- and every
-   consumer who has hand-written this state has hit that and reached for a hue
-   instead, which is rule 2's tinted-everything failure arrived at honestly.
-   Hover is a transient lift and selection is a held one, so selection sits one
-   step beyond it and hovering a selected row must not pull it back down.
-
-   No accent, and no leading edge either. The accent is for one claim per screen
-   and a selected row spends it on something a detail pane usually spends again;
-   an edge would need a border reserved on every cell of every row, which is the
-   grid-of-boxes rule 8 refuses. The attachment is the one-surface-many-elements
-   case, same as the hover. */
+   The MARK is the leading edge, not the fill, and that is the whole design. The
+   hover directly above already raises a row, so any selection drawn as a fill
+   has to find a neutral step that hover is not using -- and there isn't one. The
+   ramp a theme is guaranteed to give is ground, surface, surface-raised; the
+   fourth token, --axi-surface-float, is not a step on it at all but a promise of
+   OPACITY for things that sit over content, which is why the default theme sets
+   it equal to --axi-surface and glass sets it darker than --axi-surface-raised.
+   A selection filled from it is invisible in one theme and a step backwards in
+   the other. This is the trap the token's name invites and the reason this
+   comment says so: float is an axis, not a rung.
+
+   So selection and hover share the raised fill and are told apart by the edge,
+   the same answer and the same reasoning as `.axi-rail__nav--quiet`. The first
+   cell of every body row reserves a transparent control-weight border for it, so
+   lighting the edge costs no reflow -- again exactly what `.axi-rail__item`
+   does. One edge is a mark; rule 8's refusal is of a BOX around a row, which is
+   what turns a list of numbers into a grid.
+
+   The attachment is the one-surface-many-elements case, same as the hover. */
+.axi-table :where(tbody tr) > :where(td, th):first-child {
+  border-inline-start: var(--axi-border-control) solid transparent;
+}
 .axi-table tbody tr[aria-current] :is(td, th) {
-  background: var(--axi-surface-float);
+  background: var(--axi-surface-raised);
   background-attachment: fixed;
   color: var(--axi-text);
 }
-.axi-table tbody tr[aria-current]:hover :is(td, th) {
-  background: var(--axi-surface-float);
-  background-attachment: fixed;
+.axi-table tbody tr[aria-current] > :is(td, th):first-child {
+  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 {
@@ -2544,6 +2573,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/package.json

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

@@ -140,31 +140,60 @@
    the row is the whole fact, and a class beside it would be a second source of
    truth for one thing.
 
-   The fill is the float step, not the raised one, and the reason is the hover
-   directly above: hovering a row ALREADY raises it, so a selection drawn at the
-   raised step is indistinguishable from the row under the cursor -- and every
-   consumer who has hand-written this state has hit that and reached for a hue
-   instead, which is rule 2's tinted-everything failure arrived at honestly.
-   Hover is a transient lift and selection is a held one, so selection sits one
-   step beyond it and hovering a selected row must not pull it back down.
+   The MARK is the leading edge, not the fill, and that is the whole design. The
+   hover directly above already raises a row, so any selection drawn as a fill
+   has to find a neutral step that hover is not using -- and there isn't one. The
+   ramp a theme is guaranteed to give is ground, surface, surface-raised; the
+   fourth token, --axi-surface-float, is not a step on it at all but a promise of
+   OPACITY for things that sit over content, which is why the default theme sets
+   it equal to --axi-surface and glass sets it darker than --axi-surface-raised.
+   A selection filled from it is invisible in one theme and a step backwards in
+   the other. This is the trap the token's name invites and the reason this
+   comment says so: float is an axis, not a rung.
 
-   No accent, and no leading edge either. The accent is for one claim per screen
-   and a selected row spends it on something a detail pane usually spends again;
-   an edge would need a border reserved on every cell of every row, which is the
-   grid-of-boxes rule 8 refuses. The attachment is the one-surface-many-elements
-   case, same as the hover. */
+   So selection and hover share the raised fill and are told apart by the edge,
+   the same answer and the same reasoning as `.axi-rail__nav--quiet`. The first
+   cell of every body row reserves a transparent control-weight border for it, so
+   lighting the edge costs no reflow -- again exactly what `.axi-rail__item`
+   does. One edge is a mark; rule 8's refusal is of a BOX around a row, which is
+   what turns a list of numbers into a grid.
+
+   The attachment is the one-surface-many-elements case, same as the hover. */
+.axi-table :where(tbody tr) > :where(td, th):first-child {
+  border-inline-start: var(--axi-border-control) solid transparent;
+}
 .axi-table tbody tr[aria-current] :is(td, th) {
-  background: var(--axi-surface-float);
+  background: var(--axi-surface-raised);
   background-attachment: fixed;
   color: var(--axi-text);
 }
-.axi-table tbody tr[aria-current]:hover :is(td, th) {
-  background: var(--axi-surface-float);
-  background-attachment: fixed;
+.axi-table tbody tr[aria-current] > :is(td, th):first-child {
+  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 {
@@ -242,6 +271,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 -