@ktortu/aaa 0.9.7 → 0.9.8

package/forms/multi-select/multi-select.css

@@ -1,58 +1,8 @@
 @layer kt-aaa.components {
   /* Styles SPÉCIFIQUES au multi-select. Tout le panneau commun (trigger, popup, listbox, options,
-   filtre, bottom-sheet mobile) vient de ../styles/select-panel.css, chargé en premier via
-   styleUrls — ici uniquement : croix « tout effacer », barre d'actions, compteur, checkboxes
-   d'option et chips révocables. */
-
-  /* Réserve la place de la croix (sibling absolu) : sur le TEXTE, pas sur le padding du
-   trigger — la flèche reste collée au bord, la croix se glisse entre texte et flèche. */
-  .kt-select__trigger--clearable .kt-select__value {
-    margin-inline-end: 2rem;
-  }
-
-  /* Tout effacer : entre le texte et la flèche, disposition standard « texte … ✕ ▾ ».
-   24px visibles ; cible étendue à 44px via ::after transparent (AAA). */
-  .kt-select__clear {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-end: 2.5rem;
-    translate: 0 -50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: 24px;
-    block-size: 24px;
-    padding: 0;
-    border: 0;
-    border-radius: 50%;
-    background: transparent;
-    color: var(--field-icon-color, #5f6368);
-    cursor: pointer;
-  }
-
-  .kt-select__clear::after {
-    content: '';
-    position: absolute;
-    inset: -10px;
-  }
-
-  .kt-select__clear:hover {
-    background-color: color-mix(in srgb, currentColor 12%, transparent);
-    color: var(--field-color, inherit);
-  }
-
-  .kt-select__clear:focus-visible {
-    outline: 2px solid var(--field-border-color-focus, #0b57d0);
-    outline-offset: 1px;
-  }
-
-  .kt-select__clear-icon {
-    font-family: 'Material Symbols Outlined';
-    font-feature-settings: 'liga';
-    font-size: 1.25rem;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-  }
+   filtre, bottom-sheet mobile, croix « effacer ») vient de ../styles/select-panel.css, chargé en
+   premier via styleUrls — ici uniquement : barre d'actions, compteur, checkboxes d'option et
+   chips révocables. */
 
   /* Barre d'actions de masse (Tout sélectionner / Tout effacer) en tête de panneau. */
   .kt-select__actions {

package/forms/styles/select-panel.css

@@ -11,7 +11,8 @@
     --select-popup-enter-animation (défaut : none — entrée du dropdown desktop ; keyframes de
     thème limitées à transform/opacity/filter, le popup est ancré : ne pas animer la position),
     --kt-sheet-anim-duration (défaut : 120ms — glissement + scrim de la bottom-sheet mobile).
-   Les règles spécifiques au multi (chips, clear, actions, checkbox) vivent dans multi-select.css. */
+   Les règles spécifiques au multi (chips, actions de masse, compteur, checkbox) vivent dans
+   multi-select.css. La croix « effacer » (clearable) est PARTAGÉE (single + multi) : elle est ici. */
   :host {
     display: block;
   }
@@ -67,6 +68,57 @@
     transform: rotate(180deg);
   }
 
+  /* ===== Croix « effacer » (clearable) — PARTAGÉE single + multi ===== */
+  /* Réserve la place de la croix (sibling absolu) : sur le TEXTE, pas sur le padding du trigger —
+   la flèche reste collée au bord, la croix se glisse entre texte et flèche. */
+  .kt-select__trigger--clearable .kt-select__value {
+    margin-inline-end: 2rem;
+  }
+
+  /* Effacer : entre le texte et la flèche, disposition standard « texte … ✕ ▾ ».
+   24px visibles ; cible étendue à 44px via ::after transparent (AAA). */
+  .kt-select__clear {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 2.5rem;
+    translate: 0 -50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--field-icon-color, #5f6368);
+    cursor: pointer;
+  }
+
+  .kt-select__clear::after {
+    content: '';
+    position: absolute;
+    inset: -10px;
+  }
+
+  .kt-select__clear:hover {
+    background-color: color-mix(in srgb, currentColor 12%, transparent);
+    color: var(--field-color, inherit);
+  }
+
+  .kt-select__clear:focus-visible {
+    outline: 2px solid var(--field-border-color-focus, #0b57d0);
+    outline-offset: 1px;
+  }
+
+  .kt-select__clear-icon {
+    font-family: 'Material Symbols Outlined';
+    font-feature-settings: 'liga';
+    font-size: 1.25rem;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+
   /* Conteneur popover (div). Affiché en top-layer via le Popover API.
    border-box pour aligner la largeur sur le trigger. */
   .kt-select__popup {
@@ -225,7 +277,10 @@
   /* ===== ÉCRAN COMPACT : bottom-sheet (même Popover, restylé) =====
    Pilotée par la CLASSE `kt-select__popup--sheet` posée en JS par le composant (signal
    `KtViewport.isCompact()`) — et NON par un `@media` : le seuil est configurable par appli
-   (`provideKtBreakpoints`), source unique JS qui pilote aussi ce style. */
+   (`provideKtBreakpoints`), source unique JS qui pilote aussi ce style.
+   ADR-0005 : le popup est un SCROLLER à snap — spacer (un écran, snap « fermé ») puis carte
+   (snap « ouvert » en bas). Le drag-to-dismiss « attrapable partout » et l'arbitrage avec la
+   listbox interne sont NATIFS (latching) ; l'entrée/sortie = scrolls programmatiques (JS). */
   .kt-select__popup--sheet {
     position: fixed !important;
     inset: 0 !important;
@@ -241,10 +296,22 @@
     background: transparent !important;
     box-shadow: none !important;
     border-radius: 0 !important;
-    overflow: visible !important;
-    display: flex;
-    flex-direction: column !important;
-    justify-content: flex-end !important;
+    display: block;
+    overflow-y: auto !important;
+    scroll-snap-type: y mandatory;
+    /* Pas de scroll chaining vers le fond (le body est déjà verrouillé — ceinture et bretelles). */
+    overscroll-behavior: contain;
+    /* Le scroller EST le geste : pas de barre de défilement visible sur l'overlay. */
+    scrollbar-width: none;
+  }
+
+  /* Spacer de dismiss : un écran entier au-dessus de la carte. Sous le scrim (z-index 1) :
+   les clics l'atteignent (fermeture), les gestes tactiles remontent au scroller (drag depuis
+   le scrim, façon Instagram). */
+  .kt-select__popup--sheet .kt-select__sheet-spacer {
+    block-size: 100%;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
   }
 
   .kt-select__popup--sheet .kt-select__sheet-card {
@@ -258,11 +325,10 @@
     max-block-size: var(--kt-sheet-max-block-size, 85svh);
     width: 100%;
     overflow: hidden;
-    /* Position de repos. L'entrée (glissement du bas) est jouée par la keyframe PARTAGÉE kt-sheet-in
-     sur :popover-open (cf. plus bas), comme le mode `sheet` du Dialog. La transition translate ne
-     sert qu'au snap-back du drag-to-dismiss. */
-    translate: 0 0;
-    transition: translate var(--kt-sheet-anim-duration, 120ms) ease;
+    /* Snap « ouvert » : bord bas de la carte aligné au bas du viewport. L'entrée (glissement
+     du bas) est le scroll programmatique d'ouverture — plus de keyframe kt-sheet-in ici. */
+    scroll-snap-align: end;
+    scroll-snap-stop: always;
   }
 
   /* Sheet FILTRABLE : hauteur STABLE (et non « au contenu plafonné »). Sans ça, filtrer raccourcit
@@ -273,24 +339,6 @@
     max-block-size: var(--kt-sheet-max-block-size, 85svh);
   }
 
-  .kt-select__popup--sheet:popover-open .kt-select__sheet-card {
-    translate: 0 0;
-    /* Entrée : glissement du bas (keyframe PARTAGÉE kt-sheet-in). */
-    animation: var(--select-sheet-enter-animation, kt-sheet-in var(--kt-sheet-anim-duration, 120ms) ease);
-  }
-
-  /* Pendant le drag : la feuille suit le doigt (translate posé en inline), sans transition. */
-  .kt-select__popup--sheet .kt-select__sheet-card.kt-select__popup--dragging {
-    transition: none;
-  }
-
-  /* Pendant la fermeture déclenchée par JS */
-  .kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-card,
-  .kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-card {
-    translate: 0 100%;
-    transition: translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
   /* Masquer le backdrop popover natif car pointer-events: none y est forcé par le navigateur */
   ::ng-deep .kt-select__popup--sheet::backdrop {
     display: none !important;
@@ -344,27 +392,20 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .kt-select__popup--sheet .kt-select__sheet-card,
     .kt-select__popup--sheet .kt-select__sheet-scrim {
       transition: none;
-      translate: 0 0;
     }
   }
 
-  /* Poignée de drag (téléphone) : barre centrée, zone de préhension confortable. `touch-action: none`
-   pour que le geste de glissement ne déclenche pas le scroll de la page. aria-hidden (décoratif). */
+  /* Poignée DÉCORATIVE (ADR-0005) : simple affordance visuelle « ceci se tire » — la sheet
+   s'attrape partout au toucher (scroll natif). Ni cursor grab (mensonger : pas de drag souris),
+   ni touch-action (le geste EST le scroll), ni cible 44px (ce n'est plus un contrôle). */
   .kt-select__sheet-grab {
     display: flex;
     align-items: center;
     justify-content: center;
     flex: none;
-    block-size: 44px; /* Cible tactile minimale WCAG 2.5.5 AAA (44px) */
-    cursor: grab;
-    touch-action: none;
-  }
-
-  .kt-select__sheet-grab:active {
-    cursor: grabbing;
+    block-size: 28px;
   }
 
   .kt-select__sheet-grab::before {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktortu/aaa",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "Bibliothèque de composants Angular headless + thémés par tokens CSS.",
   "keywords": [
     "angular",

package/themes/theme-catppuccin.css

@@ -13,7 +13,9 @@
   /* ============ Socle ============ */
   --kt-surface: light-dark(#eff1f5, #1e1e2e); /* base */
   --kt-on-surface: light-dark(#4c4f69, #cdd6f4); /* text, ~12:1 */
-  --kt-muted: light-dark(#6c6f85, #a6adc8); /* subtext0, ~7.4:1 */
+  /* Latte : subtext1 (subtext0 = 4.36:1, sous AA). 5.5:1 = AA confortable ; 7:1 exigerait
+     d'égaler text (#4c4f69) et tuerait la hiérarchie visuelle. Mocha : subtext0, ~7.4:1. */
+  --kt-muted: light-dark(#5c5f77, #a6adc8);
   --kt-outline: light-dark(#bcc0cc, #6c7086); /* overlay0 */
   --kt-outline-strong: light-dark(#9ca0b0, #9399b2); /* overlay2 */
   --kt-primary: light-dark(#4a0e94, #cba6f7); /* mauve assombri pour AAA */

package/themes/theme-cyberpunk.css

@@ -47,7 +47,7 @@
   /* ============ Socle (cyan/magenta sur quasi-noir) ============ */
   --kt-surface: light-dark(#f0f8ff, #0b0f1a);
   --kt-on-surface: light-dark(#04141a, #e6f6ff); /* ~15:1 */
-  --kt-muted: light-dark(#5a7a91, #94b2c8); /* ~7:1 */
+  --kt-muted: light-dark(#3d5468, #94b2c8); /* 7.3:1 (l'ancien #5a7a91 = 4.23:1, sous AA) / ~7:1 */
   --kt-outline: light-dark(#9ec3d9, #2f5a73); /* 3:1 non-texte */
   --kt-outline-strong: light-dark(#5fb6da, #5fb6da);
   --kt-primary: light-dark(#003847, #28d6ef); /* cyan, texte ~10:1 */

package/types/ktortu-aaa-cdk.d.ts

@@ -28,6 +28,11 @@ interface KtSheetDragOptions {
  * gère que le glissement. Le gating « écran compact uniquement » reste à l'appelant (signal `isCompact`
  * de `KtViewport`) — la primitive est volontairement agnostique.
  *
+ * @deprecated ADR-0005 — les sheets de la lib (Select compact, Dialog `sheet`) sont désormais des
+ * scrollers à snap : le drag-to-dismiss « attrapable partout » et l'arbitrage avec le scroll
+ * interne sont NATIFS ; cette primitive « poignée + translate » n'a plus de consommateur interne.
+ * Sera supprimée dans une prochaine version majeure.
+ *
  * @param opts Élément à translater, callback de fermeture, classe de drag et seuil optionnel.
  * @returns Un contrôleur {@link KtSheetDrag} (`start` à brancher sur `pointerdown`, `destroy` au teardown).
  * @example

package/types/ktortu-aaa-dialog.d.ts

@@ -162,30 +162,14 @@ declare class KtDialogFocusInitial {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KtDialogFocusInitial, "[ktDialogFocusInitial]", never, {}, {}, never, never, true, never>;
 }
 /**
- * Poignée de préhension d'un dialog en mode `sheet` (bottom-sheet) : drag-to-dismiss vers le bas,
- * FACTORISÉ avec le Select via `createKtSheetDrag` (@ktortu/aaa). Geste DOUBLÉ par Échap + bouton
- * Fermer + clic sur le scrim (WCAG 2.5.1) — décoratif (`aria-hidden`).
- *
- * À poser sur la barre de préhension, premier enfant du contenu d'un dialog ouvert avec une
- * présentation `sheet` / `centered-sheet`. Le drag n'est actif que si le dialog est EFFECTIVEMENT
- * en mode sheet (la pane porte `kt-dialog--sheet`) — pas de dépendance au viewport : un `sheet`
- * toujours-bottom-sheet se drague aussi à la souris.
- *
- * @example
- * ```html
- * <div ktDialogContent>
- *   <div ktDialogSheetHandle></div>
- *   …
- * </div>
- * ```
+ * @deprecated ADR-0005 — la poignée est désormais RENDUE AUTOMATIQUEMENT par `KtDialogContainer`
+ * en présentation `sheet` (opt-out : panelClass additionnel `kt-dialog--no-handle`), et le
+ * drag-to-dismiss s'attrape sur TOUTE la surface de la sheet (scroll-snap natif). Cette
+ * directive est INERTE et son hôte est masqué (évite une double poignée) : retirez-la de vos
+ * templates. Sera supprimée dans une prochaine version majeure.
  */
 declare class KtDialogSheetHandle {
-    private readonly dialogRef;
-    private readonly host;
-    private readonly destroyRef;
-    private readonly drag;
     constructor();
-    protected onStart(event: PointerEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KtDialogSheetHandle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KtDialogSheetHandle, "[ktDialogSheetHandle]", never, {}, {}, never, never, true, never>;
 }
@@ -357,7 +341,14 @@ declare class KtDialogContainer extends CdkDialogContainer {
     private readonly elementRef;
     private readonly host;
     private readonly platformId;
+    private readonly destroyRef;
+    private readonly bodyScrollLock;
     protected readonly isClosing: i0.WritableSignal<boolean>;
+    /** Armé quand l'ouverture a dépassé 50px : un repos à ~0 est alors forcément le snap « fermé ». */
+    private sheetArmed;
+    /** Fermeture réelle en attente du repos au snap « fermé » (sortie programmatique animée). */
+    private pendingSheetClose;
+    private sheetCloseTimer;
     /** Premier id de la file `aria-labelledby` exposée par `CdkDialogContainer`. Le membre
         `_ariaLabelledByQueue` est interne au CDK (préfixe `_`) : on l'encapsule ICI, gardé, pour que
         le binding de template ne lise jamais l'interne directement. Si une montée du CDK retire ou
@@ -365,6 +356,25 @@ declare class KtDialogContainer extends CdkDialogContainer {
     protected get ariaLabelledBy(): string | null;
     constructor();
     protected isSheet(): boolean;
+    /** Poignée décorative auto-rendue en présentation sheet. Opt-out : panelClass `kt-dialog--no-handle`. */
+    protected showSheetHandle(): boolean;
+    /** Tap sur le spacer (zone extérieure à la carte) = fermeture, façon backdrop. Le conteneur
+        captant désormais le tactile (pointer-events auto, requis pour le drag iOS), le clic ne
+        traverse plus vers le backdrop CDK : on porte donc ICI la fermeture au tap-extérieur, en
+        respectant `disableClose` (comme le faisait le backdropClick natif). Un drag n'émet pas de
+        `click` (le navigateur le supprime après un scroll) : seul un vrai tap ferme. */
+    protected onScrimClick(): void;
+    /** Sheet scroll-snap : écouteurs (détection du repos + garde molette) et scroll d'ENTRÉE
+        programmatique vers le snap « ouvert ». Appelé au premier rendu, en présentation sheet. */
+    private initSheetGesture;
+    private prefersReducedMotion;
+    /** Détection du snap « fermé » par position de scroll (ni scrollsnapchange ni scrollend — cf.
+        ADR-0005). Un repos à ~0 finalise la fermeture en attente, ou EST une fermeture par geste. */
+    private readonly onSheetScroll;
+    /** La molette ne ferme JAMAIS la sheet (pas de geste souris — ADR-0005) : seuls les scrollers
+        INTERNES peuvent consommer, dans leurs bornes (générique : un dialog peut imbriquer
+        plusieurs zones scrollables). */
+    private readonly onSheetWheel;
     private animateAndClose;
     static ɵfac: i0.ɵɵFactoryDeclaration<KtDialogContainer, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KtDialogContainer, "kt-dialog-container", never, {}, {}, never, never, true, never>;

package/types/ktortu-aaa-forms.d.ts

@@ -998,6 +998,11 @@ declare abstract class KtBaseSelect<T, V = T> {
     readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
     readonly hideErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Bouton « effacer » (×) sur le champ quand une valeur est sélectionnée (même contrat que
+        `clearable` de BaseInputField ; single vide la sélection, multi vide toute la sélection). @default false */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Libellé i18n du bouton « effacer ». @default 'Clear' (ou KT_FIELD_CONFIG.clearLabel) */
+    readonly clearLabel: _angular_core.InputSignal<string>;
     /** Affiche un champ de recherche en tête du popup (desktop) / de la sheet (téléphone).
         Pour les listes longues ; le texte tapé ne sert qu'à filtrer (réinitialisé à la fermeture). @default false */
     readonly filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1098,11 +1103,27 @@ declare abstract class KtBaseSelect<T, V = T> {
     protected refocusTriggerAfterFilterClose(): void;
     /** Fermeture synchrone du Popover (l'effect, différé, ne re-cachera pas : flag popoverShown). */
     protected closePopupNow(): void;
-    private readonly sheetDrag;
-    protected onDragStart(event: PointerEvent): void;
+    private sheetEl;
+    private sheetState;
+    /** Armé quand l'ouverture a dépassé 50px : un repos à ~0 est alors forcément le snap « fermé »
+        (et non la position initiale) — même logique que le prototype du spike. */
+    private sheetArmed;
+    private sheetCloseTimer;
+    private resetSheetState;
+    private prefersReducedMotion;
+    /** Entrée de la sheet : position « fermée » puis scroll animé vers le snap « ouvert ». */
+    private openSheetByScroll;
+    /** Détection du snap « fermé » par position de scroll (ni scrollsnapchange ni scrollend :
+        non interopérables — cf. ADR-0005). Un geste de l'utilisateur qui amène la sheet au repos
+        à 0 EST la fermeture ; les fermetures programmatiques y convergent aussi. */
+    private readonly onSheetScroll;
+    /** La molette ne ferme JAMAIS la sheet (pas de geste souris — ADR-0005) : seule la listbox
+        peut consommer, dans les limites de son propre défilement. */
+    private readonly onSheetWheel;
+    private finalizeSheetClose;
     private animateAndCloseSelect;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtBaseSelect<any, any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseSelect<any, any>, never, never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "maxVisibleOptions": { "alias": "maxVisibleOptions"; "required": false; "isSignal": true; }; "truncatedResultsText": { "alias": "truncatedResultsText"; "required": false; "isSignal": true; }; "truncatedResultsAnnouncement": { "alias": "truncatedResultsAnnouncement"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseSelect<any, any>, never, never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "maxVisibleOptions": { "alias": "maxVisibleOptions"; "required": false; "isSignal": true; }; "truncatedResultsText": { "alias": "truncatedResultsText"; "required": false; "isSignal": true; }; "truncatedResultsAnnouncement": { "alias": "truncatedResultsAnnouncement"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /** Contexte typé reçu par le template d'une option (`ktSelectOption`). */
@@ -1191,6 +1212,10 @@ declare class KtSelect<T, V = T> extends KtBaseSelect<T, V> implements FormValue
     protected readonly triggerDef: _angular_core.Signal<KtSelectTriggerDef<any> | undefined>;
     /** Fermer le popup après une sélection (sémantique single ; le multi reste ouvert). */
     private readonly closeOnSelect;
+    /** Affiche le bouton « effacer » (×) sur le champ dès qu'une valeur est présente (`clearable`).
+        Basé sur `value()` et non `selectedOption()` : une clé orpheline (option retirée des données)
+        reste effaçable. */
+    protected readonly showClear: _angular_core.Signal<boolean>;
     /** Option correspondant à la valeur courante (clé extraite, ou objet si `optionValue` est omis). */
     protected readonly selectedOption: _angular_core.Signal<T | null>;
     /** Valeur du listbox : tableau de clés (0 ou 1 élément en single). */
@@ -1199,6 +1224,8 @@ declare class KtSelect<T, V = T> extends KtBaseSelect<T, V> implements FormValue
     /** La sélection courante est-elle masquée par le filtre ou la troncation ? (≠ retirée des données). */
     private isSelectionFilteredOut;
     private commitSelection;
+    /** Efface la sélection depuis le champ (bouton `clearable`) et rend le focus au trigger. */
+    protected clearSelection(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtSelect<any, any>, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtSelect<any, any>, "kt-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; }, ["optionDef", "triggerDef"], ["[ktFieldHelp]"], true, never>;
 }
@@ -1390,10 +1417,6 @@ declare class KtMultiSelect<T, V = T> extends KtBaseSelect<T, V> implements Form
     /** Émis à chaque (dé)sélection. Payload : `{ value, options }` — `value` le tableau des valeurs émises
         (clés ou objets), `options` les objets options correspondants, dans l'ordre de sélection. */
     readonly selectionChange: _angular_core.OutputEmitterRef<KtMultiSelectSelectionChange<T, V>>;
-    /** Bouton « tout effacer » sur le champ (même contrat que `clearable` de BaseInputField). @default false */
-    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Libellé i18n du bouton « tout effacer ». @default 'Clear' (ou KT_FIELD_CONFIG.clearLabel) */
-    readonly clearLabel: _angular_core.InputSignal<string>;
     /** Barre « Tout sélectionner / Tout effacer » en tête du popup (bascule le popup en panneau dialog). */
     readonly selectionActions: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Nombre maximal de chips affichés avant repli derrière un bouton « +N more ». Défaut : illimité. */
@@ -1454,7 +1477,7 @@ declare class KtMultiSelect<T, V = T> extends KtBaseSelect<T, V> implements Form
     /** Annonce immédiate (action ponctuelle, pas de débounce) du total sélectionné. */
     private announceSelectionCount;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtMultiSelect<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtMultiSelect<any, any>, "kt-multi-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "selectionActions": { "alias": "selectionActions"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; }, ["optionDef", "triggerDef", "chipDef"], ["[ktFieldHelp]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtMultiSelect<any, any>, "kt-multi-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionActions": { "alias": "selectionActions"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; }, ["optionDef", "triggerDef", "chipDef"], ["[ktFieldHelp]"], true, never>;
 }
 
 /** Portée de transition des chips. Fourni par `ChipList` (via `useExisting`) ; injecté en
@@ -1718,12 +1741,30 @@ declare class KtChipList<T> implements ChipTransitionScope {
         Public : permet au parent d'annoncer des actions liées (ex. « tout effacer »). */
     announce(text: string): void;
     private activeTransition;
+    /**
+     * Vrai sur le moteur WebKit (Safari desktop + TOUS les navigateurs iOS, qui embarquent WebKit).
+     *
+     * Contournement DOCUMENTÉ et RÉVERSIBLE d'un bug de compositing des View Transitions au niveau
+     * document sur WebKit : après la transition, les chips (hôtes d'éléments custom dont le
+     * `view-transition-name` est posé puis retiré dynamiquement) ne se repeignent pas — seules les
+     * croix « retirer » (boutons natifs, compositées sur une couche distincte) subsistent à l'écran.
+     * Touche aussi bien le retrait que le déplier/replier : les deux passent par ce wrapper.
+     *
+     * Le défaut n'est PAS feature-detectable : `startViewTransition` répond présente puis rate le
+     * rendu final, d'où la détection de MOTEUR. `navigator.vendor` est gelé pour compat — vaut
+     * « Apple Computer, Inc. » sur WebKit UNIQUEMENT (Blink = « Google Inc. », Gecko = « »). On NE
+     * gate PAS sur l'absence de la variante scopée `element.startViewTransition` : cela exclurait
+     * Firefox à tort (transition document parfaitement rendue chez lui). À RETIRER quand Safari
+     * corrigera le compositing.
+     */
+    private isWebKitEngine;
     /** Exécute `action` dans une View Transition (morph des chips qui se déplacent, entrée/sortie
         stylées via `::view-transition-*(.chip-transition)` — cf. tokens.css). Transition SCOPÉE à
         l'élément quand le navigateur le permet (`element.startViewTransition`, Chrome 147+) ; sinon
         transition document — dans les deux cas, seuls les chips de CETTE liste sont nommés (cf.
-        `transitioning`). Fallback : action directe si l'API est absente ou si l'utilisateur
-        préfère moins de mouvement. */
+        `transitioning`). Fallback : action directe (retrait/dépli instantané, état final garanti
+        correct) si l'API est absente, si l'utilisateur préfère moins de mouvement, ou sur WebKit
+        (bug de compositing, cf. `isWebKitEngine`). */
     private withViewTransition;
     /** Retrait demandé : annonce, émet vers le parent (qui met à jour `items`), puis focus
         le chip suivant — sinon `emptyFocusTarget` (le bouton focusé disparaît du DOM). */