@zevra/ui 0.43.0 → 0.44.0

package/src/data.css

@@ -198,9 +198,11 @@
   outline-offset: -2px;
 }
 
-/* ⚠️ Ni état sélectionné, ni :focus-within, ni ligne active : la source n'en
- * contient aucun, et les inventer ferait apparaître un fond de plus dans un
- * système qui n'en a que deux (blanc, survol). */
+/* ⚠️ La source ne contient ni état sélectionné, ni :focus-within, ni ligne
+ * active : une liste à LIRE n'en a pas besoin. Une grille qu'on OPÈRE, si :
+ * la ligne cochée (--selected) et la ligne active (--on) sont arbitrées
+ * plus bas, section « Grille de données », HORS RELEVÉ, sans troisième
+ * gris (l'une sur --accent-soft, l'autre sur le fond du survol). */
 
 /* ─── En-tête triable ──────────────────────────────────────────────────
  * ⚠️ HORS RELEVÉ : ajouté le 25/08/2026 avec l'adaptateur TanStack Table.
@@ -1037,8 +1039,8 @@
  * du cadre pendant que les cellules continuent. --zv-cols-somme et
  * --zv-cols-n sont posés par le composant (largeurs choisies par
  * l'utilisateur, pas des valeurs de charte). */
-.zv-table--grille > .zv-table__head,
-.zv-table--grille > .zv-row {
+.zv-table--grille .zv-table__head,
+.zv-table--grille .zv-row {
   min-width: calc(
     var(--zv-cols-somme, 0px) + 2 * var(--zv-grille-pad) +
       (var(--zv-cols-n, 1) - 1) * var(--zv-grille-gap)
@@ -1212,7 +1214,8 @@
 }
 
 .zv-table__head .zv-cell--pin,
-.zv-row:hover .zv-cell--pin {
+.zv-row:hover .zv-cell--pin,
+.zv-row--on .zv-cell--pin {
   --zv-pin-fond: var(--panel);
 }
 
@@ -1229,6 +1232,19 @@
   --zv-pin-fond: var(--accent-soft);
 }
 
+/* ─── Ligne active ──────────────────────────────────────────────────────
+ * La ligne dont on regarde le détail (un aperçu ouvert à côté de la liste).
+ * ⚠️ HORS RELEVÉ, repris de Sunday (24/09/2026), qui le peignait dans son
+ * propre CSS faute de l'avoir ici. Aucun troisième fond : le fond du
+ * survol, et un filet d'accent à gauche. En ombre INTÉRIEURE et non en
+ * bordure : une bordure décalerait toute la rangée de trois pixels au
+ * moment du clic. Distincte de la ligne cochée (--selected), qui est une
+ * sélection pour agir. */
+.zv-row--on {
+  background: var(--panel);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
 /* La case de sélection : centrée dans sa piste, sans troncature. */
 .zv-cell--case {
   display: flex;
@@ -1279,11 +1295,18 @@
   color: var(--accent);
 }
 
-/* La taille de page : le <select> du paquet, à sa largeur de contenu. */
+/* La taille de page : le SelectMenu du paquet, à sa largeur de contenu
+ * (il prend la largeur de son conteneur par défaut). */
 .zv-grille__taille {
   width: auto;
-  padding-block: 5px;
-  font-size: var(--app-sm);
+}
+
+/* La liste d'un filtre à choix : le .zv-menu du paquet, posé dans
+ * l'enveloppe flottante. Il défile au-delà d'une douzaine d'options plutôt
+ * que de couvrir la page. */
+.zv-grille__liste {
+  max-height: min(320px, 60vh);
+  overflow-y: auto;
 }
 
 /* Le résumé d'une plage (nombres, dates) dans la rangée de filtres : un
@@ -1337,6 +1360,74 @@
   padding-inline: 8px;
 }
 
+/* ─── Remplir son parent ────────────────────────────────────────────────
+ * La grille prend la hauteur d'une colonne flex bornée : seules les lignes
+ * défilent. Les intitulés et les filtres sont groupés dans un bloc COLLANT
+ * (.zv-table__haut) : collées une à une, les deux rangées se poseraient au
+ * même endroit et la seconde recouvrirait la première. */
+.zv-grille--remplir {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.zv-table--remplir {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.zv-table__haut {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+/* ─── Densité ───────────────────────────────────────────────────────────
+ * Un tableau secondaire, posé dans une fiche : les rangées se resserrent,
+ * rien d'autre ne change. Dérivé (6 px : la rangée de filtres). */
+.zv-table--dense .zv-row,
+.zv-table--dense .zv-table__head {
+  padding-block: 6px;
+}
+
+/* ─── Rangées qui ne sont pas des lignes ────────────────────────────────
+ * Un intitulé de groupe, une ligne de saisie, un pied de totaux : sur le
+ * fond du survol, et inertes (ni pointeur ni survol). */
+.zv-row--groupe,
+.zv-row--saisie,
+.zv-row--pied {
+  background: var(--panel);
+  cursor: default;
+}
+
+.zv-row--groupe:hover,
+.zv-row--saisie:hover,
+.zv-row--pied:hover {
+  background: var(--panel);
+}
+
+.zv-row--groupe {
+  display: block;
+  padding-block: 6px;
+}
+
+.zv-row--pied {
+  font-weight: 600;
+}
+
+/* Des champs à la hauteur d'une ligne, pas d'un formulaire. */
+.zv-row--saisie .zv-input {
+  padding-block: 5px;
+}
+
+/* Le nombre de lignes d'une valeur, au bout de son option. */
+.zv-grille__compte {
+  margin-left: auto;
+  flex: none;
+}
+
 /* Le pied : compte à gauche, taille de page et sens à droite. */
 .zv-grille__pied {
   display: flex;
@@ -1347,7 +1438,7 @@
 @media (max-width: 767px) {
   /* En cartes, l'épinglage, les poignées et la largeur minimale n'ont plus
    * de sens : la carte prend la largeur de l'écran. */
-  .zv-table--grille > .zv-row {
+  .zv-table--grille .zv-row {
     min-width: 0;
   }