@zevra/ui 0.51.1 → 0.53.0

package/react/forms.tsx

@@ -235,16 +235,26 @@ export interface SwitchProps
   /** Libellé accolé : c'est lui qui porte le sens, la piste seule ne dit pas
    *  ce qui est activé. */
   texte?: ReactNode
+  /** Valeur IMPOSÉE, qui doit rester lisible : piste pâle, cadenas, aucun
+   *  clic. À ne pas confondre avec `disabled` (momentanément indisponible,
+   *  le contrôle s'efface). Voir DECISIONS, 03/11/2026. */
+  verrouille?: boolean
+  /** Pourquoi c'est verrouillé (« Toujours inclus », « Fixé par
+   *  l'administrateur ») : infobulle native et annonce au lecteur d'écran. */
+  motif?: string
   className?: string
 }
 
-export function Switch({ on, texte, className, ...reste }: SwitchProps) {
+export function Switch({ on, texte, verrouille, motif, className, disabled, title, ...reste }: SwitchProps) {
   return (
     <button
       type="button"
       role="switch"
       aria-checked={on}
-      className={cx('zv-switch-hit', className)}
+      disabled={disabled || verrouille}
+      title={title ?? (verrouille ? motif : undefined)}
+      aria-description={verrouille ? motif : undefined}
+      className={cx('zv-switch-hit', verrouille && 'zv-switch-hit--verrouille', className)}
       {...reste}
     >
       <span className={cx('zv-switch', on && 'zv-switch--on')}>
@@ -253,6 +263,7 @@ export function Switch({ on, texte, className, ...reste }: SwitchProps) {
       {texte && (
         <span className={cx('zv-switch__text', on && 'zv-switch__text--on')}>{texte}</span>
       )}
+      {verrouille && <Icon nom="cadenas" taille="sm" className="zv-switch__cadenas" />}
     </button>
   )
 }

package/src/forms.css

@@ -674,6 +674,55 @@
   color: var(--accent);
 }
 
+/* Désactivé et verrouillé (DECISIONS, 03/11/2026). HORS RELEVÉ.
+ * Désactivé : momentanément indisponible, le contrôle s'efface. */
+.zv-switch-hit:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.zv-switch-hit:disabled:hover .zv-switch {
+  border-color: var(--line);
+}
+
+.zv-switch-hit:disabled:hover .zv-switch--on {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+/* Verrouillé : la valeur est imposée et reste lisible. Pas d'effacement,
+ * pas de curseur interdit (ce n'est pas une faute) ; une piste pâle et un
+ * cadenas disent qu'on ne la change pas d'ici. */
+.zv-switch-hit--verrouille,
+.zv-switch-hit--verrouille:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
+.zv-switch-hit--verrouille .zv-switch,
+.zv-switch-hit--verrouille:hover .zv-switch {
+  border-color: var(--line);
+  background: var(--paper);
+}
+
+.zv-switch-hit--verrouille .zv-switch__knob {
+  background: var(--line);
+}
+
+.zv-switch-hit--verrouille .zv-switch--on,
+.zv-switch-hit--verrouille:hover .zv-switch--on {
+  border-color: var(--accent-line);
+  background: var(--accent-soft);
+}
+
+.zv-switch-hit--verrouille .zv-switch--on .zv-switch__knob {
+  background: var(--accent-line);
+}
+
+.zv-switch__cadenas {
+  color: var(--label);
+}
+
 /* ─── Curseur ───────────────────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Aucune source ; dérivé de
  * l'interrupteur redessiné : bouton CARRÉ de 14 px (la taille exacte du

package/src/navigation.css

@@ -70,7 +70,8 @@
 
 .zv-sidebar {
   display: flex;
-  width: 224px;
+  /* Une constante, réglable par l'app (`--sidebar-w`, 03/11/2026). */
+  width: var(--sidebar-w);
   /* Sans `flex: none`, une entrée de nav un peu longue élargit la colonne et
    * décale le contenu : la largeur est une constante, pas un résultat. */
   flex: none;

package/src/tokens.css

@@ -145,6 +145,9 @@
   /* Mesures */
   --tap: 40px;      /* cible tactile minimale, sous le point de rupture */
   --topbar-h: 52px; /* hauteur de la barre supérieure applicative */
+  /* Largeur de la colonne de navigation applicative (DECISIONS, 03/11/2026) :
+   * 224 px relevés, réglable par une app dont les libellés sont plus longs. */
+  --sidebar-w: 224px;
 
   /* Ombre de menu déroulant : la seule surface qui flotte au-dessus du
    * contenu sans être une carte ; ni --shadow-card ni --shadow-panel ne

package/tokens/index.js

@@ -106,6 +106,8 @@ export const tailles = {
 export const mesures = {
   tap: '40px',
   topbarH: '52px',
+  /** Largeur de la colonne de navigation : réglable par l'app (03/11/2026). */
+  sidebarW: '224px',
   specFilet: '56px',
   /* Largeur de page : au-delà, les enveloppes se centrent (0.12.4). */
   pageMax: '1440px',