eco-vue-js 0.28.0 → 0.28.1

package/docs/guide/app-shell.md

@@ -70,6 +70,36 @@ Frame variables are sizes too: `pt---header-height`, `pl---nav-bar-width`, `px--
 
 On a page (`w-page`) and in modals, content beside a wide list stays in view automatically while it scrolls sideways (see [List page](../recipes/list-page.md#content-beside-the-list)). Pages don't use these sizes for positioning — they're for what the kit doesn't place, like a fixed overlay.
 
+### The page box
+
+The content box is where text starts. The page box is where sections and cards sit: the content box less the gutter a card or glass layout's sections reach into. In flat they're the same. Place anything that should line up with the sections, such as a side panel over the page or a toolbar of your own, by the page box:
+
+| Variable | Utility size | Value |
+| --- | --- | --- |
+| `--w-page-top` | `---page-top` | Under the header bar, and its gap where the bars float. |
+| `--w-page-bottom` | `---page-bottom` | The gap off the screen's bottom edge where the bars float, `0` docked. |
+| `--w-page-left` | `---page-left` | The sections' left edge; `0` on phones, where they span the screen. |
+| `--w-page-right` | `---page-right` | The same on the right. |
+| `--w-page-width` | `---page-width` | Between the two. |
+| `--w-page-height` | `---page-height` | Between the top and the bottom. |
+
+```vue
+<aside class="fixed top---page-top bottom---page-bottom right---page-right w-96 rounded-lg">
+```
+
+These and the content box are the layout variables to build on. The ones they're made of — the frame margins, `--w-chrome-gap`, `--w-page-bleed`, the bar widths — are theme tokens and may change with the layout.
+
+### Backdrops
+
+A backdrop of the app's own, such as behind a side panel, takes `w-page-backdrop`: it covers the page and the bars and leaves the header bar's row out, so the header stays sharp and its search and menus stay usable. Put it above the nav (`z-index` over 30) and the panel above it:
+
+```vue
+<button class="w-page-backdrop fixed inset-0 z-38 backdrop-blur-sm" @click="close" />
+<aside class="fixed top---page-top bottom---page-bottom right---page-right z-39 w-96">
+```
+
+The header's background is one blurred box, which grows over a stuck list toolbar when the bars are docked, so a backdrop can't go between the header and the page: it leaves the header out instead.
+
 ## Layout component
 
 The root layout mounts the three bars; its main area is `w-page`, which pads content by the frame (see [Page layout](../recipes/page-layout.md)):

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eco-vue-js
 
-> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.28.0, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
+> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.28.1, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
 
 Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
 

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.28.0",
+  "version": "0.28.1",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@eslint/css-tree": "4.1.2",

package/tailwind-base/css/surfaces.css

@@ -166,8 +166,8 @@
   :root[data-w-page-table] & {
     @variant sm {
       position: sticky;
-      left: calc(var(--w-left-inner) - var(--w-page-bleed, 0px));
-      max-width: calc(var(--w-width-inner) + var(--w-page-bleed, 0px) * 2);
+      left: var(--w-page-left);
+      max-width: var(--w-page-width);
     }
   }
 }
@@ -256,8 +256,8 @@
   :root[data-w-page-table] & {
     @variant sm {
       position: sticky;
-      left: calc(var(--w-left-inner) - var(--w-page-bleed, 0px));
-      max-width: calc(var(--w-width-inner) + var(--w-page-bleed, 0px) * 2);
+      left: var(--w-page-left);
+      max-width: var(--w-page-width);
     }
   }
 }
@@ -302,6 +302,30 @@
   }
 }
 
+/*
+ * A backdrop of the app's own over the page and the bars, such as behind a side panel, that leaves the header bar out:
+ * the header stays sharp and usable, and the nav and the page dim. The header's background is one blurred box, as a
+ * second one beside it would draw an edge where they meet, so the backdrop cuts the header's row out of itself rather
+ * than stacking under the header. Below the header's row, where a docked header grows over a stuck list toolbar, it
+ * covers the toolbar with the page.
+ */
+@utility w-page-backdrop {
+  --w-backdrop-hole-left: calc(var(--w-left-inner) - var(--inner-margin, 0px));
+  --w-backdrop-hole-right: calc(100% - var(--w-right-inner) + var(--inner-margin, 0px));
+  --w-backdrop-hole-top: var(--w-chrome-gap);
+  --w-backdrop-hole-bottom: calc(var(--w-chrome-gap) + var(--header-height, 0px));
+
+  clip-path: polygon(
+    evenodd,
+    0 0, 100% 0, 100% 100%, 0 100%, 0 0,
+    var(--w-backdrop-hole-left) var(--w-backdrop-hole-top),
+    var(--w-backdrop-hole-right) var(--w-backdrop-hole-top),
+    var(--w-backdrop-hole-right) var(--w-backdrop-hole-bottom),
+    var(--w-backdrop-hole-left) var(--w-backdrop-hole-bottom),
+    var(--w-backdrop-hole-left) var(--w-backdrop-hole-top)
+  );
+}
+
 /* Reaches into the page gutter like a section: for a row of cards on the canvas. On phones the cards keep the page inset. */
 @utility w-page-bleed {
   margin-inline: calc(var(--w-page-bleed, 0px) * -1);
@@ -313,8 +337,8 @@
   :root[data-w-page-table] & {
     @variant sm {
       position: sticky;
-      left: calc(var(--w-left-inner) - var(--w-page-bleed, 0px));
-      max-width: calc(var(--w-width-inner) + var(--w-page-bleed, 0px) * 2);
+      left: var(--w-page-left);
+      max-width: var(--w-page-width);
     }
   }
 }
@@ -710,6 +734,11 @@
     top: var(--w-chrome-gap);
     padding-left: calc(var(--w-left-inner) - var(--inner-margin, 0px));
     padding-right: calc(var(--w-right-inner) - var(--inner-margin, 0px));
+
+    /* On phones the page's inset leaves out the gap the bars float off the screen edges by: the header keeps it. */
+    @variant sm-not {
+      padding-inline: var(--w-chrome-gap);
+    }
   }
 
   /*
@@ -722,6 +751,10 @@
     /* Floating, from the page's edges less its inner margin: the edges of the sections under it. */
     left: calc((var(--w-left-inner) - var(--inner-margin, 0px)) * var(--w-chrome-float));
     right: calc((var(--w-right-inner) - var(--inner-margin, 0px)) * var(--w-chrome-float));
+
+    @variant sm-not {
+      inset-inline: var(--w-chrome-gap);
+    }
     border: var(--w-chrome-border) solid var(--w-line-subtle);
     border-radius: calc(var(--w-chrome-rounded) * var(--w-chrome-float));
     backdrop-filter: var(--w-chrome-backdrop, blur(8px));
@@ -1144,8 +1177,11 @@
     }
   }
 
-  /* What a page sets in the list's header, such as its title, keeps the page inset there. */
-  .w-list-page .w-list-header {
+  /*
+   * What a page sets in the list's header, such as its title, and a row's expansion keep the page inset there, as the
+   * rows' content does.
+   */
+  .w-list-page :is(.w-list-header, .w-list-item-expansion) {
     @variant sm-not {
       padding-inline: var(--w-page-inset, 0px);
     }
@@ -1196,7 +1232,7 @@
       top: var(--w-header-inner);
       height: min(
         calc(100% + var(--w-section-padding) * 2),
-        calc(100vh - var(--w-header-inner) - var(--w-chrome-gap))
+        var(--w-page-height)
       );
     }
   }
@@ -1514,9 +1550,11 @@
 
   /*
    * The edge, over the canvas: from the section's padding above the stuck header down to its bottom. It stays over
-   * the section while the list scrolls sideways under it, as the frame does. The frame casts its shadow.
+   * the section while the list scrolls sideways under it, as the frame does. The frame casts its shadow. It only
+   * paints: its canvas reaches up over the header bar, and would take the header's clicks.
    */
   .w-list-page .w-infinite-list-header-edge {
+    pointer-events: none;
     position: sticky;
     left: var(--w-band-start);
     z-index: -1;

package/tailwind-base/css/theme.css

@@ -141,6 +141,12 @@
   --spacing---width-inner: var(--w-width-inner);
   --spacing---height-inner: var(--w-height-inner);
   --spacing---bottom-inner: var(--w-bottom-inner);
+  --spacing---page-top: var(--w-page-top);
+  --spacing---page-bottom: var(--w-page-bottom);
+  --spacing---page-left: var(--w-page-left);
+  --spacing---page-right: var(--w-page-right);
+  --spacing---page-width: var(--w-page-width);
+  --spacing---page-height: var(--w-page-height);
   --spacing---modal-header-height: var(--w-modal-header-height, 0px);
   --spacing---modal-footer-height: var(--w-modal-footer-height, 0px);
   --spacing---modal-content-height: var(--w-modal-content-height, 0px);

package/tailwind-base/plugins/internal-classes.ts

@@ -20,6 +20,24 @@ const pluginDefault = plugin(function ({addBase, addUtilities, theme}) {
       // In a page list, the section's bottom edge stuck to the bottom of the screen counts too.
       '--w-bottom-inner': 'var(--w-list-end-inner, 0px)',
       '--w-height-inner': 'calc(100vh - var(--w-top-inner, 0px) - var(--w-bottom-inner, 0px))',
+
+      // The page box: where sections and cards sit, the content box less the gutter they reach into.
+      '--w-page-top': 'var(--w-header-inner)',
+      '--w-page-bottom': 'var(--w-chrome-gap, 0px)',
+      '--w-page-left': 'calc(var(--w-left-inner) - var(--w-page-bleed, 0px))',
+      '--w-page-right': 'calc(var(--w-right-inner) - var(--w-page-bleed, 0px))',
+      '--w-page-width': 'calc(100vw - var(--vw-scroll-bar-width, 0px) - var(--w-page-left) - var(--w-page-right))',
+      '--w-page-height': 'calc(100vh - var(--w-page-top) - var(--w-page-bottom))',
+    },
+    // On phones nothing is beside the page: sections span the screen and the content keeps the inner margin, even where
+    // the bars float off the screen edges.
+    '@media (width < 40rem)': {
+      '*': {
+        '--w-left-inner': 'calc(var(--w-left-margin, 0px) + var(--nav-bar-width, 0px) + var(--inner-margin, 0px))',
+        '--w-right-inner': 'calc(var(--w-right-margin, 0px) + var(--actions-bar-width, 0px) + var(--inner-margin, 0px))',
+        '--w-page-left': '0px',
+        '--w-page-right': '0px',
+      },
     },
     '.w-modal-wrapper *': {
       '--w-left-inner': 'var(--w-modal-wrapper-padding, 0px)',