@axiapps/axi-design 1.26.0 → 1.27.0

package/README.md

@@ -156,6 +156,8 @@ not "what does the system look like". Everything else is
 | `--axi-palette-top` | how far down the screen an `.axi-palette` opens | `12vh` | `<div class="axi-scrim axi-palette" style="--axi-palette-top: 6vh">` |
 | `--axi-menu-width` | width of `.axi-menu__pop` | `310px` | `<div class="axi-menu__pop" style="--axi-menu-width: 380px">` |
 | `--axi-drawer-width` | width of `.axi-drawer` (capped at `100vw`) | `560px` | `<aside class="axi-drawer" style="--axi-drawer-width: 720px">` |
+| `--axi-sheet-top` | where an `.axi-sheet`'s top edge sits, for an app whose own chrome starts above it | `0` | `<div class="axi-sheet" style="--axi-sheet-top: 2.5rem">` |
+| `--axi-sheet-pad` | the padding inside an `.axi-sheet` | `12px 16px` | `<div class="axi-sheet" style="--axi-sheet-pad: 0">` |
 | `--axi-series` | the ink a meter fill, bar, plot line or `.axi-diamond--series` is drawn in | `var(--axi-accent)` | `<span class="axi-meter__fill" style="--axi-series: var(--axi-ok)">` |
 | `--axi-meter-v` | how full one `.axi-meter__fill` is | `0%` | `<span class="axi-meter__fill" style="--axi-meter-v: 62%">` |
 | `--axi-meter-h` | height of a `.axi-meter` | `12px` | `<div class="axi-meter" style="--axi-meter-h: 18px">` |

package/dist/axi.css

@@ -1649,6 +1649,66 @@ textarea.axi-input {
 }
 .axi-drawer__body { overflow-y: auto; padding: 18px 24px 30px; }
 
+/* ---------- sheet ---------- */
+/* A pane that covers the whole of its containing block: one thing blown up to
+   fill the app, with a way back out. Three names were already close and all
+   three are wrong, so this one is worth its own word.
+
+   Not .axi-modal. A modal is a <dialog> in the top layer with a scrim and the
+   page inert behind it; a sheet is in the page, and the thing it replaces is
+   the view, not the reader's attention.
+
+   Not .axi-drawer--full. A drawer is pinned to three edges with the page live
+   beside it - that live strip is what makes it a drawer, and it is what pays
+   for the float fill, the leading outline and the scrim. Widen a drawer to the
+   fourth edge and every one of those three goes away, which is a different
+   object wearing a modifier, not a wider drawer.
+
+   Not .axi-panel. Rule 3 outlines a raised element and rule 5 gives it a
+   block, and both are claims about an edge: an element pinned to all four
+   sides has no edge on screen to outline, and nothing behind it this language
+   is entitled to cast a shadow on. So a sheet carries no outline, no block and
+   no radius, and nothing raises it - it is the ground with one thing on it.
+
+   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.
+
+   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
+   cannot know from here - where its top edge is (an app with its own titlebar
+   starts below it) and how much padding its content wants. */
+.axi-sheet {
+  position: fixed;
+  inset: var(--axi-sheet-top, 0) 0 0;
+  /* Its own rung, between the page's sticky chrome and the scrim. Above 40 and
+     41 because a sheet covers the view, and the masthead and the popovers are
+     part of the view; below 50 because a modal or a drawer opened FROM a sheet
+     has to land on top of it, and a sheet is not the kind of thing that gets
+     to win that. */
+  z-index: 45;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: var(--axi-ground) 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:
+   a line inside a surface separates its parts rather than raising them - and
+   here it is doing the job the outline a sheet does not have would have done,
+   which is to say where the pane's own chrome stops and its content starts. */
+.axi-sheet__head {
+  flex: none;
+  padding-bottom: 10px;
+  border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The scrolling region under the head. */
+.axi-sheet__body { flex: 1 1 auto; min-height: 0; }
+
 /* ---------- pull-quote ---------- */
 /* A cited quotation. The accent rule down the left is the only place in the
    language where colour marks a block rather than filling a chip - a quote is

package/docs/RULES.md

@@ -490,6 +490,7 @@ instead of joining it.
 | Table corner | 3 | where the two cross |
 | Sticky chrome | 40 | `.axi-mast` |
 | Popovers | 41 | `.axi-menu__pop`, `.axi-picker__pop` |
+| Sheet | 45 | `.axi-sheet` |
 | Scrim | 50 | `.axi-scrim` |
 | Drawer | 51 | `.axi-drawer` |
 | Toasts | 60 | `.axi-toasts` |

package/package.json

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

@@ -677,6 +677,66 @@
 }
 .axi-drawer__body { overflow-y: auto; padding: 18px 24px 30px; }
 
+/* ---------- sheet ---------- */
+/* A pane that covers the whole of its containing block: one thing blown up to
+   fill the app, with a way back out. Three names were already close and all
+   three are wrong, so this one is worth its own word.
+
+   Not .axi-modal. A modal is a <dialog> in the top layer with a scrim and the
+   page inert behind it; a sheet is in the page, and the thing it replaces is
+   the view, not the reader's attention.
+
+   Not .axi-drawer--full. A drawer is pinned to three edges with the page live
+   beside it - that live strip is what makes it a drawer, and it is what pays
+   for the float fill, the leading outline and the scrim. Widen a drawer to the
+   fourth edge and every one of those three goes away, which is a different
+   object wearing a modifier, not a wider drawer.
+
+   Not .axi-panel. Rule 3 outlines a raised element and rule 5 gives it a
+   block, and both are claims about an edge: an element pinned to all four
+   sides has no edge on screen to outline, and nothing behind it this language
+   is entitled to cast a shadow on. So a sheet carries no outline, no block and
+   no radius, and nothing raises it - it is the ground with one thing on it.
+
+   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.
+
+   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
+   cannot know from here - where its top edge is (an app with its own titlebar
+   starts below it) and how much padding its content wants. */
+.axi-sheet {
+  position: fixed;
+  inset: var(--axi-sheet-top, 0) 0 0;
+  /* Its own rung, between the page's sticky chrome and the scrim. Above 40 and
+     41 because a sheet covers the view, and the masthead and the popovers are
+     part of the view; below 50 because a modal or a drawer opened FROM a sheet
+     has to land on top of it, and a sheet is not the kind of thing that gets
+     to win that. */
+  z-index: 45;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: var(--axi-ground) 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:
+   a line inside a surface separates its parts rather than raising them - and
+   here it is doing the job the outline a sheet does not have would have done,
+   which is to say where the pane's own chrome stops and its content starts. */
+.axi-sheet__head {
+  flex: none;
+  padding-bottom: 10px;
+  border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The scrolling region under the head. */
+.axi-sheet__body { flex: 1 1 auto; min-height: 0; }
+
 /* ---------- pull-quote ---------- */
 /* A cited quotation. The accent rule down the left is the only place in the
    language where colour marks a block rather than filling a chip - a quote is