@kaizen/components 0.0.0-canary-test-cherry-picked-updates-20250702235156 → 0.0.0-canary-ssr-generic-modal-2-20250709041326

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.module.scss

@@ -3,84 +3,86 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../../../../styles/utils/button-reset';
 
-.multiSelectToggle {
-  position: relative;
-  display: inline-flex;
-  width: 100%;
-  border: $border-solid-border-style $border-solid-border-width $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  flex-direction: row-reverse;
-  padding: calc(#{$spacing-12} - #{$border-solid-border-width});
-  box-sizing: border-box;
+@layer kz-components {
+  .multiSelectToggle {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    border: $border-solid-border-style $border-solid-border-width $color-gray-500;
+    border-radius: $border-solid-border-radius;
+    flex-direction: row-reverse;
+    padding: calc(#{$spacing-12} - #{$border-solid-border-width});
+    box-sizing: border-box;
 
-  &:hover,
-  &:focus-within {
-    border-color: $color-gray-600;
-    background-color: $color-gray-200;
-  }
+    &:hover,
+    &:focus-within {
+      border-color: $color-gray-600;
+      background-color: $color-gray-200;
+    }
 
-  &.error {
-    border: $border-solid-border-style $border-solid-border-width $color-red-500;
-  }
+    &.error {
+      border: $border-solid-border-style $border-solid-border-width $color-red-500;
+    }
 
-  &.caution {
-    border: $border-solid-border-style $border-solid-border-width $color-yellow-600;
+    &.caution {
+      border: $border-solid-border-style $border-solid-border-width $color-yellow-600;
+    }
   }
-}
 
-.toggleButton {
-  @include button-reset;
+  .toggleButton {
+    @include button-reset;
 
-  display: inline-flex;
-  align-items: flex-start;
-  margin: 3px 0;
-  color: rgba($color-purple-800-rgb, 0.7);
+    display: inline-flex;
+    align-items: flex-start;
+    margin: 3px 0;
+    color: rgba($color-purple-800-rgb, 0.7);
 
-  &:hover {
-    color: $color-purple-800;
-  }
+    &:hover {
+      color: $color-purple-800;
+    }
 
-  &:focus {
-    color: $color-purple-800;
-    outline: none;
+    &:focus {
+      color: $color-purple-800;
+      outline: none;
 
-    &::after {
-      position: absolute;
-      pointer-events: none;
-      content: '';
-      inset: calc(
-        -1 * calc(#{$border-focus-ring-border-width} + #{$border-solid-border-width} + 1px)
-      );
-      border-radius: $border-focus-ring-border-radius;
-      border: $border-focus-ring-border-style $border-focus-ring-border-width $color-blue-500;
+      &::after {
+        position: absolute;
+        pointer-events: none;
+        content: '';
+        inset: calc(
+          -1 * calc(#{$border-focus-ring-border-width} + #{$border-solid-border-width} + 1px)
+        );
+        border-radius: $border-focus-ring-border-radius;
+        border: $border-focus-ring-border-style $border-focus-ring-border-width $color-blue-500;
+      }
     }
   }
-}
 
-.selectedItemsContainer {
-  display: flex;
-  gap: $spacing-12;
-  align-items: flex-start;
-  width: 100%;
-  border-inline-end: 1px solid transparent;
-  padding-inline-end: $spacing-12;
-  margin-inline-end: $spacing-12;
+  .selectedItemsContainer {
+    display: flex;
+    gap: $spacing-12;
+    align-items: flex-start;
+    width: 100%;
+    border-inline-end: 1px solid transparent;
+    padding-inline-end: $spacing-12;
+    margin-inline-end: $spacing-12;
 
-  &.hasSelectedItems {
-    border-inline-end-color: rgba($color-gray-600-rgb, 0.2);
+    &.hasSelectedItems {
+      border-inline-end-color: rgba($color-gray-600-rgb, 0.2);
+    }
   }
-}
 
-.selectedItems {
-  display: flex;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  margin: 0;
-  padding: 0;
-  gap: $spacing-6;
-  list-style: none;
-}
+  .selectedItems {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    margin: 0;
+    padding: 0;
+    gap: $spacing-6;
+    list-style: none;
+  }
 
-.clearAllButton {
-  margin: 3px 0;
+  .clearAllButton {
+    margin: 3px 0;
+  }
 }

package/src/MultiSelect/subcomponents/Popover/Popover.module.scss

@@ -2,20 +2,22 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/shadow';
 
-.popover {
-  box-sizing: border-box;
-  box-shadow: $shadow-large-box-shadow;
-  border: $border-focus-ring-border-width $border-focus-ring-border-style transparent;
-  border-radius: $border-solid-border-radius;
-  background: $color-white;
-  overflow: auto;
-  z-index: 100000;
+@layer kz-components {
+  .popover {
+    box-sizing: border-box;
+    box-shadow: $shadow-large-box-shadow;
+    border: $border-focus-ring-border-width $border-focus-ring-border-style transparent;
+    border-radius: $border-solid-border-radius;
+    background: $color-white;
+    overflow: auto;
+    z-index: 100000;
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    border-color: $color-blue-500;
+    &:focus-visible {
+      border-color: $color-blue-500;
+    }
   }
 }

package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.module.scss

@@ -1,26 +1,28 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-.toastNotificationsList {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  overflow: hidden;
-  padding-bottom: 0;
-  padding-top: 160px + 12px;
-  position: fixed;
-  right: $spacing-md;
-  top: 0;
-  bottom: 0;
-  z-index: 1100;
-  max-width: 100%;
-  pointer-events: none;
+@layer kz-components {
+  .toastNotificationsList {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    overflow: hidden;
+    padding-bottom: 0;
+    padding-top: 160px + 12px;
+    position: fixed;
+    right: $spacing-md;
+    top: 0;
+    bottom: 0;
+    z-index: 1100;
+    max-width: 100%;
+    pointer-events: none;
 
-  @media (max-width: ($layout-breakpoints-large - 1px)) {
-    padding-top: 108px;
-  }
+    @media (max-width: ($layout-breakpoints-large - 1px)) {
+      padding-top: 108px;
+    }
 
-  @media (max-width: ($layout-breakpoints-medium - 1px)) {
-    left: $spacing-md;
+    @media (max-width: ($layout-breakpoints-medium - 1px)) {
+      left: $spacing-md;
+    }
   }
 }

package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss

@@ -4,147 +4,149 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import './mixins';
 
-.notification {
-  @extend %ca-notification;
-}
+@layer kz-components {
+  .notification {
+    @extend %ca-notification;
+  }
 
-// Structure
-.icon {
-  @extend %ca-notification__icon;
+  // Structure
+  .icon {
+    @extend %ca-notification__icon;
 
-  color: var(--icon-color);
-}
+    color: var(--icon-color);
+  }
 
-.textContainer {
-  @extend %ca-notification__text-container;
-}
+  .textContainer {
+    @extend %ca-notification__text-container;
+  }
 
-.title {
-  @extend %ca-notification__title;
-}
+  .title {
+    @extend %ca-notification__title;
+  }
 
-.text {
-  @extend %ca-notification__text;
-}
+  .text {
+    @extend %ca-notification__text;
+  }
 
-.cancel {
-  @extend %ca-notification__cancel;
+  .cancel {
+    @extend %ca-notification__cancel;
 
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-solid-border-radius);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-solid-border-radius);
 
-  &:focus-visible {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: -4px;
+    &:focus-visible {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: -4px;
+    }
   }
-}
-
-.cancelLabel {
-  @extend %ca-notification__cancel__label;
-}
 
-.notificationTitle {
-  top: 0.42em;
-  position: relative;
-  margin-inline-end: $spacing-6;
-  line-height: $typography-heading-6-line-height;
-}
+  .cancelLabel {
+    @extend %ca-notification__cancel__label;
+  }
 
-@container (max-width: 25rem) {
   .notificationTitle {
-    width: 100%;
+    top: 0.42em;
+    position: relative;
+    margin-inline-end: $spacing-6;
+    line-height: $typography-heading-6-line-height;
   }
-}
 
-// Animation
-.hidden {
-  @extend %ca-notification---hidden;
-}
+  @container (max-width: 25rem) {
+    .notificationTitle {
+      width: 100%;
+    }
+  }
 
-// Variant
-.inline {
-  @extend %ca-notification---inline;
-}
+  // Animation
+  .hidden {
+    @extend %ca-notification---hidden;
+  }
 
-.toast {
-  @extend %ca-notification---toast;
-}
+  // Variant
+  .inline {
+    @extend %ca-notification---inline;
+  }
 
-.global {
-  @extend %ca-notification---global;
-}
+  .toast {
+    @extend %ca-notification---toast;
+  }
 
-// ------------------------------
-// Type
-// @deprecated use variant instead
-// ------------------------------
-.positive {
-  @extend %ca-notification---positive;
-}
+  .global {
+    @extend %ca-notification---global;
+  }
 
-.security {
-  @extend %ca-notification---cautionary;
-}
+  // ------------------------------
+  // Type
+  // @deprecated use variant instead
+  // ------------------------------
+  .positive {
+    @extend %ca-notification---positive;
+  }
 
-.negative {
-  @extend %ca-notification---negative;
-}
+  .security {
+    @extend %ca-notification---cautionary;
+  }
 
-// End deprecated styles
+  .negative {
+    @extend %ca-notification---negative;
+  }
 
-// ------------------------------
-// Variant
-// ------------------------------
-.success {
-  background: $color-green-100;
-  border-color: var(--color-green-500);
-  color: $color-purple-800;
+  // End deprecated styles
 
-  --icon-color: var(--color-green-500);
-}
+  // ------------------------------
+  // Variant
+  // ------------------------------
+  .success {
+    background: $color-green-100;
+    border-color: var(--color-green-500);
+    color: $color-purple-800;
 
-.informative {
-  background: $color-blue-100;
-  border-color: var(--color-blue-500);
-  color: $color-purple-800;
+    --icon-color: var(--color-green-500);
+  }
 
-  --icon-color: var(--color-blue-500);
-}
+  .informative {
+    background: $color-blue-100;
+    border-color: var(--color-blue-500);
+    color: $color-purple-800;
 
-.cautionary {
-  background: $color-yellow-100;
-  border-color: var(--color-yellow-700);
-  color: $color-purple-800;
+    --icon-color: var(--color-blue-500);
+  }
 
-  --icon-color: var(--color-yellow-700);
-}
+  .cautionary {
+    background: $color-yellow-100;
+    border-color: var(--color-yellow-700);
+    color: $color-purple-800;
 
-.warning {
-  background: $color-red-100;
-  border-color: var(--color-red-500);
-  color: $color-purple-800;
+    --icon-color: var(--color-yellow-700);
+  }
 
-  --icon-color: var(--color-red-500);
-}
+  .warning {
+    background: $color-red-100;
+    border-color: var(--color-red-500);
+    color: $color-purple-800;
 
-// Modifiers
-.noBottomMargin {
-  @extend %ca-notification---noBottomMargin;
-}
+    --icon-color: var(--color-red-500);
+  }
 
-.forceMultiline {
-  @extend %ca-notification---forceMultiline;
-}
+  // Modifiers
+  .noBottomMargin {
+    @extend %ca-notification---noBottomMargin;
+  }
 
-.persistent {
-  @extend %ca-notification---persistent;
-}
+  .forceMultiline {
+    @extend %ca-notification---forceMultiline;
+  }
 
-// this is only for inline notifications, but is here due to specificity issues in the _styles.scss file
-.subtle {
-  @extend %ca-notification---subtle;
+  .persistent {
+    @extend %ca-notification---persistent;
+  }
+
+  // this is only for inline notifications, but is here due to specificity issues in the _styles.scss file
+  .subtle {
+    @extend %ca-notification---subtle;
+  }
 }