@kksdev/ds-angular 1.6.0 → 1.7.0

package/index.d.ts

@@ -3,11 +3,12 @@ import { AfterViewInit, OnDestroy, ElementRef, QueryList, AfterContentInit, Even
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IconDefinition as IconDefinition$1 } from '@fortawesome/free-solid-svg-icons';
 import { ControlValueAccessor } from '@angular/forms';
-import * as _angular_cdk_overlay from '@angular/cdk/overlay';
-import { Overlay, ConnectedPosition } from '@angular/cdk/overlay';
 import { IconDefinition as IconDefinition$2, FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import * as _angular_cdk_overlay from '@angular/cdk/overlay';
+import { ConnectedPosition, Overlay } from '@angular/cdk/overlay';
 import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 import * as _kksdev_ds_angular from '@kksdev/ds-angular';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { ArgTypes, Args } from '@storybook/angular';
 
 type BadgeType = 'status' | 'count' | 'label';
@@ -2487,6 +2488,8 @@ interface DropdownItemDTO {
     endIcon: string;
 }
 
+/** Direction d'ouverture du dropdown */
+type DropdownPosition = 'bottom' | 'top' | 'right';
 declare class DsDropdown implements ControlValueAccessor, AfterViewInit, OnDestroy {
     /** Identifiant du menu déroulant pour l'accessibilité. */
     readonly id: _angular_core.InputSignal<string>;
@@ -2520,6 +2523,8 @@ declare class DsDropdown implements ControlValueAccessor, AfterViewInit, OnDestr
     readonly closeOnSelect: _angular_core.InputSignal<boolean>;
     /** Classes CSS supplémentaires appliquées au panneau. */
     readonly overlayPanelClass: _angular_core.InputSignal<string | string[] | undefined>;
+    /** Direction d'ouverture du menu (bottom, top, right). */
+    readonly position: _angular_core.InputSignal<DropdownPosition>;
     /** Émis lorsqu'un élément est sélectionné. */
     readonly selectedItemChanged: _angular_core.OutputEmitterRef<string>;
     /** Émis lors de l'ouverture du menu. */
@@ -2536,7 +2541,8 @@ declare class DsDropdown implements ControlValueAccessor, AfterViewInit, OnDestr
     private onTouched;
     private menuItemsChanges?;
     constructor();
-    readonly overlayPositions: _angular_cdk_overlay.ConnectedPosition[];
+    /** Positions de l'overlay selon la prop position */
+    readonly overlayPositions: _angular_core.Signal<ConnectedPosition[]>;
     readonly isMenuOpen: _angular_core.Signal<boolean>;
     readonly buttonType: _angular_core.Signal<ButtonType>;
     readonly isDisabled: _angular_core.Signal<boolean>;
@@ -2570,7 +2576,7 @@ declare class DsDropdown implements ControlValueAccessor, AfterViewInit, OnDestr
     private focusTriggerButton;
     private getMenuItemElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsDropdown, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsDropdown, "ds-dropdown", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "submit": { "alias": "submit"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "dropdownStartIcon": { "alias": "dropdownStartIcon"; "required": false; "isSignal": true; }; "dropdownEndIcon": { "alias": "dropdownEndIcon"; "required": false; "isSignal": true; }; "dropdownItems": { "alias": "dropdownItems"; "required": false; "isSignal": true; }; "selectedItem": { "alias": "selectedItem"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; }, { "selectedItemChanged": "selectedItemChanged"; "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsDropdown, "ds-dropdown", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "submit": { "alias": "submit"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "dropdownStartIcon": { "alias": "dropdownStartIcon"; "required": false; "isSignal": true; }; "dropdownEndIcon": { "alias": "dropdownEndIcon"; "required": false; "isSignal": true; }; "dropdownItems": { "alias": "dropdownItems"; "required": false; "isSignal": true; }; "selectedItem": { "alias": "selectedItem"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "selectedItemChanged": "selectedItemChanged"; "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
 }
 
 declare class DsInputField implements ControlValueAccessor {
@@ -2627,41 +2633,138 @@ declare class DsInputField implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsInputField, "ds-input-field", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "iconStart": { "alias": "iconStart"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; "externalValue": { "alias": "externalValue"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "togglePassword": { "alias": "togglePassword"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Composant textarea multiligne pour le Design System.
+ *
+ * Wrapper autour de `PrimitiveTextarea` avec support complet des formulaires Angular
+ * via `ControlValueAccessor`. Inclut label, helper text, validation, compteur de caractères,
+ * auto-resize et bouton d'effacement.
+ *
+ * @example
+ * ```html
+ * <!-- Usage simple -->
+ * <ds-input-textarea
+ *   label="Description"
+ *   placeholder="Entrez votre description..."
+ *   [rows]="4">
+ * </ds-input-textarea>
+ *
+ * <!-- Avec formulaire réactif -->
+ * <ds-input-textarea
+ *   formControlName="description"
+ *   label="Description"
+ *   [maxlength]="500"
+ *   [clearable]="true">
+ * </ds-input-textarea>
+ * ```
+ *
+ * @usageNotes
+ * ### Accessibilité
+ * - Le label est associé au textarea via `for`/`id`
+ * - Les messages d'aide/erreur sont liés via `aria-describedby`
+ * - Les erreurs sont annoncées via `role="alert"`
+ * - Navigation clavier standard
+ *
+ * ### Auto-resize
+ * Utiliser `resizeAuto` pour activer le redimensionnement automatique.
+ * La valeur définit la hauteur maximale en pixels.
+ *
+ * @selector ds-input-textarea
+ * @standalone true
+ */
 declare class DsInputTextarea implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    /** Identifiant unique du textarea. Auto-généré si non fourni. */
     id: _angular_core.InputSignal<string>;
+    /** Nom du champ pour les formulaires HTML natifs. */
     name: _angular_core.InputSignal<string | undefined>;
+    /** Label visible affiché au-dessus du textarea. */
     label: _angular_core.InputSignal<string | undefined>;
+    /** Label accessible pour les lecteurs d'écran (si pas de label visible). */
     ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Texte indicatif affiché quand le champ est vide. */
     placeholder: _angular_core.InputSignal<string>;
+    /** Désactive le champ (non modifiable, exclu de la navigation clavier). */
     disabled: _angular_core.InputSignal<boolean>;
+    /** Champ en lecture seule (visible et sélectionnable, non modifiable). */
     readonly: _angular_core.InputSignal<boolean>;
+    /** Marque le champ comme obligatoire (affiche * après le label). */
     required: _angular_core.InputSignal<boolean>;
+    /**
+     * État visuel de validation.
+     * @default 'default'
+     */
     state: _angular_core.InputSignal<TextareaState>;
+    /**
+     * Taille du composant.
+     * @default 'md'
+     */
     size: _angular_core.InputSignal<TextareaSize>;
+    /**
+     * Variante visuelle (outline ou filled).
+     * @default 'default'
+     */
     variant: _angular_core.InputSignal<TextareaAppearance>;
+    /** Nombre de lignes visibles. */
     rows: _angular_core.InputSignal<number | undefined>;
+    /** Nombre de colonnes (largeur en caractères). */
     cols: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Mode de redimensionnement manuel.
+     * Ignoré si `resizeAuto` est défini.
+     * @default 'vertical'
+     */
     resize: _angular_core.InputSignal<TextareaResize>;
+    /**
+     * Active le redimensionnement automatique.
+     * La valeur définit la hauteur maximale en pixels.
+     * Désactive le resize manuel.
+     */
     resizeAuto: _angular_core.InputSignal<number | undefined>;
+    /** Limite de caractères avec compteur affiché. */
     maxlength: _angular_core.InputSignal<number | undefined>;
+    /** Texte d'aide affiché sous le champ. */
     helper: _angular_core.InputSignal<string | undefined>;
+    /** Message d'erreur (remplace helper, force l'état 'error'). */
     error: _angular_core.InputSignal<string | undefined>;
+    /** Icône FontAwesome à gauche du textarea. */
     iconStart: _angular_core.InputSignal<IconDefinition$1 | null>;
+    /** Icône FontAwesome à droite du textarea. */
     iconEnd: _angular_core.InputSignal<IconDefinition$1 | null>;
+    /** Affiche un bouton X pour effacer le contenu. */
     clearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Valeur externe pour initialisation sans formulaire.
+     * Utile pour les stories Storybook.
+     */
     externalValue: _angular_core.InputSignal<string | null | undefined>;
+    /** État disabled géré par ControlValueAccessor. */
     private readonly disabledState;
+    /** Indique si une valeur externe a été fournie. */
     private readonly hasExternalValue;
+    /** Valeur interne du textarea. */
     readonly internalValue: _angular_core.WritableSignal<string>;
+    /**
+     * Émis à chaque changement de valeur.
+     * Payload : nouvelle valeur (string).
+     */
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /** ID de l'élément erreur pour aria-describedby. */
     readonly arErrorId: _angular_core.Signal<string | undefined>;
+    /** ID de l'élément helper pour aria-describedby. */
     readonly arHelperId: _angular_core.Signal<string | undefined>;
+    /** ID de l'élément compteur pour aria-describedby. */
     readonly arCounterId: _angular_core.Signal<string | undefined>;
+    /** Attribut aria-describedby combinant erreur, helper et compteur. */
     readonly ariaDescribedBy: _angular_core.Signal<string | undefined>;
+    /** True si le champ est désactivé (input ou CVA). */
     readonly isDisabled: _angular_core.Signal<boolean>;
+    /** État visuel effectif (error forcé si message d'erreur). */
     readonly inputState: _angular_core.Signal<TextareaState>;
+    /** True si le bouton clear doit être affiché. */
     readonly showClearButton: _angular_core.Signal<boolean>;
+    /** Mode de resize effectif (none si resizeAuto activé). */
     readonly textareaResize: _angular_core.Signal<TextareaResize>;
+    /** Nombre de caractères saisis. */
     readonly characterCount: _angular_core.Signal<number>;
     protected readonly faClose: IconDefinition$1;
     textareaHost?: ElementRef<HTMLElement>;
@@ -2729,23 +2832,129 @@ declare class DsModalComponent implements AfterContentInit, AfterViewInit, OnDes
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsModalComponent, "ds-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, ["projectedIcon"], ["[icon]", "*", "[footer]"], true, never>;
 }
 
+/**
+ * Composant popover du Design System.
+ *
+ * Affiche un contenu contextuel dans une fenêtre flottante avec header/footer optionnels.
+ * Utilisé conjointement avec la directive `dsPopover` pour le positionnement.
+ *
+ * @example
+ * ```html
+ * <ng-template #popoverContent>
+ *   <ds-popover header="Mon titre" [closeable]="true" (close)="onClose()">
+ *     <p>Contenu du popover</p>
+ *   </ds-popover>
+ * </ng-template>
+ *
+ * <button [dsPopover]="popoverContent">Ouvrir</button>
+ * ```
+ *
+ * @usageNotes
+ * ### Accessibilité
+ * - `role="dialog"` avec `aria-modal="true"` pour les lecteurs d'écran
+ * - `aria-labelledby` pointe vers le header quand présent
+ * - Bouton de fermeture avec label descriptif
+ * - Fermeture via Escape gérée par la directive
+ */
 declare class DsPopoverComponent {
+    /**
+     * Titre affiché dans le header du popover.
+     * Quand présent, active `aria-labelledby` pour l'accessibilité.
+     */
     header: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Texte affiché dans le footer du popover.
+     */
     footer: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Affiche ou masque le bouton de fermeture dans le header.
+     * @default true
+     */
     closeable: _angular_core.InputSignal<boolean>;
+    /**
+     * Label ARIA du popover (utilisé quand pas de header).
+     * @default 'Popover'
+     */
     ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * ID unique pour le popover (génération automatique si non fourni).
+     */
+    id: _angular_core.InputSignal<string>;
+    /**
+     * Émis quand l'utilisateur clique sur le bouton de fermeture.
+     */
     close: _angular_core.OutputEmitterRef<void>;
+    /**
+     * ID du header pour aria-labelledby.
+     */
+    protected readonly headerId: _angular_core.Signal<string>;
+    /**
+     * Label du bouton de fermeture (dynamique selon le header).
+     */
+    protected readonly closeButtonLabel: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsPopoverComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsPopoverComponent, "ds-popover", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsPopoverComponent, "ds-popover", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*"], true, never>;
 }
 
+/**
+ * Type de déclenchement du popover.
+ * - `click` : ouverture au clic, fermeture au second clic ou clic extérieur
+ * - `hover` : ouverture au survol, fermeture au mouseleave (avec délai de 150ms)
+ */
 type PopoverTrigger = 'click' | 'hover';
+/**
+ * Directive pour afficher un popover flottant positionné automatiquement.
+ *
+ * Utilise Angular CDK Overlay pour le positionnement intelligent
+ * et la gestion du backdrop/scroll.
+ *
+ * @example
+ * ```html
+ * <ng-template #popoverContent>
+ *   <ds-popover header="Informations">
+ *     <p>Contenu du popover</p>
+ *   </ds-popover>
+ * </ng-template>
+ *
+ * <button [dsPopover]="popoverContent">Ouvrir</button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Trigger hover -->
+ * <button [dsPopover]="content" dsPopoverTrigger="hover">Survoler</button>
+ *
+ * <!-- Sans fermeture au clic extérieur -->
+ * <button [dsPopover]="content" [dsPopoverCloseOnBackdrop]="false">Persistant</button>
+ * ```
+ *
+ * @usageNotes
+ * ### Accessibilité
+ * - Fermeture via touche Escape
+ * - Focus trap recommandé pour les popovers avec contenu interactif
+ * - Utiliser `<ds-popover>` avec header pour un aria-labelledby automatique
+ */
 declare class DsPopover implements OnDestroy {
     private elementRef;
     private overlay;
     private viewContainerRef;
+    /**
+     * Template contenant le contenu du popover.
+     * Généralement un `<ng-template>` contenant un `<ds-popover>`.
+     */
     dsPopover: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Mode de déclenchement du popover.
+     * - `click` (défaut) : clic pour ouvrir/fermer
+     * - `hover` : survol pour ouvrir, mouseleave pour fermer
+     * @default 'click'
+     */
     dsPopoverTrigger: _angular_core.InputSignal<PopoverTrigger>;
+    /**
+     * Fermer le popover lors d'un clic sur le backdrop (zone extérieure).
+     * Quand `false`, seul Escape ou un nouveau clic sur le trigger ferme le popover.
+     * @default true
+     */
     dsPopoverCloseOnBackdrop: _angular_core.InputSignal<boolean>;
     private overlayRef;
     private isOpen;
@@ -5045,6 +5254,108 @@ declare class DsDrawer implements AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsDrawer, "ds-drawer", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "maskClosable": { "alias": "maskClosable"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; "closed": "closed"; }, never, ["[drawer-header]", "*", "[drawer-footer]"], true, never>;
 }
 
+interface TimeColumn {
+    value: number;
+    label: string;
+    disabled: boolean;
+}
+declare class DsTimePickerPanelComponent implements AfterViewInit {
+    hoursColumn?: ElementRef<HTMLDivElement>;
+    minutesColumn?: ElementRef<HTMLDivElement>;
+    secondsColumn?: ElementRef<HTMLDivElement>;
+    panelId: string;
+    readonly activeColumn: _angular_core.WritableSignal<"period" | "hours" | "minutes" | "seconds">;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly format: _angular_core.InputSignal<"12h" | "24h">;
+    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    readonly minuteStep: _angular_core.InputSignal<number>;
+    readonly hourStep: _angular_core.InputSignal<number>;
+    set minTime(value: string | null);
+    get minTime(): string | null;
+    set maxTime(value: string | null);
+    get maxTime(): string | null;
+    private readonly _minTime;
+    private readonly _maxTime;
+    private readonly parsedMinTime;
+    private readonly parsedMaxTime;
+    readonly timeSelected: _angular_core.OutputEmitterRef<string>;
+    readonly cancelled: _angular_core.OutputEmitterRef<void>;
+    readonly selectedHours: _angular_core.WritableSignal<number>;
+    readonly selectedMinutes: _angular_core.WritableSignal<number>;
+    readonly selectedSeconds: _angular_core.WritableSignal<number>;
+    readonly selectedPeriod: _angular_core.WritableSignal<"AM" | "PM">;
+    readonly hoursOptions: _angular_core.Signal<TimeColumn[]>;
+    readonly minutesOptions: _angular_core.Signal<TimeColumn[]>;
+    readonly secondsOptions: _angular_core.Signal<TimeColumn[]>;
+    private initialized;
+    constructor();
+    ngAfterViewInit(): void;
+    selectHours(hours: number): void;
+    selectMinutes(minutes: number): void;
+    selectSeconds(seconds: number): void;
+    selectPeriod(period: 'AM' | 'PM'): void;
+    /** Confirme la sélection et émet la valeur */
+    confirm(): void;
+    /** Annule la sélection */
+    cancel(): void;
+    onScroll(column: 'hours' | 'minutes' | 'seconds', event: Event): void;
+    /**
+     * Set the active column for keyboard navigation
+     */
+    setActiveColumn(column: 'hours' | 'minutes' | 'seconds' | 'period'): void;
+    /**
+     * Get the ID of the currently active option in a column
+     */
+    getActiveOptionId(column: 'hours' | 'minutes' | 'seconds' | 'period'): string;
+    /**
+     * Navigate options with arrow keys
+     */
+    navigateOption(column: 'hours' | 'minutes' | 'seconds' | 'period', direction: 1 | -1): void;
+    /**
+     * Handle global panel keyboard events
+     */
+    onPanelKeydown(event: KeyboardEvent): void;
+    /**
+     * Focus the hours column (called from parent on panel open)
+     */
+    focusFirstColumn(): void;
+    /**
+     * Find the next enabled option index in a direction
+     */
+    private findNextEnabledIndex;
+    /**
+     * Scroll an option into view in its column
+     */
+    private scrollOptionIntoView;
+    private parseAndSetValue;
+    private emitCurrentTime;
+    /**
+     * Parse a time constraint string (HH:mm or HH:mm:ss) into components
+     */
+    private parseTimeConstraint;
+    /**
+     * Convert 12h hour to 24h for comparison
+     */
+    private to24Hour;
+    /**
+     * Check if an hour is disabled based on minTime/maxTime constraints
+     */
+    private isHourDisabled;
+    /**
+     * Check if a minute is disabled based on minTime/maxTime and selected hour
+     */
+    private isMinuteDisabled;
+    /**
+     * Convert a 12h hour value to 24h based on current period selection
+     * Used for constraint comparison when in 12h format
+     */
+    private convert12hTo24h;
+    private scrollToSelected;
+    private scrollColumnToValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsTimePickerPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTimePickerPanelComponent, "ds-time-picker-panel", never, { "panelId": { "alias": "panelId"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; }; "maxTime": { "alias": "maxTime"; "required": false; }; }, { "timeSelected": "timeSelected"; "cancelled": "cancelled"; }, never, never, true, never>;
+}
+
 type TimePickerSize = 'sm' | 'md' | 'lg';
 type TimeFormat = '12h' | '24h';
 interface TimeValue {
@@ -5069,7 +5380,8 @@ interface TimeValue {
  * ```
  */
 declare class DsTimePicker implements ControlValueAccessor {
-    private overlay;
+    inputElementRef?: ElementRef<HTMLElement>;
+    panelComponent?: DsTimePickerPanelComponent;
     readonly value: _angular_core.InputSignal<string>;
     readonly format: _angular_core.InputSignal<TimeFormat>;
     readonly showSeconds: _angular_core.InputSignal<boolean>;
@@ -5083,18 +5395,18 @@ declare class DsTimePicker implements ControlValueAccessor {
     readonly maxTime: _angular_core.InputSignal<string | null>;
     readonly timeChange: _angular_core.OutputEmitterRef<string>;
     readonly clockIcon: _fortawesome_fontawesome_common_types.IconDefinition;
-    readonly upIcon: _fortawesome_fontawesome_common_types.IconDefinition;
-    readonly downIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly overlayPositions: ConnectedPosition[];
+    readonly panelId: string;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly internalValue: _angular_core.WritableSignal<string>;
     readonly isFocused: _angular_core.WritableSignal<boolean>;
-    private overlayRef;
     readonly containerClasses: _angular_core.Signal<string>;
     readonly displayValue: _angular_core.Signal<string>;
     readonly isDisabled: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
-    constructor(overlay: Overlay);
+    private hasExternalValue;
+    constructor();
     writeValue(value: string): void;
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -5105,9 +5417,10 @@ declare class DsTimePicker implements ControlValueAccessor {
     onFocus(): void;
     onBlur(): void;
     onTimeSelected(timeString: string): void;
+    onBackdropClick(): void;
+    onCancelled(): void;
+    onOverlayKeydown(event: KeyboardEvent): void;
     private updateValue;
-    private createOverlay;
-    private destroyOverlay;
     private parseTime;
     private formatTimeForDisplay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsTimePicker, never>;
@@ -5429,8 +5742,8 @@ declare class DsTimeline {
     /**
      * Icônes par défaut.
      */
-    protected readonly defaultIcon: IconDefinition$1;
-    protected readonly pendingIcon: IconDefinition$1;
+    readonly defaultIcon: IconDefinition$1;
+    readonly pendingIcon: IconDefinition$1;
     /**
      * Items triés (reverse si demandé).
      */
@@ -6075,6 +6388,7 @@ declare class DsColorPicker implements ControlValueAccessor {
     readonly internalValue: _angular_core.WritableSignal<string>;
     readonly isFocused: _angular_core.WritableSignal<boolean>;
     readonly recentColors: _angular_core.WritableSignal<string[]>;
+    readonly uniqueId: string;
     private overlayRef;
     readonly containerClasses: _angular_core.Signal<string>;
     readonly displayValue: _angular_core.Signal<string>;
@@ -6092,6 +6406,14 @@ declare class DsColorPicker implements ControlValueAccessor {
     close(): void;
     onFocus(): void;
     onBlur(): void;
+    /**
+     * Handle keyboard events on the trigger container
+     */
+    onTriggerKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handle keyboard events on the input field
+     */
+    onInputKeyDown(event: KeyboardEvent): void;
     clear(): void;
     onColorSelected(color: string): void;
     private updateValue;
@@ -6111,109 +6433,1248 @@ declare class DsColorPicker implements ControlValueAccessor {
 }
 
 /**
- * Positions standard pour dropdowns (menus déroulants, select, etc.)
- *
- * Stratégie :
- * 1. Position préférée : centré en dessous (offsetY: 6px pour espacement)
- * 2. Fallback : centré au-dessus si pas d'espace en bas
- * 3. Fallback : aligné à gauche en dessous
- * 4. Fallback : aligné à droite en dessous
+ * Mode d'affichage de la sidebar.
+ * - `full` : largeur complète avec labels
+ * - `collapsed` : icônes seulement avec tooltips
+ * - `overlay` : panneau glissant avec backdrop (mobile)
  */
-declare const DROPDOWN_POSITIONS: ConnectedPosition[];
+type SidebarMode = 'full' | 'collapsed' | 'overlay';
 /**
- * Positions standard pour tooltips (infobulles)
- *
- * Stratégie :
- * 1. Position préférée : centré au-dessus (offsetY: -8px pour espacement)
- * 2. Fallback : centré en dessous si pas d'espace au-dessus
- * 3. Fallback : à droite (aligné verticalement au centre)
- * 4. Fallback : à gauche (aligné verticalement au centre)
+ * Taille de la sidebar (largeur).
+ * - `sm` : 200px
+ * - `md` : 240px
+ * - `lg` : 280px
  */
-declare const TOOLTIP_POSITIONS: ConnectedPosition[];
+type SidebarSize = 'sm' | 'md' | 'lg';
 /**
- * Positions standard pour popovers (menus contextuels, actions panels)
- *
- * Stratégie :
- * 1. Position préférée : aligné à droite, en dessous (offsetY: 4px)
- * 2. Fallback : aligné à gauche, en dessous
- * 3. Fallback : aligné à droite, au-dessus
- * 4. Fallback : aligné à gauche, au-dessus
- * 5. Fallback : à droite (aligné en haut)
- * 6. Fallback : à gauche (aligné en haut)
+ * Position de la sidebar.
  */
-declare const POPOVER_POSITIONS: ConnectedPosition[];
+type SidebarPosition = 'left' | 'right';
 /**
- * Positions pour autocomplete (panel de suggestions sous un input)
- *
- * Stratégie :
- * 1. Position préférée : aligné à gauche, pleine largeur, en dessous
- * 2. Fallback : aligné à gauche, pleine largeur, au-dessus
+ * Variante de couleur pour les badges.
  */
-declare const AUTOCOMPLETE_POSITIONS: ConnectedPosition[];
-
-declare const BUTTON_VARIANT_OPTIONS: readonly ["primary", "secondary", "ghost", "success", "warning", "error", "info"];
-declare const BUTTON_APPEARANCE_OPTIONS: readonly ["solid", "outline"];
-declare const BUTTON_SIZE_OPTIONS: readonly ["sm", "md", "lg"];
-interface ArgTypeOptions {
-    includeLoading?: boolean;
-    includeBlock?: boolean;
-    variantDescription?: string;
-    appearanceDescription?: string;
-    sizeDescription?: string;
-    disabledDescription?: string;
-    loadingDescription?: string;
-    blockDescription?: string;
+type SidebarBadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * Item de navigation dans la sidebar.
+ */
+interface SidebarItem {
+    /** Identifiant unique de l'item */
+    id: string | number;
+    /** Label affiché */
+    label: string;
+    /** Icône FontAwesome */
+    icon?: IconDefinition;
+    /** Route Angular (routerLink) */
+    routerLink?: string | string[];
+    /** Options pour routerLinkActive */
+    routerLinkActiveOptions?: {
+        exact: boolean;
+    };
+    /** Lien href classique */
+    href?: string;
+    /** Ouvre dans un nouvel onglet (pour href) */
+    external?: boolean;
+    /** Items enfants (sous-menu) */
+    children?: SidebarItem[];
+    /** Item désactivé */
+    disabled?: boolean;
+    /** État initial d'expansion (pour items avec children) */
+    expanded?: boolean;
+    /** Badge/compteur affiché */
+    badge?: string | number;
+    /** Variante de couleur du badge */
+    badgeVariant?: SidebarBadgeVariant;
+    /** Affiche un séparateur après cet item */
+    dividerAfter?: boolean;
+    /** Données personnalisées attachées à l'item */
+    data?: unknown;
 }
-declare const buildButtonArgTypes: ({ includeLoading, includeBlock, variantDescription, appearanceDescription, sizeDescription, disabledDescription, loadingDescription, blockDescription, }?: ArgTypeOptions) => ArgTypes<Args>;
-interface ArgOptions {
-    includeLoading?: boolean;
-    includeBlock?: boolean;
+/**
+ * Événement émis lors du clic sur un item.
+ */
+interface SidebarItemClickEvent {
+    /** Item cliqué */
+    item: SidebarItem;
+    /** Événement souris original */
+    event: MouseEvent;
 }
-declare const buildButtonArgs: ({ includeLoading, includeBlock }?: ArgOptions) => {
-    block?: boolean | undefined;
-    loading?: boolean | undefined;
-    variant: ButtonVariant;
-    appearance: ButtonAppearance;
-    size: ButtonSize;
-    disabled: boolean;
-};
-interface ButtonBindings {
-    variant: string;
-    appearance?: string;
-    size: string;
-    disabled?: string;
-    loading?: string;
-    block?: string;
+/**
+ * Événement émis lors de l'expansion/collapse d'un item.
+ */
+interface SidebarItemExpandEvent {
+    /** Item concerné */
+    item: SidebarItem;
+    /** Nouvel état d'expansion */
+    expanded: boolean;
+}
+/**
+ * Item aplati pour la navigation clavier.
+ */
+interface FlattenedSidebarItem {
+    /** Item original */
+    item: SidebarItem;
+    /** Niveau d'imbrication (0 = racine) */
+    level: number;
+    /** Index dans la liste aplatie */
+    flatIndex: number;
+    /** ID du parent (null si racine) */
+    parentId: string | number | null;
 }
-declare const createVariantRender: (tagName: string, bindings: ButtonBindings, extraAttributes?: string) => (args: Args) => {
-    props: {
-        variants: readonly ["primary", "secondary", "ghost", "success", "warning", "error", "info"];
-    };
-    template: string;
-};
-declare const createSizeRender: (tagName: string, bindings: ButtonBindings, extraAttributes?: string) => (args: Args) => {
-    props: {
-        sizes: readonly ["sm", "md", "lg"];
-    };
-    template: string;
-};
 
 /**
- * Service centralisé pour l'enregistrement des icônes FontAwesome.
+ * Composant récursif pour afficher un item de sidebar.
+ * Gère l'affichage, l'expansion des enfants et la navigation.
  *
- * @description
- * Permet d'enregistrer des icônes de manière lazy et centralisée, évitant
- * d'importer toutes les icônes FontAwesome dans chaque composant. Les composants
- * peuvent utiliser les icônes enregistrées via leur nom plutôt que via l'objet complet.
+ * @internal Utilisé par DsSidebar
+ */
+declare class DsSidebarItemComponent {
+    readonly item: _angular_core.InputSignal<SidebarItem>;
+    readonly level: _angular_core.InputSignal<number>;
+    readonly mode: _angular_core.InputSignal<SidebarMode>;
+    readonly showTooltip: _angular_core.InputSignal<boolean>;
+    readonly expandedItemIds: _angular_core.InputSignal<Set<string | number>>;
+    readonly activeItemId: _angular_core.InputSignal<string | number | null>;
+    readonly itemClick: _angular_core.OutputEmitterRef<SidebarItemClickEvent>;
+    readonly itemToggle: _angular_core.OutputEmitterRef<SidebarItem>;
+    readonly itemKeydown: _angular_core.OutputEmitterRef<KeyboardEvent>;
+    readonly chevronRightIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly chevronDownIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly externalLinkIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    private readonly elementRef;
+    private readonly router;
+    readonly hasChildren: _angular_core.Signal<boolean>;
+    readonly isExpanded: _angular_core.Signal<boolean>;
+    readonly isActive: _angular_core.Signal<boolean>;
+    readonly indentPadding: _angular_core.Signal<number>;
+    /**
+     * Gère le clic sur l'item.
+     */
+    handleClick(event: MouseEvent): void;
+    /**
+     * Gère le clic sur le bouton toggle (chevron).
+     */
+    handleToggleClick(event: MouseEvent): void;
+    /**
+     * Gère le clic sur un lien (routerLink ou href).
+     */
+    handleLinkClick(event: MouseEvent): void;
+    /**
+     * Gère les événements clavier.
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Donne le focus à cet élément.
+     */
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsSidebarItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsSidebarItemComponent, "ds-sidebar-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "expandedItemIds": { "alias": "expandedItemIds"; "required": false; "isSignal": true; }; "activeItemId": { "alias": "activeItemId"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemToggle": "itemToggle"; "itemKeydown": "itemKeydown"; }, never, never, true, never>;
+}
+
+/**
+ * # DsSidebar
  *
- * @example
- * ```typescript
- * // Dans app.config.ts ou main.ts
- * import { IconRegistryService } from 'ds-angular';
- * import { faCheck, faTimes, faExclamation } from '@fortawesome/free-solid-svg-icons';
+ * Composant de navigation verticale avec support multi-niveaux,
+ * modes responsive et intégration Router Angular.
  *
- * const iconRegistry = inject(IconRegistryService);
- * iconRegistry.registerIcons([faCheck, faTimes, faExclamation]);
+ * ## Modes
+ * - `full` : Largeur complète avec labels visibles
+ * - `collapsed` : Icônes uniquement avec tooltips
+ * - `overlay` : Panneau glissant avec backdrop (mobile)
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-sidebar
+ *   [items]="menuItems"
+ *   [mode]="sidebarMode"
+ *   [size]="'md'"
+ *   [collapsible]="true"
+ *   (itemClick)="onItemClick($event)"
+ *   (modeChange)="onModeChange($event)">
+ *
+ *   <ng-container sidebar-header>
+ *     <img src="logo.svg" alt="Logo" />
+ *   </ng-container>
+ *
+ *   <ng-container sidebar-footer>
+ *     <button>Déconnexion</button>
+ *   </ng-container>
+ * </ds-sidebar>
+ * ```
+ *
+ * ## Accessibilité
+ * - Navigation clavier complète (Arrow, Home, End, Enter, Escape)
+ * - Focus trap en mode overlay
+ * - Attributs ARIA complets
+ *
+ * @component
+ */
+declare class DsSidebar implements OnInit, AfterViewInit, OnDestroy {
+    /** Liste des items de navigation */
+    readonly items: _angular_core.InputSignal<SidebarItem[]>;
+    /** Mode d'affichage */
+    readonly mode: _angular_core.InputSignal<SidebarMode>;
+    /** Taille (largeur) */
+    readonly size: _angular_core.InputSignal<SidebarSize>;
+    /** Position */
+    readonly position: _angular_core.InputSignal<SidebarPosition>;
+    /** Permet le toggle entre full et collapsed */
+    readonly collapsible: _angular_core.InputSignal<boolean>;
+    /** Label ARIA pour l'accessibilité */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Breakpoint pour le mode responsive (px) */
+    readonly responsiveBreakpoint: _angular_core.InputSignal<number>;
+    /** Active le switch automatique vers overlay sur mobile */
+    readonly autoCollapseOnMobile: _angular_core.InputSignal<boolean>;
+    /** Affiche les tooltips en mode collapsed (désactivable) */
+    readonly showTooltips: _angular_core.InputSignal<boolean>;
+    /** ID de l'item actif (contrôlé depuis l'extérieur) */
+    readonly initialActiveItemId: _angular_core.InputSignal<string | number | null>;
+    /** Émis lors du clic sur un item */
+    readonly itemClick: _angular_core.OutputEmitterRef<SidebarItemClickEvent>;
+    /** Émis lors de l'expansion/collapse d'un item */
+    readonly itemExpand: _angular_core.OutputEmitterRef<SidebarItemExpandEvent>;
+    /** Émis lors du changement de mode */
+    readonly modeChange: _angular_core.OutputEmitterRef<SidebarMode>;
+    /** Émis à l'ouverture de l'overlay */
+    readonly overlayOpened: _angular_core.OutputEmitterRef<void>;
+    /** Émis à la fermeture de l'overlay */
+    readonly overlayClosed: _angular_core.OutputEmitterRef<void>;
+    sidebarContainer?: ElementRef<HTMLElement>;
+    itemComponents?: QueryList<DsSidebarItemComponent>;
+    /** Mode interne (peut différer du mode input en responsive) */
+    protected readonly internalMode: _angular_core.WritableSignal<SidebarMode>;
+    /** IDs des items expandés */
+    readonly expandedItemIds: _angular_core.WritableSignal<Set<string | number>>;
+    /** ID de l'item actif */
+    readonly activeItemId: _angular_core.WritableSignal<string | number | null>;
+    /** Index de l'item focusé (pour navigation clavier) */
+    private readonly focusedIndex;
+    /** État d'ouverture de l'overlay */
+    readonly isOverlayOpen: _angular_core.WritableSignal<boolean>;
+    /** Indique si la vue est prête */
+    private viewReady;
+    /** Indique si l'état expanded a été initialisé */
+    private expandedStateInitialized;
+    readonly menuIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly collapseIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly expandIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    private focusTrap;
+    private mediaQueryListener;
+    private readonly documentRef;
+    private readonly focusTrapFactory;
+    /** Classes CSS du conteneur */
+    readonly containerClasses: _angular_core.Signal<string>;
+    /** Liste aplatie des items pour navigation clavier */
+    readonly flattenedItems: _angular_core.Signal<FlattenedSidebarItem[]>;
+    /** Nombre total d'items visibles */
+    readonly visibleItemCount: _angular_core.Signal<number>;
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Bascule entre les modes full et collapsed.
+     */
+    toggleMode(): void;
+    /**
+     * Ouvre l'overlay (mode overlay uniquement).
+     */
+    openOverlay(): void;
+    /**
+     * Ferme l'overlay.
+     */
+    closeOverlay(): void;
+    /**
+     * Définit l'item actif par son ID.
+     */
+    setActiveItem(itemId: string | number): void;
+    /**
+     * Expand ou collapse un item.
+     */
+    toggleExpand(item: SidebarItem): void;
+    /**
+     * Expand tous les items avec enfants.
+     */
+    expandAll(): void;
+    /**
+     * Collapse tous les items.
+     */
+    collapseAll(): void;
+    /**
+     * Gère le clic sur un item.
+     */
+    handleItemClick(event: SidebarItemClickEvent): void;
+    /**
+     * Gère le toggle d'un item (expand/collapse).
+     */
+    handleItemToggle(item: SidebarItem): void;
+    /**
+     * Gère le clic sur le backdrop.
+     */
+    handleBackdropClick(): void;
+    /**
+     * Gère la navigation clavier globale.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Gère les événements clavier d'un item enfant.
+     */
+    handleItemKeydown(event: KeyboardEvent): void;
+    /**
+     * Initialise l'état expanded depuis les items.
+     */
+    private initializeExpandedState;
+    /**
+     * Expand les parents d'un item.
+     */
+    private expandParentsOfItem;
+    /**
+     * Déplace le focus vers l'item suivant/précédent.
+     */
+    private moveFocus;
+    /**
+     * Expand l'item focusé s'il a des enfants.
+     */
+    private expandFocusedItem;
+    /**
+     * Collapse l'item focusé ou remonte au parent.
+     */
+    private collapseOrMoveFocus;
+    /**
+     * Active (clic) l'item focusé.
+     */
+    private activateFocusedItem;
+    /**
+     * Focus l'item à l'index courant.
+     */
+    private focusCurrentItem;
+    /**
+     * Focus le premier item.
+     */
+    private focusFirstItem;
+    /**
+     * Configure le listener responsive.
+     */
+    private setupResponsiveListener;
+    /**
+     * Attache le focus trap.
+     */
+    private attachFocusTrap;
+    /**
+     * Détache le focus trap.
+     */
+    private detachFocusTrap;
+    /**
+     * Nettoie les listeners.
+     */
+    private cleanupListeners;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsSidebar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsSidebar, "ds-sidebar", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "responsiveBreakpoint": { "alias": "responsiveBreakpoint"; "required": false; "isSignal": true; }; "autoCollapseOnMobile": { "alias": "autoCollapseOnMobile"; "required": false; "isSignal": true; }; "showTooltips": { "alias": "showTooltips"; "required": false; "isSignal": true; }; "initialActiveItemId": { "alias": "initialActiveItemId"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemExpand": "itemExpand"; "modeChange": "modeChange"; "overlayOpened": "overlayOpened"; "overlayClosed": "overlayClosed"; }, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
+}
+
+/**
+ * Taille du composant NavList
+ */
+type NavListSize = 'sm' | 'md' | 'lg';
+/**
+ * Variante de couleur pour les badges
+ */
+type NavListBadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * Item de navigation dans la liste.
+ * Supporte icône FontAwesome OU emoji, badge compteur, et indicateur coloré.
+ */
+interface NavListItem {
+    /** Identifiant unique de l'item */
+    id: string | number;
+    /** Label affiché */
+    label: string;
+    /** Icône FontAwesome (mutually exclusive avec emoji) */
+    icon?: IconDefinition;
+    /** Emoji affiché à la place de l'icône */
+    emoji?: string;
+    /** Badge compteur ou texte */
+    badge?: number | string;
+    /** Variante de couleur du badge */
+    badgeVariant?: NavListBadgeVariant;
+    /** Couleur de l'indicateur dot (ex: "#3b82f6") */
+    dotColor?: string;
+    /** Item désactivé */
+    disabled?: boolean;
+    /** Données personnalisées attachées à l'item */
+    data?: unknown;
+}
+/**
+ * Groupe d'items avec titre optionnel.
+ * Permet d'organiser les items en sections (Sources, Filtres, etc.)
+ */
+interface NavListGroup {
+    /** Identifiant unique du groupe */
+    id: string;
+    /** Titre de la section (affiché comme divider) */
+    title?: string;
+    /** Items du groupe */
+    items: NavListItem[];
+    /** Groupe repliable */
+    collapsible?: boolean;
+    /** État initial replié (si collapsible) */
+    collapsed?: boolean;
+}
+/**
+ * Événement émis lors du clic sur un item.
+ */
+interface NavListItemClickEvent {
+    /** Item cliqué */
+    item: NavListItem;
+    /** Groupe contenant l'item */
+    group: NavListGroup;
+    /** Événement souris original */
+    event: MouseEvent;
+}
+/**
+ * Événement émis lors du toggle d'un groupe (collapse/expand).
+ */
+interface NavListGroupToggleEvent {
+    /** Groupe concerné */
+    group: NavListGroup;
+    /** Nouvel état (true = collapsed) */
+    collapsed: boolean;
+}
+
+/**
+ * # DsNavList
+ *
+ * Composant de liste de navigation/filtrage avec support de groupes,
+ * icônes/emojis, badges et indicateurs colorés.
+ *
+ * ## Fonctionnalités
+ * - Groupes avec titres (dividers)
+ * - Items avec icône FontAwesome OU emoji
+ * - Badge compteur avec variantes de couleur
+ * - Indicateur dot coloré
+ * - Groupes repliables
+ * - Navigation clavier
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-nav-list
+ *   [groups]="navGroups"
+ *   [activeItemId]="activeFilter"
+ *   [size]="'md'"
+ *   (itemClick)="onItemClick($event)">
+ * </ds-nav-list>
+ * ```
+ *
+ * ## Accessibilité
+ * - Rôle navigation avec aria-label
+ * - Navigation clavier (Arrow, Enter, Space)
+ * - États aria-current pour item actif
+ *
+ * @component
+ */
+declare class DsNavList {
+    /** Liste des groupes d'items */
+    readonly groups: _angular_core.InputSignal<NavListGroup[]>;
+    /** ID de l'item actif */
+    readonly activeItemId: _angular_core.InputSignal<string | number | null>;
+    /** Taille du composant */
+    readonly size: _angular_core.InputSignal<NavListSize>;
+    /** Label ARIA pour l'accessibilité */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Émis lors du clic sur un item */
+    readonly itemClick: _angular_core.OutputEmitterRef<NavListItemClickEvent>;
+    /** Émis lors du toggle d'un groupe */
+    readonly groupToggle: _angular_core.OutputEmitterRef<NavListGroupToggleEvent>;
+    protected readonly faChevronDown: _fortawesome_fontawesome_common_types.IconDefinition;
+    protected readonly faChevronRight: _fortawesome_fontawesome_common_types.IconDefinition;
+    /** IDs des groupes collapsed */
+    private readonly collapsedGroupIds;
+    /** Classes CSS du conteneur */
+    readonly containerClasses: _angular_core.Signal<string>;
+    constructor();
+    /**
+     * Vérifie si un item est actif
+     */
+    isActive(item: NavListItem): boolean;
+    /**
+     * Vérifie si un groupe est collapsed
+     */
+    isGroupCollapsed(group: NavListGroup): boolean;
+    /**
+     * Toggle l'état collapsed d'un groupe
+     */
+    toggleGroup(group: NavListGroup, event: MouseEvent): void;
+    /**
+     * Gère le clic sur un item
+     */
+    handleItemClick(item: NavListItem, group: NavListGroup, event: MouseEvent): void;
+    /**
+     * Gère la navigation clavier sur un item
+     */
+    handleItemKeydown(item: NavListItem, group: NavListGroup, event: KeyboardEvent): void;
+    /**
+     * Retourne les classes CSS pour un item
+     */
+    getItemClasses(item: NavListItem): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsNavList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsNavList, "ds-nav-list", never, { "groups": { "alias": "groups"; "required": true; "isSignal": true; }; "activeItemId": { "alias": "activeItemId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "groupToggle": "groupToggle"; }, never, never, true, never>;
+}
+
+/**
+ * Taille du composant CheckboxList
+ */
+type CheckboxListSize = 'sm' | 'md' | 'lg';
+/**
+ * Item de la liste de checkboxes.
+ * Supporte icône FontAwesome OU emoji.
+ */
+interface CheckboxListItem {
+    /** Identifiant unique de l'item */
+    id: string | number;
+    /** Label affiché */
+    label: string;
+    /** Icône FontAwesome (mutually exclusive avec emoji) */
+    icon?: IconDefinition;
+    /** Emoji affiché à la place de l'icône */
+    emoji?: string;
+    /** État coché de l'item */
+    checked: boolean;
+    /** Item désactivé */
+    disabled?: boolean;
+    /** Texte d'aide affiché sous l'item */
+    helper?: string;
+    /** Données personnalisées attachées à l'item */
+    data?: unknown;
+}
+/**
+ * Événement émis lors du changement d'état d'un item.
+ */
+interface CheckboxListItemChangeEvent {
+    /** Item modifié */
+    item: CheckboxListItem;
+    /** Nouvel état coché */
+    checked: boolean;
+    /** Index de l'item dans la liste */
+    index: number;
+}
+/**
+ * Événement émis lors du changement global (tous les items).
+ */
+interface CheckboxListChangeEvent {
+    /** Liste complète des items avec leur état */
+    items: CheckboxListItem[];
+    /** IDs des items cochés */
+    checkedIds: (string | number)[];
+}
+
+/**
+ * # DsCheckboxList
+ *
+ * Composant de liste de checkboxes avec support d'icônes/emojis.
+ * Idéal pour les listes de préférences, filtres, ou sélections multiples.
+ *
+ * ## Fonctionnalités
+ * - Items avec icône FontAwesome OU emoji
+ * - Sélection/désélection individuelle
+ * - Sélection globale (tout cocher/décocher)
+ * - Helper text par item
+ * - Navigation clavier
+ * - Two-way binding sur items
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-checkbox-list
+ *   [(items)]="preferences"
+ *   [size]="'md'"
+ *   [showSelectAll]="true"
+ *   (itemChange)="onItemChange($event)"
+ *   (change)="onListChange($event)">
+ * </ds-checkbox-list>
+ * ```
+ *
+ * ## Accessibilité
+ * - Rôle group avec aria-label
+ * - Navigation clavier (Tab, Space)
+ * - États aria-checked
+ *
+ * @component
+ */
+declare class DsCheckboxList {
+    /** Liste des items (two-way binding) */
+    readonly items: _angular_core.ModelSignal<CheckboxListItem[]>;
+    /** Taille du composant */
+    readonly size: _angular_core.InputSignal<CheckboxListSize>;
+    /** Afficher le checkbox "Tout sélectionner" */
+    readonly showSelectAll: _angular_core.InputSignal<boolean>;
+    /** Label du checkbox "Tout sélectionner" */
+    readonly selectAllLabel: _angular_core.InputSignal<string>;
+    /** Label ARIA pour l'accessibilité */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Désactiver toute la liste */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Émis lors du changement d'un item */
+    readonly itemChange: _angular_core.OutputEmitterRef<CheckboxListItemChangeEvent>;
+    /** Émis lors de tout changement (liste complète) */
+    readonly change: _angular_core.OutputEmitterRef<CheckboxListChangeEvent>;
+    /** ID unique pour le composant */
+    protected readonly componentId: string;
+    /** Classes CSS du conteneur */
+    readonly containerClasses: _angular_core.Signal<string>;
+    /** Tous les items sont cochés */
+    readonly allChecked: _angular_core.Signal<boolean>;
+    /** Certains items sont cochés (état indéterminé) */
+    readonly someChecked: _angular_core.Signal<boolean>;
+    /** IDs des items cochés */
+    readonly checkedIds: _angular_core.Signal<(string | number)[]>;
+    /**
+     * Génère un ID unique pour un item
+     */
+    getItemId(item: CheckboxListItem, index: number): string;
+    /**
+     * Gère le changement d'état d'un item
+     */
+    onItemCheckedChange(item: CheckboxListItem, checked: boolean, index: number): void;
+    /**
+     * Gère le clic sur "Tout sélectionner"
+     */
+    onSelectAllChange(checked: boolean): void;
+    /**
+     * Émet l'événement change avec l'état complet
+     */
+    private emitChangeEvent;
+    /**
+     * Retourne les classes CSS pour un item
+     */
+    getItemClasses(item: CheckboxListItem): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsCheckboxList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsCheckboxList, "ds-checkbox-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "itemChange": "itemChange"; "change": "change"; }, never, never, true, never>;
+}
+
+/**
+ * Tailles disponibles pour DsListItem
+ */
+type ListItemSize = 'sm' | 'md' | 'lg';
+/**
+ * Types d'indicateur visuel (barre/dot à gauche)
+ * - none: pas d'indicateur
+ * - priority: barre verticale colorée (style TickTick)
+ * - dot: point coloré
+ * - status: point coloré (alias de dot)
+ */
+type ListItemIndicator = 'none' | 'priority' | 'dot' | 'status';
+/**
+ * Couleurs prédéfinies pour l'indicateur
+ */
+type ListItemIndicatorColor = 'high' | 'medium' | 'low' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * Événement émis lors du clic sur l'item
+ */
+interface ListItemClickEvent {
+    event: MouseEvent | KeyboardEvent;
+}
+/**
+ * Événement émis lors du changement de la checkbox
+ */
+interface ListItemCheckEvent {
+    checked: boolean;
+}
+
+/**
+ * # DsListItem
+ *
+ * Composant de ligne d'élément de liste interactif, style TickTick/Todoist.
+ * Supporte checkbox intégrée, indicateur de priorité, et slots pour métadonnées.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <!-- Basique -->
+ * <ds-list-item title="Ma tâche" />
+ *
+ * <!-- Avec checkbox et priorité -->
+ * <ds-list-item
+ *   title="Tâche importante"
+ *   [checkable]="true"
+ *   [checked]="task.completed"
+ *   indicator="priority"
+ *   indicatorColor="high"
+ *   (checkedChange)="onComplete($event)"
+ * />
+ *
+ * <!-- Avec métadonnées -->
+ * <ds-list-item title="Réunion" [checkable]="true">
+ *   <ds-chip inline size="sm">Travail</ds-chip>
+ *   <span meta>09:00</span>
+ *   <span meta>30min</span>
+ * </ds-list-item>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Role `button` quand clickable, `listitem` sinon
+ * - Navigation clavier (Enter, Space)
+ * - aria-disabled, aria-selected appropriés
+ */
+declare class DsListItem {
+    /**
+     * Titre principal de l'élément (requis)
+     */
+    readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Sous-titre optionnel
+     */
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Type d'indicateur à afficher à gauche
+     * @default 'none'
+     */
+    readonly indicator: _angular_core.InputSignal<ListItemIndicator>;
+    /**
+     * Couleur de l'indicateur (prédéfinie ou custom CSS)
+     * @default 'medium'
+     */
+    readonly indicatorColor: _angular_core.InputSignal<string>;
+    /**
+     * Affiche une checkbox
+     * @default false
+     */
+    readonly checkable: _angular_core.InputSignal<boolean>;
+    /**
+     * État coché de la checkbox
+     * @default false
+     */
+    readonly checked: _angular_core.InputSignal<boolean>;
+    /**
+     * État indéterminé de la checkbox
+     * @default false
+     */
+    readonly indeterminate: _angular_core.InputSignal<boolean>;
+    /**
+     * Applique le style complété (texte barré, opacité réduite)
+     * @default false
+     */
+    readonly completed: _angular_core.InputSignal<boolean>;
+    /**
+     * Désactive l'interaction
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Applique le style de sélection
+     * @default false
+     */
+    readonly selected: _angular_core.InputSignal<boolean>;
+    /**
+     * Rend l'élément cliquable avec effet hover
+     * @default true
+     */
+    readonly clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Taille de l'élément
+     * @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<ListItemSize>;
+    /**
+     * Émis lors du changement de la checkbox
+     */
+    readonly checkedChange: _angular_core.OutputEmitterRef<ListItemCheckEvent>;
+    /**
+     * Émis lors du clic sur l'élément
+     */
+    readonly clicked: _angular_core.OutputEmitterRef<ListItemClickEvent>;
+    /**
+     * Classes CSS calculées
+     */
+    readonly itemClasses: _angular_core.Signal<string>;
+    /**
+     * Role ARIA
+     */
+    readonly role: _angular_core.Signal<"button" | "listitem">;
+    /**
+     * Tabindex
+     */
+    readonly tabindex: _angular_core.Signal<0 | -1>;
+    /**
+     * Afficher l'indicateur ?
+     */
+    readonly showIndicator: _angular_core.Signal<boolean>;
+    /**
+     * Est-ce un indicateur de type barre ?
+     */
+    readonly isBarIndicator: _angular_core.Signal<boolean>;
+    /**
+     * Est-ce un indicateur de type dot ?
+     */
+    readonly isDotIndicator: _angular_core.Signal<boolean>;
+    /**
+     * Résout la couleur de l'indicateur (prédéfinie ou custom)
+     */
+    resolveIndicatorColor(): string;
+    /**
+     * Gère le clic sur l'élément
+     */
+    handleClick(event: MouseEvent | KeyboardEvent): void;
+    /**
+     * Gère le changement de la checkbox
+     */
+    handleCheckedChange(checked: boolean): void;
+    /**
+     * Gère les événements clavier
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsListItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsListItem, "ds-list-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "indicator": { "alias": "indicator"; "required": false; "isSignal": true; }; "indicatorColor": { "alias": "indicatorColor"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "completed": { "alias": "completed"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; "clicked": "clicked"; }, never, ["[inline]", "[meta]", "[actions]"], true, never>;
+}
+
+/**
+ * Variantes visuelles disponibles pour DsList
+ * - default: liste simple sans séparateurs
+ * - divided: liste avec séparateurs entre les items
+ * - card: liste dans un conteneur card avec bordure
+ */
+type ListVariant = 'default' | 'divided' | 'card';
+/**
+ * Tailles disponibles pour DsList
+ */
+type ListSize = 'sm' | 'md' | 'lg';
+/**
+ * Événement émis lors d'un drag & drop
+ */
+interface ListDragEvent<T = unknown> {
+    /** L'élément déplacé */
+    item: T;
+    /** Index avant le déplacement */
+    previousIndex: number;
+    /** Index après le déplacement */
+    currentIndex: number;
+}
+/**
+ * Événement émis lors d'un changement de sélection
+ */
+interface ListSelectionChangeEvent<T = unknown> {
+    /** Éléments sélectionnés */
+    selected: T[];
+}
+/**
+ * Configuration de l'état vide
+ */
+interface ListEmptyConfig {
+    /** Titre affiché */
+    title: string;
+    /** Description optionnelle */
+    description?: string;
+    /** Icône optionnelle */
+    icon?: IconDefinition;
+}
+
+/**
+ * # DsList
+ *
+ * Composant conteneur pour afficher une liste d'éléments avec support pour :
+ * - État de chargement (skeletons)
+ * - État vide
+ * - Drag & Drop (via CDK)
+ * - Virtualisation (via CDK)
+ * - Sélection multiple
+ *
+ * ## Usage
+ *
+ * ```html
+ * <!-- Basique -->
+ * <ds-list>
+ *   <ds-list-item title="Item 1" />
+ *   <ds-list-item title="Item 2" />
+ * </ds-list>
+ *
+ * <!-- Avec loading et empty -->
+ * <ds-list
+ *   [loading]="isLoading()"
+ *   [empty]="items().length === 0"
+ *   emptyTitle="Aucun élément"
+ * >
+ *   @for (item of items(); track item.id) {
+ *     <ds-list-item [title]="item.title" />
+ *   }
+ * </ds-list>
+ *
+ * <!-- Avec Drag & Drop -->
+ * <ds-list [draggable]="true" [dragData]="items()" (dropped)="onReorder($event)">
+ *   @for (item of items(); track item.id) {
+ *     <ds-list-item [title]="item.title" cdkDrag />
+ *   }
+ * </ds-list>
+ * ```
+ */
+declare class DsList<T = unknown> {
+    /**
+     * Variante visuelle de la liste
+     * @default 'default'
+     */
+    readonly variant: _angular_core.InputSignal<ListVariant>;
+    /**
+     * Taille de la liste (affecte les skeletons)
+     * @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<ListSize>;
+    /**
+     * Affiche les skeletons de chargement
+     * @default false
+     */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Nombre de skeletons à afficher
+     * @default 3
+     */
+    readonly loadingCount: _angular_core.InputSignal<number>;
+    /**
+     * Affiche l'état vide
+     * @default false
+     */
+    readonly empty: _angular_core.InputSignal<boolean>;
+    /**
+     * Titre de l'état vide
+     * @default 'Aucun élément'
+     */
+    readonly emptyTitle: _angular_core.InputSignal<string>;
+    /**
+     * Description de l'état vide
+     */
+    readonly emptyDescription: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Active le mode Drag & Drop
+     * @default false
+     */
+    readonly draggable: _angular_core.InputSignal<boolean>;
+    /**
+     * Désactive le Drag & Drop (tout en gardant le mode actif)
+     * @default false
+     */
+    readonly dragDisabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Données pour le Drag & Drop
+     */
+    readonly dragData: _angular_core.InputSignal<T[]>;
+    /**
+     * Émis lors d'un drop
+     */
+    readonly dropped: _angular_core.OutputEmitterRef<ListDragEvent<T>>;
+    /**
+     * Active le mode virtualisé pour les longues listes
+     * @default false
+     */
+    readonly virtual: _angular_core.InputSignal<boolean>;
+    /**
+     * Hauteur d'un item en pixels (pour la virtualisation)
+     * @default 40
+     */
+    readonly itemSize: _angular_core.InputSignal<number>;
+    /**
+     * Hauteur du viewport en pixels (pour la virtualisation)
+     * @default 400
+     */
+    readonly viewportHeight: _angular_core.InputSignal<number>;
+    /**
+     * Active la sélection multiple
+     * @default false
+     */
+    readonly selectable: _angular_core.InputSignal<boolean>;
+    /**
+     * Items sélectionnés
+     */
+    readonly selectedItems: _angular_core.InputSignal<T[]>;
+    /**
+     * Émis lors d'un changement de sélection
+     */
+    readonly selectionChange: _angular_core.OutputEmitterRef<ListSelectionChangeEvent<T>>;
+    /**
+     * Classes CSS calculées
+     */
+    readonly listClasses: _angular_core.Signal<string>;
+    /**
+     * Tableau pour générer les skeletons
+     */
+    readonly skeletonArray: _angular_core.Signal<number[]>;
+    /**
+     * Taille du skeleton basée sur la taille de la liste
+     */
+    readonly skeletonSize: _angular_core.Signal<"sm" | "md" | "lg">;
+    /**
+     * Style du viewport pour la virtualisation
+     */
+    readonly viewportStyle: _angular_core.Signal<{
+        height: string;
+    }>;
+    /**
+     * Gère l'événement drop du CDK
+     */
+    onDrop(event: CdkDragDrop<T[]>): void;
+    /**
+     * Toggle la sélection d'un item
+     */
+    toggleSelection(item: T): void;
+    /**
+     * Vérifie si un item est sélectionné
+     */
+    isSelected(item: T): boolean;
+    /**
+     * Sélectionne tous les items
+     */
+    selectAll(): void;
+    /**
+     * Désélectionne tous les items
+     */
+    clearSelection(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsList<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsList<any>, "ds-list", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingCount": { "alias": "loadingCount"; "required": false; "isSignal": true; }; "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "emptyTitle": { "alias": "emptyTitle"; "required": false; "isSignal": true; }; "emptyDescription": { "alias": "emptyDescription"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "dragDisabled": { "alias": "dragDisabled"; "required": false; "isSignal": true; }; "dragData": { "alias": "dragData"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": false; "isSignal": true; }; }, { "dropped": "dropped"; "selectionChange": "selectionChange"; }, never, ["*", "*", "*"], true, never>;
+}
+
+/**
+ * Variantes disponibles pour DsListGroup
+ * - default: header simple sans interaction
+ * - collapsible: header cliquable pour expand/collapse
+ */
+type ListGroupVariant = 'default' | 'collapsible';
+/**
+ * Événement émis lors du toggle expand/collapse
+ */
+interface ListGroupToggleEvent {
+    /** Nouvel état expanded */
+    expanded: boolean;
+}
+
+/**
+ * # DsListGroup
+ *
+ * Composant de regroupement d'éléments de liste avec header et contenu collapsible.
+ * Idéal pour organiser les tâches par date, catégorie ou statut.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <!-- Groupe simple -->
+ * <ds-list-group title="Aujourd'hui">
+ *   <ds-list-item title="Tâche 1" />
+ *   <ds-list-item title="Tâche 2" />
+ * </ds-list-group>
+ *
+ * <!-- Groupe collapsible avec compteur -->
+ * <ds-list-group
+ *   title="Cette semaine"
+ *   [count]="5"
+ *   variant="collapsible"
+ *   [expanded]="true"
+ * >
+ *   <ds-list-item title="Tâche 1" />
+ * </ds-list-group>
+ *
+ * <!-- Groupes dans une liste -->
+ * <ds-list>
+ *   <ds-list-group title="Haute priorité" [count]="3" variant="collapsible">
+ *     ...
+ *   </ds-list-group>
+ *   <ds-list-group title="Normale" [count]="5" variant="collapsible">
+ *     ...
+ *   </ds-list-group>
+ * </ds-list>
+ * ```
+ */
+declare class DsListGroup {
+    /**
+     * Titre du groupe (requis)
+     */
+    readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Sous-titre optionnel
+     */
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Nombre d'éléments (affiché comme badge)
+     */
+    readonly count: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Variante du groupe
+     * @default 'default'
+     */
+    readonly variant: _angular_core.InputSignal<ListGroupVariant>;
+    /**
+     * État expanded (pour variante collapsible)
+     * @default true
+     */
+    readonly expanded: _angular_core.InputSignal<boolean>;
+    /**
+     * Émis lors du toggle expand/collapse
+     */
+    readonly expandedChange: _angular_core.OutputEmitterRef<ListGroupToggleEvent>;
+    /**
+     * Header sticky au scroll
+     * @default false
+     */
+    readonly sticky: _angular_core.InputSignal<boolean>;
+    /**
+     * Icône personnalisée pour le header
+     */
+    readonly icon: _angular_core.InputSignal<IconDefinition | undefined>;
+    private readonly internalExpanded;
+    readonly faChevronRight: IconDefinition;
+    readonly faChevronDown: IconDefinition;
+    /**
+     * État expanded effectif (interne ou input)
+     */
+    readonly isExpanded: _angular_core.Signal<boolean>;
+    /**
+     * Est-ce un groupe collapsible ?
+     */
+    readonly isCollapsible: _angular_core.Signal<boolean>;
+    /**
+     * Classes CSS du conteneur
+     */
+    readonly groupClasses: _angular_core.Signal<string>;
+    /**
+     * Icône du chevron
+     */
+    readonly chevronIcon: _angular_core.Signal<IconDefinition>;
+    /**
+     * Afficher le compteur ?
+     */
+    readonly showCount: _angular_core.Signal<boolean>;
+    /**
+     * Toggle expand/collapse
+     */
+    toggle(): void;
+    /**
+     * Gère les événements clavier sur le header
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsListGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsListGroup, "ds-list-group", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Positions standard pour dropdowns (menus déroulants, select, etc.)
+ *
+ * Stratégie :
+ * 1. Position préférée : centré en dessous (offsetY: 6px pour espacement)
+ * 2. Fallback : centré au-dessus si pas d'espace en bas
+ * 3. Fallback : aligné à gauche en dessous
+ * 4. Fallback : aligné à droite en dessous
+ */
+declare const DROPDOWN_POSITIONS: ConnectedPosition[];
+/**
+ * Positions pour dropdowns s'ouvrant vers le haut (utile dans les footers)
+ *
+ * Stratégie :
+ * 1. Position préférée : centré au-dessus
+ * 2. Fallback : centré en dessous si pas d'espace au-dessus
+ * 3. Fallback : aligné à gauche au-dessus
+ * 4. Fallback : aligné à droite au-dessus
+ */
+declare const DROPDOWN_POSITIONS_TOP: ConnectedPosition[];
+/**
+ * Positions pour dropdowns s'ouvrant vers la droite (utile dans les sidebars)
+ *
+ * Stratégie :
+ * 1. Position préférée : à droite, aligné en haut
+ * 2. Fallback : à droite, aligné au centre
+ * 3. Fallback : à gauche si pas d'espace à droite
+ */
+declare const DROPDOWN_POSITIONS_RIGHT: ConnectedPosition[];
+/**
+ * Positions standard pour tooltips (infobulles)
+ *
+ * Stratégie :
+ * 1. Position préférée : centré au-dessus (offsetY: -8px pour espacement)
+ * 2. Fallback : centré en dessous si pas d'espace au-dessus
+ * 3. Fallback : à droite (aligné verticalement au centre)
+ * 4. Fallback : à gauche (aligné verticalement au centre)
+ */
+declare const TOOLTIP_POSITIONS: ConnectedPosition[];
+/**
+ * Positions standard pour popovers (menus contextuels, actions panels)
+ *
+ * Stratégie :
+ * 1. Position préférée : aligné à droite, en dessous (offsetY: 4px)
+ * 2. Fallback : aligné à gauche, en dessous
+ * 3. Fallback : aligné à droite, au-dessus
+ * 4. Fallback : aligné à gauche, au-dessus
+ * 5. Fallback : à droite (aligné en haut)
+ * 6. Fallback : à gauche (aligné en haut)
+ */
+declare const POPOVER_POSITIONS: ConnectedPosition[];
+/**
+ * Positions pour autocomplete (panel de suggestions sous un input)
+ *
+ * Stratégie :
+ * 1. Position préférée : aligné à gauche, pleine largeur, en dessous
+ * 2. Fallback : aligné à gauche, pleine largeur, au-dessus
+ */
+declare const AUTOCOMPLETE_POSITIONS: ConnectedPosition[];
+
+declare const BUTTON_VARIANT_OPTIONS: readonly ["primary", "secondary", "ghost", "success", "warning", "error", "info"];
+declare const BUTTON_APPEARANCE_OPTIONS: readonly ["solid", "outline"];
+declare const BUTTON_SIZE_OPTIONS: readonly ["sm", "md", "lg"];
+interface ArgTypeOptions {
+    includeLoading?: boolean;
+    includeBlock?: boolean;
+    variantDescription?: string;
+    appearanceDescription?: string;
+    sizeDescription?: string;
+    disabledDescription?: string;
+    loadingDescription?: string;
+    blockDescription?: string;
+}
+declare const buildButtonArgTypes: ({ includeLoading, includeBlock, variantDescription, appearanceDescription, sizeDescription, disabledDescription, loadingDescription, blockDescription, }?: ArgTypeOptions) => ArgTypes<Args>;
+interface ArgOptions {
+    includeLoading?: boolean;
+    includeBlock?: boolean;
+}
+declare const buildButtonArgs: ({ includeLoading, includeBlock }?: ArgOptions) => {
+    block?: boolean | undefined;
+    loading?: boolean | undefined;
+    variant: ButtonVariant;
+    appearance: ButtonAppearance;
+    size: ButtonSize;
+    disabled: boolean;
+};
+interface ButtonBindings {
+    variant: string;
+    appearance?: string;
+    size: string;
+    disabled?: string;
+    loading?: string;
+    block?: string;
+}
+declare const createVariantRender: (tagName: string, bindings: ButtonBindings, extraAttributes?: string) => (args: Args) => {
+    props: {
+        variants: readonly ["primary", "secondary", "ghost", "success", "warning", "error", "info"];
+    };
+    template: string;
+};
+declare const createSizeRender: (tagName: string, bindings: ButtonBindings, extraAttributes?: string) => (args: Args) => {
+    props: {
+        sizes: readonly ["sm", "md", "lg"];
+    };
+    template: string;
+};
+
+/**
+ * Service centralisé pour l'enregistrement des icônes FontAwesome.
+ *
+ * @description
+ * Permet d'enregistrer des icônes de manière lazy et centralisée, évitant
+ * d'importer toutes les icônes FontAwesome dans chaque composant. Les composants
+ * peuvent utiliser les icônes enregistrées via leur nom plutôt que via l'objet complet.
+ *
+ * @example
+ * ```typescript
+ * // Dans app.config.ts ou main.ts
+ * import { IconRegistryService } from 'ds-angular';
+ * import { faCheck, faTimes, faExclamation } from '@fortawesome/free-solid-svg-icons';
+ *
+ * const iconRegistry = inject(IconRegistryService);
+ * iconRegistry.registerIcons([faCheck, faTimes, faExclamation]);
  * ```
  *
  * @example
@@ -6478,5 +7939,20 @@ declare class DsI18nService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsI18nService>;
 }
 
-export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsMenu, DsModalComponent, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender };
-export type { AccordionChangeEvent, AccordionItem, AccordionSize, AccordionVariant, AlertSize, AlertType, AvatarShape, AvatarSize, BadgeAppearance, BadgeShape, BadgeSize, BadgeType, BadgeVariant, BreadcrumbItem, ButtonAppearance, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarMode, CalendarSize, CardSize, CardVariant, CarouselDotsPosition, CarouselEffect, CarouselSlide, CheckboxSize, CheckboxState, ChipColor, ChipSize, ChipVariant, ColorFormat, ColorPickerSize, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DrawerPosition, DrawerSize, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, EmptySize, FileUploadSize, HSLColor, I18nLabels, InputAppearance, InputNumberControlsPosition, InputNumberSize, InputSize, InputState, InputType, MenuItem, MenuSize, MenuTrigger, NotificationAction, NotificationConfig, NotificationItem, NotificationPlacement, PageChangeEvent, PageSizeOption, PaginationSize, PasswordCriterion, PasswordStrength, PasswordStrengthSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RGBColor, RadioGroupLayout, RadioOption, RadioSize, RatingSize, SearchInputSize, SegmentOption, SegmentedControlColor, SegmentedControlOrientation, SegmentedControlSize, SkeletonSize, SkeletonVariant, SliderOrientation, SliderSize, SliderValue, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, TimeFormat, TimePickerSize, TimeValue, TimelineColor, TimelineItem, TimelineItemClickEvent, TimelineMode, TimelineSize, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize, TransferChangeEvent, TransferDirection, TransferItem, TransferSize, TreeNode, TreeNodeCheckEvent, TreeNodeExpandEvent, TreeNodeSelectEvent, TreeSize, UploadFile };
+/**
+ * Génère un identifiant unique compatible avec tous les environnements.
+ * Utilise crypto.randomUUID() si disponible, sinon génère un UUID v4 manuellement.
+ *
+ * @returns Un identifiant UUID v4 unique
+ */
+declare function generateId(): string;
+/**
+ * Génère un identifiant court (sans tirets) pour les cas où un UUID complet n'est pas nécessaire.
+ *
+ * @param prefix Préfixe optionnel à ajouter à l'identifiant
+ * @returns Un identifiant court unique
+ */
+declare function generateShortId(prefix?: string): string;
+
+export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarItemComponent, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender, generateId, generateShortId };
+export type { AccordionChangeEvent, AccordionItem, AccordionSize, AccordionVariant, AlertSize, AlertType, AvatarShape, AvatarSize, BadgeAppearance, BadgeShape, BadgeSize, BadgeType, BadgeVariant, BreadcrumbItem, ButtonAppearance, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarMode, CalendarSize, CardSize, CardVariant, CarouselDotsPosition, CarouselEffect, CarouselSlide, CheckboxListChangeEvent, CheckboxListItem, CheckboxListItemChangeEvent, CheckboxListSize, CheckboxSize, CheckboxState, ChipColor, ChipSize, ChipVariant, ColorFormat, ColorPickerSize, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DrawerPosition, DrawerSize, DropdownItem, DropdownItemDTO, DropdownPosition, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, EmptySize, FileUploadSize, FlattenedSidebarItem, HSLColor, I18nLabels, InputAppearance, InputNumberControlsPosition, InputNumberSize, InputSize, InputState, InputType, ListDragEvent, ListEmptyConfig, ListGroupToggleEvent, ListGroupVariant, ListItemCheckEvent, ListItemClickEvent, ListItemIndicator, ListItemIndicatorColor, ListItemSize, ListSelectionChangeEvent, ListSize, ListVariant, MenuItem, MenuSize, MenuTrigger, NavListBadgeVariant, NavListGroup, NavListGroupToggleEvent, NavListItem, NavListItemClickEvent, NavListSize, NotificationAction, NotificationConfig, NotificationItem, NotificationPlacement, PageChangeEvent, PageSizeOption, PaginationSize, PasswordCriterion, PasswordStrength, PasswordStrengthSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RGBColor, RadioGroupLayout, RadioOption, RadioSize, RatingSize, SearchInputSize, SegmentOption, SegmentedControlColor, SegmentedControlOrientation, SegmentedControlSize, SidebarBadgeVariant, SidebarItem, SidebarItemClickEvent, SidebarItemExpandEvent, SidebarMode, SidebarPosition, SidebarSize, SkeletonSize, SkeletonVariant, SliderOrientation, SliderSize, SliderValue, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, TimeFormat, TimePickerSize, TimeValue, TimelineColor, TimelineItem, TimelineItemClickEvent, TimelineMode, TimelineSize, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize, TransferChangeEvent, TransferDirection, TransferItem, TransferSize, TreeNode, TreeNodeCheckEvent, TreeNodeExpandEvent, TreeNodeSelectEvent, TreeSize, UploadFile };