@ktortu/aaa 0.9.9 → 0.10.0

package/README.md

@@ -40,7 +40,7 @@ export class Exemple {
 ```
 
 Points d'entrée TypeScript : `@ktortu/aaa/button`, `/card`, `/dialog`, `/layout`, `/menu`, `/snackbar`, `/tabs`,
-`/tooltip`, `/forms`, `/cdk` (breakpoints, viewport, sheet-drag, id-generator) et `/i18n`
+`/tooltip`, `/forms`, `/icon` (icônes), `/cdk` (breakpoints, viewport, sheet-drag, id-generator) et `/i18n`
 (traductions). La racine `@ktortu/aaa` ré-exporte tout par commodité, mais importer depuis le
 point d'entrée précis préserve le tree-shaking. Les thèmes sont des fichiers CSS (cf. §Styles),
 pas un point d'entrée TypeScript.
@@ -90,15 +90,49 @@ type `Partial<…>`) ou via les helpers `provideKt*` :
 ```ts
 import { KT_BUTTON_CONFIG } from '@ktortu/aaa/button';
 import { provideKtBreakpoints } from '@ktortu/aaa/cdk';
-import { provideKtDialogDefaults } from '@ktortu/aaa/dialog';
+import { provideKtDialog, provideKtDialogDefaults } from '@ktortu/aaa/dialog';
 
 providers: [
   { provide: KT_BUTTON_CONFIG, useValue: { size: 'lg' } },
   provideKtBreakpoints({ tablet: 768, desktop: 1200 }),
-  provideKtDialogDefaults({ maxWidth: '40rem' }),
+  provideKtDialogDefaults({ maxWidth: '40rem' }), // config CDK du dialog
+  provideKtDialog({ sheetCloseButton: true }), // options maison du dialog
 ];
 ```
 
+Le dialog a **deux** providers, complémentaires et sans recouvrement :
+`provideKtDialogDefaults()` porte la config `@angular/cdk/dialog` (plancher a11y, largeurs,
+classes) ; `provideKtDialog()` porte les options propres à la lib (`KT_DIALOG_CONFIG`).
+
+#### Bouton de fermeture des bottom-sheets
+
+`sheetCloseButton` ajoute une croix auto-rendue en haut de la carte, hors flux (cible tactile
+44 px, WCAG 2.5.5). **Désactivée par défaut** — pour une raison de compatibilité, pas d'ergonomie.
+
+`[ktDialogHeader]` ne rend aucune croix : c'est une simple rangée flex, où l'on POSE la sienne
+(`<button ktButton iconOnly icon="close" ktDialogClose>`). Mais comme c'est la composition usuelle,
+activer l'option par défaut ferait apparaître une **deuxième** croix chez ces consommateurs-là sans
+qu'ils aient rien changé. Le conteneur avertit en mode dev si les deux coexistent hors barre
+d'actions.
+
+Recommandée, donc, sur toute sheet qui ne pose pas déjà son propre bouton de fermeture en tête.
+
+Surchargeable par ouverture, comme `presentation` :
+
+```ts
+export const injectShareSheet = () =>
+  shareSheet.injectOpener(ShareSheet, { presentation: 'sheet', sheetCloseButton: true });
+```
+
+La position s'ajuste **en CSS seul** (propriétés logiques, donc correctes en RTL) :
+`--dialog-close-inset-block-start`, `--dialog-close-inset-inline-end`, `--dialog-close-size`,
+`--dialog-close-icon-size`, `--dialog-close-color`, `--dialog-close-bg`, `--dialog-close-glyph`.
+Chacune retombe sur une couche partagée `--kt-sheet-close-*`, pour harmoniser d'un coup ce bouton
+et celui du Select compact.
+
+L'option `sheetHandle: false` retire la poignée décorative (ADR-0005). Elle remplace le
+`panelClass` `kt-dialog--no-handle`, **déprécié** mais toujours honoré.
+
 ## Styles (CSS)
 
 L'apparence vit dans des **feuilles CSS globales** thémées par des tokens `--kt-*` : importez le
@@ -169,6 +203,7 @@ Bundles disponibles :
 | `@ktortu/aaa/snackbar.css`   | snackbar (requiert l'overlay CDK + `a11y-prebuilt.css`)      |
 | `@ktortu/aaa/forms.css`      | base des formulaires (champs, chips, switch)                 |
 | `@ktortu/aaa/tabs.css`       | onglets                                                      |
+| `@ktortu/aaa/icon.css`       | icônes (`ktIcon`)                                            |
 
 > `foundation.css` doit **toujours** être importé en premier (les bundles composant en dérivent).
 > Si vous utilisez plusieurs composants, l'agrégat `@ktortu/aaa/styles.css` fait tout cela dans le
@@ -177,6 +212,8 @@ Bundles disponibles :
 > Les formulaires « riches » (Select, MultiSelect, Field, Chips) embarquent leur CSS via les
 > composants eux-mêmes (`styleUrl`) : rien à importer en plus pour ceux-ci.
 
+> **Note icônes remplies** : L'utilisation de `[fill]` ou `fill` sur un `ktIcon` exige de charger une police dont l'axe `FILL` est ajustable (ex. Material Symbols avec l'axe dans la requête URL).
+
 ## Développement
 
 ```bash

package/dialog/dialog.css

@@ -31,6 +31,22 @@
     --dialog-focus-ring-color: var(--kt-focus-ring-color, #0842a0);
     --dialog-focus-ring-width: var(--kt-focus-ring-width, 2px);
 
+    /* ============ Bouton de fermeture auto-rendu de la bottom-sheet ============ */
+    /* Rendu seulement si l'option `sheetCloseButton` est active (cf. KtDialogConfig). Chaque token
+     retombe sur une couche PARTAGÉE --kt-sheet-close-* (même mécanisme que --dialog-radius →
+     --kt-sheet-radius) : un thème harmonise d'un coup ce bouton et celui du Select compact.
+     La cible fait 44px RÉELS (WCAG 2.5.5 AAA) pour un glyphe de 1.25rem — l'anneau de focus
+     épouse donc la cible, comme sur le Select. */
+    --dialog-close-size: var(--kt-sheet-close-size, 44px);
+    --dialog-close-icon-size: var(--kt-sheet-close-icon-size, 1.25rem);
+    --dialog-close-inset-block-start: var(--kt-sheet-close-inset-block-start, 0.25rem);
+    --dialog-close-inset-inline-end: var(--kt-sheet-close-inset-inline-end, 0.25rem);
+    --dialog-close-color: var(--kt-sheet-close-color, var(--dialog-muted));
+    /* Bascules NON déclarées exprès (défauts entre parenthèses) :
+     --dialog-close-bg (transparent) : pastille opaque quand la croix flotte au-dessus d'un contenu
+       à fond propre (image, média) — sans elle, le contraste 1.4.11 n'est pas garantissable.
+     --dialog-close-glyph ('close')  : ligature du glyphe. */
+
     /* ============ Gouttière du conteneur scrollable ============ */
     /* Le dialog a des coins arrondis + une barre d'actions sticky : la gouttière à TRACK PLEIN
      héritée de la page y dessine un bandeau vertical disgracieux le long de l'arrondi. On force
@@ -241,6 +257,14 @@
       /* Le scrim translucide disparaît en forced-colors : on garde une séparation visible. */
       background: rgb(0 0 0 / 50%);
     }
+    /* Le fond transparent et la couleur atténuée du bouton de fermeture sont écrasés par le
+     système : on le rattache aux couleurs de contrôle pour qu'il reste identifiable. */
+    .kt-dialog-container__sheet-close {
+      color: ButtonText;
+    }
+    .kt-dialog-container__sheet-close:focus-visible {
+      outline-color: Highlight;
+    }
   }
 
   /* ====================================================================================
@@ -351,6 +375,10 @@
 
   /* La carte : reprend la surface du dialog (déplacée du conteneur, devenu scroller). */
   .cdk-overlay-pane.kt-dialog--sheet .kt-dialog-container__layout {
+    /* Référentiel du bouton de fermeture absolu. IMPÉRATIF que ce soit la CARTE et non le
+     conteneur : celui-ci est le scroller à snap, un ancrage dessus suivrait le geste et sortirait
+     de l'écran au premier glissement. */
+    position: relative;
     scroll-snap-align: end;
     scroll-snap-stop: always;
     display: flex;
@@ -399,6 +427,63 @@
     background: var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5));
   }
 
+  /* ===== Bouton de fermeture auto-rendu (option `sheetCloseButton`) =====
+   Hors flux : ancré en absolu sur la carte, il ne décale RIEN (zéro layout shift) et n'impose
+   aucune contrainte au markup projeté. Pas de `touch-action` : le glissement doit rester
+   saisissable AU TRAVERS du bouton (ADR-0005 — la sheet s'attrape partout). Un vrai glissement
+   n'émet pas de `click` (le navigateur le supprime après un défilement) : seul un tap ferme. */
+  .cdk-overlay-pane.kt-dialog--sheet .kt-dialog-container__sheet-close {
+    position: absolute;
+    inset-block-start: var(--dialog-close-inset-block-start);
+    inset-inline-end: var(--dialog-close-inset-inline-end);
+    /* Au-dessus d'un éventuel [ktDialogHeader] collant projeté par le consommateur (z-index 1). */
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--dialog-close-size);
+    block-size: var(--dialog-close-size);
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: var(--dialog-close-bg, transparent);
+    color: var(--dialog-close-color);
+    cursor: pointer;
+  }
+
+  .cdk-overlay-pane.kt-dialog--sheet .kt-dialog-container__sheet-close:focus-visible {
+    outline: var(--dialog-focus-ring-width) solid var(--dialog-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  .kt-dialog-container__sheet-close-icon {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--dialog-close-icon-size);
+    block-size: var(--dialog-close-icon-size);
+    overflow: hidden; /* Sécurité anti-débordement de ligature brute (cf. .kt-alert-dialog__icon) */
+  }
+
+  .kt-dialog-container__sheet-close-icon::before {
+    content: var(--dialog-close-glyph, 'close');
+    font-family: var(--kt-icon-font, 'Material Symbols Outlined');
+    font-weight: var(--kt-icon-font-weight, normal);
+    font-style: normal;
+    font-size: var(--dialog-close-icon-size);
+    line-height: 1;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Réserve horizontale sous la croix : sans elle, un titre long passerait DESSOUS. Ciblage
+   `> * >` (l'hôte du composant projeté est l'intermédiaire) = régions de PREMIER niveau seulement,
+   ce qui exclut volontairement un [ktDialogTitle] imbriqué dans un [ktDialogHeader] — celui-ci
+   garde son padding nul et c'est le header qui porte la réserve. */
+  .cdk-overlay-pane.kt-dialog--sheet .kt-dialog-container__layout--closable > * > [ktDialogTitle],
+  .cdk-overlay-pane.kt-dialog--sheet .kt-dialog-container__layout--closable > * > [ktDialogHeader] {
+    padding-inline-end: calc(var(--dialog-close-size) + var(--dialog-close-inset-inline-end));
+  }
+
   /* Mouvement réduit : pas de fondu (WCAG 2.3.3). La sheet gère le sien en JS (scroll instantané). */
   @media (prefers-reduced-motion: reduce) {
     .cdk-overlay-pane.kt-dialog--fullscreen .cdk-dialog-container {

package/fesm2022/ktortu-aaa-dialog.mjs

@@ -1,8 +1,9 @@
 import { DialogRef, DEFAULT_DIALOG_CONFIG, CdkDialogContainer, Dialog, DIALOG_DATA } from '@angular/cdk/dialog';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, afterNextRender, Directive, input, isDevMode, PLATFORM_ID, DestroyRef, signal, ChangeDetectionStrategy, Component, ViewContainerRef, Injectable } from '@angular/core';
+import { inject, ElementRef, Renderer2, afterNextRender, Directive, input, isDevMode, InjectionToken, PLATFORM_ID, DestroyRef, signal, ChangeDetectionStrategy, Component, ViewContainerRef, Injectable } from '@angular/core';
 import { KtIdGenerator, KtBodyScrollLock, KtViewport } from '@ktortu/aaa/cdk';
 import { isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/cdk/portal';
 import { PortalModule } from '@angular/cdk/portal';
 import { map } from 'rxjs/operators';
@@ -182,6 +183,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * aria-labelledby). En usage simple — titre nu sans header — [ktDialogTitle] conserve son propre
  * padding : ce header n'est à utiliser que pour les en-têtes composés (icône, close top-right…).
  *
+ * ⚠️ Ne rend RIEN par lui-même — pas de bouton de fermeture implicite : c'est vous qui posez la
+ * croix (cf. exemple). En présentation `sheet`, l'option `sheetCloseButton` en rend une
+ * automatiquement, hors flux ; les deux ensemble feraient doublon (le conteneur avertit en dev).
+ *
  * @example
  * ```html
  * <header ktDialogHeader>
@@ -256,7 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }] });
 /**
  * @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
+ * en présentation `sheet` (opt-out : option typée `sheetHandle: false`), 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.
@@ -334,6 +339,41 @@ function provideKtDialogDefaults(overrides) {
         useValue: { ...KT_DIALOG_AAA_DEFAULTS, ...overrides },
     };
 }
+/**
+ * Défauts effectifs des options maison du dialog. Objet `Required` figé : c'est la SOURCE des
+ * valeurs de repli, lue à la fois par l'ouvreur (résolution) et par le conteneur (fusion
+ * idempotente), et énumérée par la garde de complétude i18n.
+ */
+const DEFAULT_KT_DIALOG_CONFIG = {
+    sheetCloseButton: false,
+    sheetCloseLabel: 'Close',
+    sheetHandle: true,
+};
+/**
+ * Token des options maison du dialog. Deux usages, un seul chemin de résolution :
+ * - **application** : fourni via {@link provideKtDialog} (valeur partielle) ;
+ * - **par ouverture** : `injectKtDialogOpener` REFOURNIT ce même token, déjà RÉSOLU, dans
+ *   l'injecteur du conteneur (canal `container.providers` du CDK). Le conteneur fusionne
+ *   toujours par-dessus {@link DEFAULT_KT_DIALOG_CONFIG} : l'opération est idempotente sur une
+ *   valeur déjà résolue, et reste correcte si le conteneur est monté sans passer par l'ouvreur.
+ */
+const KT_DIALOG_CONFIG = new InjectionToken('KT_DIALOG_CONFIG');
+/**
+ * Enregistre les options maison du dialog pour l'application (ou un sous-arbre).
+ * Complémentaire de {@link provideKtDialogDefaults}, qui porte la config du CDK : les deux
+ * coexistent et ne se recouvrent pas.
+ *
+ * @example
+ * ```ts
+ * // app.config.ts — bouton de fermeture sur toutes les bottom-sheets
+ * providers: [provideKtDialog({ sheetCloseButton: true })];
+ * ```
+ * @param config Options partielles fusionnées par-dessus `DEFAULT_KT_DIALOG_CONFIG`.
+ * @returns Un `Provider` pour le token `KT_DIALOG_CONFIG`.
+ */
+function provideKtDialog(config) {
+    return { provide: KT_DIALOG_CONFIG, useValue: config };
+}
 /** panelClass d'une présentation CONCRÈTE (sans variante responsive). */
 function concreteDialogPanelClass(p) {
     if (p === 'fullscreen')
@@ -367,6 +407,8 @@ function resolveKtDialogPanelClass(presentation = 'centered', compact = false) {
     return concreteDialogPanelClass(compact ? 'sheet' : 'centered'); // 'centered-sheet'
 }
 
+/** panelClass d'opt-out historique de la poignée, conservé comme repli DÉPRÉCIÉ (cf. `sheetHandle`). */
+const LEGACY_NO_HANDLE_CLASS = 'kt-dialog--no-handle';
 class KtDialogContainer extends CdkDialogContainer {
     dialogRef = inject(DialogRef);
     elementRef = inject(ElementRef);
@@ -374,6 +416,14 @@ class KtDialogContainer extends CdkDialogContainer {
     platformId = inject(PLATFORM_ID);
     destroyRef = inject(DestroyRef);
     bodyScrollLock = inject(KtBodyScrollLock);
+    /** Options maison RÉSOLUES. `injectKtDialogOpener` refournit `KT_DIALOG_CONFIG` déjà résolu dans
+        l'injecteur du conteneur : la fusion ci-dessous est alors un no-op. Elle reste indispensable
+        quand le conteneur est monté sans l'ouvreur (`dialog.open` brut), où le token remonte à
+        l'application et n'est que partiel. Un seul chemin de code, idempotent. */
+    ktConfig = {
+        ...DEFAULT_KT_DIALOG_CONFIG,
+        ...(inject(KT_DIALOG_CONFIG, { optional: true }) ?? {}),
+    };
     isClosing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isClosing" }] : /* istanbul ignore next */ []));
     // --- Sheet scroll-snap (ADR-0005) : détection du snap « fermé » + fermeture différée ---
@@ -419,14 +469,74 @@ class KtDialogContainer extends CdkDialogContainer {
             if (!hasName) {
                 console.warn('[ktDialog] dialog sans nom accessible : ajoutez un [ktDialogTitle] (ou `aria-label` via la config d’ouverture) — WCAG 4.1.2.');
             }
+            this.warnOnConfigMisuse();
+        });
+        // Repli de FOCUS INITIAL. La config par défaut de la lib vise un SÉLECTEUR
+        // (`autoFocus: '[ktDialogFocusInitial]'`) ; quand aucun élément ne le porte, le CDK ne focalise
+        // RIEN (son repli sur le conteneur n'existe que pour les modes `first-tabbable`/`dialog`/false).
+        // Le focus reste alors sur le déclencheur, HORS du dialog, et Tab promène l'utilisateur dans la
+        // page derrière. On rattrape ici sur le conteneur (tabindex -1) — jamais sur un bouton :
+        // atterrir d'emblée sur « Fermer » est un anti-pattern lecteur d'écran (WCAG 2.4.3).
+        // `preventScroll` : en présentation sheet le conteneur EST le scroller à snap, focaliser ne doit
+        // pas perturber le scroll d'entrée en cours.
+        this._focusTrapped.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            if (this.host.contains(this.host.ownerDocument.activeElement))
+                return;
+            this.host.focus({ preventScroll: true });
         });
     }
+    /** Garde-fous dev sur la config maison : usage hors sheet, double bouton de fermeture, opt-out
+        déprécié de la poignée. On AVERTIT sans jamais corriger en silence — un masquage automatique
+        dépendrait de l'ordre de rendu du portail et serait indébogable. */
+    warnOnConfigMisuse() {
+        if (this.hasLegacyNoHandleClass()) {
+            console.warn(`[ktDialog] panelClass '${LEGACY_NO_HANDLE_CLASS}' déprécié : utilisez l’option typée ` +
+                '`sheetHandle: false` (à l’ouverture ou via provideKtDialog).');
+        }
+        if (this.ktConfig.sheetCloseButton && !this.isSheet()) {
+            console.warn('[ktDialog] `sheetCloseButton` ne s’applique qu’à la présentation `sheet` et reste sans effet ' +
+                'ici : en centré / plein écran, posez le bouton dans un [ktDialogHeader].');
+        }
+        // Collision visuelle recherchée : une croix posée en TÊTE (typiquement dans un [ktDialogHeader]),
+        // qui doublerait celle du conteneur. Un [ktDialogClose] dans la barre d'ACTIONS est légitime
+        // (« Annuler », ou une action qui ferme au passage) et ne collisionne pas : on l'exclut.
+        // Heuristique volontairement partielle par ailleurs : elle voit la forme ATTRIBUT `ktDialogClose`,
+        // pas la forme liée `[ktDialogClose]="x"` (un binding de propriété ne reflète aucun attribut).
+        const strayClose = this.showSheetClose() &&
+            [...this.host.querySelectorAll('[ktDialogClose]')].some((el) => !el.closest('[ktDialogActions]'));
+        if (strayClose) {
+            console.warn('[ktDialog] double bouton de fermeture : `sheetCloseButton` est actif alors que le contenu ' +
+                'porte déjà un [ktDialogClose] hors barre d’actions (en-tête ?). Gardez l’un OU l’autre.');
+        }
+    }
     isSheet() {
         return this._config.panelClass?.includes('kt-dialog--sheet') ?? false;
     }
-    /** Poignée décorative auto-rendue en présentation sheet. Opt-out : panelClass `kt-dialog--no-handle`. */
+    /** panelClass d'opt-out historique de la poignée — repli DÉPRÉCIÉ, remplacé par `sheetHandle`. */
+    hasLegacyNoHandleClass() {
+        return this._config.panelClass?.includes(LEGACY_NO_HANDLE_CLASS) ?? false;
+    }
+    /** Poignée décorative auto-rendue en présentation sheet (ADR-0005). Opt-out : option `sheetHandle`
+        (le panelClass historique reste honoré, en déprécié). */
     showSheetHandle() {
-        return !this._config.panelClass?.includes('kt-dialog--no-handle');
+        if (this.hasLegacyNoHandleClass())
+            return false;
+        return this.ktConfig.sheetHandle;
+    }
+    /** Bouton de fermeture auto-rendu : opt-in `sheetCloseButton`, et UNIQUEMENT en présentation sheet
+        (ailleurs, la croix se pose à la main dans un `[ktDialogHeader]` — cf. `KtDialogConfig`). */
+    showSheetClose() {
+        return this.isSheet() && this.ktConfig.sheetCloseButton;
+    }
+    /** Clic sur le bouton de fermeture auto-rendu. Ne consulte VOLONTAIREMENT pas `disableClose` :
+        contrairement au tap-extérieur et à Échap (fermetures « par inadvertance » que `disableClose`
+        protège), ce bouton est une sortie EXPLICITEMENT demandée par le dev via `sheetCloseButton` —
+        le combiner à `disableClose` est le patron « une seule sortie contrôlée ». Le drapeau
+        `isClosing` garde l'idempotence face à un geste de glissement simultané. */
+    onSheetCloseClick() {
+        if (this.isClosing())
+            return;
+        this.dialogRef.close();
     }
     /** 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
@@ -560,10 +670,23 @@ class KtDialogContainer extends CdkDialogContainer {
            backdrop CDK, la fermeture au tap est donc portée ici (disableClose respecté). -->
       <div class="kt-dialog-container__spacer" aria-hidden="true" (click)="onScrimClick()"></div>
     }
-    <div class="kt-dialog-container__layout">
+    <div class="kt-dialog-container__layout" [class.kt-dialog-container__layout--closable]="showSheetClose()">
+      @if (showSheetClose()) {
+        <!-- Bouton de fermeture AUTO-RENDU (opt-in 'sheetCloseButton'). Placé en TÊTE du document
+             pour ouvrir l'ordre de tabulation, mais ancré en absolu sur la carte (cf. dialog.css) :
+             il ne consomme pas de place dans la colonne. Aucun touch-action ici — le geste de
+             glissement doit rester saisissable au travers du bouton (ADR-0005). -->
+        <button
+          type="button"
+          class="kt-dialog-container__sheet-close"
+          [attr.aria-label]="ktConfig.sheetCloseLabel"
+          (click)="onSheetCloseClick()"
+        >
+          <span class="kt-dialog-container__sheet-close-icon" aria-hidden="true"></span>
+        </button>
+      }
       @if (isSheet() && showSheetHandle()) {
-        <!-- Poignée DÉCORATIVE auto-rendue : la sheet s'attrape partout (opt-out :
-             panelClass additionnel 'kt-dialog--no-handle' à l'ouverture). -->
+        <!-- Poignée DÉCORATIVE auto-rendue : la sheet s'attrape partout (opt-out : 'sheetHandle'). -->
         <div class="kt-dialog-container__sheet-handle" aria-hidden="true"></div>
       }
       <ng-template cdkPortalOutlet></ng-template>
@@ -597,10 +720,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
            backdrop CDK, la fermeture au tap est donc portée ici (disableClose respecté). -->
       <div class="kt-dialog-container__spacer" aria-hidden="true" (click)="onScrimClick()"></div>
     }
-    <div class="kt-dialog-container__layout">
+    <div class="kt-dialog-container__layout" [class.kt-dialog-container__layout--closable]="showSheetClose()">
+      @if (showSheetClose()) {
+        <!-- Bouton de fermeture AUTO-RENDU (opt-in 'sheetCloseButton'). Placé en TÊTE du document
+             pour ouvrir l'ordre de tabulation, mais ancré en absolu sur la carte (cf. dialog.css) :
+             il ne consomme pas de place dans la colonne. Aucun touch-action ici — le geste de
+             glissement doit rester saisissable au travers du bouton (ADR-0005). -->
+        <button
+          type="button"
+          class="kt-dialog-container__sheet-close"
+          [attr.aria-label]="ktConfig.sheetCloseLabel"
+          (click)="onSheetCloseClick()"
+        >
+          <span class="kt-dialog-container__sheet-close-icon" aria-hidden="true"></span>
+        </button>
+      }
       @if (isSheet() && showSheetHandle()) {
-        <!-- Poignée DÉCORATIVE auto-rendue : la sheet s'attrape partout (opt-out :
-             panelClass additionnel 'kt-dialog--no-handle' à l'ouverture). -->
+        <!-- Poignée DÉCORATIVE auto-rendue : la sheet s'attrape partout (opt-out : 'sheetHandle'). -->
         <div class="kt-dialog-container__sheet-handle" aria-hidden="true"></div>
       }
       <ng-template cdkPortalOutlet></ng-template>
@@ -609,17 +745,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/** Retire les clés à `undefined` : une option NON fournie à l'ouverture ne doit pas écraser
+    la valeur du token global (une clé absente et une clé à `undefined` sont équivalentes ici). */
+function definedOnly(source) {
+    return Object.fromEntries(Object.entries(source).filter(([, value]) => value !== undefined));
+}
 function injectKtDialogOpener(component, baseConfig) {
     const dialog = inject(Dialog);
     const viewport = inject(KtViewport);
     // Optionnel : hors d'un arbre de vue (ex. service root), il n'y a pas de ViewContainerRef.
     const viewContainerRef = inject(ViewContainerRef, { optional: true }) ?? undefined;
     const idGen = inject(KtIdGenerator);
+    // Options maison au niveau application (partielles) : socle de la cascade résolue ci-dessous.
+    const appKtConfig = inject(KT_DIALOG_CONFIG, { optional: true });
     return (data, config) => {
         // La présentation (choisie par le dev) est résolue ICI, à l'ouverture : les variantes
         // responsive lisent le signal d'écran compact. Le panelClass final = présentation concrète + extras.
-        const { presentation, panelClass, ...rest } = { ...baseConfig, ...config };
+        const { presentation, panelClass, sheetCloseButton, sheetCloseLabel, sheetHandle, ...rest } = {
+            ...baseConfig,
+            ...config,
+        };
         const extra = panelClass ? (Array.isArray(panelClass) ? panelClass : [panelClass]) : [];
+        // Cascade des options maison, résolue UNE SEULE FOIS ici (ADR-0003) : défaut → token
+        // application → option d'ouverture. Le conteneur ne relit JAMAIS le token de son côté ; il
+        // reçoit cette valeur déjà résolue par le canal `container.providers` du CDK (les
+        // `providers` de la config générale, eux, n'atteignent QUE le portail de contenu).
+        const ktConfig = {
+            ...DEFAULT_KT_DIALOG_CONFIG,
+            ...definedOnly(appKtConfig ?? {}),
+            ...definedOnly({ sheetCloseButton, sheetCloseLabel, sheetHandle }),
+        };
         // Dédoublonné : une classe déjà fournie par la présentation (ex. `kt-dialog`) et repassée
         // en `panelClass` par le consommateur ne doit pas apparaître deux fois.
         const merged = [...new Set([...resolveKtDialogPanelClass(presentation, viewport.isCompact()), ...extra])];
@@ -631,7 +786,11 @@ function injectKtDialogOpener(component, baseConfig) {
             // consommateur n'a pas câblé provideKtDialogDefaults(). `...rest` (config par appel) prime.
             ...KT_DIALOG_AAA_DEFAULTS,
             viewContainerRef,
-            container: KtDialogContainer,
+            // Canal TYPÉ vers le conteneur : ces providers-là atterrissent bien dans SON injecteur.
+            container: {
+                type: KtDialogContainer,
+                providers: () => [{ provide: KT_DIALOG_CONFIG, useValue: ktConfig }],
+            },
             ariaLabelledBy: titleId,
             ariaDescribedBy: descId,
             ...rest,
@@ -953,5 +1112,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KT_DIALOG_AAA_DEFAULTS, KtAlertDialog, KtConfirmDialog, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, KtQuickDialog, defineKtDialog, injectAlertDialog, injectConfirmDialog, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
+export { DEFAULT_KT_DIALOG_CONFIG, KT_DIALOG_AAA_DEFAULTS, KT_DIALOG_CONFIG, KtAlertDialog, KtConfirmDialog, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, KtQuickDialog, defineKtDialog, injectAlertDialog, injectConfirmDialog, injectKtDialogOpener, provideKtDialog, provideKtDialogDefaults, resolveKtDialogPanelClass };
 //# sourceMappingURL=ktortu-aaa-dialog.mjs.map