@ktortu/aaa 0.9.4 → 0.9.5

package/forms/chips/chip-listbox.css

@@ -0,0 +1,41 @@
+@layer kt-aaa.components {
+  .kt-chip-listbox-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .kt-chip-listbox__legend {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--field-label-color, currentColor);
+  }
+
+  .kt-chip-listbox__required {
+    color: var(--kt-danger);
+    margin-inline-start: 0.125rem;
+  }
+
+  .kt-chip-listbox__options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    outline: none;
+  }
+
+  .kt-chip-listbox__hint {
+    font-size: 0.75rem;
+    color: var(--field-hint-color);
+    margin: 0;
+  }
+
+  .kt-chip-listbox__error {
+    font-size: 0.75rem;
+    color: var(--field-error-color);
+    min-block-size: 1.25rem;
+  }
+
+  .kt-chip-listbox__error-message {
+    display: block;
+  }
+}

package/forms/chips/chip.css

@@ -89,4 +89,51 @@
       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: 0.125rem;
+  }
+
+  /* --- Styles pour les puces sélectionnables (role="option") --- */
+  :host([role='option']) {
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease,
+      box-shadow 0.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: 0.5;
+  }
 }

package/forms/chips/tokens.css

@@ -14,6 +14,11 @@
     --chip-bg-hover: color-mix(in srgb, var(--kt-primary) 18%, transparent);
     --chip-border: color-mix(in srgb, var(--kt-primary) 20%, transparent);
 
+    /* État sélectionné */
+    --chip-selected-bg: color-mix(in srgb, var(--kt-primary) 15%, transparent);
+    --chip-selected-border: var(--kt-primary);
+    --chip-selected-color: var(--kt-primary);
+
     /* Texte et icônes */
     --chip-color: var(--field-color);
     --chip-remove-color: var(--field-icon-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktortu/aaa",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "Bibliothèque de composants Angular headless + thémés par tokens CSS.",
   "keywords": [
     "angular",

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

@@ -370,6 +370,17 @@ declare class KtDialogContainer extends CdkDialogContainer {
     static ɵcmp: i0.ɵɵComponentDeclaration<KtDialogContainer, "kt-dialog-container", never, {}, {}, never, never, true, never>;
 }
 
+/** Option de variante visuelle pour le dialogue d'alerte. */
+type KtAlertDialogVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+/**
+ * Options pour l'ouverture d'une boîte de dialogue d'alerte.
+ */
+interface KtAlertOptions {
+    /** Libellé du bouton de fermeture. Par défaut: 'Fermer'. */
+    closeLabel?: string;
+    /** Variante sémantique (apparence : icône + accent). Par défaut: 'neutral'. */
+    variant?: KtAlertDialogVariant;
+}
 /**
  * Configuration pour l'ouverture d'une boîte de dialogue d'alerte simple.
  */
@@ -384,6 +395,8 @@ interface KtAlertData {
     message: string | string[];
     /** Libellé du bouton de fermeture. Par défaut: 'Fermer'. */
     closeLabel?: string;
+    /** Variante sémantique (apparence : icône + accent). Par défaut: 'neutral'. */
+    variant?: KtAlertDialogVariant;
 }
 /**
  * Composant interne d'alerte générique.
@@ -474,6 +487,15 @@ declare class KtQuickDialog {
      * @returns La référence DialogRef de la modale ouverte.
      */
     alert(title: string, message: string | string[], closeLabel?: string): DialogRef<void, KtAlertDialog>;
+    /**
+     * Ouvre une boîte de dialogue d'alerte simple.
+     *
+     * @param title Titre de l'alerte.
+     * @param message Message d'explication (string simple ou tableau de strings pour du multi-lignes HTML).
+     * @param options Options d'ouverture de l'alerte (libellé de fermeture, variante).
+     * @returns La référence DialogRef de la modale ouverte.
+     */
+    alert(title: string, message: string | string[], options?: KtAlertOptions): DialogRef<void, KtAlertDialog>;
     /**
      * Ouvre une boîte de dialogue de confirmation binaire (Oui/Non).
      *
@@ -500,4 +522,4 @@ declare class KtQuickDialog {
 declare const KtDialogImports: readonly [typeof KtDialogHeader, typeof KtDialogTitle, typeof KtDialogDescription, typeof KtDialogContent, typeof KtDialogActions, typeof KtDialogClose, typeof KtDialogFocusInitial, typeof KtDialogSheetHandle];
 
 export { KT_DIALOG_AAA_DEFAULTS, KtAlertDialog, KtConfirmDialog, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, KtQuickDialog, defineKtDialog, injectAlertDialog, injectConfirmDialog, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
-export type { KtAlertData, KtConfirmConfig, KtConfirmResult, KtDecideConfig, KtDialogColor, KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };
+export type { KtAlertData, KtAlertDialogVariant, KtAlertOptions, KtConfirmConfig, KtConfirmResult, KtDecideConfig, KtDialogColor, KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };

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

@@ -1451,7 +1451,88 @@ 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>;
+    /** 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; }; "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 +1544,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 +1554,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 +1574,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 +2058,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 };