@sentropic/design-system-svelte 0.34.64 → 0.34.66

package/dist/AppHeader.svelte

@@ -215,6 +215,8 @@
     gap: var(--st-spacing-4, 1rem);
     height: var(--st-component-appHeader-height, 3.5rem);
     justify-content: space-between;
+    margin: 0;
+    max-width: none;
     padding: 0 var(--st-spacing-4, 1rem);
     width: 100%;
   }
@@ -246,8 +248,7 @@
   .st-appHeader__burger {
     align-items: center;
     display: flex;
-    flex: 1 1 auto;
-    justify-content: flex-end;
+    margin-left: auto;
   }
 
   .st-appHeader__burgerButton {
@@ -419,6 +420,13 @@
     outline: none;
   }
 
+  /* Variante mono-icône : carré (largeur = hauteur du control) */
+  :global(.st-appHeader__control--icon) {
+    justify-content: center;
+    padding: 0;
+    width: 2.25rem;
+  }
+
   .st-appHeader__actions {
     align-items: center;
     display: flex;
@@ -442,10 +450,12 @@
     box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
     left: 0;
     max-height: 100vh;
+    overflow-x: hidden;
     overflow-y: auto;
+    padding: var(--st-spacing-4, 1rem);
     position: fixed;
     top: 0;
-    width: min(22rem, 85vw);
+    width: min(24rem, 92vw);
     z-index: calc(var(--st-zindex-overlay, 80) + 10);
   }
 </style>

package/dist/AppShell.svelte

@@ -283,19 +283,32 @@
     z-index: var(--st-component-appShell-top-zIndex, 30);
   }
 
+  /* The shared styles.css styles `.st-appShell--workspace` as a 4/5-column grid
+     with named areas (rail/nav/main/context/utility) sized for a flat DOM. This
+     component nests the panels in `__body`, so span `__body` across every
+     inherited column track (`1 / -1`, row 2) — the outer grid then only stacks
+     top / body / bottom, and `__body` owns the horizontal layout.
+     `__body` itself is a flex row (not a fixed 5-track grid): a panel that isn't
+     rendered takes no space, so a dashboard providing only `main` gets no empty
+     rail/nav/context columns and `main` keeps the full width. `order` still
+     drives placement; `main` flexes to fill the remainder. */
   .st-appShell__body {
-    display: grid;
-    grid-template-columns:
-      minmax(0, auto)
-      minmax(0, auto)
-      minmax(0, 1fr)
-      minmax(0, auto)
-      minmax(0, auto);
+    grid-column: 1 / -1;
+    grid-row: 2;
+    display: flex;
+    flex-flow: row nowrap;
     min-block-size: 0;
     min-inline-size: 0;
     position: relative;
   }
 
+  /* Only the bottom-utility variant needs wrapping (its utility panel uses
+     flex-basis:100% to drop onto its own row below). Other variants stay on a
+     single row and shrink panels to fit, matching the old minmax() grid. */
+  .st-appShell[data-utility-side="bottom"] .st-appShell__body {
+    flex-wrap: wrap;
+  }
+
   .st-appShell__primaryRail {
     inline-size: var(--st-appShell-rail-width);
     order: 10;
@@ -324,6 +337,7 @@
   .st-appShell__navigationPanel,
   .st-appShell__contextPanel,
   .st-appShell__utilityPanel {
+    flex: 0 1 auto;
     background: var(--st-component-appShell-panelSurface, var(--st-semantic-surface-raised));
     border-color: var(--st-component-appShell-border, var(--st-semantic-border-subtle));
     min-block-size: 0;
@@ -353,12 +367,13 @@
   .st-appShell[data-utility-side="bottom"] .st-appShell__utilityPanel {
     border-block-start: 1px solid var(--st-component-appShell-border, var(--st-semantic-border-subtle));
     border-inline-start-width: 0;
-    grid-column: 1 / -1;
+    flex-basis: 100%;
     inline-size: auto;
     order: 60;
   }
 
   .st-appShell__main {
+    flex: 1 1 0;
     min-block-size: 0;
     min-inline-size: 0;
     overflow: auto;
@@ -406,8 +421,7 @@
 
   @media (max-width: 48rem) {
     .st-appShell__body {
-      display: flex;
-      flex-direction: column;
+      flex-flow: column nowrap;
     }
 
     .st-appShell__primaryRail,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-svelte",
-  "version": "0.34.64",
+  "version": "0.34.66",
   "type": "module",
   "publishConfig": {
     "access": "public"