@design-factory/design-factory 18.1.0 → 19.0.0

package/lib/angular/slider/lib/slider.component.d.ts

@@ -14,7 +14,7 @@ export declare class Tick {
     legend?: string;
 }
 /**
- * @deprecated SliderComponent is deprecated. Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * @deprecated SliderComponent is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 export declare class SliderComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {
     private renderer;

package/lib/angular/slider/lib/tooltip-wrapper.component.d.ts

@@ -1,7 +1,7 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * @deprecated TooltipWrapperComponent is deprecated. Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * @deprecated TooltipWrapperComponent is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 export declare class TooltipWrapperComponent {
     template?: TemplateRef<any>;

package/lib/angular/slider/slider.module.d.ts

@@ -7,7 +7,7 @@ import * as i5 from "./lib/tooltip-wrapper.component";
 import * as i6 from "./direction/sliderdirection.directive";
 /**
  * @deprecated DfSliderModule is deprecated.
- * Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * Use {@link https://design-factory.amadeus.net/components/slider/agnosui  AgnosUI Slider} instead.
  */
 export declare class DfSliderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSliderModule, never>;

package/lib/angular/stepper/stepper.component.d.ts

@@ -1,17 +1,16 @@
-import { TemplateRef, QueryList, AfterContentInit } from '@angular/core';
+import { TemplateRef, AfterContentInit } from '@angular/core';
 import { DfStepperNormalizedState, DfStepperService } from './stepper.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./stepper.directive";
 export declare class DfStepperStepContentDirective {
-    templateRef: TemplateRef<any>;
+    readonly templateRef: TemplateRef<any>;
     /**
      * The step index
      * -1 means that the input index is not set
      */
-    dfStepperStepContent: number;
+    readonly dfStepperStepContent: import("@angular/core").InputSignalWithTransform<number, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfStepperStepContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DfStepperStepContentDirective, "ng-template[dfStepperStepContent]", never, { "dfStepperStepContent": { "alias": "dfStepperStepContent"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_dfStepperStepContent: unknown;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DfStepperStepContentDirective, "ng-template[dfStepperStepContent]", never, { "dfStepperStepContent": { "alias": "dfStepperStepContent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Stepper component is a component to provide a step by step navigation
@@ -20,10 +19,10 @@ export declare class DfStepperStepContentDirective {
  * - Using the non-linear navigation, where you can go to any step
  */
 export declare class DfStepperComponent implements AfterContentInit {
-    stepperService: DfStepperService;
+    readonly stepperService: DfStepperService;
     mapStepToContent: Map<number, TemplateRef<any>>;
-    tplStepsContent: QueryList<DfStepperStepContentDirective>;
-    state: DfStepperNormalizedState | undefined;
+    readonly tplStepsContent: import("@angular/core").Signal<readonly DfStepperStepContentDirective[]>;
+    readonly state: import("@angular/core").WritableSignal<DfStepperNormalizedState | undefined>;
     constructor();
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfStepperComponent, never>;

package/lib/angular/utils/titleTruncate.directive.d.ts

@@ -1,14 +1,13 @@
-import { DoCheck, ElementRef, OnInit, Renderer2 } from '@angular/core';
+import { DoCheck, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * DfTitleTruncate directive
- * It adds the title attribute with the element's inner text as value
+ * It adds the title attribute with the element's textContent as value
  * when the element is truncated.
  */
 export declare class DfTitleTruncateDirective implements OnInit, DoCheck {
     private readonly elementRef;
     private readonly renderer;
-    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     ngOnInit(): void;
     ngDoCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfTitleTruncateDirective, never>;

package/lib/angular/waves-of-progress/waves.directive.d.ts

@@ -13,10 +13,10 @@ export declare class DfWavesOfProgressDirective {
      *  },
      *  ...]
      */
-    set wavesType(value: 'circleDiagonal' | 'circleUp' | 'arrowRight' | 'arrowUp');
+    readonly dfWavesOfProgress: import("@angular/core").InputSignal<"arrowRight" | "circleDiagonal" | "circleUp" | "arrowUp">;
     private readonly http;
-    waveClass: string;
     elementRef: ElementRef<any>;
+    private readonly platformId;
     private baseSvg;
     /**
      * Prepares the SVG string by replacing color variables and encoding it.
@@ -29,7 +29,8 @@ export declare class DfWavesOfProgressDirective {
      * Updates the SVG background image based on the current element's styles.
      */
     updateSvg(): void;
+    constructor();
     private getSvg;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfWavesOfProgressDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DfWavesOfProgressDirective, "[dfWavesOfProgress]", ["dfWavesOfProgress"], { "wavesType": { "alias": "dfWavesOfProgress"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DfWavesOfProgressDirective, "[dfWavesOfProgress]", ["dfWavesOfProgress"], { "dfWavesOfProgress": { "alias": "dfWavesOfProgress"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/index.d.ts

@@ -3,7 +3,6 @@ export { SkipLinkDirective } from './angular/accessibility/directives/skip-link.
 export { SkipLinksContainerComponent } from './angular/accessibility/components/skip-links-container/skip-links-container.component';
 export { DfToastModule } from './angular/toast/toast.module';
 export { DfAlertModule } from './angular/alert/alert.module';
-export { CloseInputDatePickerDirective } from './angular/datepicker/closedatepicker.directive';
 export { DfDatePickerModule } from './angular/datepicker/datepicker.module';
 export { DfDatepickerRangeDirective } from './angular/datepicker/datepicker-range.directive';
 export { DfDatepickerRangeService } from './angular/datepicker/datepicker-range.service';

package/package.json

@@ -2,19 +2,19 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "18.1.0",
+  "version": "19.0.0",
   "dependencies": {
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@agnos-ui/angular-bootstrap": "~0.4.1",
-    "@agnos-ui/core-bootstrap": "~0.4.1",
-    "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/localize": "^18.0.0",
-    "@angular/router": "^18.0.0",
-    "@ng-bootstrap/ng-bootstrap": "~17.0.0",
-    "@ng-select/ng-select": "^13.2.0",
+    "@agnos-ui/angular-bootstrap": "~0.7.1",
+    "@agnos-ui/core-bootstrap": "~0.7.1",
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/localize": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@ng-bootstrap/ng-bootstrap": "~18.0.0",
+    "@ng-select/ng-select": "^14.0.0",
     "ag-grid-angular": "^32.0.0",
     "ag-grid-community": "^32.0.0",
     "bootstrap": "5.3.3"
@@ -26,10 +26,10 @@
     "@angular/localize": {
       "optional": true
     },
-    "@ng-bootstrap/ng-bootstrap": {
+    "ag-grid-angular": {
       "optional": true
     },
-    "@agnos-ui/core-bootstrap": {
+    "@agnos-ui/angular-bootstrap": {
       "optional": true
     }
   },
@@ -39,9 +39,6 @@
   },
   "exports": {
     "./assets/*": "./assets/*",
-    "./package.json": {
-      "default": "./package.json"
-    },
     "./styles/scss/*": {
       "sass": "./styles/scss/*.scss"
     },
@@ -49,8 +46,6 @@
       "sass": "./design-factory.scss",
       "style": "./design-factory.css",
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/design-factory.mjs",
-      "esm": "./esm2022/design-factory.mjs",
       "default": "./fesm2022/design-factory.mjs"
     },
     "./design-factory.scss": "./design-factory.scss",
@@ -58,6 +53,9 @@
     "./themes/initial-branding": {
       "sass": "./design-factory-initial-branding.scss",
       "style": "./design-factory-initial-branding.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
     }
   },
   "ng-update": {

package/schematics/ng-add/index.js

@@ -66,7 +66,7 @@ $font-path: '@design-factory/design-factory/assets/fonts';
             if (addStyleToWorkspace) {
                 buildOptions.styles = [
                     ...(buildOptions.styles ?? []),
-                    '../node_modules/@design-factory/design-factory/design-factory.scss'
+                    '@design-factory/design-factory/design-factory.scss'
                 ];
             }
             // update the style preprocessor options

package/styles/scss/agnosui/_variables.scss

@@ -1,8 +1,10 @@
-@forward '@agnos-ui/core-bootstrap/scss/variables' with (
+/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */
+@forward '@agnos-ui/core-bootstrap/scss/_variables.scss' with (
   $prefix: 'df-' !default,
   $au-slider-color-background: var(--#{$prefix}gray-300) !default,
   $au-slider-handle-hover-color: #{shades-css-var('primary', 'text-hover-color')} !default,
-  $au-slider-handle-border-hover: var(--#{$prefix}border-width) solid #{shades-css-var('primary', 'text-hover-color')} !default,
+  $au-slider-handle-border-hover: var(--#{$prefix}border-width) solid #{shades-css-var('primary', 'text-hover-color')}
+    !default,
   $au-slider-handle-focus-box-shadow: (
     0 0 0 2px var(--#{$prefix}body-bg),
     0 0 0 4px var(--#{$prefix}primary)
@@ -16,5 +18,9 @@
   $au-slider-label-now-font-weight: 500 !default,
   $au-slider-label-vertical-min-top: calc(100% - 0.5rem) !default,
   $au-slider-label-vertical-max-top: 0.25rem !default,
-  $au-slider-disabled-color: var(--#{$prefix}disabled-color) !default
+  $au-slider-disabled-color: var(--#{$prefix}disabled-color) !default,
+
+  $au-tree-expand-icon-color-default: $primary !default,
+  $au-tree-expand-icon-color-hover: $primary-800 !default,
+  $au-tree-expand-icon-background-color-hover: var(--#{$prefix}primary-200) !default
 );

package/styles/scss/bootstrap/_variables.scss

@@ -19,6 +19,7 @@ $black: #000 !default; // changed
 
 // DF specific colors
 // Grey colors
+$gray-1000: #000000 !default;
 $gray-900: #1a1a1a !default;
 $gray-800: #333 !default;
 $gray-700: #4d4d4d !default;
@@ -29,11 +30,13 @@ $gray-300: #b3b3b3 !default;
 $gray-200: #ccc !default;
 $gray-100: #e6e6e6 !default;
 $gray-50: #f2f2f2 !default;
+$gray-0: #ffffff !default;
 // scss-docs-end gray-color-variables
 
 // fusv-disable
 // scss-docs-start gray-colors-map
 $grays: (
+  '0': $gray-0,
   '50': $gray-50,
   '100': $gray-100,
   '200': $gray-200,
@@ -43,7 +46,8 @@ $grays: (
   '600': $gray-600,
   '700': $gray-700,
   '800': $gray-800,
-  '900': $gray-900
+  '900': $gray-900,
+  '1000': $gray-1000
 ) !default;
 // scss-docs-end gray-colors-map
 // fusv-enable
@@ -684,7 +688,12 @@ $pacifics-mapping: (
   'text-hover-color': var(--#{$prefix}pacific-700),
   'text-active-color': var(--#{$prefix}pacific-800),
   'bg-hover-alt-color': var(--#{$prefix}pacific-100),
-  'bg-active-alt-color': var(--#{$prefix}pacific-200)
+  'bg-active-alt-color': var(--#{$prefix}pacific-200),
+  'text-light-color': var(--#{$prefix}pacific-900),
+  'bg-light-color': var(--#{$prefix}pacific-500),
+  'bg-light-hover-color': var(--#{$prefix}pacific-700),
+  'text-light-hover-color': var(--#{$prefix}pacific-900),
+  'bg-light-active-color': var(--#{$prefix}pacific-700)
 ) !default;
 
 $lights-mapping: (
@@ -744,11 +753,12 @@ $darks-mapping: (
   'bg-subtle-color': var(--#{$prefix}dark-500),
   'bg-subtle-hover-color': var(--#{$prefix}dark-600),
   'bg-subtle-active-color': var(--#{$prefix}dark-700),
-  'border-color': var(--#{$prefix}dark-500),
+  'border-color': var(--#{$prefix}dark-700),
+  'border-hover-color': var(--#{$prefix}dark-700),
   'text-color': var(--#{$prefix}dark-700),
-  'text-hover-color': var(--#{$prefix}dark-900),
+  'text-hover-color': var(--#{$prefix}dark-800),
   'text-active-color': var(--#{$prefix}black),
-  'bg-hover-alt-color': var(--#{$prefix}dark-600),
+  'bg-hover-alt-color': var(--#{$prefix}dark-100),
   'bg-active-alt-color': var(--#{$prefix}dark-700)
 ) !default;
 
@@ -797,7 +807,12 @@ $mysteries-mapping: (
   'text-hover-color': var(--#{$prefix}mystery-700),
   'text-active-color': var(--#{$prefix}mystery-800),
   'bg-hover-alt-color': var(--#{$prefix}mystery-100),
-  'bg-active-alt-color': var(--#{$prefix}mystery-300)
+  'bg-active-alt-color': var(--#{$prefix}mystery-300),
+  'text-light-color': var(--#{$prefix}mystery-500),
+  'bg-light-color': var(--#{$prefix}mystery-100),
+  'bg-light-hover-color': var(--#{$prefix}mystery-200),
+  'text-light-hover-color': var(--#{$prefix}mystery-700),
+  'bg-light-active-color': var(--#{$prefix}mystery-200)
 ) !default;
 
 $pinks-mapping: (
@@ -829,7 +844,12 @@ $loves-mapping: (
   'text-hover-color': var(--#{$prefix}love-700),
   'text-active-color': var(--#{$prefix}love-800),
   'bg-hover-alt-color': var(--#{$prefix}love-100),
-  'bg-active-alt-color': var(--#{$prefix}love-200)
+  'bg-active-alt-color': var(--#{$prefix}love-200),
+  'text-light-color': var(--#{$prefix}love-500),
+  'bg-light-color': var(--#{$prefix}love-100),
+  'bg-light-hover-color': var(--#{$prefix}love-200),
+  'text-light-hover-color': var(--#{$prefix}love-700),
+  'bg-light-active-color': var(--#{$prefix}love-200)
 ) !default;
 
 $reds-mapping: (
@@ -877,7 +897,9 @@ $yellows-mapping: (
   'text-hover-color': var(--#{$prefix}yellow-700),
   'text-active-color': var(--#{$prefix}yellow-800),
   'bg-hover-alt-color': var(--#{$prefix}yellow-100),
-  'bg-active-alt-color': var(--#{$prefix}yellow-200)
+  'bg-active-alt-color': var(--#{$prefix}yellow-200),
+  'bg-light-color': var(--#{$prefix}yellow-100),
+  'bg-light-hover-color': var(--#{$prefix}yellow-200)
 ) !default;
 
 $greens-mapping: (
@@ -925,7 +947,12 @@ $infos-mapping: (
   'text-hover-color': var(--#{$prefix}info-700),
   'text-active-color': var(--#{$prefix}info-800),
   'bg-hover-alt-color': var(--#{$prefix}info-100),
-  'bg-active-alt-color': var(--#{$prefix}info-200)
+  'bg-active-alt-color': var(--#{$prefix}info-200),
+  'bg-light-color': var(--#{$prefix}info-100),
+  'text-light-color': var(--#{$prefix}info-700),
+  'bg-light-hover-color': var(--#{$prefix}info-200),
+  'text-light-hover-color': var(--#{$prefix}info-700),
+  'bg-light-active-color': var(--#{$prefix}info-200)
 ) !default;
 
 $successes-mapping: (
@@ -941,7 +968,12 @@ $successes-mapping: (
   'text-hover-color': var(--#{$prefix}success-700),
   'text-active-color': var(--#{$prefix}success-800),
   'bg-hover-alt-color': var(--#{$prefix}success-100),
-  'bg-active-alt-color': var(--#{$prefix}success-200)
+  'bg-active-alt-color': var(--#{$prefix}success-200),
+  'bg-light-color': var(--#{$prefix}success-100),
+  'text-light-color': var(--#{$prefix}success-700),
+  'bg-light-hover-color': var(--#{$prefix}success-200),
+  'text-light-hover-color': var(--#{$prefix}success-700),
+  'bg-light-active-color': var(--#{$prefix}success-200)
 ) !default;
 
 $dangers-mapping: (
@@ -957,7 +989,12 @@ $dangers-mapping: (
   'text-hover-color': var(--#{$prefix}danger-700),
   'text-active-color': var(--#{$prefix}danger-800),
   'bg-hover-alt-color': var(--#{$prefix}danger-100),
-  'bg-active-alt-color': var(--#{$prefix}danger-200)
+  'bg-active-alt-color': var(--#{$prefix}danger-200),
+  'bg-light-color': var(--#{$prefix}danger-100),
+  'text-light-color': var(--#{$prefix}danger-500),
+  'bg-light-hover-color': var(--#{$prefix}danger-200),
+  'text-light-hover-color': var(--#{$prefix}danger-700),
+  'bg-light-active-color': var(--#{$prefix}danger-200)
 ) !default;
 
 $warnings-mapping: (
@@ -973,7 +1010,12 @@ $warnings-mapping: (
   'text-hover-color': var(--#{$prefix}warning-900),
   'text-active-color': var(--#{$prefix}warning-900),
   'bg-hover-alt-color': var(--#{$prefix}warning-100),
-  'bg-active-alt-color': var(--#{$prefix}warning-200)
+  'bg-active-alt-color': var(--#{$prefix}warning-200),
+  'text-light-color': var(--#{$prefix}warning-900),
+  'bg-light-color': var(--#{$prefix}warning-100),
+  'bg-light-hover-color': var(--#{$prefix}warning-200),
+  'text-light-hover-color': var(--#{$prefix}warning-900),
+  'bg-light-active-color': var(--#{$prefix}warning-200)
 ) !default;
 
 $cyans-mapping: (

package/styles/scss/components/accordion/_accordion.scss

@@ -19,6 +19,7 @@
   --#{$prefix}accordion-button-hover-icon: #{escape-svg($df-accordion-button-hover-icon)};
   --#{$prefix}accordion-button-disabled-icon: #{escape-svg($df-accordion-button-disabled-icon)};
   --#{$prefix}accordion-subtitle-font-weight: #{$df-accordion-subtitle-font-weight};
+  --#{$prefix}accordion-radio-selected-bg-color: #{$df-accordion-radio-selected-bg-color};
   @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: var(--#{$prefix}accordion-active-color);
   }
@@ -46,6 +47,7 @@
         }
       }
     }
+
     &[aria-disabled='true'],
     &.disabled,
     &[disabled] {
@@ -78,28 +80,26 @@
       &::after {
         content: none;
       }
+
       &::before {
         flex-shrink: 0;
         width: var(--#{$prefix}accordion-icon-width);
         height: var(--#{$prefix}accordion-icon-width);
-        @include ltr {
-          margin-right: var(--#{$prefix}accordion-button-reverse-margin-end);
-        }
-        @include rtl {
-          margin-left: var(--#{$prefix}accordion-button-reverse-margin-end);
-        }
+        margin-inline-end: var(--#{$prefix}accordion-button-reverse-margin-end);
         content: '';
         background-image: escape-svg($accordion-button-icon);
         background-repeat: no-repeat;
         background-size: var(--#{$prefix}accordion-icon-width);
         @include transition($accordion-icon-transition);
       }
+
       &:not(.collapsed) {
         &::before {
           background-image: escape-svg($accordion-button-active-icon);
           transform: $accordion-icon-transform;
         }
       }
+
       &[aria-disabled='true'],
       &.disabled,
       &[disabled] {
@@ -119,6 +119,55 @@
     }
   }
 
+  // Accordion with radio buttons
+  &.df-accordion-radio {
+    .accordion-item:last-of-type {
+      > .accordion-header.collapsed > .accordion-button {
+        @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+      }
+    }
+
+    // setting the cursor to pointer only if clickable
+    .accordion-header.collapsed {
+      .accordion-button:not(.disabled):not([disabled]) {
+        &:hover,
+        & *:hover {
+          cursor: pointer;
+        }
+      }
+
+      .accordion-button.disabled,
+      .accordion-button.disabled[disabled] {
+        &:hover,
+        & *:hover {
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    .accordion-button {
+      &:has(input[type='radio']:checked) {
+        background-color: var(--#{$prefix}accordion-radio-selected-bg-color);
+        --#{$prefix}inner-box-shadow-color: var(--#{$prefix}accordion-radio-selected-bg-color);
+        --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+      }
+
+      &:focus-within,
+      &:not(.collapsed):not(:focus):focus-within {
+        //need to override the default style for &:not(.collapsed):not(:focus)
+        box-shadow: var(--df-accordion-btn-focus-box-shadow);
+      }
+
+      &:after {
+        content: none;
+      }
+    }
+
+    input:focus {
+      box-shadow: none;
+    }
+  }
+
   @each $extension, $ratio in $df-size-ratios {
     $icon-with: calc(#{$ratio} * var(--#{$prefix}accordion-icon-width));
     &.df-accordion-#{$extension} {
@@ -133,6 +182,7 @@
           background-size: $icon-with;
         }
       }
+
       &.df-accordion-reverse {
         .accordion-button {
           &::before {
@@ -142,13 +192,24 @@
           }
         }
       }
+
+      &.df-accordion-radio {
+        .accordion-item:last-of-type {
+          > .accordion-header.collapsed > .accordion-button {
+            @include border-bottom-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
+          }
+        }
+      }
+
       .accordion-item {
         &:first-of-type {
           @include border-top-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
+
           .accordion-button {
             @include border-top-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
           }
         }
+
         // Only set a border-radius on the last item if the accordion is collapsed
         &:last-of-type {
           @include border-bottom-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));

package/styles/scss/components/accordion/_accordion.variables.scss

@@ -15,3 +15,5 @@ $df-accordion-button-hover-icon-color: $accordion-icon-color !default; // cannot
 $df-accordion-button-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$df-accordion-button-hover-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
 $df-accordion-button-disabled-icon-color: $accordion-icon-color !default; // cannot be css var as used in background-image
 $df-accordion-button-disabled-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$df-accordion-button-disabled-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+
+$df-accordion-radio-selected-bg-color: var(--#{$prefix}primary-200) !default;

package/styles/scss/components/alert/_alert.scss

@@ -47,6 +47,7 @@
   // Alert collapsible
   hr {
     border-top-color: var(--#{$prefix}alert-border-color);
+    opacity: 1;
   }
 
   // Alert icon
@@ -95,7 +96,7 @@
       @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
         --#{$prefix}alert-border-color: #{shades-css-var($state, 'bg-subtle-color')};
         hr {
-          border-top-color: shades-css-var($state, 'bg-subtle-active-color');
+          border-top-color: shades-css-var($state, 'separator-color');
         }
       } @else {
         --#{$prefix}alert-border-color: #{shades-rgba-css-var-with-opacity($state, 'border-color')};
@@ -107,7 +108,7 @@
   &.alert-tip {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       hr {
-        border-top-color: shades-css-var('purple', 'bg-subtle-active-color');
+        border-top-color: shades-css-var('mystery', 'separator-color');
       }
     }
     --#{$prefix}alert-color: #{$df-alert-tip-color};

package/styles/scss/components/badge/_badge.scss

@@ -42,7 +42,7 @@
 
 .badge {
   --#{$prefix}badge-focus-box-shadow: #{$df-badge-focus-box-shadow};
-  --#{$prefix}badge-text-transform: uppercase;
+  --#{$prefix}badge-text-transform: #{$df-badge-text-transform};
   --#{$prefix}badge-icon-margin-start: #{$df-badge-icon-margin-start};
   --#{$prefix}badge-icon-margin-end: #{$df-badge-icon-margin-end};
   --#{$prefix}badge-dot-font-size: #{$df-badge-dot-font-size};
@@ -99,6 +99,8 @@
 
   @each $color, $value in $utilities-bg-colors {
     &.bg-#{$color} {
+      // in this case we also handle the .badge.bg-light
+      // TODO: Check if the tokens fixes the issue
       --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
       --#{$prefix}badge-color: #{shades-css-var($color, 'bg-color', true)};
       --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-hover-color')};
@@ -116,6 +118,7 @@
       --#{$prefix}badge-border-color: #{shades-css-var($color, 'border-color')};
       --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-hover-alt-color')};
       --#{$prefix}badge-hover-color: #{shades-css-var($color, 'text-hover-color')};
+      --#{$prefix}badge-hover-border-color: #{shades-css-var($color, 'border-hover-color')};
       background-color: var(--#{$prefix}badge-background-color);
       color: var(--#{$prefix}badge-color);
       border: var(--#{$prefix}border-width) solid var(--#{$prefix}badge-border-color);
@@ -128,11 +131,18 @@
       }
 
       &:not([disabled]):not(.disabled) {
+        &:has(button) {
+          &:hover:not([disabled]):not(.disabled) {
+            border-color: var(--#{$prefix}badge-hover-border-color);
+          }
+        }
+
         button,
         span[role='button'],
         &[role='button'] {
           &:hover:not([disabled]):not(.disabled) {
             color: var(--#{$prefix}badge-hover-color);
+            border-color: var(--#{$prefix}badge-hover-border-color);
             background-color: var(
               --#{$prefix}badge-hover-background-color
             ) !important; // overriding the bg-#{$color} utility background-color
@@ -152,9 +162,9 @@
 
     &.bg-#{$color}-light {
       --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
-      --#{$prefix}badge-color: #{shades-css-var($color, 'bg-light-color', true)};
+      --#{$prefix}badge-color: #{shades-css-var($color, 'text-light-color')};
       --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-light-hover-color')};
-      --#{$prefix}badge-hover-color: #{shades-css-var($color, 'bg-light-hover-color', true)};
+      --#{$prefix}badge-hover-color: #{shades-css-var($color, 'text-light-hover-color')};
       --#{$prefix}badge-active-background-color: #{shades-css-var($color, 'bg-light-active-color')};
       --#{$prefix}badge-active-color: #{shades-css-var($color, 'bg-light-active-color', true)};
       --#{$prefix}badge-dot-background-color: #{shades-css-var($color, 'bg-light-color')};

package/styles/scss/components/badge/_badge.variables.scss

@@ -17,3 +17,4 @@ $df-badge-focus-box-shadow: $btn-focus-box-shadow !default;
 $df-badge-box-shadow-color: var(--#{$prefix}box-shadow-color) !default;
 
 $df-badge-inner-elements-focus-box-shadow: none !default;
+$df-badge-text-transform: none !default;

package/styles/scss/components/button/_button.scss

@@ -54,6 +54,11 @@
     color: var(--#{$prefix}btn-focus-only-color);
     background-color: var(--#{$prefix}btn-focus-only-bg);
     border-color: var(--#{$prefix}btn-focus-only-border-color);
+
+    // workaround for high contrast mode that doesn't display box-shadow
+    @media (prefers-contrast: more) {
+      outline: 2px solid transparent;
+    }
   }
 
   // TODO - Rework the placeholder component and the style of the button

package/styles/scss/components/card/_card.scss

@@ -39,7 +39,7 @@
     font-weight: var(--#{$prefix}card-title-font-weight);
   }
 
-  .border-0 {
+  &.border-0 {
     box-shadow: none;
   }
 

package/styles/scss/components/form/_form.scss

@@ -166,3 +166,7 @@ form {
     }
   }
 }
+
+.ng-invalid {
+  @extend .is-invalid;
+}