@ktortu/aaa 0.9.4 → 0.9.6

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

@@ -66,6 +66,10 @@ interface KtFieldConfig {
     appearance: KtFieldAppearance;
     /** Politique du label flottant en `outline` (`auto` | `always`). Défaut : `'auto'`. */
     floatLabel: KtFloatLabel;
+    /** Masquer visuellement le label (tout en le gardant dans le DOM pour l'accessibilité). Défaut : `false`. */
+    hideLabel: boolean;
+    /** Masquer visuellement le bloc d'erreur (tout en le gardant dans le DOM pour l'accessibilité). Défaut : `false`. */
+    hideErrors: boolean;
 }
 declare const KT_FIELD_CONFIG: InjectionToken<Partial<KtFieldConfig>>;
 /**
@@ -153,6 +157,10 @@ declare class KtField implements KtFieldParent {
     readonly hideHintWhenInvalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Afficher toutes les erreurs au lieu de la première seule. @default KT_FIELD_CONFIG.showAllErrors ?? false */
     readonly showAllErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
+    readonly hideErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Apparence du chrome : `fill` (label au-dessus) ou `outline` (bordure + label flottant, façon
         Material). Non fournie ⇒ valeur du `KT_FIELD_CONFIG`, sinon `'fill'`. @default undefined */
     readonly appearance: _angular_core.InputSignal<KtFieldAppearance | undefined>;
@@ -180,7 +188,7 @@ declare class KtField implements KtFieldParent {
     readonly describedBy: _angular_core.Signal<string | null>;
     protected onHelpClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtField, "kt-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "fieldId": { "alias": "fieldId"; "required": false; "isSignal": true; }; "hideHintWhenInvalid": { "alias": "hideHintWhenInvalid"; "required": false; "isSignal": true; }; "showAllErrors": { "alias": "showAllErrors"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; }, ["control"], ["[ktFieldHelp]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtField, "kt-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "fieldId": { "alias": "fieldId"; "required": false; "isSignal": true; }; "hideHintWhenInvalid": { "alias": "hideHintWhenInvalid"; "required": false; "isSignal": true; }; "showAllErrors": { "alias": "showAllErrors"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; }, ["control"], ["[ktFieldHelp]", "*"], true, never>;
 }
 
 /** Marque le contrôle (natif ou custom) d'un champ pour que `Field` y câble l'a11y
@@ -328,6 +336,10 @@ declare abstract class KtBaseInputField<T> {
     /** Politique du label flottant en outline (`auto` | `always`) ; non fournie ⇒ `KT_FIELD_CONFIG.floatLabel`
         ?? `'auto'`. En `always`, le label reste en haut même vide et le placeholder s'affiche. @default undefined */
     readonly floatLabel: _angular_core.InputSignal<KtFloatLabel | undefined>;
+    /** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
+    readonly hideErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement | HTMLTextAreaElement> | undefined>;
     private readonly matcher;
     protected readonly showInvalid: _angular_core.Signal<boolean>;
@@ -362,7 +374,7 @@ declare abstract class KtBaseInputField<T> {
     /** La valeur est-elle vide (affichage du bouton d'effacement) ? */
     protected abstract isEmpty(value: T): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtBaseInputField<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseInputField<any>, never, never, { "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "helpClick": "helpClick"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseInputField<any>, never, never, { "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "helpClick": "helpClick"; }, never, never, true, never>;
 }
 
 /** Suggestion d'un champ de saisie (rendu `<datalist>`) : soit la valeur seule, soit un couple
@@ -982,6 +994,10 @@ declare abstract class KtBaseSelect<T, V = T> {
     /** Politique du label flottant en outline (`auto` | `always`) ; non fournie ⇒ `KT_FIELD_CONFIG.floatLabel`
         ?? `'auto'`. @default undefined */
     readonly floatLabel: _angular_core.InputSignal<KtFloatLabel | undefined>;
+    /** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
+    readonly hideErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** 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). @default false */
     readonly filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1086,7 +1102,7 @@ declare abstract class KtBaseSelect<T, V = T> {
     protected onDragStart(event: PointerEvent): void;
     private animateAndCloseSelect;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtBaseSelect<any, any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseSelect<any, any>, never, never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "maxVisibleOptions": { "alias": "maxVisibleOptions"; "required": false; "isSignal": true; }; "truncatedResultsText": { "alias": "truncatedResultsText"; "required": false; "isSignal": true; }; "truncatedResultsAnnouncement": { "alias": "truncatedResultsAnnouncement"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseSelect<any, any>, never, never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "maxVisibleOptions": { "alias": "maxVisibleOptions"; "required": false; "isSignal": true; }; "truncatedResultsText": { "alias": "truncatedResultsText"; "required": false; "isSignal": true; }; "truncatedResultsAnnouncement": { "alias": "truncatedResultsAnnouncement"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /** Contexte typé reçu par le template d'une option (`ktSelectOption`). */
@@ -1451,7 +1467,92 @@ declare abstract 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>
+ * ```
+ */
+declare class KtChipListbox<V> implements FormValueControl<V | V[] | null> {
+    private readonly config;
+    private readonly doc;
+    /** Valeur sélectionnée (two-way) : tableau de valeurs (si multiple) ou valeur unique (si simple). */
+    readonly value: _angular_core.ModelSignal<V | V[] | null>;
+    /** État « touché » (two-way), piloté par `[formField]`. @default false */
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    /** Désactive le groupe de puces. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mode lecture seule (bloque la sélection). @default false */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marque le groupe comme invalide. @default false */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Affiche l'astérisque requis et aria-required sur le groupe. @default false */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** État « modifié » (dirty). @default false */
+    readonly dirty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Validation asynchrone en cours. @default false */
+    readonly pending: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Erreurs de validation à afficher. @default [] */
+    readonly errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
+    /** Autorise la sélection de plusieurs puces. @default false */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Identifiant du composant (sélecteurs de test stables). @default auto-généré */
+    readonly id: _angular_core.InputSignal<string | undefined>;
+    /** Libellé (légende) du groupe de puces. @default undefined */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Texte d'aide affiché sous le groupe. @default undefined */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Nom accessible (aria-label) quand label est absent. @default undefined */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
+    readonly hideErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stratégie d'affichage des erreurs. @default undefined */
+    readonly errorMatcher: _angular_core.InputSignal<KtFieldErrorMatcher | undefined>;
+    /** Afficher toutes les erreurs. @default false */
+    readonly showAllErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Fonction de comparaison de valeurs pour déterminer la sélection. */
+    readonly compareWith: _angular_core.InputSignal<((a: V, b: V) => boolean) | undefined>;
+    private readonly el;
+    private readonly errorResolver;
+    private readonly idGen;
+    private readonly uid;
+    protected readonly baseId: _angular_core.Signal<string>;
+    protected readonly labelId: _angular_core.Signal<string>;
+    protected readonly hintId: _angular_core.Signal<string>;
+    protected readonly errorId: _angular_core.Signal<string>;
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    private readonly matcher;
+    protected readonly showInvalid: _angular_core.Signal<boolean>;
+    protected readonly resolvedErrors: _angular_core.Signal<_ktortu_aaa_forms.KtFieldError[]>;
+    protected readonly displayedErrors: _angular_core.Signal<_ktortu_aaa_forms.KtFieldError[]>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    private readonly comparator;
+    constructor();
+    private query;
+    /** Détermine si une valeur d'option est sélectionnée. */
+    isSelected(optionValue: V): boolean;
+    /** Bascule la sélection d'une valeur d'option. */
+    toggle(optionValue: V): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onFocusin(event: FocusEvent): void;
+    /** Focus la première option active. */
+    focus(options?: FocusOptions): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtChipListbox<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtChipListbox<any>, "kt-chip-listbox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "showAllErrors": { "alias": "showAllErrors"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * 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).
  *
@@ -1463,6 +1564,7 @@ declare abstract class ChipTransitionScope {
  */
 declare class KtChip {
     protected readonly scope: ChipTransitionScope | null;
+    protected readonly listbox: KtChipListbox<unknown> | null;
     private readonly idGen;
     /** Nom de View Transition propre au chip (détail interne, posé en host binding). */
     protected readonly viewTransitionName: string;
@@ -1472,9 +1574,19 @@ declare class KtChip {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Libellé accessible du bouton « retirer » (inclure le nom de l'item : « Remove X »). @default 'Remove' */
     readonly removeLabel: _angular_core.InputSignal<string>;
+    /** État sélectionné unitaire (quand utilisé hors boîte de liste). @default false */
+    readonly checked: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Valeur portée par la puce (utilisée au sein d'un groupe de sélection). */
+    readonly value: _angular_core.InputSignal<unknown>;
     /** Émis au clic sur le bouton « retirer » (le parent décide de retirer le chip). */
     readonly remove: _angular_core.OutputEmitterRef<void>;
+    private readonly initialRole;
+    /** Rôle d'accessibilité calculé (préserve les rôles statiques comme listitem). */
+    protected readonly role: _angular_core.Signal<string | null>;
+    /** Signal consolidé de l'état de sélection (dérivé du parent listbox ou de l'input checked). */
+    readonly selected: _angular_core.Signal<boolean>;
     private readonly removeBtn;
+    constructor();
     /**
      * Focus programmatique du bouton « retirer ». Helper de coordination interne (focus management
      * d'`kt-chip-list`), non destiné aux consommateurs.
@@ -1482,7 +1594,7 @@ declare class KtChip {
      */
     focusRemove(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtChip, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtChip, "kt-chip", never, { "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "remove": "remove"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtChip, "kt-chip", never, { "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "remove": "remove"; }, never, ["*"], true, never>;
 }
 
 /** Contexte typé reçu par le template d'un chip custom (`ktChipItem`). */
@@ -1966,5 +2078,5 @@ declare class KtFixedClock extends KtClock {
     today(): Temporal$1.PlainDate;
 }
 
-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 };
 export type { CalendarDate, KtChipItemContext, KtChipsConfig, KtDatalistOption, KtErrorMessageFactory, KtFieldAppearance, KtFieldConfig, KtFieldError, KtFieldErrorMatcher, KtFieldErrorMessages, KtFieldErrorState, KtFieldParent, KtFloatLabel, KtKeyish, KtMultiSelectChipContext, KtMultiSelectOptionContext, KtMultiSelectSelectionChange, KtMultiSelectTriggerContext, KtPasswordAutocomplete, KtResolvableError, KtSelectConfigOptions, KtSelectOptionContext, KtSelectSelectionChange, KtSelectTriggerContext, KtSuggestion, KtTextFieldType, KtTimePrecision, LocalDateTime, Timestamp, WallTime, ZonedTimestamp };

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

@@ -0,0 +1,117 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import * as i1 from '@angular/cdk/a11y';
+
+/** Mode d'état de la navigation latérale. */
+type KtSidenavState = 'expanded' | 'rail' | 'hidden';
+declare const KT_LAYOUT_DEFAULT_STATE: InjectionToken<KtSidenavState>;
+/**
+ * Service global de gestion de la mise en page (Layout).
+ * Gère l'état d'ouverture/fermeture de la barre latérale sur mobile et bureau,
+ * ainsi que le comportement spécifique de "rail" sur bureau.
+ *
+ * NOTE: Ce service n'est pas "providedIn: 'root'". Le développeur doit le fournir
+ * (via le tableau providers d'un composant parent ou de l'application) pour
+ * maîtriser le scope (ex: avoir plusieurs layouts indépendants).
+ */
+declare class KtLayoutService {
+    private readonly viewport;
+    private readonly defaultState;
+    /**
+     * Comportement actif lors de la fermeture sur ordinateur (écran non mobile).
+     * Renseigné généralement par le composant racine `KtLayoutComponent`.
+     */
+    readonly desktopCloseBehavior: _angular_core.WritableSignal<"rail" | "hidden">;
+    private readonly _isDesktopOpen;
+    private readonly _isMobileOpen;
+    readonly isMobile: _angular_core.Signal<boolean>;
+    readonly isRail: _angular_core.Signal<boolean>;
+    readonly isExpanded: _angular_core.Signal<boolean>;
+    readonly isHidden: _angular_core.Signal<boolean>;
+    readonly isMobileOpen: _angular_core.Signal<boolean>;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtLayoutService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<KtLayoutService>;
+}
+
+/**
+ * Composant racine de l'application qui gère la structure de base (Sidebar, Toolbar, Contenu).
+ * Configure dynamiquement le comportement du layout.
+ */
+declare class KtLayoutComponent {
+    /**
+     * Définit le comportement de la navigation latérale lors de sa fermeture sur bureau (écran large).
+     * - `'hidden'` (défaut) : le menu est complètement masqué et retiré du flux visuel/a11y.
+     * - `'rail'` : le menu est réduit à une fine barre verticale (mini-sidebar), permettant
+     *              d'afficher uniquement les icônes. Idéal si les liens possèdent des icônes explicites.
+     */
+    readonly desktopCloseBehavior: _angular_core.InputSignal<"rail" | "hidden">;
+    protected readonly layout: KtLayoutService;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtLayoutComponent, "kt-layout", never, { "desktopCloseBehavior": { "alias": "desktopCloseBehavior"; "required": false; "isSignal": true; }; }, {}, never, ["kt-sidenav", "kt-toolbar", "*"], true, never>;
+}
+
+/**
+ * Composant représentant le panneau latéral de navigation.
+ * Se comporte comme un tiroir (drawer) superposé sur mobile, et comme un
+ * menu latéral persistant (réductible ou masquable) sur ordinateur.
+ */
+declare class KtSidenavComponent {
+    protected readonly layout: KtLayoutService;
+    protected readonly isHidden: _angular_core.Signal<boolean>;
+    private readonly trapFocus;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtSidenavComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtSidenavComponent, "kt-sidenav", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkTrapFocus; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * Barre d'outils supérieure (Toolbar / Top app bar).
+ * Se place généralement dans un `kt-layout`.
+ */
+declare class KtToolbarComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtToolbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtToolbarComponent, "kt-toolbar", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class KtNavItemComponent {
+    label: _angular_core.InputSignal<string>;
+    protected readonly layout: KtLayoutService;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtNavItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtNavItemComponent, "kt-nav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["[kt-icon]", "*"], true, never>;
+}
+
+/**
+ * Directive applicable sur n'importe quel élément (souvent un bouton) pour basculer
+ * l'état d'ouverture du panneau latéral (Sidenav).
+ *
+ * Expose l'état du layout pour des utilisations dynamiques dans le template
+ * (ex: changer l'icône selon l'état).
+ *
+ * @example
+ * ```html
+ * <button ktSidenavToggle #btn="ktSidenavToggle" [icon]="btn.isRail() ? 'right' : 'left'">
+ * ```
+ */
+declare class KtSidenavToggleDirective {
+    private readonly layout;
+    /** Indique si le menu est actuellement réduit en mode rail. */
+    readonly isRail: _angular_core.Signal<boolean>;
+    /** Indique si le menu est actuellement complètement étendu sur bureau. */
+    readonly isExpanded: _angular_core.Signal<boolean>;
+    /** Indique si le menu est totalement masqué. */
+    readonly isHidden: _angular_core.Signal<boolean>;
+    /** Indique si le tiroir est actuellement ouvert par-dessus le contenu (mobile). */
+    readonly isMobileOpen: _angular_core.Signal<boolean>;
+    /** Indique si l'écran actuel est de taille compacte (mobile). */
+    readonly isMobile: _angular_core.Signal<boolean>;
+    onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtSidenavToggleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtSidenavToggleDirective, "[ktSidenavToggle]", ["ktSidenavToggle"], {}, {}, never, never, true, never>;
+}
+
+export { KT_LAYOUT_DEFAULT_STATE, KtLayoutComponent, KtLayoutService, KtNavItemComponent, KtSidenavComponent, KtSidenavToggleDirective, KtToolbarComponent };
+export type { KtSidenavState };

package/types/ktortu-aaa.d.ts

@@ -10,3 +10,4 @@ export * from '@ktortu/aaa/snackbar';
 export * from '@ktortu/aaa/tabs';
 export * from '@ktortu/aaa/tooltip';
 export * from '@ktortu/aaa/progress-bar';
+export * from '@ktortu/aaa/layout';