@axiapps/axi-design 1.7.1 → 1.9.0

package/README.md

@@ -83,6 +83,8 @@ not "what does the system look like". Everything else is
 | `--axi-bars-gap` | gap between columns in `.axi-bars` | `6px` | `<div class="axi-bars" style="--axi-bars-gap: 2px">` |
 | `--axi-plot-h` | height of a `.axi-plot` or `.axi-bars` | `180px` | `<div class="axi-plot" style="--axi-plot-h: 240px">` |
 | `--axi-plot-rows` | how many horizontal rules a `.axi-plot` draws | `4` | `<div class="axi-plot" style="--axi-plot-rows: 6">` |
+| `--axi-tick-w` / `--axi-tick-h` | size of one `.axi-ticks__tick` | `5px` / `15px` | `<div class="axi-ticks" style="--axi-tick-w: 7px">` |
+| `--axi-ticks-gap` | gap between marks in `.axi-ticks` | `3px` | `<div class="axi-ticks" style="--axi-ticks-gap: 2px">` |
 
 `--axi-page-pad: 0` is the one to know about: it is how a measure nested
 inside another measure avoids paying the gutter twice.

package/dist/axi.css

@@ -638,6 +638,28 @@ a { color: inherit; }
 .axi-menu__pop label:hover { background: var(--axi-ground); color: var(--axi-text); }
 .axi-menu__pop input { margin: 3px 0 0; accent-color: var(--axi-accent); }
 
+/* ---------- tooltip ---------- */
+/* One line of ink on the darkest surface in the language, so it reads over
+   anything it lands on. The class draws the box only; coordinates come from
+   the consumer's script (measure the trigger, set left/top — gallery.js is
+   the reference wiring). Two contracts travel with it: the element is
+   appended to <body>, never inside the component it annotates, because
+   position: fixed re-anchors to any transformed ancestor and rule 4 makes
+   every hovered ancestor transformed; and it never carries information that
+   exists nowhere else, because a keyboard or touch user may never see it. */
+.axi-tooltip {
+  position: fixed;
+  z-index: 99999;
+  padding: 5px 8px;
+  background: var(--axi-ink-line);
+  color: var(--axi-text);
+  border: var(--axi-border-hairline) solid var(--axi-rule);
+  border-radius: var(--axi-radius-sm);
+  font: var(--axi-t-micro);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 /* ---------- card ---------- */
 .axi-card {
   position: relative; overflow: hidden;
@@ -1006,6 +1028,42 @@ a { color: inherit; }
   background: var(--axi-series, var(--axi-accent));
 }
 
+/* ---------- ticks ---------- */
+/* A run of yes/no along a timeline: attended or missed, passed or failed,
+   shipped or skipped. This is rule 9 read the other way round - a bar has a
+   length because a quantity has one, and "no" has no length at all. Drawn as
+   a bar it has to be faked with a stub, and a stub reads as "a little bit",
+   which is the same lie as a faded fill. So every event here is one mark of
+   the same size, and what changes between them is only which ink it is drawn
+   in: rule 10's two series, the accent for the fact and the neutral ramp for
+   its absence.
+
+   Neither mark is outlined, which is the one place this departs from the
+   filled/empty pair the language reaches for first. At the size a run of
+   twenty sits in a table row the outline IS the mark - three pixels of edge
+   around one pixel of middle - so the pair would differ in nothing the eye
+   can resolve. A strip drawn large enough to outline is a bar chart, and
+   .axi-bars already is one.
+
+   Marks are a fixed width and never flex: a run of fourteen and a run of
+   three share a column in a table, and the short one has to read as a short
+   run rather than as fourteen fatter events. */
+.axi-ticks {
+  display: inline-flex;
+  align-items: stretch;
+  gap: var(--axi-ticks-gap, 3px);
+  height: var(--axi-tick-h, 15px);
+}
+.axi-ticks__tick {
+  flex: none;
+  width: var(--axi-tick-w, 5px);
+  background: var(--axi-rule);
+  border-radius: var(--axi-radius-sm);
+}
+.axi-ticks__tick--on {
+  background: var(--axi-series, var(--axi-accent));
+}
+
 /* ---------- plot ---------- */
 /* A frame for a line or an area, with its horizontal rules drawn in. The
    rules are hard stops in a repeating gradient, which is the select caret's

package/docs/RULES.md

@@ -132,6 +132,15 @@ keeping the control's `translate(-2px, -2px)`.
 Nothing in this language fades, glows or pulses. The movement reads in
 peripheral vision and costs no colour.
 
+The lift being a transform has one structural consequence: a transformed
+element becomes the containing block for any `position: fixed` descendant.
+An overlay positioned in viewport coordinates — `.axi-tooltip` is the one
+this language ships — must therefore live as a child of `<body>`, never
+inside the component it annotates, or the first hover lift re-anchors it.
+The class draws only the box (ink-line ground, hairline rule border, micro
+type); measuring the trigger and setting `left`/`top` is the consumer's
+half, and `gallery.js` is the reference wiring.
+
 Every lift is turned off under `@media (prefers-reduced-motion: reduce)`, in
 `base.css`, once, for every consumer. Resting appearance is untouched: the
 diamond still rotates, because a rotation that never changes is geometry and
@@ -238,6 +247,12 @@ is the one chart type that cannot be built without the thing rule 2 forbids, so
 a distribution is drawn as bars, or as a table sorted by the value, or not at
 all.
 
+The other corollary is that a thing with no quantity gets no length. A run of
+yes/no — attended or missed, passed or failed — is a sequence of facts, and a
+fact has no magnitude to draw: rendering "no" as a short bar says "a little
+bit" as loudly as a faded fill says "30%". That series is a row of marks of
+one size, differing only in ink, which is `.axi-ticks`.
+
 ## 10. A chart's ink is the accent
 
 One series is the accent. A second, for comparison, is the neutral ramp —