@ktortu/aaa 0.9.3 → 0.9.5

package/fesm2022/ktortu-aaa-forms.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, computed, ElementRef, Directive, input, output, booleanAttribute, contentChild, TemplateRef, forwardRef, ChangeDetectionStrategy, Component, Injectable, model, viewChild, signal, afterNextRender, isDevMode, DestroyRef, effect, PLATFORM_ID, untracked, Injector, ChangeDetectorRef, viewChildren, afterRenderEffect, LOCALE_ID, Pipe } from '@angular/core';
+import { InjectionToken, inject, computed, ElementRef, Directive, input, output, booleanAttribute, contentChild, TemplateRef, forwardRef, ChangeDetectionStrategy, Component, Injectable, model, viewChild, signal, afterNextRender, isDevMode, DestroyRef, effect, PLATFORM_ID, untracked, afterRenderEffect, Injector, ChangeDetectorRef, viewChildren, LOCALE_ID, Pipe } from '@angular/core';
 import { KtTooltip } from '@ktortu/aaa/tooltip';
 import { KtIdGenerator, KT_AUDIT_ENABLED, KtBodyScrollLock, KtViewport, createKtSheetDrag } from '@ktortu/aaa/cdk';
 import { transformedValue } from '@angular/forms/signals';
@@ -2570,7 +2570,297 @@ class ChipTransitionScope {
 }
 
 /**
- * Pilule individuelle (tag). Utilisable seule (tag statique) ou dans `kt-chip-list`.
+ * Groupe de puces sélectionnables (Chip Listbox) conforme à l'ARIA Listbox / WCAG AAA.
+ * Orchestrateur : s'intègre aux formulaires réactifs ou de modèle via `FormValueControl`.
+ * Permet la sélection simple ou multiple, avec gestion du roving tabindex et des touches fléchées
+ * de façon autonome et robuste.
+ *
+ * @example
+ * ```html
+ * <kt-chip-listbox label="Filtres" [(value)]="selectedTags" multiple>
+ *   <kt-chip [value]="'angular'">Angular</kt-chip>
+ *   <kt-chip [value]="'react'">React</kt-chip>
+ * </kt-chip-listbox>
+ * ```
+ */
+class KtChipListbox {
+    config = inject(KT_FIELD_CONFIG, { optional: true });
+    doc = inject(DOCUMENT);
+    /** Valeur sélectionnée (two-way) : tableau de valeurs (si multiple) ou valeur unique (si simple). */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // --- État poussé par [formField] ---
+    /** État « touché » (two-way), piloté par `[formField]`. @default false */
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /** Désactive le groupe de puces. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mode lecture seule (bloque la sélection). @default false */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Marque le groupe comme invalide. @default false */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** 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é » (dirty). @default false */
+    dirty = input(false, { ...(ngDevMode ? { debugName: "dirty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Validation asynchrone en cours. @default false */
+    pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Erreurs de validation à afficher. @default [] */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    // --- Configuration ---
+    /** Autorise la sélection de plusieurs puces. @default false */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Identifiant du composant (sélecteurs de test stables). @default auto-généré */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Libellé (légende) du groupe de puces. @default undefined */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texte d'aide affiché sous le groupe. @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'affichage des erreurs. @default undefined */
+    errorMatcher = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMatcher" }] : /* istanbul ignore next */ []));
+    /** Afficher toutes les erreurs. @default false */
+    showAllErrors = input(this.config?.showAllErrors ?? false, { ...(ngDevMode ? { debugName: "showAllErrors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Fonction de comparaison de valeurs pour déterminer la sélection. */
+    compareWith = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    el = inject(ElementRef);
+    errorResolver = inject(KtFieldErrorResolver);
+    idGen = inject(KtIdGenerator);
+    uid = this.idGen.generateId('chip-listbox');
+    baseId = computed(() => this.id() ?? `kt-chip-listbox-${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 */ []));
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* 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 */ []));
+    resolvedErrors = computed(() => this.errorResolver.resolveAll(this.errors()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedErrors" }] : /* istanbul ignore next */ []));
+    displayedErrors = computed(() => this.showAllErrors() ? this.resolvedErrors() : this.resolvedErrors().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.resolvedErrors().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 */ []));
+    constructor() {
+        // Roving tabindex : un seul chip porte tabindex=0 (les autres -1) dans la liste
+        afterRenderEffect(() => {
+            this.value();
+            const active = this.activeIndex();
+            const focusables = this.query('.kt-chip');
+            if (focusables.length === 0)
+                return;
+            const clamped = Math.min(Math.max(active, 0), focusables.length - 1);
+            for (let i = 0; i < focusables.length; i++) {
+                focusables[i].tabIndex = i === clamped ? 0 : -1;
+            }
+        });
+    }
+    query(selector) {
+        return Array.from(this.el.nativeElement.querySelectorAll(selector));
+    }
+    /** Détermine si une valeur d'option est sélectionnée. */
+    isSelected(optionValue) {
+        const val = this.value();
+        if (val === null || val === undefined)
+            return false;
+        const cmp = this.comparator();
+        if (this.multiple()) {
+            return Array.isArray(val) && val.some((v) => cmp(v, optionValue));
+        }
+        return cmp(val, optionValue);
+    }
+    /** Bascule la sélection d'une valeur d'option. */
+    toggle(optionValue) {
+        if (this.disabled() || this.readonly())
+            return;
+        const cmp = this.comparator();
+        if (this.multiple()) {
+            const arr = this.value() ?? [];
+            const exists = arr.some((v) => cmp(v, optionValue));
+            if (exists) {
+                this.value.set(arr.filter((v) => !cmp(v, optionValue)));
+            }
+            else {
+                this.value.set([...arr, optionValue]);
+            }
+        }
+        else {
+            const current = this.value();
+            if (current !== null && cmp(current, optionValue)) {
+                this.value.set(null);
+            }
+            else {
+                this.value.set(optionValue);
+            }
+        }
+        this.touched.set(true);
+    }
+    onKeydown(event) {
+        const key = event.key;
+        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', ' ', 'Enter'].includes(key)) {
+            return;
+        }
+        const focusables = this.query('.kt-chip');
+        if (focusables.length === 0)
+            return;
+        const currentIndex = focusables.indexOf(this.doc.activeElement);
+        if (key === ' ' || key === 'Enter') {
+            event.preventDefault();
+            if (currentIndex >= 0) {
+                // Déclenche l'événement click natif du chip, qui est intercepté par le listener du chip
+                focusables[currentIndex].click();
+            }
+            return;
+        }
+        let nextIndex = currentIndex;
+        if (key === 'ArrowRight' || key === 'ArrowDown') {
+            nextIndex = (currentIndex + 1) % focusables.length;
+        }
+        else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+            nextIndex = (currentIndex - 1 + focusables.length) % focusables.length;
+        }
+        else if (key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (key === 'End') {
+            nextIndex = focusables.length - 1;
+        }
+        if (nextIndex >= 0 && nextIndex < focusables.length) {
+            event.preventDefault();
+            this.activeIndex.set(nextIndex);
+            focusables[nextIndex].focus();
+        }
+    }
+    onFocusin(event) {
+        const index = this.query('.kt-chip').indexOf(event.target);
+        if (index >= 0)
+            this.activeIndex.set(index);
+    }
+    /** Focus la première option active. */
+    focus(options) {
+        this.el.nativeElement.querySelector('.kt-chip:not([disabled])')?.focus(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChipListbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtChipListbox, isStandalone: true, selector: "kt-chip-listbox", 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 }, 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 }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", 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" }, host: { listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusin($event)" }, classAttribute: "kt-chip-listbox-container" }, ngImport: i0, template: `
+    <div
+      class="kt-chip-listbox-field"
+      [class.kt-chip-listbox-field--invalid]="showInvalid()"
+      [class.kt-chip-listbox-field--disabled]="disabled()"
+    >
+      @if (label(); as labelText) {
+        <span [id]="labelId()" class="kt-chip-listbox__legend">
+          {{ labelText }}
+          @if (required()) {
+            <span class="kt-chip-listbox__required" aria-hidden="true">*</span>
+          }
+        </span>
+      }
+
+      <div
+        class="kt-chip-listbox__options"
+        role="listbox"
+        [id]="baseId()"
+        [attr.aria-multiselectable]="multiple() ? 'true' : null"
+        [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"
+        [attr.aria-disabled]="disabled() ? 'true' : null"
+      >
+        <ng-content />
+      </div>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-chip-listbox__hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-chip-listbox__error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-chip-listbox__error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: ["@layer kt-aaa.components{.kt-chip-listbox-field{display:flex;flex-direction:column;gap:.5rem}.kt-chip-listbox__legend{font-size:.875rem;font-weight:500;color:var(--field-label-color, currentColor)}.kt-chip-listbox__required{color:var(--kt-danger);margin-inline-start:.125rem}.kt-chip-listbox__options{display:flex;flex-wrap:wrap;gap:.5rem;outline:none}.kt-chip-listbox__hint{font-size:.75rem;color:var(--field-hint-color);margin:0}.kt-chip-listbox__error{font-size:.75rem;color:var(--field-error-color);min-block-size:1.25rem}.kt-chip-listbox__error-message{display:block}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChipListbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'kt-chip-listbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'kt-chip-listbox-container',
+                        '(keydown)': 'onKeydown($event)',
+                        '(focusin)': 'onFocusin($event)',
+                    }, template: `
+    <div
+      class="kt-chip-listbox-field"
+      [class.kt-chip-listbox-field--invalid]="showInvalid()"
+      [class.kt-chip-listbox-field--disabled]="disabled()"
+    >
+      @if (label(); as labelText) {
+        <span [id]="labelId()" class="kt-chip-listbox__legend">
+          {{ labelText }}
+          @if (required()) {
+            <span class="kt-chip-listbox__required" aria-hidden="true">*</span>
+          }
+        </span>
+      }
+
+      <div
+        class="kt-chip-listbox__options"
+        role="listbox"
+        [id]="baseId()"
+        [attr.aria-multiselectable]="multiple() ? 'true' : null"
+        [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"
+        [attr.aria-disabled]="disabled() ? 'true' : null"
+      >
+        <ng-content />
+      </div>
+
+      @if (hint() && !showInvalid()) {
+        <p [id]="hintId()" class="kt-chip-listbox__hint">{{ hint() }}</p>
+      }
+      <div [id]="errorId()" class="kt-chip-listbox__error" aria-live="polite">
+        @if (showInvalid()) {
+          @for (error of displayedErrors(); track $index) {
+            <span class="kt-chip-listbox__error-message">{{ error.message }}</span>
+          }
+        }
+      </div>
+    </div>
+  `, styles: ["@layer kt-aaa.components{.kt-chip-listbox-field{display:flex;flex-direction:column;gap:.5rem}.kt-chip-listbox__legend{font-size:.875rem;font-weight:500;color:var(--field-label-color, currentColor)}.kt-chip-listbox__required{color:var(--kt-danger);margin-inline-start:.125rem}.kt-chip-listbox__options{display:flex;flex-wrap:wrap;gap:.5rem;outline:none}.kt-chip-listbox__hint{font-size:.75rem;color:var(--field-hint-color);margin:0}.kt-chip-listbox__error{font-size:.75rem;color:var(--field-error-color);min-block-size:1.25rem}.kt-chip-listbox__error-message{display:block}}\n"] }]
+        }], ctorParameters: () => [], 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 }] }], 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 }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", 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 }] }] } });
+
+/**
+ * Pilule individuelle (tag). Utilisable seule (tag statique), dans `kt-chip-list` ou dans `kt-chip-listbox`.
  * Le label vient de la projection de contenu ; `removable` ajoute un bouton « retirer »
  * (24px visibles, cible 44px via ::after — technique des boutons icon-only).
  *
@@ -2582,6 +2872,7 @@ class ChipTransitionScope {
  */
 class KtChip {
     scope = inject(ChipTransitionScope, { optional: true });
+    listbox = inject(forwardRef(() => KtChipListbox), { 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')}`;
@@ -2592,10 +2883,47 @@ class KtChip {
     /** 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 */ []));
+    /** État sélectionné unitaire (quand utilisé hors boîte de liste). @default false */
+    checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Valeur portée par la puce (utilisée au sein d'un groupe de sélection). */
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     /** Émis au clic sur le bouton « retirer » (le parent décide de retirer le chip). */
     remove = output();
+    initialRole;
+    /** Rôle d'accessibilité calculé (préserve les rôles statiques comme listitem). */
+    role = computed(() => {
+        if (this.listbox) {
+            return 'option';
+        }
+        return this.initialRole;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /** Signal consolidé de l'état de sélection (dérivé du parent listbox ou de l'input checked). */
+    selected = computed(() => {
+        if (this.listbox) {
+            return this.listbox.isSelected(this.value());
+        }
+        return this.checked();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     removeBtn = viewChild('removeBtn', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "removeBtn" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const el = inject(ElementRef);
+        // Lit le rôle défini statiquement sur l'élément avant que les host bindings ne s'évaluent
+        this.initialRole = el.nativeElement.getAttribute('role');
+        el.nativeElement.addEventListener('click', (event) => {
+            // Empêche le clic de basculer la sélection si on clique sur le bouton de retrait
+            const target = event.target;
+            if (target.closest('.kt-chip__remove')) {
+                return;
+            }
+            if (this.listbox && !this.disabled() && !this.listbox.disabled() && !this.listbox.readonly()) {
+                this.listbox.toggle(this.value());
+            }
+        });
+    }
     /**
      * Focus programmatique du bouton « retirer ». Helper de coordination interne (focus management
      * d'`kt-chip-list`), non destiné aux consommateurs.
@@ -2605,19 +2933,23 @@ class KtChip {
         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 });
+    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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { properties: { "class.kt-chip--selected": "selected()", "attr.role": "role()", "attr.aria-selected": "listbox ? (selected() ? \"true\" : \"false\") : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "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: "@if (selected()) {\n  <span class=\"kt-chip__selected-icon\" aria-hidden=\"true\">check</span>\n}\n<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}}:host(.kt-chip--selected){background:var(--chip-selected-bg, var(--chip-bg-hover));border-color:var(--chip-selected-border, var(--chip-focus-ring));color:var(--chip-selected-color, var(--chip-color))}.kt-chip__selected-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1rem;line-height:1;-webkit-font-smoothing:antialiased;margin-inline-end:.125rem}:host([role=\"option\"]){transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}:host([role=\"option\"]:not([aria-disabled=\"true\"])){cursor:pointer}:host([role=\"option\"]:not([aria-disabled=\"true\"]):hover){background-color:var(--chip-bg-hover);box-shadow:var(--chip-shadow-hover, var(--chip-shadow, none))}:host([role=\"option\"].kt-chip--selected:not([aria-disabled=\"true\"]):hover){background-color:color-mix(in srgb,var(--chip-selected-bg) 85%,var(--kt-primary))}:host([role=\"option\"]:focus-visible){outline:2px solid var(--chip-focus-ring);outline-offset:2px}:host([role=\"option\"][aria-disabled=\"true\"]){cursor:not-allowed;opacity:.5}}\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',
+                        '[class.kt-chip--selected]': 'selected()',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-selected]': 'listbox ? (selected() ? "true" : "false") : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
                         // 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: "@if (selected()) {\n  <span class=\"kt-chip__selected-icon\" aria-hidden=\"true\">check</span>\n}\n<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}}:host(.kt-chip--selected){background:var(--chip-selected-bg, var(--chip-bg-hover));border-color:var(--chip-selected-border, var(--chip-focus-ring));color:var(--chip-selected-color, var(--chip-color))}.kt-chip__selected-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1rem;line-height:1;-webkit-font-smoothing:antialiased;margin-inline-end:.125rem}:host([role=\"option\"]){transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}:host([role=\"option\"]:not([aria-disabled=\"true\"])){cursor:pointer}:host([role=\"option\"]:not([aria-disabled=\"true\"]):hover){background-color:var(--chip-bg-hover);box-shadow:var(--chip-shadow-hover, var(--chip-shadow, none))}:host([role=\"option\"].kt-chip--selected:not([aria-disabled=\"true\"]):hover){background-color:color-mix(in srgb,var(--chip-selected-bg) 85%,var(--kt-primary))}:host([role=\"option\"]:focus-visible){outline:2px solid var(--chip-focus-ring);outline-offset:2px}:host([role=\"option\"][aria-disabled=\"true\"]){cursor:not-allowed;opacity:.5}}\n"] }]
+        }], ctorParameters: () => [], 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 }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", 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).
@@ -2980,7 +3312,7 @@ class KtChipList {
             this.activeIndex.set(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChipList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtChipList, isStandalone: true, selector: "kt-chip-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, removeItemLabel: { classPropertyName: "removeItemLabel", publicName: "removeItemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemRemovedText: { classPropertyName: "itemRemovedText", publicName: "itemRemovedText", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, lessLabel: { classPropertyName: "lessLabel", publicName: "lessLabel", isSignal: true, isRequired: false, transformFunction: null }, chipTemplate: { classPropertyName: "chipTemplate", publicName: "chipTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyFocusTarget: { classPropertyName: "emptyFocusTarget", publicName: "emptyFocusTarget", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusin($event)" }, properties: { "attr.data-empty": "items().length === 0 ? '' : null", "attr.data-vt-active": "transitioning() ? '' : null" } }, providers: [{ provide: ChipTransitionScope, useExisting: KtChipList }], queries: [{ propertyName: "itemDef", first: true, predicate: KtChipItemDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chips", predicate: KtChip, descendants: true, isSignal: true }], ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"kt-chip-list\">\n    <div class=\"kt-chip-list__items\" role=\"list\" [attr.aria-label]=\"resolvedListLabel()\">\n      @for (item of visibleItems(); track keyOf(item); let i = $index) {\n        @if (effectiveTemplate(); as tpl) {\n          <div role=\"listitem\" class=\"kt-chip-list__item\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, remove: removeCallback(item, i) }\"\n            />\n          </div>\n        } @else {\n          <kt-chip\n            role=\"listitem\"\n            [removable]=\"showRemove()\"\n            [disabled]=\"disabled()\"\n            [removeLabel]=\"removeLabelFor(item)\"\n            (remove)=\"removeAt(item, i)\"\n            >{{ labelOf(item) }}</kt-chip\n          >\n        }\n      }\n    </div>\n    <!-- Le bouton de repli/d\u00E9pli n'est PAS un chip : hors du role=\"list\" pour ne pas \u00EAtre\n         annonc\u00E9 comme un item de la liste (reste dans la m\u00EAme rang\u00E9e flex). -->\n    @if (overflow()) {\n      <button\n        type=\"button\"\n        class=\"kt-chip-list__more\"\n        [attr.aria-expanded]=\"expanded()\"\n        [style.view-transition-name]=\"transitioning() ? moreBtnTransitionName : null\"\n        [style.view-transition-class]=\"'chip-transition'\"\n        (click)=\"toggleExpanded()\"\n      >\n        {{ expanded() ? resolvedLessLabel() : resolvedMoreLabel()(hiddenCount()) }}\n      </button>\n    }\n  </div>\n}\n<!-- Annonce des retraits : TOUJOURS rendue (hors du @if, sinon elle dispara\u00EEt avec le dernier chip). -->\n<div class=\"kt-chip-list__status\" role=\"status\" aria-live=\"polite\">{{ status() }}</div>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-chip-list{display:flex;flex-wrap:wrap;gap:.5rem}.kt-chip-list__items,.kt-chip-list__item{display:contents}.kt-chip-list__more{display:inline-flex;align-items:center;gap:var(--chip-gap);padding:var(--chip-padding-y) var(--chip-padding-x);border-radius:var(--chip-radius);background:var(--chip-bg);border:1px solid var(--chip-border);box-shadow:var(--chip-shadow, none);font:inherit;font-size:var(--chip-font-size);color:var(--chip-color);cursor:pointer;min-block-size:24px}.kt-chip-list__more:hover{background:var(--chip-bg-hover);box-shadow:var(--chip-shadow-hover, var(--chip-shadow, none))}.kt-chip-list__more:focus-visible{outline:2px solid var(--chip-focus-ring);outline-offset:1px}.kt-chip-list__status{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(pointer:coarse){.kt-chip-list__more{min-block-size:32px}}}\n"], dependencies: [{ kind: "component", type: KtChip, selector: "kt-chip", inputs: ["removable", "disabled", "removeLabel"], outputs: ["remove"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtChipList, isStandalone: true, selector: "kt-chip-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, removeItemLabel: { classPropertyName: "removeItemLabel", publicName: "removeItemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemRemovedText: { classPropertyName: "itemRemovedText", publicName: "itemRemovedText", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, lessLabel: { classPropertyName: "lessLabel", publicName: "lessLabel", isSignal: true, isRequired: false, transformFunction: null }, chipTemplate: { classPropertyName: "chipTemplate", publicName: "chipTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyFocusTarget: { classPropertyName: "emptyFocusTarget", publicName: "emptyFocusTarget", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusin($event)" }, properties: { "attr.data-empty": "items().length === 0 ? '' : null", "attr.data-vt-active": "transitioning() ? '' : null" } }, providers: [{ provide: ChipTransitionScope, useExisting: KtChipList }], queries: [{ propertyName: "itemDef", first: true, predicate: KtChipItemDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chips", predicate: KtChip, descendants: true, isSignal: true }], ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"kt-chip-list\">\n    <div class=\"kt-chip-list__items\" role=\"list\" [attr.aria-label]=\"resolvedListLabel()\">\n      @for (item of visibleItems(); track keyOf(item); let i = $index) {\n        @if (effectiveTemplate(); as tpl) {\n          <div role=\"listitem\" class=\"kt-chip-list__item\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, remove: removeCallback(item, i) }\"\n            />\n          </div>\n        } @else {\n          <kt-chip\n            role=\"listitem\"\n            [removable]=\"showRemove()\"\n            [disabled]=\"disabled()\"\n            [removeLabel]=\"removeLabelFor(item)\"\n            (remove)=\"removeAt(item, i)\"\n            >{{ labelOf(item) }}</kt-chip\n          >\n        }\n      }\n    </div>\n    <!-- Le bouton de repli/d\u00E9pli n'est PAS un chip : hors du role=\"list\" pour ne pas \u00EAtre\n         annonc\u00E9 comme un item de la liste (reste dans la m\u00EAme rang\u00E9e flex). -->\n    @if (overflow()) {\n      <button\n        type=\"button\"\n        class=\"kt-chip-list__more\"\n        [attr.aria-expanded]=\"expanded()\"\n        [style.view-transition-name]=\"transitioning() ? moreBtnTransitionName : null\"\n        [style.view-transition-class]=\"'chip-transition'\"\n        (click)=\"toggleExpanded()\"\n      >\n        {{ expanded() ? resolvedLessLabel() : resolvedMoreLabel()(hiddenCount()) }}\n      </button>\n    }\n  </div>\n}\n<!-- Annonce des retraits : TOUJOURS rendue (hors du @if, sinon elle dispara\u00EEt avec le dernier chip). -->\n<div class=\"kt-chip-list__status\" role=\"status\" aria-live=\"polite\">{{ status() }}</div>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-chip-list{display:flex;flex-wrap:wrap;gap:.5rem}.kt-chip-list__items,.kt-chip-list__item{display:contents}.kt-chip-list__more{display:inline-flex;align-items:center;gap:var(--chip-gap);padding:var(--chip-padding-y) var(--chip-padding-x);border-radius:var(--chip-radius);background:var(--chip-bg);border:1px solid var(--chip-border);box-shadow:var(--chip-shadow, none);font:inherit;font-size:var(--chip-font-size);color:var(--chip-color);cursor:pointer;min-block-size:24px}.kt-chip-list__more:hover{background:var(--chip-bg-hover);box-shadow:var(--chip-shadow-hover, var(--chip-shadow, none))}.kt-chip-list__more:focus-visible{outline:2px solid var(--chip-focus-ring);outline-offset:1px}.kt-chip-list__status{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(pointer:coarse){.kt-chip-list__more{min-block-size:32px}}}\n"], dependencies: [{ kind: "component", type: KtChip, selector: "kt-chip", inputs: ["removable", "disabled", "removeLabel", "checked", "value"], 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,
@@ -3779,5 +4111,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_KT_SELECT_CONFIG, KT_CHIPS_CONFIG, KT_DEFAULT_FIELD_ERROR_MESSAGES, KT_FIELD, KT_FIELD_CONFIG, KT_SELECT_CONFIG, KtBaseInputField, KtBaseSelect, KtBaseTemporalField, KtBaseTimeTemporalField, KtCheckbox, KtCheckboxGroup, KtChip, KtChipItemDef, KtChipList, KtClock, KtDateField, KtDateTimeField, KtField, KtFieldControl, KtFieldErrorResolver, KtFixedClock, KtInstantField, KtMultiSelect, KtMultiSelectChipDef, KtMultiSelectOptionDef, KtMultiSelectTriggerDef, KtNumberField, KtPasswordField, KtRadio, KtRadioGroup, KtSelect, KtSelectConfig, KtSelectOptionDef, KtSelectTriggerDef, KtSwitch, KtTemporalDatePipe, KtTextArea, KtTextField, KtTimeField, KtYearMonthField, Temporal, defaultKtFieldErrorMatcher, ktErrorParam, normalizeKtSuggestions, provideKtField };
+export { DEFAULT_KT_SELECT_CONFIG, KT_CHIPS_CONFIG, KT_DEFAULT_FIELD_ERROR_MESSAGES, KT_FIELD, KT_FIELD_CONFIG, KT_SELECT_CONFIG, KtBaseInputField, KtBaseSelect, KtBaseTemporalField, KtBaseTimeTemporalField, KtCheckbox, KtCheckboxGroup, KtChip, KtChipItemDef, KtChipList, KtChipListbox, KtClock, KtDateField, KtDateTimeField, KtField, KtFieldControl, KtFieldErrorResolver, KtFixedClock, KtInstantField, KtMultiSelect, KtMultiSelectChipDef, KtMultiSelectOptionDef, KtMultiSelectTriggerDef, KtNumberField, KtPasswordField, KtRadio, KtRadioGroup, KtSelect, KtSelectConfig, KtSelectOptionDef, KtSelectTriggerDef, KtSwitch, KtTemporalDatePipe, KtTextArea, KtTextField, KtTimeField, KtYearMonthField, Temporal, defaultKtFieldErrorMatcher, ktErrorParam, normalizeKtSuggestions, provideKtField };
 //# sourceMappingURL=ktortu-aaa-forms.mjs.map