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

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.19.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

@@ -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. */