@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/styles/06-components/_components.popover.scss

@@ -21,7 +21,9 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  transition:
+    opacity 0.3s ease-in-out,
+    visibility 0.3s ease-in-out;
   z-index: 1000;
 
   &__content {
@@ -33,10 +35,8 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--#{$prefix}popover-inner-gap-y)
-      var(--#{$prefix}popover-inner-gap-x);
-    padding: var(--#{$prefix}popover-padding-y)
-      var(--#{$prefix}popover-padding-x);
+    gap: var(--#{$prefix}popover-inner-gap-y) var(--#{$prefix}popover-inner-gap-x);
+    padding: var(--#{$prefix}popover-padding-y) var(--#{$prefix}popover-padding-x);
     background: var(--#{$prefix}popover-bg);
     border-radius: var(--#{$prefix}popover-border-radius);
     box-shadow: var(--#{$prefix}popover-box-shadow);
@@ -57,7 +57,7 @@
     visibility: visible;
     pointer-events: auto;
   }
-  
+
   // Position variants
   &--top {
     .c-popover__arrow {
@@ -66,7 +66,7 @@
       transform: translateX(-50%) rotate(45deg);
     }
   }
-  
+
   &--bottom {
     .c-popover__arrow {
       top: calc(var(--#{$prefix}popover-arrow-offset) * -1);
@@ -74,7 +74,7 @@
       transform: translateX(-50%) rotate(45deg);
     }
   }
-  
+
   &--left {
     .c-popover__arrow {
       top: 50%;
@@ -82,7 +82,7 @@
       transform: translateY(-50%) rotate(45deg);
     }
   }
-  
+
   &--right {
     .c-popover__arrow {
       top: 50%;
@@ -90,7 +90,7 @@
       transform: translateY(-50%) rotate(45deg);
     }
   }
-  
+
   // Auto position automatically selects the best position
   // and will dynamically apply one of the position classes above
   &--auto {

package/src/styles/06-components/_components.product-review.scss

@@ -93,7 +93,7 @@
     color: var(--#{config.$prefix}body-color);
     font-family: inherit;
     resize: vertical;
-    
+
     &:focus {
       outline: none;
       border-color: var(--#{config.$prefix}primary);
@@ -109,12 +109,12 @@
   &__success {
     text-align: center;
     padding: var(--#{config.$prefix}product-review-spacing) 0;
-    
+
     h3 {
       margin-top: 0;
       margin-bottom: rem.rem(8px);
     }
-    
+
     p {
       margin-bottom: var(--#{config.$prefix}product-review-spacing);
       color: var(--#{config.$prefix}text-muted);

package/src/styles/06-components/_components.progress.scss

@@ -4,43 +4,40 @@
 @use '../01-settings/settings.progress' as progress;
 @use '../02-tools/tools.rem' as rem;
 
-.c-progress{
-
-    --#{config.$prefix}progress-width: #{progress.$progress-width};
-    --#{config.$prefix}progress-percentage: 0%; 
-    --#{config.$prefix}progress-height: #{rem.rem(progress.$progress-height)};
-    --#{config.$prefix}progress-font-size: #{progress.$progress-font-size};
-    --#{config.$prefix}progress-bg: #{progress.$progress-bg};
-    --#{config.$prefix}progress-border-radius: #{progress.$progress-border-radius};
-    --#{config.$prefix}progress-bar-width: var(--#{config.$prefix}progress-percentage);
-    --#{config.$prefix}progress-bar-height: #{progress.$progress-bar-height};
-    --#{config.$prefix}progress-bar-color: #{progress.$progress-bar-color};
-    --#{config.$prefix}progress-bar-bg: #{progress.$progress-bar-bg};
-    --#{config.$prefix}progress-bar-transition: #{progress.$progress-bar-transition};
-    --#{config.$prefix}progress-bar-easing: #{progress.$progress-bar-easing};
-
-    width: 100%;
-    max-width: var(--#{config.$prefix}progress-width);
+.c-progress {
+  --#{config.$prefix}progress-width: #{progress.$progress-width};
+  --#{config.$prefix}progress-percentage: 0%;
+  --#{config.$prefix}progress-height: #{rem.rem(progress.$progress-height)};
+  --#{config.$prefix}progress-font-size: #{progress.$progress-font-size};
+  --#{config.$prefix}progress-bg: #{progress.$progress-bg};
+  --#{config.$prefix}progress-border-radius: #{progress.$progress-border-radius};
+  --#{config.$prefix}progress-bar-width: var(--#{config.$prefix}progress-percentage);
+  --#{config.$prefix}progress-bar-height: #{progress.$progress-bar-height};
+  --#{config.$prefix}progress-bar-color: #{progress.$progress-bar-color};
+  --#{config.$prefix}progress-bar-bg: #{progress.$progress-bar-bg};
+  --#{config.$prefix}progress-bar-transition: #{progress.$progress-bar-transition};
+  --#{config.$prefix}progress-bar-easing: #{progress.$progress-bar-easing};
+
+  width: 100%;
+  max-width: var(--#{config.$prefix}progress-width);
+  height: var(--#{config.$prefix}progress-bar-height);
+  background-color: var(--#{config.$prefix}progress-bg);
+  border-radius: var(--#{config.$prefix}progress-border-radius);
+  overflow: hidden;
+
+  &__bar {
+    width: var(--#{config.$prefix}progress-bar-width);
     height: var(--#{config.$prefix}progress-bar-height);
-    background-color: var(--#{config.$prefix}progress-bg);
+    color: var(--#{config.$prefix}progress-bar-color);
+    background-color: var(--#{config.$prefix}progress-bar-bg);
     border-radius: var(--#{config.$prefix}progress-border-radius);
-    overflow: hidden;
-
-    &__bar{
-        width: var(--#{config.$prefix}progress-bar-width);
-        height: var(--#{config.$prefix}progress-bar-height);
-        color: var(--#{config.$prefix}progress-bar-color);
-        background-color: var(--#{config.$prefix}progress-bar-bg);
-        border-radius: var(--#{config.$prefix}progress-border-radius);
-        transition: var(--#{config.$prefix}progress-bar-transition) var(--#{config.$prefix}progress-bar-easing);
-    }
+    transition: var(--#{config.$prefix}progress-bar-transition)
+      var(--#{config.$prefix}progress-bar-easing);
+  }
 
-    @each $color, $value in maps.$theme-colors {
-        &--#{$color} {
-            --#{config.$prefix}progress-bar-bg: var(--#{config.$prefix}#{$color});
-        }
+  @each $color, $value in maps.$theme-colors {
+    &--#{$color} {
+      --#{config.$prefix}progress-bar-bg: var(--#{config.$prefix}#{$color});
     }
+  }
 }
-
-
-

package/src/styles/06-components/_components.rating.scss

@@ -30,16 +30,17 @@
   align-items: center;
   position: relative;
 
-  &[data-readonly="false"] {
+  &[data-readonly='false'] {
     cursor: pointer;
 
     #{$root}__star {
       transition: var(--#{config.$prefix}rating-star-transition);
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         transform: scale(var(--#{config.$prefix}rating-star-hover-scale));
       }
-      
+
       &:focus-visible {
         outline: 2px solid var(--#{config.$prefix}primary);
         outline-offset: 2px;
@@ -77,7 +78,7 @@
         --#{config.$prefix}rating-star-bg: #{$value};
       }
     }
-    
+
     // Focused state
     &--focused {
       outline: 2px solid var(--#{config.$prefix}primary);
@@ -92,22 +93,22 @@
     fill: var(--#{config.$prefix}rating-star-empty-color);
     stroke-width: 1px;
   }
-  
+
   // Full star styles
   &__star-full {
     fill: var(--#{config.$prefix}rating-star-bg);
     display: none;
-    
+
     #{$root}__star--full & {
       display: block;
     }
   }
-  
+
   // Half-star styles
   &__star-half {
     fill: var(--#{config.$prefix}rating-star-bg);
     display: none;
-    
+
     #{$root}__star--half & {
       display: block;
     }

package/src/styles/06-components/_components.river.scss

@@ -6,7 +6,6 @@
 @use '../02-tools/tools.breakpoints' as *;
 @use '../02-tools/tools.grid' as grid;
 
-
 .c-river {
   $root: &;
 
@@ -32,7 +31,10 @@
   --#{config.$prefix}river-content-max-width: #{rem($river-content-max-width)};
   --#{config.$prefix}river-breakout-title-width: #{rem($river-breakout-title-width)};
   --#{config.$prefix}river-breakout-text-width: #{rem($river-breakout-text-width)};
-  --#{config.$prefix}river-content-width: var(--river-content-width, #{rem($river-content-max-width)});
+  --#{config.$prefix}river-content-width: var(
+    --river-content-width,
+    #{rem($river-content-max-width)}
+  );
 
   position: relative;
   width: 100%;

package/src/styles/06-components/_components.sectionintro.scss

@@ -15,16 +15,10 @@
   --#{$prefix}sectionintro-text-color: #{$sectionintro-text-color};
   --#{$prefix}sectionintro-title-font-weight: #{$sectionintro-title-font-weight};
   --#{$prefix}sectionintro-text-font-weight: #{$sectionintro-text-font-weight};
-  --#{$prefix}sectionintro-label-margin-bottom: #{rem(
-      $sectionintro-label-margin-bottom
-    )};
+  --#{$prefix}sectionintro-label-margin-bottom: #{rem($sectionintro-label-margin-bottom)};
   --#{$prefix}sectionintro-text-margin-top: #{rem($sectionintro-text-margin-top)};
-  --#{$prefix}sectionintro-actions-margin-top: #{rem(
-      $sectionintro-actions-margin-top
-    )};
-  --#{$prefix}sectionintro-actions-inner-gap: #{rem(
-      $sectionintro-actions-inner-gap
-    )};
+  --#{$prefix}sectionintro-actions-margin-top: #{rem($sectionintro-actions-margin-top)};
+  --#{$prefix}sectionintro-actions-inner-gap: #{rem($sectionintro-actions-inner-gap)};
   --#{$prefix}sectionintro-width: #{rem($sectionintro-width)};
   --#{$prefix}sectionintro-image-margin-top: #{rem(24px)};
   --#{$prefix}sectionintro-image-max-width: 100%;
@@ -36,8 +30,7 @@
 
   width: 100%;
   max-width: var(--#{$prefix}sectionintro-width);
-  padding: var(--#{$prefix}sectionintro-padding-y)
-    var(--#{$prefix}sectionintro-padding-x);
+  padding: var(--#{$prefix}sectionintro-padding-y) var(--#{$prefix}sectionintro-padding-x);
   position: relative;
   overflow: hidden;
 
@@ -78,29 +71,29 @@
   &--right {
     margin-left: auto;
     text-align: right;
-    
+
     #{$root}__actions {
       justify-content: flex-end;
     }
   }
-  
+
   &__container {
     position: relative;
     z-index: 1;
   }
-  
+
   &__image-wrapper {
     margin-top: var(--#{$prefix}sectionintro-image-margin-top);
     display: flex;
     justify-content: center;
   }
-  
+
   &__image {
     max-width: var(--#{$prefix}sectionintro-image-max-width);
     height: auto;
     border-radius: var(--#{$prefix}border-radius);
   }
-  
+
   &__bg {
     position: absolute;
     top: 0;
@@ -110,13 +103,13 @@
     z-index: var(--#{$prefix}sectionintro-bg-z-index);
     overflow: hidden;
   }
-  
+
   &__bg-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
-  
+
   &__overlay {
     position: absolute;
     top: 0;
@@ -126,43 +119,43 @@
     background-color: var(--#{$prefix}sectionintro-overlay-bg-color);
     opacity: var(--#{$prefix}sectionintro-overlay-opacity);
   }
-  
+
   &--has-bg {
     color: var(--#{$prefix}color-white);
-    
+
     #{$root}__title,
     #{$root}__text,
     #{$root}__label {
       color: var(--#{$prefix}color-white);
     }
   }
-  
+
   &--sm {
     #{$root}__title {
       font-size: var(--#{$prefix}sectionintro-sm-title-font-size);
     }
-    
+
     #{$root}__text {
       font-size: calc(var(--#{$prefix}sectionintro-text-font-size) * 0.9);
     }
   }
-  
+
   &--lg {
     #{$root}__title {
       font-size: var(--#{$prefix}sectionintro-lg-title-font-size);
     }
-    
+
     #{$root}__text {
       font-size: calc(var(--#{$prefix}sectionintro-text-font-size) * 1.1);
     }
   }
-  
+
   @include media-breakpoint-up(md) {
     &__container {
       display: flex;
       flex-direction: column;
     }
-    
+
     &--has-bg {
       padding: rem(60px) var(--#{$prefix}sectionintro-padding-x);
     }

package/src/styles/06-components/_components.select.scss

@@ -52,11 +52,11 @@
     border: 1px solid var(--#{$prefix}select-border-color);
     border-radius: var(--#{$prefix}select-border-radius);
     cursor: pointer;
-    
+
     @include transition.basic-transition();
 
     &:hover {
-        border-color: var(--#{$prefix}select-border-color-hover);
+      border-color: var(--#{$prefix}select-border-color-hover);
     }
   }
 
@@ -86,8 +86,7 @@
   }
 
   &__panel {
-    padding: var(--#{$prefix}select-panel-padding-x)
-      var(--#{$prefix}select-panel-padding-y);
+    padding: var(--#{$prefix}select-panel-padding-x) var(--#{$prefix}select-panel-padding-y);
   }
 
   &__items {
@@ -97,15 +96,15 @@
   }
 
   &__item {
-    padding: var(--#{$prefix}select-item-padding-x)
-      var(--#{$prefix}select-item-padding-y);
+    padding: var(--#{$prefix}select-item-padding-x) var(--#{$prefix}select-item-padding-y);
     color: var(--#{$prefix}select-item-color);
     background-color: var(--#{$prefix}select-item-bg);
     border-radius: var(--#{$prefix}select-item-border-radius);
     @include transition.basic-transition;
 
-    &,&>* {
-        cursor: pointer;
+    &,
+    & > * {
+      cursor: pointer;
     }
 
     &:hover {

package/src/styles/06-components/_components.side-menu.scss

@@ -9,42 +9,71 @@
 .c-side-menu {
   $root: &;
 
+  // 1. CSS Custom Properties
   --#{config.$prefix}side-menu-padding-x: #{rem.rem($side-menu-padding-x)};
   --#{config.$prefix}side-menu-padding-y: #{rem.rem($side-menu-padding-y)};
   --#{config.$prefix}side-menu-bg: #{$side-menu-bg};
   --#{config.$prefix}side-menu-border-radius: #{$side-menu-border-radius};
+  --#{config.$prefix}side-menu-border-width: #{$side-menu-border-width};
+  --#{config.$prefix}side-menu-border-color: #{$side-menu-border-color};
+  --#{config.$prefix}side-menu-box-shadow: #{$side-menu-box-shadow};
   --#{config.$prefix}side-menu-title-font-size: #{$side-menu-title-font-size};
   --#{config.$prefix}side-menu-title-font-weight: #{$side-menu-title-font-weight};
   --#{config.$prefix}side-menu-title-color: #{$side-menu-title-color};
   --#{config.$prefix}side-menu-title-spacer-y: #{rem.rem($side-menu-title-spacer-y)};
+  --#{config.$prefix}side-menu-toggler-padding-x: #{rem.rem($side-menu-toggler-padding-x)};
+  --#{config.$prefix}side-menu-toggler-padding-y: #{rem.rem($side-menu-toggler-padding-y)};
+  --#{config.$prefix}side-menu-toggler-bg: #{$side-menu-toggler-bg};
+  --#{config.$prefix}side-menu-toggler-hover-bg: #{$side-menu-toggler-hover-bg};
+  --#{config.$prefix}side-menu-toggler-border-radius: #{$side-menu-toggler-border-radius};
+  --#{config.$prefix}side-menu-toggler-transition: #{$side-menu-toggler-transition};
   --#{config.$prefix}side-menu-item-padding-x: #{rem.rem($side-menu-item-padding-x)};
   --#{config.$prefix}side-menu-item-padding-y: #{rem.rem($side-menu-item-padding-y)};
   --#{config.$prefix}side-menu-item-font-size: #{$side-menu-item-font-size};
+  --#{config.$prefix}side-menu-item-font-weight: #{$side-menu-item-font-weight};
   --#{config.$prefix}side-menu-item-color: #{$side-menu-item-color};
-
+  --#{config.$prefix}side-menu-item-hover-color: #{$side-menu-item-hover-color};
+  --#{config.$prefix}side-menu-item-active-color: #{$side-menu-item-active-color};
+  --#{config.$prefix}side-menu-item-disabled-color: #{$side-menu-item-disabled-color};
+  --#{config.$prefix}side-menu-item-bg: #{$side-menu-item-bg};
+  --#{config.$prefix}side-menu-item-hover-bg: #{$side-menu-item-hover-bg};
+  --#{config.$prefix}side-menu-item-active-bg: #{$side-menu-item-active-bg};
+  --#{config.$prefix}side-menu-item-disabled-bg: #{$side-menu-item-disabled-bg};
+  --#{config.$prefix}side-menu-item-border-radius: #{$side-menu-item-border-radius};
+  --#{config.$prefix}side-menu-item-transition: #{$side-menu-item-transition};
+  --#{config.$prefix}side-menu-item-gap: #{rem.rem($side-menu-item-gap)};
+  --#{config.$prefix}side-menu-list-margin-bottom: #{rem.rem($side-menu-list-margin-bottom)};
+  --#{config.$prefix}side-menu-list-gap: #{rem.rem($side-menu-list-gap)};
+  --#{config.$prefix}side-menu-wrapper-transition: #{$side-menu-wrapper-transition};
+  --#{config.$prefix}side-menu-inner-padding-top: #{rem.rem($side-menu-inner-padding-top)};
+
+  // 2. Base Component Styles
   width: 100%;
-  padding: var(--#{config.$prefix}side-menu-padding-y)
-    var(--#{config.$prefix}side-menu-padding-x);
+  padding: var(--#{config.$prefix}side-menu-padding-y) var(--#{config.$prefix}side-menu-padding-x);
   background: var(--#{config.$prefix}side-menu-bg);
   border-radius: var(--#{config.$prefix}side-menu-border-radius);
+  border: var(--#{config.$prefix}side-menu-border-width) solid
+    var(--#{config.$prefix}side-menu-border-color);
+  box-shadow: var(--#{config.$prefix}side-menu-box-shadow);
 
+  // 3. Responsive Styles
   @include media-breakpoint-down(md) {
-    padding: rem.rem(12px) rem.rem(16px);
+    padding: #{rem.rem($side-menu-mobile-padding-y)} #{rem.rem($side-menu-mobile-padding-x)};
   }
 
+  // 4. Element Styles (BEM Elements)
   &__wrapper {
     @include media-breakpoint-down(md) {
       height: 0px;
       overflow: hidden;
       user-select: none;
-
-      @include transition.basic-transition();
+      transition: var(--#{config.$prefix}side-menu-wrapper-transition);
     }
   }
 
   &__inner {
     @include media-breakpoint-down(md) {
-      padding-top: rem.rem(20px);
+      padding-top: var(--#{config.$prefix}side-menu-inner-padding-top);
     }
   }
 
@@ -53,12 +82,60 @@
     font-size: var(--#{config.$prefix}side-menu-title-font-size);
     font-weight: var(--#{config.$prefix}side-menu-title-font-weight);
     margin-bottom: var(--#{config.$prefix}side-menu-title-spacer-y);
+    margin: 0 0 var(--#{config.$prefix}side-menu-title-spacer-y) 0;
+  }
+
+  &__toggler {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--#{config.$prefix}side-menu-toggler-padding-y)
+      var(--#{config.$prefix}side-menu-toggler-padding-x);
+    background: var(--#{config.$prefix}side-menu-toggler-bg);
+    border: none;
+    border-radius: var(--#{config.$prefix}side-menu-toggler-border-radius);
+    cursor: pointer;
+    user-select: none;
+    transition: var(--#{config.$prefix}side-menu-toggler-transition);
+    text-align: left;
+
+    @include media-breakpoint-down(md) {
+      display: flex;
+    }
+
+    &:hover {
+      background: var(--#{config.$prefix}side-menu-toggler-hover-bg);
+    }
+
+    &:focus {
+      outline: 2px solid var(--#{config.$prefix}focus-ring-color);
+      outline-offset: 2px;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    &[aria-disabled='true'] {
+      opacity: 0.6;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__toggler-icon {
+    transition: var(--#{config.$prefix}side-menu-toggler-transition);
+    font-size: 0.875em;
   }
 
   &__list {
     list-style: none;
-    padding-left: 0;
-    margin-bottom: 12px;
+    padding: 0;
+    margin: 0 0 var(--#{config.$prefix}side-menu-list-margin-bottom) 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{config.$prefix}side-menu-list-gap);
 
     &:last-child {
       margin-bottom: 0;
@@ -66,43 +143,92 @@
   }
 
   &__item {
-    display: flex;
-    align-items: center;
+    // List item wrapper - no specific styles needed
   }
 
   &__link {
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    gap: var(--#{config.$prefix}side-menu-item-gap);
+    width: 100%;
+    padding: var(--#{config.$prefix}side-menu-item-padding-y)
+      var(--#{config.$prefix}side-menu-item-padding-x);
     color: var(--#{config.$prefix}side-menu-item-color);
     font-size: var(--#{config.$prefix}side-menu-item-font-size);
-    padding: var(--#{config.$prefix}side-menu-item-padding-y)
-      var(--#{config.$prefix}side-menu-item-padding-y);
+    font-weight: var(--#{config.$prefix}side-menu-item-font-weight);
+    background: var(--#{config.$prefix}side-menu-item-bg);
+    border: none;
+    border-radius: var(--#{config.$prefix}side-menu-item-border-radius);
+    text-decoration: none;
+    cursor: pointer;
+    transition: var(--#{config.$prefix}side-menu-item-transition);
+
+    &:hover {
+      color: var(--#{config.$prefix}side-menu-item-hover-color);
+      background: var(--#{config.$prefix}side-menu-item-hover-bg);
+      text-decoration: none;
+    }
 
+    &:focus {
+      outline: 2px solid var(--#{config.$prefix}focus-ring-color);
+      outline-offset: 2px;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    // 5. State Classes
     &.is-active {
-      color: var(--#{config.$prefix}brand-text-emphasis);
+      color: var(--#{config.$prefix}side-menu-item-active-color);
+      background: var(--#{config.$prefix}side-menu-item-active-bg);
       font-weight: typography.$font-weight-medium;
     }
+
+    &.is-disabled,
+    &[aria-disabled='true'] {
+      color: var(--#{config.$prefix}side-menu-item-disabled-color);
+      background: var(--#{config.$prefix}side-menu-item-disabled-bg);
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.6;
+    }
   }
 
-  &__toggler {
-    display: none;
-    justify-content: space-between;
-    font-size: typography.$font-size-lg;
-    font-weight: typography.$font-weight-medium;
-    cursor: pointer;
-    user-select: none;
+  &__link-icon {
+    flex-shrink: 0;
+    font-size: 1em;
+  }
 
-    @include media-breakpoint-down(md) {
-      display: flex;
+  &__link-text {
+    flex: 1;
+  }
+
+  // 6. State Classes
+  &.is-open {
+    #{$root}__toggler-icon {
+      transform: rotate(90deg);
     }
   }
 
-  &__toggler-icon {
-    @include transition.basic-transition();
+  // 7. Dark Mode Support
+  .dark-mode & {
+    --#{config.$prefix}side-menu-bg: #{$side-menu-bg-dark};
+    --#{config.$prefix}side-menu-border-color: #{$side-menu-border-color-dark};
+    --#{config.$prefix}side-menu-title-color: #{$side-menu-title-color-dark};
+    --#{config.$prefix}side-menu-item-color: #{$side-menu-item-color-dark};
+    --#{config.$prefix}side-menu-item-hover-color: #{$side-menu-item-hover-color-dark};
+    --#{config.$prefix}side-menu-item-active-color: #{$side-menu-item-active-color-dark};
   }
 
-  &.is-open  {
+  // 8. Accessibility Considerations
+  @media (prefers-reduced-motion: reduce) {
+    --#{config.$prefix}side-menu-wrapper-transition: none;
+    --#{config.$prefix}side-menu-toggler-transition: none;
+    --#{config.$prefix}side-menu-item-transition: none;
+
     #{$root}__toggler-icon {
-      transform: rotate(90deg);
+      transition: none;
     }
   }
 }

package/src/styles/06-components/_components.skeleton.scss

@@ -47,7 +47,6 @@
     width: var(--#{$prefix}skeleton-height);
   }
 
-
   @each $size, $value in $skeleton-sizes {
     &--#{$size} {
       --#{$prefix}skeleton-height: #{$value};