@design-factory/design-factory 17.1.0 → 18.0.1

package/styles/scss/components/select/_select.variables.scss

@@ -10,7 +10,7 @@ $df-select-indicator-disabled: str-replace(
 ) !default;
 /* Ngselect variables*/
 $df-select-single-optionselected-background-color: shades-css-var('primary', 'bg-color') !default;
-$df-select-icon-caret-down: '\e9ff' !default; // .icon-caret-down
+$df-select-icon-caret-down: '\f0d7' !default; // .fa-caret-down
 $df-select-optionselected-background-color: $df-primary-lighten-60 !default; // override
 $df-select-value-color: $form-select-color !default; // $input-color
 $df-select-option-textdecoration-hover: underline !default;
@@ -43,7 +43,9 @@ $df-select-single-input-padding: $df-select-arrow-pos + $input-padding-x !defaul
 $df-select-single-clear-input-padding: $df-select-single-input-padding + $df-select-clear-width !default;
 $df-select-border: $input-border-width solid $input-border-color !default;
 $df-select-border-radius: $form-select-border-radius !default;
-$df-select-border-radius-sm: calc($df-select-border-radius * map.get($df-size-ratios, 'sm')) !default; // or the sm lg version of the border-radius??
+$df-select-border-radius-sm: calc(
+  $df-select-border-radius * map.get($df-size-ratios, 'sm')
+) !default; // or the sm lg version of the border-radius??
 $df-select-border-radius-lg: calc($df-select-border-radius * map.get($df-size-ratios, 'lg')) !default;
 $df-select-value-margin: $form-select-padding-y !default;
 $df-select-value-margin-sm: $input-padding-y-sm !default;
@@ -58,7 +60,7 @@ $df-select-option-hover-color: var(--#{$prefix}body-color) !default;
 $df-select-single-optionselected-color: color-contrast($df-select-single-optionselected-background-color) !default;
 $df-select-icon-solid-font-weight: $df-icon-solid-font-weight !default;
 $df-select-icon-font-size: 1rem !default;
-$df-select-icon-font-family: $df-font-family !default;
+$df-select-icon-font-family: $df-font-awesome-font-family !default;
 $df-select-input-font-weight: $input-font-weight !default;
 $df-select-spinner-loader-border-left: 2px solid shades-css-var('primary', 'border-color') !default;
 $df-select-value-disabled-bg-color: $white !default;

package/styles/scss/components/sidenav/_sidenav.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 .df-sidenav-toggler {
   @extend .navbar-toggler;
 }
@@ -25,6 +27,7 @@
   --#{$prefix}sidenav-menu-border: #{$df-sidenav-menu-border};
   --#{$prefix}sidenav-menu-overflow-x: #{$df-sidenav-menu-overflow-x};
   --#{$prefix}sidenav-menu-padding-top: #{$df-sidenav-menu-padding-top};
+  --#{$prefix}sidenav-menu-padding-inline: #{$df-sidenav-menu-padding-inline};
   --#{$prefix}sidenav-menu-overlay-position: #{$df-sidenav-menu-position};
   --#{$prefix}sidenav-menu-overlay-height: #{$df-sidenav-menu-overlay-height};
   --#{$prefix}sidenav-menu-zindex: #{$df-sidenav-menu-zindex};
@@ -39,6 +42,7 @@
   --#{$prefix}sidenav-item-color: #{$df-sidenav-item-color};
   --#{$prefix}sidenav-item-margin: #{$df-sidenav-item-margin};
   --#{$prefix}sidenav-item-border: #{$df-sidenav-item-border};
+  --#{$prefix}sidenav-item-border-radius: #{$df-sidenav-item-border-radius};
   --#{$prefix}sidenav-item-border-start: #{$df-sidenav-item-border-start};
   --#{$prefix}sidenav-item-border-start-active: #{$df-sidenav-item-border-start-active};
   --#{$prefix}sidenav-item-position: #{$df-sidenav-item-position};
@@ -47,7 +51,6 @@
   --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
   --#{$prefix}sidenav-item-focus-box-shadow-width: #{$df-sidenav-item-focus-box-shadow-width};
   --#{$prefix}sidenav-item-text-align: #{$df-sidenav-item-text-align};
-  --#{$prefix}sidenav-item-text-align-rtl: #{$df-sidenav-item-text-align-rtl};
   --#{$prefix}sidenav-item-active-font-weight: #{$df-sidenav-item-active-font-weight};
   --#{$prefix}sidenav-item-active-border-width: #{$df-sidenav-item-active-border-width};
   --#{$prefix}sidenav-item-withactivated-font-weight: #{$df-sidenav-item-withactivated-font-weight};
@@ -62,11 +65,11 @@
   --#{$prefix}sidenav-item-padding-end: #{$df-sidenav-item-padding-end};
   --#{$prefix}sidenav-item-width: #{$df-sidenav-item-width};
   --#{$prefix}sidenav-withactivated-item-border-start: #{$df-sidenav-withactivated-item-border-start};
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}box-shadow-color: var(--#{$prefix}sidenav-item-bg-color);
-    --#{$prefix}inner-box-shadow-color: var(--#{$prefix}sidenav-item-color);
-  }
+  --#{$prefix}sidenav-item-before-focused-box-shadow: #{$df-sidenav-item-before-focused-box-shadow};
   --#{$prefix}sidenav-item-focused-box-shadow: #{$df-sidenav-item-focused-box-shadow};
+  --#{$prefix}sidenav-item-focused-box-shadow-color: #{$df-sidenav-item-focused-box-shadow-color};
+  --#{$prefix}sidenav-item-focused-inner-box-shadow-color: #{$df-sidenav-item-focused-inner-box-shadow-color};
+  --#{$prefix}sidenav-item-focused-z-index: #{$df-sidenav-item-focused-z-index};
   --#{$prefix}sidenav-item-hover-bg-color: #{$df-sidenav-item-hover-bg-color};
   --#{$prefix}sidenav-item-active-bg-color: #{$df-sidenav-item-active-bg-color};
   --#{$prefix}sidenav-collapsing-transition: #{$df-sidenav-collapsing-transition};
@@ -77,83 +80,78 @@
   --#{$prefix}sidenav-minimizing-transition: width 0.5s ease;
   --#{$prefix}sidenav-icon-box-margin-end: #{$df-sidenav-icon-box-margin-end};
   --#{$prefix}sidenav-icon-box-margin-start: #{$df-sidenav-icon-box-margin-start};
+  --#{$prefix}sidenav-chevron-icon-color: #{$df-sidenav-chevron-icon-color};
+  --#{$prefix}sidenav-chevron-icon-hover-color: #{$df-sidenav-chevron-icon-hover-color};
+  --#{$prefix}sidenav-chevron-icon-active-color: #{$df-sidenav-chevron-icon-active-color};
 
   width: var(--#{$prefix}sidenav-expand-width);
   padding-top: var(--#{$prefix}sidenav-menu-padding-top);
+  padding-inline: var(--#{$prefix}sidenav-menu-padding-inline);
   background-color: var(--#{$prefix}sidenav-bg-color);
   overflow-x: var(--#{$prefix}sidenav-menu-overflow-x);
   z-index: var(--#{$prefix}sidenav-menu-zindex);
-  @include ltr {
-    border-right: var(--#{$prefix}sidenav-menu-border);
-  }
-  @include rtl {
-    border-left: var(--#{$prefix}sidenav-menu-border);
-  }
+  border-inline-end: var(--#{$prefix}sidenav-menu-border);
   // When one item is active in the menu only the first element is having the has Active look
   > df-sidenavlist > .df-sidenav-list {
     > .df-sidenav-list-withactivated {
       button,
       a {
-        @include ltr {
-          border-left: var(--#{$prefix}sidenav-withactivated-item-border-start);
-        }
-        @include rtl {
-          border-right: var(--#{$prefix}sidenav-withactivated-item-border-start);
-        }
+        border-inline-start: var(--#{$prefix}sidenav-withactivated-item-border-start);
       }
     }
   }
+
   // Three level of sidenav setup
   .df-sidenav-list {
-    @include ltr {
-      padding-left: var(--#{$prefix}sidenav-list-padding-start);
-      padding-right: var(--#{$prefix}sidenav-list-padding-end);
-    }
-    @include rtl {
-      padding-right: var(--#{$prefix}sidenav-list-padding-start);
-      padding-left: var(--#{$prefix}sidenav-list-padding-end);
-    }
+    padding-inline: var(--#{$prefix}sidenav-list-padding-start) var(--#{$prefix}sidenav-list-padding-end);
+
     li {
       list-style-type: var(--#{$prefix}sidenav-list-item-style);
     }
+
     > .df-sidenav-list-withactivated {
       --#{$prefix}sidenav-item-withactived-border-width: var(--#{$prefix}sidenav-item-active-border-width);
       --#{$prefix}sidenav-item-padding-start: #{$df-sidenav-item-padding-start};
+
       > button,
       > a {
         .df-sidenav-icon {
           color: var(--#{$prefix}sidenav-item-withactivated-icon-color);
         }
+
         font-weight: var(--#{$prefix}sidenav-item-withactivated-font-weight);
         background-color: var(--#{$prefix}sidenav-item-withactivated-bg-color);
       }
     }
+
     .df-sidenav-list {
-      .df-sidenav-item { // Second level override
-        @include ltr {
-          padding-left: var(--#{$prefix}sidenav-item-padding-level2-start);
-        }
-        @include rtl {
-          padding-right: var(--#{$prefix}sidenav-item-padding-level2-start);
-        }
+      .df-sidenav-item {
+        // Second level override
+        padding-inline-start: var(--#{$prefix}sidenav-item-padding-level2-start);
       }
+
       .df-sidenav-list {
         font-size: var(--#{$prefix}sidenav-item-third-level-font-size);
-        .df-sidenav-item { // Thrid level override
-          @include ltr {
-            padding-left: var(--#{$prefix}sidenav-item-padding-level3-start);
-          }
-          @include rtl {
-            padding-right: var(--#{$prefix}sidenav-item-padding-level3-start);
-          }
+
+        .df-sidenav-item {
+          // Third level override
+          padding-inline-start: var(--#{$prefix}sidenav-item-padding-level3-start);
         }
       }
     }
 
-    #{$df-sidenav-item-class} { // default
-      [class^='icon-'], [class*=" icon-"] {
+    .df-sidenav-item {
+      // default
+      [class^='icon-'],
+      [class*=' icon-'],
+      [class^='fa-'],
+      [class*=' fa-'] {
         color: var(--#{$prefix}sidenav-item-icon-color);
       }
+      .df-sidenav-collapse-icon {
+        color: var(--#{$prefix}sidenav-chevron-icon-color);
+      }
+
       width: var(--#{$prefix}sidenav-item-width);
       color: var(--#{$prefix}sidenav-item-color);
       position: var(--#{$prefix}sidenav-item-position); // mandatory for the focus shadow
@@ -161,40 +159,55 @@
       margin: var(--#{$prefix}sidenav-item-margin);
       padding-top: var(--#{$prefix}sidenav-item-padding-top);
       padding-bottom: var(--#{$prefix}sidenav-item-padding-bottom);
-      @include ltr {
-        text-align: var(--#{$prefix}sidenav-item-text-align);
-        border-left: var(--#{$prefix}sidenav-item-border-start);
-        padding-left: var(--#{$prefix}sidenav-item-padding-start);
-        padding-right: var(--#{$prefix}sidenav-item-padding-end);
-      }
-      @include rtl {
-        text-align: var(--#{$prefix}sidenav-item-text-align-rtl);
-        border-right: var(--#{$prefix}sidenav-item-border-start);
-        padding-right: var(--#{$prefix}sidenav-item-padding-start);
-        padding-left: var(--#{$prefix}sidenav-item-padding-end);
-      }
+      text-align: var(--#{$prefix}sidenav-item-text-align);
+      padding-inline: var(--#{$prefix}sidenav-item-padding-start) var(--#{$prefix}sidenav-item-padding-end);
+      border-inline-start: var(--#{$prefix}sidenav-item-border-start);
       background-color: var(--#{$prefix}sidenav-item-bg-color);
       height: var(--#{$prefix}sidenav-item-height);
+      border-radius: var(--#{$prefix}sidenav-item-border-radius);
+
       &:hover {
+        .df-sidenav-collapse-icon {
+          color: var(--#{$prefix}sidenav-chevron-icon-hover-color);
+        }
         text-decoration: var(--#{$prefix}sidenav-item-text-decoration);
       }
+      &:active {
+        .df-sidenav-collapse-icon {
+          color: var(--#{$prefix}sidenav-chevron-icon-active-color);
+        }
+      }
+
       &[aria-disabled='true'],
       &.disabled,
-      &[disabled] { // TODO see with UX if we could have the case. Disabled item are not yet implemented
+      &[disabled] {
+        // TODO see with UX if we could have the case. Disabled item are not yet implemented
         background-color: var(--#{$prefix}sidenav-item-bg-color);
         opacity: var(--#{$prefix}sidenav-disabled-opacity);
         cursor: var(--#{$prefix}sidenav-disabled-cursor);
       }
+
       &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
         &:not(.df-sidenav-title):hover {
           background-color: var(--#{$prefix}sidenav-item-hover-bg-color);
+          &:active {
+            background-color: var(--#{$prefix}sidenav-item-active-bg-color);
+          }
         }
+
         &:focus,
-        &.focus {  // Title can never be focus
-          box-shadow: none;
+        &.focus {
+          // Title can never be focus
+          --#{$prefix}box-shadow-color: var(--#{$prefix}sidenav-item-focused-box-shadow-color);
+          --#{$prefix}inner-box-shadow-color: var(--#{$prefix}sidenav-item-focused-inner-box-shadow-color);
+          --#{$prefix}sidenav-item-focused-box-shadow: #{$df-sidenav-item-focused-box-shadow};
+          box-shadow: var(--#{$prefix}sidenav-item-focused-box-shadow);
           outline: none;
+          z-index: var(--#{$prefix}sidenav-item-focused-z-index);
+
+          //remove when we remove old branding
           &:before {
-            content: '';
+            content: $df-sidenav-item-before-focused-content;
             position: absolute;
             top: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
             bottom: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
@@ -204,24 +217,23 @@
             }
             @include rtl {
               left: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
-              right: var(--#{$prefix}sidenav-item-focus-box-shadow-width); 
+              right: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
             }
-            box-shadow: var(--#{$prefix}sidenav-item-focused-box-shadow); // override
+            box-shadow: var(--#{$prefix}sidenav-item-before-focused-box-shadow); // override
           }
         }
-        &.active { // Title are never active
-           --#{$prefix}sidenav-list-border-width: var(--#{$prefix}sidenav-item-active-border-width);
+
+        &.active {
+          // Title are never active
+          --#{$prefix}sidenav-list-border-width: var(--#{$prefix}sidenav-item-active-border-width);
           background-color: var(--#{$prefix}sidenav-item-active-bg-color);
           color: var(--#{$prefix}sidenav-list-active-color);
           font-weight: var(--#{$prefix}sidenav-item-active-font-weight);
-          @include ltr {
-            border-left: var(--#{$prefix}sidenav-item-border-start-active);
-          }
-          @include rtl {
-            border-right: var(--#{$prefix}sidenav-item-border-start-active);
-          }
+          border-inline-start: var(--#{$prefix}sidenav-item-border-start-active);
+
           &:focus,
-          &.focus {  // Title can never be focus
+          &.focus {
+            // Title can never be focus
             &:before {
               @include ltr {
                 left: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
@@ -237,20 +249,24 @@
         &.df-sidenav-item-withicon {
           + df-sidenavlist {
             > .df-sidenav-list {
-                --#{$prefix}sidenav-item-icon-extra-padding: var(--#{$prefix}sidenav-item-withicon-extra-padding-start);
-                --#{$prefix}sidenav-item-padding-level2-start: #{$df-sidenav-item-padding-level2-start};
-                --#{$prefix}sidenav-item-padding-level3-start: #{$df-sidenav-item-padding-level3-start};
+              --#{$prefix}sidenav-item-icon-extra-padding: var(--#{$prefix}sidenav-item-withicon-extra-padding-start);
+              --#{$prefix}sidenav-item-padding-level2-start: #{$df-sidenav-item-padding-level2-start};
+              --#{$prefix}sidenav-item-padding-level3-start: #{$df-sidenav-item-padding-level3-start};
             }
+
             --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height};
             --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
+
             .df-sidenav-list .df-sidenav-list {
-                --#{$prefix}sidenav-item-extra-icon-height: var(--#{$prefix}sidenav-item-extra-icon-height-level3);
-                --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
+              --#{$prefix}sidenav-item-extra-icon-height: var(--#{$prefix}sidenav-item-extra-icon-height-level3);
+              --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
             }
           }
+
           --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height};
           --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
         }
+
         &.df-sidenav-title {
           height: var(--#{$prefix}sidenav-title-height);
           font-size: var(--#{$prefix}sidenav-title-font-size);
@@ -258,6 +274,7 @@
       }
     }
   }
+
   &.df-collapsing {
     position: $df-sidenav-menu-position;
     height: $df-sidenav-collapsing-height;
@@ -265,12 +282,14 @@
     overflow: hidden;
     transition: $df-sidenav-collapsing-transition;
   }
+
   &.df-minimizing {
     position: $df-sidenav-menu-position;
     width: 50px;
     overflow: hidden;
     transition: var(--#{$prefix}sidenav-minimizing-transition);
   }
+
   &.df-sidenav-menu-overlay {
     position: var(--#{$prefix}sidenav-menu-overlay-position);
     height: var(--#{$prefix}sidenav-menu-overlay-height);
@@ -281,14 +300,7 @@
     width: var(--#{$prefix}sidenav-icon-box-width);
     height: var(--#{$prefix}sidenav-icon-box-height);
     padding: var(--#{$prefix}sidenav-icon-padding);
-    @include ltr {
-      margin-left: var(--#{$prefix}sidenav-icon-box-margin-start);
-      margin-right: var(--#{$prefix}sidenav-icon-box-margin-end);
-    }
-    @include rtl {
-      margin-right: var(--#{$prefix}sidenav-icon-box-margin-start);
-      margin-left: var(--#{$prefix}sidenav-icon-box-margin-end);
-    }
+    margin-inline: var(--#{$prefix}sidenav-icon-box-margin-start) var(--#{$prefix}sidenav-icon-box-margin-end);
   }
 }
 

package/styles/scss/components/sidenav/_sidenav.variables.scss

@@ -4,7 +4,7 @@
 $df-sidenav-bg-color: $body-bg !default;
 $df-sidenav-icon-font-size: 1.25rem !default;
 $df-sidenav-icon-box-width: 1.5rem !default;
-$df-sidenav-icon-box-height: 1.5rem !default;
+$df-sidenav-icon-box-height: unset !default;
 $df-sidenav-icon-padding: 2px 2px 2px 2px !default;
 
 $df-sidenav-expand-width: 16.875rem !default;
@@ -47,13 +47,17 @@ $df-sidenav-item-border-start: none !default;
 $df-sidenav-item-active-border-color: $df-sidenav-list-active-color !default;
 $df-sidenav-item-border-start-active: $df-sidenav-item-active-border-width solid $df-sidenav-item-active-border-color !default;
 $df-sidenav-item-icon-color: $df-font-icon-color !default;
+$df-sidenav-chevron-icon-color: $df-font-icon-color !default;
+$df-sidenav-chevron-icon-hover-color: $df-font-icon-color !default;
+$df-sidenav-chevron-icon-active-color: $df-font-icon-color !default;
 $df-sidenav-item-position: relative !default;
 $df-sidenav-item-extra-icon-height: 0.5rem !default;
 $df-sidenav-item-extra-icon-height-level3: 0.25rem !default;
 $df-sidenav-item-basic-height: 2.5rem !default;
-$df-sidenav-item-height: calc(var(--#{$prefix}sidenav-item-basic-height, #{$df-sidenav-item-basic-height}) + var(--#{$prefix}sidenav-item-extra-icon-height, 0rem)) !default;
-$df-sidenav-item-text-align: left !default;
-$df-sidenav-item-text-align-rtl: right !default;
+$df-sidenav-item-height: calc(
+  var(--#{$prefix}sidenav-item-basic-height, #{$df-sidenav-item-basic-height}) + var(--#{$prefix}sidenav-item-extra-icon-height, 0rem)
+) !default;
+$df-sidenav-item-text-align: start !default;
 $df-sidenav-item-text-decoration: none !default;
 $df-sidenav-item-withactivated-font-weight: $df-sidenav-item-active-font-weight !default;
 $df-sidenav-item-withactivated-bg-color: $gray-50 !default;
@@ -63,19 +67,25 @@ $df-sidenav-withactivated-item-border-start: $df-sidenav-item-active-border-widt
 $df-sidenav-item-bg-color: transparent !default;
 $df-sidenav-item-first-level-padding-start: 1.3125rem !default; // 24px - 3px border
 $df-sidenav-item-third-level-font-size: 0.875rem !default;
-$df-sidenav-item-class: ".df-sidenav-item" !default;
 $df-sidenav-text-padding-start: 3.5625rem !default; // 60px - 3px border
 $df-sidenav-icon-box-margin-end: calc((#{$df-sidenav-text-padding-start} - #{$df-sidenav-icon-box-width}) / 2) !default;
-$df-sidenav-icon-box-margin-start: calc(#{$df-sidenav-icon-box-margin-end} - #{$df-sidenav-item-first-level-padding-start}) !default;
-$df-sidenav-item-withicon-extra-padding-start: $df-sidenav-text-padding-start - $df-sidenav-item-first-level-padding-start !default; // 2.375rem !default;
+$df-sidenav-icon-box-margin-start: calc(
+  #{$df-sidenav-icon-box-margin-end} - #{$df-sidenav-item-first-level-padding-start}
+) !default;
+$df-sidenav-item-withicon-extra-padding-start:
+  $df-sidenav-text-padding-start - $df-sidenav-item-first-level-padding-start !default; // 2.375rem !default;
 $df-sidenav-item-extra-padding-start: 0rem !default;
-$df-sidenav-item-padding-start: calc(#{$df-sidenav-item-first-level-padding-start} + var(--#{$prefix}sidenav-item-icon-extra-padding) - var(--#{$prefix}sidenav-item-withactived-border-width, 0px)) !default;
+$df-sidenav-item-padding-start: calc(
+  #{$df-sidenav-item-first-level-padding-start} + var(--#{$prefix}sidenav-item-icon-extra-padding) - var(--#{$prefix}sidenav-item-withactived-border-width, 0px)
+) !default;
 $df-sidenav-item-padding-level2-start: calc(#{$df-sidenav-item-padding-start} + 0.5rem) !default;
-$df-sidenav-item-padding-level3-start: calc(#{$df-sidenav-item-padding-start} + 0.5rem + 0.5rem + 0.25rem) !default; // extra 0.25rem for third level
+$df-sidenav-item-padding-level3-start: calc(
+  #{$df-sidenav-item-padding-start} + 0.5rem + 0.5rem + 0.25rem
+) !default; // extra 0.25rem for third level
 $df-sidenav-item-padding-end: 1.25rem !default;
 $df-sidenav-item-width: 100% !default;
 $df-sidenav-item-focus-box-shadow-width: $input-btn-focus-width !default;
-$df-sidenav-item-focused-box-shadow: $input-btn-focus-box-shadow !default;
+$df-sidenav-item-before-focused-box-shadow: $input-btn-focus-box-shadow !default;
 $df-sidenav-item-hover-bg-color: $df-hover-bg-color !default;
 $df-sidenav-item-active-bg-color: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default;
 $df-sidenav-item-extra-withouticon-height: 0rem !default;
@@ -83,4 +93,10 @@ $df-sidenav-collapsing-transition: width 0.5s ease !default;
 $df-sidenav-collapsing-height: 100% !default;
 $df-sidenav-title-height: 2.75rem !default;
 $df-sidenav-title-font-size: 0.875rem !default;
-
+$df-sidenav-menu-padding-inline: 0 !default;
+$df-sidenav-item-border-radius: 0 !default;
+$df-sidenav-item-focused-box-shadow: none !default;
+$df-sidenav-item-before-focused-content: '' !default;
+$df-sidenav-item-focused-box-shadow-color: unset !default;
+$df-sidenav-item-focused-inner-box-shadow-color: unset !default;
+$df-sidenav-item-focused-z-index: unset !default;

package/styles/scss/components/skip-links/_skip-links.scss

@@ -1,11 +1,16 @@
 .df-skip-links {
-  --#{$prefix}skip-links-shadow: $df-skip-links-shadow;
+  --#{$prefix}skip-links-shadow: #{$df-skip-links-shadow};
   --#{$prefix}skip-links-border-radius: #{$df-skip-links-border-radius};
   --#{$prefix}skip-links-top: #{$df-skip-links-top};
   --#{$prefix}skip-links-start: #{$df-skip-links-start};
   --#{$prefix}skip-links-min-width: #{$df-skip-links-min-width};
   --#{$prefix}skip-links-zindex: #{$df-skip-links-zindex};
   --#{$prefix}skip-links-bg: #{$df-skip-links-bg};
+  --#{$prefix}skip-links-separator-width: #{$df-skip-links-separator-width};
+
+  .list-group {
+    --#{$prefix}list-group-border-width: #{$df-skip-links-border-width};
+  }
 
   position: fixed;
   top: var(--#{$prefix}skip-links-top);
@@ -15,7 +20,7 @@
   @include rtl {
     right: var(--#{$prefix}skip-links-start);
   }
-  
+
   z-index: var(--#{$prefix}skip-links-zindex);
 
   .df-skip-links-wrap {
@@ -28,12 +33,8 @@
       @include visually-hidden();
     }
 
-    > * {
-      margin-bottom: calc(-1 * var(--#{$prefix}list-group-border-width));
-
-      &:last-child {
-        margin-bottom: 0;
-      }
+    .list-group-item {
+      border-bottom-width: var(--#{$prefix}skip-links-separator-width);
     }
   }
 }

package/styles/scss/components/skip-links/_skip-links.variables.scss

@@ -1,5 +1,7 @@
 $df-skip-links-shadow: var(--#{$prefix}box-shadow) !default;
 $df-skip-links-border-radius: $border-radius !default;
+$df-skip-links-border-width: 1px !default;
+$df-skip-links-separator-width: 1px !default;
 $df-skip-links-top: 1.25rem !default;
 $df-skip-links-start: 0.625rem !default;
 $df-skip-links-min-width: 12.5rem !default;

package/styles/scss/components/slider/_slider.scss

@@ -190,14 +190,16 @@
     z-index: 3;
     background-color: $df-slider-pointer-color;
 
-    &:focus,
+    &:focus-visible,
     &.ngx-slider-active {
+      --#{$prefix}box-shadow-color: #{$df-slider-pointer-color};
       outline: none;
       box-shadow: $btn-focus-box-shadow;
     }
 
     &.ngx-slider-active {
       z-index: 4;
+
       &:after {
         background-color: $df-slider-pointer-active-color;
       }
@@ -344,11 +346,22 @@
     .ngx-slider-pointer-min {
       &:hover {
         border: $df-slider-pointer-hover-border-width solid $df-slider-pointer-hover-border-color;
+        background-color: $df-slider-pointer-hover-color;
+        &:focus-visible,
+        &.ngx-slider-active {
+          --#{$prefix}box-shadow-color: #{$df-slider-pointer-hover-color};
+        }
       }
     }
+
     .ngx-slider-pointer-max {
       &:hover {
         border: $df-slider-pointer-hover-border-width solid $df-slider-pointer-hover-border-color;
+        background-color: $df-slider-pointer-hover-color;
+        &:focus-visible,
+        &.ngx-slider-active {
+          --#{$prefix}box-shadow-color: #{$df-slider-pointer-hover-color};
+        }
       }
     }
   }
@@ -396,6 +409,7 @@
       transition: background-color linear $df-slider-animation-duration;
     }
   }
+
   &.df-slider-sm {
     // add
     @include setSliderSize($df-slider-bar-size-sm, $df-slider-pointer-size-sm, $df-slider-label-size-sm);

package/styles/scss/components/stepper/_stepper.mixins.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 @mixin df-stepper-fill-number($color, $bg-color, $border-color) {
   border-color: $border-color;
   background-color: $bg-color;
@@ -25,16 +27,16 @@
   }
 }
 
-@mixin df-stepper-icon-variant($state, $name) {
-  $value: shades-css-var($name, 'text-color');
-  $valuehover: shades-css-var($name, 'text-color');
-  $valueactive: shades-css-var($name, 'text-color');
+@mixin df-stepper-icon-variant($state, $value) {
+  $valuetext: shades-css-var($value, 'text-color');
+  $valuehover: shades-css-var($value, 'text-color');
+  $valueactive: shades-css-var($value, 'text-active-color');
   $valuebghovercolor: $df-hover-bg-color;
 
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    $valuehover: shades-css-var($name, 'text-hover-color');
-    $valuebghovercolor: shades-css-var($name, 'bg-subtle-hover-color');
-    $valueactive: shades-css-var($name, 'text-active-color');
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    $valuehover: shades-css-var($value, 'text-hover-color');
+    $valuebghovercolor: shades-css-var($value, 'bg-hover-alt-color');
+    $valueactive: shades-css-var($value, 'text-active-color');
   }
 
   .df-stepper-step-#{$state} {
@@ -58,33 +60,47 @@
             background-color: $valuehover;
           }
         }
-        &:focus:not(:hover),
-        &:focus:not(:hover) .df-stepper-label {
+        &:focus-visible:not(:hover),
+        &:focus-visible:not(:hover) .df-stepper-label {
           text-decoration: var(--#{$prefix}stepper-text-decoration-focus);
-          color: $value;
+          color: $valuetext;
         }
         &.active,
-        &.active .df-stepper-label {
+        &.active .df-stepper-label,
+        &:active,
+        &:active .df-stepper-label {
           text-decoration: var(--#{$prefix}stepper-text-decoration-active);
-          font-weight: $df-font-weight-semi-bold;
         }
-        &:hover.active,
-        &:hover.active .df-stepper-label {
+        &.active:hover,
+        &.active:hover .df-stepper-label {
           color: $valuehover;
           .df-stepper-number-#{$state} {
             @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
           }
+          .df-stepper-outline-number-#{$state} {
+            @include df-stepper-fill-number($valuehover, $df-stepper-outline-bg-color, $valuehover);
+          }
         }
-        &:not(:hover).active,
-        &:not(:hover).active .df-stepper-label {
+        &.active:not(:hover),
+        &.active:not(:hover) .df-stepper-label,
+        &:active,
+        &:active .df-stepper-label,
+        &:active:hover,
+        &:active:hover .df-stepper-label {
           color: $valueactive;
           .df-stepper-number-#{$state} {
             @include df-stepper-fill-number($df-stepper-icon-color, $valueactive, $valueactive);
           }
+          .df-stepper-outline-number-#{$state} {
+            @include df-stepper-fill-number($valueactive, $df-stepper-outline-bg-color, $valueactive);
+          }
+          .df-stepper-icon::before {
+            background-color: $valueactive;
+          }
         }
-        @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-          &.btn-link:focus {
-            --#{$prefix}box-shadow-color: #{$value};
+        @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          &.btn-link:focus-visible {
+            --#{$prefix}box-shadow-color: #{$valuetext};
             &:hover {
               --#{$prefix}box-shadow-color: #{$valuehover};
             }
@@ -100,12 +116,12 @@
     // Icon with number outline variant
     .df-stepper-outline-number-#{$state} {
       @include df-stepper-common-number();
-      @include df-stepper-fill-number($value, $df-stepper-outline-bg-color, $value);
+      @include df-stepper-fill-number($valuetext, $df-stepper-outline-bg-color, $valuetext);
     }
     // Icon with number plain version
     .df-stepper-number-#{$state} {
       @include df-stepper-common-number();
-      @include df-stepper-fill-number($df-stepper-icon-color, $value, $value);
+      @include df-stepper-fill-number($df-stepper-icon-color, $valuetext, $valuetext);
     }
 
     .df-stepper-optional-label {
@@ -119,7 +135,7 @@
       display: inline-block;
       text-decoration: none;
       color: var(--#{$prefix}stepper-icon-color);
-      background-color: $value;
+      background-color: $valuetext;
     }
     .df-stepper-outline-icon {
       &::before {
@@ -128,7 +144,7 @@
         background-color: transparent;
       }
     }
-    color: $value; // override btn-link
+    color: $valuetext; // override btn-link
   }
 }