@skagerakenergi/design 0.9.0 → 0.11.0

package/INSTRUCTIONS.md

@@ -928,21 +928,39 @@ Provides spacing utilities, breakpoint classes, responsive margins, an app shell
 
 #### App shell
 
-Implements the M3 navigation region + body region window split. Required whenever `se-nav-rail` is used.
+Implements the M3 window structure: optional full-width header/footer + nav rail + scrollable body. Required whenever `se-nav-rail` is used.
 
+**Pattern A — nav + body only**:
 ```html
 <div class="se-app-shell">
-  <nav class="se-nav-rail" aria-label="Main navigation">…</nav>
-  <main class="se-app-shell__body">…</main>
+  <div class="se-app-shell__row">
+    <nav class="se-nav-rail" aria-label="Main navigation">…</nav>
+    <main class="se-app-shell__body">…</main>
+  </div>
+</div>
+```
+
+**Pattern B — full-width header + nav + body + full-width footer**:
+```html
+<div class="se-app-shell">
+  <header class="se-app-bar">…</header>
+  <div class="se-app-shell__row">
+    <nav class="se-nav-rail" aria-label="Main navigation">…</nav>
+    <main class="se-app-shell__body">
+      <div class="se-layout-list-detail">…</div>
+    </main>
+  </div>
+  <footer class="se-toolbar se-toolbar--docked">…</footer>
 </div>
 ```
 
 | Class | Properties |
 |-------|-----------|
-| `.se-app-shell` | `display: flex; height: 100dvh; overflow: hidden` — height-constrained flex shell |
-| `.se-app-shell__body` | `flex: 1 1 0; overflow-y: auto; min-width: 0` — independently scrollable content region |
+| `.se-app-shell` | `display: flex; flex-direction: column; height: 100dvh; overflow: hidden` — column flex shell |
+| `.se-app-shell__row` | `display: flex; flex: 1 1 0; min-height: 0; overflow: hidden` — row region containing nav + body |
+| `.se-app-shell__body` | `flex: 1 1 0; overflow-y: auto; min-width: 0` — scrollable content area |
 
-The nav component occupies the left column at its own fixed width; the body fills the rest. On compact, hide the rail with `.se-show-medium` and the body spans full width automatically.
+`se-app-shell` stacks header / row / footer as a column at full width. `se-app-shell__row` arranges nav and body side by side and fills all remaining height. On compact, hide the rail with `.se-show-medium` and the body spans the full row. Canonical layouts placed directly inside `se-app-shell__body` work unchanged — they are independent of the shell.
 
 #### Canonical layouts
 

package/dist/layout.css

@@ -297,28 +297,61 @@
   }
 }
 
-/* ── App Shell — Navigation region + Body region ── */
+/* ── App Shell — Window structure ── */
 /*
- * Implements the M3 window structure: navigation region (nav rail/drawer) on the
- * left + body region (content) on the right.
+ * Implements the M3 window structure: full-width header/footer + nav region
+ * (nav rail/drawer) + body region (content) side by side.
  *
  * Required for se-nav-rail: the rail uses height: 100% and needs a
- * height-constrained parent. Without this shell it collapses to zero height
- * in normal document flow.
+ * height-constrained parent (__row). Without this shell it collapses to zero
+ * height in normal document flow.
  *
- * Usage:
+ * Pattern A — nav + body only (no header/footer):
  *   <div class="se-app-shell">
- *     <nav class="se-nav-rail" aria-label="Main navigation">…</nav>
- *     <main class="se-app-shell__body">…</main>
+ *     <div class="se-app-shell__row">
+ *       <nav class="se-nav-rail">…</nav>
+ *       <main class="se-app-shell__body">…</main>
+ *     </div>
  *   </div>
+ *
+ * Pattern B — full-width header + nav + body + full-width footer:
+ *   <div class="se-app-shell">
+ *     <header class="se-app-bar">…</header>
+ *     <div class="se-app-shell__row">
+ *       <nav class="se-nav-rail">…</nav>
+ *       <main class="se-app-shell__body">…</main>
+ *     </div>
+ *     <footer class="se-toolbar se-toolbar--docked">…</footer>
+ *   </div>
+ *
+ * Pattern C — no nav rail (body fills full row width):
+ *   <div class="se-app-shell">
+ *     <header class="se-app-bar">…</header>
+ *     <div class="se-app-shell__row">
+ *       <main class="se-app-shell__body">…</main>
+ *     </div>
+ *     <footer>…</footer>
+ *   </div>
+ *
+ * Canonical layouts (se-layout-list-detail, etc.) can be placed directly
+ * inside se-app-shell__body — they work as normal block/grid content.
  */
 .se-app-shell {
   display: flex;
+  flex-direction: column;
   height: 100vh;   /* fallback for older browsers */
   height: 100dvh;  /* excludes mobile browser chrome (address bar) */
   overflow: hidden;
 }
 
+/* Row region — nav + body side by side; fills all remaining vertical space */
+.se-app-shell__row {
+  display: flex;
+  flex: 1 1 0;
+  min-height: 0;   /* required: allows flex children to shrink below content height */
+  overflow: hidden; /* required: gives se-nav-rail a height-constrained parent */
+}
+
 .se-app-shell__body {
   flex: 1 1 0;
   overflow-y: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skagerakenergi/design",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "author": "Chris Aurora Neumann Ruud <chrisauroraneumann.ruud@skagerakenergi.no>",
   "description": "Skagerak Energi design system — M3 component library (CSS only)",
   "type": "module",