@sentropic/design-system-svelte 0.34.58 → 0.34.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/AppHeader.svelte +58 -8
  2. package/dist/AppHeader.svelte.d.ts +6 -0
  3. package/dist/AppHeader.svelte.d.ts.map +1 -1
  4. package/dist/IdentityMenu.svelte +31 -1
  5. package/package.json +1 -1
package/dist/AppHeader.svelte CHANGED
@@ -49,6 +49,12 @@
49
49
  * - `"center"` : la nav est centrée absolument entre le logo et les actions.
50
50
  */
51
51
  navAlign?: "start" | "center";
52
+ /**
53
+ * Mode d'affichage de la marque.
54
+ * - `"icon"` (défaut) : si `logoSrc` → image seule ; sinon bigramme dans un carré+cercle.
55
+ * - `"full"` : comportement complet logo + `brandName`/`productName`.
56
+ */
57
+ brandMode?: "icon" | "full";
52
58
  class?: string;
53
59
  }
54
60
 
@@ -81,9 +87,19 @@
81
87
  actions,
82
88
  drawer,
83
89
  navAlign = "start",
90
+ brandMode = "icon",
84
91
  class: className,
85
92
  }: AppHeaderProps = $props();
86
93
 
94
+ // Bigramme : 2 premières initiales du brandName (ex. "Sentropic Console" → "SC").
95
+ const brandBigramme = $derived.by(() => {
96
+ const src = (brandName || '').trim();
97
+ const words = src.split(/\s+/).filter(Boolean);
98
+ if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
99
+ if (words.length === 1) return src.slice(0, 2).toUpperCase();
100
+ return '';
101
+ });
102
+
87
103
  // Marque par défaut : rendue ssi aucun snippet `logo` et qu'il y a au moins un
88
104
  // nom / logo / produit. Calque le bloc marque canonique du site DS.
89
105
  const hasDefaultBrand = $derived(
@@ -117,14 +133,24 @@
117
133
  <div class="st-appHeader__logo">{@render logo()}</div>
118
134
  {:else if hasDefaultBrand}
119
135
  <a class="st-appHeader__brand" href={brandHref} aria-label={resolvedBrandLabel || undefined}>
120
- {#if logoSrc}
121
- <img class="st-appHeader__brandMark" src={logoSrc} alt={logoAlt} aria-hidden={logoAlt ? undefined : "true"} />
122
- {/if}
123
- {#if brandName || productName}
124
- <span class="st-appHeader__brandCopy">
125
- {#if brandName}<span class="st-appHeader__brandName">{brandName}</span>{/if}
126
- {#if productName}<span class="st-appHeader__brandProduct">{productName}</span>{/if}
127
- </span>
136
+ {#if brandMode === 'full'}
137
+ {#if logoSrc}
138
+ <img class="st-appHeader__brandMark" src={logoSrc} alt={logoAlt} aria-hidden={logoAlt ? undefined : "true"} />
139
+ {/if}
140
+ {#if brandName || productName}
141
+ <span class="st-appHeader__brandCopy">
142
+ {#if brandName}<span class="st-appHeader__brandName">{brandName}</span>{/if}
143
+ {#if productName}<span class="st-appHeader__brandProduct">{productName}</span>{/if}
144
+ </span>
145
+ {/if}
146
+ {:else}
147
+ {#if logoSrc}
148
+ <img class="st-appHeader__brandMark" src={logoSrc} alt={logoAlt} aria-hidden={logoAlt ? undefined : "true"} />
149
+ {:else if brandBigramme}
150
+ <span class="st-appHeader__brandIconWrap">
151
+ <span class="st-appHeader__brandIcon" aria-hidden="true">{brandBigramme}</span>
152
+ </span>
153
+ {/if}
128
154
  {/if}
129
155
  </a>
130
156
  {/if}
@@ -307,6 +333,30 @@
307
333
  font-weight: 650;
308
334
  }
309
335
 
336
+ .st-appHeader__brandIconWrap {
337
+ align-items: center;
338
+ background: var(--st-semantic-surface-subtle);
339
+ border-radius: var(--st-radius-sm, 0.375rem);
340
+ display: inline-flex;
341
+ flex: 0 0 auto;
342
+ height: 2rem;
343
+ justify-content: center;
344
+ width: 2rem;
345
+ }
346
+
347
+ .st-appHeader__brandIcon {
348
+ align-items: center;
349
+ background: var(--st-semantic-action-primary);
350
+ border-radius: var(--st-radius-pill, 9999px);
351
+ color: var(--st-semantic-action-primaryText);
352
+ display: inline-flex;
353
+ font-size: 0.6875rem;
354
+ font-weight: 700;
355
+ height: 1.5rem;
356
+ justify-content: center;
357
+ width: 1.5rem;
358
+ }
359
+
310
360
  /* --- Lien de nav canonique (pill soulignée, état actif) ---
311
361
  Classe utilitaire publiée : un consommateur l'applique sur ses <a> de nav
312
362
  (ou via le composant Link DS) pour matcher le chrome du site DS sans
package/dist/AppHeader.svelte.d.ts CHANGED
@@ -47,6 +47,12 @@ export interface AppHeaderProps {
47
47
  * - `"center"` : la nav est centrée absolument entre le logo et les actions.
48
48
  */
49
49
  navAlign?: "start" | "center";
50
+ /**
51
+ * Mode d'affichage de la marque.
52
+ * - `"icon"` (défaut) : si `logoSrc` → image seule ; sinon bigramme dans un carré+cercle.
53
+ * - `"full"` : comportement complet logo + `brandName`/`productName`.
54
+ */
55
+ brandMode?: "icon" | "full";
50
56
  class?: string;
51
57
  }
52
58
  declare const AppHeader: import("svelte").Component<AppHeaderProps, {}, "">;
package/dist/AppHeader.svelte.d.ts.map CHANGED
@@ -1 +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;;;;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"}
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;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4IH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
package/dist/IdentityMenu.svelte CHANGED
@@ -326,8 +326,38 @@
326
326
  width: 100%;
327
327
  }
328
328
 
329
+ /* Mode compact : le trigger imite .st-appHeader__control (pill encadrée grise). */
329
330
  .st-identityMenu--compact .st-identityMenu__trigger {
330
- padding: var(--st-spacing-1, 0.25rem);
331
+ background: var(--st-semantic-surface-default);
332
+ border: 1px solid var(--st-semantic-border-subtle);
333
+ border-radius: var(--st-radius-sm, 0.375rem);
334
+ color: var(--st-semantic-text-secondary);
335
+ height: 2.25rem;
336
+ padding: 0 0.5rem;
337
+ transition: background-color var(--st-motion-fast, 120ms) ease,
338
+ border-color var(--st-motion-fast, 120ms) ease,
339
+ color var(--st-motion-fast, 120ms) ease;
340
+ }
341
+
342
+ .st-identityMenu--compact .st-identityMenu__trigger:hover,
343
+ .st-identityMenu--compact .st-identityMenu__trigger:focus-visible,
344
+ .st-identityMenu--compact .st-identityMenu__trigger[aria-expanded="true"] {
345
+ background: var(--st-semantic-surface-subtle);
346
+ border-color: var(--st-semantic-border-interactive);
347
+ box-shadow: none;
348
+ color: var(--st-semantic-text-primary);
349
+ outline: none;
350
+ }
351
+
352
+ /* Avatar compact = carré gris (surface-subtle + radius-sm), pas cercle primary. */
353
+ .st-identityMenu--compact .st-identityMenu__avatar {
354
+ background: var(--st-semantic-surface-subtle);
355
+ border-radius: var(--st-radius-sm, 0.375rem);
356
+ color: var(--st-semantic-text-primary);
357
+ font-size: 0.6875rem;
358
+ font-weight: 700;
359
+ height: 1.5rem;
360
+ width: 1.5rem;
331
361
  }
332
362
 
333
363
  .st-identityMenu__trigger {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sentropic/design-system-svelte",
3
- "version": "0.34.58",
3
+ "version": "0.34.60",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"