@sentropic/design-system-svelte 0.34.66 → 0.34.68

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/AppChrome.svelte

@@ -7,6 +7,16 @@
     href: string;
     /** Marqué actif (souligné, aria-current=page). */
     active?: boolean;
+    /** Roles autorisés à voir l'item. Vide/undefined = visible par tous. */
+    roles?: string[];
+    /** Alias pratique pour un seul rôle autorisé. */
+    role?: string;
+    /** Coupe la navigation tout en gardant l'item visible/annoncé. */
+    disabled?: boolean;
+    ariaLabel?: string;
+    target?: string;
+    rel?: string;
+    onClick?: (event: MouseEvent) => void;
   }
 
   /** Une option du sélecteur de thème. */
@@ -38,6 +48,8 @@
     nav?: AppChromeNavItem[];
     /** aria-label de la nav principale. */
     navLabel?: string;
+    /** Roles de l'utilisateur courant pour filtrer les nav items gatés par rôle. */
+    userRoles?: string[];
 
     // ── Contrôle thème (contrôlé) ─────────────────────────────────────────────
     /** Options de thème. Vide => le sélecteur est masqué. */
@@ -118,6 +130,7 @@
     brandLabel,
     nav = [],
     navLabel = "Primary",
+    userRoles = [],
     themes = [],
     theme,
     onThemeChange,
@@ -172,6 +185,23 @@
   }
 
   const classes = () => ["st-appChrome", className].filter(Boolean).join(" ");
+  const visibleNav = $derived(
+    nav.filter((item) => {
+      const allowed = item.roles ?? (item.role ? [item.role] : []);
+      return allowed.length === 0 || allowed.some((role) => userRoles.includes(role));
+    }),
+  );
+
+  function navRel(item: AppChromeNavItem): string | undefined {
+    if (item.disabled) return undefined;
+    return item.rel ?? (item.target === "_blank" ? "noreferrer" : undefined);
+  }
+
+  function handleNavClick(event: MouseEvent, item: AppChromeNavItem, closeDrawer = false) {
+    if (item.disabled) event.preventDefault();
+    item.onClick?.(event);
+    if (!item.disabled && closeDrawer) onMobileMenuToggle?.();
+  }
 
   function closeMenus(target: EventTarget | null) {
     const el = target as Element | null;
@@ -207,11 +237,17 @@
 
 <!-- ── Nav principale ─────────────────────────────────────────────────────── -->
 {#snippet navContent()}
-  {#each nav as item (item.href)}
+  {#each visibleNav as item (item.href)}
     <a
       class="st-appChrome__navLink st-appHeader__navLink"
-      href={item.href}
+      class:st-appChrome__navLink--disabled={item.disabled}
+      href={item.disabled ? undefined : item.href}
       aria-current={item.active ? "page" : undefined}
+      aria-disabled={item.disabled ? "true" : undefined}
+      aria-label={item.ariaLabel}
+      target={item.disabled ? undefined : item.target}
+      rel={navRel(item)}
+      onclick={(event) => handleNavClick(event, item)}
     >
       {item.label}
     </a>
@@ -357,12 +393,17 @@
   {#if mobileMenuOpen}
     <nav id={drawerId} class="st-appChrome__drawer" aria-label={navLabel}>
       <div class="st-appChrome__drawerSection">
-        {#each nav as item (item.href)}
+        {#each visibleNav as item (item.href)}
           <a
             class="st-appChrome__drawerLink"
-            href={item.href}
+            class:st-appChrome__navLink--disabled={item.disabled}
+            href={item.disabled ? undefined : item.href}
             aria-current={item.active ? "page" : undefined}
-            onclick={() => onMobileMenuToggle?.()}
+            aria-disabled={item.disabled ? "true" : undefined}
+            aria-label={item.ariaLabel}
+            target={item.disabled ? undefined : item.target}
+            rel={navRel(item)}
+            onclick={(event) => handleNavClick(event, item, true)}
           >
             {item.label}
           </a>

package/dist/AppChrome.svelte.d.ts

@@ -5,6 +5,16 @@ export interface AppChromeNavItem {
     href: string;
     /** Marqué actif (souligné, aria-current=page). */
     active?: boolean;
+    /** Roles autorisés à voir l'item. Vide/undefined = visible par tous. */
+    roles?: string[];
+    /** Alias pratique pour un seul rôle autorisé. */
+    role?: string;
+    /** Coupe la navigation tout en gardant l'item visible/annoncé. */
+    disabled?: boolean;
+    ariaLabel?: string;
+    target?: string;
+    rel?: string;
+    onClick?: (event: MouseEvent) => void;
 }
 /** Une option du sélecteur de thème. */
 export interface AppChromeThemeOption {
@@ -30,6 +40,8 @@ export interface AppChromeProps {
     nav?: AppChromeNavItem[];
     /** aria-label de la nav principale. */
     navLabel?: string;
+    /** Roles de l'utilisateur courant pour filtrer les nav items gatés par rôle. */
+    userRoles?: string[];
     /** Options de thème. Vide => le sélecteur est masqué. */
     themes?: AppChromeThemeOption[];
     /** Id du thème actif. */

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

@@ -1 +1 @@
-{"version":3,"file":"AppChrome.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppChrome.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wCAAwC;AACxC,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,cAAc;IAE7B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,yDAAyD;IACzD,MAAM,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,0DAA0D;IAC1D,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAGhE,2DAA2D;IAC3D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuRH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppChrome.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppChrome.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED,wCAAwC;AACxC,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,cAAc;IAE7B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAGrB,yDAAyD;IACzD,MAAM,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,0DAA0D;IAC1D,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAGhE,2DAA2D;IAC3D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAySH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/AppChrome.test.js

@@ -43,6 +43,15 @@ describe("AppChrome — navigation", () => {
         expect(links[1].getAttribute("aria-current")).toBeNull();
         expect(links[0].classList.contains("st-appHeader__navLink")).toBe(true);
     });
+    it("filters role-gated items and renders disabled nav without href", () => {
+        const { container } = render(AppChrome, {
+            props: { nav: [...nav, { label: "Admin", href: "/admin", role: "admin" }, { label: "Soon", href: "/soon", disabled: true }], userRoles: ["member"] },
+        });
+        const links = Array.from(container.querySelectorAll(".st-appChrome__navLink"));
+        expect(links.map((a) => a.textContent?.trim())).toEqual(["Vues", "Données", "Réglages", "Soon"]);
+        expect(links.at(-1)?.hasAttribute("href")).toBe(false);
+        expect(links.at(-1)?.getAttribute("aria-disabled")).toBe("true");
+    });
 });
 describe("AppChrome — contrôle thème", () => {
     it("shows the active theme label and fires onThemeChange on selection", async () => {

package/dist/AppHeader.svelte

@@ -388,6 +388,15 @@
     font-weight: 650;
   }
 
+  :global(.st-appChrome__navLink--disabled),
+  :global(.st-appChrome__navLink--disabled:hover),
+  :global(.st-appChrome__navLink--disabled:focus-visible) {
+    color: var(--st-semantic-text-disabled, var(--st-semantic-text-secondary));
+    cursor: not-allowed;
+    opacity: 0.56;
+    pointer-events: none;
+  }
+
   /* --- Contrôle utilitaire canonique (pill : thème / langue / icône) --- */
   :global(.st-appHeader__control) {
     align-items: center;

package/dist/Dropdown.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { ChevronDown } from "@lucide/svelte";
   import type { HTMLAttributes } from "svelte/elements";
+  import Portal from "./Portal.svelte";
 
   export type DropdownOption = {
     label: string;
@@ -40,6 +41,7 @@
   let currentValue = $state<string | undefined>(undefined);
   let syncedOpen = $state<boolean | undefined>(undefined);
   let syncedValue = $state<string | undefined>(undefined);
+  let listEl: HTMLDivElement | undefined = $state();
   let listPos = $state({ top: 0, left: 0, width: 0 });
 
   const classes = () => ["st-dropdown", className].filter(Boolean).join(" ");
@@ -72,7 +74,7 @@
   function onWindowPointerDown(event: MouseEvent) {
     if (!expanded) return;
     const target = event.target as Node | null;
-    if (host && target && !host.contains(target)) close();
+    if (target && !host?.contains(target) && !listEl?.contains(target)) close();
   }
 
   function onWindowScroll() {
@@ -122,7 +124,9 @@
     />
   </button>
   {#if expanded}
+    <Portal>
     <div
+      bind:this={listEl}
       class="st-dropdown__list"
       role="listbox"
       aria-label={label}
@@ -142,6 +146,7 @@
         </button>
       {/each}
     </div>
+    </Portal>
   {/if}
 </div>
 

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAgHJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAoHJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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.66",
+  "version": "0.34.68",
   "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",