@sia-ui/cli 0.3.2 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sia-ui/cli
 
+## 0.4.0
+
+### Minor Changes
+
+- Aligne tous les packages publics SIA UI sur la version 0.4.0 afin de fournir
+  un ensemble cohérent à installer, documenter et maintenir.
+
 ## 0.3.2
 
 ### Patch Changes

package/README.md

@@ -1,5 +1,5 @@
-<p align="center"><img src="https://beatjo.github.io/sia-ui-site/brand/sia-ui-logo.png" alt="SIA UI" width="320"></p>
-
+<p align="center"><img src="https://beatjo.github.io/sia-ui-site/brand/sia-ui-logo.png" alt="SIA UI" width="320"></p>
+
 # @sia-ui/cli
 
 Installer les composants SIA UI dans une application, comme shadcn/ui.
@@ -51,22 +51,42 @@ add  src/components/DataTable/styles.css
 
 Une chose s'écrit au niveau le plus bas où elle a du sens, et une seule fois.
 Voir [la documentation](https://beatjo.github.io/sia-ui-site).
-
-## Contribuer
-
-Le code source principal de SIA UI est privé pour le moment. Les retours publics passent par le dépôt `BeatJo/sia-ui-site` : bugs, demandes de composants, corrections de documentation et questions d'usage.
-
-- Signaler un bug : https://github.com/BeatJo/sia-ui-site/issues
-- Lire la documentation : https://beatjo.github.io/sia-ui-site/
-- Voir la démonstration : https://beatjo.github.io/sia-ui-site/preview/
-
-Les contributions directes au code des packages se font sur invitation dans le dépôt source privé.
-## Journal des changements
-
-Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible sur npm.
-
+
+## Contribuer
+
+Le code source principal de SIA UI est privé pour le moment. Les retours publics passent par le dépôt `BeatJo/sia-ui-site` : bugs, demandes de composants, corrections de documentation et questions d'usage.
+
+- Signaler un bug : https://github.com/BeatJo/sia-ui-site/issues
+- Lire la documentation : https://beatjo.github.io/sia-ui-site/
+- Voir la démonstration : https://beatjo.github.io/sia-ui-site/preview/
+
+Les contributions directes au code des packages se font sur invitation dans le dépôt source privé.
+## Journal des changements
+
+Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible sur npm.
+
+<!-- sia:changelog:start -->
 # @sia-ui/cli
 
+## 0.4.0
+
+### Minor Changes
+
+- Aligne tous les packages publics SIA UI sur la version 0.4.0 afin de fournir
+  un ensemble cohérent à installer, documenter et maintenir.
+
+## 0.3.2
+
+### Patch Changes
+
+- Ajoute l’identité visuelle officielle de SIA UI et améliore la documentation publique, les changelogs et les ressources de contribution.
+
+## 0.3.1
+
+### Patch Changes
+
+- Expose public contribution flow on npm
+
 ## 0.3.0
 
 ### Minor Changes
@@ -226,8 +246,9 @@ Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible
 
 ### Patch Changes
 
-- Include component styles when installing registry components
-
-## Licence
+- Include component styles when installing registry components
+<!-- sia:changelog:end -->
+
+## Licence
 
 MIT

package/dist/registry/package/components/AppShell/index.tsx

@@ -3,6 +3,8 @@ import {
   useMemo,
   useState,
   type CSSProperties,
+  type ElementType,
+  type HTMLAttributes,
   type ReactNode,
 } from "react";
 import { cn } from "@sia-ui/utils";
@@ -53,6 +55,87 @@ export type AppShellMobileNav = "drawer" | "tabs" | "both";
 
 export type AppShellContentWidth = "wide" | "narrow" | "full";
 
+export interface AppShellBrandProps extends HTMLAttributes<HTMLDivElement> {
+  /** Symbole conservé lorsque la navigation devient un rail. */
+  icon: ReactNode;
+  /** Nom du produit, masqué automatiquement dans le rail. */
+  name: ReactNode;
+  /** Ligne secondaire facultative, masquée avec le nom. */
+  description?: ReactNode;
+}
+
+/**
+ * Identité de produit adaptée au rail de l'`AppShell`.
+ *
+ * L'application fournit le symbole et le texte une seule fois. Le composant
+ * masque sa copie dès que son parent reçoit `data-collapsed`.
+ */
+export function AppShellBrand({
+  icon,
+  name,
+  description,
+  className,
+  ...props
+}: AppShellBrandProps) {
+  return (
+    <div className={cn("sia-shell-brand", className)} {...props}>
+      <span className="sia-shell-brand__icon" aria-hidden="true">
+        {icon}
+      </span>
+      <span className="sia-shell-brand__copy">
+        <span className="sia-shell-brand__name">{name}</span>
+        {description !== undefined && (
+          <span className="sia-shell-brand__description">{description}</span>
+        )}
+      </span>
+    </div>
+  );
+}
+
+export interface AppShellRailItemProps extends HTMLAttributes<HTMLElement> {
+  /** Élément rendu : contenu simple, action ou lien. */
+  as?: "div" | "button" | "a";
+  /** Symbole toujours visible dans le rail. */
+  icon: ReactNode;
+  /** Libellé masqué visuellement dans le rail et conservé comme nom accessible. */
+  label: string;
+  href?: string;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+}
+
+/** Contenu icône + libellé qui s'adapte automatiquement au rail. */
+export function AppShellRailItem({
+  as = "div",
+  icon,
+  label,
+  className,
+  href,
+  type = "button",
+  disabled,
+  ...props
+}: AppShellRailItemProps) {
+  const Component: ElementType = as;
+  const elementProps = {
+    ...props,
+    ...(as === "a" && href ? { href } : {}),
+    ...(as === "button" ? { type, disabled } : {}),
+  };
+
+  return (
+    <Component
+      className={cn("sia-shell-rail-item", className)}
+      aria-label={props["aria-label"] ?? (as !== "div" ? label : undefined)}
+      {...elementProps}
+    >
+      <span className="sia-shell-rail-item__icon" aria-hidden="true">
+        {icon}
+      </span>
+      <span className="sia-shell-rail-item__label">{label}</span>
+    </Component>
+  );
+}
+
 export interface AppShellProps {
   nav: SidebarEntry[];
   children: ReactNode;
@@ -97,8 +180,8 @@ export interface AppShellProps {
   /**
    * En tête de barre latérale : logo, nom du produit, sélecteur d'entité.
    *
-   * Reçoit `data-collapsed` en mode rail, comme `sidebarFooter` : sans quoi
-   * un nom de produit écrit en toutes lettres déborde des quatre rem du rail.
+   * `AppShellBrand` masque son texte automatiquement dans le rail. Un contenu
+   * entièrement personnalisé reçoit toujours `data-collapsed` sur son parent.
    */
   brand?: ReactNode;
 
@@ -107,8 +190,8 @@ export interface AppShellProps {
    *
    * C'est la place de la déconnexion et des réglages du compte — ce qui sort
    * de l'application, par opposition à l'en-tête, réservé à ce qui agit sur
-   * l'écran courant. Reçoit `data-collapsed` en mode rail, de quoi masquer un
-   * libellé sans changer de composant.
+   * l'écran courant. `AppShellRailItem` masque son libellé automatiquement ;
+   * un contenu personnalisé peut encore lire `data-collapsed` sur son parent.
    */
   sidebarFooter?: ReactNode;
 
@@ -306,7 +389,9 @@ export function AppShell({
       {/* Sur petit écran, la barre latérale n'a pas la place de rester
           ouverte : elle devient un tiroir. Sans lui, l'arborescence complète
           ne serait atteignable que par « Plus », ce qui ne se devine pas. */}
-      {!compact && !masquee && <aside className="sia-shell__aside">{barre}</aside>}
+      {!compact && !masquee && (
+        <aside className="sia-shell__aside">{barre}</aside>
+      )}
 
       <div className="sia-shell__main">
         {(header || collapsible !== false || (compact && montrerTiroir)) && (
@@ -348,7 +433,12 @@ export function AppShell({
           </header>
         )}
 
-        <main className={cn("sia-shell__content", `sia-shell__content--${contentWidth}`)}>
+        <main
+          className={cn(
+            "sia-shell__content",
+            `sia-shell__content--${contentWidth}`,
+          )}
+        >
           {page && <div className="sia-shell__page">{page}</div>}
           {children}
         </main>
@@ -374,7 +464,11 @@ export function AppShell({
           size="sm"
           className="sia-shell__drawer"
         >
-          {barre}
+          <Drawer.Header>
+            <Drawer.Title>Navigation</Drawer.Title>
+            <Drawer.Close />
+          </Drawer.Header>
+          <Drawer.Body>{barre}</Drawer.Body>
         </Drawer>
       )}
     </div>

package/dist/registry/package/components/AppShell/styles.css

@@ -57,6 +57,92 @@
   padding: .5rem;
 }
 
+/* Les contenus standards de la barre connaissent le rail. L'application
+   fournit une icône et un texte une seule fois ; AppShell porte l'état sur le
+   parent, et ces primitives prennent en charge la présentation. */
+.sia-shell-brand,
+.sia-shell-rail-item {
+  display: flex;
+  align-items: center;
+  gap: .625rem;
+  min-width: 0;
+}
+
+.sia-shell-brand { padding: .25rem; }
+
+.sia-shell-brand__icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+.sia-shell-brand__icon > img,
+.sia-shell-brand__icon > svg {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sia-shell-brand__copy { min-width: 0; }
+.sia-shell-brand__name,
+.sia-shell-brand__description {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sia-shell-brand__name { font-weight: 700; }
+.sia-shell-brand__description {
+  margin-top: .1rem;
+  color: var(--sia-muted);
+  font-size: .72rem;
+}
+
+.sia-shell-rail-item {
+  width: 100%;
+  padding: .375rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  font-size: .75rem;
+  text-decoration: none;
+}
+.sia-shell-rail-item:is(button, a) { cursor: pointer; }
+.sia-shell-rail-item:is(button, a):hover {
+  background: var(--sia-surface-raised, var(--sia-surface));
+  color: var(--sia-foreground);
+}
+.sia-shell-rail-item:disabled { opacity: .55; cursor: not-allowed; }
+.sia-shell-rail-item:is(button, a):focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: 2px;
+}
+.sia-shell-rail-item__icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.sia-shell-rail-item__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-collapsed] .sia-shell-brand,
+[data-collapsed] .sia-shell-rail-item {
+  justify-content: center;
+  gap: 0;
+}
+[data-collapsed] .sia-shell-brand__copy,
+[data-collapsed] .sia-shell-rail-item__label { display: none; }
+
 .sia-shell__main {
   display: flex;
   flex-direction: column;
@@ -154,6 +240,7 @@
   padding-bottom: calc(var(--sia-shell-tabs) + env(safe-area-inset-bottom, 0px));
 }
 
+.sia-shell__drawer .sia-drawer-body { flex:1; min-height:0; padding:.5rem; overflow:hidden; }
 .sia-shell__drawer .sia-sidebar { height: 100%; }
 
 /* ── La barre d'onglets ─────────────────────────────────────────────────── */

package/dist/registry/package/components/Drawer/index.tsx

@@ -12,6 +12,7 @@ import "./styles.css";
 import { useOutsideClick } from "@sia-ui/react";
 import { DrawerContext } from "./context";
 import { overlayStack, useDisclosureState } from "@sia-ui/headless";
+import { XIcon } from "../Icons";
 /** Ce que la réf impérative expose — ouvrir un tiroir depuis l'extérieur. */
 export type DrawerRef = {
   open: () => void;
@@ -65,9 +66,10 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       closeOnOutsideClick = true,
       closeOnEsc = true,
       children,
+      className,
       ...rest
     },
-    ref
+    ref,
   ) => {
     // Ouverture, fermeture et phase de sortie vivent dans @sia-ui/headless :
     // rien là-dedans n'est propre au DOM, et le pendant mobile réutilisera la
@@ -96,7 +98,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
         toggle: () => (isOpen ? doClose() : doOpen()),
         isOpen: () => isOpen,
       }),
-      [isOpen, open]
+      [isOpen, open],
     );
 
     /* Overlay stack */
@@ -150,6 +152,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
         <DrawerContext.Provider value={{ close: doClose }}>
           <div
             className="sia-drawer-root"
+            data-state={state}
             style={{ zIndex: zIndexRef.current ?? undefined }}
           >
             <div className="sia-drawer-overlay" />
@@ -163,7 +166,8 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
                 "sia-drawer",
                 `sia-drawer-${position}`,
                 `sia-drawer-${size}`,
-                state === "closing" && "is-closing"
+                state === "closing" && "is-closing",
+                className,
               )}
               {...rest}
             >
@@ -173,7 +177,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
         </DrawerContext.Provider>
       </Portal>
     );
-  }
+  },
 ) as DrawerComponent;
 
 Drawer.displayName = "SiaDrawer";
@@ -205,7 +209,7 @@ export function DrawerClose() {
       onClick={ctx.close}
       aria-label="Fermer"
     >
-      ✕
+      <XIcon aria-hidden="true" />
     </button>
   );
 }

package/dist/registry/package/components/Drawer/styles.css

@@ -7,17 +7,24 @@
 .sia-drawer-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  animation: fadeIn var(--sia-duration-base) var(--sia-easing-entrance);
+  z-index: 0;
+  background: rgb(2 6 23 / .52);
+  animation: sia-drawer-fade-in var(--sia-duration-base) var(--sia-easing-entrance) both;
 }
+.sia-drawer-root[data-state="closing"] .sia-drawer-overlay { animation:sia-drawer-fade-out var(--sia-duration-base) var(--sia-easing-exit) both; }
 
 .sia-drawer {
   position: absolute;
-  background: var(--sia-color-white);
+  z-index: 1;
+  color: var(--sia-foreground, #0f172a);
+  background: var(--sia-background, #fff);
+  border: 1px solid var(--sia-border, #e2e8f0);
   display: flex;
   flex-direction: column;
-  width: var(--sia-drawer-width);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  width: min(var(--sia-drawer-width), calc(100vw - 2rem));
+  overflow: hidden;
+  isolation: isolate;
+  box-shadow: 0 20px 50px rgb(2 6 23 / .24);
   will-change: transform;
 }
 
@@ -27,7 +34,7 @@
   right: 0;
   top: 0;
   height: 100%;
-  animation: slideInRight var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-right var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 
 /* LEFT */
@@ -35,7 +42,7 @@
   left: 0;
   top: 0;
   height: 100%;
-  animation: slideInLeft var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-left var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 
 /* TOP */
@@ -43,9 +50,11 @@
   top: 0;
   left: 0;
   right: 0;
-  height: auto;
+  width: 100%;
+  max-width: 100%;
+  max-height: min(80vh, 48rem);
   --sia-drawer-width: 100% !important;
-  animation: slideInTop var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-top var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 
 /* BOTTOM */
@@ -53,9 +62,11 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: auto;
+  width: 100%;
+  max-width: 100%;
+  max-height: min(80vh, 48rem);
   --sia-drawer-width: 100% !important;
-  animation: slideInBottom var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-bottom var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 
 
@@ -68,14 +79,15 @@
 .sia-drawer-header,
 .sia-drawer-footer {
   padding: 16px;
-  border-bottom: 1px solid var(--sia-color-border);
+  border-bottom: 1px solid var(--sia-border, #e2e8f0);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 .sia-drawer-footer {
-  border-top: 1px solid var(--sia-color-border);
+  border-top: 1px solid var(--sia-border, #e2e8f0);
+  border-bottom: 0;
   margin-top: auto;
 }
 
@@ -85,67 +97,80 @@
 }
 
 .sia-drawer-title {
+  margin: 0;
   font-size: 1.1rem;
   font-weight: 600;
 }
 
 .sia-drawer-close {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
   margin-left: auto;
-  background: none;
-  border: none;
+  padding: 0;
+  color: var(--sia-muted, #64748b);
+  background: transparent;
+  border: 0;
+  border-radius: var(--sia-radius, .375rem);
   cursor: pointer;
-  font-size: 1.2rem;
 }
+.sia-drawer-close:hover { color:var(--sia-foreground,#0f172a); background:var(--sia-surface,#f8fafc); }
+.sia-drawer-close:focus-visible { outline:2px solid var(--sia-primary,#2563eb); outline-offset:2px; }
+.sia-drawer-close svg { width:1.125rem; height:1.125rem; }
 
 .sia-drawer-right.is-closing {
-  animation: slideOutRight var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-right var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 
 .sia-drawer-left.is-closing {
-  animation: slideOutLeft var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-left var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 
 .sia-drawer-top.is-closing {
-  animation: slideOutTop var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-top var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 
 .sia-drawer-bottom.is-closing {
-  animation: slideOutBottom var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-bottom var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 
 /* Animations */
-@keyframes slideInRight {
+@keyframes sia-drawer-fade-in { from { opacity:0; } to { opacity:1; } }
+@keyframes sia-drawer-fade-out { to { opacity:0; } }
+@keyframes sia-drawer-in-right {
   from { transform: translateX(100%); }
   to   { transform: translateX(0); }
 }
 
-@keyframes slideInLeft {
+@keyframes sia-drawer-in-left {
   from { transform: translateX(-100%); }
   to   { transform: translateX(0); }
 }
 
-@keyframes slideInTop {
+@keyframes sia-drawer-in-top {
   from { transform: translateY(-100%); }
   to   { transform: translateY(0); }
 }
 
-@keyframes slideInBottom {
+@keyframes sia-drawer-in-bottom {
   from { transform: translateY(100%); }
   to   { transform: translateY(0); }
 }
 
-@keyframes slideOutRight {
+@keyframes sia-drawer-out-right {
   to { transform: translateX(100%); }
 }
 
-@keyframes slideOutLeft {
+@keyframes sia-drawer-out-left {
   to { transform: translateX(-100%); }
 }
 
-@keyframes slideOutTop {
+@keyframes sia-drawer-out-top {
   to { transform: translateY(-100%); }
 }
 
-@keyframes slideOutBottom {
+@keyframes sia-drawer-out-bottom {
   to { transform: translateY(100%); }
 }

package/dist/registry/package/components/Icons/index.tsx

@@ -182,6 +182,15 @@ export function InfoIcon(props: IconProps) {
     </IconBase>
   );
 }
+
+export function SettingsIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" />
+    </IconBase>
+  );
+}
 export function EyeIcon(props: IconProps) {
   return (
     <IconBase {...props}>

package/dist/registry/package/components/Sidebar/index.tsx

@@ -358,7 +358,8 @@ function Ligne({
   aDesEnfants: boolean;
 }) {
   const porteUnePastille =
-    collapsed && navSome(item, (e) => e.badge !== undefined && e.badge !== null);
+    collapsed &&
+    navSome(item, (e) => e.badge !== undefined && e.badge !== null);
 
   return (
     <>
@@ -370,7 +371,16 @@ function Ligne({
       <span className="sia-sidebar__label">{item.label}</span>
 
       {item.badge !== undefined && !collapsed && (
-        <span className="sia-sidebar__badge">{item.badge}</span>
+        <span
+          className="sia-sidebar__badge"
+          data-sia-badge={
+            typeof item.badge === "string" || typeof item.badge === "number"
+              ? String(item.badge)
+              : undefined
+          }
+        >
+          {item.badge}
+        </span>
       )}
 
       {/* Le compte exact ne tient pas sur un rail : il devient un point, et se
@@ -571,7 +581,17 @@ function NoeudRail(props: NoeudProps) {
           <div className="sia-sidebar-flyout__title">
             {item.label}
             {item.badge !== undefined && (
-              <span className="sia-sidebar__badge">{item.badge}</span>
+              <span
+                className="sia-sidebar__badge"
+                data-sia-badge={
+                  typeof item.badge === "string" ||
+                  typeof item.badge === "number"
+                    ? String(item.badge)
+                    : undefined
+                }
+              >
+                {item.badge}
+              </span>
             )}
           </div>
 

package/dist/registry/package/components/Sidebar/styles.css

@@ -8,7 +8,7 @@
   font-size: .875rem;
 }
 
-.sia-sidebar__body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: .125rem; align-content: start; }
+.sia-sidebar__body { flex:1; min-height:0; padding-inline-end:.375rem; overflow-y:auto; display:grid; gap:.125rem; align-content:start; scrollbar-gutter:stable; }
 /* Rognés plutôt que débordants : en mode rail, un en-tête ou un pied qui
    n'a pas été adapté déborderait sur le contenu. Le `data-collapsed` posé
    par `AppShell` permet de l'adapter; ceci garantit que ne pas l'adapter
@@ -130,17 +130,7 @@
   padding-block: .375rem;
   font-size: .825rem;
 }
-/* Le filet qui relie les sous-entrées à leur parent. */
 .sia-sidebar__sub { position: relative; }
-.sia-sidebar__sub::before {
-  content: "";
-  position: absolute;
-  top: .375rem;
-  bottom: .375rem;
-  left: 1.25rem;
-  width: 1px;
-  background: var(--sia-border);
-}
 
 /* ── Mode réduit ───────────────────────────────────────────────────────── */
 
@@ -197,8 +187,6 @@
   font-weight: 650;
 }
 .sia-sidebar-flyout__body { display: grid; gap: .125rem; }
-/* Dans le volet, le filet vertical du parent n'a plus de parent à relier. */
-.sia-sidebar-flyout .sia-sidebar__sub::before { display: none; }
 .sia-sidebar-flyout .sia-sidebar__item--child { padding-left: calc(.625rem + var(--sia-sidebar-depth, 1) * .6rem); }
 
 /* ── Variantes ─────────────────────────────────────────────────────────── */

package/dist/registry/package/components/Toggle/styles.css

@@ -63,9 +63,10 @@
   --sia-toggle-color: var(--sia-primary);
   display: inline-flex;
   padding: .2rem;
-  border: 1px solid var(--sia-border);
+  border: 1px solid color-mix(in srgb, var(--sia-muted) 28%, var(--sia-border));
   border-radius: calc(var(--sia-radius) + 2px);
-  background: var(--sia-surface);
+  background: color-mix(in srgb, var(--sia-muted) 12%, var(--sia-background));
+  box-shadow: inset 0 1px 2px rgb(15 23 42 / .05);
 }
 
 .sia-toggle-group__item {

package/dist/registry/styles/sia-ui.css

@@ -144,6 +144,17 @@
   --sia-elevation-modal: 0 24px 60px rgb(15 23 42 / 0.22);
 }
 /* @end:theme */
+/* Scrollbars SIA UI globales : faibles en spécificité, donc surchargeables. */
+:root {
+  --sia-scrollbar-size:.625rem;
+  --sia-scrollbar-thumb:color-mix(in srgb,var(--sia-muted) 52%,transparent);
+  --sia-scrollbar-thumb-hover:color-mix(in srgb,var(--sia-muted) 76%,transparent);
+}
+:where(*) { scrollbar-width:thin; scrollbar-color:var(--sia-scrollbar-thumb) transparent; }
+:where(*)::-webkit-scrollbar { width:var(--sia-scrollbar-size); height:var(--sia-scrollbar-size); }
+:where(*)::-webkit-scrollbar-track,:where(*)::-webkit-scrollbar-corner { background:transparent; }
+:where(*)::-webkit-scrollbar-thumb { min-width:2.5rem; min-height:2.5rem; border:2px solid transparent; border-radius:var(--sia-radius-full,9999px); background:var(--sia-scrollbar-thumb); background-clip:content-box; }
+:where(*)::-webkit-scrollbar-thumb:hover { border:2px solid transparent; background:var(--sia-scrollbar-thumb-hover); background-clip:content-box; }
 .sia-radius--default { border-radius:var(--sia-radius); }
 .sia-radius--none { border-radius:0; }
 .sia-radius--sm { border-radius:.25rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia-ui/cli",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Install SIA UI components progressively into an application.",
   "keywords": [
     "sia-ui",
@@ -39,10 +39,10 @@
     "react-dom": "^19.2.3",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16",
-    "@sia-ui/headless": "0.3.2",
-    "@sia-ui/react": "0.3.2",
-    "@sia-ui/tokens": "0.3.2",
-    "@sia-ui/utils": "0.3.2"
+    "@sia-ui/headless": "0.4.0",
+    "@sia-ui/utils": "0.4.0",
+    "@sia-ui/tokens": "0.4.0",
+    "@sia-ui/react": "0.4.0"
   },
   "scripts": {
     "build": "node scripts/build.mjs",