@ktortu/aaa 0.9.1 → 0.9.2

package/forms/styles/field-box.css

@@ -3,6 +3,7 @@
    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-password-field,
   kt-text-area,
   kt-number-field,
   kt-date-field,
@@ -131,12 +132,14 @@
 
   /* Le bouton « effacer » est une icône INTERNE de la lib : toujours Material Symbols,
    indépendante de --kt-icon-font (sinon un override consommateur casserait la croix). */
-  .kt-field-box__clear .kt-field-box__icon {
+  .kt-field-box__clear .kt-field-box__icon,
+  .kt-field-box__toggle .kt-field-box__icon {
     font-family: 'Material Symbols Outlined';
     font-weight: normal;
   }
 
-  .kt-field-box__clear {
+  .kt-field-box__clear,
+  .kt-field-box__toggle {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -151,7 +154,8 @@
   }
 
   /* Cible tactile AAA 44x44px étendue via un pseudo-élément transparent */
-  .kt-field-box__clear::after {
+  .kt-field-box__clear::after,
+  .kt-field-box__toggle::after {
     content: '';
     position: absolute;
     top: 50%;
@@ -161,11 +165,13 @@
     height: 44px;
   }
 
-  .kt-field-box__clear:hover {
+  .kt-field-box__clear:hover,
+  .kt-field-box__toggle:hover {
     color: var(--field-color, inherit);
   }
 
-  .kt-field-box__clear:focus-visible {
+  .kt-field-box__clear:focus-visible,
+  .kt-field-box__toggle:focus-visible {
     outline: 2px solid var(--field-border-color-focus, #0b57d0);
     outline-offset: 1px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktortu/aaa",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Bibliothèque de composants Angular headless + thémés par tokens CSS.",
   "keywords": [
     "angular",
@@ -73,6 +73,10 @@
       "types": "./types/ktortu-aaa-dialog.d.ts",
       "default": "./fesm2022/ktortu-aaa-dialog.mjs"
     },
+    "./disclosure": {
+      "types": "./types/ktortu-aaa-disclosure.d.ts",
+      "default": "./fesm2022/ktortu-aaa-disclosure.mjs"
+    },
     "./forms": {
       "types": "./types/ktortu-aaa-forms.d.ts",
       "default": "./fesm2022/ktortu-aaa-forms.mjs"
@@ -85,6 +89,10 @@
       "types": "./types/ktortu-aaa-menu.d.ts",
       "default": "./fesm2022/ktortu-aaa-menu.mjs"
     },
+    "./progress-bar": {
+      "types": "./types/ktortu-aaa-progress-bar.d.ts",
+      "default": "./fesm2022/ktortu-aaa-progress-bar.mjs"
+    },
     "./snackbar": {
       "types": "./types/ktortu-aaa-snackbar.d.ts",
       "default": "./fesm2022/ktortu-aaa-snackbar.mjs"

package/progress-bar/progress-bar.css

@@ -0,0 +1,127 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--kt-progress-bar-gap, 8px);
+}
+
+.kt-progress-bar-label {
+  font-family: var(--kt-font-family, sans-serif);
+  font-size: var(--kt-font-size-sm, 0.875rem);
+  color: var(--kt-text-color-secondary, var(--kt-neutral-dark, #555));
+  text-align: var(--kt-progress-bar-label-align, start);
+}
+
+/* Si le label est vide (pas d'input et ng-content vide), on le masque pour éviter le gap */
+.kt-progress-bar-label:empty {
+  display: none;
+}
+
+.kt-progress-bar-track {
+  width: 100%;
+  height: var(--kt-progress-bar-height, 4px);
+  overflow: hidden;
+  background-color: var(--kt-progress-bar-track-color, var(--kt-neutral-light, #e0e0e0));
+  border-radius: var(--kt-progress-bar-border-radius, 2px);
+  position: relative;
+}
+
+.kt-progress-bar-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--kt-progress-bar-indicator-color, var(--kt-primary, #0056b3));
+  transform-origin: top left;
+  transition: transform 250ms ease;
+  will-change: transform;
+}
+
+/* Mode indéterminé : triple animation parallèle dissociée */
+:host([data-mode='indeterminate']) .kt-progress-bar-indicator {
+  animation:
+    kt-progress-bar-indeterminate-translate 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1),
+    kt-progress-bar-indeterminate-scale 2.2s infinite ease-in-out,
+    kt-progress-bar-indeterminate-fade 2.2s infinite linear;
+  transform-origin: left;
+}
+
+/* Masquage visuel accessible (sr-only) */
+.kt-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes kt-progress-bar-indeterminate-translate {
+  0% {
+    translate: -100% 0;
+  }
+  100% {
+    translate: 100% 0;
+  }
+}
+
+@keyframes kt-progress-bar-indeterminate-scale {
+  0% {
+    scale: 0.15 1;
+  }
+  35% {
+    scale: 0.7 1;
+  }
+  70% {
+    scale: 0.4 1;
+  }
+  100% {
+    scale: 0.15 1;
+  }
+}
+
+@keyframes kt-progress-bar-indeterminate-fade {
+  0% {
+    opacity: 0;
+  }
+  15% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* Support pour prefers-reduced-motion ou bypass réduit manuel */
+@media (prefers-reduced-motion: reduce) {
+  :host([data-mode='indeterminate']) .kt-progress-bar-indicator {
+    animation: kt-progress-bar-pulsate 2s infinite ease-in-out;
+    transform: none;
+    transform-origin: center;
+  }
+}
+
+.kt-progress-bar-indicator.kt-reduced-motion {
+  animation: kt-progress-bar-pulsate 2s infinite ease-in-out !important;
+  transform: none !important;
+  transform-origin: center !important;
+}
+
+@keyframes kt-progress-bar-pulsate {
+  0% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}

package/styles/disclosure.css

@@ -0,0 +1,6 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Disclosure (ktDisclosure + déclencheur + panneau) : tokens + apparence. Nécessite le socle.
+     @import '@ktortu/aaa/disclosure.css'; */
+@import '../disclosure/disclosure-tokens.css';
+@import '../disclosure/disclosure.css';

package/styles/progress-bar.css

@@ -0,0 +1,5 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Barre de progression (kt-progress-bar) : apparence. Nécessite le socle (@ktortu/aaa/foundation.css).
+     @import '@ktortu/aaa/progress-bar.css'; */
+@import '../progress-bar/progress-bar.css';

package/styles/styles.css

@@ -23,3 +23,5 @@
 @import './dialog.css';
 @import './menu.css';
 @import './snackbar.css';
+@import './disclosure.css';
+@import './progress-bar.css';

package/themes/theme-cyberpunk.css

@@ -138,6 +138,10 @@
   --tab-radius: 6px 6px 0 0;
   --tab-border: none;
   --tab-margin: 0 4px 0 0;
+
+  /* ============ Progress Bar ============ */
+  --kt-progress-bar-track-color: #10182a;
+  --kt-progress-bar-indicator-color: transparent;
 }
 
 /* Fills DUOTONE cyan→magenta (ex-Synthwave) : niveau élément pour substituer var(--btn-fill) ;
@@ -158,6 +162,13 @@
   --btn-shadow-focus: 0 0 16px color-mix(in srgb, var(--btn-fg) 75%, transparent);
 }
 
+[data-theme='cyberpunk'] .kt-progress-bar-indicator {
+  background-image: linear-gradient(90deg, #28d6ef, #ff3d8b);
+  box-shadow:
+    0 0 8px rgb(40 214 239 / 60%),
+    0 0 12px rgb(255 61 139 / 40%);
+}
+
 /* LASER en bord HAUT des cartes : ligne néon qui balaie (signature « partout »). Le pseudo
    est libre (le lien étiré utilise ::after du lien, pas de la carte). z-index au-dessus du média. */
 [data-theme='cyberpunk'] [ktCard] {

package/tooltip/tooltip.css

@@ -28,7 +28,7 @@
     white-space: pre-line; /* Interprète les \n et les sauts de ligne dans les chaînes de texte */
     box-shadow: 0 4px 12px color-mix(in srgb, #000 25%, transparent);
     pointer-events: auto; /* requis pour le « hoverable » (WCAG 1.4.13) */
-    user-select: text; /* Corrigé : Permet la sélection et traduction du texte */
+    user-select: text; /* Autorise la sélection et la traduction du texte du tooltip. */
     cursor: default;
   }
 

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

@@ -44,7 +44,9 @@ declare class KtButton implements AfterViewInit {
     private readonly config;
     private readonly host;
     private readonly platformId;
+    private isDestroyed;
     private readonly viewInitialized;
+    private readonly auditEnabled;
     protected readonly isLink: boolean;
     private readonly nativeAriaLabel;
     /** Emphase visuelle du bouton (apparence, ≠ `type`). @default 'filled' (ou KT_BUTTON_CONFIG.mode) */

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

@@ -80,6 +80,7 @@ declare class KtCardActions {
  */
 declare class KtCardLink {
     private readonly host;
+    private readonly auditEnabled;
     /**
      * Carte ancêtre, injectée optionnellement via `inject(Card, { optional: true })` (DI par
      * hiérarchie d'éléments) : `null` si [ktCardLink] est utilisé hors d'une [ktCard]. Sert à relayer
@@ -137,6 +138,7 @@ declare class KtCard {
     private readonly config;
     private readonly host;
     private readonly platformId;
+    private readonly auditEnabled;
     /** 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`) */
@@ -148,6 +150,7 @@ declare class KtCard {
     readonly interactive: i0.InputSignalWithTransform<boolean, unknown>;
     /** Rend la surface inerte (état `data-disabled`). @default false */
     readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    private isDestroyed;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<KtCard, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KtCard, "[ktCard]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["cardLink"], never, true, never>;

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

@@ -42,6 +42,26 @@ interface KtSheetDragOptions {
  */
 declare function createKtSheetDrag(opts: KtSheetDragOptions): KtSheetDrag;
 
+/**
+ * Verrou de défilement du `<body>` à COMPTEUR DE RÉFÉRENCES, partagé (`providedIn: 'root'`).
+ *
+ * Plusieurs surfaces modales simultanées (sheets, popups) peuvent verrouiller le scroll du fond :
+ * `overflow: hidden` n'est posé qu'au premier `lock()` et restauré (à sa valeur d'origine) qu'au
+ * dernier `unlock()`. Sans ce compteur, deux consommateurs par-instance se désynchronisent — la
+ * fermeture du premier restaure le scroll alors que le second est encore ouvert.
+ */
+declare class KtBodyScrollLock {
+    private readonly doc;
+    private count;
+    private previousOverflow;
+    /** Pose un verrou (premier appelant : mémorise puis force `overflow: hidden`). */
+    lock(): void;
+    /** Relâche un verrou ; restaure l'`overflow` d'origine quand le dernier consommateur relâche. */
+    unlock(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KtBodyScrollLock, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KtBodyScrollLock>;
+}
+
 /**
  * Valeur d'un palier de breakpoint, CONFIGURABLE PAR APPLICATION :
  * - un **nombre** = largeur (px) à partir de laquelle le palier commence ; la lib en dérive une
@@ -144,5 +164,11 @@ declare class KtIdGenerator {
     static ɵprov: i0.ɵɵInjectableDeclaration<KtIdGenerator>;
 }
 
-export { KT_BREAKPOINTS, KT_DEFAULT_BREAKPOINTS, KtIdGenerator, KtViewport, createKtSheetDrag, provideKtBreakpoints, resolveKtBreakpointMedia };
+/**
+ * InjectionToken permettant d'activer ou désactiver les audits d'accessibilité à l'exécution
+ * (gardes-fous console.warn en mode dev). Activé par défaut si `isDevMode()` est vrai.
+ */
+declare const KT_AUDIT_ENABLED: InjectionToken<boolean>;
+
+export { KT_AUDIT_ENABLED, KT_BREAKPOINTS, KT_DEFAULT_BREAKPOINTS, KtBodyScrollLock, KtIdGenerator, KtViewport, createKtSheetDrag, provideKtBreakpoints, resolveKtBreakpointMedia };
 export type { KtBreakpointMedia, KtBreakpointValue, KtBreakpoints, KtSheetDrag, KtSheetDragOptions };

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

@@ -249,16 +249,6 @@ type KtDialogPresentation = 'centered' | 'fullscreen' | 'sheet' | 'centered-full
  */
 declare function resolveKtDialogPanelClass(presentation?: KtDialogPresentation, compact?: boolean): string[];
 
-/**
- * ⚠️ API BAS-NIVEAU — n'utilisez PAS ceci par défaut. Pour implémenter un dialog, passez par
- * {@link defineKtDialog} et son `injectData()` (qui lie le type des données à l'ouvreur).
- *
- * Sucre typé pour récupérer les données injectées dans un composant de dialogue (`DIALOG_DATA`).
- * Le type `T` est affirmé ICI indépendamment de l'ouvreur : rien ne garantit qu'il corresponde au
- * type passé à `injectKtDialogOpener` → risque de divergence silencieuse. À réserver à un cas où
- * `defineKtDialog` ne convient pas.
- */
-declare function injectKtDialogData<T>(): T;
 /** Config d'ouverture sans le champ `data` (fourni séparément, typé), enrichie de `presentation`. */
 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
@@ -359,15 +349,18 @@ interface KtDialogContract<D, R> {
  */
 declare function defineKtDialog<D = void, R = unknown>(): KtDialogContract<D, R>;
 
-declare class KtDialogContainer extends CdkDialogContainer implements OnInit {
+declare class KtDialogContainer extends CdkDialogContainer {
     private readonly dialogRef;
     private readonly elementRef;
     private readonly host;
     private readonly platformId;
-    private readonly destroyRef;
     protected readonly isClosing: i0.WritableSignal<boolean>;
+    /** 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
+        renomme ce membre, on dégrade proprement vers `null` au lieu de casser le rendu du conteneur. */
+    protected get ariaLabelledBy(): string | null;
     constructor();
-    ngOnInit(): void;
     protected isSheet(): boolean;
     private animateAndClose;
     static ɵfac: i0.ɵɵFactoryDeclaration<KtDialogContainer, never>;
@@ -380,5 +373,5 @@ declare class KtDialogContainer extends CdkDialogContainer implements OnInit {
  */
 declare const KtDialogImports: readonly [typeof KtDialogHeader, typeof KtDialogTitle, typeof KtDialogDescription, typeof KtDialogContent, typeof KtDialogActions, typeof KtDialogClose, typeof KtDialogFocusInitial, typeof KtDialogSheetHandle];
 
-export { KT_DIALOG_AAA_DEFAULTS, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, defineKtDialog, injectKtDialogData, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
+export { KT_DIALOG_AAA_DEFAULTS, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, defineKtDialog, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
 export type { KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };

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

@@ -0,0 +1,112 @@
+import * as i0 from '@angular/core';
+
+/**
+ * Déclencheur d'un [ktDisclosure] : posé sur un **vrai `<button>`** (clavier Entrée/Espace
+ * gratuit). Câble `(click)` → `toggle()` et reflète l'état via `aria-expanded` / `aria-controls`
+ * (cf. ADR-0004). `type="button"` est posé **s'il est absent** (ne pas soumettre un formulaire,
+ * sans écraser un `type` explicite du consommateur).
+ *
+ * Le contenu du bouton appartient au consommateur (texte, icône, libellé piloté par `expanded()`). Un
+ * **chevron** décoratif (qui pivote selon l'état) est affiché par défaut ; le désactiver avec
+ * `[chevron]="false"`. La directive applique elle-même la classe de style — rien à écrire.
+ *
+ * @example
+ * ```html
+ * <button ktDisclosureToggle>Détails</button>                    <!-- avec chevron -->
+ * <button ktDisclosureToggle [chevron]="false">Détails</button>  <!-- sans chevron -->
+ * ```
+ */
+declare class KtDisclosureToggle {
+    readonly disclosure: KtDisclosure;
+    private readonly host;
+    private readonly auditEnabled;
+    private isDestroyed;
+    /** Affiche le chevron décoratif (qui pivote selon l'état). @default true */
+    readonly chevron: i0.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KtDisclosureToggle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KtDisclosureToggle, "button[ktDisclosureToggle]", never, { "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Panneau repliable d'un [ktDisclosure]. **Composant** (et non directive) car l'animation grid
+ * `0fr ↔ 1fr` exige un **unique enfant `overflow:hidden`** autour du contenu projeté — ce wrapper
+ * (`.kt-disclosure-content__inner`) est fourni par le template, le consommateur reste libre d'y
+ * mettre autant de blocs qu'il veut.
+ *
+ * Porte l'`id` (cible de `aria-controls`) et passe **`inert`** quand c'est fermé : le contenu
+ * masqué sort de l'ordre de tabulation et de l'arbre d'accessibilité (jamais de focus dans
+ * l'invisible). Pas de `role=region` (anti-pollution du rotor de régions). Cf. ADR-0004.
+ *
+ * @example
+ * ```html
+ * <kt-disclosure-content>
+ *   <p>Premier bloc</p>
+ *   <p>Second bloc…</p>
+ * </kt-disclosure-content>
+ * ```
+ */
+declare class KtDisclosureContent {
+    readonly disclosure: KtDisclosure;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KtDisclosureContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KtDisclosureContent, "kt-disclosure-content", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Disclosure : replie/déplie un **bloc d'interface** (volet d'options, module de dashboard,
+ * section d'une fiche produit). Directive HÔTE d'une famille à trois marqueurs — elle possède
+ * l'état, génère l'`id` du panneau et expose des méthodes impératives ; le câblage ARIA et
+ * l'animation vivent sur `[ktDisclosureToggle]` / `<kt-disclosure-content>`.
+ *
+ * Pour une **section de contenu** de page (façon Wikipédia / FAQ), préférer `<details>` natif
+ * (sémantique, find-in-page, SEO, zéro JS) — cf. ADR-0004.
+ *
+ * L'état est exposé via `exportAs: 'ktDisclosure'` : lisez `expanded()` pour piloter le template
+ * (ex. libellé « Voir plus / Voir moins ») sans input de libellé (i18n côté consommateur,
+ * cf. ADR-0003).
+ *
+ * Contrat : **un** `[ktDisclosureToggle]` et **un** `<kt-disclosure-content>` par hôte (id de
+ * panneau unique / `aria-controls` non ambigu) ; un avertissement dev le signale sinon.
+ *
+ * @example
+ * ```html
+ * <div ktDisclosure #d="ktDisclosure">
+ *   <button ktDisclosureToggle>{{ d.expanded() ? 'Voir moins' : 'Voir plus' }}</button>
+ *   <kt-disclosure-content><p>Mon contenu</p></kt-disclosure-content>
+ * </div>
+ * ```
+ */
+declare class KtDisclosure {
+    private readonly idGen;
+    private readonly host;
+    private isDestroyed;
+    /** Identifiant stable du panneau contrôlé : cible de l'`aria-controls` du déclencheur. */
+    readonly contentId: string;
+    /**
+     * État ouvert/fermé. **Toujours utilisé en binding** (`[(expanded)]` / `[expanded]`), jamais en
+     * attribut nu : un `model()` n'accepte pas de `booleanAttribute`, donc `<div ktDisclosure expanded>`
+     * pousserait la chaîne `''` au lieu de `true`. En binding, la valeur est garantie booléenne.
+     * @default false
+     */
+    readonly expanded: i0.ModelSignal<boolean>;
+    private readonly auditEnabled;
+    readonly toggles: i0.Signal<readonly KtDisclosureToggle[]>;
+    readonly contents: i0.Signal<readonly KtDisclosureContent[]>;
+    constructor();
+    /** Bascule l'état. */
+    toggle(): void;
+    /** Ouvre le panneau. */
+    expand(): void;
+    /** Ferme le panneau. */
+    collapse(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KtDisclosure, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KtDisclosure, "[ktDisclosure]", ["ktDisclosure"], { "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, ["toggles", "contents"], never, true, never>;
+}
+
+/**
+ * Import ergonomique de toute la famille disclosure en une fois :
+ * `imports: [KtDisclosureImports]` au lieu d'énumérer chaque marqueur.
+ */
+declare const KtDisclosureImports: readonly [typeof KtDisclosure, typeof KtDisclosureToggle, typeof KtDisclosureContent];
+
+export { KtDisclosure, KtDisclosureContent, KtDisclosureImports, KtDisclosureToggle };