@ktortu/aaa 0.1.0-beta.0

package/fesm2022/ktortu-aaa-forms.mjs

@@ -0,0 +1,3215 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, ElementRef, Directive, input, output, contentChild, viewChild, forwardRef, ChangeDetectionStrategy, Component, model, booleanAttribute, TemplateRef, effect, NgZone, PLATFORM_ID, DestroyRef, signal, untracked, isDevMode, Injector, ChangeDetectorRef, viewChildren, afterNextRender, Injectable, 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 { transformedValue } from '@angular/forms/signals';
+import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';
+import { Listbox, Option } from '@angular/aria/listbox';
+
+/** Défaut : afficher l'erreur une fois le champ quitté (blur). */
+const defaultKtFieldErrorMatcher = (state) => state.invalid && state.touched;
+const KT_FIELD_CONFIG = new InjectionToken('KT_FIELD_CONFIG');
+const KT_FIELD = new InjectionToken('KT_FIELD');
+
+/** Marque le contrôle (natif ou custom) d'un champ pour que `Field` y câble l'a11y
+    (id, aria-describedby, aria-invalid, aria-required). */
+class KtFieldControl {
+    parent = inject(KT_FIELD, { optional: true });
+    id = computed(() => this.parent?.baseId() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.parent?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.parent?.invalid() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    required = computed(() => this.parent?.required() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    element = inject(ElementRef).nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: KtFieldControl, isStandalone: true, selector: "[ktFieldControl]", host: { properties: { "id": "id()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.aria-required": "required() ? \"true\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtFieldControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ktFieldControl]',
+                    host: {
+                        '[id]': 'id()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        '[attr.aria-required]': 'required() ? "true" : null',
+                    },
+                }]
+        }] });
+
+/** Chrome de champ agnostique du système de forms : label + contrôle projeté + hint + erreur,
+    et centralisation du câblage a11y. Nourri par des inputs simples.
+
+    @example
+    ```html
+    <kt-field label="E-mail" hint="Nous ne partagerons jamais votre adresse." [invalid]="emailInvalid()" [errors]="emailErrors()" required>
+      <input ktFieldControl type="email" [(ngModel)]="email" />
+    </kt-field>
+    ``` */
+class KtField {
+    config = inject(KT_FIELD_CONFIG, { optional: true });
+    /** Libellé du champ. @default undefined */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texte d'aide affiché sous le contrôle. @default undefined */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Contenu de l'aide contextuelle (texte ou `TemplateRef`) rendu dans le tooltip d'aide. @default undefined */
+    helpText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "helpText" }] : /* istanbul ignore next */ []));
+    /** Libellé accessible du déclencheur d'aide. @default KT_FIELD_CONFIG.helpLabel ?? 'Help' */
+    helpLabel = input(this.config?.helpLabel ?? 'Help', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helpLabel" }] : /* istanbul ignore next */ []));
+    /** id(s) externe(s) à ajouter à l'`aria-describedby` du contrôle (découplage). @default undefined */
+    customDescribedBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "customDescribedBy" }] : /* istanbul ignore next */ []));
+    /** Émis au clic sur le déclencheur d'aide (le `preventDefault`/`stopPropagation` est déjà appliqué). */
+    helpClick = output();
+    /** Erreurs de validation à afficher sous le contrôle. @default [] */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Marque le champ comme invalide (pose `aria-invalid` et conditionne l'affichage des erreurs). @default false */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Affiche l'astérisque requis et pose `aria-required` sur le contrôle. @default false */
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** id imposé (sélecteurs de test stables) ; sinon auto-généré, anti-collision. */
+    fieldId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldId" }] : /* istanbul ignore next */ []));
+    /** Masquer le hint quand l'erreur s'affiche (façon Material). */
+    hideHintWhenInvalid = input(this.config?.hideHintWhenInvalid ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideHintWhenInvalid" }] : /* istanbul ignore next */ []));
+    /** Afficher toutes les erreurs au lieu de la première seule. */
+    showAllErrors = input(this.config?.showAllErrors ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAllErrors" }] : /* istanbul ignore next */ []));
+    // 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();
+    baseId = computed(() => this.fieldId() ?? `kt-field-${this.uid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => `${this.baseId()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.baseId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => `${this.baseId()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorId" }] : /* 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).
+    showHint = computed(() => !!this.hint() && !(this.hideHintWhenInvalid() && this.invalid()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    // Première erreur seule par défaut ; toutes si showAllErrors.
+    displayedErrors = computed(() => this.showAllErrors() ? this.errors() : this.errors().slice(0, 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedErrors" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.showHint())
+            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);
+        }
+        // Ajout de l'ID personnalisé externe (decouplage complet)
+        const custom = this.customDescribedBy();
+        if (custom)
+            ids.push(custom);
+        return ids.length ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    onHelpClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        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 } }, outputs: { helpClick: "helpClick" }, 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 });
+}
+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, 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 }] }], 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 }] }] } });
+
+/** Base partagée des champs simples (TextField, NumberField) : état FormValueControl,
+    présentation (label/hint/prefix/suffix/clear) et politique d'affichage des erreurs.
+    La valeur, son parsing et la notion de « vide » sont fournis par la sous-classe. */
+class KtBaseInputField {
+    config = inject(KT_FIELD_CONFIG, { optional: true });
+    // --- État poussé par [formField] ---
+    // Ces entrées sont généralement câblées par l'intégration Signal Forms (`[formField]`) ;
+    // tu peux aussi les piloter à la main en usage contrôlé.
+    /** Marque le champ comme « visité » (déclenche l'affichage des erreurs). Deux-way. @default false */
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /** Désactive la saisie et le focus. @default false */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Rend le champ en lecture seule (valeur visible, non modifiable). @default false */
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Le champ est-il en erreur (état fourni par la validation). @default false */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Marque le champ comme requis (ajoute `aria-required`). @default false */
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Le champ a-t-il été modifié depuis sa valeur initiale. @default false */
+    dirty = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** Liste des erreurs de validation à afficher. @default [] */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Attribut `name` natif du contrôle. @default '' */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // --- Présentation ---
+    /** id imposé pour des sélecteurs de test stables ; sinon auto-généré par Field. */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Libellé du champ (associé via `<label for>`). */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texte d'aide affiché sous le champ quand il est valide. */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Aide contextuelle riche : texte ou `TemplateRef` projeté dans une infobulle d'aide. */
+    helpText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "helpText" }] : /* istanbul ignore next */ []));
+    /** Libellé accessible du bouton d'aide. @default 'Help' (ou KT_FIELD_CONFIG.helpLabel) */
+    helpLabel = input(this.config?.helpLabel ?? 'Help', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helpLabel" }] : /* istanbul ignore next */ []));
+    /** Force la valeur de `aria-describedby` (sinon dérivée de hint/erreur). */
+    customDescribedBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "customDescribedBy" }] : /* istanbul ignore next */ []));
+    /** Émis au clic sur le bouton d'aide contextuelle. */
+    helpClick = output();
+    /** Texte indicatif affiché dans le champ vide. */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Indice d'autoremplissage du navigateur (attribut `autocomplete` natif) ; ex. `'current-password'`,
+        `'new-password'`, `'email'`, `'username'`, `'off'`.
+        @default undefined */
+    autocomplete = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** Nom d'icône Material Symbols affichée en tête de champ. */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Affiche un bouton « effacer » quand le champ contient une valeur. @default false */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Contenu décoratif en tête de champ : texte ou `TemplateRef`. */
+    prefix = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
+    /** Contenu décoratif en fin de champ : texte ou `TemplateRef`. */
+    suffix = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
+    /** Libellé i18n du bouton « effacer ». @default 'Clear' (ou KT_FIELD_CONFIG.clearLabel) */
+    clearLabel = input(this.config?.clearLabel ?? 'Clear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    /** Quand afficher l'erreur ; surcharge KT_FIELD_CONFIG et le défaut (`invalid && touched`). */
+    errorMatcher = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMatcher" }] : /* istanbul ignore next */ []));
+    inputRef = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    matcher = computed(() => this.errorMatcher() ?? this.config?.errorMatcher ?? defaultKtFieldErrorMatcher, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matcher" }] : /* istanbul ignore next */ []));
+    // L'erreur ne s'affiche qu'au déclenchement décidé par le matcher (invalid/touched/dirty).
+    showInvalid = computed(() => this.matcher()({ invalid: this.invalid(), touched: this.touched(), dirty: this.dirty() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => this.clearable() && !this.disabled() && !this.readonly() && !this.isEmpty(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    asTemplate(value) {
+        return value instanceof TemplateRef ? value : null;
+    }
+    asText(value) {
+        return typeof value === 'string' ? value : null;
+    }
+    onInput(event) {
+        this.value.set(this.parse(event.target.value));
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape' && this.showClear()) {
+            event.preventDefault();
+            this.clear();
+        }
+    }
+    clear() {
+        this.value.set(this.emptyValue());
+        this.touched.set(true);
+        this.inputRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseInputField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: KtBaseInputField, isStandalone: true, inputs: { touched: { classPropertyName: "touched", publicName: "touched", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", helpClick: "helpClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseInputField, decorators: [{
+            type: Directive
+        }], propDecorators: { touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], 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"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+/** Normalise une liste de suggestions en options `<datalist>`. `toValue` sérialise la valeur en
+    chaîne attendue par l'input natif (identité pour le texte, `String()` pour les nombres,
+    `serialize()` pour les champs Temporal). */
+function normalizeKtSuggestions(suggestions, toValue) {
+    if (!suggestions)
+        return [];
+    return suggestions.map((suggestion) => {
+        if (typeof suggestion === 'object' && suggestion !== null && 'value' in suggestion) {
+            return { value: toValue(suggestion.value), label: suggestion.label ?? null };
+        }
+        return { value: toValue(suggestion), label: null };
+    });
+}
+
+/**
+ * Champ numérique : valeur `number | null` (champ vide ⇒ `null`, jamais `NaN`), intégré aux
+ * Signal Forms via `FormValueControl`. Hérite de la présentation commune (label/hint/clear/
+ * préfixe/suffixe/erreurs) de `KtBaseInputField`.
+ *
+ * @example
+ * ```html
+ * <kt-number-field label="Quantité" [(value)]="qty" [min]="0" [step]="1" />
+ * ```
+ */
+class KtNumberField extends KtBaseInputField {
+    /** Valeur saisie (two-way). `null` = champ vide. @default null */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Borne minimale (attribut `min` natif). @default undefined */
+    min = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Borne maximale (attribut `max` natif). @default undefined */
+    max = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Pas d'incrément (attribut `step` natif). @default undefined */
+    step = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Suggestions d'autocomplétion proposées via un `<datalist>` natif (la saisie reste libre).
+        Valeurs simples (`number[]`) ou couples `{ value, label }` pour distinguer libellé affiché et
+        valeur insérée. @default undefined */
+    suggestions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId();
+    datalistId = `kt-number-field-list-${this.uid}`;
+    hasSuggestions = computed(() => (this.suggestions()?.length ?? 0) > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : /* istanbul ignore next */ []));
+    datalistOptions = computed(() => normalizeKtSuggestions(this.suggestions(), (value) => String(value)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datalistOptions" }] : /* istanbul ignore next */ []));
+    // Utilitaire v22 standardisé pour la synchronisation réactive propre du champ numérique
+    rawValue = transformedValue(this.value, {
+        parse: (val) => {
+            const trimmed = val.trim().replace(',', '.');
+            if (trimmed === '')
+                return { value: null };
+            const parsed = Number(trimmed);
+            if (Number.isNaN(parsed)) {
+                return { error: { kind: 'parse', message: 'La valeur saisie doit être un nombre valide.' } };
+            }
+            return { value: parsed };
+        },
+        format: (val) => (val === null ? '' : String(val)),
+    });
+    parse(raw) {
+        const trimmed = raw.trim().replace(',', '.');
+        if (trimmed === '')
+            return null;
+        const parsed = Number(trimmed);
+        return Number.isNaN(parsed) ? null : parsed;
+    }
+    onKeyDown(event) {
+        if (this.disabled() || this.readonly())
+            return;
+        super.onKeyDown(event);
+        if (event.defaultPrevented)
+            return;
+        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
+            return;
+        const isUp = event.key === 'ArrowUp';
+        this.adjustValue(isUp);
+        event.preventDefault();
+    }
+    adjustValue(isUp) {
+        const step = this.step() ?? 1;
+        const min = this.min();
+        const max = this.max();
+        let newValue;
+        if (this.value() === null) {
+            if (min !== undefined) {
+                newValue = min;
+            }
+            else if (max !== undefined) {
+                newValue = max;
+            }
+            else {
+                newValue = 0;
+            }
+        }
+        else {
+            const currentValue = this.value();
+            newValue = isUp ? currentValue + step : currentValue - step;
+        }
+        if (min !== undefined && newValue < min) {
+            newValue = min;
+        }
+        if (max !== undefined && newValue > max) {
+            newValue = max;
+        }
+        // Arrondi pour éviter les erreurs de virgule flottante JS
+        const stepStr = String(step);
+        const decimalIdx = stepStr.indexOf('.');
+        if (decimalIdx !== -1) {
+            const precision = stepStr.length - decimalIdx - 1;
+            newValue = Number(newValue.toFixed(precision));
+        }
+        this.value.set(newValue);
+    }
+    emptyValue() {
+        return null;
+    }
+    isEmpty(value) {
+        return value === null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtNumberField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtNumberField, isStandalone: true, selector: "kt-number-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", 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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"text\"\n      inputmode=\"decimal\"\n      role=\"spinbutton\"\n      [attr.aria-valuemin]=\"min() ?? null\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [value]=\"rawValue()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step() ?? null\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"rawValue.set($event.target.value)\"\n      (keydown)=\"onKeyDown($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", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors"], 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: KtNumberField, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-number-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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"text\"\n      inputmode=\"decimal\"\n      role=\"spinbutton\"\n      [attr.aria-valuemin]=\"min() ?? null\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [value]=\"rawValue()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step() ?? null\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"rawValue.set($event.target.value)\"\n      (keydown)=\"onKeyDown($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"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }] } });
+
+/**
+ * Zone de texte multi-ligne (valeur `string`) intégrée aux Signal Forms via `FormValueControl`.
+ * Autosize en CSS (`field-sizing: content`) ; hérite de la présentation commune de `KtBaseInputField`.
+ *
+ * @example
+ * ```html
+ * <kt-text-area label="Commentaire" [(value)]="comment" [rows]="4" />
+ * ```
+ */
+class KtTextArea extends KtBaseInputField {
+    /** Valeur saisie (two-way). @default '' */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Hauteur initiale (lignes). L'autosize est géré en CSS via `field-sizing: content`. @default 3 */
+    rows = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** 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 */ []));
+    parse(raw) {
+        return raw;
+    }
+    emptyValue() {
+        return '';
+    }
+    isEmpty(value) {
+        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 }, 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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\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"], 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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\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 }] }], 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
+ * présentation commune (label/hint/clear/préfixe/suffixe/erreurs) de `KtBaseInputField`.
+ *
+ * @example
+ * ```html
+ * <kt-text-field label="E-mail" type="email" [(value)]="email" required />
+ * ```
+ */
+class KtTextField extends KtBaseInputField {
+    /** Valeur saisie (two-way). @default '' */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Variante HTML du champ (pilote `type` natif et le clavier mobile). @default 'text' */
+    type = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Suggestions d'autocomplétion proposées via un `<datalist>` natif (la saisie reste libre).
+        Valeurs simples (`string[]`) ou couples `{ value, label }` pour distinguer libellé affiché et
+        valeur insérée. @default undefined */
+    suggestions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId();
+    datalistId = `kt-text-field-list-${this.uid}`;
+    hasSuggestions = computed(() => (this.suggestions()?.length ?? 0) > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : /* istanbul ignore next */ []));
+    datalistOptions = computed(() => normalizeKtSuggestions(this.suggestions(), (value) => value), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datalistOptions" }] : /* istanbul ignore next */ []));
+    parse(raw) {
+        return raw;
+    }
+    emptyValue() {
+        return '';
+    }
+    isEmpty(value) {
+        return value.length === 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTextField, isStandalone: true, selector: "kt-text-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", 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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\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", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors"], 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: KtTextField, decorators: [{
+            type: Component,
+            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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\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 }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", 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.
+ * Intégré aux Signal Forms de l'application via FormValueControl.
+ *
+ * @example
+ * ```html
+ * <kt-switch label="Notifications par e-mail" [(value)]="emailNotif" />
+ * ```
+ */
+class KtSwitch {
+    config = inject(KT_FIELD_CONFIG, { optional: true });
+    /** État de la bascule (two-way) : `true` = activé, `false` = désactivé. @default false */
+    value = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // --- État poussé par [formField] ---
+    /** État « touché » (two-way), généralement piloté par `[formField]`. @default false */
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /** Désactive la bascule (non actionnable). @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Marque la bascule comme invalide (combiné à `touched`/`dirty` via l'`errorMatcher`). @default false */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Affiche l'astérisque requis sur le libellé. @default false */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** État « modifié » (entre dans la logique d'affichage des erreurs). @default false */
+    dirty = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** Erreurs de validation à afficher sous la bascule. @default [] */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Identifiant logique du contrôle (à titre indicatif). @default '' */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // --- Présentation ---
+    /** id imposé (sélecteurs de test stables) ; sinon auto-généré, anti-collision. @default undefined */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Texte du libellé associé à la bascule. @default undefined */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texte d'aide affiché sous la bascule (masqué quand une erreur s'affiche). @default undefined */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Nom accessible (`aria-label`) quand `label` est absent. @default undefined */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Stratégie décidant quand afficher les erreurs (sinon celle du `KT_FIELD_CONFIG`). @default undefined */
+    errorMatcher = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMatcher" }] : /* istanbul ignore next */ []));
+    /** Afficher toutes les erreurs au lieu de la première seule. @default KT_FIELD_CONFIG.showAllErrors ?? false */
+    showAllErrors = input(this.config?.showAllErrors ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAllErrors" }] : /* istanbul ignore next */ []));
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId('switch');
+    baseId = computed(() => this.id() ?? `kt-switch-${this.uid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => `${this.baseId()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.baseId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => `${this.baseId()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    matcher = computed(() => this.errorMatcher() ?? this.config?.errorMatcher ?? defaultKtFieldErrorMatcher, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matcher" }] : /* istanbul ignore next */ []));
+    showInvalid = computed(() => this.matcher()({ invalid: this.invalid(), touched: this.touched(), dirty: this.dirty() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []));
+    displayedErrors = computed(() => this.showAllErrors() ? this.errors() : this.errors().slice(0, 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedErrors" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.ariaLabel() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.hint() && !this.showInvalid())
+            ids.push(this.hintId());
+        if (this.showInvalid() && this.errors().length > 0)
+            ids.push(this.errorId());
+        return ids.length ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled())
+            return;
+        this.value.update((v) => !v);
+        this.touched.set(true);
+    }
+    onSpacebar(event) {
+        event.preventDefault(); // évite le scroll de la page au clavier
+        this.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtSwitch, isStandalone: true, selector: "kt-switch", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    <div
+      class="kt-switch-field"
+      [class.kt-switch-field--invalid]="showInvalid()"
+      [class.kt-switch-field--disabled]="disabled()"
+    >
+      <div class="kt-switch-row">
+        <button
+          #switchBtn
+          type="button"
+          role="switch"
+          [id]="baseId()"
+          [attr.aria-checked]="value()"
+          [attr.aria-label]="resolvedAriaLabel()"
+          [attr.aria-labelledby]="label() ? labelId() : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-invalid]="showInvalid() ? 'true' : null"
+          [disabled]="disabled()"
+          (click)="toggle()"
+          (keydown.space)="onSpacebar($event)"
+          class="kt-switch"
+        >
+          <span class="kt-switch__thumb"></span>
+        </button>
+
+        @if (label(); as labelText) {
+          <label [id]="labelId()" [attr.for]="baseId()" class="kt-switch-label">
+            {{ labelText }}
+            @if (required()) {
+              <span class="kt-switch-label__required" aria-hidden="true">*</span>
+            }
+          </label>
+        }
+      </div>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-switch-hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-switch-error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-switch-error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: ["@layer kt-aaa.components{:host{display:block}.kt-switch-field{display:flex;flex-direction:column;gap:var(--field-gap, .375rem)}.kt-switch-row{display:flex;align-items:center;gap:var(--field-control-gap, .5rem)}.kt-switch{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;inline-size:var(--switch-width, 2.75rem);block-size:var(--switch-height, 1.5rem);padding:var(--switch-padding, 2px);border-radius:var(--switch-radius, 999px);border:var(--switch-border-width, 2px) solid var(--switch-border-color, var(--field-border-color, var(--kt-outline, #c4c7c5)));background-color:var(--switch-bg, var(--field-bg, var(--kt-surface, #ffffff)));cursor:pointer;outline:none;box-shadow:var(--switch-shadow, var(--field-shadow, none));transition:var( --switch-transition, background-color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease )}.kt-switch:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:44px}.kt-switch__thumb{display:block;inline-size:var(--switch-thumb-size, 1rem);block-size:var(--switch-thumb-size, 1rem);border-radius:var(--switch-thumb-radius, 50%);background-color:var(--switch-thumb-bg, var(--kt-outline-strong, #5f6368));box-shadow:var(--switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .2));transition:var( --switch-thumb-transition, transform .2s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease );transform:translate(0)}.kt-switch[aria-checked=true]{background-color:var(--switch-bg-active, var(--kt-primary, #0b57d0));border-color:var(--switch-border-color-active, var(--kt-primary, #0b57d0));box-shadow:var( --switch-shadow-active, 0 0 8px color-mix(in srgb, var(--switch-bg-active, var(--kt-primary, #0b57d0)) 50%, transparent) )}.kt-switch[aria-checked=true] .kt-switch__thumb{background-color:var(--switch-thumb-bg-active, #ffffff);transform:translate(calc(var(--switch-width, 2.75rem) - var(--switch-thumb-size, 1rem) - (var(--switch-padding, 2px) * 2) - (var(--switch-border-width, 2px) * 2)))}.kt-switch:hover:not(:disabled){border-color:var(--switch-border-color-hover, var(--field-border-color-hover, var(--kt-outline-strong, #5f6368)));box-shadow:var(--switch-shadow-hover, var(--field-shadow-hover, var(--switch-shadow, var(--field-shadow, none))))}.kt-switch[aria-checked=true]:hover:not(:disabled){background-color:var(--switch-bg-active-hover, color-mix(in srgb, var(--kt-primary, #0b57d0) 90%, black));border-color:var(--switch-border-color-active-hover, color-mix(in srgb, var(--kt-primary, #0b57d0) 90%, black))}.kt-switch:focus-visible{outline:var(--kt-focus-ring-width, 2px) solid var(--kt-focus-ring-color, #0b57d0);outline-offset:var(--switch-focus-ring-offset, 2px);box-shadow:var(--switch-shadow-focus, var(--field-shadow-focus, var(--switch-shadow, var(--field-shadow, none))))}.kt-switch:disabled{cursor:not-allowed;opacity:.5;background-color:var(--field-disabled-bg, #f1f3f4);border-color:var(--field-border-color, #c4c7c5)}.kt-switch:disabled .kt-switch__thumb{background-color:var(--kt-outline, #c4c7c5);box-shadow:none}.kt-switch-field--invalid .kt-switch{border-color:var(--field-error-color, var(--kt-danger, #b3261e))}.kt-switch-field--invalid .kt-switch[aria-checked=true]{background-color:var(--field-error-color, var(--kt-danger, #b3261e));border-color:var(--field-error-color, var(--kt-danger, #b3261e))}.kt-switch-label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit);cursor:pointer;-webkit-user-select:none;user-select:none}.kt-switch-field--disabled .kt-switch-label{cursor:not-allowed;color:var(--field-hint-color, #5f6368);opacity:.6}.kt-switch-label__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-switch-hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-switch-error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-switch-error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-switch,.kt-switch__thumb{transition:none}.kt-switch-error-message{animation:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="kt-switch-field"
+      [class.kt-switch-field--invalid]="showInvalid()"
+      [class.kt-switch-field--disabled]="disabled()"
+    >
+      <div class="kt-switch-row">
+        <button
+          #switchBtn
+          type="button"
+          role="switch"
+          [id]="baseId()"
+          [attr.aria-checked]="value()"
+          [attr.aria-label]="resolvedAriaLabel()"
+          [attr.aria-labelledby]="label() ? labelId() : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-invalid]="showInvalid() ? 'true' : null"
+          [disabled]="disabled()"
+          (click)="toggle()"
+          (keydown.space)="onSpacebar($event)"
+          class="kt-switch"
+        >
+          <span class="kt-switch__thumb"></span>
+        </button>
+
+        @if (label(); as labelText) {
+          <label [id]="labelId()" [attr.for]="baseId()" class="kt-switch-label">
+            {{ labelText }}
+            @if (required()) {
+              <span class="kt-switch-label__required" aria-hidden="true">*</span>
+            }
+          </label>
+        }
+      </div>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-switch-hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-switch-error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-switch-error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, styles: ["@layer kt-aaa.components{:host{display:block}.kt-switch-field{display:flex;flex-direction:column;gap:var(--field-gap, .375rem)}.kt-switch-row{display:flex;align-items:center;gap:var(--field-control-gap, .5rem)}.kt-switch{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;inline-size:var(--switch-width, 2.75rem);block-size:var(--switch-height, 1.5rem);padding:var(--switch-padding, 2px);border-radius:var(--switch-radius, 999px);border:var(--switch-border-width, 2px) solid var(--switch-border-color, var(--field-border-color, var(--kt-outline, #c4c7c5)));background-color:var(--switch-bg, var(--field-bg, var(--kt-surface, #ffffff)));cursor:pointer;outline:none;box-shadow:var(--switch-shadow, var(--field-shadow, none));transition:var( --switch-transition, background-color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease )}.kt-switch:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:44px}.kt-switch__thumb{display:block;inline-size:var(--switch-thumb-size, 1rem);block-size:var(--switch-thumb-size, 1rem);border-radius:var(--switch-thumb-radius, 50%);background-color:var(--switch-thumb-bg, var(--kt-outline-strong, #5f6368));box-shadow:var(--switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .2));transition:var( --switch-thumb-transition, transform .2s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease );transform:translate(0)}.kt-switch[aria-checked=true]{background-color:var(--switch-bg-active, var(--kt-primary, #0b57d0));border-color:var(--switch-border-color-active, var(--kt-primary, #0b57d0));box-shadow:var( --switch-shadow-active, 0 0 8px color-mix(in srgb, var(--switch-bg-active, var(--kt-primary, #0b57d0)) 50%, transparent) )}.kt-switch[aria-checked=true] .kt-switch__thumb{background-color:var(--switch-thumb-bg-active, #ffffff);transform:translate(calc(var(--switch-width, 2.75rem) - var(--switch-thumb-size, 1rem) - (var(--switch-padding, 2px) * 2) - (var(--switch-border-width, 2px) * 2)))}.kt-switch:hover:not(:disabled){border-color:var(--switch-border-color-hover, var(--field-border-color-hover, var(--kt-outline-strong, #5f6368)));box-shadow:var(--switch-shadow-hover, var(--field-shadow-hover, var(--switch-shadow, var(--field-shadow, none))))}.kt-switch[aria-checked=true]:hover:not(:disabled){background-color:var(--switch-bg-active-hover, color-mix(in srgb, var(--kt-primary, #0b57d0) 90%, black));border-color:var(--switch-border-color-active-hover, color-mix(in srgb, var(--kt-primary, #0b57d0) 90%, black))}.kt-switch:focus-visible{outline:var(--kt-focus-ring-width, 2px) solid var(--kt-focus-ring-color, #0b57d0);outline-offset:var(--switch-focus-ring-offset, 2px);box-shadow:var(--switch-shadow-focus, var(--field-shadow-focus, var(--switch-shadow, var(--field-shadow, none))))}.kt-switch:disabled{cursor:not-allowed;opacity:.5;background-color:var(--field-disabled-bg, #f1f3f4);border-color:var(--field-border-color, #c4c7c5)}.kt-switch:disabled .kt-switch__thumb{background-color:var(--kt-outline, #c4c7c5);box-shadow:none}.kt-switch-field--invalid .kt-switch{border-color:var(--field-error-color, var(--kt-danger, #b3261e))}.kt-switch-field--invalid .kt-switch[aria-checked=true]{background-color:var(--field-error-color, var(--kt-danger, #b3261e));border-color:var(--field-error-color, var(--kt-danger, #b3261e))}.kt-switch-label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit);cursor:pointer;-webkit-user-select:none;user-select:none}.kt-switch-field--disabled .kt-switch-label{cursor:not-allowed;color:var(--field-hint-color, #5f6368);opacity:.6}.kt-switch-label__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-switch-hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-switch-error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-switch-error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-switch,.kt-switch__thumb{transition:none}.kt-switch-error-message{animation:none}}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }] } });
+
+/**
+ * Groupe de cases à cocher (Checkbox Group) conforme à l'ARIA APG / RGAA.
+ * Orchestrateur : porte une valeur TABLEAU (`FormValueControl<V[]>`) et la sémantique de groupe
+ * (`role="group"`, légende, `aria-required`/`aria-invalid`, erreurs).
+ *
+ * Différence APG avec le radio-group : PAS de roving tabindex — chaque `kt-checkbox` reste
+ * tabbable et coche/décoche indépendamment. Les options sont fournies par le dev (boucle `@for`
+ * ou en dur) ; `compareWith` gère l'égalité quand les valeurs d'option sont des objets.
+ *
+ * @example
+ * ```html
+ * <kt-checkbox-group label="Centres d'intérêt" [(value)]="interests" required>
+ *   <kt-checkbox [value]="'sport'" label="Sport" />
+ *   <kt-checkbox [value]="'musique'" label="Musique" />
+ *   <kt-checkbox [value]="'cinema'" label="Cinéma" />
+ * </kt-checkbox-group>
+ * ```
+ */
+class KtCheckboxGroup {
+    config = inject(KT_FIELD_CONFIG, { optional: true });
+    /** Sélection courante : tableau des valeurs d'options cochées (two-way). @default [] */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // --- État poussé par [formField] ---
+    /** État « touché » (two-way), généralement piloté par `[formField]`. @default false */
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /** Désactive le groupe entier (hérité par chaque case enfant). @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Marque le groupe comme invalide (combiné à `touched`/`dirty` via l'`errorMatcher`). @default false */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Affiche l'astérisque requis et `aria-required` sur le groupe. @default false */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** État « modifié » (entre dans la logique d'affichage des erreurs). @default false */
+    dirty = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** Erreurs de validation à afficher sous le groupe. @default [] */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Attribut `name` partagé (à titre indicatif). @default '' */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // --- Présentation ---
+    /** id imposé (sélecteurs de test stables) ; sinon auto-généré, anti-collision. @default undefined */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Légende du groupe (`aria-labelledby`). @default undefined */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texte d'aide affiché sous le groupe (masqué quand une erreur s'affiche). @default undefined */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Nom accessible (`aria-label`) du groupe quand `label` est absent. @default undefined */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Stratégie décidant quand afficher les erreurs (sinon celle du `KT_FIELD_CONFIG`). @default undefined */
+    errorMatcher = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMatcher" }] : /* istanbul ignore next */ []));
+    /** Afficher toutes les erreurs au lieu de la première seule. @default KT_FIELD_CONFIG.showAllErrors ?? false */
+    showAllErrors = input(this.config?.showAllErrors ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAllErrors" }] : /* istanbul ignore next */ []));
+    /** Égalité des valeurs en mode objet (défaut : identité `===`). */
+    compareWith = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId('checkbox-group');
+    baseId = computed(() => this.id() ?? `kt-checkbox-group-${this.uid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => `${this.baseId()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.baseId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => `${this.baseId()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    matcher = computed(() => this.errorMatcher() ?? this.config?.errorMatcher ?? defaultKtFieldErrorMatcher, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matcher" }] : /* istanbul ignore next */ []));
+    showInvalid = computed(() => this.matcher()({ invalid: this.invalid(), touched: this.touched(), dirty: this.dirty() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []));
+    displayedErrors = computed(() => this.showAllErrors() ? this.errors() : this.errors().slice(0, 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedErrors" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.ariaLabel() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.hint() && !this.showInvalid())
+            ids.push(this.hintId());
+        if (this.showInvalid() && this.errors().length > 0)
+            ids.push(this.errorId());
+        return ids.length ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    comparator = computed(() => this.compareWith() ?? ((a, b) => a === b), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "comparator" }] : /* istanbul ignore next */ []));
+    /** La valeur d'option d'un enfant est-elle dans la sélection ? (lu dans le `computed` enfant) */
+    isSelected(optionValue) {
+        const arr = this.value() ?? [];
+        const cmp = this.comparator();
+        return arr.some((v) => cmp(v, optionValue));
+    }
+    /** Ajoute/retire une valeur d'option de la sélection (émis par un enfant au `change` natif). */
+    toggle(optionValue, checked) {
+        if (this.disabled())
+            return;
+        const arr = this.value() ?? [];
+        const cmp = this.comparator();
+        const exists = arr.some((v) => cmp(v, optionValue));
+        if (checked && !exists) {
+            this.value.set([...arr, optionValue]);
+        }
+        else if (!checked && exists) {
+            this.value.set(arr.filter((v) => !cmp(v, optionValue)));
+        }
+        this.touched.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtCheckboxGroup, isStandalone: true, selector: "kt-checkbox-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    <div
+      class="kt-checkbox-group-field"
+      [class.kt-checkbox-group-field--invalid]="showInvalid()"
+      [class.kt-checkbox-group-field--disabled]="disabled()"
+      role="group"
+      [attr.aria-labelledby]="label() ? labelId() : null"
+      [attr.aria-label]="!label() ? resolvedAriaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.aria-invalid]="showInvalid() ? 'true' : null"
+    >
+      @if (label(); as labelText) {
+        <span [id]="labelId()" class="kt-checkbox-group__legend">
+          {{ labelText }}
+          @if (required()) {
+            <span class="kt-checkbox-group__required" aria-hidden="true">*</span>
+          }
+        </span>
+      }
+
+      <div class="kt-checkbox-group__options">
+        <ng-content></ng-content>
+      </div>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-checkbox-group__hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-checkbox-group__error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-checkbox-group__error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: ["@layer kt-aaa.components{:host{display:block}.kt-checkbox-group-field{display:flex;flex-direction:column;gap:var(--field-gap, .375rem)}.kt-checkbox-group__legend{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit)}.kt-checkbox-group__required{margin-inline-start:.125rem;color:var(--field-required-color, var(--kt-danger, #8c1d18))}.kt-checkbox-group__options{display:flex;flex-direction:var(--checkbox-group-direction, column);flex-wrap:wrap;gap:var(--checkbox-group-gap, .25rem)}.kt-checkbox-group__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-checkbox-group__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-checkbox-group__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-checkbox-group__error-message{animation:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtCheckboxGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-checkbox-group', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="kt-checkbox-group-field"
+      [class.kt-checkbox-group-field--invalid]="showInvalid()"
+      [class.kt-checkbox-group-field--disabled]="disabled()"
+      role="group"
+      [attr.aria-labelledby]="label() ? labelId() : null"
+      [attr.aria-label]="!label() ? resolvedAriaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.aria-invalid]="showInvalid() ? 'true' : null"
+    >
+      @if (label(); as labelText) {
+        <span [id]="labelId()" class="kt-checkbox-group__legend">
+          {{ labelText }}
+          @if (required()) {
+            <span class="kt-checkbox-group__required" aria-hidden="true">*</span>
+          }
+        </span>
+      }
+
+      <div class="kt-checkbox-group__options">
+        <ng-content></ng-content>
+      </div>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-checkbox-group__hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-checkbox-group__error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-checkbox-group__error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, styles: ["@layer kt-aaa.components{:host{display:block}.kt-checkbox-group-field{display:flex;flex-direction:column;gap:var(--field-gap, .375rem)}.kt-checkbox-group__legend{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit)}.kt-checkbox-group__required{margin-inline-start:.125rem;color:var(--field-required-color, var(--kt-danger, #8c1d18))}.kt-checkbox-group__options{display:flex;flex-direction:var(--checkbox-group-direction, column);flex-wrap:wrap;gap:var(--checkbox-group-gap, .25rem)}.kt-checkbox-group__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-checkbox-group__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-checkbox-group__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-checkbox-group__error-message{animation:none}}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }] } });
+
+/**
+ * Case à cocher (Checkbox) accessible conforme aux normes WAI-ARIA / RGAA.
+ * Bâtie sur un `<input type="checkbox">` NATIF (clavier, clic-label, état `indeterminate`,
+ * mode contraste élevé gratuits), redessinée via `appearance: none` + pseudo-éléments thémés.
+ *
+ * DEUX MODES, selon la présence d'un `kt-checkbox-group` parent :
+ *  - Autonome : `value` est l'état coché (`boolean`, two-way), intégré aux Signal Forms via
+ *    `FormValueControl<boolean>` (même contrat que `kt-switch`).
+ *  - Dans un groupe : `value` est la VALEUR d'option représentée ; l'état coché dérive de
+ *    l'appartenance au tableau du groupe, et le (dé)cochage met à jour ce tableau.
+ *
+ * Libellé : `label` (texte) par défaut ; un contenu projeté le remplace visuellement pour les
+ * rendus riches (carte/option), `ariaLabel` portant alors le nom accessible si besoin.
+ *
+ * @example
+ * ```html
+ * <!-- Autonome -->
+ * <kt-checkbox label="Accepter les conditions" [(value)]="accepted" required />
+ *
+ * <!-- Dans un groupe -->
+ * <kt-checkbox-group label="Centres d'intérêt" [(value)]="interests">
+ *   <kt-checkbox [value]="'sport'" label="Sport" />
+ *   <kt-checkbox [value]="'musique'" label="Musique" />
+ * </kt-checkbox-group>
+ * ```
+ */
+class KtCheckbox {
+    config = inject(KT_FIELD_CONFIG, { optional: true });
+    /** Groupe parent optionnel : présent ⇒ la case appartient à un `kt-checkbox-group`. */
+    group = inject(KtCheckboxGroup, { optional: true });
+    /** Autonome : état coché (`boolean`, two-way). En groupe : la valeur d'option représentée. */
+    value = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Tri-état visuel (parent d'une arborescence) : propriété DOM `indeterminate`, pas un attribut. */
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // --- État poussé par [formField] (mode autonome) ---
+    /** État « touché » (two-way), généralement piloté par `[formField]`. @default false */
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /** Désactive la case (héritable du groupe parent). @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Marque la case comme invalide (combiné à `touched`/`dirty` via l'`errorMatcher`). @default false */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Affiche l'astérisque requis et `aria-required`. @default false */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** État « modifié » (entre dans la logique d'affichage des erreurs). @default false */
+    dirty = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** Erreurs de validation à afficher sous la case. @default [] */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Attribut `name` du `<input>` natif. @default '' */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // --- Présentation ---
+    /** id imposé (sélecteurs de test stables) ; sinon auto-généré, anti-collision. @default undefined */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Texte du libellé (remplacé visuellement par un contenu projeté). @default undefined */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texte d'aide affiché sous la case (masqué quand une erreur s'affiche). @default undefined */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Nom accessible (`aria-label`) pour une case sans libellé textuel. @default undefined */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Stratégie décidant quand afficher les erreurs (sinon celle du `KT_FIELD_CONFIG`). @default undefined */
+    errorMatcher = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMatcher" }] : /* istanbul ignore next */ []));
+    /** Afficher toutes les erreurs au lieu de la première seule. @default KT_FIELD_CONFIG.showAllErrors ?? false */
+    showAllErrors = input(this.config?.showAllErrors ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAllErrors" }] : /* istanbul ignore next */ []));
+    inputEl = viewChild.required('input');
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId('checkbox');
+    baseId = computed(() => this.id() ?? `kt-checkbox-${this.uid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.baseId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => `${this.baseId()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    /** Coché : appartenance au groupe le cas échéant, sinon l'état booléen propre.
+        (Nommé `isChecked` car `FormValueControl` réserve la propriété `checked`.) */
+    isChecked = computed(() => this.group ? this.group.isSelected(this.value()) : Boolean(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+    /** Désactivé : hérité du groupe le cas échéant. */
+    isDisabled = computed(() => (this.group?.disabled() ?? false) || this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    matcher = computed(() => this.errorMatcher() ?? this.config?.errorMatcher ?? defaultKtFieldErrorMatcher, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matcher" }] : /* istanbul ignore next */ []));
+    showInvalid = computed(() => this.matcher()({ invalid: this.invalid(), touched: this.touched(), dirty: this.dirty() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []));
+    displayedErrors = computed(() => this.showAllErrors() ? this.errors() : this.errors().slice(0, 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedErrors" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.ariaLabel() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.hint() && !this.showInvalid())
+            ids.push(this.hintId());
+        if (this.showInvalid() && this.errors().length > 0)
+            ids.push(this.errorId());
+        return ids.length ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // `indeterminate` est une PROPRIÉTÉ (non un attribut) : poussée impérativement sur l'input natif.
+        effect(() => {
+            this.inputEl().nativeElement.indeterminate = this.indeterminate();
+        });
+    }
+    onChange(event) {
+        if (this.isDisabled())
+            return;
+        const checked = event.target.checked;
+        if (this.group) {
+            this.group.toggle(this.value(), checked);
+            this.group.touched.set(true);
+            return;
+        }
+        this.value.set(checked);
+        this.touched.set(true);
+    }
+    onBlur() {
+        (this.group?.touched ?? this.touched).set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtCheckbox, isStandalone: true, selector: "kt-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      class="kt-checkbox-field"
+      [class.kt-checkbox-field--invalid]="showInvalid()"
+      [class.kt-checkbox-field--disabled]="isDisabled()"
+    >
+      <label class="kt-checkbox">
+        <input
+          #input
+          type="checkbox"
+          class="kt-checkbox__input"
+          [id]="baseId()"
+          [checked]="isChecked()"
+          [disabled]="isDisabled()"
+          [attr.name]="name() || null"
+          [attr.aria-label]="resolvedAriaLabel()"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-invalid]="showInvalid() ? 'true' : null"
+          [attr.aria-required]="required() ? 'true' : null"
+          (change)="onChange($event)"
+          (blur)="onBlur()"
+        />
+        <span class="kt-checkbox__label">
+          <ng-content>{{ label() }}</ng-content>
+          @if (required()) {
+            <span class="kt-checkbox__required" aria-hidden="true">*</span>
+          }
+        </span>
+      </label>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-checkbox-hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-checkbox-error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-checkbox-error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: ["@layer kt-aaa.components{:host{display:block}.kt-checkbox-field{display:flex;flex-direction:column;gap:var(--field-gap, .375rem)}.kt-checkbox{display:flex;align-items:center;gap:var(--field-control-gap, .5rem);inline-size:100%;box-sizing:border-box;min-block-size:var(--checkbox-target-size, 44px);padding:var(--checkbox-padding, 0);border-radius:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}.kt-checkbox__input{appearance:none;-webkit-appearance:none;margin:0;flex:none;box-sizing:border-box;display:grid;place-content:center;font-size:var(--checkbox-size, 1.25rem);inline-size:1em;block-size:1em;border:var(--checkbox-border-width, 2px) solid var(--checkbox-border-color, var(--field-border-color, var(--kt-outline, #c4c7c5)));border-radius:var(--checkbox-radius, .25rem);background-color:var(--checkbox-bg, var(--field-bg, var(--kt-surface, #ffffff)));cursor:pointer;box-shadow:var(--checkbox-shadow, var(--field-shadow, none));transition:var( --checkbox-transition, background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease )}.kt-checkbox__input:before{content:\"\";inline-size:.65em;block-size:.65em;transform:scale(0);transform-origin:center;box-shadow:inset 1em 1em var(--checkbox-mark-color, #ffffff);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:var(--checkbox-mark-transition, transform .12s ease-in)}.kt-checkbox__input:checked:before,.kt-checkbox__input:indeterminate:before{transform:scale(1);animation:var(--checkbox-mark-animation, kt-checkbox-pop .22s cubic-bezier(.34, 1.56, .64, 1))}.kt-checkbox__input:indeterminate:before{clip-path:inset(42% 12%)}@keyframes kt-checkbox-pop{0%{transform:scale(0)}}.kt-checkbox__input:checked,.kt-checkbox__input:indeterminate{background-color:var(--checkbox-bg-checked, var(--kt-primary, #0842a0));border-color:var(--checkbox-border-color-checked, var(--checkbox-bg-checked, var(--kt-primary, #0842a0)));box-shadow:var( --checkbox-shadow-checked, 0 0 8px color-mix(in srgb, var(--checkbox-bg-checked, var(--kt-primary, #0842a0)) 50%, transparent) )}.kt-checkbox__input:hover:not(:disabled){border-color:var( --checkbox-border-color-hover, var(--field-border-color-hover, var(--kt-outline-strong, #5f6368)) );box-shadow:var( --checkbox-shadow-hover, var(--field-shadow-hover, var(--checkbox-shadow, var(--field-shadow, none))) )}.kt-checkbox__input:checked:hover:not(:disabled),.kt-checkbox__input:indeterminate:hover:not(:disabled){background-color:var(--checkbox-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black));border-color:var(--checkbox-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black))}.kt-checkbox__input:focus-visible{outline:var(--kt-focus-ring-width, 2px) solid var(--kt-focus-ring-color, #0842a0);outline-offset:var(--checkbox-focus-ring-offset, 2px);box-shadow:var(--checkbox-shadow-focus, var(--field-shadow-focus, var(--field-shadow, none)))}.kt-checkbox__input:disabled{cursor:not-allowed;opacity:.5}.kt-checkbox-field--disabled .kt-checkbox{cursor:not-allowed}.kt-checkbox-field--invalid .kt-checkbox__input:not(:checked):not(:indeterminate){border-color:var(--field-error-color, var(--kt-danger, #8c1d18))}.kt-checkbox__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit)}.kt-checkbox-field--disabled .kt-checkbox__label{color:var(--field-hint-color, #5f6368);opacity:.6}.kt-checkbox__required{margin-inline-start:.125rem;color:var(--field-required-color, var(--kt-danger, #8c1d18))}.kt-checkbox-hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-checkbox-error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-checkbox-error-message{animation:var(--field-error-animation, none)}@media(forced-colors:active){.kt-checkbox__input{border-color:CanvasText;background-color:Canvas}.kt-checkbox__input:checked,.kt-checkbox__input:indeterminate{background-color:Highlight;border-color:Highlight}.kt-checkbox__input:before{box-shadow:inset 1em 1em HighlightText}.kt-checkbox__input:disabled{border-color:GrayText}.kt-checkbox__input:focus-visible{outline:2px solid CanvasText;outline-offset:2px}}@media(prefers-reduced-motion:reduce){.kt-checkbox__input,.kt-checkbox__input:before{transition:none;animation:none}.kt-checkbox-error-message{animation:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="kt-checkbox-field"
+      [class.kt-checkbox-field--invalid]="showInvalid()"
+      [class.kt-checkbox-field--disabled]="isDisabled()"
+    >
+      <label class="kt-checkbox">
+        <input
+          #input
+          type="checkbox"
+          class="kt-checkbox__input"
+          [id]="baseId()"
+          [checked]="isChecked()"
+          [disabled]="isDisabled()"
+          [attr.name]="name() || null"
+          [attr.aria-label]="resolvedAriaLabel()"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-invalid]="showInvalid() ? 'true' : null"
+          [attr.aria-required]="required() ? 'true' : null"
+          (change)="onChange($event)"
+          (blur)="onBlur()"
+        />
+        <span class="kt-checkbox__label">
+          <ng-content>{{ label() }}</ng-content>
+          @if (required()) {
+            <span class="kt-checkbox__required" aria-hidden="true">*</span>
+          }
+        </span>
+      </label>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-checkbox-hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-checkbox-error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-checkbox-error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, styles: ["@layer kt-aaa.components{:host{display:block}.kt-checkbox-field{display:flex;flex-direction:column;gap:var(--field-gap, .375rem)}.kt-checkbox{display:flex;align-items:center;gap:var(--field-control-gap, .5rem);inline-size:100%;box-sizing:border-box;min-block-size:var(--checkbox-target-size, 44px);padding:var(--checkbox-padding, 0);border-radius:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}.kt-checkbox__input{appearance:none;-webkit-appearance:none;margin:0;flex:none;box-sizing:border-box;display:grid;place-content:center;font-size:var(--checkbox-size, 1.25rem);inline-size:1em;block-size:1em;border:var(--checkbox-border-width, 2px) solid var(--checkbox-border-color, var(--field-border-color, var(--kt-outline, #c4c7c5)));border-radius:var(--checkbox-radius, .25rem);background-color:var(--checkbox-bg, var(--field-bg, var(--kt-surface, #ffffff)));cursor:pointer;box-shadow:var(--checkbox-shadow, var(--field-shadow, none));transition:var( --checkbox-transition, background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease )}.kt-checkbox__input:before{content:\"\";inline-size:.65em;block-size:.65em;transform:scale(0);transform-origin:center;box-shadow:inset 1em 1em var(--checkbox-mark-color, #ffffff);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:var(--checkbox-mark-transition, transform .12s ease-in)}.kt-checkbox__input:checked:before,.kt-checkbox__input:indeterminate:before{transform:scale(1);animation:var(--checkbox-mark-animation, kt-checkbox-pop .22s cubic-bezier(.34, 1.56, .64, 1))}.kt-checkbox__input:indeterminate:before{clip-path:inset(42% 12%)}@keyframes kt-checkbox-pop{0%{transform:scale(0)}}.kt-checkbox__input:checked,.kt-checkbox__input:indeterminate{background-color:var(--checkbox-bg-checked, var(--kt-primary, #0842a0));border-color:var(--checkbox-border-color-checked, var(--checkbox-bg-checked, var(--kt-primary, #0842a0)));box-shadow:var( --checkbox-shadow-checked, 0 0 8px color-mix(in srgb, var(--checkbox-bg-checked, var(--kt-primary, #0842a0)) 50%, transparent) )}.kt-checkbox__input:hover:not(:disabled){border-color:var( --checkbox-border-color-hover, var(--field-border-color-hover, var(--kt-outline-strong, #5f6368)) );box-shadow:var( --checkbox-shadow-hover, var(--field-shadow-hover, var(--checkbox-shadow, var(--field-shadow, none))) )}.kt-checkbox__input:checked:hover:not(:disabled),.kt-checkbox__input:indeterminate:hover:not(:disabled){background-color:var(--checkbox-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black));border-color:var(--checkbox-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black))}.kt-checkbox__input:focus-visible{outline:var(--kt-focus-ring-width, 2px) solid var(--kt-focus-ring-color, #0842a0);outline-offset:var(--checkbox-focus-ring-offset, 2px);box-shadow:var(--checkbox-shadow-focus, var(--field-shadow-focus, var(--field-shadow, none)))}.kt-checkbox__input:disabled{cursor:not-allowed;opacity:.5}.kt-checkbox-field--disabled .kt-checkbox{cursor:not-allowed}.kt-checkbox-field--invalid .kt-checkbox__input:not(:checked):not(:indeterminate){border-color:var(--field-error-color, var(--kt-danger, #8c1d18))}.kt-checkbox__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit)}.kt-checkbox-field--disabled .kt-checkbox__label{color:var(--field-hint-color, #5f6368);opacity:.6}.kt-checkbox__required{margin-inline-start:.125rem;color:var(--field-required-color, var(--kt-danger, #8c1d18))}.kt-checkbox-hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-checkbox-error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-checkbox-error-message{animation:var(--field-error-animation, none)}@media(forced-colors:active){.kt-checkbox__input{border-color:CanvasText;background-color:Canvas}.kt-checkbox__input:checked,.kt-checkbox__input:indeterminate{background-color:Highlight;border-color:Highlight}.kt-checkbox__input:before{box-shadow:inset 1em 1em HighlightText}.kt-checkbox__input:disabled{border-color:GrayText}.kt-checkbox__input:focus-visible{outline:2px solid CanvasText;outline-offset:2px}}@media(prefers-reduced-motion:reduce){.kt-checkbox__input,.kt-checkbox__input:before{transition:none;animation:none}.kt-checkbox-error-message{animation:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+/**
+ * Groupe de boutons radio (Radio Group) conforme à l'ARIA APG / RGAA.
+ * Orchestrateur : porte la valeur (`FormValueControl<V | null>`), génère le `name` partagé et la
+ * sémantique de groupe (`role="radiogroup"`, légende, `aria-required`/`aria-invalid`, erreurs).
+ *
+ * Le clavier (roving tabindex + flèches qui déplacent ET cochent) est laissé au NATIF : les
+ * `<input type="radio">` des `kt-radio` enfants partagent le `name` du groupe — rien à réimplémenter.
+ * Les options sont fournies par le dev (boucle `@for` ou déclaration en dur) ; `compareWith` gère
+ * l'égalité quand `value` est un objet.
+ *
+ * @example
+ * ```html
+ * <kt-radio-group label="Civilité" [(value)]="civility" required>
+ *   <kt-radio [value]="'mme'" label="Madame" />
+ *   <kt-radio [value]="'m'" label="Monsieur" />
+ *   <kt-radio [value]="'autre'" label="Autre" />
+ * </kt-radio-group>
+ * ```
+ */
+class KtRadioGroup {
+    config = inject(KT_FIELD_CONFIG, { optional: true });
+    /** Valeur sélectionnée (two-way), ou `null` si aucune option n'est cochée. @default null */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // --- État poussé par [formField] ---
+    /** État « touché » (two-way), généralement piloté par `[formField]`. @default false */
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /** Désactive le groupe entier (hérité par chaque radio enfant). @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Marque le groupe comme invalide (combiné à `touched`/`dirty` via l'`errorMatcher`). @default false */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Affiche l'astérisque requis et `aria-required` sur le groupe. @default false */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** État « modifié » (entre dans la logique d'affichage des erreurs). @default false */
+    dirty = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** Erreurs de validation à afficher sous le groupe. @default [] */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Base du `name` partagé par les radios enfants (sinon auto-généré). @default '' */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // --- Présentation ---
+    /** id imposé (sélecteurs de test stables) ; sinon auto-généré, anti-collision. @default undefined */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Légende du groupe (`aria-labelledby`). @default undefined */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texte d'aide affiché sous le groupe (masqué quand une erreur s'affiche). @default undefined */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Nom accessible (`aria-label`) du groupe quand `label` est absent. @default undefined */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Stratégie décidant quand afficher les erreurs (sinon celle du `KT_FIELD_CONFIG`). @default undefined */
+    errorMatcher = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMatcher" }] : /* istanbul ignore next */ []));
+    /** Afficher toutes les erreurs au lieu de la première seule. @default KT_FIELD_CONFIG.showAllErrors ?? false */
+    showAllErrors = input(this.config?.showAllErrors ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAllErrors" }] : /* istanbul ignore next */ []));
+    /** Égalité des valeurs en mode objet (défaut : identité `===`). Seul rescapé du contrat select. */
+    compareWith = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId('radio-group');
+    baseId = computed(() => this.id() ?? `kt-radio-group-${this.uid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
+    /** `name` partagé par les radios enfants → regroupement clavier NATIF (roving + flèches). */
+    groupName = computed(() => this.name() || `${this.baseId()}-name`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupName" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => `${this.baseId()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.baseId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => `${this.baseId()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    matcher = computed(() => this.errorMatcher() ?? this.config?.errorMatcher ?? defaultKtFieldErrorMatcher, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matcher" }] : /* istanbul ignore next */ []));
+    showInvalid = computed(() => this.matcher()({ invalid: this.invalid(), touched: this.touched(), dirty: this.dirty() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []));
+    displayedErrors = computed(() => this.showAllErrors() ? this.errors() : this.errors().slice(0, 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedErrors" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.ariaLabel() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.hint() && !this.showInvalid())
+            ids.push(this.hintId());
+        if (this.showInvalid() && this.errors().length > 0)
+            ids.push(this.errorId());
+        return ids.length ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    comparator = computed(() => this.compareWith() ?? ((a, b) => a === b), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "comparator" }] : /* istanbul ignore next */ []));
+    /** Le `value` d'un enfant correspond-il à la sélection courante ? (lu dans le `computed` enfant) */
+    isSelected(radioValue) {
+        const v = this.value();
+        if (v === null || v === undefined)
+            return false;
+        return this.comparator()(radioValue, v);
+    }
+    /** Commit d'une sélection émis par un enfant au `change` natif. */
+    select(radioValue) {
+        if (this.disabled())
+            return;
+        this.value.set(radioValue);
+        this.touched.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtRadioGroup, isStandalone: true, selector: "kt-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    <div
+      class="kt-radio-group-field"
+      [class.kt-radio-group-field--invalid]="showInvalid()"
+      [class.kt-radio-group-field--disabled]="disabled()"
+      role="radiogroup"
+      [attr.aria-labelledby]="label() ? labelId() : null"
+      [attr.aria-label]="!label() ? resolvedAriaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.aria-invalid]="showInvalid() ? 'true' : null"
+    >
+      @if (label(); as labelText) {
+        <span [id]="labelId()" class="kt-radio-group__legend">
+          {{ labelText }}
+          @if (required()) {
+            <span class="kt-radio-group__required" aria-hidden="true">*</span>
+          }
+        </span>
+      }
+
+      <div class="kt-radio-group__options">
+        <ng-content></ng-content>
+      </div>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-radio-group__hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-radio-group__error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-radio-group__error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: ["@layer kt-aaa.components{:host{display:block}.kt-radio-group-field{display:flex;flex-direction:column;gap:var(--field-gap, .375rem)}.kt-radio-group__legend{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit)}.kt-radio-group__required{margin-inline-start:.125rem;color:var(--field-required-color, var(--kt-danger, #8c1d18))}.kt-radio-group__options{display:flex;flex-direction:var(--radio-group-direction, column);flex-wrap:wrap;gap:var(--radio-group-gap, .25rem)}.kt-radio-group__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-radio-group__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-radio-group__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-radio-group__error-message{animation:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="kt-radio-group-field"
+      [class.kt-radio-group-field--invalid]="showInvalid()"
+      [class.kt-radio-group-field--disabled]="disabled()"
+      role="radiogroup"
+      [attr.aria-labelledby]="label() ? labelId() : null"
+      [attr.aria-label]="!label() ? resolvedAriaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.aria-invalid]="showInvalid() ? 'true' : null"
+    >
+      @if (label(); as labelText) {
+        <span [id]="labelId()" class="kt-radio-group__legend">
+          {{ labelText }}
+          @if (required()) {
+            <span class="kt-radio-group__required" aria-hidden="true">*</span>
+          }
+        </span>
+      }
+
+      <div class="kt-radio-group__options">
+        <ng-content></ng-content>
+      </div>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-radio-group__hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-radio-group__error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-radio-group__error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, styles: ["@layer kt-aaa.components{:host{display:block}.kt-radio-group-field{display:flex;flex-direction:column;gap:var(--field-gap, .375rem)}.kt-radio-group__legend{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit)}.kt-radio-group__required{margin-inline-start:.125rem;color:var(--field-required-color, var(--kt-danger, #8c1d18))}.kt-radio-group__options{display:flex;flex-direction:var(--radio-group-direction, column);flex-wrap:wrap;gap:var(--radio-group-gap, .25rem)}.kt-radio-group__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-radio-group__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-radio-group__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-radio-group__error-message{animation:none}}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }] } });
+
+/**
+ * Bouton radio individuel (enfant déclaratif de `kt-radio-group`).
+ * `<input type="radio">` NATIF partageant le `name` du groupe : clavier (roving + flèches) gratuit.
+ * Le libellé suit la même règle que la checkbox : `label` texte par défaut, contenu projeté en
+ * override visuel (carte sélectionnable), `ariaLabel` pour le nom accessible d'une option non-textuelle.
+ *
+ * @example
+ * ```html
+ * <kt-radio-group label="Civilité" [(value)]="civility">
+ *   <kt-radio [value]="'mme'" label="Madame" />
+ *   <kt-radio [value]="'m'" label="Monsieur" />
+ * </kt-radio-group>
+ * ```
+ */
+class KtRadio {
+    group = inject(KtRadioGroup);
+    /** Valeur d'option représentée par ce radio (sélectionnée ⇒ devient la valeur du groupe). @default (requis) */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Texte du libellé (remplacé visuellement par un contenu projeté). @default undefined */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texte d'aide affiché sous le radio. @default undefined */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Nom accessible (`aria-label`) pour une option sans libellé textuel. @default undefined */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Désactive ce radio (combiné à l'état désactivé du groupe). @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** id imposé (sélecteurs de test stables) ; sinon auto-généré, anti-collision. @default undefined */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId('radio');
+    baseId = computed(() => this.id() ?? `kt-radio-${this.uid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.baseId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    checked = computed(() => this.group.isSelected(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.group.disabled() || this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    onChange() {
+        this.group.select(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtRadio, isStandalone: true, selector: "kt-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <label class="kt-radio">
+      <input
+        type="radio"
+        class="kt-radio__input"
+        [id]="baseId()"
+        [name]="group.groupName()"
+        [checked]="checked()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-describedby]="hint() ? hintId() : null"
+        (change)="onChange()"
+        (blur)="group.touched.set(true)"
+      />
+      <span class="kt-radio__label">
+        <ng-content>{{ label() }}</ng-content>
+      </span>
+    </label>
+
+    @if (hint(); as hintText) {
+      <p [id]="hintId()" class="kt-radio__hint">{{ hintText }}</p>
+    }
+  `, isInline: true, styles: ["@layer kt-aaa.components{:host{display:block}.kt-radio{display:flex;align-items:center;gap:var(--field-control-gap, .5rem);inline-size:100%;box-sizing:border-box;min-block-size:var(--radio-target-size, 44px);padding:var(--radio-padding, 0);border-radius:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}.kt-radio__input{appearance:none;-webkit-appearance:none;margin:0;flex:none;box-sizing:border-box;display:grid;place-content:center;font-size:var(--radio-size, 1.25rem);inline-size:1em;block-size:1em;border:var(--radio-border-width, 2px) solid var(--radio-border-color, var(--field-border-color, var(--kt-outline, #c4c7c5)));border-radius:50%;background-color:var(--radio-bg, var(--field-bg, var(--kt-surface, #ffffff)));cursor:pointer;box-shadow:var(--radio-shadow, var(--field-shadow, none));transition:var( --radio-transition, background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease )}.kt-radio__input:before{content:\"\";inline-size:.5em;block-size:.5em;border-radius:50%;transform:scale(0);transform-origin:center;box-shadow:inset 1em 1em var(--radio-dot-color, #ffffff);transition:var(--radio-dot-transition, transform .12s ease-in)}.kt-radio__input:checked:before{transform:scale(1);animation:var(--radio-dot-animation, kt-radio-pop .22s cubic-bezier(.34, 1.56, .64, 1))}@keyframes kt-radio-pop{0%{transform:scale(0)}}.kt-radio__input:checked{background-color:var(--radio-bg-checked, var(--kt-primary, #0842a0));border-color:var(--radio-border-color-checked, var(--radio-bg-checked, var(--kt-primary, #0842a0)));box-shadow:var( --radio-shadow-checked, 0 0 8px color-mix(in srgb, var(--radio-bg-checked, var(--kt-primary, #0842a0)) 50%, transparent) )}.kt-radio__input:hover:not(:disabled){border-color:var(--radio-border-color-hover, var(--field-border-color-hover, var(--kt-outline-strong, #5f6368)));box-shadow:var(--radio-shadow-hover, var(--field-shadow-hover, var(--radio-shadow, var(--field-shadow, none))))}.kt-radio__input:checked:hover:not(:disabled){background-color:var(--radio-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black));border-color:var(--radio-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black))}.kt-radio__input:focus-visible{outline:var(--kt-focus-ring-width, 2px) solid var(--kt-focus-ring-color, #0842a0);outline-offset:var(--radio-focus-ring-offset, 2px);box-shadow:var(--radio-shadow-focus, var(--field-shadow-focus, var(--field-shadow, none)))}.kt-radio__input:disabled{cursor:not-allowed;opacity:.5}.kt-radio:has(.kt-radio__input:disabled){cursor:not-allowed}.kt-radio__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit)}.kt-radio:has(.kt-radio__input:disabled) .kt-radio__label{color:var(--field-hint-color, #5f6368);opacity:.6}.kt-radio__hint{margin:0;margin-inline-start:calc(var(--radio-size, 1.25rem) + var(--field-control-gap, .5rem));font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}@media(forced-colors:active){.kt-radio__input{border-color:CanvasText;background-color:Canvas}.kt-radio__input:checked{border-color:Highlight;background-color:Canvas}.kt-radio__input:before{box-shadow:inset 1em 1em Highlight}.kt-radio__input:disabled{border-color:GrayText}.kt-radio__input:focus-visible{outline:2px solid CanvasText;outline-offset:2px}}@media(prefers-reduced-motion:reduce){.kt-radio__input,.kt-radio__input:before{transition:none;animation:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <label class="kt-radio">
+      <input
+        type="radio"
+        class="kt-radio__input"
+        [id]="baseId()"
+        [name]="group.groupName()"
+        [checked]="checked()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-describedby]="hint() ? hintId() : null"
+        (change)="onChange()"
+        (blur)="group.touched.set(true)"
+      />
+      <span class="kt-radio__label">
+        <ng-content>{{ label() }}</ng-content>
+      </span>
+    </label>
+
+    @if (hint(); as hintText) {
+      <p [id]="hintId()" class="kt-radio__hint">{{ hintText }}</p>
+    }
+  `, styles: ["@layer kt-aaa.components{:host{display:block}.kt-radio{display:flex;align-items:center;gap:var(--field-control-gap, .5rem);inline-size:100%;box-sizing:border-box;min-block-size:var(--radio-target-size, 44px);padding:var(--radio-padding, 0);border-radius:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}.kt-radio__input{appearance:none;-webkit-appearance:none;margin:0;flex:none;box-sizing:border-box;display:grid;place-content:center;font-size:var(--radio-size, 1.25rem);inline-size:1em;block-size:1em;border:var(--radio-border-width, 2px) solid var(--radio-border-color, var(--field-border-color, var(--kt-outline, #c4c7c5)));border-radius:50%;background-color:var(--radio-bg, var(--field-bg, var(--kt-surface, #ffffff)));cursor:pointer;box-shadow:var(--radio-shadow, var(--field-shadow, none));transition:var( --radio-transition, background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease )}.kt-radio__input:before{content:\"\";inline-size:.5em;block-size:.5em;border-radius:50%;transform:scale(0);transform-origin:center;box-shadow:inset 1em 1em var(--radio-dot-color, #ffffff);transition:var(--radio-dot-transition, transform .12s ease-in)}.kt-radio__input:checked:before{transform:scale(1);animation:var(--radio-dot-animation, kt-radio-pop .22s cubic-bezier(.34, 1.56, .64, 1))}@keyframes kt-radio-pop{0%{transform:scale(0)}}.kt-radio__input:checked{background-color:var(--radio-bg-checked, var(--kt-primary, #0842a0));border-color:var(--radio-border-color-checked, var(--radio-bg-checked, var(--kt-primary, #0842a0)));box-shadow:var( --radio-shadow-checked, 0 0 8px color-mix(in srgb, var(--radio-bg-checked, var(--kt-primary, #0842a0)) 50%, transparent) )}.kt-radio__input:hover:not(:disabled){border-color:var(--radio-border-color-hover, var(--field-border-color-hover, var(--kt-outline-strong, #5f6368)));box-shadow:var(--radio-shadow-hover, var(--field-shadow-hover, var(--radio-shadow, var(--field-shadow, none))))}.kt-radio__input:checked:hover:not(:disabled){background-color:var(--radio-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black));border-color:var(--radio-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black))}.kt-radio__input:focus-visible{outline:var(--kt-focus-ring-width, 2px) solid var(--kt-focus-ring-color, #0842a0);outline-offset:var(--radio-focus-ring-offset, 2px);box-shadow:var(--radio-shadow-focus, var(--field-shadow-focus, var(--field-shadow, none)))}.kt-radio__input:disabled{cursor:not-allowed;opacity:.5}.kt-radio:has(.kt-radio__input:disabled){cursor:not-allowed}.kt-radio__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);color:var(--field-label-color, inherit)}.kt-radio:has(.kt-radio__input:disabled) .kt-radio__label{color:var(--field-hint-color, #5f6368);opacity:.6}.kt-radio__hint{margin:0;margin-inline-start:calc(var(--radio-size, 1.25rem) + var(--field-control-gap, .5rem));font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}@media(forced-colors:active){.kt-radio__input{border-color:CanvasText;background-color:Canvas}.kt-radio__input:checked{border-color:Highlight;background-color:Canvas}.kt-radio__input:before{box-shadow:inset 1em 1em Highlight}.kt-radio__input:disabled{border-color:GrayText}.kt-radio__input:focus-visible{outline:2px solid CanvasText;outline-offset:2px}}@media(prefers-reduced-motion:reduce){.kt-radio__input,.kt-radio__input:before{transition:none;animation:none}}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+const KT_SELECT_CONFIG = new InjectionToken('KT_SELECT_CONFIG');
+
+/** Normalise une clé/fonction en fonction d'accès, avec repli si non fourni. */
+function accessor(key, fallback) {
+    if (key === undefined)
+        return fallback;
+    if (typeof key === 'function')
+        return key;
+    return (item) => item[key];
+}
+/** Libellé par défaut : `label`/`name` pour un objet, sinon `String(item)`. */
+function defaultLabel(item) {
+    if (item !== null && typeof item === 'object') {
+        const o = item;
+        const v = o['label'] ?? o['name'];
+        if (v !== undefined && v !== null)
+            return String(v);
+    }
+    return String(item);
+}
+/** Identité par défaut : `id`/`value` pour un objet, sinon l'item lui-même (primitif). */
+function defaultIdentity(item) {
+    if (item !== null && typeof item === 'object') {
+        const o = item;
+        return o['id'] ?? o['value'] ?? item;
+    }
+    return item;
+}
+
+/** Annonce différée du nombre de résultats : ~500 ms après la dernière frappe (anti-spam SR). */
+const ANNOUNCE_DELAY_MS = 500;
+/** Normalisation du filtre par défaut : insensible à la casse ET aux accents
+    (décomposition NFD puis suppression des diacritiques combinants). */
+function normalizeForFilter(s) {
+    return s
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase();
+}
+/** Annonce par défaut du nombre de résultats (lib neutre : anglais, comme `emptyText`). */
+function defaultFilterResultsText(count) {
+    return count === 1 ? '1 result' : `${count} results`;
+}
+function defaultTruncatedResultsText(max, total) {
+    return `Showing first ${max} results of ${total}. Refine your search to see more.`;
+}
+function defaultTruncatedResultsAnnouncement(max, total) {
+    return `${max} results displayed out of ${total}. Refine your search to see more.`;
+}
+/** Base partagée des sélecteurs à liste fermée (Select single et MultiSelect), bâtis sur
+    `@angular/aria` (Combobox + Listbox) : options et dérivation (clé/fonction), état poussé
+    par `[formField]`, popup Popover responsive (dropdown ancré desktop ↔ bottom-sheet
+    téléphone, drag-to-dismiss), filtrage opt-in avec live region, clavier commun (Échap
+    global, Tab APG depuis le filtre). La VALEUR (`V | null` vs `V[]`) et `selectionChange`
+    restent dans les sous-classes : leurs types divergent, chacune implémente seule
+    `FormValueControl<…>`. Même pattern d'héritage que `BaseInputField`.
+
+    @template T Type d'une option (élément du tableau `options`).
+    @template V Type de la valeur émise par le contrôle (défaut `T` : l'objet entier ;
+      ou la clé extraite quand `optionValue` est fourni). */
+class KtBaseSelect {
+    fieldConfig = inject(KT_FIELD_CONFIG, { optional: true });
+    config = inject(KT_SELECT_CONFIG, { optional: true });
+    host = inject(ElementRef);
+    ngZone = inject(NgZone);
+    doc = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    wasExpanded = false;
+    // --- 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 */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Libellé affiché d'une option : clé OU fonction. Défaut : `label`/`name`, sinon `String(option)`. */
+    optionLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    /** Dérive la valeur de sortie ET l'identité d'une option.
+        - Fourni (clé/fonction) ⇒ `value` = la/les clé(s) extraite(s).
+        - Omis ⇒ `value` = l'objet entier ; l'identité interne dérive de `id`/`value`. */
+    optionValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    /** Désactivation d'une option : clé OU fonction renvoyant un booléen. Défaut : aucune option désactivée. */
+    optionDisabled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    /** Égalité des options en mode objet (présélection). Défaut : comparaison par identité (`id`/`value`). */
+    compareWith = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    /** Émis au clic sur le bouton d'aide contextuelle. */
+    helpClick = output();
+    // --- État poussé par [formField] (même contrat que BaseInputField) ---
+    /** Le champ a-t-il été visité ? Poussé par `[formField]` ; passe à `true` à la première sélection. @default false */
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /** Champ désactivé (trigger inerte). Poussé par `[formField]`. @default false */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Champ en lecture seule (sélection figée, valeur affichée). Poussé par `[formField]`. @default false */
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Le champ est-il invalide ? Pilote l'affichage des erreurs. Poussé par `[formField]`. @default false */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Champ obligatoire (marqueur visuel/ARIA). Poussé par `[formField]`. @default false */
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Le champ a-t-il été modifié depuis sa valeur initiale ? Poussé par `[formField]`. @default false */
+    dirty = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** Erreurs de validation à afficher. Poussé par `[formField]`. @default [] */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Attribut `name` logique du contrôle (à titre indicatif). @default '' */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // --- Présentation ---
+    /** id imposé (sélecteurs de test stables) ; sinon auto-généré par Field. @default undefined */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Libellé du champ (rendu par Field). @default undefined */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texte d'aide affiché sous le champ quand il est valide. @default undefined */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Aide contextuelle riche : texte ou `TemplateRef` rendu dans une infobulle d'aide. @default undefined */
+    helpText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "helpText" }] : /* istanbul ignore next */ []));
+    /** Libellé accessible du bouton d'aide. @default 'Help' (ou KT_FIELD_CONFIG.helpLabel) */
+    helpLabel = input(this.fieldConfig?.helpLabel ?? 'Help', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helpLabel" }] : /* istanbul ignore next */ []));
+    /** Force la valeur de `aria-describedby` (sinon dérivée de hint/erreur). @default undefined */
+    customDescribedBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "customDescribedBy" }] : /* istanbul ignore next */ []));
+    /** Texte indicatif affiché quand aucune option n'est sélectionnée. @default undefined */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Quand afficher l'erreur ; surcharge KT_FIELD_CONFIG et le défaut (`invalid && touched`). @default undefined */
+    errorMatcher = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMatcher" }] : /* istanbul ignore next */ []));
+    // --- Filtrage (champ de recherche dans le popup, opt-in) ---
+    /** Affiche un champ de recherche en tête du popup (desktop) / de la sheet (téléphone).
+        Pour les listes longues ; le texte tapé ne sert qu'à filtrer (réinitialisé à la fermeture). */
+    filterable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+    /** Placeholder du champ de recherche du popup. Défaut : `KT_SELECT_CONFIG.filterPlaceholder` ou vide. */
+    filterPlaceholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Libellé accessible du champ de recherche. Défaut : `KT_SELECT_CONFIG.filterLabel` ou « Filter options ». */
+    filterLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterLabel" }] : /* istanbul ignore next */ []));
+    /** Prédicat de filtre custom `(option, texte tapé brut)`.
+        Défaut : libellé de l'option, insensible à la casse et aux accents. */
+    filterFn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterFn" }] : /* istanbul ignore next */ []));
+    /** Nombre maximal d'options affichées dans le DOM en mode filtrable pour optimiser les performances. @default 100 */
+    maxVisibleOptions = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxVisibleOptions" }] : /* istanbul ignore next */ []));
+    /** Texte informatif de troncature des résultats (visuel). */
+    truncatedResultsText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "truncatedResultsText" }] : /* istanbul ignore next */ []));
+    /** Annonce de la troncature des résultats (live region). */
+    truncatedResultsAnnouncement = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "truncatedResultsAnnouncement" }] : /* istanbul ignore next */ []));
+    // --- État interne du popup ---
+    expanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    viewport = inject(KtViewport);
+    /** Écran compact (téléphone / fenêtre étroite) : bascule le popup en bottom-sheet modale.
+        Source unique configurable par appli (`KtViewport` / `provideKtBreakpoints`) ; pilote aussi
+        la classe CSS `kt-select__popup--sheet` du template. */
+    compact = this.viewport.isCompact;
+    triggerEl = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+    popupEl = viewChild('popup', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popupEl" }] : /* istanbul ignore next */ []));
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId('select');
+    anchorName = `--kt-select-anchor-${this.uid}`;
+    /** id du panneau (élément widget) en mode filtrable — cible de l'aria-controls du trigger. */
+    panelId = `kt-select-panel-${this.uid}`;
+    filterInputEl = viewChild('filterInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterInputEl" }] : /* istanbul ignore next */ []));
+    listboxEl = viewChild('listboxEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxEl" }] : /* istanbul ignore next */ []));
+    listboxDir = viewChild(Listbox, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxDir" }] : /* istanbul ignore next */ []));
+    comboboxDir = viewChild(Combobox, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "comboboxDir" }] : /* istanbul ignore next */ []));
+    /** Suit l'état réel du Popover : la fermeture peut être synchrone (Tab) ET pilotée par
+        l'effect — sans ce flag, le second `hidePopover()` jetterait une InvalidStateError. */
+    popoverShown = false;
+    // --- Politique d'affichage des erreurs (cohérente avec les champs) ---
+    matcher = computed(() => this.errorMatcher() ?? this.fieldConfig?.errorMatcher ?? defaultKtFieldErrorMatcher, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matcher" }] : /* istanbul ignore next */ []));
+    showInvalid = computed(() => this.matcher()({ invalid: this.invalid(), touched: this.touched(), dirty: this.dirty() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []));
+    // --- Textes résolus (input > KT_SELECT_CONFIG > défaut lib neutre EN) ---
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.config?.placeholder ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    resolvedEmptyText = computed(() => this.config?.emptyText ?? 'No options', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEmptyText" }] : /* istanbul ignore next */ []));
+    resolvedCloseLabel = computed(() => this.config?.closeLabel ?? 'Close', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCloseLabel" }] : /* istanbul ignore next */ []));
+    resolvedFilterPlaceholder = computed(() => this.filterPlaceholder() ?? this.config?.filterPlaceholder ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFilterPlaceholder" }] : /* istanbul ignore next */ []));
+    resolvedFilterLabel = computed(() => this.filterLabel() ?? this.config?.filterLabel ?? 'Filter options', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFilterLabel" }] : /* istanbul ignore next */ []));
+    resolvedFilterResultsText = computed(() => this.config?.filterResultsText ?? defaultFilterResultsText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFilterResultsText" }] : /* istanbul ignore next */ []));
+    resolvedTruncatedResultsText = computed(() => this.truncatedResultsText() ?? this.config?.truncatedResultsText ?? defaultTruncatedResultsText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTruncatedResultsText" }] : /* istanbul ignore next */ []));
+    resolvedTruncatedResultsAnnouncement = computed(() => this.truncatedResultsAnnouncement() ??
+        this.config?.truncatedResultsAnnouncement ??
+        defaultTruncatedResultsAnnouncement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTruncatedResultsAnnouncement" }] : /* istanbul ignore next */ []));
+    // Field attend des { kind, message } ; on mappe les ValidationError.
+    fieldErrors = computed(() => this.errors().map((e) => ({ kind: e.kind, message: e.message })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldErrors" }] : /* istanbul ignore next */ []));
+    // --- Accès aux options ---
+    labelAccessor = computed(() => accessor(this.optionLabel(), defaultLabel), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelAccessor" }] : /* istanbul ignore next */ []));
+    valueAccessor = computed(() => accessor(this.optionValue(), defaultIdentity), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueAccessor" }] : /* istanbul ignore next */ []));
+    disabledAccessor = computed(() => accessor(this.optionDisabled(), () => false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledAccessor" }] : /* istanbul ignore next */ []));
+    /** Comparateur effectif en mode objet : `compareWith`, sinon égalité par identité. */
+    comparator = computed(() => this.compareWith() ?? ((a, b) => this.keyOf(a) === this.keyOf(b)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "comparator" }] : /* istanbul ignore next */ []));
+    labelOf(item) {
+        return this.labelAccessor()(item);
+    }
+    keyOf(item) {
+        return this.valueAccessor()(item);
+    }
+    disabledOf(item) {
+        return this.disabledAccessor()(item);
+    }
+    // --- Filtrage : état éphémère (réinitialisé à la fermeture du popup) ---
+    filterText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+    /** Annonce différée du nombre de résultats (live region `role="status"`). */
+    announcedCount = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcedCount" }] : /* istanbul ignore next */ []));
+    announceTimer;
+    /** Options visibles : les options, restreintes par le filtre quand il est actif. */
+    filteredOptions = computed(() => {
+        const query = this.filterText().trim();
+        if (!this.filterable() || query === '')
+            return this.options();
+        const fn = this.filterFn() ??
+            ((option, q) => normalizeForFilter(this.labelOf(option)).includes(normalizeForFilter(q)));
+        return this.options().filter((option) => fn(option, query));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    /** Les options affichées dans le DOM. La limitation (maxVisibleOptions) n'est appliquée qu'en mode filtrable. */
+    displayedOptions = computed(() => {
+        const opts = this.filteredOptions();
+        if (!this.filterable())
+            return opts;
+        const limit = this.maxVisibleOptions();
+        return opts.length <= limit ? opts : opts.slice(0, limit);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedOptions" }] : /* istanbul ignore next */ []));
+    /** Texte de la live region du filtre. Virtuel : le multi y ajoute « , M selected ». */
+    composeFilterAnnouncement() {
+        const query = this.filterText().trim();
+        if (query === '')
+            return '';
+        const total = this.filteredOptions().length;
+        const limit = this.maxVisibleOptions();
+        if (this.filterable() && total > limit) {
+            return this.resolvedTruncatedResultsAnnouncement()(limit, total);
+        }
+        return this.resolvedFilterResultsText()(total);
+    }
+    constructor() {
+        // Ancre le trigger : `setProperty` natif (les propriétés CSS à tiret comme `anchor-name`
+        // ne sont pas appliquées de façon fiable par le binding `[style.…]`/Renderer2 — cf. Tooltip).
+        effect(() => {
+            this.triggerEl()?.nativeElement.style.setProperty('anchor-name', this.anchorName);
+        });
+        // Affichage du popup via Popover natif (top-layer). On NE peut PAS utiliser <dialog>.showModal()
+        // (vraie modale) : ce combobox @angular/aria se ferme au blur (closePopupOnBlur) et showModal
+        // déplace le focus hors du combobox → fermeture immédiate. On reste donc en Popover (le focus
+        // reste sur le combobox) ; sur mobile le focusMode 'roving' rend les options réellement focusables.
+        effect(() => {
+            const el = this.popupEl()?.nativeElement;
+            if (!el)
+                return;
+            if (this.expanded()) {
+                el.classList.remove('kt-select__popup--closing');
+                el.style.translate = ''; // efface un éventuel translate résiduel d'un drag-to-dismiss précédent
+                el.style.setProperty('position-anchor', this.anchorName);
+                el.showPopover?.();
+                this.popoverShown = true;
+                // Desktop filtrable : le champ de recherche prend le focus à l'ouverture (pattern
+                // SelectPanel). Pas sur téléphone : le clavier virtuel recouvrirait la bottom-sheet.
+                if (this.filterable() && !this.compact())
+                    this.filterInputEl()?.nativeElement.focus();
+            }
+            else if (this.popoverShown) {
+                this.animateAndCloseSelect(el);
+            }
+        });
+        // Filtre éphémère : réinitialisé à la fermeture (liste complète à la réouverture).
+        effect(() => {
+            if (this.expanded())
+                return;
+            untracked(() => {
+                this.filterText.set('');
+                this.announcedCount.set('');
+                clearTimeout(this.announceTimer);
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            clearTimeout(this.announceTimer);
+            this.sheetDrag.destroy();
+            if (isPlatformBrowser(this.platformId) && this.compact() && this.expanded()) {
+                this.doc.body.style.overflow = '';
+            }
+        });
+        // Préserve le contenu du template sur mobile pour permettre l'animation de sortie
+        effect(() => {
+            const cb = this.comboboxDir();
+            if (cb) {
+                cb.preserveContent.set(this.compact());
+            }
+        });
+        // Sheet mobile : verrouille le scroll du fond 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';
+                this.wasExpanded = true;
+            }
+            else {
+                this.doc.body.style.overflow = '';
+                if (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.
+        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);
+                });
+            });
+        }
+        // Fait défiler la liste pour afficher l'option active lors de la navigation au clavier (mode activedescendant).
+        effect(() => {
+            const activeId = this.listboxDir()?.activeDescendant();
+            if (!this.expanded() || !activeId)
+                return;
+            requestAnimationFrame(() => {
+                const listbox = this.listboxEl()?.nativeElement;
+                if (!listbox)
+                    return;
+                const activeEl = listbox.querySelector('.kt-select__option--active');
+                if (activeEl) {
+                    activeEl.scrollIntoView({ block: 'nearest' });
+                }
+            });
+        });
+        if (isDevMode()) {
+            effect(() => {
+                const opts = this.options();
+                if (this.optionValue() !== undefined || this.compareWith() !== undefined)
+                    return;
+                const sample = opts.find((o) => o !== null && typeof o === 'object');
+                if (sample && sample['id'] === undefined && sample['value'] === undefined) {
+                    console.warn(`[${this.host.nativeElement.tagName.toLowerCase()}] Options de type objet sans identité résoluble ` +
+                        "('id'/'value') ni `compareWith` : la sélection peut être incohérente au rechargement " +
+                        'des données. Fournissez `optionValue` ou `compareWith`.');
+                }
+            });
+        }
+    }
+    onFilterInput(event) {
+        this.filterText.set(event.target.value);
+        this.scheduleResultsAnnouncement();
+        this.resyncListboxSelection();
+    }
+    /** Relaye la navigation vers le listbox : le focus DOM est dans le champ de filtre et les
+        keydown du popup ne remontent pas au combobox (le popup est un sibling DOM du trigger).
+        Shift+flèches : extension de plage (multi ; sans effet en single). Home/End/Espace/
+        caractères restent dans le champ (convention APG des combobox éditables). */
+    onFilterKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.expanded.set(false);
+            this.refocusTriggerAfterFilterClose();
+            return;
+        }
+        if (event.key === 'Tab') {
+            // APG : Tab ferme le popup et suit l'ordre de tabulation. Fermeture SYNCHRONE (l'effect
+            // est différé : le popup, sibling DOM du trigger, resterait tabbable pendant l'action
+            // par défaut) + focus sur le trigger SANS preventDefault : le Tab natif repart du
+            // trigger vers l'élément suivant de la page (Shift+Tab : le précédent).
+            this.closePopupNow();
+            this.refocusTriggerAfterFilterClose();
+            return;
+        }
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Enter')
+            return;
+        const listbox = this.listboxEl()?.nativeElement;
+        if (!listbox)
+            return;
+        event.preventDefault();
+        listbox.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, shiftKey: event.shiftKey, cancelable: true }));
+    }
+    /** Échap depuis n'importe où dans le composant popup ouvert : après un clic souris sur une
+        option, le focus DOM est sur le listbox (pas le trigger) — ni le listbox ni le combobox ne
+        gèrent Échap là. Le popup est rendu dans le sous-arbre DOM de l'hôte : l'événement y bulle.
+        (Trigger et champ de filtre gèrent leur Échap en amont avec stopPropagation : pas de doublon.) */
+    onHostKeydown(event) {
+        if (event.key !== 'Escape' || !this.expanded())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.expanded.set(false);
+        this.triggerEl()?.nativeElement.focus();
+    }
+    /** 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);
+        });
+    }
+    /** Annonce immédiate dans la live region du panneau (annule une annonce différée en attente). */
+    announceNow(text) {
+        clearTimeout(this.announceTimer);
+        this.announcedCount.set(text);
+    }
+    /** Séquelle de la purge interne du Listbox (il vide sa valeur dès qu'un item n'est plus
+        rendu) : quand le filtre redécouvre des options sélectionnées, le binding `[value]` ne
+        re-pousse rien (`listboxValue` n'a pas changé) — on resynchronise le modèle du Listbox
+        avec les clés sélectionnées actuellement visibles. */
+    resyncListboxSelection() {
+        const listbox = this.listboxDir();
+        if (!listbox)
+            return;
+        const visibleKeys = new Set(this.filteredOptions().map((o) => this.keyOf(o)));
+        const expected = this.listboxValue().filter((k) => visibleKeys.has(k));
+        const actual = listbox.value();
+        if (expected.length === actual.length && expected.every((k) => actual.includes(k)))
+            return;
+        listbox.value.set(expected);
+    }
+    /** Desktop filtrable : le focus DOM vit dans le popup (champ/options) — on le rend au trigger
+        à la fermeture, sinon il tombe sur `<body>`. (Écran compact : déjà géré par l'effect `compact`.) */
+    refocusTriggerAfterFilterClose() {
+        if (!this.filterable() || this.compact())
+            return;
+        this.triggerEl()?.nativeElement.focus();
+    }
+    /** Fermeture synchrone du Popover (l'effect, différé, ne re-cachera pas : flag popoverShown). */
+    closePopupNow() {
+        this.expanded.set(false);
+        if (!this.popoverShown)
+            return;
+        const el = this.popupEl()?.nativeElement;
+        el?.classList.remove('kt-select__popup--closing');
+        el?.hidePopover?.();
+        this.popoverShown = false;
+    }
+    // --- Drag-to-dismiss de la bottom-sheet (téléphone) ---
+    // Geste DOUBLÉ par le bouton Fermer + tap-extérieur + Échap (WCAG 2.5.1). Logique FACTORISÉE
+    // avec le mode `sheet` du Dialog via createKtSheetDrag (@ktortu/aaa).
+    sheetDrag = createKtSheetDrag({
+        pane: () => this.popupEl()?.nativeElement.querySelector('.kt-select__sheet-card') ?? null,
+        onDismiss: () => this.expanded.set(false),
+        draggingClass: 'kt-select__popup--dragging',
+    });
+    onDragStart(event) {
+        if (!this.compact())
+            return; // glissement actif sur écran compact uniquement
+        this.sheetDrag.start(event);
+    }
+    animateAndCloseSelect(el) {
+        if (!this.compact() || !isPlatformBrowser(this.platformId)) {
+            el.hidePopover?.();
+            this.popoverShown = false;
+            return;
+        }
+        el.classList.add('kt-select__popup--closing');
+        const card = el.querySelector('.kt-select__sheet-card') || el;
+        // Récupérer la durée de transition configurée en CSS (ex: "150ms" ou "0.2s")
+        const styles = window.getComputedStyle(card);
+        const durationStr = styles.transitionDuration || '0s';
+        const durationMs = parseFloat(durationStr) * (durationStr.includes('ms') ? 1 : 1000);
+        if (durationMs === 0) {
+            el.hidePopover?.();
+            el.classList.remove('kt-select__popup--closing');
+            this.popoverShown = false;
+            return;
+        }
+        // Écouter la fin de la transition sur la propriété 'translate'
+        const onTransitionEnd = (event) => {
+            if (event.target === card && event.propertyName === 'translate') {
+                card.removeEventListener('transitionend', onTransitionEnd);
+                if (this.expanded())
+                    return;
+                el.hidePopover?.();
+                el.classList.remove('kt-select__popup--closing');
+                this.popoverShown = false;
+            }
+        };
+        card.addEventListener('transitionend', onTransitionEnd);
+        // Sécurité (au cas où la transition n'aboutirait pas)
+        setTimeout(() => {
+            card.removeEventListener('transitionend', onTransitionEnd);
+            if (this.expanded())
+                return;
+            if (this.popoverShown) {
+                el.hidePopover?.();
+                el.classList.remove('kt-select__popup--closing');
+                this.popoverShown = false;
+            }
+        }, durationMs + 50);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: KtBaseSelect, isStandalone: true, inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleOptions: { classPropertyName: "maxVisibleOptions", publicName: "maxVisibleOptions", isSignal: true, isRequired: false, transformFunction: null }, truncatedResultsText: { classPropertyName: "truncatedResultsText", publicName: "truncatedResultsText", isSignal: true, isRequired: false, transformFunction: null }, truncatedResultsAnnouncement: { classPropertyName: "truncatedResultsAnnouncement", publicName: "truncatedResultsAnnouncement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { helpClick: "helpClick", touched: "touchedChange" }, host: { listeners: { "keydown": "onHostKeydown($event)" } }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "popupEl", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "filterInputEl", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "listboxEl", first: true, predicate: ["listboxEl"], descendants: true, isSignal: true }, { propertyName: "listboxDir", first: true, predicate: Listbox, descendants: true, isSignal: true }, { propertyName: "comboboxDir", first: true, predicate: Combobox, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '(keydown)': 'onHostKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], helpClick: [{ type: i0.Output, args: ["helpClick"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], maxVisibleOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleOptions", required: false }] }], truncatedResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncatedResultsText", required: false }] }], truncatedResultsAnnouncement: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncatedResultsAnnouncement", required: false }] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], popupEl: [{ type: i0.ViewChild, args: ['popup', { isSignal: true }] }], filterInputEl: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], listboxEl: [{ type: i0.ViewChild, args: ['listboxEl', { isSignal: true }] }], listboxDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }], comboboxDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Combobox), { isSignal: true }] }] } });
+
+/** Template de rendu d'une option, posé sur un `<ng-template>` projeté dans `kt-select`.
+    L'input sert UNIQUEMENT à inférer `T` (re-bind de la liste d'options) ; `ngTemplateContextGuard`
+    type alors les variables `let-` (`option: T`, `selected`/`active: boolean`). Requiert `strictTemplates`.
+
+    ```html
+    <kt-select [options]="users" optionLabel="name">
+      <ng-template [ktSelectOption]="users" let-user let-selected="selected">
+        <user-badge [user]="user" /> @if (selected) { ✓ }
+      </ng-template>
+    </kt-select>
+    ``` */
+class KtSelectOptionDef {
+    ktSelectOption = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ktSelectOption" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return typeof ctx === 'object';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelectOptionDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtSelectOptionDef, isStandalone: true, selector: "ng-template[ktSelectOption]", inputs: { ktSelectOption: { classPropertyName: "ktSelectOption", publicName: "ktSelectOption", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelectOptionDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ktSelectOption]' }]
+        }], propDecorators: { ktSelectOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "ktSelectOption", required: true }] }] } });
+/** Template de rendu du trigger (libellé de la valeur courante). Même mécanisme typé que `ktSelectOption`.
+    Contexte : `let-option` = l'option sélectionnée (`T | null`).
+
+    ```html
+    <kt-select [options]="users" [(value)]="selected">
+      <ng-template [ktSelectTrigger]="users" let-user>
+        @if (user) { <user-badge [user]="user" /> } @else { Choisir… }
+      </ng-template>
+    </kt-select>
+    ``` */
+class KtSelectTriggerDef {
+    ktSelectTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ktSelectTrigger" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return typeof ctx === 'object';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelectTriggerDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtSelectTriggerDef, isStandalone: true, selector: "ng-template[ktSelectTrigger]", inputs: { ktSelectTrigger: { classPropertyName: "ktSelectTrigger", publicName: "ktSelectTrigger", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelectTriggerDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ktSelectTrigger]' }]
+        }], propDecorators: { ktSelectTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "ktSelectTrigger", required: true }] }] } });
+
+/** Select single (« select-only combobox » WAI-ARIA) bâti sur `@angular/aria`.
+    Choix dans une liste fermée, sans saisie. Présentation responsive (un seul Popover, CSS @media) :
+    desktop = dropdown ancré (focus sur le trigger / activedescendant) ; téléphone tactile = bottom-sheet
+    en bas d'écran (focusMode 'roving', options réellement focusables, scrim ::backdrop, cibles ≥44px).
+    Composé avec `Field` ; s'intègre aux Signal Forms via `[formField]`.
+    Tout le commun (popup, filtre, clavier, drag-to-dismiss) vit dans `BaseSelect`.
+
+    @template T Type d'une option (élément du tableau `options`).
+    @template V Type de la valeur émise (défaut `T` ; clé extraite si `optionValue` est fourni).
+
+    @example
+    ```html
+    <kt-select [options]="users" optionLabel="name" optionValue="id" [(value)]="selectedId" />
+    ``` */
+class KtSelect extends KtBaseSelect {
+    // --- Modèle / sortie ---
+    /** Valeur sélectionnée (clé extraite, ou objet entier si `optionValue` est omis ; `null` si rien). @default null */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Émis à chaque sélection. Payload : `{ value, option }` — `value` est la valeur émise (clé ou objet),
+        `option` l'objet option correspondant (`null` si la sélection est effacée). */
+    selectionChange = output();
+    // --- Templates projetés (typés via ngTemplateContextGuard) ---
+    optionDef = contentChild(KtSelectOptionDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionDef" }] : /* istanbul ignore next */ []));
+    triggerDef = contentChild(KtSelectTriggerDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerDef" }] : /* istanbul ignore next */ []));
+    /** Fermer le popup après une sélection (sémantique single ; le multi reste ouvert). */
+    closeOnSelect = computed(() => this.config?.closeOnSelect ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    /** Option correspondant à la valeur courante (clé extraite, ou objet si `optionValue` est omis). */
+    selectedOption = computed(() => {
+        const v = this.value();
+        if (v === null || v === undefined)
+            return null;
+        const opts = this.options();
+        if (this.optionValue() !== undefined) {
+            return opts.find((o) => this.keyOf(o) === v) ?? null;
+        }
+        const cmp = this.comparator();
+        return opts.find((o) => cmp(o, v)) ?? v;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    /** Valeur du listbox : tableau de clés (0 ou 1 élément en single). */
+    listboxValue = computed(() => {
+        const opt = this.selectedOption();
+        return opt === null ? [] : [this.keyOf(opt)];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxValue" }] : /* istanbul ignore next */ []));
+    onListboxValueChange(keys) {
+        // Purge interne du Listbox quand le filtre masque l'option sélectionnée (la lib vide sa
+        // valeur dès que l'item n'est plus rendu) : pas un geste utilisateur, on l'ignore.
+        if (keys.length === 0 && this.isSelectionFilteredOut())
+            return;
+        const key = keys.length > 0 ? keys[0] : null;
+        if (key === null || key === undefined) {
+            this.commitSelection(null);
+            return;
+        }
+        const option = this.options().find((o) => this.keyOf(o) === key) ?? null;
+        this.commitSelection(option);
+    }
+    /** La sélection courante est-elle masquée par le filtre ou la troncation ? (≠ retirée des données). */
+    isSelectionFilteredOut() {
+        if (!this.filterable())
+            return false;
+        const selected = this.selectedOption();
+        if (selected === null)
+            return false;
+        const key = this.keyOf(selected);
+        return !this.displayedOptions().some((option) => this.keyOf(option) === key);
+    }
+    commitSelection(option) {
+        const out = option === null ? null : this.optionValue() !== undefined ? this.keyOf(option) : option;
+        this.value.set(out);
+        this.touched.set(true);
+        this.selectionChange.emit({ value: out, option });
+        if (this.closeOnSelect()) {
+            this.expanded.set(false);
+            this.refocusTriggerAfterFilterClose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtSelect, isStandalone: true, selector: "kt-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "optionDef", first: true, predicate: KtSelectOptionDef, descendants: true, isSignal: true }, { propertyName: "triggerDef", first: true, predicate: KtSelectTriggerDef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container [ngTemplateOutlet]=\"def.template\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption() }\" />\n        } @else if (selectedOption(); as option) {\n          {{ labelOf(option) }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Un seul Popover (top-layer). CSS @media : dropdown ancr\u00E9 (desktop) \u2194 bottom-sheet (t\u00E9l\u00E9phone).\n         Pas de <dialog>.showModal() : ce combobox se ferme au blur, et showModal volerait le focus. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"filterable() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <div\n              class=\"kt-select__sheet-grab\"\n              aria-hidden=\"true\"\n              (pointerdown)=\"onDragStart($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n            ></div>\n            <header class=\"kt-select__sheet-header\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (filterable()) {\n            <!-- Mode filtrable : le widget combobox est le panneau ENTIER (champ + annonce + liste).\n                 Indispensable : un focus pos\u00E9 hors de l'\u00E9l\u00E9ment ngComboboxWidget ferme le popup\n                 (closePopupOnBlur de @angular/aria) \u2014 le champ doit donc vivre dans ce sous-arbre. -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n            >\n              <div class=\"kt-select__filter\">\n                <input\n                  #filterInput\n                  type=\"search\"\n                  role=\"combobox\"\n                  aria-autocomplete=\"list\"\n                  aria-expanded=\"true\"\n                  class=\"kt-select__filter-input\"\n                  autocomplete=\"off\"\n                  [placeholder]=\"resolvedFilterPlaceholder()\"\n                  [attr.aria-label]=\"resolvedFilterLabel()\"\n                  [attr.aria-controls]=\"lb.id()\"\n                  [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                  [value]=\"filterText()\"\n                  (input)=\"onFilterInput($event)\"\n                  (keydown)=\"onFilterKeydown($event)\"\n                />\n              </div>\n              <!-- Nombre de r\u00E9sultats annonc\u00E9 (diff\u00E9r\u00E9) aux lecteurs d'\u00E9cran : une liste qui\n                   r\u00E9tr\u00E9cit en silence est per\u00E7ue comme un bug (tests utilisateurs S. Higley). -->\n              <div class=\"kt-select__sr-only\" role=\"status\" aria-live=\"polite\">{{ announcedCount() }}</div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  @if (optionDef(); as def) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"def.template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item, selected: !!opt.selected(), active: opt.active() }\"\n                    />\n                  } @else {\n                    {{ labelOf(item) }}\n                  }\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface, #fff));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface, #fff));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:flex;flex-direction:column!important;justify-content:flex-end!important}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface, #fff));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;translate:0 0;transition:translate var(--kt-sheet-anim-duration, .12s) ease}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}.kt-select__popup--sheet:popover-open .kt-select__sheet-card{translate:0 0;animation:var(--select-sheet-enter-animation, kt-sheet-in var(--kt-sheet-anim-duration, .12s) ease)}.kt-select__popup--sheet .kt-select__sheet-card.kt-select__popup--dragging{transition:none}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-card,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-card{translate:0 100%;transition:translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(.4,0,.2,1)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-card,.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none;translate:0 0}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:44px;cursor:grab;touch-action:none}.kt-select__sheet-grab:active{cursor:grabbing}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n"], dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KtField, KtFieldControl, NgTemplateOutlet, Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option], template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container [ngTemplateOutlet]=\"def.template\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption() }\" />\n        } @else if (selectedOption(); as option) {\n          {{ labelOf(option) }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Un seul Popover (top-layer). CSS @media : dropdown ancr\u00E9 (desktop) \u2194 bottom-sheet (t\u00E9l\u00E9phone).\n         Pas de <dialog>.showModal() : ce combobox se ferme au blur, et showModal volerait le focus. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"filterable() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <div\n              class=\"kt-select__sheet-grab\"\n              aria-hidden=\"true\"\n              (pointerdown)=\"onDragStart($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n            ></div>\n            <header class=\"kt-select__sheet-header\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (filterable()) {\n            <!-- Mode filtrable : le widget combobox est le panneau ENTIER (champ + annonce + liste).\n                 Indispensable : un focus pos\u00E9 hors de l'\u00E9l\u00E9ment ngComboboxWidget ferme le popup\n                 (closePopupOnBlur de @angular/aria) \u2014 le champ doit donc vivre dans ce sous-arbre. -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n            >\n              <div class=\"kt-select__filter\">\n                <input\n                  #filterInput\n                  type=\"search\"\n                  role=\"combobox\"\n                  aria-autocomplete=\"list\"\n                  aria-expanded=\"true\"\n                  class=\"kt-select__filter-input\"\n                  autocomplete=\"off\"\n                  [placeholder]=\"resolvedFilterPlaceholder()\"\n                  [attr.aria-label]=\"resolvedFilterLabel()\"\n                  [attr.aria-controls]=\"lb.id()\"\n                  [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                  [value]=\"filterText()\"\n                  (input)=\"onFilterInput($event)\"\n                  (keydown)=\"onFilterKeydown($event)\"\n                />\n              </div>\n              <!-- Nombre de r\u00E9sultats annonc\u00E9 (diff\u00E9r\u00E9) aux lecteurs d'\u00E9cran : une liste qui\n                   r\u00E9tr\u00E9cit en silence est per\u00E7ue comme un bug (tests utilisateurs S. Higley). -->\n              <div class=\"kt-select__sr-only\" role=\"status\" aria-live=\"polite\">{{ announcedCount() }}</div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  @if (optionDef(); as def) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"def.template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item, selected: !!opt.selected(), active: opt.active() }\"\n                    />\n                  } @else {\n                    {{ labelOf(item) }}\n                  }\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface, #fff));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface, #fff));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:flex;flex-direction:column!important;justify-content:flex-end!important}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface, #fff));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;translate:0 0;transition:translate var(--kt-sheet-anim-duration, .12s) ease}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}.kt-select__popup--sheet:popover-open .kt-select__sheet-card{translate:0 0;animation:var(--select-sheet-enter-animation, kt-sheet-in var(--kt-sheet-anim-duration, .12s) ease)}.kt-select__popup--sheet .kt-select__sheet-card.kt-select__popup--dragging{transition:none}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-card,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-card{translate:0 100%;transition:translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(.4,0,.2,1)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-card,.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none;translate:0 0}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:44px;cursor:grab;touch-action:none}.kt-select__sheet-grab:active{cursor:grabbing}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], optionDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtSelectOptionDef), { isSignal: true }] }], triggerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtSelectTriggerDef), { isSignal: true }] }] } });
+
+/** Configure les `kt-select` d'un sous-arbre via DI (équivalent du Context provider de react-select).
+    Alternative à un provider global de `KT_SELECT_CONFIG` : on pose la directive sur un conteneur et
+    tous les `kt-select` descendants en héritent.
+
+    ```html
+    <div [ktSelectConfig]="{ placeholder: 'Choisir…', emptyText: 'Aucun résultat' }">
+      <kt-select … />
+    </div>
+    ```
+
+    La directive EST fournie comme `KT_SELECT_CONFIG` (`useExisting`) : les getters exposent l'objet
+    bindé sous la forme `Partial<KtSelectConfigOptions>` attendue par le composant. */
+class KtSelectConfig {
+    ktSelectConfig = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ktSelectConfig" }] : /* istanbul ignore next */ []));
+    /** Config héritée du contexte parent (provider global ou directive englobante) : la
+        directive ne masque que les clés qu'elle définit, le reste continue d'en hériter. */
+    parent = inject(KT_SELECT_CONFIG, { optional: true, skipSelf: true });
+    resolve(key) {
+        return this.ktSelectConfig()[key] ?? this.parent?.[key];
+    }
+    get placeholder() {
+        return this.resolve('placeholder');
+    }
+    get emptyText() {
+        return this.resolve('emptyText');
+    }
+    get closeLabel() {
+        return this.resolve('closeLabel');
+    }
+    get closeOnSelect() {
+        return this.resolve('closeOnSelect');
+    }
+    get filterPlaceholder() {
+        return this.resolve('filterPlaceholder');
+    }
+    get filterLabel() {
+        return this.resolve('filterLabel');
+    }
+    get filterResultsText() {
+        return this.resolve('filterResultsText');
+    }
+    get removeItemLabel() {
+        return this.resolve('removeItemLabel');
+    }
+    get selectedItemsLabel() {
+        return this.resolve('selectedItemsLabel');
+    }
+    get selectionSummaryText() {
+        return this.resolve('selectionSummaryText');
+    }
+    get itemRemovedText() {
+        return this.resolve('itemRemovedText');
+    }
+    get selectionCountText() {
+        return this.resolve('selectionCountText');
+    }
+    get selectAllLabel() {
+        return this.resolve('selectAllLabel');
+    }
+    get clearAllLabel() {
+        return this.resolve('clearAllLabel');
+    }
+    get moreChipsLabel() {
+        return this.resolve('moreChipsLabel');
+    }
+    get lessChipsLabel() {
+        return this.resolve('lessChipsLabel');
+    }
+    get truncatedResultsText() {
+        return this.resolve('truncatedResultsText');
+    }
+    get truncatedResultsAnnouncement() {
+        return this.resolve('truncatedResultsAnnouncement');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelectConfig, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtSelectConfig, isStandalone: true, selector: "[ktSelectConfig]", inputs: { ktSelectConfig: { classPropertyName: "ktSelectConfig", publicName: "ktSelectConfig", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: KT_SELECT_CONFIG, useExisting: KtSelectConfig }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelectConfig, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ktSelectConfig]',
+                    providers: [{ provide: KT_SELECT_CONFIG, useExisting: KtSelectConfig }],
+                }]
+        }], propDecorators: { ktSelectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "ktSelectConfig", required: false }] }] } });
+
+/** Portée de transition des chips. Fourni par `ChipList` (via `useExisting`) ; injecté en
+    optionnel par `Chip` pour ne porter un `view-transition-name` QUE pendant la transition
+    de SA liste — sinon tous les chips de la page deviendraient des groupes indépendants et
+    « glisseraient » individuellement à chaque reflow déclenché par une autre liste.
+    Fichier séparé : évite l'import circulaire Chip ↔ ChipList. */
+class ChipTransitionScope {
+}
+
+/**
+ * Pilule individuelle (tag). Utilisable seule (tag statique) ou dans `kt-chip-list`.
+ * Le label vient de la projection de contenu ; `removable` ajoute un bouton « retirer »
+ * (24px visibles, cible 44px via ::after — technique des boutons icon-only).
+ *
+ * @example
+ * ```html
+ * <kt-chip>Angular</kt-chip>
+ * <kt-chip removable removeLabel="Retirer Angular" (remove)="onRemove()">Angular</kt-chip>
+ * ```
+ */
+class KtChip {
+    scope = inject(ChipTransitionScope, { optional: true });
+    idGen = inject(KtIdGenerator);
+    /** Nom de View Transition propre au chip (détail interne, posé en host binding). */
+    viewTransitionName = `chip-${this.idGen.generateId('chip')}`;
+    /** Affiche le bouton « retirer » (sinon tag statique sans bouton). @default false */
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Chip désactivé (bouton « retirer » inactif). @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Libellé accessible du bouton « retirer » (inclure le nom de l'item : « Remove X »). @default 'Remove' */
+    removeLabel = input('Remove', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /** Émis au clic sur le bouton « retirer » (le parent décide de retirer le chip). */
+    remove = output();
+    removeBtn = viewChild('removeBtn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeBtn" }] : /* istanbul ignore next */ []));
+    /** Focus programmatique du bouton « retirer » (focus management d'`kt-chip-list`). */
+    focusRemove() {
+        this.removeBtn()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtChip, isStandalone: true, selector: "kt-chip", inputs: { removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { properties: { "style.view-transition-name": "scope?.transitioning() ? viewTransitionName : null", "style.view-transition-class": "\"chip-transition\"" }, classAttribute: "kt-chip" }, viewQueries: [{ propertyName: "removeBtn", first: true, predicate: ["removeBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<span class=\"kt-chip__label\"><ng-content /></span>\n@if (removable()) {\n  <button\n    #removeBtn\n    type=\"button\"\n    class=\"kt-chip__remove\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"removeLabel()\"\n    (click)=\"remove.emit()\"\n  >\n    <span class=\"kt-chip__close-icon\" aria-hidden=\"true\">close</span>\n  </button>\n}\n", styles: ["@layer kt-aaa.components{:host{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-size:var(--chip-font-size);color:var(--chip-color)}.kt-chip__label{max-inline-size:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-chip__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--chip-remove-color);cursor:pointer;font-size:.75rem;transition:var(--chip-remove-transition, background-color .15s ease)}.kt-chip__remove:after{content:\"\";position:absolute;inset:-10px}.kt-chip__remove:hover{background-color:var(--chip-remove-bg-hover);color:var(--chip-remove-color-hover)}:host(:hover){box-shadow:var(--chip-shadow-hover, var(--chip-shadow, none))}.kt-chip__remove:focus-visible{outline:2px solid var(--chip-focus-ring);outline-offset:1px}.kt-chip__remove:disabled{cursor:not-allowed;opacity:.5}.kt-chip__close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1rem;line-height:1;-webkit-font-smoothing:antialiased}@media(pointer:coarse){:host{min-block-size:32px}.kt-chip__remove{inline-size:28px;block-size:28px;font-size:.875rem}.kt-chip__remove:after{inset:-8px}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-chip', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'kt-chip',
+                        // Nommé UNIQUEMENT pendant la transition de SA liste (cf. ChipTransitionScope) : un nom
+                        // permanent ferait participer tous les chips de la page à chaque View Transition (glissement
+                        // individuel au moindre reflow). Chip seul (hors liste) : jamais nommé.
+                        '[style.view-transition-name]': 'scope?.transitioning() ? viewTransitionName : null',
+                        '[style.view-transition-class]': '"chip-transition"',
+                    }, template: "<span class=\"kt-chip__label\"><ng-content /></span>\n@if (removable()) {\n  <button\n    #removeBtn\n    type=\"button\"\n    class=\"kt-chip__remove\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"removeLabel()\"\n    (click)=\"remove.emit()\"\n  >\n    <span class=\"kt-chip__close-icon\" aria-hidden=\"true\">close</span>\n  </button>\n}\n", styles: ["@layer kt-aaa.components{:host{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-size:var(--chip-font-size);color:var(--chip-color)}.kt-chip__label{max-inline-size:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-chip__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--chip-remove-color);cursor:pointer;font-size:.75rem;transition:var(--chip-remove-transition, background-color .15s ease)}.kt-chip__remove:after{content:\"\";position:absolute;inset:-10px}.kt-chip__remove:hover{background-color:var(--chip-remove-bg-hover);color:var(--chip-remove-color-hover)}:host(:hover){box-shadow:var(--chip-shadow-hover, var(--chip-shadow, none))}.kt-chip__remove:focus-visible{outline:2px solid var(--chip-focus-ring);outline-offset:1px}.kt-chip__remove:disabled{cursor:not-allowed;opacity:.5}.kt-chip__close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1rem;line-height:1;-webkit-font-smoothing:antialiased}@media(pointer:coarse){:host{min-block-size:32px}.kt-chip__remove{inline-size:28px;block-size:28px;font-size:.875rem}.kt-chip__remove:after{inset:-8px}}}\n"] }]
+        }], propDecorators: { removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], removeBtn: [{ type: i0.ViewChild, args: ['removeBtn', { isSignal: true }] }] } });
+
+/** Template de rendu custom d'un chip dans `kt-chip-list`.
+    Structurellement compatible avec `MultiSelectChipContext` (forwardable).
+    Contexte : `let-item` = l'item rendu (`T`), `let-remove` = fonction qui le retire.
+
+    ```html
+    <kt-chip-list [items]="tags">
+      <ng-template [ktChipItem]="tags" let-tag let-remove="remove">
+        <kt-chip [removable]="true" (remove)="remove()">{{ tag.name }}</kt-chip>
+      </ng-template>
+    </kt-chip-list>
+    ``` */
+class KtChipItemDef {
+    ktChipItem = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ktChipItem" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return typeof ctx === 'object';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChipItemDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtChipItemDef, isStandalone: true, selector: "ng-template[ktChipItem]", inputs: { ktChipItem: { classPropertyName: "ktChipItem", publicName: "ktChipItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChipItemDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ktChipItem]' }]
+        }], propDecorators: { ktChipItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "ktChipItem", required: true }] }] } });
+
+const KT_CHIPS_CONFIG = new InjectionToken('KT_CHIPS_CONFIG');
+
+/** Délai avant effacement de l'annonce de retrait (live region). */
+const STATUS_CLEAR_MS = 2000;
+/**
+ * Liste de chips révocables (`role="list"`) : repli au-delà de `maxVisible` (« +N more »),
+ * annonces lecteur d'écran (live region TOUJOURS rendue, y compris liste vide) et gestion
+ * du focus au retrait (chip suivant, sinon `emptyFocusTarget`).
+ * La liste ne possède PAS la donnée : le retrait émet `removed` et le parent met à jour
+ * `items` (pattern contrôlé). Rendu custom par chip via `ng-template[ktChipItem]` (projeté)
+ * ou `[chipTemplate]` (TemplateRef forwardé, ex. depuis MultiSelect) — le focus management
+ * ne voit pas les boutons des templates custom (view queries non traversantes) : le repli
+ * `emptyFocusTarget` couvre ce cas.
+ *
+ * @example
+ * ```html
+ * <kt-chip-list [items]="tags()" [maxVisible]="3" (removed)="onRemoved($event)" />
+ * ```
+ */
+class KtChipList {
+    config = inject(KT_CHIPS_CONFIG, { optional: true });
+    injector = inject(Injector);
+    host = inject(ElementRef);
+    doc = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
+    cdr = inject(ChangeDetectorRef);
+    /** 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 */
+    ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
+    /** Items affichés sous forme de chips (la liste ne possède pas la donnée : pattern contrôlé). */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Libellé d'un item : clé OU fonction. @default `label`/`name`, sinon `String(item)` */
+    itemLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "itemLabel" }] : /* istanbul ignore next */ []));
+    /** Identité d'un item (track du @for) : clé OU fonction. @default `id`/`value`, sinon l'item */
+    itemKey = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "itemKey" }] : /* istanbul ignore next */ []));
+    /** Chips révocables (bouton « retirer » par chip). @default true */
+    removable = input(true, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Liste désactivée (boutons « retirer » présents mais inactifs). @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Lecture seule : les boutons « retirer » sont absents (≠ disabled : présents mais inactifs). @default false */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Nombre maximal de chips affichés avant repli derrière « +N more ». @default undefined (illimité) */
+    maxVisible = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxVisible" }] : /* istanbul ignore next */ []));
+    /** Libellé accessible de la liste (`aria-label`). Défaut : `KT_CHIPS_CONFIG.listLabel` ou « Selected items ». */
+    listLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "listLabel" }] : /* istanbul ignore next */ []));
+    /** Construit le libellé du bouton « retirer » à partir du libellé de l'item. @default `« Remove {label} »` */
+    removeItemLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "removeItemLabel" }] : /* istanbul ignore next */ []));
+    /** Construit le message d'annonce après retrait (live region). @default `« {label} removed »` */
+    itemRemovedText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "itemRemovedText" }] : /* istanbul ignore next */ []));
+    /** Construit le libellé du bouton de repli à partir du nombre masqué. @default `« +{n} more »` */
+    moreLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "moreLabel" }] : /* istanbul ignore next */ []));
+    /** Libellé du bouton qui replie la liste dépliée. Défaut : `KT_CHIPS_CONFIG.lessLabel` ou « Show less ». */
+    lessLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "lessLabel" }] : /* istanbul ignore next */ []));
+    /** Template custom forwardé (alternative au `ng-template[ktChipItem]` projeté). @default null */
+    chipTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipTemplate" }] : /* istanbul ignore next */ []));
+    /** Élément à focuser quand le dernier chip est retiré (ex. le trigger du champ parent). @default undefined */
+    emptyFocusTarget = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "emptyFocusTarget" }] : /* istanbul ignore next */ []));
+    /** Émis quand un chip est retiré (le parent doit retirer l'item de `items`).
+        Payload : `{ item, index }` — l'item retiré et son index dans `items` au moment du retrait. */
+    removed = output();
+    itemDef = contentChild(KtChipItemDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemDef" }] : /* istanbul ignore next */ []));
+    chips = viewChildren(KtChip, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chips" }] : /* 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 */ []));
+    resolvedRemoveItemLabel = computed(() => this.removeItemLabel() ?? this.config?.removeItemLabel ?? ((l) => `Remove ${l}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRemoveItemLabel" }] : /* istanbul ignore next */ []));
+    resolvedItemRemovedText = computed(() => this.itemRemovedText() ?? this.config?.itemRemovedText ?? ((l) => `${l} removed`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedItemRemovedText" }] : /* istanbul ignore next */ []));
+    resolvedMoreLabel = computed(() => this.moreLabel() ?? this.config?.moreLabel ?? ((n) => `+${n} more`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMoreLabel" }] : /* istanbul ignore next */ []));
+    resolvedLessLabel = computed(() => this.lessLabel() ?? this.config?.lessLabel ?? 'Show less', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLessLabel" }] : /* istanbul ignore next */ []));
+    // --- Accès aux items ---
+    labelAccessor = computed(() => accessor(this.itemLabel(), defaultLabel), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelAccessor" }] : /* istanbul ignore next */ []));
+    keyAccessor = computed(() => accessor(this.itemKey(), defaultIdentity), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyAccessor" }] : /* istanbul ignore next */ []));
+    labelOf(item) {
+        return this.labelAccessor()(item);
+    }
+    keyOf(item) {
+        return this.keyAccessor()(item);
+    }
+    removeLabelFor(item) {
+        return this.resolvedRemoveItemLabel()(this.labelOf(item));
+    }
+    /** Template effectif : contenu projeté (ktChipItem) prioritaire sur l'input forwardé. */
+    effectiveTemplate = computed(() => this.itemDef()?.template ?? this.chipTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTemplate" }] : /* istanbul ignore next */ []));
+    showRemove = computed(() => this.removable() && !this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRemove" }] : /* istanbul ignore next */ []));
+    // --- Repli au-delà de maxVisible ---
+    expanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    overflow = computed(() => {
+        const max = this.maxVisible();
+        return max !== undefined && this.items().length > max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    hiddenCount = computed(() => {
+        const max = this.maxVisible();
+        if (max === undefined || this.expanded())
+            return 0;
+        return Math.max(0, this.items().length - max);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
+    visibleItems = computed(() => {
+        const all = this.items();
+        const max = this.maxVisible();
+        if (max === undefined || this.expanded() || all.length <= max)
+            return all;
+        return all.slice(0, max);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    // --- Live region (toujours rendue, y compris liste vide) ---
+    status = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    statusTimer;
+    constructor() {
+        // Repli automatique quand la liste repasse sous le seuil.
+        effect(() => {
+            if (this.overflow())
+                return;
+            untracked(() => {
+                this.expanded.set(false);
+            });
+        }, { allowSignalWrites: true });
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.statusTimer));
+    }
+    idGen = inject(KtIdGenerator);
+    moreBtnTransitionName = `chip-list-more-${this.idGen.generateId('chip-list')}`;
+    /** Annonce un message dans la live region de la liste (effacé après ~2 s).
+        Public : permet au parent d'annoncer des actions liées (ex. « tout effacer »). */
+    announce(text) {
+        clearTimeout(this.statusTimer);
+        this.status.set(text);
+        this.statusTimer = setTimeout(() => this.status.set(''), STATUS_CLEAR_MS);
+    }
+    activeTransition = null;
+    /** Exécute `action` dans une View Transition (morph des chips qui se déplacent, entrée/sortie
+        stylées via `::view-transition-*(.chip-transition)` — cf. tokens.css). Transition SCOPÉE à
+        l'élément quand le navigateur le permet (`element.startViewTransition`, Chrome 147+) ; sinon
+        transition document — dans les deux cas, seuls les chips de CETTE liste sont nommés (cf.
+        `transitioning`). Fallback : action directe si l'API est absente ou si l'utilisateur
+        préfère moins de mouvement. */
+    withViewTransition(action) {
+        if (!isPlatformBrowser(this.platformId)) {
+            action();
+            return;
+        }
+        // Garde matchMedia : absent en SSR/jsdom (même convention que le gating mobile du select).
+        const prefersReducedMotion = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        // Enhancement progressif : transition scopée au sous-arbre de la liste si disponible
+        // (capture moins chère, le reste de la page n'est pas concerné), sinon document entier.
+        const hostEl = this.host.nativeElement;
+        const startViewTransition = hostEl.startViewTransition?.bind(hostEl) ??
+            this.doc.startViewTransition?.bind(this.doc);
+        if (!startViewTransition || prefersReducedMotion) {
+            action();
+            return;
+        }
+        // Interactions rapprochées : Chrome DIFFÈRE le callback d'une transition démarrée pendant
+        // qu'une autre est active (UI périmée pour le clic suivant, update parfois perdue — vérifié).
+        // On n'empile donc jamais : la transition en vol est sautée (son callback en attente est
+        // flushé par skipTransition) et l'action s'applique directement, sans animation.
+        if (this.activeTransition) {
+            this.activeTransition.skipTransition();
+            this.activeTransition = null;
+            action();
+            return;
+        }
+        // Nommer les chips de CETTE liste AVANT la capture de l'état « avant » (rendu synchrone
+        // obligatoire : un nom absent du snapshot « avant » ferait passer chaque chip pour un
+        // entrant). Les chips des autres listes restent anonymes => ils suivent le fondu racine.
+        this.transitioning.set(true);
+        this.cdr.detectChanges();
+        const vt = startViewTransition(() => {
+            action();
+            // Rendu synchrone : la View Transition capture l'état "après" à la fin de ce callback.
+            this.cdr.detectChanges();
+        });
+        this.activeTransition = vt;
+        // `ready` rejette (AbortError) si la transition est sautée : attendu, ne pas laisser
+        // remonter en unhandled rejection.
+        vt.ready.catch(() => undefined);
+        vt.finished.finally(() => {
+            if (this.activeTransition === vt)
+                this.activeTransition = null;
+            this.transitioning.set(false);
+        });
+    }
+    /** Retrait demandé : annonce, émet vers le parent (qui met à jour `items`), puis focus
+        le chip suivant — sinon `emptyFocusTarget` (le bouton focusé disparaît du DOM). */
+    removeAt(item, index) {
+        if (this.disabled() || this.readonly())
+            return;
+        this.announce(this.resolvedItemRemovedText()(this.labelOf(item)));
+        this.withViewTransition(() => {
+            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)];
+                    if (target) {
+                        target.focus();
+                        return;
+                    }
+                    this.emptyFocusTarget()?.focus();
+                },
+            }, { injector: this.injector });
+        });
+    }
+    removeCallback(item, index) {
+        return () => this.removeAt(item, index);
+    }
+    /** Déplie/replie ; au dépliage, focus sur le premier chip nouvellement révélé. */
+    toggleExpanded() {
+        this.withViewTransition(() => {
+            const expand = !this.expanded();
+            this.expanded.set(expand);
+            if (!expand)
+                return;
+            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();
+                },
+            }, { injector: this.injector });
+        });
+    }
+    onKeydown(event) {
+        const key = event.key;
+        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'));
+        if (focusables.length === 0)
+            return;
+        const active = this.doc.activeElement;
+        const currentIndex = focusables.indexOf(active);
+        let nextIndex = -1;
+        if (key === 'ArrowRight' || key === 'ArrowDown') {
+            nextIndex = currentIndex + 1;
+        }
+        else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+            nextIndex = currentIndex - 1;
+        }
+        else if (key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (key === 'End') {
+            nextIndex = focusables.length - 1;
+        }
+        if (nextIndex >= 0 && nextIndex < focusables.length) {
+            event.preventDefault();
+            focusables[nextIndex].focus();
+        }
+    }
+    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;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,
+            args: [{ selector: 'kt-chip-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KtChip, NgTemplateOutlet], providers: [{ provide: ChipTransitionScope, useExisting: KtChipList }], host: {
+                        '[attr.data-empty]': "items().length === 0 ? '' : null",
+                        // Marqueur de portée pendant la View Transition : les règles globales (tokens.css) ne
+                        // nomment les chips à template custom QUE sous ce marqueur (cf. ChipTransitionScope).
+                        '[attr.data-vt-active]': "transitioning() ? '' : null",
+                        '(keydown)': 'onKeydown($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;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 }] }] } });
+
+/** Template de rendu d'une option dans la liste du multi-select. L'input sert à inférer `T` ;
+    `ngTemplateContextGuard` type les variables `let-`.
+    Contexte : `let-option` = l'option (`T`), `let-selected` / `let-active` = booléens.
+
+    ```html
+    <kt-multi-select [options]="tags">
+      <ng-template [ktMultiSelectOption]="tags" let-tag let-selected="selected">
+        <tag-badge [tag]="tag" /> @if (selected) { ✓ }
+      </ng-template>
+    </kt-multi-select>
+    ``` */
+class KtMultiSelectOptionDef {
+    ktMultiSelectOption = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ktMultiSelectOption" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return typeof ctx === 'object';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelectOptionDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtMultiSelectOptionDef, isStandalone: true, selector: "ng-template[ktMultiSelectOption]", inputs: { ktMultiSelectOption: { classPropertyName: "ktMultiSelectOption", publicName: "ktMultiSelectOption", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelectOptionDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ktMultiSelectOption]' }]
+        }], propDecorators: { ktMultiSelectOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "ktMultiSelectOption", required: true }] }] } });
+/** Template de rendu du trigger (contenu du bouton déclencheur) pour le multi-select.
+    Contexte : `let-options` = le tableau des options sélectionnées (`readonly T[]`).
+
+    ```html
+    <kt-multi-select [options]="tags">
+      <ng-template [ktMultiSelectTrigger]="tags" let-options>
+        @if (options.length) { {{ options.length }} sélectionné(s) } @else { Choisir… }
+      </ng-template>
+    </kt-multi-select>
+    ``` */
+class KtMultiSelectTriggerDef {
+    ktMultiSelectTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ktMultiSelectTrigger" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return typeof ctx === 'object';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelectTriggerDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtMultiSelectTriggerDef, isStandalone: true, selector: "ng-template[ktMultiSelectTrigger]", inputs: { ktMultiSelectTrigger: { classPropertyName: "ktMultiSelectTrigger", publicName: "ktMultiSelectTrigger", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelectTriggerDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ktMultiSelectTrigger]' }]
+        }], propDecorators: { ktMultiSelectTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "ktMultiSelectTrigger", required: true }] }] } });
+/** Template de rendu d'un jeton (chip) affiché sous le multi-select.
+    Contexte : `let-option` = l'option sélectionnée (`T`), `let-remove` = fonction qui la retire.
+
+    ```html
+    <kt-multi-select [options]="tags">
+      <ng-template [ktMultiSelectChip]="tags" let-tag let-remove="remove">
+        <kt-chip [removable]="true" (remove)="remove()">{{ tag.name }}</kt-chip>
+      </ng-template>
+    </kt-multi-select>
+    ``` */
+class KtMultiSelectChipDef {
+    ktMultiSelectChip = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ktMultiSelectChip" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return typeof ctx === 'object';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelectChipDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtMultiSelectChipDef, isStandalone: true, selector: "ng-template[ktMultiSelectChip]", inputs: { ktMultiSelectChip: { classPropertyName: "ktMultiSelectChip", publicName: "ktMultiSelectChip", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelectChipDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ktMultiSelectChip]' }]
+        }], propDecorators: { ktMultiSelectChip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ktMultiSelectChip", required: true }] }] } });
+
+// Défauts lib neutre (anglais, comme le Select single) : le consommateur fournit
+// ses textes via KT_SELECT_CONFIG / les inputs (pas de $localize — cf. select-config.ts).
+function defaultSelectionSummaryText(count) {
+    return `${count} items selected`;
+}
+function defaultSelectionCountText(count) {
+    return count === 1 ? '1 selected' : `${count} selected`;
+}
+function defaultSelectedItemsLabel(fieldLabel) {
+    return fieldLabel ? `Selected items for ${fieldLabel}` : 'Selected items';
+}
+/**
+ * Composant de sélection multiple (Multi-Select) conforme aux exigences d'accessibilité (WCAG 2.2 AAA / RGAA).
+ * Repose sur `@angular/aria/combobox` et `@angular/aria/listbox` avec [multi]="true".
+ * Présentation adaptative : dropdown (desktop) ou bottom-sheet modale (téléphone tactile).
+ * Option 1 : Résumé textuel sur le trigger et chips révocables affichés en dessous.
+ *
+ * Clavier multi-sélection (APG) : Espace/Entrée toggle, Shift+flèches étend la sélection,
+ * Ctrl+A tout (dé)sélectionne, Shift+Espace sélectionne la plage, typeahead — majoritairement
+ * natifs via `@angular/aria` ; les combos non relayés par la lib le sont via `onTriggerKeydown`.
+ * Tout le commun (popup, filtre, clavier, drag-to-dismiss) vit dans `BaseSelect`.
+ *
+ * @template T Type d'une option (élément du tableau `options`).
+ * @template V Type des valeurs émises (défaut `T` ; clés extraites si `optionValue` est fourni).
+ *
+ * @example
+ * ```html
+ * <kt-multi-select [options]="tags" optionLabel="name" optionValue="id" [(value)]="selectedIds" />
+ * ```
+ */
+class KtMultiSelect extends KtBaseSelect {
+    // --- Modèle réactif ---
+    /** Valeurs sélectionnées (clés extraites, ou objets entiers si `optionValue` est omis). @default [] */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Émis à chaque (dé)sélection. Payload : `{ value, options }` — `value` le tableau des valeurs émises
+        (clés ou objets), `options` les objets options correspondants, dans l'ordre de sélection. */
+    selectionChange = output();
+    // --- Présentation / Configuration (spécifique multi) ---
+    /** Bouton « tout effacer » sur le champ (même contrat que `clearable` de BaseInputField). @default false */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Libellé i18n du bouton « tout effacer ». @default 'Clear' (ou KT_FIELD_CONFIG.clearLabel) */
+    clearLabel = input(this.fieldConfig?.clearLabel ?? 'Clear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    /** Barre « Tout sélectionner / Tout effacer » en tête du popup (bascule le popup en panneau dialog). */
+    selectionActions = input(false, { ...(ngDevMode ? { debugName: "selectionActions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Nombre maximal de chips affichés avant repli derrière un bouton « +N more ». Défaut : illimité. */
+    maxVisibleChips = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxVisibleChips" }] : /* istanbul ignore next */ []));
+    // --- Templates projetés ---
+    optionDef = contentChild(KtMultiSelectOptionDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionDef" }] : /* istanbul ignore next */ []));
+    triggerDef = contentChild(KtMultiSelectTriggerDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerDef" }] : /* istanbul ignore next */ []));
+    chipDef = contentChild(KtMultiSelectChipDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipDef" }] : /* istanbul ignore next */ []));
+    chipList = viewChild(KtChipList, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipList" }] : /* istanbul ignore next */ []));
+    // --- Textes résolus spécifiques multi (input > KT_SELECT_CONFIG > défaut lib neutre EN) ---
+    resolvedRemoveItemLabel = computed(() => this.config?.removeItemLabel ?? ((itemLabel) => `Remove ${itemLabel}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRemoveItemLabel" }] : /* istanbul ignore next */ []));
+    resolvedSelectedItemsLabel = computed(() => (this.config?.selectedItemsLabel ?? defaultSelectedItemsLabel)(this.label()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSelectedItemsLabel" }] : /* istanbul ignore next */ []));
+    resolvedSelectionSummaryText = computed(() => this.config?.selectionSummaryText ?? defaultSelectionSummaryText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSelectionSummaryText" }] : /* istanbul ignore next */ []));
+    resolvedItemRemovedText = computed(() => this.config?.itemRemovedText ?? ((itemLabel) => `${itemLabel} removed`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedItemRemovedText" }] : /* istanbul ignore next */ []));
+    resolvedSelectionCountText = computed(() => this.config?.selectionCountText ?? defaultSelectionCountText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSelectionCountText" }] : /* istanbul ignore next */ []));
+    resolvedSelectAllLabel = computed(() => this.config?.selectAllLabel ?? 'Select all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSelectAllLabel" }] : /* istanbul ignore next */ []));
+    resolvedClearAllLabel = computed(() => this.config?.clearAllLabel ?? 'Clear all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedClearAllLabel" }] : /* istanbul ignore next */ []));
+    resolvedMoreChipsLabel = computed(() => this.config?.moreChipsLabel ?? ((hiddenCount) => `+${hiddenCount} more`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMoreChipsLabel" }] : /* istanbul ignore next */ []));
+    resolvedLessChipsLabel = computed(() => this.config?.lessChipsLabel ?? 'Show less', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLessChipsLabel" }] : /* istanbul ignore next */ []));
+    /** Accesseurs bridgés vers le ChipList (fonctions fléchées : une référence de méthode
+        non liée perdrait `this`). */
+    chipLabelOf = (item) => this.labelOf(item);
+    chipKeyOf = (item) => this.keyOf(item);
+    /** Options correspondant aux entrées de `value`, dans l'ordre de sélection.
+        Mode objet : chaque entrée est ramenée à l'option canonique équivalente (compareWith). */
+    selectedOptions = computed(() => {
+        const vals = this.value() ?? [];
+        if (vals.length === 0)
+            return [];
+        const opts = this.options();
+        if (this.optionValue() !== undefined) {
+            return vals.map((v) => opts.find((o) => this.keyOf(o) === v)).filter((o) => o !== undefined);
+        }
+        const cmp = this.comparator();
+        return vals.map((v) => opts.find((o) => cmp(o, v)) ?? v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    // Texte synthétique du trigger (Option 1)
+    triggerText = computed(() => {
+        const selected = this.selectedOptions();
+        if (selected.length === 0)
+            return '';
+        if (selected.length <= 3) {
+            return selected.map((o) => this.labelOf(o)).join(', ');
+        }
+        return this.resolvedSelectionSummaryText()(selected.length);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerText" }] : /* istanbul ignore next */ []));
+    /** Valeur brute transmise au ngListbox sous-jacent (tableau de clés). */
+    listboxValue = computed(() => this.selectedOptions().map((o) => this.keyOf(o)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxValue" }] : /* istanbul ignore next */ []));
+    // --- Tout effacer depuis le champ (clearable) ---
+    showClear = computed(() => this.clearable() && !this.disabled() && !this.readonly() && this.selectedOptions().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** Le popup utilise la structure « panneau dialog » (champ de filtre et/ou barre d'actions). */
+    dialogMode = computed(() => this.filterable() || this.selectionActions(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogMode" }] : /* istanbul ignore next */ []));
+    /** Compteur de sélection affiché dans le panneau (info déjà portée par la live region → aria-hidden). */
+    selectionCountLabel = computed(() => this.resolvedSelectionCountText()(this.selectedOptions().length), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionCountLabel" }] : /* istanbul ignore next */ []));
+    /** Clé listbox d'une entrée de `value` (mode objet : clé de l'option canonique équivalente). */
+    entryKey(v) {
+        if (this.optionValue() !== undefined)
+            return v;
+        const cmp = this.comparator();
+        const option = this.options().find((o) => cmp(o, v));
+        return option !== undefined ? this.keyOf(option) : this.keyOf(v);
+    }
+    /** Entrée de `value` à committer pour une clé listbox (mode objet : l'option entière). */
+    entryForKey(key) {
+        const option = this.options().find((o) => this.keyOf(o) === key);
+        if (option === undefined)
+            return undefined;
+        return this.optionValue() !== undefined ? key : option;
+    }
+    onListboxValueChange(keys) {
+        // Le listbox ne connaît que les options RENDUES : quand le filtre en masque, sa purge
+        // interne retire leurs clés (pas un geste utilisateur). On conserve donc les entrées
+        // hors vue, on applique les (dé)sélections visibles dans l'ordre courant, et on ignore
+        // l'événement si rien n'a réellement changé (sinon touched/selectionChange parasites).
+        const current = this.value() ?? [];
+        const visibleKeys = new Set(this.displayedOptions().map((o) => this.keyOf(o)));
+        const keptKeys = new Set(keys);
+        const kept = current.filter((v) => {
+            const k = this.entryKey(v);
+            return !visibleKeys.has(k) || keptKeys.has(k);
+        });
+        const currentKeys = new Set(current.map((v) => this.entryKey(v)));
+        const added = keys
+            .filter((k) => !currentKeys.has(k))
+            .map((k) => this.entryForKey(k))
+            .filter((v) => v !== undefined);
+        if (kept.length === current.length && added.length === 0)
+            return;
+        this.commitValue([...kept, ...added]);
+    }
+    commitValue(next) {
+        this.value.set(next);
+        this.touched.set(true);
+        this.selectionChange.emit({ value: next, options: this.selectedOptions() });
+    }
+    /** Comble les combos que le relay du combobox ne transmet pas en activedescendant :
+        Shift+Espace (sélection de plage) et Ctrl/Cmd+Shift+Home/End (plage jusqu'aux bornes). */
+    onTriggerKeydown(event) {
+        if (!this.expanded() || this.compact())
+            return;
+        const shiftSpace = event.key === ' ' && event.shiftKey && !event.ctrlKey && !event.metaKey;
+        const rangeToEdge = (event.key === 'Home' || event.key === 'End') && event.shiftKey && (event.ctrlKey || event.metaKey);
+        if (!shiftSpace && !rangeToEdge)
+            return;
+        const listbox = this.listboxEl()?.nativeElement;
+        if (!listbox)
+            return;
+        event.preventDefault();
+        listbox.dispatchEvent(new KeyboardEvent('keydown', {
+            key: event.key,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            cancelable: true,
+        }));
+    }
+    /** En panneau dialog, le relay du combobox vise le widget (la div), pas le listbox descendant :
+        on fait suivre au listbox les événements relayés (target = la div elle-même uniquement —
+        les keydown des éléments internes, qui bubblent, ne sont pas re-forwardés). */
+    onPanelKeydown(event) {
+        if (event.target !== event.currentTarget)
+            return;
+        const listbox = this.listboxEl()?.nativeElement;
+        if (!listbox)
+            return;
+        listbox.dispatchEvent(new KeyboardEvent('keydown', {
+            key: event.key,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            cancelable: true,
+        }));
+    }
+    /** « N results » + « , M selected » quand des sélections existent (dont celles hors filtre). */
+    composeFilterAnnouncement() {
+        const base = super.composeFilterAnnouncement();
+        if (base === '')
+            return '';
+        const selectedCount = this.selectedOptions().length;
+        if (selectedCount === 0)
+            return base;
+        return `${base}, ${this.resolvedSelectionCountText()(selectedCount)}`;
+    }
+    /** Retire une option de la valeur (annonce et focus : délégués au ChipList). */
+    removeOption(option) {
+        if (this.disabled() || this.readonly())
+            return;
+        const current = this.value() ?? [];
+        const next = this.removeFromValue(option);
+        if (next.length === current.length)
+            return;
+        this.commitValue(next);
+    }
+    removeFromValue(option) {
+        const current = this.value() ?? [];
+        if (this.optionValue() !== undefined) {
+            const key = this.keyOf(option);
+            return current.filter((v) => v !== key);
+        }
+        const cmp = this.comparator();
+        return current.filter((v) => !cmp(v, option));
+    }
+    /** Vide toute la sélection depuis le champ (bouton `clearable`). */
+    clearSelection() {
+        if (!this.showClear())
+            return;
+        this.commitValue([]);
+        this.chipList()?.announce(this.resolvedSelectionCountText()(0));
+        this.triggerEl()?.nativeElement.focus();
+    }
+    /** Sélectionne toutes les options visibles non désactivées (sémantique du Ctrl+A natif :
+        avec un filtre actif, seules les options filtrées sont concernées). */
+    selectAllFiltered() {
+        if (this.disabled() || this.readonly())
+            return;
+        const current = this.value() ?? [];
+        const currentKeys = new Set(current.map((v) => this.entryKey(v)));
+        const added = this.filteredOptions()
+            .filter((o) => !this.disabledOf(o) && !currentKeys.has(this.keyOf(o)))
+            .map((o) => (this.optionValue() !== undefined ? this.keyOf(o) : o));
+        if (added.length === 0)
+            return;
+        this.commitValue([...current, ...added]);
+        this.announceSelectionCount();
+    }
+    /** Désélectionne toutes les options visibles (les sélections masquées par le filtre restent). */
+    clearAllFiltered() {
+        if (this.disabled() || this.readonly())
+            return;
+        const current = this.value() ?? [];
+        const visibleKeys = new Set(this.filteredOptions().map((o) => this.keyOf(o)));
+        const next = current.filter((v) => !visibleKeys.has(this.entryKey(v)));
+        if (next.length === current.length)
+            return;
+        this.commitValue(next);
+        this.announceSelectionCount();
+    }
+    /** Annonce immédiate (action ponctuelle, pas de débounce) du total sélectionné. */
+    announceSelectionCount() {
+        this.announceNow(this.resolvedSelectionCountText()(this.selectedOptions().length));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtMultiSelect, isStandalone: true, selector: "kt-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, selectionActions: { classPropertyName: "selectionActions", publicName: "selectionActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChips: { classPropertyName: "maxVisibleChips", publicName: "maxVisibleChips", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "optionDef", first: true, predicate: KtMultiSelectOptionDef, descendants: true, isSignal: true }, { propertyName: "triggerDef", first: true, predicate: KtMultiSelectTriggerDef, descendants: true, isSignal: true }, { propertyName: "chipDef", first: true, predicate: KtMultiSelectChipDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chipList", first: true, predicate: KtChipList, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [class.kt-select__trigger--clearable]=\"showClear()\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container\n            [ngTemplateOutlet]=\"def.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedOptions() }\"\n          />\n        } @else if (selectedOptions().length > 0) {\n          {{ triggerText() }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Tout effacer depuis le champ : sibling du trigger (pas de bouton imbriqu\u00E9 dans un bouton). -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"kt-select__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"kt-select__clear-icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <!-- Popup Popover (top-layer). M\u00EAme logique mobile bottom-sheet adaptative que le select classique. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"dialogMode() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <div\n              class=\"kt-select__sheet-grab\"\n              aria-hidden=\"true\"\n              (pointerdown)=\"onDragStart($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n            ></div>\n            <header class=\"kt-select__sheet-header\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (dialogMode()) {\n            <!-- Mode panneau (filtre et/ou actions de masse) : Widget Dialog -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n              (keydown)=\"onPanelKeydown($event)\"\n            >\n              @if (selectionActions()) {\n                <div class=\"kt-select__actions\">\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"selectAllFiltered()\">\n                    {{ resolvedSelectAllLabel() }}\n                  </button>\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"clearAllFiltered()\">\n                    {{ resolvedClearAllLabel() }}\n                  </button>\n                </div>\n              }\n              @if (filterable()) {\n                <div class=\"kt-select__filter\">\n                  <input\n                    #filterInput\n                    type=\"search\"\n                    role=\"combobox\"\n                    aria-autocomplete=\"list\"\n                    aria-expanded=\"true\"\n                    class=\"kt-select__filter-input\"\n                    autocomplete=\"off\"\n                    [placeholder]=\"resolvedFilterPlaceholder()\"\n                    [attr.aria-label]=\"resolvedFilterLabel()\"\n                    [attr.aria-controls]=\"lb.id()\"\n                    [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                    [value]=\"filterText()\"\n                    (input)=\"onFilterInput($event)\"\n                    (keydown)=\"onFilterKeydown($event)\"\n                  />\n                </div>\n              }\n              @if (selectedOptions().length > 0) {\n                <!-- Rappel visuel (s\u00E9lections potentiellement masqu\u00E9es par le filtre) ;\n                     l'info SR passe par la live region ci-dessous \u2192 aria-hidden. -->\n                <div class=\"kt-select__count\" aria-hidden=\"true\">{{ selectionCountLabel() }}</div>\n              }\n              <div class=\"kt-select__sr-only kt-select__filter-status\" role=\"status\" aria-live=\"polite\">\n                {{ announcedCount() }}\n              </div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [multi]=\"true\"\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option kt-select__option--multiple\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                      @if (opt.selected()) {\n                        <span class=\"kt-select__checkbox-icon\">check_box</span>\n                      } @else {\n                        <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                      }\n                    </span>\n                    <span class=\"kt-select__option-content\">\n                      @if (optionDef(); as def) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"def.template\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            selected: !!opt.selected(),\n                            active: opt.active(),\n                          }\"\n                        />\n                      } @else {\n                        {{ labelOf(item) }}\n                      }\n                    </span>\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <!-- Mode simple : Widget Listbox direct -->\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [multi]=\"true\"\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option kt-select__option--multiple\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                    @if (opt.selected()) {\n                      <span class=\"kt-select__checkbox-icon\">check_box</span>\n                    } @else {\n                      <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                    }\n                  </span>\n                  <span class=\"kt-select__option-content\">\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </span>\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <!-- Chips r\u00E9vocables (Option 1) sous le trigger : d\u00E9l\u00E9gu\u00E9s au composant r\u00E9utilisable\n       kt-chip-list (focus management, repli +N, live region). Les textes r\u00E9solus depuis\n       KT_SELECT_CONFIG sont pass\u00E9s en inputs (ils priment sur un \u00E9ventuel KT_CHIPS_CONFIG). -->\n  <kt-chip-list\n    [items]=\"selectedOptions()\"\n    [itemLabel]=\"chipLabelOf\"\n    [itemKey]=\"chipKeyOf\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [maxVisible]=\"maxVisibleChips()\"\n    [listLabel]=\"resolvedSelectedItemsLabel()\"\n    [removeItemLabel]=\"resolvedRemoveItemLabel()\"\n    [itemRemovedText]=\"resolvedItemRemovedText()\"\n    [moreLabel]=\"resolvedMoreChipsLabel()\"\n    [lessLabel]=\"resolvedLessChipsLabel()\"\n    [chipTemplate]=\"chipDef()?.template ?? null\"\n    [emptyFocusTarget]=\"triggerEl()?.nativeElement\"\n    (removed)=\"removeOption($event.item)\"\n  />\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface, #fff));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface, #fff));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:flex;flex-direction:column!important;justify-content:flex-end!important}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface, #fff));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;translate:0 0;transition:translate var(--kt-sheet-anim-duration, .12s) ease}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}.kt-select__popup--sheet:popover-open .kt-select__sheet-card{translate:0 0;animation:var(--select-sheet-enter-animation, kt-sheet-in var(--kt-sheet-anim-duration, .12s) ease)}.kt-select__popup--sheet .kt-select__sheet-card.kt-select__popup--dragging{transition:none}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-card,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-card{translate:0 100%;transition:translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(.4,0,.2,1)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-card,.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none;translate:0 0}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:44px;cursor:grab;touch-action:none}.kt-select__sheet-grab:active{cursor:grabbing}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n", "@layer kt-aaa.components{.kt-select__trigger--clearable .kt-select__value{margin-inline-end:2rem}.kt-select__clear{position:absolute;inset-block-start:50%;inset-inline-end:2.5rem;translate:0 -50%;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__clear:after{content:\"\";position:absolute;inset:-10px}.kt-select__clear:hover{background-color:color-mix(in srgb,currentColor 12%,transparent);color:var(--field-color, inherit)}.kt-select__clear:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:1px}.kt-select__clear-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__actions{display:flex;gap:.25rem;flex:none;padding:.25rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__action{flex:1;min-block-size:44px;padding:.375rem .625rem;border:0;border-radius:calc(var(--field-radius, 8px) * .75);background:transparent;color:var(--kt-primary, #0b57d0);font:inherit;font-weight:500;cursor:pointer}.kt-select__action:hover{background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__action:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-2px}.kt-select__count{flex:none;padding:.25rem .75rem;font-size:.8125rem;color:var(--field-hint-color, #5f6368);border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:.25rem;-webkit-user-select:none;user-select:none}.kt-select__checkbox-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;color:var(--field-icon-color, #5f6368);-webkit-font-smoothing:antialiased}.kt-select__option[aria-selected=true] .kt-select__checkbox-icon{color:var(--kt-primary, #0b57d0)}.kt-select__option--multiple{display:flex;align-items:center;gap:.5rem}.kt-select__option-content{flex:1;min-inline-size:0}kt-chip-list:not([data-empty]){margin-block-start:.5rem}}\n"], dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "component", type: KtChipList, selector: "kt-chip-list", inputs: ["items", "itemLabel", "itemKey", "removable", "disabled", "readonly", "maxVisible", "listLabel", "removeItemLabel", "itemRemovedText", "moreLabel", "lessLabel", "chipTemplate", "emptyFocusTarget"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        KtField,
+                        KtFieldControl,
+                        NgTemplateOutlet,
+                        Combobox,
+                        ComboboxPopup,
+                        ComboboxWidget,
+                        Listbox,
+                        Option,
+                        KtChipList,
+                    ], template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [class.kt-select__trigger--clearable]=\"showClear()\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container\n            [ngTemplateOutlet]=\"def.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedOptions() }\"\n          />\n        } @else if (selectedOptions().length > 0) {\n          {{ triggerText() }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Tout effacer depuis le champ : sibling du trigger (pas de bouton imbriqu\u00E9 dans un bouton). -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"kt-select__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"kt-select__clear-icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <!-- Popup Popover (top-layer). M\u00EAme logique mobile bottom-sheet adaptative que le select classique. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"dialogMode() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <div\n              class=\"kt-select__sheet-grab\"\n              aria-hidden=\"true\"\n              (pointerdown)=\"onDragStart($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n            ></div>\n            <header class=\"kt-select__sheet-header\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (dialogMode()) {\n            <!-- Mode panneau (filtre et/ou actions de masse) : Widget Dialog -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n              (keydown)=\"onPanelKeydown($event)\"\n            >\n              @if (selectionActions()) {\n                <div class=\"kt-select__actions\">\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"selectAllFiltered()\">\n                    {{ resolvedSelectAllLabel() }}\n                  </button>\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"clearAllFiltered()\">\n                    {{ resolvedClearAllLabel() }}\n                  </button>\n                </div>\n              }\n              @if (filterable()) {\n                <div class=\"kt-select__filter\">\n                  <input\n                    #filterInput\n                    type=\"search\"\n                    role=\"combobox\"\n                    aria-autocomplete=\"list\"\n                    aria-expanded=\"true\"\n                    class=\"kt-select__filter-input\"\n                    autocomplete=\"off\"\n                    [placeholder]=\"resolvedFilterPlaceholder()\"\n                    [attr.aria-label]=\"resolvedFilterLabel()\"\n                    [attr.aria-controls]=\"lb.id()\"\n                    [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                    [value]=\"filterText()\"\n                    (input)=\"onFilterInput($event)\"\n                    (keydown)=\"onFilterKeydown($event)\"\n                  />\n                </div>\n              }\n              @if (selectedOptions().length > 0) {\n                <!-- Rappel visuel (s\u00E9lections potentiellement masqu\u00E9es par le filtre) ;\n                     l'info SR passe par la live region ci-dessous \u2192 aria-hidden. -->\n                <div class=\"kt-select__count\" aria-hidden=\"true\">{{ selectionCountLabel() }}</div>\n              }\n              <div class=\"kt-select__sr-only kt-select__filter-status\" role=\"status\" aria-live=\"polite\">\n                {{ announcedCount() }}\n              </div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [multi]=\"true\"\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option kt-select__option--multiple\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                      @if (opt.selected()) {\n                        <span class=\"kt-select__checkbox-icon\">check_box</span>\n                      } @else {\n                        <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                      }\n                    </span>\n                    <span class=\"kt-select__option-content\">\n                      @if (optionDef(); as def) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"def.template\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            selected: !!opt.selected(),\n                            active: opt.active(),\n                          }\"\n                        />\n                      } @else {\n                        {{ labelOf(item) }}\n                      }\n                    </span>\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <!-- Mode simple : Widget Listbox direct -->\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [multi]=\"true\"\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option kt-select__option--multiple\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                    @if (opt.selected()) {\n                      <span class=\"kt-select__checkbox-icon\">check_box</span>\n                    } @else {\n                      <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                    }\n                  </span>\n                  <span class=\"kt-select__option-content\">\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </span>\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <!-- Chips r\u00E9vocables (Option 1) sous le trigger : d\u00E9l\u00E9gu\u00E9s au composant r\u00E9utilisable\n       kt-chip-list (focus management, repli +N, live region). Les textes r\u00E9solus depuis\n       KT_SELECT_CONFIG sont pass\u00E9s en inputs (ils priment sur un \u00E9ventuel KT_CHIPS_CONFIG). -->\n  <kt-chip-list\n    [items]=\"selectedOptions()\"\n    [itemLabel]=\"chipLabelOf\"\n    [itemKey]=\"chipKeyOf\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [maxVisible]=\"maxVisibleChips()\"\n    [listLabel]=\"resolvedSelectedItemsLabel()\"\n    [removeItemLabel]=\"resolvedRemoveItemLabel()\"\n    [itemRemovedText]=\"resolvedItemRemovedText()\"\n    [moreLabel]=\"resolvedMoreChipsLabel()\"\n    [lessLabel]=\"resolvedLessChipsLabel()\"\n    [chipTemplate]=\"chipDef()?.template ?? null\"\n    [emptyFocusTarget]=\"triggerEl()?.nativeElement\"\n    (removed)=\"removeOption($event.item)\"\n  />\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface, #fff));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface, #fff));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:flex;flex-direction:column!important;justify-content:flex-end!important}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface, #fff));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;translate:0 0;transition:translate var(--kt-sheet-anim-duration, .12s) ease}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}.kt-select__popup--sheet:popover-open .kt-select__sheet-card{translate:0 0;animation:var(--select-sheet-enter-animation, kt-sheet-in var(--kt-sheet-anim-duration, .12s) ease)}.kt-select__popup--sheet .kt-select__sheet-card.kt-select__popup--dragging{transition:none}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-card,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-card{translate:0 100%;transition:translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(.4,0,.2,1)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-card,.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none;translate:0 0}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:44px;cursor:grab;touch-action:none}.kt-select__sheet-grab:active{cursor:grabbing}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n", "@layer kt-aaa.components{.kt-select__trigger--clearable .kt-select__value{margin-inline-end:2rem}.kt-select__clear{position:absolute;inset-block-start:50%;inset-inline-end:2.5rem;translate:0 -50%;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__clear:after{content:\"\";position:absolute;inset:-10px}.kt-select__clear:hover{background-color:color-mix(in srgb,currentColor 12%,transparent);color:var(--field-color, inherit)}.kt-select__clear:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:1px}.kt-select__clear-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__actions{display:flex;gap:.25rem;flex:none;padding:.25rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__action{flex:1;min-block-size:44px;padding:.375rem .625rem;border:0;border-radius:calc(var(--field-radius, 8px) * .75);background:transparent;color:var(--kt-primary, #0b57d0);font:inherit;font-weight:500;cursor:pointer}.kt-select__action:hover{background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__action:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-2px}.kt-select__count{flex:none;padding:.25rem .75rem;font-size:.8125rem;color:var(--field-hint-color, #5f6368);border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:.25rem;-webkit-user-select:none;user-select:none}.kt-select__checkbox-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;color:var(--field-icon-color, #5f6368);-webkit-font-smoothing:antialiased}.kt-select__option[aria-selected=true] .kt-select__checkbox-icon{color:var(--kt-primary, #0b57d0)}.kt-select__option--multiple{display:flex;align-items:center;gap:.5rem}.kt-select__option-content{flex:1;min-inline-size:0}kt-chip-list:not([data-empty]){margin-block-start:.5rem}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], selectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActions", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], optionDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtMultiSelectOptionDef), { isSignal: true }] }], triggerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtMultiSelectTriggerDef), { isSignal: true }] }], chipDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtMultiSelectChipDef), { isSignal: true }] }], chipList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KtChipList), { isSignal: true }] }] } });
+
+/** Base partagée des champs Temporal (Date/Time/DateTime/YearMonth).
+    Toute la logique commune (parsing tolérant, valeur vide `null`, `displayValue` pour l'input
+    natif) vit ici ; chaque sous-classe ne fournit que la construction et la sérialisation propres
+    à son type Temporal (`fromString` / `serialize`).
+
+    Contrat abstrait : une sous-classe implémente uniquement le couple
+    `fromString` (chaîne ISO de l'input natif → valeur typée `T`) et `serialize`
+    (valeur `T` → chaîne ISO pour l'attribut `[value]` de l'input). La valeur exposée
+    reste toujours `T | null`, où `null` représente le champ vide ; le parsing est
+    tolérant (saisie partielle/invalide → `null`, jamais d'exception ni de valeur fausse).
+
+    @template T Type Temporal porté par le champ (ex. `Temporal.PlainDate`,
+    `Temporal.PlainTime`, …). Doit exposer `toString()`. La valeur du champ est `T | null`. */
+class KtBaseTemporalField extends KtBaseInputField {
+    doc = inject(DOCUMENT);
+    constructor() {
+        super();
+        effect(() => {
+            const val = this.value();
+            const ref = this.inputRef();
+            if (!ref)
+                return;
+            const inputEl = ref.nativeElement;
+            const serialized = val === null ? '' : this.serialize(val);
+            const isFocused = this.doc.activeElement === inputEl;
+            if (inputEl.value !== serialized && (!isFocused || val !== null)) {
+                inputEl.value = serialized;
+            }
+        });
+    }
+    parse(raw) {
+        if (raw === '')
+            return null;
+        try {
+            return this.fromString(raw);
+        }
+        catch {
+            // Saisie partielle/invalide (RangeError) → vide, jamais une valeur fausse.
+            return null;
+        }
+    }
+    emptyValue() {
+        return null;
+    }
+    isEmpty(value) {
+        return value === null;
+    }
+    /** Représentation ISO pour l'attribut `[value]` de l'input natif (null → champ vide). */
+    displayValue = computed(() => {
+        const value = this.value();
+        return value === null ? '' : this.serialize(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** Suggestions proposées via un `<datalist>` natif (le picker date/heure reste disponible).
+        Valeurs Temporal simples ou couples `{ value, label }` ; chaque valeur est sérialisée au
+        format de l'input via `serialize`. @default undefined */
+    suggestions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId('temporal-field');
+    datalistId = `kt-temporal-field-list-${this.uid}`;
+    hasSuggestions = computed(() => (this.suggestions()?.length ?? 0) > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : /* istanbul ignore next */ []));
+    datalistOptions = computed(() => normalizeKtSuggestions(this.suggestions(), (value) => this.serialize(value)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datalistOptions" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseTemporalField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtBaseTemporalField, isStandalone: true, inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseTemporalField, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }] } });
+
+/** Valeur runtime `Temporal` (native ou polyfill). Cast via `unknown` : selon le contexte de
+    compilation, `globalThis.Temporal` peut déjà être typé (augmentation `temporal-polyfill/global`)
+    ou non — ce cast fonctionne dans les deux cas. */
+const rawTemporal = globalThis.Temporal;
+if (typeof rawTemporal === 'undefined') {
+    throw new Error(`[ktortu/aaa] L'espace de noms 'Temporal' est introuvable. ` +
+        `Veuillez vous assurer que le polyfill 'temporal-polyfill/global' est correctement importé ` +
+        `dans le fichier 'main.ts' de votre application.`);
+}
+const Temporal = rawTemporal;
+
+/** Champ « date sans heure » : valeur = `Temporal.PlainDate`, input natif `type="date"`.
+ *
+ * @example
+ * ```html
+ * <kt-date-field label="Date de naissance" [(value)]="birthDate" />
+ * ```
+ */
+class KtDateField extends KtBaseTemporalField {
+    /** Valeur du champ : un `Temporal.PlainDate` (date civile sans heure ni fuseau).
+        `null` = champ vide.
+        @default null */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    fromString(raw) {
+        return Temporal.PlainDate.from(raw);
+    }
+    serialize(value) {
+        return value.toString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtDateField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtDateField, isStandalone: true, selector: "kt-date-field", inputs: { value: { classPropertyName: "value", publicName: "value", 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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"date\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors"], 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: KtDateField, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-date-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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"date\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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"] }] } });
+
+/** Champ « heure sans date » : valeur = `Temporal.PlainTime`, input natif `type="time"`.
+ *
+ * @example
+ * ```html
+ * <kt-time-field label="Heure de rendez-vous" [(value)]="appointmentTime" />
+ * ```
+ */
+class KtTimeField extends KtBaseTemporalField {
+    /** Valeur du champ : un `Temporal.PlainTime` (heure « au mur », sans date ni fuseau).
+        `null` = champ vide.
+        @default null */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    fromString(raw) {
+        return Temporal.PlainTime.from(raw);
+    }
+    serialize(value) {
+        // Précision minute : un input `type="time"` ne saisit pas les secondes par défaut.
+        return value.toString({ smallestUnit: 'minute' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTimeField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTimeField, isStandalone: true, selector: "kt-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", 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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"time\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors"], 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: KtTimeField, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-time-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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"time\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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"] }] } });
+
+/** Champ « date-heure sans fuseau » : valeur = `Temporal.PlainDateTime`, input
+    natif `type="datetime-local"`. Volontairement SANS timezone (heure « au mur »).
+ *
+ * @example
+ * ```html
+ * <kt-date-time-field label="Début de l'événement" [(value)]="startsAt" />
+ * ```
+ */
+class KtDateTimeField extends KtBaseTemporalField {
+    /** Valeur du champ : un `Temporal.PlainDateTime` (date + heure « au mur », sans fuseau).
+        `null` = champ vide.
+        @default null */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    fromString(raw) {
+        return Temporal.PlainDateTime.from(raw);
+    }
+    serialize(value) {
+        // Précision minute : `type="datetime-local"` ne saisit pas les secondes par défaut.
+        return value.toString({ smallestUnit: 'minute' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtDateTimeField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtDateTimeField, isStandalone: true, selector: "kt-date-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", 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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors"], 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: KtDateTimeField, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-date-time-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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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"] }] } });
+
+/** Champ « mois/année » (ex. expiration de carte) : valeur = `Temporal.PlainYearMonth`,
+    input natif `type="month"`.
+ *
+ * @example
+ * ```html
+ * <kt-year-month-field label="Expiration" [(value)]="cardExpiry" />
+ * ```
+ */
+class KtYearMonthField extends KtBaseTemporalField {
+    /** Valeur du champ : un `Temporal.PlainYearMonth` (mois + année, sans jour ni fuseau).
+        `null` = champ vide.
+        @default null */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    fromString(raw) {
+        return Temporal.PlainYearMonth.from(raw);
+    }
+    serialize(value) {
+        return value.toString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtYearMonthField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtYearMonthField, isStandalone: true, selector: "kt-year-month-field", inputs: { value: { classPropertyName: "value", publicName: "value", 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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"month\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors"], 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: KtYearMonthField, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-year-month-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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"month\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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"] }] } });
+
+/** Source unique de l'heure courante et du **fuseau local** de l'utilisateur.
+    Injectable (et donc figeable en test) : `vi.useFakeTimers()` ne fige PAS `Temporal.Now`.
+    Règle d'équipe : ne jamais appeler `Temporal.Now.*` en direct ailleurs — passer par `KtClock`. */
+class KtClock {
+    /** Fuseau IANA local de l'utilisateur (auto-détecté), ex. `"Europe/Paris"`.
+        Sert de zone de référence pour `today()` et pour les conversions UTC↔local.
+        @returns L'identifiant de fuseau IANA. */
+    timeZoneId() {
+        return Temporal.Now.timeZoneId();
+    }
+    /** Instant absolu courant, sur la ligne du temps (UTC), indépendant du fuseau.
+        @returns L'instant présent en `Temporal.Instant`. */
+    now() {
+        return Temporal.Now.instant();
+    }
+    /** Date civile du jour telle qu'observée dans le fuseau local (`timeZoneId()`).
+        @returns Le jour courant en `Temporal.PlainDate`. */
+    today() {
+        return Temporal.Now.plainDateISO(this.timeZoneId());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtClock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtClock, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtClock, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** Horloge figée pour les tests : fige l'instant ET le fuseau (sinon un test passe en France mais
+    échoue sur un runner CI en UTC). À fournir via `{ provide: KtClock, useValue: new KtFixedClock(...) }`. */
+class KtFixedClock extends KtClock {
+    fixedInstant;
+    zone;
+    /** Construit une horloge figée déterministe pour les tests.
+        @param fixedInstant Instant absolu (UTC) renvoyé tel quel par `now()` et utilisé comme base de `today()`.
+        @param zone Fuseau IANA fixe (ex. `"Europe/Paris"`) renvoyé par `timeZoneId()`.
+     *
+     * @example
+     * ```ts
+     * TestBed.configureTestingModule({
+     *   providers: [
+     *     { provide: KtClock, useValue: new KtFixedClock(Temporal.Instant.from('2026-06-18T10:00:00Z'), 'Europe/Paris') },
+     *   ],
+     * });
+     * ```
+     */
+    constructor(fixedInstant, zone) {
+        super();
+        this.fixedInstant = fixedInstant;
+        this.zone = zone;
+    }
+    timeZoneId() {
+        return this.zone;
+    }
+    now() {
+        return this.fixedInstant;
+    }
+    today() {
+        return this.fixedInstant.toZonedDateTimeISO(this.zone).toPlainDate();
+    }
+}
+
+/** Champ « instant absolu » : valeur = `Temporal.Instant` (UTC), saisi et affiché en **heure
+    locale** via un input `type="datetime-local"`. Conçu pour le flux serveur-UTC → affichage/édition
+    locale → renvoi UTC. Le fuseau local vient du service `KtClock` (injecté → testable).
+
+    Conversion UTC↔heure locale : à l'affichage, l'`Instant` UTC est projeté dans le fuseau
+    local (`KtClock.timeZoneId()`) pour produire l'heure « au mur » montrée à l'utilisateur ; à la
+    saisie, cette heure locale est réinterprétée dans le même fuseau puis reconvertie en `Instant`
+    UTC. Fournir un `KtClock` figé en test garantit une conversion déterministe.
+ *
+ * @example
+ * ```html
+ * <kt-instant-field label="Horodatage" [(value)]="recordedAt" />
+ * ```
+ */
+class KtInstantField extends KtBaseTemporalField {
+    clock = inject(KtClock);
+    /** Valeur du champ : un `Temporal.Instant` (instant absolu en UTC), saisi/affiché en heure
+        locale via `KtClock`. `null` = champ vide.
+        @default null */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // Heure locale saisie (wall-clock) → instant absolu. Disambiguation 'compatible' par défaut
+    // (ne lève pas sur un créneau DST ambigu).
+    fromString(raw) {
+        return Temporal.PlainDateTime.from(raw).toZonedDateTime(this.clock.timeZoneId()).toInstant();
+    }
+    // Instant absolu → heure locale (précision minute, comme un input datetime-local).
+    serialize(value) {
+        return value.toZonedDateTimeISO(this.clock.timeZoneId()).toPlainDateTime().toString({ smallestUnit: 'minute' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtInstantField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtInstantField, isStandalone: true, selector: "kt-instant-field", inputs: { value: { classPropertyName: "value", publicName: "value", 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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors"], 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: KtInstantField, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-instant-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]=\"errors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\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  >\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=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($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"] }] } });
+
+/** Formate une valeur Temporal pour l'affichage selon la locale active.
+    `DatePipe` n'accepte pas Temporal (seulement `Date|string|number`) → pipe dédié, basé sur
+    `toLocaleString` (interface `Intl.DateTimeFormat`). Cohérent avec la neutralité i18n de la lib
+    (format au runtime via `LOCALE_ID`, pas `$localize`).
+
+    Un `Instant` n'a pas de fuseau propre → il est affiché dans la **zone locale** (via `KtClock`).
+    Un `ZonedDateTime` est affiché dans **sa propre** zone. Les `Plain*` n'ont pas de fuseau.
+ *
+ * @example
+ * ```html
+ * <!-- format par défaut de la locale active -->
+ * {{ d | temporalDate }}
+ * <!-- options Intl.DateTimeFormat -->
+ * {{ d | temporalDate:{ month: 'long' } }}
+ * {{ d | temporalDate:{ dateStyle: 'full' } }}
+ * ```
+ */
+class KtTemporalDatePipe {
+    locale = inject(LOCALE_ID);
+    clock = inject(KtClock);
+    transform(value, options) {
+        if (value == null)
+            return '';
+        if (value instanceof Temporal.Instant) {
+            return value.toZonedDateTimeISO(this.clock.timeZoneId()).toLocaleString(this.locale, options);
+        }
+        return value.toLocaleString(this.locale, options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTemporalDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: KtTemporalDatePipe, isStandalone: true, name: "temporalDate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTemporalDatePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'temporalDate' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KT_CHIPS_CONFIG, KT_FIELD, KT_FIELD_CONFIG, KT_SELECT_CONFIG, KtBaseTemporalField, KtCheckbox, KtCheckboxGroup, KtChip, KtChipItemDef, KtChipList, KtClock, KtDateField, KtDateTimeField, KtField, KtFieldControl, KtFixedClock, KtInstantField, KtMultiSelect, KtMultiSelectChipDef, KtMultiSelectOptionDef, KtMultiSelectTriggerDef, KtNumberField, KtRadio, KtRadioGroup, KtSelect, KtSelectConfig, KtSelectOptionDef, KtSelectTriggerDef, KtSwitch, KtTemporalDatePipe, KtTextArea, KtTextField, KtTimeField, KtYearMonthField, defaultKtFieldErrorMatcher };
+//# sourceMappingURL=ktortu-aaa-forms.mjs.map