@ktortu/aaa 0.1.0-beta.0 → 0.9.0

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/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/radio/radio-group.css

@@ -24,9 +24,9 @@
   /* 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-direction: var(--radio-group-direction, row);
     flex-wrap: wrap;
-    gap: var(--radio-group-gap, 0.25rem);
+    gap: var(--radio-group-gap, 1rem);
   }
 
   .kt-radio-group__hint {
@@ -52,4 +52,4 @@
       animation: none;
     }
   }
-}
+}

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,139 @@
     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/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.0",
   "description": "Bibliothèque de composants Angular headless + thémés par tokens CSS.",
   "keywords": [
     "angular",
@@ -77,6 +77,10 @@
       "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"

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, AfterViewInit } from '@angular/core';
+import { InjectionToken, AfterViewInit, Provider } from '@angular/core';
 
 /** Axe "emphase" (apparence). */
 type KtButtonMode = 'filled' | 'tonal' | 'outlined' | 'text';
@@ -7,13 +7,27 @@ type KtButtonMode = 'filled' | 'tonal' | 'outlined' | 'text';
 type KtButtonColor = 'primary' | 'neutral' | 'danger';
 /** Taille (la cible md ~44-48px vise le confort tactile / AAA). */
 type KtButtonSize = 'sm' | 'md' | 'lg';
+/** Défauts applicables à tous les `[ktButton]` (surchargeables par bouton via les inputs). */
 interface KtButtonConfig {
+    /** Garde le bouton focusable même désactivé (via `aria-disabled`). */
     disabledInteractive: boolean;
+    /** Emphase visuelle par défaut (apparence). */
     mode: KtButtonMode;
+    /** Intention sémantique par défaut (couleur). */
     color: KtButtonColor;
+    /** Taille par défaut. */
     size: KtButtonSize;
 }
 declare const KT_BUTTON_CONFIG: InjectionToken<Partial<KtButtonConfig>>;
+/**
+ * Fournit des défauts de bouton (mode/couleur/taille…) pour un sous-arbre ou l'application entière.
+ *
+ * @example
+ * ```ts
+ * providers: [provideKtButton({ mode: 'tonal', size: 'lg' })]
+ * ```
+ */
+declare function provideKtButton(config: Partial<KtButtonConfig>): Provider;
 /**
  * Bouton ou lien stylé par la directive `ktButton`. À poser sur un `<button>`
  * (action) ou un `<a>` (navigation) — l'accessibilité s'adapte automatiquement
@@ -40,23 +54,23 @@ declare class KtButton implements AfterViewInit {
     /** Taille ; `md` vise une cible tactile ~44-48px. @default 'md' (ou KT_BUTTON_CONFIG.size) */
     readonly size: _angular_core.InputSignal<KtButtonSize>;
     /** Étire le bouton sur toute la largeur disponible. @default false */
-    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Bouton carré sans texte ; impose un nom accessible via `ariaLabel`. @default false */
     readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Nom accessible. Obligatoire si `iconOnly` ; à défaut, l'`aria-label` natif est préservé. */
+    /** Nom accessible. **Obligatoire si `iconOnly`** ; à défaut, l'`aria-label` natif est préservé. @default undefined */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     /** Attribut HTML natif (comportement formulaire), distinct de `mode`. @default 'button' */
     readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
     /** Affiche l'état de chargement et rend le bouton inerte (`aria-busy`). @default false */
-    readonly loading: _angular_core.InputSignal<boolean>;
-    /** Nom de l'icône (rendu via CSS `data-icon`). */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nom de l'icône (rendu via CSS `data-icon`). @default undefined */
     readonly icon: _angular_core.InputSignal<string | undefined>;
     /** Position de l'icône relative au texte. @default 'start' */
     readonly iconPosition: _angular_core.InputSignal<"start" | "end">;
     /** Désactive le bouton. @default false */
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Garde le bouton focusable même désactivé (via `aria-disabled`). @default false (ou KT_BUTTON_CONFIG.disabledInteractive) */
-    readonly disabledInteractive: _angular_core.InputSignal<boolean>;
+    readonly disabledInteractive: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
     constructor();
@@ -66,5 +80,5 @@ declare class KtButton implements AfterViewInit {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtButton, "button[ktButton], a[ktButton]", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { KT_BUTTON_CONFIG, KtButton };
+export { KT_BUTTON_CONFIG, KtButton, provideKtButton };
 export type { KtButtonColor, KtButtonConfig, KtButtonMode, KtButtonSize };

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
 
 /**
  * En-tête de la carte (rangée flex : média/avatar + titre + éventuelle action). Marqueur
@@ -67,6 +67,16 @@ declare class KtCardActions {
  *
  * Quand la carte ancêtre est `disabled`, le lien sort de l'ordre de tabulation (`tabindex="-1"`)
  * et est annoncé `aria-disabled` : une carte inerte ne piège pas le focus clavier (WCAG 2.4.3).
+ *
+ * @example
+ * ```html
+ * <article ktCard interactive>
+ *   <div ktCardContent>
+ *     <h3 id="t1">Titre</h3>
+ *     <a ktCardLink routerLink="/detail" aria-labelledby="t1">Voir le détail</a>
+ *   </div>
+ * </article>
+ * ```
  */
 declare class KtCardLink {
     private readonly host;
@@ -90,6 +100,15 @@ interface KtCardConfig {
     variant: KtCardVariant;
 }
 declare const KT_CARD_CONFIG: InjectionToken<Partial<KtCardConfig>>;
+/**
+ * Fournit des défauts de carte (apparence de surface) pour un sous-arbre ou l'application entière.
+ *
+ * @example
+ * ```ts
+ * providers: [provideKtCard({ variant: 'outlined' })]
+ * ```
+ */
+declare function provideKtCard(config: Partial<KtCardConfig>): Provider;
 /**
  * Carte : SURFACE de contenu. Directive (pas de composant) posée sur l'élément SÉMANTIQUE choisi
  * par le consommateur (`<article>`, `<section>`, `<li>`, `<a>`…) — la lib n'impose jamais de
@@ -117,6 +136,7 @@ declare const KT_CARD_CONFIG: InjectionToken<Partial<KtCardConfig>>;
 declare class KtCard {
     private readonly config;
     private readonly host;
+    private readonly platformId;
     /** Référence réactive sur le lien primaire de la carte */
     readonly cardLink: i0.Signal<KtCardLink | undefined>;
     /** Apparence de la surface : `elevated` | `outlined` | `filled`. @default 'elevated' (ou `KT_CARD_CONFIG.variant`) */
@@ -135,9 +155,9 @@ declare class KtCard {
 
 /**
  * Import ergonomique de toute la famille card en une fois :
- * `imports: [KT_CARD]` au lieu d'énumérer chaque directive.
+ * `imports: [KtCardImports]` au lieu d'énumérer chaque directive.
  */
-declare const KT_CARD: readonly [typeof KtCard, typeof KtCardHeader, typeof KtCardMedia, typeof KtCardContent, typeof KtCardActions, typeof KtCardLink];
+declare const KtCardImports: readonly [typeof KtCard, typeof KtCardHeader, typeof KtCardMedia, typeof KtCardContent, typeof KtCardActions, typeof KtCardLink];
 
-export { KT_CARD, KT_CARD_CONFIG, KtCard, KtCardActions, KtCardContent, KtCardHeader, KtCardLink, KtCardMedia };
+export { KT_CARD_CONFIG, KtCard, KtCardActions, KtCardContent, KtCardHeader, KtCardImports, KtCardLink, KtCardMedia, provideKtCard };
 export type { KtCardConfig, KtCardVariant };

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

@@ -4,7 +4,9 @@ import * as _ktortu_aaa_cdk from '@ktortu/aaa/cdk';
 
 /** Contrôleur de drag-to-dismiss d'une bottom-sheet. À câbler sur le `pointerdown` de la poignée. */
 interface KtSheetDrag {
+    /** Démarre le suivi du glissement ; à brancher sur le `pointerdown` de la poignée. */
     start(event: PointerEvent): void;
+    /** Détache les écouteurs et réinitialise l'état ; à appeler à la destruction. */
     destroy(): void;
 }
 interface KtSheetDragOptions {
@@ -25,6 +27,18 @@ interface KtSheetDragOptions {
  * Geste DOUBLÉ côté appelant par Échap + bouton Fermer + tap-extérieur (WCAG 2.5.1) : ce module ne
  * gère que le glissement. Le gating « écran compact uniquement » reste à l'appelant (signal `isCompact`
  * de `KtViewport`) — la primitive est volontairement agnostique.
+ *
+ * @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
+ * ```ts
+ * const drag = createKtSheetDrag({
+ *   pane: () => paneEl(),
+ *   onDismiss: () => dialogRef.close(),
+ *   draggingClass: 'kt-sheet--dragging',
+ * });
+ * // <div class="handle" (pointerdown)="drag.start($event)"></div>
+ * ```
  */
 declare function createKtSheetDrag(opts: KtSheetDragOptions): KtSheetDrag;
 
@@ -55,20 +69,28 @@ declare const KT_DEFAULT_BREAKPOINTS: KtBreakpoints;
 declare const KT_BREAKPOINTS: InjectionToken<KtBreakpoints>;
 /**
  * À ajouter aux `providers` de `app.config.ts`. Fusionne avec les défauts → surcharge partielle OK.
+ * @param overrides Seuils à surcharger ; les clés absentes gardent leur défaut `KT_DEFAULT_BREAKPOINTS`.
+ * @returns Provider liant `KT_BREAKPOINTS` aux seuils fusionnés.
  * @example provideKtBreakpoints({ tablet: 768, desktop: 1200 })
  * @example provideKtBreakpoints({ tablet: '(min-width: 768px) and (orientation: landscape)' })
  */
 declare function provideKtBreakpoints(overrides: Partial<KtBreakpoints>): Provider;
 /** Trois chaînes de media queries résolues, prêtes pour `matchMedia` / `BreakpointObserver`. */
 interface KtBreakpointMedia {
+    /** Media query de la bande mobile. */
     mobile: string;
+    /** Media query de la bande tablette. */
     tablet: string;
+    /** Media query de la bande desktop. */
     desktop: string;
 }
 /**
  * Convertit les seuils (nombres et/ou chaînes) en 3 media queries. Un palier-chaîne est repris
  * verbatim ; un palier-nombre devient la bande `[plancher courant .. plancher suivant[`. Si le
  * plancher suivant est une chaîne (pas de borne numérique), la bande reste ouverte de ce côté.
+ * @param bp Seuils responsive à convertir (nombres et/ou chaînes).
+ * @returns Les trois media queries résolues (`mobile`, `tablet`, `desktop`).
+ * @example resolveKtBreakpointMedia(KT_DEFAULT_BREAKPOINTS)
  */
 declare function resolveKtBreakpointMedia(bp: KtBreakpoints): KtBreakpointMedia;
 
@@ -98,9 +120,25 @@ declare class KtViewport {
     static ɵprov: i0.ɵɵInjectableDeclaration<KtViewport>;
 }
 
+/**
+ * Génère des identifiants numériques incrémentaux uniques au sein de l'application, soit globalement,
+ * soit par préfixe (compteur dédié). Sert à construire des `anchor-name` / `id` stables et distincts.
+ *
+ * @example
+ * ```ts
+ * const idGen = inject(KtIdGenerator);
+ * const anchor = `--kt-menu-anchor-${idGen.generateId('menu')}`;
+ * ```
+ */
 declare class KtIdGenerator {
     private readonly counters;
     private nextGlobalId;
+    /**
+     * Renvoie le prochain identifiant. Sans `prefix`, utilise le compteur global ; avec `prefix`,
+     * utilise un compteur dédié à ce préfixe (séquences indépendantes).
+     * @param prefix Clé optionnelle de compteur ; chaque préfixe a sa propre séquence.
+     * @returns Le compteur courant (number) pour la portée demandée, avant incrément.
+     */
     generateId(prefix?: string): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<KtIdGenerator, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KtIdGenerator>;

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

@@ -23,7 +23,10 @@ declare class KtDialogTitle {
     private readonly host;
     private readonly renderer;
     private readonly idGen;
-    /** Id de l'hôte câblé en `aria-labelledby` : préserve un id fourni par le consommateur, sinon en génère un. */
+    /**
+     * Id de l'hôte câblé en `aria-labelledby` : préserve un id fourni par le consommateur, sinon en génère un.
+     * @default `host.id` ?? `dialogRef.config.ariaLabelledBy` ?? `kt-dialog-title-<généré>`
+     */
     readonly id: string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<KtDialogTitle, never>;
@@ -50,7 +53,10 @@ declare class KtDialogDescription implements OnInit, OnDestroy {
     private readonly host;
     private readonly renderer;
     private readonly idGen;
-    /** Id de l'hôte câblé en `aria-describedby` : préserve un id fourni par le consommateur, sinon en génère un. */
+    /**
+     * Id de l'hôte câblé en `aria-describedby` : préserve un id fourni par le consommateur, sinon en génère un.
+     * @default `host.id` ?? `dialogRef.config.ariaDescribedBy` ?? `kt-dialog-desc-<généré>`
+     */
     readonly id: string;
     constructor();
     ngOnInit(): void;
@@ -190,12 +196,28 @@ declare class KtDialogSheetHandle {
  * Pour focaliser un élément précis à l'ouverture (ex. éviter un bouton destructeur),
  * passez `autoFocus: '[ktDialogFocusInitial]'` dans la config d'ouverture et posez la
  * directive `ktDialogFocusInitial` sur la cible.
+ *
+ * @example
+ * ```ts
+ * // valeur de base, généralement consommée via provideKtDialogDefaults()
+ * provideKtDialogDefaults({ ...KT_DIALOG_AAA_DEFAULTS });
+ * ```
  */
 declare const KT_DIALOG_AAA_DEFAULTS: DialogConfig;
 /**
  * Enregistre les valeurs par défaut AAA du dialog au niveau application.
  * À ajouter aux `providers` de `app.config.ts`. `overrides` permet d'ajuster sans
  * tout réécrire (ex. `provideKtDialogDefaults({ maxWidth: '40rem' })`).
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [provideKtDialogDefaults({ maxWidth: '40rem' })],
+ * };
+ * ```
+ * @param overrides Surcharges partielles fusionnées par-dessus `KT_DIALOG_AAA_DEFAULTS`.
+ * @returns Un `Provider` pour le token `DEFAULT_DIALOG_CONFIG`.
  */
 declare function provideKtDialogDefaults(overrides?: Partial<DialogConfig>): Provider;
 /**
@@ -215,6 +237,15 @@ type KtDialogPresentation = 'centered' | 'fullscreen' | 'sheet' | 'centered-full
  * `centered-*`, l'appelant fournit `compact` (= `KtViewport.isCompact()`, largeur seule) — centré
  * sur desktop, plein écran / sheet sur écran compact. Fonction pure (testable sans DOM).
  * Appelée par `injectKtDialogOpener` à chaque ouverture ; exportée pour un usage direct éventuel.
+ *
+ * @example
+ * ```ts
+ * resolveKtDialogPanelClass('sheet');               // ['kt-dialog', 'kt-dialog--sheet']
+ * resolveKtDialogPanelClass('centered-sheet', true); // bottom-sheet sur écran compact
+ * ```
+ * @param presentation Présentation choisie par le dev (responsive comprise). Défaut `'centered'`.
+ * @param compact `true` quand l'écran est compact (= `KtViewport.isCompact()`), pour résoudre les variantes `centered-*`. Défaut `false`.
+ * @returns La liste des classes CSS de la présentation concrète résolue.
  */
 declare function resolveKtDialogPanelClass(presentation?: KtDialogPresentation, compact?: boolean): string[];
 
@@ -235,7 +266,7 @@ declare function resolveKtDialogPanelClass(presentation?: KtDialogPresentation,
  */
 declare function injectKtDialogData<T>(): T;
 /** Config d'ouverture sans le champ `data` (fourni séparément, typé), enrichie de `presentation`. */
-type OpenerConfig<D, R, C> = Omit<DialogConfig<D, DialogRef<R, C>>, 'data'> & {
+type KtDialogOpenerConfig<D, R, C> = Omit<DialogConfig<D, DialogRef<R, C>>, 'data'> & {
     /** Présentation du dialog (cf. `KtDialogPresentation`) — choisie par le dev. Résolue à CHAQUE
         ouverture : les variantes responsive lisent le signal d'écran compact. Défaut : `'centered'`.
         Combinée à un éventuel `panelClass` additionnel. */
@@ -258,15 +289,20 @@ type OpenerConfig<D, R, C> = Omit<DialogConfig<D, DialogRef<R, C>>, 'data'> & {
  * // dans un composant/service consommateur
  * private readonly openRename = injectRenameDialog();
  * rename() { this.openRename({ currentName: 'X' }).closed.subscribe(n => {  n: string | undefined  }); }
+ *
+ * @param component Composant à monter dans le dialog.
+ * @param baseConfig Config d'ouverture par défaut (sans `data`), enrichie de `presentation` ; fusionnée à chaque ouverture.
+ * @returns Une closure d'ouverture typée : `() => DialogRef` (sans data) ou `(data, config?) => DialogRef` (avec data).
  */
-declare function injectKtDialogOpener<C, R = unknown>(component: ComponentType<C>, baseConfig?: OpenerConfig<void, R, C>): () => DialogRef<R, C>;
-declare function injectKtDialogOpener<C, D, R = unknown>(component: ComponentType<C>, baseConfig?: OpenerConfig<D, R, C>): (data: D, config?: OpenerConfig<D, R, C>) => DialogRef<R, C>;
+declare function injectKtDialogOpener<C, R = unknown>(component: ComponentType<C>, baseConfig?: KtDialogOpenerConfig<void, R, C>): () => DialogRef<R, C>;
+declare function injectKtDialogOpener<C, D, R = unknown>(component: ComponentType<C>, baseConfig?: KtDialogOpenerConfig<D, R, C>): (data: D, config?: KtDialogOpenerConfig<D, R, C>) => DialogRef<R, C>;
 
 declare class KtDialogContainer extends CdkDialogContainer implements OnInit {
     private readonly dialogRef;
     private readonly elementRef;
     private readonly host;
     private readonly platformId;
+    private readonly destroyRef;
     protected readonly isClosing: i0.WritableSignal<boolean>;
     constructor();
     ngOnInit(): void;
@@ -278,9 +314,9 @@ declare class KtDialogContainer extends CdkDialogContainer implements OnInit {
 
 /**
  * Import ergonomique de toute la famille dialog en une fois :
- * `imports: [KT_DIALOG]` au lieu d'énumérer chaque directive structurelle.
+ * `imports: [KtDialogImports]` au lieu d'énumérer chaque directive structurelle.
  */
-declare const KT_DIALOG: readonly [typeof KtDialogHeader, typeof KtDialogTitle, typeof KtDialogDescription, typeof KtDialogContent, typeof KtDialogActions, typeof KtDialogClose, typeof KtDialogFocusInitial, typeof KtDialogSheetHandle];
+declare const KtDialogImports: readonly [typeof KtDialogHeader, typeof KtDialogTitle, typeof KtDialogDescription, typeof KtDialogContent, typeof KtDialogActions, typeof KtDialogClose, typeof KtDialogFocusInitial, typeof KtDialogSheetHandle];
 
-export { KT_DIALOG, KT_DIALOG_AAA_DEFAULTS, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogSheetHandle, KtDialogTitle, injectKtDialogData, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
-export type { KtDialogPresentation };
+export { KT_DIALOG_AAA_DEFAULTS, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, injectKtDialogData, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
+export type { KtDialogOpenerConfig, KtDialogPresentation };