@axiapps/axi-design 1.24.0 → 1.25.0

package/README.md

@@ -142,6 +142,7 @@ not "what does the system look like". Everything else is
 | `--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">` |
 | `--axi-rail-pad` | the padding inside an `.axi-rail` | `10px` | `<aside class="axi-rail" style="--axi-rail-pad: 6px">` |
+| `--axi-toolbar-pad` | the padding inside an `.axi-toolbar` | `14px` | `<div class="axi-toolbar" style="--axi-toolbar-pad: 4px 7px">` |
 | `--axi-avatar-size` | the size of an `.axi-avatar` square | `40px` | `<span class="axi-avatar" style="--axi-avatar-size: 28px">MS</span>` |
 | `--axi-modal-width` | the maximum width of an `.axi-modal`, before the viewport clamp | `560px` | `<dialog class="axi-modal" style="--axi-modal-width: 760px">` |
 | `--axi-card-strip` | the colour of `.axi-card--strip`'s top strip | `var(--axi-accent)` | `<a class="axi-card axi-card--strip" style="--axi-card-strip: var(--axi-ok)">` |

package/dist/axi.css

@@ -38,8 +38,8 @@
   --axi-surface-raised: #2b313d;
   /* The fill for a surface that FLOATS over content which scrolls behind it:
      the command palette, the menu and picker popovers, the modal, the drawer,
-     the toast, and any .axi-panel--float or .axi-rail--float a consumer
-     declares. Holds --axi-surface, because for
+     the toast, and any .axi-panel--float, .axi-rail--float or
+     .axi-toolbar--float a consumer declares. Holds --axi-surface, because for
      a theme whose panels are opaque a floating panel is just a panel and there
      is nothing to decide.
 
@@ -1148,7 +1148,13 @@ textarea.axi-input {
 .axi-rail:not(.axi-rail--flush) { box-shadow: var(--axi-shadow-panel); }
 .axi-rail--flush {
   border: 0;
-  border-right: var(--axi-border-panel) solid var(--axi-ink-line);
+  /* Logical, not physical: the border faces the content, and which physical
+     side that is depends on the writing direction. `border-right` was correct
+     only for an LTR rail pinned to the leading edge - under RTL it drew the
+     seam on the outside, facing the viewport. Note that this still assumes the
+     LEADING edge; a rail pinned to the trailing edge of its content needs the
+     other border and has no way to ask for it yet. */
+  border-inline-end: 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.
@@ -1244,13 +1250,34 @@ textarea.axi-input {
 /* ---------- toolbar ---------- */
 .axi-toolbar {
   display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
-  padding: 14px;
+  /* Own knob, like .axi-panel's and .axi-rail's. The toolbar was the one
+     container in this language whose padding was a literal, and 14px is a
+     figure for a strip above a list - a transport bar over a video or a map
+     is the same object at a third of the height, and had no way to say so
+     without writing its own padding and losing the component. */
+  padding: var(--axi-toolbar-pad, 14px);
   background: var(--axi-surface);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
   box-shadow: var(--axi-shadow-panel);
 }
+/* A toolbar that floats over moving content rather than sitting above it: the
+   controls pinned over a map, a chart, a replay. Says exactly what
+   .axi-panel--float and .axi-rail--float say, and for the same reason -
+   --axi-surface-float's own note lists the surfaces that need it and the
+   toolbar was missing from that list, which is the whole of the bug. A strip
+   above a list is not floating and keeps the plain surface; a strip over a
+   map is, and a translucent one shows the map through its own labels on any
+   platform where the blur is unavailable. */
+.axi-toolbar--float { background: var(--axi-surface-float); }
+/* A toolbar that must not become two rows. The wrap is right for a strip
+   above a list, where losing a filter off the edge is worse than a second
+   line - and wrong for a bar whose height other things are positioned
+   against, because wrapping moves everything around it. Stated as its own
+   modifier rather than left to each consumer's inline style, so the reason
+   lives here instead of in a comment in somebody's component. */
+.axi-toolbar--nowrap { flex-wrap: nowrap; }
 
 /* ---------- menu popover ---------- */
 /* A disclosure, not a permanent row of controls. The trigger is an .axi-btn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.24.0",
+  "version": "1.25.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

@@ -178,7 +178,13 @@
 .axi-rail:not(.axi-rail--flush) { box-shadow: var(--axi-shadow-panel); }
 .axi-rail--flush {
   border: 0;
-  border-right: var(--axi-border-panel) solid var(--axi-ink-line);
+  /* Logical, not physical: the border faces the content, and which physical
+     side that is depends on the writing direction. `border-right` was correct
+     only for an LTR rail pinned to the leading edge - under RTL it drew the
+     seam on the outside, facing the viewport. Note that this still assumes the
+     LEADING edge; a rail pinned to the trailing edge of its content needs the
+     other border and has no way to ask for it yet. */
+  border-inline-end: 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.
@@ -274,13 +280,34 @@
 /* ---------- toolbar ---------- */
 .axi-toolbar {
   display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
-  padding: 14px;
+  /* Own knob, like .axi-panel's and .axi-rail's. The toolbar was the one
+     container in this language whose padding was a literal, and 14px is a
+     figure for a strip above a list - a transport bar over a video or a map
+     is the same object at a third of the height, and had no way to say so
+     without writing its own padding and losing the component. */
+  padding: var(--axi-toolbar-pad, 14px);
   background: var(--axi-surface);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
   box-shadow: var(--axi-shadow-panel);
 }
+/* A toolbar that floats over moving content rather than sitting above it: the
+   controls pinned over a map, a chart, a replay. Says exactly what
+   .axi-panel--float and .axi-rail--float say, and for the same reason -
+   --axi-surface-float's own note lists the surfaces that need it and the
+   toolbar was missing from that list, which is the whole of the bug. A strip
+   above a list is not floating and keeps the plain surface; a strip over a
+   map is, and a translucent one shows the map through its own labels on any
+   platform where the blur is unavailable. */
+.axi-toolbar--float { background: var(--axi-surface-float); }
+/* A toolbar that must not become two rows. The wrap is right for a strip
+   above a list, where losing a filter off the edge is worse than a second
+   line - and wrong for a bar whose height other things are positioned
+   against, because wrapping moves everything around it. Stated as its own
+   modifier rather than left to each consumer's inline style, so the reason
+   lives here instead of in a comment in somebody's component. */
+.axi-toolbar--nowrap { flex-wrap: nowrap; }
 
 /* ---------- menu popover ---------- */
 /* A disclosure, not a permanent row of controls. The trigger is an .axi-btn

package/src/tokens.css

@@ -34,8 +34,8 @@
   --axi-surface-raised: #2b313d;
   /* The fill for a surface that FLOATS over content which scrolls behind it:
      the command palette, the menu and picker popovers, the modal, the drawer,
-     the toast, and any .axi-panel--float or .axi-rail--float a consumer
-     declares. Holds --axi-surface, because for
+     the toast, and any .axi-panel--float, .axi-rail--float or
+     .axi-toolbar--float a consumer declares. Holds --axi-surface, because for
      a theme whose panels are opaque a floating panel is just a panel and there
      is nothing to decide.