@kksdev/ds-angular 1.4.0 → 1.5.0

package/package.json

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

package/src/styles/themes/_dark.scss

@@ -724,4 +724,171 @@
   --tree-toggle-color: var(--gray-400);
   --tree-toggle-hover-color: var(--gray-100);
   --tree-icon-color: var(--gray-400);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS PASSWORD STRENGTH
+   * ======================================================================== */
+  --password-strength-bg: var(--gray-700);
+  --password-strength-weak: var(--error);
+  --password-strength-medium: var(--warning);
+  --password-strength-strong: var(--success);
+  --password-strength-text: var(--gray-400);
+  --password-strength-criterion-valid: var(--success);
+  --password-strength-criterion-invalid: var(--gray-500);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TIMELINE
+   * ======================================================================== */
+  --timeline-dot-bg: var(--gray-800);
+  --timeline-dot-border-color: var(--gray-600);
+
+  --timeline-dot-bg-default: var(--gray-700);
+  --timeline-dot-border-default: var(--gray-500);
+
+  --timeline-dot-bg-primary: color-mix(in oklab, var(--color-primary) 20%, var(--gray-800));
+  --timeline-dot-border-primary: var(--color-primary);
+
+  --timeline-dot-bg-success: color-mix(in oklab, var(--success) 20%, var(--gray-800));
+  --timeline-dot-border-success: var(--success);
+
+  --timeline-dot-bg-warning: color-mix(in oklab, var(--warning) 20%, var(--gray-800));
+  --timeline-dot-border-warning: var(--warning);
+
+  --timeline-dot-bg-error: color-mix(in oklab, var(--error) 20%, var(--gray-800));
+  --timeline-dot-border-error: var(--error);
+
+  --timeline-dot-bg-info: color-mix(in oklab, var(--info) 20%, var(--gray-800));
+  --timeline-dot-border-info: var(--info);
+
+  --timeline-dot-bg-pending: color-mix(in oklab, var(--gray-600) 20%, var(--gray-800));
+  --timeline-dot-border-pending: var(--gray-500);
+
+  --timeline-line-color: var(--gray-700);
+  --timeline-date-color: var(--gray-400);
+  --timeline-text-color: var(--gray-100);
+  --timeline-text-color-pending: var(--gray-400);
+  --timeline-icon-color: var(--color-primary);
+  --timeline-icon-color-pending: var(--gray-500);
+
+  /* ==========================================================================
+   * TRANSFER
+   * ======================================================================== */
+  --transfer-bg: var(--gray-800);
+  --transfer-border-color: var(--gray-700);
+  --transfer-header-bg: var(--gray-850);
+  --transfer-header-border-color: var(--gray-700);
+  --transfer-title-color: var(--gray-100);
+  --transfer-count-color: var(--gray-400);
+
+  --transfer-search-border-color: var(--gray-700);
+  --transfer-search-input-bg: var(--gray-900);
+  --transfer-search-input-text: var(--gray-100);
+  --transfer-search-input-border: var(--gray-700);
+  --transfer-search-input-focus: var(--color-primary);
+  --transfer-search-input-focus-shadow: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --transfer-search-input-disabled-bg: var(--gray-800);
+  --transfer-search-placeholder: var(--gray-500);
+  --transfer-search-clear-color: var(--gray-400);
+  --transfer-search-clear-hover: var(--gray-100);
+
+  --transfer-item-border: var(--gray-750);
+  --transfer-item-hover-bg: var(--gray-750);
+  --transfer-item-selected-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
+  --transfer-item-selected-hover-bg: color-mix(in oklab, var(--color-primary) 20%, var(--gray-800));
+  --transfer-item-label-color: var(--gray-100);
+  --transfer-item-description-color: var(--gray-400);
+
+  --transfer-empty-color: var(--gray-500);
+
+  /* ==========================================================================
+   * CAROUSEL
+   * ======================================================================== */
+  --carousel-bg: var(--gray-900);
+
+  --carousel-content-bg: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+  --carousel-content-text: var(--gray-100);
+
+  --carousel-arrow-bg: rgba(255, 255, 255, 0.15);
+  --carousel-arrow-color: var(--gray-100);
+  --carousel-arrow-bg-hover: rgba(255, 255, 255, 0.25);
+  --carousel-arrow-color-hover: var(--color-primary);
+  --carousel-arrow-focus: var(--color-primary);
+  --carousel-arrow-shadow: var(--shadow-lg);
+
+  --carousel-dot-bg: rgba(255, 255, 255, 0.3);
+  --carousel-dot-bg-hover: rgba(255, 255, 255, 0.6);
+  --carousel-dot-bg-active: var(--gray-100);
+  --carousel-dot-focus: var(--color-primary);
+
+  /* ==========================================================================
+   * NOTIFICATION
+   * ======================================================================== */
+  --notification-bg: var(--gray-800);
+  --notification-border-color: var(--gray-700);
+  --notification-shadow: var(--shadow-lg);
+
+  --notification-icon-color: var(--gray-400);
+  --notification-title-color: var(--gray-100);
+  --notification-message-color: var(--gray-300);
+
+  --notification-close-color: var(--gray-500);
+  --notification-close-hover-color: var(--gray-100);
+
+  --notification-info-icon: var(--color-primary);
+  --notification-success-icon: var(--success);
+  --notification-warning-icon: var(--warning);
+  --notification-error-icon: var(--error);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CALENDAR
+   * ======================================================================== */
+  --calendar-bg: var(--gray-800);
+  --calendar-border: var(--gray-700);
+
+  --calendar-header-bg: var(--gray-850);
+
+  --calendar-nav-btn-border: var(--gray-600);
+  --calendar-nav-btn-color: var(--gray-300);
+  --calendar-nav-btn-hover-bg: var(--gray-700);
+  --calendar-nav-btn-hover-border: var(--gray-500);
+  --calendar-nav-btn-hover-color: var(--gray-100);
+
+  --calendar-title-color: var(--gray-100);
+  --calendar-title-hover-bg: var(--gray-700);
+  --calendar-title-hover-border: var(--gray-600);
+
+  --calendar-mode-bg: var(--gray-900);
+  --calendar-mode-border: var(--gray-700);
+  --calendar-mode-btn-color: var(--gray-300);
+  --calendar-mode-btn-hover-color: var(--gray-100);
+  --calendar-mode-btn-active-bg: var(--color-primary);
+  --calendar-mode-btn-active-color: var(--gray-900);
+
+  --calendar-weekday-color: var(--gray-400);
+
+  --calendar-day-bg: transparent;
+  --calendar-day-border: transparent;
+  --calendar-day-color: var(--gray-100);
+  --calendar-day-hover-bg: var(--gray-750);
+  --calendar-day-hover-border: var(--gray-600);
+  --calendar-day-other-month-color: var(--gray-600);
+  --calendar-day-today-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
+  --calendar-day-today-border: var(--color-primary);
+  --calendar-day-today-color: var(--color-primary);
+  --calendar-day-disabled-bg: var(--gray-850);
+
+  --calendar-event-dot-color: var(--gray-500);
+  --calendar-event-title-color: var(--gray-300);
+  --calendar-event-success-color: var(--success);
+  --calendar-event-warning-color: var(--warning);
+  --calendar-event-error-color: var(--error);
+
+  --calendar-month-bg: transparent;
+  --calendar-month-border: var(--gray-700);
+  --calendar-month-color: var(--gray-100);
+  --calendar-month-hover-bg: var(--gray-750);
+  --calendar-month-hover-border: var(--gray-600);
+  --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);
 }

package/src/styles/themes/_light.scss

@@ -714,4 +714,171 @@
   --tree-toggle-color: var(--text-muted);
   --tree-toggle-hover-color: var(--text-default);
   --tree-icon-color: var(--text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS PASSWORD STRENGTH
+   * ======================================================================== */
+  --password-strength-bg: var(--gray-200);
+  --password-strength-weak: var(--error);
+  --password-strength-medium: var(--warning);
+  --password-strength-strong: var(--success);
+  --password-strength-text: var(--text-muted);
+  --password-strength-criterion-valid: var(--success);
+  --password-strength-criterion-invalid: var(--text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TIMELINE
+   * ======================================================================== */
+  --timeline-dot-bg: var(--background-main);
+  --timeline-dot-border-color: var(--border-color);
+
+  --timeline-dot-bg-default: var(--gray-100);
+  --timeline-dot-border-default: var(--gray-400);
+
+  --timeline-dot-bg-primary: color-mix(in oklab, var(--color-primary) 15%, transparent);
+  --timeline-dot-border-primary: var(--color-primary);
+
+  --timeline-dot-bg-success: color-mix(in oklab, var(--success) 15%, transparent);
+  --timeline-dot-border-success: var(--success);
+
+  --timeline-dot-bg-warning: color-mix(in oklab, var(--warning) 15%, transparent);
+  --timeline-dot-border-warning: var(--warning);
+
+  --timeline-dot-bg-error: color-mix(in oklab, var(--error) 15%, transparent);
+  --timeline-dot-border-error: var(--error);
+
+  --timeline-dot-bg-info: color-mix(in oklab, var(--info) 15%, transparent);
+  --timeline-dot-border-info: var(--info);
+
+  --timeline-dot-bg-pending: color-mix(in oklab, var(--gray-300) 15%, transparent);
+  --timeline-dot-border-pending: var(--gray-500);
+
+  --timeline-line-color: var(--border-subtle);
+  --timeline-date-color: var(--text-muted);
+  --timeline-text-color: var(--text-default);
+  --timeline-text-color-pending: var(--text-muted);
+  --timeline-icon-color: var(--color-primary);
+  --timeline-icon-color-pending: var(--text-muted);
+
+  /* ==========================================================================
+   * TRANSFER
+   * ======================================================================== */
+  --transfer-bg: var(--white);
+  --transfer-border-color: var(--border-color);
+  --transfer-header-bg: var(--gray-50);
+  --transfer-header-border-color: var(--border-subtle);
+  --transfer-title-color: var(--text-default);
+  --transfer-count-color: var(--text-muted);
+
+  --transfer-search-border-color: var(--border-subtle);
+  --transfer-search-input-bg: var(--white);
+  --transfer-search-input-text: var(--text-default);
+  --transfer-search-input-border: var(--border-color);
+  --transfer-search-input-focus: var(--color-primary);
+  --transfer-search-input-focus-shadow: color-mix(in oklab, var(--color-primary) 10%, transparent);
+  --transfer-search-input-disabled-bg: var(--gray-50);
+  --transfer-search-placeholder: var(--text-disabled);
+  --transfer-search-clear-color: var(--text-muted);
+  --transfer-search-clear-hover: var(--text-default);
+
+  --transfer-item-border: var(--border-subtle);
+  --transfer-item-hover-bg: var(--gray-50);
+  --transfer-item-selected-bg: color-mix(in oklab, var(--color-primary) 10%, transparent);
+  --transfer-item-selected-hover-bg: color-mix(in oklab, var(--color-primary) 15%, transparent);
+  --transfer-item-label-color: var(--text-default);
+  --transfer-item-description-color: var(--text-muted);
+
+  --transfer-empty-color: var(--text-disabled);
+
+  /* ==========================================================================
+   * CAROUSEL
+   * ======================================================================== */
+  --carousel-bg: var(--gray-50);
+
+  --carousel-content-bg: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+  --carousel-content-text: var(--white);
+
+  --carousel-arrow-bg: rgba(255, 255, 255, 0.9);
+  --carousel-arrow-color: var(--gray-800);
+  --carousel-arrow-bg-hover: var(--white);
+  --carousel-arrow-color-hover: var(--color-primary);
+  --carousel-arrow-focus: var(--color-primary);
+  --carousel-arrow-shadow: var(--shadow-md);
+
+  --carousel-dot-bg: rgba(255, 255, 255, 0.5);
+  --carousel-dot-bg-hover: rgba(255, 255, 255, 0.8);
+  --carousel-dot-bg-active: var(--white);
+  --carousel-dot-focus: var(--color-primary);
+
+  /* ==========================================================================
+   * NOTIFICATION
+   * ======================================================================== */
+  --notification-bg: var(--white);
+  --notification-border-color: var(--gray-300);
+  --notification-shadow: var(--shadow-lg);
+
+  --notification-icon-color: var(--gray-500);
+  --notification-title-color: var(--gray-900);
+  --notification-message-color: var(--gray-600);
+
+  --notification-close-color: var(--gray-400);
+  --notification-close-hover-color: var(--gray-600);
+
+  --notification-info-icon: var(--color-primary);
+  --notification-success-icon: var(--success);
+  --notification-warning-icon: var(--warning);
+  --notification-error-icon: var(--error);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CALENDAR
+   * ======================================================================== */
+  --calendar-bg: var(--white);
+  --calendar-border: var(--gray-200);
+
+  --calendar-header-bg: var(--gray-50);
+
+  --calendar-nav-btn-border: var(--gray-300);
+  --calendar-nav-btn-color: var(--gray-700);
+  --calendar-nav-btn-hover-bg: var(--gray-100);
+  --calendar-nav-btn-hover-border: var(--gray-400);
+  --calendar-nav-btn-hover-color: var(--gray-900);
+
+  --calendar-title-color: var(--gray-900);
+  --calendar-title-hover-bg: var(--gray-100);
+  --calendar-title-hover-border: var(--gray-300);
+
+  --calendar-mode-bg: var(--white);
+  --calendar-mode-border: var(--gray-300);
+  --calendar-mode-btn-color: var(--gray-700);
+  --calendar-mode-btn-hover-color: var(--gray-900);
+  --calendar-mode-btn-active-bg: var(--color-primary);
+  --calendar-mode-btn-active-color: var(--white);
+
+  --calendar-weekday-color: var(--gray-600);
+
+  --calendar-day-bg: transparent;
+  --calendar-day-border: transparent;
+  --calendar-day-color: var(--gray-900);
+  --calendar-day-hover-bg: var(--gray-100);
+  --calendar-day-hover-border: var(--gray-300);
+  --calendar-day-other-month-color: var(--gray-400);
+  --calendar-day-today-bg: var(--blue-50);
+  --calendar-day-today-border: var(--color-primary);
+  --calendar-day-today-color: var(--color-primary);
+  --calendar-day-disabled-bg: var(--gray-50);
+
+  --calendar-event-dot-color: var(--gray-500);
+  --calendar-event-title-color: var(--gray-700);
+  --calendar-event-success-color: var(--success);
+  --calendar-event-warning-color: var(--warning);
+  --calendar-event-error-color: var(--error);
+
+  --calendar-month-bg: transparent;
+  --calendar-month-border: var(--gray-200);
+  --calendar-month-color: var(--gray-900);
+  --calendar-month-hover-bg: var(--gray-50);
+  --calendar-month-hover-border: var(--gray-300);
+  --calendar-month-current-bg: var(--blue-50);
+  --calendar-month-current-border: var(--color-primary);
+  --calendar-month-current-color: var(--color-primary);
 }

package/src/styles/tokens/_primitives.scss

@@ -56,6 +56,7 @@ $alt:       #2dd4bf;
 // === SPACING ===
 
 $space-1: 0.25rem;
+$space-1-5: 0.375rem;
 $space-2: 0.5rem;
 $space-3: 0.75rem;
 $space-4: 1rem;

package/src/styles/tokens/_semantic.scss

@@ -634,3 +634,205 @@ $tree-label-font-size: $font-size-3;
 $tree-indent: 20px;
 $tree-max-height: 400px;
 $tree-border-radius: $radius-2;
+
+// === PASSWORD STRENGTH ===
+
+$password-strength-bar-height-sm: 4px;
+$password-strength-bar-height-md: 6px;
+$password-strength-bar-height-lg: 8px;
+$password-strength-bar-gap: $space-1;
+$password-strength-bar-radius: $radius-1;
+$password-strength-label-font-size: $font-size-2;
+$password-strength-label-gap: $space-2;
+
+// === TIMELINE ===
+
+$timeline-dot-size-sm: 20px;
+$timeline-dot-size-md: 24px;
+$timeline-dot-size-lg: 32px;
+
+$timeline-dot-border-width: 2px;
+
+$timeline-line-width-sm: 2px;
+$timeline-line-width-md: 2px;
+$timeline-line-width-lg: 3px;
+
+$timeline-item-gap-sm: $space-4;
+$timeline-item-gap-md: $space-6;
+$timeline-item-gap-lg: $space-8;
+
+$timeline-content-gap-sm: $space-3;
+$timeline-content-gap-md: $space-4;
+$timeline-content-gap-lg: $space-6;
+
+$timeline-content-inner-gap-sm: $space-1;
+$timeline-content-inner-gap-md: $space-2;
+$timeline-content-inner-gap-lg: $space-3;
+
+$timeline-date-font-size-sm: $font-size-1;
+$timeline-date-font-size-md: $font-size-2;
+$timeline-date-font-size-lg: $font-size-3;
+
+$timeline-text-font-size-sm: $font-size-2;
+$timeline-text-font-size-md: $font-size-3;
+$timeline-text-font-size-lg: $font-size-4;
+
+$timeline-icon-size-sm: 12px;
+$timeline-icon-size-md: 14px;
+$timeline-icon-size-lg: 18px;
+
+// === TRANSFER ===
+
+$transfer-gap: $space-4;
+$transfer-border-radius: $radius-2;
+
+$transfer-header-padding: $space-3 $space-4;
+$transfer-header-padding-sm: $space-2 $space-3;
+$transfer-header-padding-lg: $space-4 $space-5;
+
+$transfer-search-padding: $space-3 $space-4;
+$transfer-search-padding-sm: $space-2 $space-3;
+$transfer-search-padding-lg: $space-4 $space-5;
+
+$transfer-search-input-padding: $space-2 $space-8 $space-2 $space-3;
+$transfer-search-input-padding-sm: $space-1-5 $space-6 $space-1-5 $space-2;
+$transfer-search-input-padding-lg: $space-3 $space-10 $space-3 $space-4;
+
+$transfer-search-input-radius: $radius-1;
+
+$transfer-list-min-height: 300px;
+$transfer-list-min-height-sm: 200px;
+$transfer-list-min-height-lg: 400px;
+
+$transfer-list-max-height: 400px;
+$transfer-list-max-height-sm: 300px;
+$transfer-list-max-height-lg: 500px;
+
+$transfer-item-padding: $space-3 $space-4;
+$transfer-item-padding-sm: $space-2 $space-3;
+$transfer-item-padding-lg: $space-4 $space-5;
+
+$transfer-title-font-size: $font-size-3;
+$transfer-item-font-size: $font-size-3;
+$transfer-item-font-size-sm: $font-size-2;
+$transfer-item-font-size-lg: $font-size-4;
+
+$transfer-actions-gap: $space-2;
+
+// === CAROUSEL ===
+
+$carousel-container-height: 400px;
+$carousel-container-height-mobile: 250px;
+
+$carousel-radius: $radius-2;
+
+$carousel-content-padding: $space-6;
+$carousel-title-size: $font-size-5;
+$carousel-description-size: $font-size-3;
+
+$carousel-arrow-size: 40px;
+$carousel-arrow-size-mobile: 28px;
+$carousel-arrow-radius: 50%;
+$carousel-arrow-offset: $space-4;
+$carousel-arrow-offset-mobile: $space-2;
+$carousel-arrow-icon-size: $font-size-4;
+$carousel-arrow-icon-size-mobile: $font-size-3;
+
+$carousel-dot-size: 10px;
+$carousel-dot-size-active: 12px;
+$carousel-dots-gap: $space-2;
+$carousel-dots-padding: $space-4;
+
+// === CALENDAR ===
+
+$calendar-radius: $radius-2;
+
+$calendar-header-padding: $space-4;
+$calendar-header-padding-sm: $space-2;
+$calendar-header-padding-lg: $space-6;
+
+$calendar-nav-gap: $space-2;
+$calendar-nav-btn-size: 32px;
+$calendar-nav-btn-radius: $radius-1;
+$calendar-nav-btn-font-size: $font-size-3;
+
+$calendar-title-padding: $space-2 $space-3;
+$calendar-title-radius: $radius-1;
+$calendar-title-font-size: $font-size-4;
+$calendar-title-font-size-sm: $font-size-3;
+$calendar-title-font-size-lg: $font-size-5;
+$calendar-title-font-weight: 600;
+
+$calendar-mode-gap: $space-1;
+$calendar-mode-radius: $radius-1;
+$calendar-mode-padding: 2px;
+$calendar-mode-btn-padding: $space-1 $space-3;
+$calendar-mode-btn-radius: $radius-1;
+$calendar-mode-btn-font-size: $font-size-2;
+
+$calendar-month-view-padding: $space-4;
+
+$calendar-weekday-gap: $space-1;
+$calendar-weekday-margin: $space-2;
+$calendar-weekday-padding: $space-2 0;
+$calendar-weekday-font-size: $font-size-2;
+$calendar-weekday-font-size-sm: $font-size-1;
+$calendar-weekday-font-size-lg: $font-size-3;
+$calendar-weekday-font-weight: 600;
+
+$calendar-grid-gap: $space-1;
+
+$calendar-day-padding: $space-2;
+$calendar-day-padding-sm: $space-1;
+$calendar-day-padding-lg: $space-3;
+$calendar-day-radius: $radius-1;
+$calendar-day-font-size: $font-size-3;
+$calendar-day-font-size-sm: $font-size-2;
+$calendar-day-font-size-lg: $font-size-4;
+
+$calendar-day-number-margin: $space-1;
+
+$calendar-events-gap: 2px;
+
+$calendar-event-gap: $space-1;
+$calendar-event-padding: 2px;
+$calendar-event-radius: $radius-1;
+
+$calendar-event-dot-size: 6px;
+
+$calendar-event-title-font-size: $font-size-1;
+
+$calendar-year-view-padding: $space-4;
+
+$calendar-months-gap: $space-3;
+
+$calendar-month-padding: $space-4;
+$calendar-month-padding-sm: $space-2;
+$calendar-month-padding-lg: $space-6;
+$calendar-month-radius: $radius-2;
+$calendar-month-font-size: $font-size-3;
+$calendar-month-font-size-sm: $font-size-2;
+$calendar-month-font-size-lg: $font-size-4;
+
+// === NOTIFICATION ===
+
+$notification-z-index: 1050;
+$notification-max-width: 384px;
+$notification-gap: $space-3;
+
+$notification-offset-x: $space-6;
+$notification-offset-y: $space-6;
+
+$notification-padding: $space-4;
+$notification-gap-inner: $space-3;
+
+$notification-border-width: 1px;
+$notification-radius: $radius-2;
+
+$notification-icon-size: 20px;
+$notification-icon-gap: $space-2;
+
+$notification-title-size: $font-size-3;
+$notification-title-weight: 600;
+
+$notification-message-size: $font-size-2;