@axiapps/axi-design 1.27.1 → 1.29.0

package/README.md

@@ -138,6 +138,8 @@ not "what does the system look like". Everything else is
 | `--axi-check-size` | the size of an `.axi-check` or `.axi-radio` box | `22px` | `<input type="checkbox" class="axi-check" style="--axi-check-size: 16px">` |
 | `--axi-check-fill` | the fill a checked `.axi-check` takes, and the colour of a checked `.axi-radio`'s diamond | `var(--axi-accent)` | `<input type="checkbox" class="axi-check" style="--axi-check-fill: var(--axi-danger)">` |
 | `--axi-textarea-h` | the minimum height of a `<textarea class="axi-input">` | `90px` | `<textarea class="axi-input" style="--axi-textarea-h: 200px">` |
+| `--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-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

@@ -562,15 +562,23 @@ button.axi-panel--tile:hover,
 .axi-diamond--series { background: var(--axi-series, var(--axi-accent)); }
 
 /* ---------- input ---------- */
+/* Two knobs rather than one fixed size, for the same reason --axi-well-pad
+   exists: a field is used at two scales. A form control standing on a page is
+   the 14px default; a filter sitting in a section header or a row in a bar is
+   smaller, because there it is furniture next to 11px type rather than the
+   thing the page is for. The alternative is what this file did before - a
+   context selector per place that wanted the small one (.axi-palette__bar
+   .axi-input, still the only one upstream needs) - and that does not scale
+   past the cases upstream happens to ship. */
 .axi-input {
   width: 100%;
-  padding: 11px 12px;
+  padding: var(--axi-input-pad, 11px 12px);
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);
   color: var(--axi-text);
   font: var(--axi-t-label);
-  font-size: 14px;
+  font-size: var(--axi-input-size, 14px);
 }
 .axi-input::placeholder { color: var(--axi-text-faint); font-weight: 500; }
 
@@ -1411,7 +1419,7 @@ textarea.axi-input {
    not a form control standing on a page. No focus ring: the palette opens with
    the caret already here, so a permanent outline says nothing, and it would
    argue with the one mark that does - the accent on the cursor row. */
-.axi-palette__bar .axi-input { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
+.axi-palette__bar .axi-input { --axi-input-pad: 7px 12px; --axi-input-size: 13px; }
 .axi-palette__bar .axi-input:focus-visible { outline: none; }
 .axi-palette__filters { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
 /* What the list is not showing. Meta, at the end of the filter row, because it
@@ -1540,6 +1548,31 @@ textarea.axi-input {
    left/top or inset the placement needs); this only changes which box those
    offsets are measured from. */
 .axi-tooltip--anchored { position: absolute; }
+/* The third placement, and the one the base class cannot express: the box is
+   laid out by whoever owns its wrapper, and this element positions itself not
+   at all. Charting libraries are the case that forces it - recharts renders
+   custom tooltip content inside a wrapper it has already placed and
+   transformed - but the shape is general: any library that hands you a slot
+   and puts the slot where it wants it.
+
+   Worth saying why the base class LOOKS like it already works here, because
+   it does, and for a reason that will not hold. A `position: fixed` box with
+   every inset auto resolves to its static position, so dropped into such a
+   wrapper it lands exactly where the wrapper is - zero drift, measurably. It
+   then scrolls with the chart only because the wrapper carries a transform,
+   which is the very containment the base class's <body> contract exists to
+   escape. Two facts hold it up, both of them someone else's: that the library
+   keeps transforming the wrapper, and that it keeps emitting positioning at
+   all. recharts drops both when its `portal` prop is set, and the failure is
+   silent - a tooltip pinned to the viewport while the chart scrolls away.
+
+   So this says the true thing instead of inheriting the accident. `static`
+   rather than `relative` because the consumer has no offsets to apply - that
+   is the whole point of the modifier - and `z-index: auto` because a layer is
+   meaningless on a static box and layer 70 would only be a claim it cannot
+   honour. */
+.axi-tooltip--flow { position: static; z-index: auto; }
+
 /* 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

package/package.json

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

package/src/primitives.css

@@ -288,15 +288,23 @@ button.axi-panel--tile:hover,
 .axi-diamond--series { background: var(--axi-series, var(--axi-accent)); }
 
 /* ---------- input ---------- */
+/* Two knobs rather than one fixed size, for the same reason --axi-well-pad
+   exists: a field is used at two scales. A form control standing on a page is
+   the 14px default; a filter sitting in a section header or a row in a bar is
+   smaller, because there it is furniture next to 11px type rather than the
+   thing the page is for. The alternative is what this file did before - a
+   context selector per place that wanted the small one (.axi-palette__bar
+   .axi-input, still the only one upstream needs) - and that does not scale
+   past the cases upstream happens to ship. */
 .axi-input {
   width: 100%;
-  padding: 11px 12px;
+  padding: var(--axi-input-pad, 11px 12px);
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);
   color: var(--axi-text);
   font: var(--axi-t-label);
-  font-size: 14px;
+  font-size: var(--axi-input-size, 14px);
 }
 .axi-input::placeholder { color: var(--axi-text-faint); font-weight: 500; }
 

package/src/shells.css

@@ -439,7 +439,7 @@
    not a form control standing on a page. No focus ring: the palette opens with
    the caret already here, so a permanent outline says nothing, and it would
    argue with the one mark that does - the accent on the cursor row. */
-.axi-palette__bar .axi-input { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
+.axi-palette__bar .axi-input { --axi-input-pad: 7px 12px; --axi-input-size: 13px; }
 .axi-palette__bar .axi-input:focus-visible { outline: none; }
 .axi-palette__filters { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
 /* What the list is not showing. Meta, at the end of the filter row, because it
@@ -568,6 +568,31 @@
    left/top or inset the placement needs); this only changes which box those
    offsets are measured from. */
 .axi-tooltip--anchored { position: absolute; }
+/* The third placement, and the one the base class cannot express: the box is
+   laid out by whoever owns its wrapper, and this element positions itself not
+   at all. Charting libraries are the case that forces it - recharts renders
+   custom tooltip content inside a wrapper it has already placed and
+   transformed - but the shape is general: any library that hands you a slot
+   and puts the slot where it wants it.
+
+   Worth saying why the base class LOOKS like it already works here, because
+   it does, and for a reason that will not hold. A `position: fixed` box with
+   every inset auto resolves to its static position, so dropped into such a
+   wrapper it lands exactly where the wrapper is - zero drift, measurably. It
+   then scrolls with the chart only because the wrapper carries a transform,
+   which is the very containment the base class's <body> contract exists to
+   escape. Two facts hold it up, both of them someone else's: that the library
+   keeps transforming the wrapper, and that it keeps emitting positioning at
+   all. recharts drops both when its `portal` prop is set, and the failure is
+   silent - a tooltip pinned to the viewport while the chart scrolls away.
+
+   So this says the true thing instead of inheriting the accident. `static`
+   rather than `relative` because the consumer has no offsets to apply - that
+   is the whole point of the modifier - and `z-index: auto` because a layer is
+   meaningless on a static box and layer 70 would only be a claim it cannot
+   honour. */
+.axi-tooltip--flow { position: static; z-index: auto; }
+
 /* 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