@ktortu/aaa 0.9.1 → 0.9.2

package/fesm2022/ktortu-aaa-forms.mjs

@@ -1,8 +1,8 @@
+import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, computed, ElementRef, Directive, input, output, booleanAttribute, contentChild, viewChild, forwardRef, ChangeDetectionStrategy, Component, Injectable, model, TemplateRef, afterNextRender, isDevMode, effect, NgZone, PLATFORM_ID, DestroyRef, signal, untracked, Injector, ChangeDetectorRef, viewChildren, LOCALE_ID, Pipe } from '@angular/core';
+import { InjectionToken, inject, computed, ElementRef, Directive, input, output, booleanAttribute, contentChild, TemplateRef, forwardRef, ChangeDetectionStrategy, Component, Injectable, model, viewChild, signal, afterNextRender, isDevMode, DestroyRef, effect, PLATFORM_ID, untracked, Injector, ChangeDetectorRef, viewChildren, afterRenderEffect, LOCALE_ID, Pipe } from '@angular/core';
 import { KtTooltip } from '@ktortu/aaa/tooltip';
-import { KtIdGenerator, KtViewport, createKtSheetDrag } from '@ktortu/aaa/cdk';
-import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { KtIdGenerator, KT_AUDIT_ENABLED, KtBodyScrollLock, KtViewport, createKtSheetDrag } from '@ktortu/aaa/cdk';
 import { transformedValue } from '@angular/forms/signals';
 import { Listbox, Option } from '@angular/aria/listbox';
 import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';
@@ -142,14 +142,6 @@ class KtField {
     // Le contrôle est projeté : l'injection DI ne le traverse pas, on le cible via contentChild.
     control = contentChild(KtFieldControl, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
-    // Détecte le tooltip d'aide standard défini dans field.html (input DX)
-    templateTooltip = viewChild(KtTooltip, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templateTooltip" }] : /* istanbul ignore next */ []));
-    // Détecte un tooltip d'aide custom projeté dans le slot ktFieldHelp
-    projectedTooltip = contentChild(KtTooltip, { ...(ngDevMode ? { debugName: "projectedTooltip" } : /* istanbul ignore next */ {}), descendants: true });
-    // Résout le tooltip actif
-    activeTooltip = computed(() => this.projectedTooltip() ?? this.templateTooltip(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeTooltip" }] : /* istanbul ignore next */ []));
     idGen = inject(KtIdGenerator);
     uid = this.idGen.generateId('field');
     baseId = computed(() => this.fieldId() ?? `kt-field-${this.uid}`, /* @ts-ignore */
@@ -160,6 +152,28 @@ class KtField {
     ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
     errorId = computed(() => `${this.baseId()}-error`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    helpId = computed(() => `${this.baseId()}-help`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helpId" }] : /* istanbul ignore next */ []));
+    // `helpText` accepte texte simple OU TemplateRef : on sépare les deux pour la copie cachée (a11y).
+    helpTemplate = computed(() => {
+        const help = this.helpText();
+        return help instanceof TemplateRef ? help : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helpTemplate" }] : /* istanbul ignore next */ []));
+    helpString = computed(() => {
+        const help = this.helpText();
+        return typeof help === 'string' ? help : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helpString" }] : /* istanbul ignore next */ []));
+    // Aide réellement signifiante : texte non blanc, ou TemplateRef. Un texte vide/blanc rend le
+    // bouton d'aide (DX) mais ne doit PAS être référencé par aria-describedby (rien à annoncer).
+    hasHelp = computed(() => {
+        const help = this.helpText();
+        if (help == null)
+            return false;
+        return typeof help === 'string' ? help.trim().length > 0 : true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHelp" }] : /* istanbul ignore next */ []));
     hasError = computed(() => this.invalid() && this.errors().length > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     // Hint visible sauf s'il est masqué en erreur (option façon Material).
@@ -174,11 +188,11 @@ class KtField {
             ids.push(this.hintId());
         if (this.hasError())
             ids.push(this.errorId());
-        // Liaison a11y automatique avec le Tooltip d'aide actif (si présent et actif)
-        const tooltip = this.activeTooltip();
-        if (tooltip && tooltip.isActive()) {
-            ids.push(tooltip.idForA11y);
-        }
+        // Aide contextuelle : référence une copie TOUJOURS présente (visually-hidden) du texte d'aide.
+        // Le tooltip visuel n'est créé dans le DOM qu'à l'affichage ; cette copie garantit que les
+        // technologies d'assistance trouvent toujours la description, sans référence pendante.
+        if (this.hasHelp())
+            ids.push(this.helpId());
         // Ajout de l'ID personnalisé externe (decouplage complet)
         const custom = this.customDescribedBy();
         if (custom)
@@ -192,15 +206,15 @@ class KtField {
         this.helpClick.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtField, isStandalone: true, selector: "kt-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpLabel: { classPropertyName: "helpLabel", publicName: "helpLabel", isSignal: true, isRequired: false, transformFunction: null }, customDescribedBy: { classPropertyName: "customDescribedBy", publicName: "customDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, hideHintWhenInvalid: { classPropertyName: "hideHintWhenInvalid", publicName: "hideHintWhenInvalid", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { helpClick: "helpClick" }, host: { properties: { "attr.data-appearance": "resolvedAppearance()", "attr.data-float-label": "resolvedFloatLabel()" } }, providers: [{ provide: KT_FIELD, useExisting: forwardRef(() => KtField) }], queries: [{ propertyName: "control", first: true, predicate: KtFieldControl, descendants: true, isSignal: true }, { propertyName: "projectedTooltip", first: true, predicate: KtTooltip, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "templateTooltip", first: true, predicate: KtTooltip, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kt-field__header\">\n  @if (label(); as labelText) {\n    <label class=\"kt-field__label\" [id]=\"labelId()\" [for]=\"baseId()\">\n      {{ labelText }}\n      @if (required()) {\n        <span class=\"kt-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (helpText(); as help) {\n    <button\n      type=\"button\"\n      class=\"kt-field__help\"\n      [ktTooltip]=\"help\"\n      [attr.aria-label]=\"helpLabel()\"\n      [attr.aria-describedby]=\"null\"\n      (click)=\"onHelpClick($event)\"\n    >\n      <span class=\"kt-field__help-icon\" aria-hidden=\"true\">help</span>\n    </button>\n  }\n\n  <ng-content select=\"[ktFieldHelp]\" />\n</div>\n\n<div class=\"kt-field__control\">\n  <ng-content />\n</div>\n\n@if (showHint()) {\n  <p class=\"kt-field__hint\" [id]=\"hintId()\">{{ hint() }}</p>\n}\n\n<!-- R\u00E9gion live toujours pr\u00E9sente : les AT annoncent l'erreur d\u00E8s son apparition. -->\n<p class=\"kt-field__error\" [id]=\"errorId()\" aria-live=\"polite\">\n  @if (hasError()) {\n    @for (error of displayedErrors(); track $index) {\n      <span class=\"kt-field__error-message\">{{ error.message }}</span>\n    }\n  }\n</p>\n", styles: ["@layer kt-aaa.components{:host{display:flex;flex-direction:column;gap:var(--field-gap, .375rem);font-size:var(--field-font-size, 1rem);color:var(--field-color, inherit)}.kt-field__header{display:flex;align-items:center;gap:.375rem}.kt-field__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);text-transform:var(--field-label-transform, none);letter-spacing:var(--field-label-letter-spacing, normal);color:var(--field-label-color, inherit)}.kt-field__help{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--field-icon-color, #474747);cursor:pointer;position:relative}.kt-field__help:after{content:\"\";position:absolute;inset:-12px}.kt-field__help-icon{font-family:Material Symbols Outlined;font-size:1.25rem;line-height:1;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.kt-field__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-field__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-field__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-field__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-field__error-message{animation:none}}}\n"], dependencies: [{ kind: "directive", type: KtTooltip, selector: "[ktTooltip]", inputs: ["ktTooltip", "tooltipPosition", "tooltipDisabled", "showDelay", "hideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtField, isStandalone: true, selector: "kt-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpLabel: { classPropertyName: "helpLabel", publicName: "helpLabel", isSignal: true, isRequired: false, transformFunction: null }, customDescribedBy: { classPropertyName: "customDescribedBy", publicName: "customDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, hideHintWhenInvalid: { classPropertyName: "hideHintWhenInvalid", publicName: "hideHintWhenInvalid", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { helpClick: "helpClick" }, host: { properties: { "attr.data-appearance": "resolvedAppearance()", "attr.data-float-label": "resolvedFloatLabel()" } }, providers: [{ provide: KT_FIELD, useExisting: forwardRef(() => KtField) }], queries: [{ propertyName: "control", first: true, predicate: KtFieldControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kt-field__header\">\n  @if (label(); as labelText) {\n    <label class=\"kt-field__label\" [id]=\"labelId()\" [for]=\"baseId()\">\n      {{ labelText }}\n      @if (required()) {\n        <span class=\"kt-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (helpText(); as help) {\n    <button\n      type=\"button\"\n      class=\"kt-field__help\"\n      [ktTooltip]=\"help\"\n      [attr.aria-label]=\"helpLabel()\"\n      [attr.aria-describedby]=\"null\"\n      (click)=\"onHelpClick($event)\"\n    >\n      <span class=\"kt-field__help-icon\" aria-hidden=\"true\">help</span>\n    </button>\n  }\n\n  <ng-content select=\"[ktFieldHelp]\" />\n</div>\n\n<div class=\"kt-field__control\">\n  <ng-content />\n</div>\n\n@if (hasHelp()) {\n  <!-- Copie de l'aide TOUJOURS pr\u00E9sente (visually-hidden) : cible stable d'aria-describedby du\n       contr\u00F4le, alors que la bulle visuelle du tooltip n'existe dans le DOM qu'\u00E0 l'affichage. -->\n  <span [id]=\"helpId()\" class=\"kt-field__help-description\">\n    @if (helpTemplate(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n      {{ helpString() }}\n    }\n  </span>\n}\n\n@if (showHint()) {\n  <p class=\"kt-field__hint\" [id]=\"hintId()\">{{ hint() }}</p>\n}\n\n<!-- R\u00E9gion live toujours pr\u00E9sente : les AT annoncent l'erreur d\u00E8s son apparition. -->\n<p class=\"kt-field__error\" [id]=\"errorId()\" aria-live=\"polite\">\n  @if (hasError()) {\n    @for (error of displayedErrors(); track $index) {\n      <span class=\"kt-field__error-message\">{{ error.message }}</span>\n    }\n  }\n</p>\n", styles: ["@layer kt-aaa.components{:host{display:flex;flex-direction:column;gap:var(--field-gap, .375rem);font-size:var(--field-font-size, 1rem);color:var(--field-color, inherit)}.kt-field__header{display:flex;align-items:center;gap:.375rem}.kt-field__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);text-transform:var(--field-label-transform, none);letter-spacing:var(--field-label-letter-spacing, normal);color:var(--field-label-color, inherit)}.kt-field__help{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--field-icon-color, #474747);cursor:pointer;position:relative}.kt-field__help:after{content:\"\";position:absolute;inset:-12px}.kt-field__help-icon{font-family:Material Symbols Outlined;font-size:1.25rem;line-height:1;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.kt-field__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-field__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-field__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-field__help-description{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kt-field__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-field__error-message{animation:none}}}\n"], dependencies: [{ kind: "directive", type: KtTooltip, selector: "[ktTooltip]", inputs: ["ktTooltip", "tooltipPosition", "tooltipDisabled", "showDelay", "hideDelay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtField, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-field', imports: [KtTooltip], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'kt-field', imports: [KtTooltip, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-appearance]': 'resolvedAppearance()',
                         '[attr.data-float-label]': 'resolvedFloatLabel()',
-                    }, providers: [{ provide: KT_FIELD, useExisting: forwardRef(() => KtField) }], template: "<div class=\"kt-field__header\">\n  @if (label(); as labelText) {\n    <label class=\"kt-field__label\" [id]=\"labelId()\" [for]=\"baseId()\">\n      {{ labelText }}\n      @if (required()) {\n        <span class=\"kt-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (helpText(); as help) {\n    <button\n      type=\"button\"\n      class=\"kt-field__help\"\n      [ktTooltip]=\"help\"\n      [attr.aria-label]=\"helpLabel()\"\n      [attr.aria-describedby]=\"null\"\n      (click)=\"onHelpClick($event)\"\n    >\n      <span class=\"kt-field__help-icon\" aria-hidden=\"true\">help</span>\n    </button>\n  }\n\n  <ng-content select=\"[ktFieldHelp]\" />\n</div>\n\n<div class=\"kt-field__control\">\n  <ng-content />\n</div>\n\n@if (showHint()) {\n  <p class=\"kt-field__hint\" [id]=\"hintId()\">{{ hint() }}</p>\n}\n\n<!-- R\u00E9gion live toujours pr\u00E9sente : les AT annoncent l'erreur d\u00E8s son apparition. -->\n<p class=\"kt-field__error\" [id]=\"errorId()\" aria-live=\"polite\">\n  @if (hasError()) {\n    @for (error of displayedErrors(); track $index) {\n      <span class=\"kt-field__error-message\">{{ error.message }}</span>\n    }\n  }\n</p>\n", styles: ["@layer kt-aaa.components{:host{display:flex;flex-direction:column;gap:var(--field-gap, .375rem);font-size:var(--field-font-size, 1rem);color:var(--field-color, inherit)}.kt-field__header{display:flex;align-items:center;gap:.375rem}.kt-field__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);text-transform:var(--field-label-transform, none);letter-spacing:var(--field-label-letter-spacing, normal);color:var(--field-label-color, inherit)}.kt-field__help{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--field-icon-color, #474747);cursor:pointer;position:relative}.kt-field__help:after{content:\"\";position:absolute;inset:-12px}.kt-field__help-icon{font-family:Material Symbols Outlined;font-size:1.25rem;line-height:1;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.kt-field__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-field__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-field__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-field__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-field__error-message{animation:none}}}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], helpLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpLabel", required: false }] }], customDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "customDescribedBy", required: false }] }], helpClick: [{ type: i0.Output, args: ["helpClick"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: false }] }], hideHintWhenInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHintWhenInvalid", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtFieldControl), { isSignal: true }] }], templateTooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KtTooltip), { isSignal: true }] }], projectedTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtTooltip), { ...{ descendants: true }, isSignal: true }] }] } });
+                    }, providers: [{ provide: KT_FIELD, useExisting: forwardRef(() => KtField) }], template: "<div class=\"kt-field__header\">\n  @if (label(); as labelText) {\n    <label class=\"kt-field__label\" [id]=\"labelId()\" [for]=\"baseId()\">\n      {{ labelText }}\n      @if (required()) {\n        <span class=\"kt-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (helpText(); as help) {\n    <button\n      type=\"button\"\n      class=\"kt-field__help\"\n      [ktTooltip]=\"help\"\n      [attr.aria-label]=\"helpLabel()\"\n      [attr.aria-describedby]=\"null\"\n      (click)=\"onHelpClick($event)\"\n    >\n      <span class=\"kt-field__help-icon\" aria-hidden=\"true\">help</span>\n    </button>\n  }\n\n  <ng-content select=\"[ktFieldHelp]\" />\n</div>\n\n<div class=\"kt-field__control\">\n  <ng-content />\n</div>\n\n@if (hasHelp()) {\n  <!-- Copie de l'aide TOUJOURS pr\u00E9sente (visually-hidden) : cible stable d'aria-describedby du\n       contr\u00F4le, alors que la bulle visuelle du tooltip n'existe dans le DOM qu'\u00E0 l'affichage. -->\n  <span [id]=\"helpId()\" class=\"kt-field__help-description\">\n    @if (helpTemplate(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n      {{ helpString() }}\n    }\n  </span>\n}\n\n@if (showHint()) {\n  <p class=\"kt-field__hint\" [id]=\"hintId()\">{{ hint() }}</p>\n}\n\n<!-- R\u00E9gion live toujours pr\u00E9sente : les AT annoncent l'erreur d\u00E8s son apparition. -->\n<p class=\"kt-field__error\" [id]=\"errorId()\" aria-live=\"polite\">\n  @if (hasError()) {\n    @for (error of displayedErrors(); track $index) {\n      <span class=\"kt-field__error-message\">{{ error.message }}</span>\n    }\n  }\n</p>\n", styles: ["@layer kt-aaa.components{:host{display:flex;flex-direction:column;gap:var(--field-gap, .375rem);font-size:var(--field-font-size, 1rem);color:var(--field-color, inherit)}.kt-field__header{display:flex;align-items:center;gap:.375rem}.kt-field__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);text-transform:var(--field-label-transform, none);letter-spacing:var(--field-label-letter-spacing, normal);color:var(--field-label-color, inherit)}.kt-field__help{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--field-icon-color, #474747);cursor:pointer;position:relative}.kt-field__help:after{content:\"\";position:absolute;inset:-12px}.kt-field__help-icon{font-family:Material Symbols Outlined;font-size:1.25rem;line-height:1;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.kt-field__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-field__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-field__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-field__help-description{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kt-field__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-field__error-message{animation:none}}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], helpLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpLabel", required: false }] }], customDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "customDescribedBy", required: false }] }], helpClick: [{ type: i0.Output, args: ["helpClick"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: false }] }], hideHintWhenInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHintWhenInvalid", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtFieldControl), { isSignal: true }] }] } });
 
 /**
  * Lit un param typé d'une `ValidationError` (ex. `min`, `minLength`, `maxLength`, `minDate`…).
@@ -614,13 +628,6 @@ class KtTextArea extends KtBaseInputField {
     /** Plafond de caractères ; poussé par le form (validateur maxLength) ou par le consommateur. @default undefined */
     maxLength = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
-    /** Motifs de validation (contrat Signal Forms). L'attribut natif `pattern` ne prend qu'une regex →
-        seule la première est posée. @default [] */
-    pattern = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
-    /** Source de la première regex pour l'attribut `pattern` natif (`null` si aucune). */
-    patternAttr = computed(() => this.pattern()[0]?.source ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "patternAttr" }] : /* istanbul ignore next */ []));
     parse(raw) {
         return raw;
     }
@@ -631,12 +638,12 @@ class KtTextArea extends KtBaseInputField {
         return value.length === 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTextArea, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTextArea, isStandalone: true, selector: "kt-text-area", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    data-multiline\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <textarea\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [value]=\"value()\"\n      [rows]=\"rows()\"\n      [style.min-height.lh]=\"rows()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    ></textarea>\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTextArea, isStandalone: true, selector: "kt-text-area", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    data-multiline\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <textarea\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [value]=\"value()\"\n      [rows]=\"rows()\"\n      [style.min-height.lh]=\"rows()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    ></textarea>\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTextArea, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-text-area', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    data-multiline\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <textarea\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [value]=\"value()\"\n      [rows]=\"rows()\"\n      [style.min-height.lh]=\"rows()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    ></textarea>\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }] } });
+            args: [{ selector: 'kt-text-area', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    data-multiline\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <textarea\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [value]=\"value()\"\n      [rows]=\"rows()\"\n      [style.min-height.lh]=\"rows()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    ></textarea>\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
 
 /**
  * Champ texte (valeur `string`) intégré aux Signal Forms via `FormValueControl`. Hérite de la
@@ -696,6 +703,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             args: [{ selector: 'kt-text-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }] } });
 
+/**
+ * Champ mot de passe (valeur `string`) intégré aux Signal Forms via `FormValueControl`.
+ * Inclut un bouton pour masquer/afficher la saisie en clair de manière accessible.
+ *
+ * @example
+ * ```html
+ * <kt-password-field label="Mot de passe" [(value)]="password" required />
+ * ```
+ */
+class KtPasswordField extends KtBaseInputField {
+    /** Valeur saisie (two-way). @default '' */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Plancher de caractères (attribut `minlength` natif ; poussé par le validateur minLength). @default undefined */
+    minLength = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minLength" }] : /* istanbul ignore next */ []));
+    /** Plafond de caractères (attribut `maxlength` natif ; poussé par le validateur maxLength). @default undefined */
+    maxLength = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    /** Motifs de validation. @default [] */
+    pattern = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+    /** Source de la première regex pour l'attribut `pattern` natif (`null` si aucune). */
+    patternAttr = computed(() => this.pattern()[0]?.source ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "patternAttr" }] : /* istanbul ignore next */ []));
+    /** Indice d'autoremplissage effectif (par défaut 'current-password'). */
+    resolvedAutocomplete = computed(() => this.autocomplete() ?? 'current-password', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAutocomplete" }] : /* istanbul ignore next */ []));
+    /** État de visibilité du mot de passe en clair. @default false */
+    isPasswordVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPasswordVisible" }] : /* istanbul ignore next */ []));
+    /** Type natif de l'input selon l'état de visibilité. */
+    inputType = computed(() => (this.isPasswordVisible() ? 'text' : 'password'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId('password-field');
+    inputId = computed(() => this.id() ?? `kt-password-field-${this.uid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    parse(raw) {
+        return raw;
+    }
+    emptyValue() {
+        return '';
+    }
+    isEmpty(value) {
+        return value.length === 0;
+    }
+    /**
+     * Bascule l'état de visibilité du mot de passe.
+     * Utilise preventDefault() pour empêcher l'input de perdre le focus.
+     */
+    toggleVisibility(event) {
+        event.preventDefault();
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.isPasswordVisible.update((visible) => !visible);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtPasswordField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtPasswordField, isStandalone: true, selector: "kt-password-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"inputId()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"resolvedAutocomplete()\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"kt-field-box__toggle\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-label]=\"isPasswordVisible() ? 'Masquer le mot de passe' : 'Afficher le mot de passe'\"\n      [attr.aria-controls]=\"inputId()\"\n      (mousedown)=\"toggleVisibility($event)\"\n    >\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">\n        {{ isPasswordVisible() ? 'visibility_off' : 'visibility' }}\n      </span>\n    </button>\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtPasswordField, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-password-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"inputId()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"resolvedAutocomplete()\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"kt-field-box__toggle\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-label]=\"isPasswordVisible() ? 'Masquer le mot de passe' : 'Afficher le mot de passe'\"\n      [attr.aria-controls]=\"inputId()\"\n      (mousedown)=\"toggleVisibility($event)\"\n    >\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">\n        {{ isPasswordVisible() ? 'visibility_off' : 'visibility' }}\n      </span>\n    </button>\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }] } });
+
 /**
  * Bouton bascule (Switch / Slide-Toggle) accessible conforme aux normes WAI-ARIA.
  * Permet d'activer ou désactiver une option avec effet immédiat.
@@ -1203,6 +1276,8 @@ class KtCheckbox {
     inputEl = viewChild.required('input');
     el = inject(ElementRef);
     errorResolver = inject(KtFieldErrorResolver);
+    auditEnabled = inject(KT_AUDIT_ENABLED);
+    isDestroyed = false;
     idGen = inject(KtIdGenerator);
     uid = this.idGen.generateId('checkbox');
     baseId = computed(() => this.id() ?? `kt-checkbox-${this.uid}`, /* @ts-ignore */
@@ -1239,14 +1314,19 @@ class KtCheckbox {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this.isDestroyed = true;
+        });
         // `indeterminate` est une PROPRIÉTÉ (non un attribut) : poussée impérativement sur l'input natif.
         effect(() => {
             this.inputEl().nativeElement.indeterminate = this.indeterminate();
         });
-        // Garde-fou a11y (dev, navigateur uniquement) : nom accessible = `label`, `ariaLabel` OU contenu
+        // Garde-fou a11y (navigateur uniquement) : nom accessible = `label`, `ariaLabel` OU contenu
         // projeté. Sans aucun des trois, la case est annoncée vide (WCAG 4.1.2).
         afterNextRender(() => {
-            if (!isDevMode() || this.label() || this.ariaLabel())
+            if (this.isDestroyed)
+                return;
+            if (!this.auditEnabled || this.label() || this.ariaLabel())
                 return;
             const labelText = this.el.nativeElement
                 .querySelector('.kt-checkbox__label')
@@ -1775,11 +1855,23 @@ class KtBaseSelect {
     errorResolver = inject(KtFieldErrorResolver);
     config = inject(KT_SELECT_CONFIG, { optional: true });
     host = inject(ElementRef);
-    ngZone = inject(NgZone);
     doc = inject(DOCUMENT);
     platformId = inject(PLATFORM_ID);
     destroyRef = inject(DestroyRef);
+    bodyScrollLock = inject(KtBodyScrollLock);
     wasExpanded = false;
+    scrollLocked = false;
+    /** Pose/relâche le verrou de scroll du fond de façon idempotente (n'agit qu'à la transition),
+        via le compteur partagé `KtBodyScrollLock` — deux sheets ouvertes ne se désynchronisent pas. */
+    setBodyScrollLock(lock) {
+        if (lock === this.scrollLocked)
+            return;
+        this.scrollLocked = lock;
+        if (lock)
+            this.bodyScrollLock.lock();
+        else
+            this.bodyScrollLock.unlock();
+    }
     // --- Données / dérivation (clé OU fonction, défauts intelligents) ---
     /** Liste des options affichées (source de vérité du contrôle). */
     options = input.required(/* @ts-ignore */
@@ -2033,9 +2125,7 @@ class KtBaseSelect {
         this.destroyRef.onDestroy(() => {
             clearTimeout(this.announceTimer);
             this.sheetDrag.destroy();
-            if (isPlatformBrowser(this.platformId) && this.compact() && this.expanded()) {
-                this.doc.body.style.overflow = '';
-            }
+            this.setBodyScrollLock(false);
         });
         // Préserve le contenu du template sur mobile pour permettre l'animation de sortie
         effect(() => {
@@ -2044,42 +2134,36 @@ class KtBaseSelect {
                 cb.preserveContent.set(this.compact());
             }
         });
-        // Sheet mobile : verrouille le scroll du fond et restitue le focus au trigger à la fermeture.
+        // Sheet mobile : verrouille le scroll du fond (compteur partagé) et restitue le focus au
+        // trigger à la fermeture.
         effect(() => {
-            if (!this.compact())
-                return;
             if (!isPlatformBrowser(this.platformId))
                 return;
-            if (this.expanded()) {
-                this.doc.body.style.overflow = 'hidden';
+            const compact = this.compact();
+            const expanded = this.expanded();
+            this.setBodyScrollLock(compact && expanded);
+            if (compact && expanded) {
                 this.wasExpanded = true;
             }
-            else {
-                this.doc.body.style.overflow = '';
-                if (this.wasExpanded) {
-                    this.triggerEl()?.nativeElement.focus();
-                }
+            else if (compact && this.wasExpanded) {
+                this.triggerEl()?.nativeElement.focus();
             }
         });
-        // Ferme au clic/tap en dehors du composant (remplace le binding d'hôte statique document:pointerdown)
-        // Enregistré une seule fois hors de la zone Angular pour éviter le change detection global sur chaque clic.
+        // Ferme au clic/tap en dehors du composant (remplace le binding d'hôte statique document:pointerdown,
+        // enregistré dynamiquement pour pouvoir comparer la cible au popup monté dans un overlay).
         if (isPlatformBrowser(this.platformId)) {
-            this.ngZone.runOutsideAngular(() => {
-                const onPointerDown = (event) => {
-                    if (!this.expanded())
-                        return;
-                    const target = event.target;
-                    const popup = this.popupEl()?.nativeElement;
-                    if (target && (!this.host.nativeElement.contains(target) || target === popup)) {
-                        this.ngZone.run(() => {
-                            this.expanded.set(false);
-                        });
-                    }
-                };
-                this.doc.addEventListener('pointerdown', onPointerDown);
-                this.destroyRef.onDestroy(() => {
-                    this.doc.removeEventListener('pointerdown', onPointerDown);
-                });
+            const onPointerDown = (event) => {
+                if (!this.expanded())
+                    return;
+                const target = event.target;
+                const popup = this.popupEl()?.nativeElement;
+                if (target && (!this.host.nativeElement.contains(target) || target === popup)) {
+                    this.expanded.set(false);
+                }
+            };
+            this.doc.addEventListener('pointerdown', onPointerDown);
+            this.destroyRef.onDestroy(() => {
+                this.doc.removeEventListener('pointerdown', onPointerDown);
             });
         }
         // Fait défiler la liste pour afficher l'option active lors de la navigation au clavier (mode activedescendant).
@@ -2092,9 +2176,9 @@ class KtBaseSelect {
                 if (!listbox)
                     return;
                 const activeEl = listbox.querySelector('.kt-select__option--active');
-                if (activeEl) {
-                    activeEl.scrollIntoView({ block: 'nearest' });
-                }
+                // `?.` : scrollIntoView n'est pas implémenté par tous les environnements de test (jsdom) ;
+                // sans ce garde, un consommateur testant le Select en jsdom subit un crash en rAF.
+                activeEl?.scrollIntoView?.({ block: 'nearest' });
             });
         });
         if (isDevMode()) {
@@ -2159,14 +2243,10 @@ class KtBaseSelect {
     }
     /** Annonce le contenu du filtre ~500 ms après la dernière frappe (évite le spam SR). */
     scheduleResultsAnnouncement() {
-        this.ngZone.runOutsideAngular(() => {
-            clearTimeout(this.announceTimer);
-            this.announceTimer = setTimeout(() => {
-                this.ngZone.run(() => {
-                    this.announcedCount.set(this.composeFilterAnnouncement());
-                });
-            }, ANNOUNCE_DELAY_MS);
-        });
+        clearTimeout(this.announceTimer);
+        this.announceTimer = setTimeout(() => {
+            this.announcedCount.set(this.composeFilterAnnouncement());
+        }, ANNOUNCE_DELAY_MS);
     }
     /** Annonce immédiate dans la live region du panneau (annule une annonce différée en attente). */
     announceNow(text) {
@@ -2595,7 +2675,6 @@ class KtChipList {
     doc = inject(DOCUMENT);
     platformId = inject(PLATFORM_ID);
     cdr = inject(ChangeDetectorRef);
-    ngZone = inject(NgZone);
     /** Vrai pendant la View Transition de CETTE liste : les chips (standards via Chip,
         custom via tokens.css) ne portent leur `view-transition-name` que dans cette fenêtre. */
     transitioning = signal(false, /* @ts-ignore */
@@ -2646,6 +2725,19 @@ class KtChipList {
     ...(ngDevMode ? [{ debugName: "itemDef" }] : /* istanbul ignore next */ []));
     chips = viewChildren(KtChip, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+    // Sélecteurs des focusables (source unique, dédupliquée) : boutons « retirer » + focusables de
+    // templates custom, avec (séquence clavier complète / roving) ou sans (cible de focus au retrait)
+    // le bouton de repli « +N more ».
+    static CHIP_FOCUSABLES = '.kt-chip__remove, .kt-chip-list__item button, .kt-chip-list__item [tabindex]';
+    static ROVING_FOCUSABLES = `${KtChipList.CHIP_FOCUSABLES}, .kt-chip-list__more`;
+    query(selector) {
+        return Array.from(this.host.nativeElement.querySelectorAll(selector));
+    }
+    /** Index de l'unique focusable portant `tabindex="0"` : point d'entrée clavier UNIQUE dans la
+        liste (pattern composite WAI-ARIA). Les flèches/Home/End le déplacent ; un focus direct
+        (souris) le resynchronise via `onFocusin`. */
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     // --- Textes résolus (input > KT_CHIPS_CONFIG > défaut lib neutre EN) ---
     resolvedListLabel = computed(() => this.listLabel() ?? this.config?.listLabel ?? 'Selected items', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedListLabel" }] : /* istanbul ignore next */ []));
@@ -2711,7 +2803,22 @@ class KtChipList {
             untracked(() => {
                 this.expanded.set(false);
             });
-        }, { allowSignalWrites: true });
+        });
+        // Roving tabindex : un seul focusable porte tabindex=0 (les autres -1), recalculé après chaque
+        // rendu (items/repli/index actif). Garantit un point d'entrée clavier UNIQUE (Tab) ; la
+        // navigation interne reste aux flèches/Home/End.
+        afterRenderEffect(() => {
+            this.visibleItems();
+            this.expanded();
+            const active = this.activeIndex();
+            const focusables = this.query(KtChipList.ROVING_FOCUSABLES);
+            if (focusables.length === 0)
+                return;
+            const clamped = Math.min(Math.max(active, 0), focusables.length - 1);
+            for (let i = 0; i < focusables.length; i++) {
+                focusables[i].tabIndex = i === clamped ? 0 : -1;
+            }
+        });
         inject(DestroyRef).onDestroy(() => clearTimeout(this.statusTimer));
     }
     idGen = inject(KtIdGenerator);
@@ -2769,9 +2876,9 @@ class KtChipList {
             // (`appRef.tick()`) corrigerait le rendu mais ajouterait une passe synchrone sur toute l'appli à
             // chaque retrait. On préfère DIFFÉRER la capture de l'état « après » : le callback d'une View
             // Transition peut renvoyer une Promise, le navigateur attend sa résolution avant le snapshot.
-            // On déclenche la mutation dans la zone (la CD déjà planifiée, OnPush, ne vérifie que les vues
-            // « dirty » : pas de passe globale supplémentaire) et on résout au prochain rendu.
-            this.ngZone.run(action);
+            // La mutation passe par un signal (le parent met à jour `items`) : en zoneless, c'est ce signal
+            // qui planifie la CD (OnPush, seules les vues « dirty » sont vérifiées) ; on résout au prochain rendu.
+            action();
             return new Promise((resolve) => {
                 let settled = false;
                 const done = () => {
@@ -2782,7 +2889,7 @@ class KtChipList {
                 };
                 afterNextRender({ read: done }, { injector: this.injector });
                 // Garde-fou : si aucun rendu n'est planifié (retrait ignoré par le parent), ne pas figer la page.
-                this.ngZone.runOutsideAngular(() => setTimeout(done, 100));
+                setTimeout(done, 100);
             });
         });
         this.activeTransition = vt;
@@ -2805,10 +2912,11 @@ class KtChipList {
             this.removed.emit({ item, index });
             afterNextRender({
                 read: () => {
-                    const hostEl = this.host.nativeElement;
-                    const focusables = Array.from(hostEl.querySelectorAll('.kt-chip__remove, .kt-chip-list__item button, .kt-chip-list__item [tabindex="0"]'));
-                    const target = focusables[Math.min(index, focusables.length - 1)];
+                    const focusables = this.query(KtChipList.CHIP_FOCUSABLES);
+                    const targetIndex = Math.min(index, focusables.length - 1);
+                    const target = focusables[targetIndex];
                     if (target) {
+                        this.activeIndex.set(targetIndex);
                         target.focus();
                         return;
                     }
@@ -2830,9 +2938,12 @@ class KtChipList {
             const firstRevealed = this.maxVisible() ?? 0;
             afterNextRender({
                 read: () => {
-                    const hostEl = this.host.nativeElement;
-                    const focusables = Array.from(hostEl.querySelectorAll('.kt-chip__remove, .kt-chip-list__item button, .kt-chip-list__item [tabindex="0"]'));
-                    focusables[firstRevealed]?.focus();
+                    const focusables = this.query(KtChipList.CHIP_FOCUSABLES);
+                    const target = focusables[firstRevealed];
+                    if (target) {
+                        this.activeIndex.set(firstRevealed);
+                        target.focus();
+                    }
                 },
             }, { injector: this.injector });
         });
@@ -2842,12 +2953,10 @@ class KtChipList {
         if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(key)) {
             return;
         }
-        const hostEl = this.host.nativeElement;
-        const focusables = Array.from(hostEl.querySelectorAll('.kt-chip__remove, .kt-chip-list__item button, .kt-chip-list__item [tabindex="0"], .kt-chip-list__more'));
+        const focusables = this.query(KtChipList.ROVING_FOCUSABLES);
         if (focusables.length === 0)
             return;
-        const active = this.doc.activeElement;
-        const currentIndex = focusables.indexOf(active);
+        const currentIndex = focusables.indexOf(this.doc.activeElement);
         let nextIndex = -1;
         if (key === 'ArrowRight' || key === 'ArrowDown') {
             nextIndex = currentIndex + 1;
@@ -2863,11 +2972,18 @@ class KtChipList {
         }
         if (nextIndex >= 0 && nextIndex < focusables.length) {
             event.preventDefault();
+            this.activeIndex.set(nextIndex);
             focusables[nextIndex].focus();
         }
     }
+    /** Resynchronise le point de tabulation unique sur l'élément réellement focusé (souris/voix). */
+    onFocusin(event) {
+        const index = this.query(KtChipList.ROVING_FOCUSABLES).indexOf(event.target);
+        if (index >= 0)
+            this.activeIndex.set(index);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChipList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtChipList, isStandalone: true, selector: "kt-chip-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, removeItemLabel: { classPropertyName: "removeItemLabel", publicName: "removeItemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemRemovedText: { classPropertyName: "itemRemovedText", publicName: "itemRemovedText", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, lessLabel: { classPropertyName: "lessLabel", publicName: "lessLabel", isSignal: true, isRequired: false, transformFunction: null }, chipTemplate: { classPropertyName: "chipTemplate", publicName: "chipTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyFocusTarget: { classPropertyName: "emptyFocusTarget", publicName: "emptyFocusTarget", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.data-empty": "items().length === 0 ? '' : null", "attr.data-vt-active": "transitioning() ? '' : null" } }, providers: [{ provide: ChipTransitionScope, useExisting: KtChipList }], queries: [{ propertyName: "itemDef", first: true, predicate: KtChipItemDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chips", predicate: KtChip, descendants: true, isSignal: true }], ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"kt-chip-list\">\n    <div class=\"kt-chip-list__items\" role=\"list\" [attr.aria-label]=\"resolvedListLabel()\">\n      @for (item of visibleItems(); track keyOf(item); let i = $index) {\n        @if (effectiveTemplate(); as tpl) {\n          <div role=\"listitem\" class=\"kt-chip-list__item\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, remove: removeCallback(item, i) }\"\n            />\n          </div>\n        } @else {\n          <kt-chip\n            role=\"listitem\"\n            [removable]=\"showRemove()\"\n            [disabled]=\"disabled()\"\n            [removeLabel]=\"removeLabelFor(item)\"\n            (remove)=\"removeAt(item, i)\"\n            >{{ labelOf(item) }}</kt-chip\n          >\n        }\n      }\n    </div>\n    <!-- Le bouton de repli/d\u00E9pli n'est PAS un chip : hors du role=\"list\" pour ne pas \u00EAtre\n         annonc\u00E9 comme un item de la liste (reste dans la m\u00EAme rang\u00E9e flex). -->\n    @if (overflow()) {\n      <button\n        type=\"button\"\n        class=\"kt-chip-list__more\"\n        [attr.aria-expanded]=\"expanded()\"\n        [style.view-transition-name]=\"transitioning() ? moreBtnTransitionName : null\"\n        [style.view-transition-class]=\"'chip-transition'\"\n        (click)=\"toggleExpanded()\"\n      >\n        {{ expanded() ? resolvedLessLabel() : resolvedMoreLabel()(hiddenCount()) }}\n      </button>\n    }\n  </div>\n}\n<!-- Annonce des retraits : TOUJOURS rendue (hors du @if, sinon elle dispara\u00EEt avec le dernier chip). -->\n<div class=\"kt-chip-list__status\" role=\"status\" aria-live=\"polite\">{{ status() }}</div>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-chip-list{display:flex;flex-wrap:wrap;gap:.5rem}.kt-chip-list__items,.kt-chip-list__item{display:contents}.kt-chip-list__more{display:inline-flex;align-items:center;gap:var(--chip-gap);padding:var(--chip-padding-y) var(--chip-padding-x);border-radius:var(--chip-radius);background:var(--chip-bg);border:1px solid var(--chip-border);box-shadow:var(--chip-shadow, none);font:inherit;font-size:var(--chip-font-size);color:var(--chip-color);cursor:pointer;min-block-size:24px}.kt-chip-list__more:hover{background:var(--chip-bg-hover);box-shadow:var(--chip-shadow-hover, var(--chip-shadow, none))}.kt-chip-list__more:focus-visible{outline:2px solid var(--chip-focus-ring);outline-offset:1px}.kt-chip-list__status{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(pointer:coarse){.kt-chip-list__more{min-block-size:32px}}}\n"], dependencies: [{ kind: "component", type: KtChip, selector: "kt-chip", inputs: ["removable", "disabled", "removeLabel"], outputs: ["remove"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtChipList, isStandalone: true, selector: "kt-chip-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, removeItemLabel: { classPropertyName: "removeItemLabel", publicName: "removeItemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemRemovedText: { classPropertyName: "itemRemovedText", publicName: "itemRemovedText", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, lessLabel: { classPropertyName: "lessLabel", publicName: "lessLabel", isSignal: true, isRequired: false, transformFunction: null }, chipTemplate: { classPropertyName: "chipTemplate", publicName: "chipTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyFocusTarget: { classPropertyName: "emptyFocusTarget", publicName: "emptyFocusTarget", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusin($event)" }, properties: { "attr.data-empty": "items().length === 0 ? '' : null", "attr.data-vt-active": "transitioning() ? '' : null" } }, providers: [{ provide: ChipTransitionScope, useExisting: KtChipList }], queries: [{ propertyName: "itemDef", first: true, predicate: KtChipItemDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chips", predicate: KtChip, descendants: true, isSignal: true }], ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"kt-chip-list\">\n    <div class=\"kt-chip-list__items\" role=\"list\" [attr.aria-label]=\"resolvedListLabel()\">\n      @for (item of visibleItems(); track keyOf(item); let i = $index) {\n        @if (effectiveTemplate(); as tpl) {\n          <div role=\"listitem\" class=\"kt-chip-list__item\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, remove: removeCallback(item, i) }\"\n            />\n          </div>\n        } @else {\n          <kt-chip\n            role=\"listitem\"\n            [removable]=\"showRemove()\"\n            [disabled]=\"disabled()\"\n            [removeLabel]=\"removeLabelFor(item)\"\n            (remove)=\"removeAt(item, i)\"\n            >{{ labelOf(item) }}</kt-chip\n          >\n        }\n      }\n    </div>\n    <!-- Le bouton de repli/d\u00E9pli n'est PAS un chip : hors du role=\"list\" pour ne pas \u00EAtre\n         annonc\u00E9 comme un item de la liste (reste dans la m\u00EAme rang\u00E9e flex). -->\n    @if (overflow()) {\n      <button\n        type=\"button\"\n        class=\"kt-chip-list__more\"\n        [attr.aria-expanded]=\"expanded()\"\n        [style.view-transition-name]=\"transitioning() ? moreBtnTransitionName : null\"\n        [style.view-transition-class]=\"'chip-transition'\"\n        (click)=\"toggleExpanded()\"\n      >\n        {{ expanded() ? resolvedLessLabel() : resolvedMoreLabel()(hiddenCount()) }}\n      </button>\n    }\n  </div>\n}\n<!-- Annonce des retraits : TOUJOURS rendue (hors du @if, sinon elle dispara\u00EEt avec le dernier chip). -->\n<div class=\"kt-chip-list__status\" role=\"status\" aria-live=\"polite\">{{ status() }}</div>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-chip-list{display:flex;flex-wrap:wrap;gap:.5rem}.kt-chip-list__items,.kt-chip-list__item{display:contents}.kt-chip-list__more{display:inline-flex;align-items:center;gap:var(--chip-gap);padding:var(--chip-padding-y) var(--chip-padding-x);border-radius:var(--chip-radius);background:var(--chip-bg);border:1px solid var(--chip-border);box-shadow:var(--chip-shadow, none);font:inherit;font-size:var(--chip-font-size);color:var(--chip-color);cursor:pointer;min-block-size:24px}.kt-chip-list__more:hover{background:var(--chip-bg-hover);box-shadow:var(--chip-shadow-hover, var(--chip-shadow, none))}.kt-chip-list__more:focus-visible{outline:2px solid var(--chip-focus-ring);outline-offset:1px}.kt-chip-list__status{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(pointer:coarse){.kt-chip-list__more{min-block-size:32px}}}\n"], dependencies: [{ kind: "component", type: KtChip, selector: "kt-chip", inputs: ["removable", "disabled", "removeLabel"], outputs: ["remove"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChipList, decorators: [{
             type: Component,
@@ -2877,6 +2993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         // nomment les chips à template custom QUE sous ce marqueur (cf. ChipTransitionScope).
                         '[attr.data-vt-active]': "transitioning() ? '' : null",
                         '(keydown)': 'onKeydown($event)',
+                        '(focusin)': 'onFocusin($event)',
                     }, template: "@if (items().length > 0) {\n  <div class=\"kt-chip-list\">\n    <div class=\"kt-chip-list__items\" role=\"list\" [attr.aria-label]=\"resolvedListLabel()\">\n      @for (item of visibleItems(); track keyOf(item); let i = $index) {\n        @if (effectiveTemplate(); as tpl) {\n          <div role=\"listitem\" class=\"kt-chip-list__item\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, remove: removeCallback(item, i) }\"\n            />\n          </div>\n        } @else {\n          <kt-chip\n            role=\"listitem\"\n            [removable]=\"showRemove()\"\n            [disabled]=\"disabled()\"\n            [removeLabel]=\"removeLabelFor(item)\"\n            (remove)=\"removeAt(item, i)\"\n            >{{ labelOf(item) }}</kt-chip\n          >\n        }\n      }\n    </div>\n    <!-- Le bouton de repli/d\u00E9pli n'est PAS un chip : hors du role=\"list\" pour ne pas \u00EAtre\n         annonc\u00E9 comme un item de la liste (reste dans la m\u00EAme rang\u00E9e flex). -->\n    @if (overflow()) {\n      <button\n        type=\"button\"\n        class=\"kt-chip-list__more\"\n        [attr.aria-expanded]=\"expanded()\"\n        [style.view-transition-name]=\"transitioning() ? moreBtnTransitionName : null\"\n        [style.view-transition-class]=\"'chip-transition'\"\n        (click)=\"toggleExpanded()\"\n      >\n        {{ expanded() ? resolvedLessLabel() : resolvedMoreLabel()(hiddenCount()) }}\n      </button>\n    }\n  </div>\n}\n<!-- Annonce des retraits : TOUJOURS rendue (hors du @if, sinon elle dispara\u00EEt avec le dernier chip). -->\n<div class=\"kt-chip-list__status\" role=\"status\" aria-live=\"polite\">{{ status() }}</div>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-chip-list{display:flex;flex-wrap:wrap;gap:.5rem}.kt-chip-list__items,.kt-chip-list__item{display:contents}.kt-chip-list__more{display:inline-flex;align-items:center;gap:var(--chip-gap);padding:var(--chip-padding-y) var(--chip-padding-x);border-radius:var(--chip-radius);background:var(--chip-bg);border:1px solid var(--chip-border);box-shadow:var(--chip-shadow, none);font:inherit;font-size:var(--chip-font-size);color:var(--chip-color);cursor:pointer;min-block-size:24px}.kt-chip-list__more:hover{background:var(--chip-bg-hover);box-shadow:var(--chip-shadow-hover, var(--chip-shadow, none))}.kt-chip-list__more:focus-visible{outline:2px solid var(--chip-focus-ring);outline-offset:1px}.kt-chip-list__status{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(pointer:coarse){.kt-chip-list__more{min-block-size:32px}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], itemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemKey", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], listLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listLabel", required: false }] }], removeItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeItemLabel", required: false }] }], itemRemovedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemRemovedText", required: false }] }], moreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreLabel", required: false }] }], lessLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lessLabel", required: false }] }], chipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipTemplate", required: false }] }], emptyFocusTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFocusTarget", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], itemDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtChipItemDef), { isSignal: true }] }], chips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KtChip), { isSignal: true }] }] } });
 
@@ -3665,5 +3782,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_KT_SELECT_CONFIG, KT_CHIPS_CONFIG, KT_DEFAULT_FIELD_ERROR_MESSAGES, KT_FIELD, KT_FIELD_CONFIG, KT_SELECT_CONFIG, KtBaseInputField, KtBaseSelect, KtBaseTemporalField, KtBaseTimeTemporalField, KtCheckbox, KtCheckboxGroup, KtChip, KtChipItemDef, KtChipList, KtClock, KtDateField, KtDateTimeField, KtField, KtFieldControl, KtFieldErrorResolver, KtFixedClock, KtInstantField, KtMultiSelect, KtMultiSelectChipDef, KtMultiSelectOptionDef, KtMultiSelectTriggerDef, KtNumberField, KtRadio, KtRadioGroup, KtSelect, KtSelectConfig, KtSelectOptionDef, KtSelectTriggerDef, KtSwitch, KtTemporalDatePipe, KtTextArea, KtTextField, KtTimeField, KtYearMonthField, Temporal, defaultKtFieldErrorMatcher, ktErrorParam, normalizeKtSuggestions, provideKtField };
+export { DEFAULT_KT_SELECT_CONFIG, KT_CHIPS_CONFIG, KT_DEFAULT_FIELD_ERROR_MESSAGES, KT_FIELD, KT_FIELD_CONFIG, KT_SELECT_CONFIG, KtBaseInputField, KtBaseSelect, KtBaseTemporalField, KtBaseTimeTemporalField, KtCheckbox, KtCheckboxGroup, KtChip, KtChipItemDef, KtChipList, KtClock, KtDateField, KtDateTimeField, KtField, KtFieldControl, KtFieldErrorResolver, KtFixedClock, KtInstantField, KtMultiSelect, KtMultiSelectChipDef, KtMultiSelectOptionDef, KtMultiSelectTriggerDef, KtNumberField, KtPasswordField, KtRadio, KtRadioGroup, KtSelect, KtSelectConfig, KtSelectOptionDef, KtSelectTriggerDef, KtSwitch, KtTemporalDatePipe, KtTextArea, KtTextField, KtTimeField, KtYearMonthField, Temporal, defaultKtFieldErrorMatcher, ktErrorParam, normalizeKtSuggestions, provideKtField };
 //# sourceMappingURL=ktortu-aaa-forms.mjs.map