@sentropic/design-system-svelte 0.34.56 → 0.34.57

package/dist/AppChrome.svelte

@@ -663,7 +663,7 @@
     color: var(--st-semantic-text-on-emphasis, var(--st-semantic-surface-default));
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     .st-appChrome__utilityNav {
       display: none;
     }
@@ -676,4 +676,10 @@
       display: flex;
     }
   }
+
+  @media (min-width: 768px) {
+    .st-appChrome__burgerTrigger {
+      display: none;
+    }
+  }
 </style>

package/dist/AppHeader.svelte

@@ -43,6 +43,12 @@
     actions?: Snippet;
     /** Contenu du tiroir compact (nav + langue + identité en accordéon). */
     drawer?: Snippet;
+    /**
+     * Alignement de la nav desktop.
+     * - `"start"` (défaut) : la nav occupe l'espace restant et pousse les actions à droite.
+     * - `"center"` : la nav est centrée absolument entre le logo et les actions.
+     */
+    navAlign?: "start" | "center";
     class?: string;
   }
 
@@ -74,6 +80,7 @@
     nav,
     actions,
     drawer,
+    navAlign = "start",
     class: className,
   }: AppHeaderProps = $props();
 
@@ -93,10 +100,18 @@
   );
 
   const classes = () => ["st-appHeader", className].filter(Boolean).join(" ");
+  const barClasses = () =>
+    ["st-appHeader__bar", navAlign === "center" ? "st-appHeader__bar--navCenter" : null]
+      .filter(Boolean)
+      .join(" ");
+  const navClasses = () =>
+    ["st-appHeader__nav", navAlign === "center" ? "st-appHeader__nav--center" : null]
+      .filter(Boolean)
+      .join(" ");
 </script>
 
 <header class={classes()}>
-  <div class="st-appHeader__bar">
+  <div class={barClasses()}>
     <!-- Logo SENT à GAUCHE (+ sous-titre). -->
     {#if logo}
       <div class="st-appHeader__logo">{@render logo()}</div>
@@ -116,7 +131,7 @@
 
     <!-- Nav desktop (masquée en mode compact). -->
     {#if !compact}
-      <nav class="st-appHeader__nav" aria-label="Primary">
+      <nav class={navClasses()} aria-label="Primary">
         {#if nav}{@render nav()}{/if}
       </nav>
 
@@ -172,7 +187,7 @@
     align-items: center;
     display: flex;
     gap: var(--st-spacing-4, 1rem);
-    height: 3.5rem;
+    height: var(--st-component-appHeader-height, 3.5rem);
     justify-content: space-between;
     margin: 0 auto;
     max-width: 80rem;
@@ -180,6 +195,11 @@
     width: 100%;
   }
 
+  /* Quand navAlign="center" : position relative sur la bar pour ancrer la nav. */
+  .st-appHeader__bar--navCenter {
+    position: relative;
+  }
+
   .st-appHeader__nav {
     align-items: center;
     display: flex;
@@ -191,6 +211,14 @@
     min-width: 0;
   }
 
+  /* Nav centrée absolument : ne participe plus au flux flex. */
+  .st-appHeader__nav--center {
+    flex: 0 0 auto;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+
   .st-appHeader__burger {
     align-items: center;
     display: flex;

package/dist/AppHeader.svelte.d.ts

@@ -41,6 +41,12 @@ export interface AppHeaderProps {
     actions?: Snippet;
     /** Contenu du tiroir compact (nav + langue + identité en accordéon). */
     drawer?: Snippet;
+    /**
+     * Alignement de la nav desktop.
+     * - `"start"` (défaut) : la nav occupe l'espace restant et pousse les actions à droite.
+     * - `"center"` : la nav est centrée absolument entre le logo et les actions.
+     */
+    navAlign?: "start" | "center";
     class?: string;
 }
 declare const AppHeader: import("svelte").Component<AppHeaderProps, {}, "">;

package/dist/AppHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppHeader.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0DAA0D;IAC1D,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+GH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppHeader.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0DAA0D;IAC1D,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwHH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/package.json

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