@sentropic/design-system-svelte 0.34.65 → 0.34.67

package/README.md

@@ -32,15 +32,15 @@ Import the package CSS once at the app or preview boundary, then render componen
 </ThemeProvider>
 ```
 
-`ThemeProvider` defaults to the Sent Tech theme. Tenant themes can be supplied from `@sentropic/design-system-themes`, `@sentropic/design-system-theme-dsfr`, or `@sentropic/design-system-theme-carbon`.
+`ThemeProvider` defaults to the Sent Tech theme. Tenant themes can be supplied from `@sentropic/design-system-themes`, `@sentropic/design-system-theme-dsfr`, `@sentropic/design-system-theme-canada`, or `@sentropic/design-system-theme-quebec`.
 
 ```svelte
 <script>
   import { ThemeProvider } from "@sentropic/design-system-svelte";
-  import { carbonTheme } from "@sentropic/design-system-theme-carbon";
+  import { dsfrTheme } from "@sentropic/design-system-theme-dsfr";
 </script>
 
-<ThemeProvider theme={carbonTheme}>
+<ThemeProvider theme={dsfrTheme}>
   <!-- your content -->
 </ThemeProvider>
 ```

package/dist/.srchash

@@ -0,0 +1 @@
+5fa4af626e8a967b1e34a8ab542a01e4b9b3051441b1a26defa3e5b10ca0e657

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/dist/EventFeedPanel.svelte

@@ -158,7 +158,8 @@
     align-items: flex-start;
     background: var(--st-semantic-surface-subtle);
     border-left: 3px solid var(--st-semantic-border-strong);
-    border-radius: var(--st-radius-sm, 0.25rem);
+    /* Accent latéral fort = coins carrés. Ne pas arrondir une carte/exergue à liseré. */
+    border-radius: 0;
     display: flex;
     gap: var(--st-spacing-2, 0.5rem);
     padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);

package/dist/Highlight.svelte

@@ -37,7 +37,8 @@
     --st-highlight-accent: var(--st-semantic-action-primary);
     background: var(--st-semantic-surface-subtle);
     border-left: 4px solid var(--st-highlight-accent);
-    border-radius: var(--st-radius-md, 0.375rem);
+    /* Accent latéral fort = coins carrés. Ne pas arrondir une carte/exergue à liseré. */
+    border-radius: 0;
     color: var(--st-semantic-text-primary);
     padding: var(--st-spacing-4, 1rem);
   }

package/dist/KpiCard.svelte

@@ -234,9 +234,11 @@
     padding: var(--st-spacing-6, 1.5rem);
   }
 
-  /* Accent catégoriel : liseré coloré à gauche. */
+  /* Accent catégoriel : liseré conservé, mais carte carrée pour éviter
+     le liseré arrondi sur conteneur arrondi. */
   .st-kpiCard--toned {
     border-inline-start-width: var(--st-spacing-1, 0.25rem);
+    border-radius: 0;
   }
 
   .st-kpiCard__label {

package/dist/SelectableRow.svelte

@@ -254,11 +254,21 @@
     width: 100%;
   }
 
-  /* Opt-in accent bar: reserve the 2px gutter only when enabled so text never
-     shifts on selection. */
+  /* Opt-in accent bar: reserve a 2px gutter without attaching a border to the
+     rounded host. The selected accent is painted by a square pseudo-element so
+     no one-sided stroke follows the row radius. */
   .st-selectableRow--accentBar {
     padding-left: calc(0.75rem - 2px);
-    border-left: 2px solid transparent;
+  }
+
+  .st-selectableRow--accentBar::before {
+    background: transparent;
+    block-size: 100%;
+    content: "";
+    inline-size: 2px;
+    inset-block: 0;
+    inset-inline-start: 0;
+    position: absolute;
   }
 
   .st-selectableRow:hover:not(.st-selectableRow--disabled):not(.st-selectableRow--selected) {
@@ -291,8 +301,8 @@
   }
 
   /* The left accent bar paints only when opt-in AND selected. */
-  .st-selectableRow--accentBar.st-selectableRow--selected {
-    border-left-color: var(
+  .st-selectableRow--accentBar.st-selectableRow--selected::before {
+    background: var(
       --st-component-selectableRow-selectedAccent,
       var(--st-semantic-action-primary, #2563eb)
     );

package/dist/StreamingMessage.svelte

@@ -305,7 +305,7 @@
   .st-streamingMessage__reasoning {
     background: var(--st-component-chatMessage-reasoningBackground, var(--st-semantic-surface-subtle));
     border-left: 2px solid var(--st-semantic-border-subtle);
-    border-radius: var(--st-component-control-radius, 0.375rem);
+    border-radius: 0;
     margin: 0 0 0.5rem;
     padding: 0.4rem 0.6rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-svelte",
-  "version": "0.34.65",
+  "version": "0.34.67",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -27,7 +27,6 @@
   ],
   "dependencies": {
     "@lucide/svelte": "^0.562.0",
-    "@sentropic/design-system-theme-carbon": "0.2.2",
     "@sentropic/design-system-themes": "0.11.0"
   },
   "peerDependencies": {
@@ -39,7 +38,6 @@
     "test": "vitest run src"
   },
   "devDependencies": {
-    "@sentropic/design-system-theme-carbon": "0.2.2",
     "@sentropic/design-system-theme-dsfr": "0.2.2",
     "@sentropic/design-system-themes": "0.11.0",
     "@sveltejs/package": "^2.5.0",