@kksdev/ds-angular 1.7.0 → 1.7.1

package/index.d.ts

@@ -9,7 +9,6 @@ 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';
 type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'default' | 'accent';
@@ -6450,6 +6449,12 @@ type SidebarSize = 'sm' | 'md' | 'lg';
  * Position de la sidebar.
  */
 type SidebarPosition = 'left' | 'right';
+/**
+ * Trigger pour ouvrir le popover en mode collapsed.
+ * - `hover` : Ouvre au survol de la souris
+ * - `click` : Ouvre au clic
+ */
+type SidebarCollapsedTrigger = 'hover' | 'click';
 /**
  * Variante de couleur pour les badges.
  */
@@ -6534,6 +6539,8 @@ declare class DsSidebarItemComponent {
     readonly showTooltip: _angular_core.InputSignal<boolean>;
     readonly expandedItemIds: _angular_core.InputSignal<Set<string | number>>;
     readonly activeItemId: _angular_core.InputSignal<string | number | null>;
+    readonly sidebarPosition: _angular_core.InputSignal<SidebarPosition>;
+    readonly collapsedTrigger: _angular_core.InputSignal<SidebarCollapsedTrigger>;
     readonly itemClick: _angular_core.OutputEmitterRef<SidebarItemClickEvent>;
     readonly itemToggle: _angular_core.OutputEmitterRef<SidebarItem>;
     readonly itemKeydown: _angular_core.OutputEmitterRef<KeyboardEvent>;
@@ -6542,10 +6549,17 @@ declare class DsSidebarItemComponent {
     readonly externalLinkIcon: _fortawesome_fontawesome_common_types.IconDefinition;
     private readonly elementRef;
     private readonly router;
+    private readonly popoverOpen;
+    readonly isPopoverOpen: _angular_core.Signal<boolean>;
+    private readonly activeChildIndex;
+    isHoveringPopover: boolean;
+    private hideTimeout;
     readonly hasChildren: _angular_core.Signal<boolean>;
     readonly isExpanded: _angular_core.Signal<boolean>;
     readonly isActive: _angular_core.Signal<boolean>;
     readonly indentPadding: _angular_core.Signal<number>;
+    /** Positions du popover selon la position de la sidebar */
+    readonly popoverPositions: _angular_core.Signal<ConnectedPosition[]>;
     /**
      * Gère le clic sur l'item.
      */
@@ -6566,8 +6580,68 @@ declare class DsSidebarItemComponent {
      * Donne le focus à cet élément.
      */
     focus(): void;
+    /**
+     * Ouvre le popover (mode collapsed + hasChildren).
+     */
+    openPopover(): void;
+    /**
+     * Ferme le popover.
+     */
+    closePopover(): void;
+    /**
+     * Ferme le popover avec un délai.
+     */
+    closePopoverWithDelay(): void;
+    /**
+     * Annule le timeout de fermeture.
+     */
+    private clearHideTimeout;
+    /**
+     * Gestion du mouseenter sur l'item (ouvre le popover en mode collapsed + trigger hover).
+     */
+    handleMouseEnter(): void;
+    /**
+     * Gestion du mouseleave sur l'item.
+     */
+    handleMouseLeave(): void;
+    /**
+     * Toggle le popover (pour le mode click).
+     */
+    togglePopover(): void;
+    /**
+     * Gestion du mouseenter sur le popover.
+     */
+    handlePopoverMouseEnter(): void;
+    /**
+     * Gestion du mouseleave sur le popover.
+     */
+    handlePopoverMouseLeave(): void;
+    /**
+     * Navigation clavier dans le popover.
+     */
+    handlePopoverKeydown(event: KeyboardEvent): void;
+    /**
+     * Déplace l'index actif dans le popover.
+     */
+    private moveChildIndex;
+    /**
+     * Sélectionne l'enfant actif dans le popover.
+     */
+    private selectActiveChild;
+    /**
+     * Gère le clic sur un enfant dans le popover.
+     */
+    handleChildClick(child: SidebarItem, event: MouseEvent): void;
+    /**
+     * Met à jour l'index actif au hover.
+     */
+    setActiveChildIndex(index: number): void;
+    /**
+     * Retourne l'index actif du popover.
+     */
+    getActiveChildIndex(): number;
     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>;
+    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; }; "sidebarPosition": { "alias": "sidebarPosition"; "required": false; "isSignal": true; }; "collapsedTrigger": { "alias": "collapsedTrigger"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemToggle": "itemToggle"; "itemKeydown": "itemKeydown"; }, never, never, true, never>;
 }
 
 /**
@@ -6628,6 +6702,8 @@ declare class DsSidebar implements OnInit, AfterViewInit, OnDestroy {
     readonly autoCollapseOnMobile: _angular_core.InputSignal<boolean>;
     /** Affiche les tooltips en mode collapsed (désactivable) */
     readonly showTooltips: _angular_core.InputSignal<boolean>;
+    /** Trigger pour ouvrir le popover des sous-menus en mode collapsed */
+    readonly collapsedTrigger: _angular_core.InputSignal<SidebarCollapsedTrigger>;
     /** 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 */
@@ -6770,7 +6846,18 @@ declare class DsSidebar implements OnInit, AfterViewInit, OnDestroy {
      */
     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>;
+    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; }; "collapsedTrigger": { "alias": "collapsedTrigger"; "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>;
+}
+
+declare class DsSidebarFooterItemComponent {
+    readonly icon: _angular_core.InputSignal<IconDefinition$2>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly mode: _angular_core.InputSignal<SidebarMode>;
+    readonly variant: _angular_core.InputSignal<"default" | "danger">;
+    readonly clicked: _angular_core.OutputEmitterRef<void>;
+    readonly isCollapsed: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsSidebarFooterItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsSidebarFooterItemComponent, "ds-sidebar-footer-item", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
 }
 
 /**
@@ -7611,53 +7698,22 @@ declare const POPOVER_POSITIONS: ConnectedPosition[];
  * 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;
-};
+/**
+ * Positions pour popover sidebar (sidebar à gauche → popover à droite)
+ *
+ * Utilise DROPDOWN_POSITIONS_RIGHT existant.
+ * Alias exporté pour clarté sémantique.
+ */
+declare const SIDEBAR_POPOVER_POSITIONS_RIGHT: ConnectedPosition[];
+/**
+ * Positions pour popover sidebar (sidebar à droite → popover à gauche)
+ *
+ * Stratégie :
+ * 1. Position préférée : à gauche, aligné en haut
+ * 2. Fallback : à gauche, aligné au centre
+ * 3. Fallback : à droite si pas d'espace à gauche
+ */
+declare const SIDEBAR_POPOVER_POSITIONS_LEFT: ConnectedPosition[];
 
 /**
  * Service centralisé pour l'enregistrement des icônes FontAwesome.
@@ -7954,5 +8010,5 @@ declare function generateId(): string;
  */
 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 };
+export { AUTOCOMPLETE_POSITIONS, 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, DsSidebarFooterItemComponent, 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, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, 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, SidebarCollapsedTrigger, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kksdev/ds-angular",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Angular 20 standalone component library - Design System with 50 components, 7 primitives, 3 themes, i18n support",
   "keywords": [
     "angular",
@@ -12,7 +12,7 @@
     "signals",
     "accessibility",
     "wcag",
-    "storybook"
+    "showcase"
   ],
   "author": "KKSDEV Team",
   "license": "MIT",

package/src/styles/storybook.scss

@@ -1,58 +0,0 @@
-// ============================================================================
-// DS-ANGULAR — Storybook Global Styles
-// ============================================================================
-//
-// Ce fichier importe tous les styles nécessaires pour Storybook.
-// Il est référencé dans angular.json pour les targets storybook.
-//
-// ============================================================================
-
-// Import des tokens (variables CSS sur :root)
-// Note: @use doit toujours être en premier en SCSS
-@use './tokens/tokens';
-
-// Import des thèmes (variables sur :root.theme-light et :root.theme-dark)
-@use './themes/light';
-@use './themes/dark';
-@use './themes/custom';
-
-// Import des styles CDK Overlay (nécessaire pour modal, dropdown, tooltip, etc.)
-@import '@angular/cdk/overlay-prebuilt.css';
-
-:root,
-body {
-  font-size: var(--font-size-m, 1rem);
-}
-
-:root[data-typography='small'],
-body[data-typography='small'] {
-  font-size: var(--font-size-s, 0.875rem);
-}
-
-:root[data-typography='large'],
-body[data-typography='large'] {
-  font-size: var(--font-size-l, 1.5rem);
-}
-
-:root[data-density='compact'],
-body[data-density='compact'] {
-  --btn-height-md: var(--btn-height-sm);
-  --input-height-md: var(--input-height-sm);
-  --space-4: var(--space-3);
-}
-
-:root[data-density='comfortable'],
-body[data-density='comfortable'] {
-  --btn-height-md: var(--btn-height-lg);
-  --input-height-md: var(--input-height-lg);
-  --space-4: var(--space-6);
-}
-
-// ============================================================================
-// CDK Overlay Panel Classes
-// ============================================================================
-// Ces styles sont globaux car les overlays CDK sont rendus au niveau du document
-
-.ds-time-picker-panel-overlay {
-  z-index: 1000;
-}