@skagerakenergi/design 0.9.0 → 0.10.0

package/INSTRUCTIONS.md

@@ -930,6 +930,7 @@ Provides spacing utilities, breakpoint classes, responsive margins, an app shell
 
 Implements the M3 navigation region + body region window split. Required whenever `se-nav-rail` is used.
 
+**Pattern A — simple body** (content scrolls as one unit):
 ```html
 <div class="se-app-shell">
   <nav class="se-nav-rail" aria-label="Main navigation">…</nav>
@@ -937,12 +938,25 @@ Implements the M3 navigation region + body region window split. Required wheneve
 </div>
 ```
 
+**Pattern B — fixed header + scrollable content + fixed footer**:
+```html
+<div class="se-app-shell">
+  <nav class="se-nav-rail" aria-label="Main navigation">…</nav>
+  <div class="se-app-shell__body">
+    <header class="se-app-bar">…</header>
+    <main class="se-app-shell__content">…</main>
+    <footer class="se-toolbar se-toolbar--docked">…</footer>
+  </div>
+</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; height: 100dvh; overflow: hidden` — height-constrained row flex shell |
+| `.se-app-shell__body` | `flex: 1 1 0; display: flex; flex-direction: column; overflow-y: auto; min-width: 0` — column flex body; scrolls all children when no `__content` child |
+| `.se-app-shell__content` | `flex: 1 1 0; overflow-y: auto; min-width: 0` — scrollable middle region; use alongside a fixed header/footer |
 
-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.
+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. When `se-app-shell__content` is present, only the content scrolls — the header and footer are pinned at their natural heights.
 
 #### Canonical layouts
 

package/dist/layout.css

@@ -306,11 +306,21 @@
  * height-constrained parent. Without this shell it collapses to zero height
  * in normal document flow.
  *
- * Usage:
+ * Pattern A — simple body (content directly in __body, body scrolls):
  *   <div class="se-app-shell">
- *     <nav class="se-nav-rail" aria-label="Main navigation">…</nav>
+ *     <nav class="se-nav-rail">…</nav>
  *     <main class="se-app-shell__body">…</main>
  *   </div>
+ *
+ * Pattern B — fixed header + scrollable content + fixed footer:
+ *   <div class="se-app-shell">
+ *     <nav class="se-nav-rail">…</nav>
+ *     <div class="se-app-shell__body">
+ *       <header class="se-app-bar">…</header>
+ *       <main class="se-app-shell__content">…</main>
+ *       <footer class="se-toolbar se-toolbar--docked">…</footer>
+ *     </div>
+ *   </div>
  */
 .se-app-shell {
   display: flex;
@@ -320,6 +330,15 @@
 }
 
 .se-app-shell__body {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; /* scrolls all children when no __content child is used */
+  min-width: 0;
+}
+
+/* Scrollable middle region — use alongside a fixed header and/or footer */
+.se-app-shell__content {
   flex: 1 1 0;
   overflow-y: auto;
   min-width: 0;

package/package.json

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