@kksdev/ds-angular 1.5.0 → 1.6.0

package/index.d.ts

@@ -5847,6 +5847,269 @@ declare class DsCalendar {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsCalendar, "ds-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "events": { "alias": "events"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; }, { "dateSelect": "dateSelect"; "monthChange": "monthChange"; "modeChange": "modeChange"; "eventClick": "eventClick"; }, never, never, true, never>;
 }
 
+type InputNumberSize = 'sm' | 'md' | 'lg';
+type InputNumberControlsPosition = 'both' | 'right';
+declare class DsInputNumber implements ControlValueAccessor {
+    min: _angular_core.InputSignal<number>;
+    max: _angular_core.InputSignal<number>;
+    step: _angular_core.InputSignal<number>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    size: _angular_core.InputSignal<InputNumberSize>;
+    placeholder: _angular_core.InputSignal<string>;
+    prefix: _angular_core.InputSignal<string | undefined>;
+    suffix: _angular_core.InputSignal<string | undefined>;
+    precision: _angular_core.InputSignal<number>;
+    controls: _angular_core.InputSignal<boolean>;
+    controlsPosition: _angular_core.InputSignal<InputNumberControlsPosition>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    id: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    valueChange: _angular_core.OutputEmitterRef<number>;
+    inputElement?: ElementRef<HTMLInputElement>;
+    readonly faMinus: IconDefinition$1;
+    readonly faPlus: IconDefinition$1;
+    private readonly disabledState;
+    readonly internalValue: _angular_core.WritableSignal<number | null>;
+    readonly focused: _angular_core.WritableSignal<boolean>;
+    readonly displayValue: _angular_core.WritableSignal<string>;
+    constructor();
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly isReadonly: _angular_core.Signal<boolean>;
+    readonly showControls: _angular_core.Signal<boolean>;
+    readonly controlsOnRight: _angular_core.Signal<boolean>;
+    readonly controlsOnBoth: _angular_core.Signal<boolean>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly canDecrement: _angular_core.Signal<boolean>;
+    readonly canIncrement: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: (value: number | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private formatValue;
+    private parseValue;
+    private clampValue;
+    private roundToPrecision;
+    private emitValue;
+    onInputChange(event: Event): void;
+    onInputBlur(): void;
+    onInputFocus(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    increment(): void;
+    decrement(): void;
+    private incrementBy;
+    private decrementBy;
+    private setToMin;
+    private setToMax;
+    readonly ariaValueMin: _angular_core.Signal<number>;
+    readonly ariaValueMax: _angular_core.Signal<number>;
+    readonly ariaValueNow: _angular_core.Signal<number | undefined>;
+    readonly ariaValueText: _angular_core.Signal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsInputNumber, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsInputNumber, "ds-input-number", 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; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "controlsPosition": { "alias": "controlsPosition"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Option pour un segment
+ */
+interface SegmentOption {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+/**
+ * Taille du segmented control
+ */
+type SegmentedControlSize = 'sm' | 'md' | 'lg';
+/**
+ * Orientation du segmented control
+ */
+type SegmentedControlOrientation = 'horizontal' | 'vertical';
+/**
+ * Couleur du segment actif
+ */
+type SegmentedControlColor = 'primary' | 'neutral';
+/**
+ * DS Segmented Control
+ *
+ * Composant groupe de boutons mutuellement exclusifs visuellement connectés.
+ * Alternative stylisée aux boutons radio pour basculer entre vues, modes ou options.
+ *
+ * @example
+ * // Formulaire réactif
+ * <ds-segmented-control
+ *   formControlName="view"
+ *   [options]="viewOptions"
+ *   size="md"
+ *   fullWidth
+ * />
+ *
+ * @example
+ * // Template-driven
+ * <ds-segmented-control
+ *   [(ngModel)]="selectedView"
+ *   [options]="[
+ *     { value: 'list', label: 'Liste', icon: 'fas-list' },
+ *     { value: 'grid', label: 'Grille', icon: 'fas-grid' },
+ *     { value: 'map', label: 'Carte', icon: 'fas-map' }
+ *   ]"
+ *   color="neutral"
+ * />
+ */
+declare class DsSegmentedControl implements ControlValueAccessor {
+    /**
+     * Liste des options du segmented control
+     */
+    options: _angular_core.InputSignal<SegmentOption[]>;
+    /**
+     * Taille du segmented control (sm, md, lg)
+     */
+    size: _angular_core.InputSignal<SegmentedControlSize>;
+    /**
+     * État désactivé global
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Prend toute la largeur du conteneur
+     */
+    fullWidth: _angular_core.InputSignal<boolean>;
+    /**
+     * Orientation (horizontal, vertical)
+     */
+    orientation: _angular_core.InputSignal<SegmentedControlOrientation>;
+    /**
+     * Couleur du segment actif (primary, neutral)
+     */
+    color: _angular_core.InputSignal<SegmentedControlColor>;
+    private readonly disabledState;
+    protected readonly internalValue: _angular_core.WritableSignal<string | null>;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly containerClasses: _angular_core.Signal<Record<string, boolean>>;
+    readonly activeIndex: _angular_core.Signal<number>;
+    /**
+     * Vérifie si une option est sélectionnée
+     */
+    protected isOptionSelected(option: SegmentOption): boolean;
+    /**
+     * Vérifie si une option est désactivée
+     */
+    protected isOptionDisabled(option: SegmentOption): boolean;
+    /**
+     * Classes CSS pour un segment
+     */
+    protected getSegmentClasses(option: SegmentOption): Record<string, boolean>;
+    private onChange;
+    private onTouched;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onSegmentClick(option: SegmentOption): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private findNextEnabledOption;
+    private findPreviousEnabledOption;
+    private focusSegment;
+    protected trackByValue(_index: number, option: SegmentOption): string;
+    /**
+     * Parse l'icône depuis le format string vers le format FontAwesome
+     * @param iconName - Nom de l'icône (ex: 'fas-list', 'list', 'fa-solid fa-list')
+     * @returns Tuple [prefix, iconName] pour FontAwesome
+     */
+    protected parseIcon(iconName: string): [string, string];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsSegmentedControl, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsSegmentedControl, "ds-segmented-control", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type ColorPickerSize = 'sm' | 'md' | 'lg';
+type ColorFormat = 'hex' | 'rgb' | 'hsl';
+interface RGBColor {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+interface HSLColor {
+    h: number;
+    s: number;
+    l: number;
+    a?: number;
+}
+/**
+ * DsColorPicker - Composant de sélection de couleur
+ *
+ * @description
+ * Sélecteur de couleur avec palette prédéfinie, spectre de couleurs,
+ * support RGB/HSL, alpha channel optionnel, et intégration formulaires.
+ *
+ * @example
+ * ```html
+ * <ds-color-picker
+ *   [value]="'#3b82f6'"
+ *   [showAlpha]="true"
+ *   (colorChange)="onColorChange($event)">
+ * </ds-color-picker>
+ * ```
+ */
+declare class DsColorPicker implements ControlValueAccessor {
+    private overlay;
+    private elementRef;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<ColorPickerSize>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly showAlpha: _angular_core.InputSignal<boolean>;
+    readonly presetColors: _angular_core.InputSignal<string[]>;
+    readonly format: _angular_core.InputSignal<ColorFormat>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly allowClear: _angular_core.InputSignal<boolean>;
+    readonly showRecentColors: _angular_core.InputSignal<boolean>;
+    readonly maxRecentColors: _angular_core.InputSignal<number>;
+    readonly colorChange: _angular_core.OutputEmitterRef<string>;
+    readonly pickerIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly clearIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly checkIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly internalValue: _angular_core.WritableSignal<string>;
+    readonly isFocused: _angular_core.WritableSignal<boolean>;
+    readonly recentColors: _angular_core.WritableSignal<string[]>;
+    private overlayRef;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly displayValue: _angular_core.Signal<string>;
+    readonly previewColor: _angular_core.Signal<string>;
+    readonly effectivePresets: _angular_core.Signal<string[]>;
+    private onChange;
+    private onTouched;
+    constructor(overlay: Overlay, elementRef: ElementRef);
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    onFocus(): void;
+    onBlur(): void;
+    clear(): void;
+    onColorSelected(color: string): void;
+    private updateValue;
+    private createOverlay;
+    private destroyOverlay;
+    private addToRecentColors;
+    private loadRecentColors;
+    private saveRecentColors;
+    private toHex;
+    private toRGB;
+    private toHSL;
+    private hexToRGB;
+    private parseRGB;
+    private rgbToHSL;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsColorPicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsColorPicker, "ds-color-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showAlpha": { "alias": "showAlpha"; "required": false; "isSignal": true; }; "presetColors": { "alias": "presetColors"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "allowClear": { "alias": "allowClear"; "required": false; "isSignal": true; }; "showRecentColors": { "alias": "showRecentColors"; "required": false; "isSignal": true; }; "maxRecentColors": { "alias": "maxRecentColors"; "required": false; "isSignal": true; }; }, { "colorChange": "colorChange"; }, never, never, true, never>;
+}
+
 /**
  * Positions standard pour dropdowns (menus déroulants, select, etc.)
  *
@@ -6215,5 +6478,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, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsChip, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, 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, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DrawerPosition, DrawerSize, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, EmptySize, FileUploadSize, I18nLabels, InputAppearance, InputSize, InputState, InputType, MenuItem, MenuSize, MenuTrigger, NotificationAction, NotificationConfig, NotificationItem, NotificationPlacement, PageChangeEvent, PageSizeOption, PaginationSize, PasswordCriterion, PasswordStrength, PasswordStrengthSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RadioGroupLayout, RadioOption, RadioSize, RatingSize, SearchInputSize, 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 };
+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 };

package/package.json

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

package/src/styles/themes/_dark.scss

@@ -666,6 +666,26 @@
   --chip-info-hover-bg: color-mix(in oklab, var(--info) 30%, transparent);
   --chip-info-hover-bg-outlined: color-mix(in oklab, var(--info) 15%, transparent);
 
+  /* ==========================================================================
+   * SÉMANTIQUES DS SEGMENTED CONTROL
+   * ======================================================================== */
+  --segmented-bg: var(--gray-800);
+  --segmented-text: var(--text-default);
+  --segmented-border-color: var(--gray-700);
+  --segmented-hover-bg: color-mix(in oklab, var(--gray-100) 10%, transparent);
+
+  /* Primary color variant */
+  --segmented-active-bg-primary: var(--color-primary);
+  --segmented-active-text-primary: var(--gray-900);
+
+  /* Neutral color variant */
+  --segmented-active-bg-neutral: var(--gray-700);
+  --segmented-active-text-neutral: var(--text-default);
+
+  /* Active state (generic, deprecated) */
+  --segmented-active-bg: var(--segmented-active-bg-primary);
+  --segmented-active-text: var(--segmented-active-text-primary);
+
   /* ==========================================================================
    * SÉMANTIQUES DS EMPTY
    * ======================================================================== */
@@ -891,4 +911,25 @@
   --calendar-month-current-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
   --calendar-month-current-border: var(--color-primary);
   --calendar-month-current-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS COLOR PICKER
+   * ======================================================================== */
+  --colorpicker-bg: var(--gray-800);
+  --colorpicker-border: var(--gray-700);
+  --colorpicker-border-hover: var(--gray-600);
+  --colorpicker-text: var(--gray-100);
+  --colorpicker-placeholder: var(--gray-500);
+  --colorpicker-icon: var(--gray-400);
+  --colorpicker-clear-icon: var(--gray-400);
+  --colorpicker-preview-border: var(--gray-700);
+  --colorpicker-action-hover-bg: var(--gray-700);
+  --colorpicker-focus-shadow: color-mix(in oklab, var(--color-primary) 25%, transparent);
+
+  --colorpicker-panel-bg: var(--gray-800);
+  --colorpicker-panel-border: var(--gray-700);
+  --colorpicker-input-bg: var(--gray-750);
+  --colorpicker-input-border: var(--gray-700);
+  --colorpicker-input-text: var(--gray-100);
+  --colorpicker-preset-border: var(--gray-700);
 }

package/src/styles/themes/_light.scss

@@ -652,6 +652,26 @@
   /* Info */
   --chip-info-bg: var(--bg-info);
   --chip-info-text: var(--info);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SEGMENTED CONTROL
+   * ======================================================================== */
+  --segmented-bg: var(--gray-100);
+  --segmented-text: var(--text-default);
+  --segmented-border-color: var(--border-subtle);
+  --segmented-hover-bg: color-mix(in oklab, var(--gray-900) 5%, transparent);
+
+  /* Primary color variant */
+  --segmented-active-bg-primary: var(--color-primary);
+  --segmented-active-text-primary: var(--gray-50);
+
+  /* Neutral color variant */
+  --segmented-active-bg-neutral: var(--surface-default);
+  --segmented-active-text-neutral: var(--text-default);
+
+  /* Active state (generic, deprecated) */
+  --segmented-active-bg: var(--segmented-active-bg-primary);
+  --segmented-active-text: var(--segmented-active-text-primary);
   --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);
@@ -881,4 +901,25 @@
   --calendar-month-current-bg: var(--blue-50);
   --calendar-month-current-border: var(--color-primary);
   --calendar-month-current-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS COLOR PICKER
+   * ======================================================================== */
+  --colorpicker-bg: var(--background-main);
+  --colorpicker-border: var(--border-default);
+  --colorpicker-border-hover: var(--border-strong);
+  --colorpicker-text: var(--text-default);
+  --colorpicker-placeholder: var(--text-muted);
+  --colorpicker-icon: var(--text-muted);
+  --colorpicker-clear-icon: var(--text-muted);
+  --colorpicker-preview-border: var(--border-default);
+  --colorpicker-action-hover-bg: var(--surface-hover);
+  --colorpicker-focus-shadow: color-mix(in oklab, var(--color-primary) 25%, transparent);
+
+  --colorpicker-panel-bg: var(--background-main);
+  --colorpicker-panel-border: var(--border-default);
+  --colorpicker-input-bg: var(--background-main);
+  --colorpicker-input-border: var(--border-default);
+  --colorpicker-input-text: var(--text-default);
+  --colorpicker-preset-border: var(--border-default);
 }

package/src/styles/tokens/_semantic.scss

@@ -448,6 +448,41 @@ $datepicker-nav-size-sm: 24px;
 $datepicker-nav-size-md: 32px;
 $datepicker-nav-size-lg: 40px;
 
+// === COLOR PICKER ===
+
+$colorpicker-height-sm: 32px;
+$colorpicker-height-md: 40px;
+$colorpicker-height-lg: 48px;
+
+$colorpicker-padding-sm: $space-1 $space-2;
+$colorpicker-padding-md: $space-2;
+$colorpicker-padding-lg: $space-3;
+
+$colorpicker-font-size-sm: $font-size-2;
+$colorpicker-font-size-md: $font-size-3;
+$colorpicker-font-size-lg: $font-size-4;
+
+$colorpicker-preview-size-sm: 20px;
+$colorpicker-preview-size-md: 28px;
+$colorpicker-preview-size-lg: 36px;
+
+$colorpicker-action-size-sm: 20px;
+$colorpicker-action-size-md: 24px;
+$colorpicker-action-size-lg: 28px;
+
+$colorpicker-gap: $space-2;
+$colorpicker-radius: $radius-2;
+
+$colorpicker-panel-width: 300px;
+$colorpicker-panel-padding: $space-4;
+$colorpicker-panel-gap: $space-3;
+$colorpicker-panel-radius: $radius-2;
+$colorpicker-panel-shadow: $shadow-3;
+
+$colorpicker-spectrum-height: 180px;
+$colorpicker-slider-height: 12px;
+$colorpicker-preset-size: 28px;
+
 // === SLIDER ===
 
 $slider-track-height-sm: 4px;
@@ -498,6 +533,21 @@ $file-upload-padding-sm: $space-6;
 $file-upload-padding-md: $space-8;
 $file-upload-padding-lg: $space-10;
 
+// === INPUT NUMBER ===
+
+$input-number-height-sm: 32px;
+$input-number-height-md: 40px;
+$input-number-height-lg: 48px;
+
+$input-number-btn-size-sm: 28px;
+$input-number-btn-size-md: 36px;
+$input-number-btn-size-lg: 44px;
+
+$input-number-btn-bg: $gray-100;
+$input-number-btn-hover: $gray-200;
+$input-number-btn-active: $gray-300;
+$input-number-btn-disabled: $gray-50;
+
 $file-upload-radius: $radius-2;
 $file-upload-file-radius: $radius-2;
 
@@ -645,6 +695,29 @@ $password-strength-bar-radius: $radius-1;
 $password-strength-label-font-size: $font-size-2;
 $password-strength-label-gap: $space-2;
 
+// === SEGMENTED CONTROL ===
+
+$segmented-height-sm: 32px;
+$segmented-height-md: 40px;
+$segmented-height-lg: 48px;
+
+$segmented-padding-sm: $space-2;
+$segmented-padding-md: $space-3;
+$segmented-padding-lg: $space-4;
+
+$segmented-font-size-sm: $font-size-2;
+$segmented-font-size-md: $font-size-3;
+$segmented-font-size-lg: $font-size-4;
+
+$segmented-icon-size-sm: 14px;
+$segmented-icon-size-md: 16px;
+$segmented-icon-size-lg: 18px;
+
+$segmented-gap: 4px;
+$segmented-segment-gap: $space-2;
+$segmented-border-radius: $radius-2;
+$segmented-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
 // === TIMELINE ===
 
 $timeline-dot-size-sm: 20px;

package/src/styles/tokens/_tokens.scss

@@ -524,6 +524,33 @@
   --datepicker-radius: #{$datepicker-radius};
   --datepicker-shadow: #{$datepicker-shadow};
 
+  /* === COLOR PICKER === */
+  --colorpicker-height-sm: #{$colorpicker-height-sm};
+  --colorpicker-height-md: #{$colorpicker-height-md};
+  --colorpicker-height-lg: #{$colorpicker-height-lg};
+  --colorpicker-padding-sm: #{$colorpicker-padding-sm};
+  --colorpicker-padding-md: #{$colorpicker-padding-md};
+  --colorpicker-padding-lg: #{$colorpicker-padding-lg};
+  --colorpicker-font-size-sm: #{$colorpicker-font-size-sm};
+  --colorpicker-font-size-md: #{$colorpicker-font-size-md};
+  --colorpicker-font-size-lg: #{$colorpicker-font-size-lg};
+  --colorpicker-preview-size-sm: #{$colorpicker-preview-size-sm};
+  --colorpicker-preview-size-md: #{$colorpicker-preview-size-md};
+  --colorpicker-preview-size-lg: #{$colorpicker-preview-size-lg};
+  --colorpicker-action-size-sm: #{$colorpicker-action-size-sm};
+  --colorpicker-action-size-md: #{$colorpicker-action-size-md};
+  --colorpicker-action-size-lg: #{$colorpicker-action-size-lg};
+  --colorpicker-gap: #{$colorpicker-gap};
+  --colorpicker-radius: #{$colorpicker-radius};
+  --colorpicker-panel-width: #{$colorpicker-panel-width};
+  --colorpicker-panel-padding: #{$colorpicker-panel-padding};
+  --colorpicker-panel-gap: #{$colorpicker-panel-gap};
+  --colorpicker-panel-radius: #{$colorpicker-panel-radius};
+  --colorpicker-panel-shadow: #{$colorpicker-panel-shadow};
+  --colorpicker-spectrum-height: #{$colorpicker-spectrum-height};
+  --colorpicker-slider-height: #{$colorpicker-slider-height};
+  --colorpicker-preset-size: #{$colorpicker-preset-size};
+
   /* === SLIDER === */
   --slider-track-height-sm: #{$slider-track-height-sm};
   --slider-track-height-md: #{$slider-track-height-md};
@@ -593,6 +620,18 @@
   --chip-remove-icon-size-lg: #{$chip-remove-icon-size-lg};
   --chip-border-radius: #{$chip-border-radius};
 
+  /* === INPUT NUMBER === */
+  --input-number-height-sm: #{$input-number-height-sm};
+  --input-number-height-md: #{$input-number-height-md};
+  --input-number-height-lg: #{$input-number-height-lg};
+  --input-number-btn-size-sm: #{$input-number-btn-size-sm};
+  --input-number-btn-size-md: #{$input-number-btn-size-md};
+  --input-number-btn-size-lg: #{$input-number-btn-size-lg};
+  --input-number-btn-bg: #{$input-number-btn-bg};
+  --input-number-btn-hover: #{$input-number-btn-hover};
+  --input-number-btn-active: #{$input-number-btn-active};
+  --input-number-btn-disabled: #{$input-number-btn-disabled};
+
   /* === EMPTY === */
   --empty-padding-sm: #{$empty-padding-sm};
   --empty-padding-md: #{$empty-padding-md};
@@ -829,6 +868,28 @@
   --calendar-month-font-size: #{$calendar-month-font-size};
   --calendar-month-font-size-sm: #{$calendar-month-font-size-sm};
   --calendar-month-font-size-lg: #{$calendar-month-font-size-lg};
+
+  /* === SEGMENTED CONTROL === */
+  --segmented-height-sm: #{$segmented-height-sm};
+  --segmented-height-md: #{$segmented-height-md};
+  --segmented-height-lg: #{$segmented-height-lg};
+
+  --segmented-padding-sm: #{$segmented-padding-sm};
+  --segmented-padding-md: #{$segmented-padding-md};
+  --segmented-padding-lg: #{$segmented-padding-lg};
+
+  --segmented-font-size-sm: #{$segmented-font-size-sm};
+  --segmented-font-size-md: #{$segmented-font-size-md};
+  --segmented-font-size-lg: #{$segmented-font-size-lg};
+
+  --segmented-icon-size-sm: #{$segmented-icon-size-sm};
+  --segmented-icon-size-md: #{$segmented-icon-size-md};
+  --segmented-icon-size-lg: #{$segmented-icon-size-lg};
+
+  --segmented-gap: #{$segmented-gap};
+  --segmented-segment-gap: #{$segmented-segment-gap};
+  --segmented-border-radius: #{$segmented-border-radius};
+  --segmented-active-shadow: #{$segmented-active-shadow};
 }
 
 /* === ACCESSIBILITY: REDUCED MOTION === */