@axiapps/axi-design 1.24.0 → 1.26.0

package/README.md

@@ -142,6 +142,8 @@ 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-dock-pad` | the padding inside an `.axi-dock` | `12px 16px` | `<div class="axi-dock" style="--axi-dock-pad: 6px 10px">` |
 | `--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,7 +38,9 @@
   --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
+     the toast, every .axi-dock (which is the one surface here that cannot be
+     anything else - docking IS having content scroll under you), 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 +1150,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 +1252,87 @@ 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; }
+
+/* ---------- dock ---------- */
+/* A bar that IS one edge of its scroll container rather than an object standing
+   in the layout: a tray that drops in above a list, an action bar pinned under
+   one. The horizontal counterpart to .axi-rail--flush, and the shape this
+   language was missing - a rail is vertical, and a toolbar stands in the layout
+   with space around it, so every consumer with a full-width edge bar had to
+   write the surface, the single border and the squared ends by hand.
+
+   It drops what says "an object with space around it", for the reasons
+   .axi-rail--flush drops them: no radius, because its two ends are the
+   container's own edges and a corner there is a corner cut out of the page; and
+   no offset block, because a block needs somewhere to fall and this has content
+   on one side and the container's edges on the other three.
+
+   It is on --axi-surface-float unconditionally, with no --float modifier to
+   forget. Every other surface here can be either way - a panel may sit still on
+   the page or be pinned over a scrolling table - but "the content scrolls under
+   it" is the definition of docking rather than a variant of it. A translucent
+   dock is a dock with the list showing through its own buttons on any platform
+   where the blur is unavailable, which is to say on some platform.
+
+   What it does not say is how its contents are arranged or how it is pinned:
+   put an .axi-toolbar's row of controls inside it, or a head above a scrolling
+   body; make it position: sticky or leave it in flow. Those belong to the
+   consumer, and a dock that answered either would be two objects wearing one
+   name. */
+.axi-dock {
+  /* The inline figure is a page gutter and the block figure is a bar's height.
+     They differ on purpose: a dock spans the full width, so its contents have
+     to line up with the content it is docked against, while how tall it stands
+     is its own business. */
+  padding: var(--axi-dock-pad, 12px 16px);
+  background: var(--axi-surface-float);
+  backdrop-filter: var(--axi-surface-filter);
+  /* The seam's colour and style said once, both widths off, and each modifier
+     below turning on the one side it needs. Spelling the whole shorthand twice
+     would put two independent copies of the edge in the file for a theme to
+     change one of. */
+  border: 0;
+  border-block: 0 solid var(--axi-ink-line);
+  border-radius: 0;
+}
+/* The border faces the content, so a dock at the block-start edge draws it on
+   its block-end side. Logical rather than physical, so it survives a vertical
+   writing mode - the same correction .axi-rail--flush took. */
+.axi-dock:not(.axi-dock--end) { border-block-end-width: var(--axi-border-panel); }
+/* The other edge. Unlike .axi-rail--flush, which assumes the leading edge and
+   has no way to ask for the far one, a dock can say which edge it is on -
+   because both cases arrived together: a tray drops in from the top of a list
+   and an action bar is pinned beneath the same list. This is the pair
+   .axi-rail--flush should grow into the day a trailing-edge rail exists. */
+.axi-dock--end { border-block-start-width: var(--axi-border-panel); }
 
 /* ---------- 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.26.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,87 @@
 /* ---------- 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; }
+
+/* ---------- dock ---------- */
+/* A bar that IS one edge of its scroll container rather than an object standing
+   in the layout: a tray that drops in above a list, an action bar pinned under
+   one. The horizontal counterpart to .axi-rail--flush, and the shape this
+   language was missing - a rail is vertical, and a toolbar stands in the layout
+   with space around it, so every consumer with a full-width edge bar had to
+   write the surface, the single border and the squared ends by hand.
+
+   It drops what says "an object with space around it", for the reasons
+   .axi-rail--flush drops them: no radius, because its two ends are the
+   container's own edges and a corner there is a corner cut out of the page; and
+   no offset block, because a block needs somewhere to fall and this has content
+   on one side and the container's edges on the other three.
+
+   It is on --axi-surface-float unconditionally, with no --float modifier to
+   forget. Every other surface here can be either way - a panel may sit still on
+   the page or be pinned over a scrolling table - but "the content scrolls under
+   it" is the definition of docking rather than a variant of it. A translucent
+   dock is a dock with the list showing through its own buttons on any platform
+   where the blur is unavailable, which is to say on some platform.
+
+   What it does not say is how its contents are arranged or how it is pinned:
+   put an .axi-toolbar's row of controls inside it, or a head above a scrolling
+   body; make it position: sticky or leave it in flow. Those belong to the
+   consumer, and a dock that answered either would be two objects wearing one
+   name. */
+.axi-dock {
+  /* The inline figure is a page gutter and the block figure is a bar's height.
+     They differ on purpose: a dock spans the full width, so its contents have
+     to line up with the content it is docked against, while how tall it stands
+     is its own business. */
+  padding: var(--axi-dock-pad, 12px 16px);
+  background: var(--axi-surface-float);
+  backdrop-filter: var(--axi-surface-filter);
+  /* The seam's colour and style said once, both widths off, and each modifier
+     below turning on the one side it needs. Spelling the whole shorthand twice
+     would put two independent copies of the edge in the file for a theme to
+     change one of. */
+  border: 0;
+  border-block: 0 solid var(--axi-ink-line);
+  border-radius: 0;
+}
+/* The border faces the content, so a dock at the block-start edge draws it on
+   its block-end side. Logical rather than physical, so it survives a vertical
+   writing mode - the same correction .axi-rail--flush took. */
+.axi-dock:not(.axi-dock--end) { border-block-end-width: var(--axi-border-panel); }
+/* The other edge. Unlike .axi-rail--flush, which assumes the leading edge and
+   has no way to ask for the far one, a dock can say which edge it is on -
+   because both cases arrived together: a tray drops in from the top of a list
+   and an action bar is pinned beneath the same list. This is the pair
+   .axi-rail--flush should grow into the day a trailing-edge rail exists. */
+.axi-dock--end { border-block-start-width: var(--axi-border-panel); }
 
 /* ---------- menu popover ---------- */
 /* A disclosure, not a permanent row of controls. The trigger is an .axi-btn

package/src/tokens.css

@@ -34,7 +34,9 @@
   --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
+     the toast, every .axi-dock (which is the one surface here that cannot be
+     anything else - docking IS having content scroll under you), 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.