@axiapps/axi-design 1.27.0 → 1.28.0

package/dist/axi.css

@@ -1540,6 +1540,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
@@ -1673,9 +1698,15 @@ textarea.axi-input {
    Which is why it paints the ground's IMAGE as well as the ground's colour. A
    sheet is the page for as long as it is open, and a theme that lights the
    page from a few directions would otherwise have that light blink off every
-   time a reader opened one, then back on when they closed it. `background` in
-   the shorthand, so a theme leaving --axi-ground-image as `none` still gets a
-   clean flat fill and no stray layer.
+   time a reader opened one, then back on when they closed it.
+
+   The two longhands, the same pair `body` uses, and NOT the `background`
+   shorthand: --axi-ground-image is a comma-separated list of three gradients
+   under the glass theme, and the shorthand only accepts a colour in its final
+   layer. `background: <colour> <three gradients>` puts the colour in the first
+   layer, which makes the whole declaration invalid and drops it - a sheet with
+   no fill at all, over a live page. It is exactly the trap the token block
+   warns about two tokens up, in the other direction.
 
    No filter either, for the same reason the window has none: there is nothing
    to see through to. The two knobs are the only things a consumer genuinely
@@ -1694,7 +1725,8 @@ textarea.axi-input {
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
-  background: var(--axi-ground) var(--axi-ground-image);
+  background-color: var(--axi-ground);
+  background-image: var(--axi-ground-image);
   padding: var(--axi-sheet-pad, 12px 16px);
 }
 /* The heading the sheet opened with, divided from the body by a rule. Rule 8:

package/package.json

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

package/src/shells.css

@@ -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
@@ -701,9 +726,15 @@
    Which is why it paints the ground's IMAGE as well as the ground's colour. A
    sheet is the page for as long as it is open, and a theme that lights the
    page from a few directions would otherwise have that light blink off every
-   time a reader opened one, then back on when they closed it. `background` in
-   the shorthand, so a theme leaving --axi-ground-image as `none` still gets a
-   clean flat fill and no stray layer.
+   time a reader opened one, then back on when they closed it.
+
+   The two longhands, the same pair `body` uses, and NOT the `background`
+   shorthand: --axi-ground-image is a comma-separated list of three gradients
+   under the glass theme, and the shorthand only accepts a colour in its final
+   layer. `background: <colour> <three gradients>` puts the colour in the first
+   layer, which makes the whole declaration invalid and drops it - a sheet with
+   no fill at all, over a live page. It is exactly the trap the token block
+   warns about two tokens up, in the other direction.
 
    No filter either, for the same reason the window has none: there is nothing
    to see through to. The two knobs are the only things a consumer genuinely
@@ -722,7 +753,8 @@
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
-  background: var(--axi-ground) var(--axi-ground-image);
+  background-color: var(--axi-ground);
+  background-image: var(--axi-ground-image);
   padding: var(--axi-sheet-pad, 12px 16px);
 }
 /* The heading the sheet opened with, divided from the body by a rule. Rule 8: