@ktortu/aaa 0.1.0-beta.0 → 0.9.1

package/fesm2022/ktortu-aaa.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ktortu-aaa.mjs","sources":["../../../../projects/ktortu/aaa/src/public-api.ts","../../../../projects/ktortu/aaa/src/ktortu-aaa.ts"],"sourcesContent":["/*\n * Public API Surface of @ktortu/aaa\n */\nexport * from '@ktortu/aaa/button';\nexport * from '@ktortu/aaa/card';\nexport * from '@ktortu/aaa/cdk';\nexport * from '@ktortu/aaa/dialog';\nexport * from '@ktortu/aaa/forms';\nexport * from '@ktortu/aaa/menu';\nexport * from '@ktortu/aaa/tabs';\nexport * from '@ktortu/aaa/tooltip';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
+{"version":3,"file":"ktortu-aaa.mjs","sources":["../../../../projects/ktortu/aaa/src/public-api.ts","../../../../projects/ktortu/aaa/src/ktortu-aaa.ts"],"sourcesContent":["/*\n * Public API Surface of @ktortu/aaa\n */\nexport * from '@ktortu/aaa/button';\nexport * from '@ktortu/aaa/card';\nexport * from '@ktortu/aaa/cdk';\nexport * from '@ktortu/aaa/dialog';\nexport * from '@ktortu/aaa/forms';\nexport * from '@ktortu/aaa/i18n';\nexport * from '@ktortu/aaa/menu';\nexport * from '@ktortu/aaa/snackbar';\nexport * from '@ktortu/aaa/tabs';\nexport * from '@ktortu/aaa/tooltip';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}

package/forms/checkbox/checkbox-group.css

@@ -21,14 +21,6 @@
     color: var(--field-required-color, var(--kt-danger, #8c1d18));
   }
 
-  /* Disposition des options : pilotable par token (colonne par défaut, ligne possible). */
-  .kt-checkbox-group__options {
-    display: flex;
-    flex-direction: var(--checkbox-group-direction, column);
-    flex-wrap: wrap;
-    gap: var(--checkbox-group-gap, 0.25rem);
-  }
-
   .kt-checkbox-group__hint {
     margin: 0;
     font-size: var(--field-hint-font-size, 0.8125rem);

package/forms/chips/chip-list.css

@@ -52,6 +52,11 @@
   /* Texte réservé aux lecteurs d'écran (live region des retraits). */
   .kt-chip-list__status {
     position: absolute;
+    /* Ancrée au coin de l'hôte : sans `inset`, un `position: absolute` sans ancêtre positionné
+       retombe sur sa position STATIQUE (bas de la liste). Dans un conteneur scrollable, ce 1px
+       atterrit loin dans le document et crée une 2ᵉ barre de défilement fantôme. */
+    inset-block-start: 0;
+    inset-inline-start: 0;
     inline-size: 1px;
     block-size: 1px;
     padding: 0;

package/forms/radio/radio-group.css

@@ -21,14 +21,6 @@
     color: var(--field-required-color, var(--kt-danger, #8c1d18));
   }
 
-  /* Disposition des options : pilotable par token (colonne par défaut, ligne possible). */
-  .kt-radio-group__options {
-    display: flex;
-    flex-direction: var(--radio-group-direction, column);
-    flex-wrap: wrap;
-    gap: var(--radio-group-gap, 0.25rem);
-  }
-
   .kt-radio-group__hint {
     margin: 0;
     font-size: var(--field-hint-font-size, 0.8125rem);

package/forms/styles/field-box.css

@@ -1,9 +1,22 @@
 @layer kt-aaa.components {
-  /* Boîte de contrôle partagée par les champs simples (TextField, NumberField).
+  /* Boîte de contrôle partagée par les champs simples (TextField, NumberField) et la famille
+   Temporal (Date/Time/DateTime/YearMonth/Instant), qui réutilise la même `.kt-field-box`.
    Globale + classes namespacées : partagée entre plusieurs composants, donc non scopable. */
   kt-text-field,
-  kt-number-field {
+  kt-text-area,
+  kt-number-field,
+  kt-date-field,
+  kt-time-field,
+  kt-date-time-field,
+  kt-year-month-field,
+  kt-instant-field,
+  kt-select,
+  kt-multi-select {
     display: block;
+    /* Largeur pilotable d'un coup via --field-width. Défaut `auto` : remplit le conteneur en
+     contexte bloc (formulaire), se dimensionne au contenu en flex. Surcharger sur :root ou un
+     conteneur pour fixer tous les champs (ex. --field-width: 320px). */
+    width: var(--field-width, auto);
   }
 
   .kt-field-box {
@@ -168,4 +181,141 @@
     field-sizing: content;
     resize: vertical;
   }
+
+  /* =========================================================================
+     Apparence OUTLINE (opt-in via [appearance]="'outline'" ou KT_FIELD_CONFIG).
+     Label flottant qui se loge dans la bordure haute de la boîte (façon Material).
+     Rendu GLOBAL (et non dans field.css scopé) car il référence .kt-field-box*,
+     contenu PROJETÉ depuis le composant de champ — inatteignable en CSS scopé.
+     L'apparence par défaut (fill) n'est jamais touchée.
+     ========================================================================= */
+  kt-field[data-appearance='outline'] {
+    position: relative;
+    margin-top: 0.5rem; /* espace pour le label une fois flotté au-dessus de la bordure */
+  }
+
+  /* Le header (label + aide) recouvre la boîte sans réserver de hauteur en flux. */
+  kt-field[data-appearance='outline'] .kt-field__header {
+    position: absolute;
+    inset: 0 0 auto 0;
+    height: var(--field-min-height, 44px);
+    margin: 0;
+    padding-inline: var(--field-padding-x, 0.75rem);
+    z-index: 1;
+    pointer-events: none; /* la boîte/l'input dessous restent cliquables */
+  }
+
+  /* Label au repos = position « placeholder » (centré verticalement dans la boîte). */
+  kt-field[data-appearance='outline'] .kt-field__label {
+    position: absolute;
+    inset-inline-start: var(--field-padding-x, 0.75rem);
+    top: 50%;
+    transform: translateY(-50%);
+    transform-origin: left center;
+    max-width: calc(100% - 2 * var(--field-padding-x, 0.75rem));
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background: transparent;
+    padding-inline: 0.25rem;
+    font-size: var(--field-font-size, 1rem);
+    font-weight: 400;
+    color: var(--field-hint-color, #5f6368);
+    transition:
+      transform 0.15s ease,
+      color 0.15s ease;
+  }
+
+  /* RTL : `transform-origin` n'accepte pas de mot-clé logique → on bascule l'origine de la mise à
+     l'échelle vers le bord de départ (droite en RTL) pour rester aligné sur `inset-inline-start`. */
+  [dir='rtl'] kt-field[data-appearance='outline'] .kt-field__label {
+    transform-origin: right center;
+  }
+
+  /* Bouton d'aide : recliquable et calé à droite du header. */
+  kt-field[data-appearance='outline'] .kt-field__help {
+    margin-inline-start: auto;
+    pointer-events: auto;
+  }
+
+  /* Label flotté — DEUX règles séparées à dessein (dégradation gracieuse) : la 1re (focus / always)
+     reste valide même si le moteur ne supporte pas `:has()`. Une seule pseudo-classe inconnue dans une
+     liste de sélecteurs invaliderait TOUTE la liste → le label ne flotterait jamais, focus compris.
+     La 2nde ajoute les cas qui exigent `:has()` (input rempli, select `[data-filled]`). Les inputs
+     date/heure n'ayant pas de placeholder CSS, `:not(:placeholder-shown)` les garde flottés en permanence. */
+  kt-field[data-appearance='outline'][data-float-label='always'] .kt-field__label,
+  kt-field[data-appearance='outline']:focus-within .kt-field__label {
+    transform: translateY(-50%) translateY(calc(var(--field-min-height, 44px) / -2)) scale(0.75);
+    color: var(--field-label-color, inherit);
+    /* Fond du label flotté : masque la ligne d'outline sous le label. Défaut : fond PLEIN du champ.
+       Le consommateur peut poser un gradient (ex. `linear-gradient(transparent 50%, var(--field-bg) 50%)`)
+       via le token --field-label-float-bg. */
+    background: var(--field-label-float-bg, var(--field-bg, #fff));
+  }
+  kt-field[data-appearance='outline']:has(.kt-field-box[data-filled]) .kt-field__label,
+  kt-field[data-appearance='outline']:has(.kt-field-box__input:not(:placeholder-shown)) .kt-field__label {
+    transform: translateY(-50%) translateY(calc(var(--field-min-height, 44px) / -2)) scale(0.75);
+    color: var(--field-label-color, inherit);
+    background: var(--field-label-float-bg, var(--field-bg, #fff));
+  }
+
+  /* Bordure de l'outline : token dédié (état de repos). Surcharge possible indépendamment du
+     mode `fill`. Les états hover/focus/invalid gardent leurs propres tokens (réaffirmés ici
+     pour rester prioritaires sur la règle de repos). */
+  kt-field[data-appearance='outline'] .kt-field-box {
+    border-color: var(--field-outline-border-color, var(--field-border-color, #c4c7c5));
+  }
+  kt-field[data-appearance='outline'] .kt-field-box:hover {
+    border-color: var(--field-border-color-hover, #5f6368);
+  }
+  kt-field[data-appearance='outline'] .kt-field-box:focus-within {
+    border-color: var(--field-border-color-focus, #0b57d0);
+  }
+  kt-field[data-appearance='outline'] .kt-field-box[data-invalid] {
+    border-color: var(--field-error-color, #b3261e);
+  }
+
+  /* En outline AUTO, le label flottant tient lieu de placeholder au repos : on masque le placeholder
+     propre du select (sinon doublon avec le label en position « placeholder »). En ALWAYS, le label
+     est déjà en haut → on laisse le placeholder du select s'afficher. */
+  kt-field[data-appearance='outline']:not([data-float-label='always']) .kt-select__placeholder {
+    visibility: hidden;
+  }
+
+  /* En outline, le placeholder natif ne s'affiche QUE lorsque le label flotte : au repos le label
+     tient lieu de placeholder (sinon les deux se superposeraient). Masqué par défaut, révélé au
+     focus ou en floatLabel='always'. (Quand le champ est rempli, le navigateur ne le rend pas.) */
+  kt-field[data-appearance='outline'] .kt-field-box__input::placeholder {
+    color: transparent;
+  }
+  kt-field[data-appearance='outline']:focus-within .kt-field-box__input::placeholder,
+  kt-field[data-appearance='outline'][data-float-label='always'] .kt-field-box__input::placeholder {
+    color: var(--field-placeholder-color, var(--field-hint-color, #5f6368));
+  }
+
+  /* Accent au focus / état d'erreur. */
+  kt-field[data-appearance='outline']:focus-within .kt-field__label {
+    color: var(--field-border-color-focus, #0b57d0);
+  }
+  kt-field[data-appearance='outline']:has(.kt-field-box[data-invalid]) .kt-field__label {
+    color: var(--field-error-color, #b3261e);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    kt-field[data-appearance='outline'] .kt-field__label {
+      transition: none;
+    }
+  }
+
+  /* Contraste forcé (Windows High Contrast) : le fond du label flotté masque la bordure ; un gradient
+     custom `--field-label-float-bg` serait ignoré → on force une couleur système opaque pour garantir
+     le « notch ». Au repos le label est transparent (non listé), donc rien à forcer. */
+  @media (forced-colors: active) {
+    kt-field[data-appearance='outline'][data-float-label='always'] .kt-field__label,
+    kt-field[data-appearance='outline']:focus-within .kt-field__label,
+    kt-field[data-appearance='outline']:has(.kt-field-box[data-filled]) .kt-field__label,
+    kt-field[data-appearance='outline']:has(.kt-field-box__input:not(:placeholder-shown)) .kt-field__label {
+      background: Canvas;
+    }
+  }
 }

package/forms/styles/field-pending.css

@@ -0,0 +1,46 @@
+@layer kt-aaa.components {
+  /* Spinner « validation asynchrone en cours » par défaut.
+
+     100 % CSS (pseudo-élément, aucun markup) et piloté par l'attribut `[data-pending]` posé par les
+     contrôles quand leur input `pending` est vrai (l'accessibilité passe par `aria-busy`, indépendant).
+
+     Entièrement surchargeable / suppressible côté consommateur :
+       - retailler/recolorer via les tokens `--field-spinner-*` ;
+       - supprimer :  kt-text-field .kt-field-box[data-pending]::after { content: none; }
+       - remplacer par sa propre affordance (le hook `[data-pending]` reste disponible). */
+  @keyframes kt-field-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  .kt-field-box[data-pending]::after,
+  .kt-switch-field[data-pending] .kt-switch-row::after,
+  .kt-checkbox-field[data-pending] .kt-checkbox::after,
+  .kt-radio-group-field[data-pending] .kt-radio-group__legend::after,
+  .kt-checkbox-group-field[data-pending] .kt-checkbox-group__legend::after {
+    content: '';
+    display: inline-block;
+    flex: none;
+    vertical-align: middle;
+    inline-size: var(--field-spinner-size, 1em);
+    block-size: var(--field-spinner-size, 1em);
+    margin-inline-start: var(--field-spinner-gap, 0.5rem);
+    border: var(--field-spinner-width, 2px) solid var(--field-spinner-track, currentColor);
+    border-top-color: var(--field-spinner-color, var(--field-border-color-focus, #1a73e8));
+    border-radius: 50%;
+    opacity: var(--field-spinner-opacity, 0.7);
+    animation: kt-field-spin var(--field-spinner-duration, 0.7s) linear infinite;
+  }
+
+  /* Respect de prefers-reduced-motion : on fige la rotation (le cercle reste visible comme indicateur). */
+  @media (prefers-reduced-motion: reduce) {
+    .kt-field-box[data-pending]::after,
+    .kt-switch-field[data-pending] .kt-switch-row::after,
+    .kt-checkbox-field[data-pending] .kt-checkbox::after,
+    .kt-radio-group-field[data-pending] .kt-radio-group__legend::after,
+    .kt-checkbox-group-field[data-pending] .kt-checkbox-group__legend::after {
+      animation: none;
+    }
+  }
+}

package/forms/styles/select-panel.css

@@ -178,6 +178,10 @@
   /* Texte réservé aux lecteurs d'écran (live region du nombre de résultats). */
   .kt-select__sr-only {
     position: absolute;
+    /* Ancrée au coin : sinon ce 1px `absolute` retombe sur sa position statique et, dans un
+       conteneur scrollable, étire le document → barre de défilement fantôme. */
+    inset-block-start: 0;
+    inset-inline-start: 0;
     inline-size: 1px;
     block-size: 1px;
     padding: 0;

package/forms/styles/tokens.css

@@ -35,6 +35,9 @@
     --field-padding-y: 0.5rem;
     --field-gap: 0.375rem;
     --field-control-gap: 0.5rem;
+    /* Largeur du champ : un seul réglage pilote tous les champs. Défaut `auto` (remplit le
+     conteneur en bloc, se dimensionne au contenu en flex). Ex. global : --field-width: 320px. */
+    --field-width: auto;
 
     /* Typo */
     --field-font-size: var(--kt-control-font);

package/menu/menu.css

@@ -42,8 +42,11 @@
     [ktMenu] {
       position: fixed;
       inset: auto;
-      inset-block-start: anchor(block-end);
-      inset-inline-start: anchor(inline-start);
+      /* Dropdown sous le déclencheur, aligné sur son bord inline-start. On utilise `position-area`
+         et NON la fonction `anchor()` : `anchor()` résout mal une ancre imbriquée dans un sous-arbre
+         déjà ancré → les sous-menus s'EMPILENT dès le 3ᵉ niveau. `position-area` cascade correctement
+         à n'importe quelle profondeur (validé Chrome 125+ / Firefox 147+ / Safari 26+). */
+      position-area: block-end span-inline-end;
       margin-block-start: var(--kt-menu-offset, 0.25rem);
       /* Bascule de côté / au-dessus si le bas/droite manque de place. */
       position-try-fallbacks:
@@ -61,8 +64,9 @@
       --_submenu-offset: calc(
         var(--kt-menu-padding, 0.25rem) + var(--kt-menu-border-width, 1px) + var(--kt-menu-submenu-gap, 0.375rem)
       );
-      inset-block-start: anchor(block-start);
-      inset-inline-start: anchor(inline-end);
+      /* À l'inline-end de l'item parent, aligné sur son haut. `position-area` (et non `anchor()`)
+         pour cascader correctement à toute profondeur — cf. note sur le menu racine ci-dessus. */
+      position-area: inline-end span-block-end;
       margin-block-start: 0;
       margin-inline-start: var(--_submenu-offset);
       position-try-fallbacks:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktortu/aaa",
-  "version": "0.1.0-beta.0",
+  "version": "0.9.1",
   "description": "Bibliothèque de composants Angular headless + thémés par tokens CSS.",
   "keywords": [
     "angular",
@@ -77,10 +77,18 @@
       "types": "./types/ktortu-aaa-forms.d.ts",
       "default": "./fesm2022/ktortu-aaa-forms.mjs"
     },
+    "./i18n": {
+      "types": "./types/ktortu-aaa-i18n.d.ts",
+      "default": "./fesm2022/ktortu-aaa-i18n.mjs"
+    },
     "./menu": {
       "types": "./types/ktortu-aaa-menu.d.ts",
       "default": "./fesm2022/ktortu-aaa-menu.mjs"
     },
+    "./snackbar": {
+      "types": "./types/ktortu-aaa-snackbar.d.ts",
+      "default": "./fesm2022/ktortu-aaa-snackbar.mjs"
+    },
     "./tabs": {
       "types": "./types/ktortu-aaa-tabs.d.ts",
       "default": "./fesm2022/ktortu-aaa-tabs.mjs"

package/snackbar/snackbar-tokens.css

@@ -0,0 +1,53 @@
+/* Design tokens de la snackbar (service KtSnackbar) — contrat public de theming.
+
+   PRINCIPE (identique au reste de la lib) : tout DÉRIVE du socle --kt-*. Surcharger un --kt-*
+   rethématise la snackbar en même temps que les champs, boutons et dialog. Chaque valeur reste
+   surchargeable en redéclarant son token --snackbar-* (sur :root ou un conteneur de spécificité ≥).
+
+   La snackbar est posée sur une « surface inversée » (fond sombre, texte clair) façon Material —
+   d'où des on-* dérivés de --kt-on-surface / --kt-surface, qui suivent automatiquement un thème.
+   Les variantes ne recolorisent PAS la pastille (le texte reste à contraste AAA) : elles ne pilotent
+   que l'accent + l'icône. Un thème qui veut des pastilles pleinement colorées surcharge simplement
+   --snackbar-bg / --snackbar-fg sous [data-variant='…']. */
+@layer kt-aaa.tokens {
+  :root {
+    /* Surface inversée : fond ~ on-surface, texte ~ surface (contraste ≈ 16:1 → AAA 1.4.6). */
+    --snackbar-bg: color-mix(in oklab, var(--kt-on-surface, #1f1f1f) 92%, var(--kt-surface, #ffffff));
+    --snackbar-fg: var(--kt-surface, #ffffff);
+
+    --snackbar-radius: var(--kt-control-radius, 8px);
+    --snackbar-shadow: 0 4px 12px rgb(0 0 0 / 24%);
+
+    /* Géométrie interne */
+    --snackbar-padding-block: 0.625rem;
+    --snackbar-padding-inline: 1rem;
+    --snackbar-gap: 0.75rem;
+    --snackbar-font: var(--kt-control-font, 1rem);
+
+    /* Placement : distance au bord du viewport, avec marge de sécurité mobile (encoches / barres). */
+    --snackbar-offset: 16px;
+    --snackbar-offset-bottom: calc(var(--snackbar-offset) + env(safe-area-inset-bottom, 0px));
+    --snackbar-offset-top: calc(var(--snackbar-offset) + env(safe-area-inset-top, 0px));
+    --snackbar-max-inline-size: 560px;
+
+    /* Bouton de fermeture : cible 44px (AAA 2.5.5). */
+    --snackbar-close-size: var(--kt-control-height, 44px);
+    --snackbar-close-icon-size: 1rem;
+
+    /* Variantes : accent (icône) clair pour contraster sur la pastille sombre (≥ 3:1), et glyphe
+       (ligature de la police d'icônes --kt-icon-font). Couleur + FORME : la forme distincte est
+       l'indice non coloré (WCAG 1.4.1). Surchargez accent/glyphe pour rebrander une variante. */
+    --snackbar-icon-size: 1.25rem;
+    --snackbar-accent-info: #8ab4f8;
+    --snackbar-accent-success: #81c995;
+    --snackbar-accent-warning: #fdd663;
+    --snackbar-accent-error: #f28b82;
+    --snackbar-glyph-info: 'info';
+    --snackbar-glyph-success: 'check_circle';
+    --snackbar-glyph-warning: 'warning';
+    --snackbar-glyph-error: 'error';
+
+    /* Animation d'entrée/sortie. Token de durée surchargeable ; neutralisée en prefers-reduced-motion. */
+    --snackbar-anim-duration: 150ms;
+  }
+}

package/snackbar/snackbar.css

@@ -0,0 +1,175 @@
+@layer kt-aaa.components {
+  /* Styles de la snackbar (conteneur monté dans un overlay CDK).
+     Global : l'élément est ajouté hors de toute vue (overlay top-layer).
+     Tokens (--snackbar-*) définis dans snackbar-tokens.css (chargé avant ce fichier).
+
+     Requiert côté hôte : '@angular/cdk/overlay-prebuilt.css' (positionnement de l'overlay) ET
+     '@angular/cdk/a11y-prebuilt.css' (masque l'élément du LiveAnnouncer qui porte l'annonce). */
+
+  /* Le pane d'overlay ne capte pas les clics hors de la snackbar (feedback NON bloquant). */
+  .kt-snackbar-pane {
+    pointer-events: none;
+    max-inline-size: 100vw;
+  }
+
+  .kt-snackbar {
+    pointer-events: auto; /* la snackbar elle-même reste survolable / cliquable */
+    display: flex;
+    align-items: center;
+    gap: var(--snackbar-gap);
+    box-sizing: border-box;
+
+    margin: var(--snackbar-offset);
+    inline-size: max-content;
+    max-inline-size: min(var(--snackbar-max-inline-size), 100vw - 2 * var(--snackbar-offset));
+
+    padding-block: var(--snackbar-padding-block);
+    padding-inline: var(--snackbar-padding-inline);
+
+    border-radius: var(--snackbar-radius);
+    background: var(--snackbar-bg);
+    color: var(--snackbar-fg);
+    box-shadow: var(--snackbar-shadow);
+
+    font-size: var(--snackbar-font);
+    line-height: 1.4;
+  }
+
+  /* Marge de sécurité mobile (encoches / barres système) selon le bord d'ancrage. */
+  .kt-snackbar-pane--bottom .kt-snackbar {
+    margin-block-end: var(--snackbar-offset-bottom);
+  }
+  .kt-snackbar-pane--top .kt-snackbar {
+    margin-block-start: var(--snackbar-offset-top);
+  }
+
+  .kt-snackbar__message {
+    flex: 1 1 auto;
+    min-inline-size: 0; /* autorise le retour à la ligne d'un message long */
+  }
+
+  /* ============ ICÔNE DE VARIANTE (décorative, aria-hidden) ============ */
+  /* Couleur = accent de la variante ; glyphe = ligature de la police d'icônes (comme [ktButton]).
+     Si la police d'icônes est absente, la ligature dégrade en texte (même comportement que le bouton). */
+  .kt-snackbar__icon {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    color: var(--snackbar-accent, currentColor);
+  }
+  .kt-snackbar__icon::before {
+    content: var(--snackbar-glyph, '');
+    font-family: var(--kt-icon-font, 'Material Symbols Outlined');
+    font-weight: var(--kt-icon-font-weight, normal);
+    font-style: normal;
+    font-size: var(--snackbar-icon-size, 1.25rem);
+    line-height: 1;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Mapping variante → accent + glyphe (un thème surcharge accent/glyphe, ou bg/fg pour recolorer). */
+  .kt-snackbar[data-variant='info'] {
+    --snackbar-accent: var(--snackbar-accent-info);
+    --snackbar-glyph: var(--snackbar-glyph-info);
+  }
+  .kt-snackbar[data-variant='success'] {
+    --snackbar-accent: var(--snackbar-accent-success);
+    --snackbar-glyph: var(--snackbar-glyph-success);
+  }
+  .kt-snackbar[data-variant='warning'] {
+    --snackbar-accent: var(--snackbar-accent-warning);
+    --snackbar-glyph: var(--snackbar-glyph-warning);
+  }
+  .kt-snackbar[data-variant='error'] {
+    --snackbar-accent: var(--snackbar-accent-error);
+    --snackbar-glyph: var(--snackbar-glyph-error);
+  }
+
+  /* ============ BOUTON DE FERMETURE ============ */
+  /* Cible 44px, croix dessinée en CSS (zéro dépendance à une police d'icônes). */
+  .kt-snackbar__close {
+    position: relative;
+    flex: none;
+    inline-size: var(--snackbar-close-size);
+    block-size: var(--snackbar-close-size);
+    /* compense optiquement le padding inline du conteneur, sans réduire la cible de 44px */
+    margin-inline-end: calc(-0.5 * var(--snackbar-padding-inline));
+
+    display: inline-grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .kt-snackbar__close::before,
+  .kt-snackbar__close::after {
+    content: '';
+    position: absolute;
+    inline-size: var(--snackbar-close-icon-size);
+    block-size: 2px;
+    border-radius: 2px;
+    background: currentColor;
+    translate: 0 0;
+  }
+  .kt-snackbar__close::before {
+    rotate: 45deg;
+  }
+  .kt-snackbar__close::after {
+    rotate: -45deg;
+  }
+
+  .kt-snackbar__close:hover {
+    background: color-mix(in srgb, currentColor 14%, transparent);
+  }
+  .kt-snackbar__close:focus-visible {
+    outline: var(--kt-focus-ring-width, 2px) solid currentColor;
+    outline-offset: 2px;
+  }
+
+  /* ============ ANIMATION D'ENTRÉE / SORTIE ============ */
+  /* Entrée par keyframe (glissement depuis le bord), sortie par transition (classe --leaving).
+     Toutes deux sont activées UNIQUEMENT hors prefers-reduced-motion → en reduced-motion la durée
+     de transition est nulle, donc playExit() démonte instantanément (WCAG 2.3.3). */
+  @media (prefers-reduced-motion: no-preference) {
+    .kt-snackbar {
+      transition:
+        opacity var(--snackbar-anim-duration) ease,
+        translate var(--snackbar-anim-duration) ease;
+    }
+    .kt-snackbar-pane--bottom .kt-snackbar {
+      animation: kt-snackbar-in-bottom var(--snackbar-anim-duration) ease-out;
+    }
+    .kt-snackbar-pane--top .kt-snackbar {
+      animation: kt-snackbar-in-top var(--snackbar-anim-duration) ease-out;
+    }
+
+    /* Sortie : on fond + on glisse vers le bord d'ancrage. */
+    .kt-snackbar--leaving {
+      opacity: 0;
+    }
+    .kt-snackbar-pane--bottom .kt-snackbar--leaving {
+      translate: 0 100%;
+    }
+    .kt-snackbar-pane--top .kt-snackbar--leaving {
+      translate: 0 -100%;
+    }
+  }
+
+  @keyframes kt-snackbar-in-bottom {
+    from {
+      opacity: 0;
+      translate: 0 100%;
+    }
+  }
+  @keyframes kt-snackbar-in-top {
+    from {
+      opacity: 0;
+      translate: 0 -100%;
+    }
+  }
+}

package/styles/forms.css

@@ -6,6 +6,7 @@
 @import '../forms/styles/tokens.css';
 @import '../forms/chips/tokens.css';
 @import '../forms/styles/field-box.css';
+@import '../forms/styles/field-pending.css';
 @import '../forms/switch/switch.css';
 @import '../forms/checkbox/checkbox.css';
 @import '../forms/checkbox/checkbox-group.css';

package/styles/snackbar.css

@@ -0,0 +1,9 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Snackbar (service KtSnackbar, overlay CDK). Nécessite le socle (@ktortu/aaa/foundation.css),
+   ET côté hôte l'overlay CDK + le masquage du LiveAnnouncer :
+     @import '@angular/cdk/overlay-prebuilt.css';
+     @import '@angular/cdk/a11y-prebuilt.css';
+     @import '@ktortu/aaa/snackbar.css'; */
+@import '../snackbar/snackbar-tokens.css';
+@import '../snackbar/snackbar.css';

package/styles/styles.css

@@ -22,3 +22,4 @@
 @import './tooltip.css';
 @import './dialog.css';
 @import './menu.css';
+@import './snackbar.css';