…
) Le contenu (hist, krow, steps, health) est du DOM de vue : la primitive fournit la grille du corps (flex column, gap --space-4) et le style des états ; elle ne réécrit pas les enfants des vues. Règles (02-ANTI-SLOP.md + skill primitive) : - Aucune valeur en dur : uniquement les tokens de tokens.css et de la clé de variation (themes/kindle-shelf.css, échelles sand/bronze sombres). Seuls littéraux tolérés : les durées du spin (0.75 s / 2 s) et les pourcentages/angles structurels du masque — tokens.css ne définit aucune durée d'animation continue ; ajouter un token là-bas se demande, ne se décide pas. - Bordures = box-shadow (jamais de `border` dessinée) : la boîte ne bouge pas et les ombres se combinent. - Focus clavier : le Panel n'est jamais focusable — le focus visible est celui d'un contrôle À L'INTÉRIEUR (:focus-visible descendant, anneau du contrôle lui-même) + la chaîne --borders-base, --borders-focus sur l'enveloppe en :focus-within (couvre aussi le focus programmé du login, focus() après 50 ms). - Désactivé : opacité + clic coupé, drivé par l'attribut ARIA (aria-disabled posé par l'appelant), comme la Card. - Chargement : la place est conservée (visibility:hidden sur le titre, squelettes .panel__sk visibles, min-height figée) → zéro saut de mise en page. Le libellé de statut (spinner + texte) vit dans la sous-ligne, comme #hist-status dans l'app : c'est lui le nom accessible. Contrat : le Panel porte aria-busy + aria-label (le libellé de chargement) UNIQUEMENT dans cet état — retiré au retour au repos. - Erreur : l'anneau --borders-error sur l'enveloppe + un message .panel__error (role="alert") qui dit ce qui s'est passé et quoi faire, jamais une excuse (02-ANTI-SLOP.md « Contenu »). - Espacement : paddings, gap et min-height sur la grille 4px (--space-*). L'espacement ENTRE Panels est posé par le parent (flex column + gap) — jamais de margin-top sur le Panel lui-même. (Les .sk de l'app font 72 px en inline : 72 n'existe pas dans l'échelle fermée --space-* — la primitive ne peut pas le consommer. Ses squelettes .panel__sk font --space-9 = 40 px ; c'est la silhouette de la primitive, pas une réécriture de .sk.) ------------------------------------------------------------------------- DÉCISIONS CONTRAIGNANTES — page specimen kindle-shelf (audit-slop-json.js, un SEUL passage sur la PAGE ENTIÈRE) ------------------------------------------------------------------------- OMBRES (plafond 3, SATURÉ par la primitive Button qui occupe déjà exactement) : 1. --borders-base (repos) 2. --borders-base + --borders-focus (focus clavier) 3. --borders-error (erreur) Le Panel n'en introduit AUCUNE : - repos / désactivé / chargement / vide : --borders-base - focus clavier (.panel:focus-within) : --borders-base, --borders-focus (chaîne — jamais --borders-focus SEUL, ce serait une 4e ombre) - erreur : --borders-error Conséquence documentée : --elevation-card-rest / --elevation-card-hover sont ILLICITES dans la page specimen (valeurs distinctes → ok:false) — c'est la même décision que primitives/card.css. Le Panel n'a donc PAS de SURVOL (il est un regroupement passif, pas un contrôle : rien n'est survolé dans l'app ; le survol des lignes et des boutons est porté par leurs propres primitives KVRow/Badge/Button). Le « lift » n'existe pas — le signal de section vient du fond + du titre, pas d'une ombre de survol. FONDS NON NEUTRES (plafond 3, SATURÉ : bronze-9 + bronze-10 du bouton primaire + red-9 du point .dot.no) : le Panel n'ajoute RIEN — son fond est --bg-subtle (sand-2, neutre), l'anneau de focus est une OMBRE (hors du compteur de fonds). Aucune exception --success-9 n'est nécessaire : kindle-shelf mappe bien --danger-* (échelle Radix red importée par la clé de variation — voir themes/kindle-shelf.css), donc var(--danger-9) / var(--danger-11) se résolvent sans fallback hex. ========================================================================= */ /* --- Enveloppe ------------------------------------------------------------- */ /* Remplace l.200 de l'app : fond --panel + border 1px + rayon 12 + padding 20/22 → fond --bg-subtle + box-shadow --borders-base + rayon --radius-panel + padding --space-6. */ .panel { display: block; /* la structure de l'app est block (.sk grid, .krow flex…) */ min-width: 0; position: relative; /* ancre du libellé de chargement */ background: var(--bg-subtle); color: var(--fg-default); border-radius: var(--radius-panel); box-shadow: var(--borders-base); padding: var(--space-6); transition: background-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } /* --- En-tête --------------------------------------------------------------- Remplace l.201 de l'app (serif 19 / 600). La police du titre est --font-ui (Instrument Sans) : la clé de variation kindle-shelf ne définit pas de --font-serif ; la hiérarchie vient de la taille + la graisse (600, plafond) + l'espace, pas de la famille (02-ANTI-SLOP « hiérarchie »). */ .panel h2 { font-family: var(--font-ui); font-size: var(--text-md); /* 16 px */ line-height: var(--lh-md); font-weight: var(--weight-strong); /* 600 — plafond */ letter-spacing: var(--tracking-normal); color: var(--fg-default); margin: 0 0 var(--space-2); /* 4 px */ } /* Remplace l.202 de l'app (--text-3 13px, margin-bottom 16) : même taille, --fg-muted, espace sur la grille. */ .panel .sub { font-size: var(--text-sm); /* 13 px */ line-height: var(--lh-compact); letter-spacing: var(--tracking-wide); color: var(--fg-muted); max-width: 72ch; margin: 0 0 var(--space-4); /* 16 px */ } /* --- Corps ----------------------------------------------------------------- Grille du corps : stack, l'espacement entre blocs internes est un gap, pas des margins. Les enfants directs gardent leurs margins de vue (l'app pose margin-top inline entre ses panneaux : l.380, l.391) — la primitive n'écrase pas la mise en page existante. */ .panel__body { display: flex; flex-direction: column; gap: var(--space-4); /* 16 px */ min-width: 0; } /* --- État vide --------------------------------------------------------------- « Un écran vide est une invitation à agir, pas une illustration avec Rien à afficher » (02-ANTI-SLOP.md) : le message dit quoi faire. min-height = 2 × --space-9 = 80 px (grille 4) : une place de corps raisonnable, le passage vide ↔ contenu ne saute pas. */ .panel__empty { font-size: var(--text-base); /* 14 px */ line-height: var(--lh-compact); color: var(--fg-muted); max-width: 72ch; min-height: calc(var(--space-9) * 2); /* 80 px — sur la grille */ margin: 0; } /* --- État chargement ----------------------------------------------------------- La place est conservée : le titre est masqué en visibility (pas display:none) ; la sous-ligne porte le libellé de statut (spinner + texte, comme #hist-status dans l'app) et les squelettes .panel__sk restent visibles — silhouette du corps en attente. aria-busy + aria-label (le libellé de chargement) sont posés par l'appelant — le SEUL moment où le Panel porte un aria-label, retiré au retour au repos. min-height = 2 × 40 (squelettes) + 4 (gap) = 84 px, sur la grille : le passage chargement ↔ contenu ne fait pas sauter la vue. */ .panel--loading { min-height: calc(var(--space-9) * 2 + var(--space-2)); /* 84 px */ } .panel--loading h2 { visibility: hidden; } /* Libellé de statut (spinner + texte) : il VIT dans la sous-ligne, comme #hist-status dans l'app («