@axiapps/axi-design 1.18.0 → 1.20.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
@@ -922,6 +942,29 @@ textarea.axi-input {
   padding-inline: var(--axi-gutter);
   display: flex; align-items: center; gap: 22px; min-height: 66px; flex-wrap: wrap;
 }
+/* Above --axi-page the row stops growing: the cap is on this box, not on the
+   window, so from 1280px up the masthead has exactly one width to fit in and
+   wrapping there is not a fallback, it is a permanent second line - one tab
+   too many and the last item in source order drops, on a 4K display as surely
+   as on a laptop. So the wide row does not wrap; it takes the width out of the
+   search field instead (below), and the strip scrolls only if that runs out.
+   Under the cap the window really is too narrow and wrapping is the honest
+   answer, which is why this is a floor and not a blanket `nowrap`. */
+@media (min-width: 1280px) {
+  .axi-mast__in { flex-wrap: nowrap; }
+}
+/* Nothing in the row gives up width unless it is named below. */
+.axi-mast__in > * { flex-shrink: 0; }
+/* The field is the one control here that is still entirely itself 70px
+   narrower - a placeholder that elides costs nothing, where a clipped tab
+   costs a destination. Flexbox shrinks proportionally, not in order, and a
+   merely-larger factor still took a couple of pixels off the last tab; the
+   number is this big to make that share round to nothing, so the effect is
+   the ordering CSS has no other way to say. Once the field is at its floor -
+   still wide enough to read as a search box rather than a smudge - whatever
+   is left over goes to the strip, which scrolls. */
+.axi-mast .axi-search,
+.axi-mast .docs-search { flex-shrink: 1000; min-width: 200px; }
 .axi-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
 /* The sigil is the diamond motif scaled up with a glyph on top. The diamond is
    a rotated pseudo-element behind the text rather than a rotated box, so the
@@ -955,8 +998,14 @@ textarea.axi-input {
 .axi-tabs { display: flex; gap: 8px; }
 /* The auto margin belongs to the masthead, not to the strip: it is a statement
    about where the tabs sit in that row, and a strip standing on its own -
-   spanning a view instead of ending a header - has nothing to push away from. */
-.axi-mast .axi-tabs { margin-left: auto; }
+   spanning a view instead of ending a header - has nothing to push away from.
+   The overflow belongs to the masthead for the same reason. This row is capped
+   at --axi-page, so the brand, the strip, the search field and the two selects
+   divide 1244px however wide the window is, and flex-wrap breaks a line before
+   it shrinks an item - so one tab too many sent the last item in source order
+   to a second row instead of taking width off the widest one. The strip is the
+   item that can give: it scrolls, and the row stays a row. */
+.axi-mast .axi-tabs { margin-left: auto; flex-shrink: 1; min-width: 0; overflow-x: auto; }
 .axi-tabs a,
 .axi-tabs button {
   padding: 8px 16px;
@@ -1051,6 +1100,14 @@ textarea.axi-input {
   border-right: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: 0;
 }
+/* A rail the page scrolls behind, rather than one the page sits beside.
+   It is the same object, so it keeps every other rule; 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 the
+   content behind it holds still — the moment a table scrolls past, the
+   rows show through the nav. --axi-surface-float is the surface for
+   exactly that case, so say it once here instead of in each consumer. */
+.axi-rail--float { background: var(--axi-surface-float); }
 .axi-rail__nav { display: flex; flex-direction: column; gap: 2px; }
 .axi-rail__item {
   display: flex;
@@ -1329,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 {

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/package.json

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

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

@@ -23,6 +23,29 @@
   padding-inline: var(--axi-gutter);
   display: flex; align-items: center; gap: 22px; min-height: 66px; flex-wrap: wrap;
 }
+/* Above --axi-page the row stops growing: the cap is on this box, not on the
+   window, so from 1280px up the masthead has exactly one width to fit in and
+   wrapping there is not a fallback, it is a permanent second line - one tab
+   too many and the last item in source order drops, on a 4K display as surely
+   as on a laptop. So the wide row does not wrap; it takes the width out of the
+   search field instead (below), and the strip scrolls only if that runs out.
+   Under the cap the window really is too narrow and wrapping is the honest
+   answer, which is why this is a floor and not a blanket `nowrap`. */
+@media (min-width: 1280px) {
+  .axi-mast__in { flex-wrap: nowrap; }
+}
+/* Nothing in the row gives up width unless it is named below. */
+.axi-mast__in > * { flex-shrink: 0; }
+/* The field is the one control here that is still entirely itself 70px
+   narrower - a placeholder that elides costs nothing, where a clipped tab
+   costs a destination. Flexbox shrinks proportionally, not in order, and a
+   merely-larger factor still took a couple of pixels off the last tab; the
+   number is this big to make that share round to nothing, so the effect is
+   the ordering CSS has no other way to say. Once the field is at its floor -
+   still wide enough to read as a search box rather than a smudge - whatever
+   is left over goes to the strip, which scrolls. */
+.axi-mast .axi-search,
+.axi-mast .docs-search { flex-shrink: 1000; min-width: 200px; }
 .axi-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
 /* The sigil is the diamond motif scaled up with a glyph on top. The diamond is
    a rotated pseudo-element behind the text rather than a rotated box, so the
@@ -56,8 +79,14 @@
 .axi-tabs { display: flex; gap: 8px; }
 /* The auto margin belongs to the masthead, not to the strip: it is a statement
    about where the tabs sit in that row, and a strip standing on its own -
-   spanning a view instead of ending a header - has nothing to push away from. */
-.axi-mast .axi-tabs { margin-left: auto; }
+   spanning a view instead of ending a header - has nothing to push away from.
+   The overflow belongs to the masthead for the same reason. This row is capped
+   at --axi-page, so the brand, the strip, the search field and the two selects
+   divide 1244px however wide the window is, and flex-wrap breaks a line before
+   it shrinks an item - so one tab too many sent the last item in source order
+   to a second row instead of taking width off the widest one. The strip is the
+   item that can give: it scrolls, and the row stays a row. */
+.axi-mast .axi-tabs { margin-left: auto; flex-shrink: 1; min-width: 0; overflow-x: auto; }
 .axi-tabs a,
 .axi-tabs button {
   padding: 8px 16px;
@@ -152,6 +181,14 @@
   border-right: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: 0;
 }
+/* A rail the page scrolls behind, rather than one the page sits beside.
+   It is the same object, so it keeps every other rule; 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 the
+   content behind it holds still — the moment a table scrolls past, the
+   rows show through the nav. --axi-surface-float is the surface for
+   exactly that case, so say it once here instead of in each consumer. */
+.axi-rail--float { background: var(--axi-surface-float); }
 .axi-rail__nav { display: flex; flex-direction: column; gap: 2px; }
 .axi-rail__item {
   display: flex;
@@ -430,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. */