@kksdev/ds-angular 1.2.5 → 1.3.0

package/index.d.ts

@@ -4084,6 +4084,10 @@ interface DateRange {
     start: Date | null;
     end: Date | null;
 }
+interface DatePreset {
+    label: string;
+    getValue: () => DateRange;
+}
 /**
  * DsDatePicker - Composant de sélection de date
  *
@@ -4122,6 +4126,12 @@ declare class DsDatePicker implements ControlValueAccessor, OnInit {
     readonly prevMonthLabel: _angular_core.InputSignal<string>;
     /** Label bouton mois suivant */
     readonly nextMonthLabel: _angular_core.InputSignal<string>;
+    /** Presets pour le mode range */
+    readonly presets: _angular_core.InputSignal<DatePreset[]>;
+    /** Afficher les presets */
+    readonly showPresets: _angular_core.InputSignal<boolean>;
+    /** Activer le preview au survol en mode range */
+    readonly showRangePreview: _angular_core.InputSignal<boolean>;
     /** Événement de changement de date (mode single) */
     readonly dateChange: _angular_core.OutputEmitterRef<Date | null>;
     /** Événement de changement de range */
@@ -4142,6 +4152,7 @@ declare class DsDatePicker implements ControlValueAccessor, OnInit {
     readonly rangeEnd: _angular_core.WritableSignal<Date | null>;
     readonly showMonthPicker: _angular_core.WritableSignal<boolean>;
     readonly showYearPicker: _angular_core.WritableSignal<boolean>;
+    readonly hoveredDate: _angular_core.WritableSignal<Date | null>;
     /** Callbacks CVA */
     private onChange;
     private onTouched;
@@ -4164,6 +4175,12 @@ declare class DsDatePicker implements ControlValueAccessor, OnInit {
     private isRangeStartDate;
     private isRangeEndDate;
     private isDateInRange;
+    private isDateInPreviewRange;
+    onDayMouseEnter(date: Date | null): void;
+    onDayMouseLeave(): void;
+    selectPreset(preset: DatePreset): void;
+    /** Presets effectifs (utilise les presets fournis ou les défauts) */
+    readonly effectivePresets: _angular_core.Signal<DatePreset[]>;
     private isDateDisabled;
     private isSameDay;
     private formatDateForAria;
@@ -4172,7 +4189,7 @@ declare class DsDatePicker implements ControlValueAccessor, OnInit {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsDatePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsDatePicker, "ds-date-picker", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "prevMonthLabel": { "alias": "prevMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; "rangeChange": "rangeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsDatePicker, "ds-date-picker", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "prevMonthLabel": { "alias": "prevMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; "showRangePreview": { "alias": "showRangePreview"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
 interface CalendarDay {
     date: Date;
@@ -4183,6 +4200,7 @@ interface CalendarDay {
     isRangeStart: boolean;
     isRangeEnd: boolean;
     isInRange: boolean;
+    isInPreviewRange: boolean;
     isDisabled: boolean;
     ariaLabel: string;
 }
@@ -4316,6 +4334,338 @@ declare class DsMenu implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMenu, "ds-menu", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; "opened": "opened"; "closed": "closed"; }, never, ["[dsMenuTrigger]"], true, never>;
 }
 
+type ChipVariant = 'filled' | 'outlined';
+type ChipSize = 'sm' | 'md' | 'lg';
+type ChipColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+/**
+ * Design System Chip component
+ *
+ * @example
+ * ```html
+ * <ds-chip label="Tag" />
+ * <ds-chip label="Removable" [removable]="true" (removed)="onRemove()" />
+ * <ds-chip label="Clickable" [clickable]="true" (clicked)="onClick()" />
+ * <ds-chip label="With icon" icon="fas-star" />
+ * ```
+ */
+declare class DsChip {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<ChipVariant>;
+    readonly size: _angular_core.InputSignal<ChipSize>;
+    readonly color: _angular_core.InputSignal<ChipColor>;
+    readonly removable: _angular_core.InputSignal<boolean>;
+    readonly clickable: _angular_core.InputSignal<boolean>;
+    readonly selected: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly avatar: _angular_core.InputSignal<string>;
+    readonly removed: _angular_core.OutputEmitterRef<void>;
+    readonly clicked: _angular_core.OutputEmitterRef<void>;
+    readonly selectedChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly isSelected: _angular_core.WritableSignal<boolean>;
+    readonly closeIcon: IconDefinition;
+    readonly chipClasses: _angular_core.Signal<string>;
+    readonly role: _angular_core.Signal<"button" | null>;
+    readonly tabindex: _angular_core.Signal<0 | -1 | null>;
+    readonly ariaSelected: _angular_core.Signal<boolean | null>;
+    readonly ariaDisabled: _angular_core.Signal<true | null>;
+    /**
+     * Handle chip click
+     */
+    handleClick(event: MouseEvent): void;
+    /**
+     * Handle remove button click
+     */
+    handleRemove(event: MouseEvent): void;
+    /**
+     * Handle keyboard events
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsChip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsChip, "ds-chip", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; }, { "removed": "removed"; "clicked": "clicked"; "selectedChange": "selectedChange"; }, never, never, true, never>;
+}
+
+type SliderSize = 'sm' | 'md' | 'lg';
+type SliderValue = number | [number, number];
+type SliderOrientation = 'horizontal' | 'vertical';
+declare class DsSlider implements ControlValueAccessor {
+    min: _angular_core.InputSignal<number>;
+    max: _angular_core.InputSignal<number>;
+    step: _angular_core.InputSignal<number>;
+    disabled: _angular_core.InputSignal<boolean>;
+    size: _angular_core.InputSignal<SliderSize>;
+    range: _angular_core.InputSignal<boolean>;
+    orientation: _angular_core.InputSignal<SliderOrientation>;
+    showLabels: _angular_core.InputSignal<boolean>;
+    showTicks: _angular_core.InputSignal<boolean>;
+    tickInterval: _angular_core.InputSignal<number | undefined>;
+    formatLabel: _angular_core.InputSignal<((value: number) => string) | undefined>;
+    valueChange: _angular_core.OutputEmitterRef<SliderValue>;
+    trackElement?: ElementRef<HTMLDivElement>;
+    thumb1Element?: ElementRef<HTMLDivElement>;
+    thumb2Element?: ElementRef<HTMLDivElement>;
+    private readonly disabledState;
+    readonly internalValue: _angular_core.WritableSignal<SliderValue>;
+    readonly dragging: _angular_core.WritableSignal<number | null>;
+    readonly focusedThumb: _angular_core.WritableSignal<number>;
+    constructor();
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly isRange: _angular_core.Signal<boolean>;
+    readonly isVertical: _angular_core.Signal<boolean>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly value1: _angular_core.Signal<number>;
+    readonly value2: _angular_core.Signal<number>;
+    readonly percentage1: _angular_core.Signal<number>;
+    readonly percentage2: _angular_core.Signal<number>;
+    readonly thumb1Style: _angular_core.Signal<{
+        bottom: string;
+        left?: undefined;
+    } | {
+        left: string;
+        bottom?: undefined;
+    }>;
+    readonly thumb2Style: _angular_core.Signal<{
+        bottom?: undefined;
+        left?: undefined;
+    } | {
+        bottom: string;
+        left?: undefined;
+    } | {
+        left: string;
+        bottom?: undefined;
+    }>;
+    readonly fillStyle: _angular_core.Signal<{
+        bottom: string;
+        height: string;
+        left?: undefined;
+        width?: undefined;
+    } | {
+        left: string;
+        width: string;
+        bottom?: undefined;
+        height?: undefined;
+    }>;
+    readonly ticks: _angular_core.Signal<number[]>;
+    readonly label1: _angular_core.Signal<string>;
+    readonly label2: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    writeValue(value: SliderValue | null): void;
+    registerOnChange(fn: (value: SliderValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private valueToPercentage;
+    private percentageToValue;
+    private clampValue;
+    private emitValue;
+    onKeyDown(event: KeyboardEvent, thumbIndex: number): void;
+    onTrackClick(event: MouseEvent): void;
+    onThumbMouseDown(event: MouseEvent, thumbIndex: number): void;
+    private onMouseMove;
+    onThumbFocus(thumbIndex: number): void;
+    onThumbBlur(): void;
+    getTickPosition(value: number): number;
+    getTickLabel(value: number): string;
+    getAriaValueText(thumbIndex: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsSlider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsSlider, "ds-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "showTicks": { "alias": "showTicks"; "required": false; "isSignal": true; }; "tickInterval": { "alias": "tickInterval"; "required": false; "isSignal": true; }; "formatLabel": { "alias": "formatLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Tailles disponibles pour le composant file upload.
+ */
+type FileUploadSize = 'sm' | 'md' | 'lg';
+/**
+ * Représente un fichier avec son état de chargement.
+ */
+interface UploadFile {
+    file: File;
+    preview?: string;
+    progress: number;
+    error?: string;
+}
+/**
+ * # DsFileUpload
+ *
+ * Composant de téléchargement de fichiers avec support drag & drop,
+ * validation, preview et barre de progression.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <!-- Upload simple -->
+ * <ds-file-upload
+ *   [accept]="'image/*'"
+ *   [maxFileSize]="5242880"
+ *   (filesChange)="onFilesChange($event)">
+ * </ds-file-upload>
+ *
+ * <!-- Upload multiple avec preview -->
+ * <ds-file-upload
+ *   [multiple]="true"
+ *   [showPreview]="true"
+ *   [maxFiles]="5"
+ *   size="lg">
+ * </ds-file-upload>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Input natif avec label accessible
+ * - Drag & drop avec feedback ARIA
+ * - Messages d'erreur associés via aria-describedby
+ *
+ * @component
+ */
+declare class DsFileUpload implements ControlValueAccessor {
+    /**
+     * Types de fichiers acceptés (ex: 'image/*,.pdf').
+     * @default '*'
+     */
+    accept: _angular_core.InputSignal<string>;
+    /**
+     * Taille maximale d'un fichier en bytes.
+     * @default 10485760 (10 MB)
+     */
+    maxFileSize: _angular_core.InputSignal<number>;
+    /**
+     * Nombre maximum de fichiers.
+     * @default 1
+     */
+    maxFiles: _angular_core.InputSignal<number>;
+    /**
+     * Permet la sélection multiple de fichiers.
+     * @default false
+     */
+    multiple: _angular_core.InputSignal<boolean>;
+    /**
+     * Désactive le composant.
+     * @default false
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Taille du composant.
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<FileUploadSize>;
+    /**
+     * Affiche une preview pour les images.
+     * @default true
+     */
+    showPreview: _angular_core.InputSignal<boolean>;
+    /**
+     * Label personnalisé pour le bouton.
+     */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * Texte d'aide pour le drag & drop.
+     */
+    dragHelpText: _angular_core.InputSignal<string>;
+    /**
+     * Événement émis lors du changement de fichiers.
+     */
+    filesChange: _angular_core.OutputEmitterRef<File[]>;
+    /**
+     * Événement émis lors de la suppression d'un fichier.
+     */
+    fileRemoved: _angular_core.OutputEmitterRef<File>;
+    /**
+     * Événement émis lors de la progression de l'upload.
+     */
+    uploadProgress: _angular_core.OutputEmitterRef<{
+        file: File;
+        progress: number;
+    }>;
+    readonly faCloudArrowUp: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faXmark: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFile: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFileImage: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFilePdf: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFileWord: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFileExcel: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly fileInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    readonly files: _angular_core.WritableSignal<UploadFile[]>;
+    readonly isDragging: _angular_core.WritableSignal<boolean>;
+    readonly errorMessage: _angular_core.WritableSignal<string>;
+    private onChange;
+    private onTouched;
+    /**
+     * Classes CSS calculées pour le conteneur (public pour tests).
+     */
+    readonly containerClasses: _angular_core.Signal<string[]>;
+    /**
+     * Nombre de fichiers actuellement sélectionnés (public pour tests).
+     */
+    readonly fileCount: _angular_core.Signal<number>;
+    /**
+     * Vérifie si la limite de fichiers est atteinte (public pour tests).
+     */
+    readonly isMaxFilesReached: _angular_core.Signal<boolean>;
+    /**
+     * Ouvre le sélecteur de fichiers.
+     */
+    openFileSelector(): void;
+    /**
+     * Gère la sélection de fichiers via l'input.
+     */
+    onFileSelect(event: Event): void;
+    /**
+     * Gère le début du drag.
+     */
+    onDragEnter(event: DragEvent): void;
+    /**
+     * Gère le survol pendant le drag.
+     */
+    onDragOver(event: DragEvent): void;
+    /**
+     * Gère la sortie du drag.
+     */
+    onDragLeave(event: DragEvent): void;
+    /**
+     * Gère le drop des fichiers.
+     */
+    onDrop(event: DragEvent): void;
+    /**
+     * Traite les fichiers sélectionnés ou déposés.
+     */
+    private handleFiles;
+    /**
+     * Valide un fichier (taille, type).
+     */
+    private validateFile;
+    /**
+     * Génère une preview pour les images.
+     */
+    private generatePreview;
+    /**
+     * Simule l'upload avec progression (pour démonstration).
+     * Dans une vraie application, remplacer par un vrai upload HTTP.
+     */
+    private simulateUpload;
+    /**
+     * Retire un fichier de la liste.
+     */
+    removeFile(uploadFile: UploadFile): void;
+    /**
+     * Notifie le changement de valeur.
+     */
+    private notifyChange;
+    /**
+     * Retourne l'icône appropriée pour le type de fichier (public pour tests).
+     */
+    getFileIcon(file: File): _fortawesome_fontawesome_common_types.IconDefinition;
+    /**
+     * Formate la taille du fichier en MB ou KB (public pour tests).
+     */
+    formatFileSize(bytes: number): string;
+    writeValue(value: File[] | null): void;
+    registerOnChange(fn: (value: File[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsFileUpload, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsFileUpload, "ds-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showPreview": { "alias": "showPreview"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dragHelpText": { "alias": "dragHelpText"; "required": false; "isSignal": true; }; }, { "filesChange": "filesChange"; "fileRemoved": "fileRemoved"; "uploadProgress": "uploadProgress"; }, never, never, true, never>;
+}
+
 /**
  * Positions standard pour dropdowns (menus déroulants, select, etc.)
  *
@@ -4684,5 +5034,5 @@ 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, DsCard, DsCheckbox, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDropdown, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsSearchInput, DsSelect, DsSkeleton, DsStepper, DsTable, DsTabs, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, 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, CardSize, CardVariant, CheckboxSize, CheckboxState, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, I18nLabels, InputAppearance, InputSize, InputState, InputType, MenuItem, MenuSize, MenuTrigger, PageChangeEvent, PageSizeOption, PaginationSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RadioGroupLayout, RadioOption, RadioSize, SearchInputSize, SkeletonSize, SkeletonVariant, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize };
+export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsChip, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDropdown, DsFileUpload, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsSearchInput, DsSelect, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, 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, CardSize, CardVariant, CheckboxSize, CheckboxState, ChipColor, ChipSize, ChipVariant, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, FileUploadSize, I18nLabels, InputAppearance, InputSize, InputState, InputType, MenuItem, MenuSize, MenuTrigger, PageChangeEvent, PageSizeOption, PaginationSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RadioGroupLayout, RadioOption, RadioSize, SearchInputSize, SkeletonSize, SkeletonVariant, SliderOrientation, SliderSize, SliderValue, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize, UploadFile };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kksdev/ds-angular",
-  "version": "1.2.5",
-  "description": "Angular 20 standalone component library - Design System with 30 components, 7 primitives, 3 themes, i18n support",
+  "version": "1.3.0",
+  "description": "Angular 20 standalone component library - Design System with 33 components, 7 primitives, 3 themes, i18n support",
   "keywords": [
     "angular",
     "angular20",

package/src/styles/themes/_custom.scss

@@ -443,5 +443,248 @@
   --ds-container-gutter-sm: var(--space-4);
   --ds-container-gutter-md: var(--space-6);
   --ds-container-gutter-lg: var(--space-8);
+
+  /* ==========================================================================
+   * LINKS & SELECTIONS
+   * ======================================================================== */
+  --link: var(--role-primary);
+  --link-hover: color-mix(in oklab, var(--role-primary) 85%, var(--background-main));
+  --selection-bg: color-mix(in oklab, var(--role-primary) 25%, transparent);
+  --selection-text: var(--text-default);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS AVATAR
+   * ======================================================================== */
+  --avatar-bg: var(--background-header);
+  --avatar-text: var(--text-muted);
+  --avatar-border: var(--border-color);
+  --avatar-placeholder-bg: var(--role-primary);
+  --avatar-placeholder-text: var(--gray-50);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS MENU
+   * ======================================================================== */
+  --menu-bg: var(--surface-default);
+  --menu-border: var(--border-color);
+  --menu-shadow: var(--shadow-2);
+  --menu-item-text: var(--text-default);
+  --menu-item-icon: var(--text-muted);
+  --menu-item-hover-bg: var(--surface-hover);
+  --menu-item-hover-text: var(--text-default);
+  --menu-item-active-bg: color-mix(in oklab, var(--role-primary) 15%, transparent);
+  --menu-item-active-text: var(--role-primary);
+  --menu-item-disabled-text: var(--text-disabled);
+  --menu-item-disabled-icon: var(--text-disabled-alt);
+  --menu-divider: var(--border-subtle);
+  --menu-backdrop: transparent;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CARD
+   * ======================================================================== */
+  --card-bg: var(--surface-default);
+  --card-text: var(--text-default);
+  --card-border: var(--border-color);
+  --card-border-strong: var(--border-strong);
+  --card-divider: var(--border-subtle);
+  --card-header-color: var(--text-default);
+  --card-footer-color: var(--text-muted);
+  --card-shadow: var(--shadow-2);
+  --card-shadow-hover: var(--shadow-3);
+  --card-disabled-opacity: 0.5;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS ALERT
+   * ======================================================================== */
+  --alert-success-bg: var(--bg-success);
+  --alert-success-border: var(--success);
+  --alert-success-text: var(--text-success);
+  --alert-success-icon: var(--success);
+  --alert-warning-bg: var(--bg-warning);
+  --alert-warning-border: var(--warning);
+  --alert-warning-text: var(--text-warning);
+  --alert-warning-icon: var(--warning);
+  --alert-error-bg: var(--bg-error);
+  --alert-error-border: var(--error);
+  --alert-error-text: var(--text-error);
+  --alert-error-icon: var(--error);
+  --alert-info-bg: var(--bg-info);
+  --alert-info-border: var(--info);
+  --alert-info-text: var(--text-info);
+  --alert-info-icon: var(--info);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DIVIDER
+   * ======================================================================== */
+  --divider-color: var(--border-color);
+  --divider-text: var(--text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SELECT
+   * ======================================================================== */
+  --select-bg: var(--surface-default);
+  --select-text: var(--text-default);
+  --select-border: var(--border-color);
+  --select-placeholder: var(--text-muted);
+  --select-hover-border: var(--role-primary);
+  --select-focus-border: var(--role-primary);
+  --select-focus-shadow: color-mix(in oklab, var(--role-primary) 20%, transparent);
+  --select-disabled-bg: var(--bg-disabled);
+  --select-dropdown-bg: var(--surface-default);
+  --select-dropdown-border: var(--border-color);
+  --select-option-hover-bg: var(--surface-hover);
+  --select-option-selected-bg: color-mix(in oklab, var(--role-primary) 10%, transparent);
+  --select-option-selected-text: var(--role-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TABLE
+   * ======================================================================== */
+  --table-bg: var(--surface-default);
+  --table-border-color: var(--border-color);
+  --table-header-bg: var(--surface-raised);
+  --table-header-text: var(--text-default);
+  --table-header-hover-bg: var(--surface-hover);
+  --table-row-border: color-mix(in oklab, var(--border-color) 50%, transparent);
+  --table-row-hover-bg: var(--surface-hover);
+  --table-row-selected-bg: color-mix(in oklab, var(--role-primary) 10%, transparent);
+  --table-stripe-bg: var(--surface-raised);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS COMBOBOX
+   * ======================================================================== */
+  --combobox-bg: var(--surface-default);
+  --combobox-text: var(--text-default);
+  --combobox-border: var(--border-color);
+  --combobox-placeholder: var(--text-muted);
+  --combobox-hover-border: var(--role-primary);
+  --combobox-focus-border: var(--role-primary);
+  --combobox-focus-shadow: color-mix(in oklab, var(--role-primary) 20%, transparent);
+  --combobox-disabled-bg: var(--bg-disabled);
+  --combobox-dropdown-bg: var(--surface-default);
+  --combobox-dropdown-border: var(--border-color);
+  --combobox-option-hover-bg: var(--surface-hover);
+  --combobox-option-selected-bg: color-mix(in oklab, var(--role-primary) 10%, transparent);
+  --combobox-option-selected-text: var(--role-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS PROGRESS BAR
+   * ======================================================================== */
+  --progress-track-bg: var(--background-header);
+  --progress-fill-bg: var(--role-primary);
+  --progress-fill-success: var(--success);
+  --progress-fill-warning: var(--warning);
+  --progress-fill-error: var(--error);
+  --progress-label-color: var(--text-default);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SKELETON
+   * ======================================================================== */
+  --skeleton-bg: var(--background-header);
+  --skeleton-shimmer: var(--border-color);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS MODAL (compléments)
+   * ======================================================================== */
+  --modal-border-color: var(--border-strong);
+  --modal-box-shadow: var(--shadow-3);
+  --modal-divider: var(--border-subtle);
+  --modal-footer-shadow: inset 0 1px 0 var(--modal-divider);
+  --modal-type-success-color: var(--success);
+  --modal-type-success-contrast: var(--gray-50);
+  --modal-type-warning-color: var(--warning);
+  --modal-type-warning-contrast: var(--gray-900);
+  --modal-type-error-color: var(--error);
+  --modal-type-error-contrast: var(--gray-50);
+  --modal-type-info-color: var(--info);
+  --modal-type-info-contrast: var(--gray-50);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TOAST (compléments)
+   * ======================================================================== */
+  --toast-success-border: var(--success);
+  --toast-warning-border: var(--warning);
+  --toast-error-border: var(--error);
+  --toast-info-border: var(--info);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CHIP
+   * ======================================================================== */
+  --chip-bg: var(--surface-default);
+  --chip-text: var(--text-default);
+  --chip-border: transparent;
+  --chip-hover-bg: var(--surface-hover);
+  --chip-focus-ring: color-mix(in oklab, var(--role-primary) 30%, transparent);
+  --chip-selected-ring: var(--role-primary);
+  --chip-disabled-opacity: 0.5;
+
+  /* Primary */
+  --chip-primary-bg: var(--role-primary);
+  --chip-primary-text: var(--gray-50);
+  --chip-primary-border: transparent;
+  --chip-primary-hover-bg: color-mix(in oklab, var(--role-primary) 85%, var(--background-main));
+  --chip-primary-hover-bg-outlined: color-mix(in oklab, var(--role-primary) 10%, transparent);
+
+  /* Success */
+  --chip-success-bg: var(--bg-success);
+  --chip-success-text: var(--success);
+  --chip-success-border: var(--success);
+  --chip-success-hover-bg: color-mix(in oklab, var(--success) 20%, transparent);
+  --chip-success-hover-bg-outlined: color-mix(in oklab, var(--success) 10%, transparent);
+
+  /* Warning */
+  --chip-warning-bg: var(--bg-warning);
+  --chip-warning-text: var(--warning);
+  --chip-warning-border: var(--warning);
+  --chip-warning-hover-bg: color-mix(in oklab, var(--warning) 25%, transparent);
+  --chip-warning-hover-bg-outlined: color-mix(in oklab, var(--warning) 10%, transparent);
+
+  /* Error */
+  --chip-error-bg: var(--bg-error);
+  --chip-error-text: var(--error);
+  --chip-error-border: var(--error);
+  --chip-error-hover-bg: color-mix(in oklab, var(--error) 25%, transparent);
+  --chip-error-hover-bg-outlined: color-mix(in oklab, var(--error) 10%, transparent);
+
+  /* Info */
+  --chip-info-bg: var(--bg-info);
+  --chip-info-text: var(--info);
+  --chip-info-border: var(--info);
+  --chip-info-hover-bg: color-mix(in oklab, var(--info) 25%, transparent);
+  --chip-info-hover-bg-outlined: color-mix(in oklab, var(--info) 10%, transparent);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SLIDER
+   * ======================================================================== */
+  --slider-track-bg: var(--background-header);
+  --slider-fill-bg: var(--role-primary);
+  --slider-thumb-bg: var(--surface-default);
+  --slider-thumb-border-color: var(--role-primary);
+  --slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --slider-thumb-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --slider-thumb-shadow-focus: 0 0 0 3px color-mix(in oklab, var(--role-primary) 30%, transparent);
+  --slider-thumb-shadow-active: 0 0 0 4px color-mix(in oklab, var(--role-primary) 20%, transparent);
+  --slider-tick-color: var(--border-color);
+  --slider-label-color: var(--text-default);
+  --slider-thumb-label-bg: var(--background-header);
+  --slider-thumb-label-color: var(--text-default);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS FILE UPLOAD
+   * ======================================================================== */
+  --file-upload-border: var(--border-color);
+  --file-upload-border-hover: var(--role-primary);
+  --file-upload-border-active: var(--role-primary);
+  --file-upload-bg: var(--surface-default);
+  --file-upload-bg-hover: var(--surface-hover);
+  --file-upload-bg-active: color-mix(in oklab, var(--role-primary) 10%, transparent);
+  --file-upload-text-color: var(--text-muted);
+  --file-upload-label-color: var(--text-default);
+  --file-upload-help-color: var(--text-subtle);
+  --file-upload-hint-color: var(--text-subtle);
+  --file-upload-icon-color: var(--text-muted);
+  --file-upload-icon-color-hover: var(--role-primary);
+  --file-upload-icon-color-active: var(--role-primary);
+  --file-upload-file-border: var(--border-subtle);
+  --file-upload-file-bg: var(--surface-default);
+  --file-upload-file-bg-hover: var(--surface-hover);
 }