@kaizen/components 1.78.0 → 1.79.0

package/src/Button/IconButton/IconButton.module.scss

@@ -3,30 +3,32 @@
 @import '../utils/mixins';
 @import '../utils/variables';
 
-%icon-button {
-  width: $button-height;
-  border-color: $border-borderless-border-color;
+@layer kz-components {
+  %icon-button {
+    width: $button-height;
+    border-color: $border-borderless-border-color;
 
-  @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
+    @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
 
-  & #{$className--content} {
-    justify-content: center;
-    width: 100%;
-    padding: 0;
-  }
+    & #{$className--content} {
+      justify-content: center;
+      width: 100%;
+      padding: 0;
+    }
 
-  &:not(.reversed) {
-    &.default {
-      background-color: transparent;
-      color: inherit;
+    &:not(.reversed) {
+      &.default {
+        background-color: transparent;
+        color: inherit;
 
-      @include enabled-pseudo-states-variant($background-color: $color-gray-200);
+        @include enabled-pseudo-states-variant($background-color: $color-gray-200);
+      }
     }
-  }
 
-  &.reversed {
-    border-color: $border-borderless-border-color;
+    &.reversed {
+      border-color: $border-borderless-border-color;
 
-    @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
+      @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
+    }
   }
 }

package/src/ButtonGroup/ButtonGroup.module.css

@@ -1,48 +1,50 @@
-.buttonGroup {
-  --focus-ring-offset: 1px;
-  --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
+@layer kz-components {
+  .buttonGroup {
+    --focus-ring-offset: 1px;
+    --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
 
-  display: inline-flex;
-}
+    display: inline-flex;
+  }
 
-.child {
-  border-radius: 0;
-}
+  .child {
+    border-radius: 0;
+  }
 
-.child:focus-visible::after {
-  border-radius: 0;
-}
+  .child:focus-visible::after {
+    border-radius: 0;
+  }
 
-.child:not(.firstChild) {
-  border-inline-start: 1px solid var(--color-blue-300);
-}
+  .child:not(.firstChild) {
+    border-inline-start: 1px solid var(--color-blue-300);
+  }
 
-.child:not(.firstChild, .lastChild) {
-  &:focus-visible {
-    &::after {
-      inset-inline: var(--focus-ring-offset-inner);
+  .child:not(.firstChild, .lastChild) {
+    &:focus-visible {
+      &::after {
+        inset-inline: var(--focus-ring-offset-inner);
+      }
     }
   }
-}
 
-.child.firstChild {
-  border-start-start-radius: var(--border-focus-ring-border-radius);
-  border-end-start-radius: var(--border-focus-ring-border-radius);
-}
+  .child.firstChild {
+    border-start-start-radius: var(--border-focus-ring-border-radius);
+    border-end-start-radius: var(--border-focus-ring-border-radius);
+  }
 
-.child.firstChild:focus-visible::after {
-  border-start-start-radius: var(--border-focus-ring-border-radius);
-  border-end-start-radius: var(--border-focus-ring-border-radius);
-  inset-inline-end: var(--focus-ring-offset-inner);
-}
+  .child.firstChild:focus-visible::after {
+    border-start-start-radius: var(--border-focus-ring-border-radius);
+    border-end-start-radius: var(--border-focus-ring-border-radius);
+    inset-inline-end: var(--focus-ring-offset-inner);
+  }
 
-.child.lastChild {
-  border-start-end-radius: var(--border-focus-ring-border-radius);
-  border-end-end-radius: var(--border-focus-ring-border-radius);
-}
+  .child.lastChild {
+    border-start-end-radius: var(--border-focus-ring-border-radius);
+    border-end-end-radius: var(--border-focus-ring-border-radius);
+  }
 
-.child.lastChild:focus-visible::after {
-  border-start-end-radius: var(--border-focus-ring-border-radius);
-  border-end-end-radius: var(--border-focus-ring-border-radius);
-  inset-inline-start: var(--focus-ring-offset-inner);
+  .child.lastChild:focus-visible::after {
+    border-start-end-radius: var(--border-focus-ring-border-radius);
+    border-end-end-radius: var(--border-focus-ring-border-radius);
+    inset-inline-start: var(--focus-ring-offset-inner);
+  }
 }

package/src/ButtonGroup/ButtonGroup.module.scss

@@ -1,63 +1,65 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-$focus-ring-offset: 1px;
-$focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset});
+@layer kz-components {
+  $focus-ring-offset: 1px;
+  $focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset});
 
-%firstChildBorders {
-  border-start-start-radius: $border-focus-ring-border-radius;
-  border-end-start-radius: $border-focus-ring-border-radius;
-}
+  %firstChildBorders {
+    border-start-start-radius: $border-focus-ring-border-radius;
+    border-end-start-radius: $border-focus-ring-border-radius;
+  }
 
-%lastChildBorders {
-  border-start-end-radius: $border-focus-ring-border-radius;
-  border-end-end-radius: $border-focus-ring-border-radius;
-}
+  %lastChildBorders {
+    border-start-end-radius: $border-focus-ring-border-radius;
+    border-end-end-radius: $border-focus-ring-border-radius;
+  }
 
-.buttonGroup {
-  display: inline-flex;
+  .buttonGroup {
+    display: inline-flex;
 
-  .child {
-    border-radius: 0;
+    .child {
+      border-radius: 0;
 
-    &:focus-visible {
-      &::after {
-        border-radius: 0;
+      &:focus-visible {
+        &::after {
+          border-radius: 0;
+        }
       }
-    }
 
-    &:not(.firstChild) {
-      border-inline-start: 1px solid $color-blue-300;
-    }
+      &:not(.firstChild) {
+        border-inline-start: 1px solid $color-blue-300;
+      }
 
-    &:not(.firstChild, .lastChild) {
-      &:focus-visible {
-        &::after {
-          inset-inline: $focus-ring-offset-inner $focus-ring-offset-inner;
+      &:not(.firstChild, .lastChild) {
+        &:focus-visible {
+          &::after {
+            inset-inline: $focus-ring-offset-inner $focus-ring-offset-inner;
+          }
         }
       }
-    }
 
-    &.firstChild {
-      @extend %firstChildBorders;
+      &.firstChild {
+        @extend %firstChildBorders;
 
-      &:focus-visible {
-        &::after {
-          @extend %firstChildBorders;
+        &:focus-visible {
+          &::after {
+            @extend %firstChildBorders;
 
-          inset-inline-end: $focus-ring-offset-inner;
+            inset-inline-end: $focus-ring-offset-inner;
+          }
         }
       }
-    }
 
-    &.lastChild {
-      @extend %lastChildBorders;
+      &.lastChild {
+        @extend %lastChildBorders;
 
-      &:focus-visible {
-        &::after {
-          @extend %lastChildBorders;
+        &:focus-visible {
+          &::after {
+            @extend %lastChildBorders;
 
-          inset-inline-start: $focus-ring-offset-inner;
+            inset-inline-start: $focus-ring-offset-inner;
+          }
         }
       }
     }

package/src/Calendar/CalendarPopover/CalendarPopover.module.scss

@@ -4,24 +4,26 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-.calendarPopover {
-  background-color: $color-white;
-  z-index: 1010;
-  box-shadow: $shadow-large-box-shadow;
-  border-radius: $border-borderless-border-radius;
-  padding: $spacing-12 $spacing-8;
-  box-sizing: border-box;
-  overflow: auto;
+@layer kz-components {
+  .calendarPopover {
+    background-color: $color-white;
+    z-index: 1010;
+    box-shadow: $shadow-large-box-shadow;
+    border-radius: $border-borderless-border-radius;
+    padding: $spacing-12 $spacing-8;
+    box-sizing: border-box;
+    overflow: auto;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    padding: $spacing-24;
+    @media (min-width: $layout-breakpoints-medium) {
+      padding: $spacing-24;
+    }
   }
-}
 
-// Overrides for if the browser supports popovers. The inset unset is to fix a bug with RTL positioning https://github.com/floating-ui/floating-ui/issues/3221
-// Margin 0 because default styling for [popover] is margin: auto to center it.
-.calendarPopover[popover]:popover-open {
-  z-index: unset;
-  margin: 0;
-  inset: unset;
+  // Overrides for if the browser supports popovers. The inset unset is to fix a bug with RTL positioning https://github.com/floating-ui/floating-ui/issues/3221
+  // Margin 0 because default styling for [popover] is margin: auto to center it.
+  .calendarPopover[popover]:popover-open {
+    z-index: unset;
+    margin: 0;
+    inset: unset;
+  }
 }

package/src/Calendar/CalendarRange/CalendarRange.module.scss

@@ -1,66 +1,68 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-$cell-border-radius: 3px;
+@layer kz-components {
+  $cell-border-radius: 3px;
 
-.month {
-  padding: 0 $spacing-sm;
+  .month {
+    padding: 0 $spacing-sm;
 
-  &:nth-of-type(1) {
-    padding-inline-start: 0;
-  }
+    &:nth-of-type(1) {
+      padding-inline-start: 0;
+    }
 
-  &:last-child {
-    padding-inline-end: 0;
+    &:last-child {
+      padding-inline-end: 0;
+    }
   }
-}
 
-.monthWithDivider {
-  position: relative;
-  padding: 0 $spacing-md;
+  .monthWithDivider {
+    position: relative;
+    padding: 0 $spacing-md;
 
-  &:not(:nth-of-type(1)) {
-    &::before {
-      position: absolute;
-      content: '';
-      inset: calc(-1 * #{$spacing-md}) 0;
-      border-inline-start: 1px solid $color-gray-300;
+    &:not(:nth-of-type(1)) {
+      &::before {
+        position: absolute;
+        content: '';
+        inset: calc(-1 * #{$spacing-md}) 0;
+        border-inline-start: 1px solid $color-gray-300;
+      }
     }
-  }
 
-  &:nth-of-type(1) {
-    padding-inline-start: 0;
-  }
+    &:nth-of-type(1) {
+      padding-inline-start: 0;
+    }
 
-  &:last-child {
-    padding-inline-end: 0;
+    &:last-child {
+      padding-inline-end: 0;
+    }
   }
-}
 
-.nav {
-  position: absolute;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  color: $color-purple-800;
-  top: -0.25rem;
-}
-
-.dayRangeStart,
-.dayRangeEnd {
-  background-color: $color-blue-500;
-  color: $color-white;
-}
+  .nav {
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    color: $color-purple-800;
+    top: -0.25rem;
+  }
 
-.dayRangeMiddle {
-  background-color: $color-blue-100;
-  color: $color-blue-500;
+  .dayRangeStart,
+  .dayRangeEnd {
+    background-color: $color-blue-500;
+    color: $color-white;
+  }
 
-  & [class*='_button_'] {
+  .dayRangeMiddle {
+    background-color: $color-blue-100;
     color: $color-blue-500;
+
+    & [class*='_button_'] {
+      color: $color-blue-500;
+    }
   }
-}
 
-.hidden {
-  background-color: transparent;
+  .hidden {
+    background-color: transparent;
+  }
 }

package/src/Calendar/CalendarSingle/CalendarSingle.module.scss

@@ -1,14 +1,16 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-.nav {
-  position: absolute;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  color: $color-purple-800;
-  top: -0.25rem;
-}
+@layer kz-components {
+  .nav {
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    color: $color-purple-800;
+    top: -0.25rem;
+  }
 
-.navButtonNext {
-  inset-inline-end: 0;
+  .navButtonNext {
+    inset-inline-end: 0;
+  }
 }

package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss

@@ -1,25 +1,27 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-.nav {
-  position: absolute;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  color: $color-purple-800;
-  top: -0.25rem;
-}
-
-.dayRangeStart,
-.dayRangeEnd {
-  background-color: $color-blue-500;
-  color: $color-white;
-}
+@layer kz-components {
+  .nav {
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    color: $color-purple-800;
+    top: -0.25rem;
+  }
 
-.dayRangeMiddle {
-  background-color: $color-blue-100;
-  color: $color-blue-500;
+  .dayRangeStart,
+  .dayRangeEnd {
+    background-color: $color-blue-500;
+    color: $color-white;
+  }
 
-  & [class*='_button_'] {
+  .dayRangeMiddle {
+    background-color: $color-blue-100;
     color: $color-blue-500;
+
+    & [class*='_button_'] {
+      color: $color-blue-500;
+    }
   }
 }