@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/src/Modal/ContextModal/ContextModal.module.scss

@@ -3,106 +3,104 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../GenericModal/GenericModal.module';
 
-@layer kz-components {
-  .modal {
-    @extend %genericModal;
+.modal {
+  @extend %genericModal;
 
-    min-width: 300px;
-    max-width: 840px;
+  min-width: 300px;
+  max-width: 840px;
 
-    @media (min-width: $layout-breakpoints-medium) {
-      width: 90%;
-    }
+  @media (min-width: $layout-breakpoints-medium) {
+    width: 90%;
+  }
 
-    .animatingEnter & {
-      animation-duration: $ca-duration-fast;
-      animation-fill-mode: forwards;
-      animation-timing-function: $ca-bounce-in;
+  .animatingEnter & {
+    animation-duration: $ca-duration-fast;
+    animation-fill-mode: forwards;
+    animation-timing-function: $ca-bounce-in;
 
-      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-    }
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+  }
 
-    .animatingLeave & {
-      animation-duration: $ca-duration-rapid;
-      animation-fill-mode: forwards;
-      animation-timing-function: $ca-bounce-out;
+  .animatingLeave & {
+    animation-duration: $ca-duration-rapid;
+    animation-fill-mode: forwards;
+    animation-timing-function: $ca-bounce-out;
 
-      @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-    }
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
+}
 
-  .header {
-    color: $color-purple-800;
-    text-align: start;
+.header {
+  color: $color-purple-800;
+  text-align: start;
 
-    &.padded {
-      padding: $spacing-md;
+  &.padded {
+    padding: $spacing-md;
 
-      @media (min-width: $layout-breakpoints-medium) {
-        padding: $spacing-md $spacing-lg;
-      }
+    @media (min-width: $layout-breakpoints-medium) {
+      padding: $spacing-md $spacing-lg;
     }
   }
+}
 
-  %footer {
-    white-space: initial;
+%footer {
+  white-space: initial;
 
-    @media (min-width: $layout-breakpoints-medium) {
-      white-space: nowrap;
-    }
+  @media (min-width: $layout-breakpoints-medium) {
+    white-space: nowrap;
   }
+}
 
-  .footer {
-    @extend %footer;
-  }
+.footer {
+  @extend %footer;
+}
 
-  .footerWithSecondaryAction {
-    @extend %footer;
+.footerWithSecondaryAction {
+  @extend %footer;
 
-    margin-inline-start: calc(-1 * #{$spacing-sm});
-  }
+  margin-inline-start: calc(-1 * #{$spacing-sm});
+}
+
+.emptyFooter {
+  height: $spacing-sm;
+}
 
-  .emptyFooter {
-    height: $spacing-sm;
+.portraitContentlayout {
+  padding: $spacing-md;
+  display: block;
+  box-sizing: content-box;
+
+  @media (min-width: $layout-breakpoints-medium) {
+    display: grid;
+    max-width: 800px;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    column-gap: $spacing-xl;
+    padding: $spacing-md $spacing-lg;
   }
+}
 
-  .portraitContentlayout {
-    padding: $spacing-md;
-    display: block;
-    box-sizing: content-box;
+.landscapeContentlayout {
+  display: flex;
+  padding: $spacing-md;
+  flex-direction: column;
 
-    @media (min-width: $layout-breakpoints-medium) {
-      display: grid;
-      max-width: 800px;
-      grid-auto-columns: 1fr;
-      grid-auto-flow: column;
-      column-gap: $spacing-xl;
-      padding: $spacing-md $spacing-lg;
-    }
+  @media (min-width: $layout-breakpoints-medium) {
+    padding: $spacing-md $spacing-lg;
   }
 
-  .landscapeContentlayout {
+  .image {
     display: flex;
-    padding: $spacing-md;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 
-    @media (min-width: $layout-breakpoints-medium) {
-      padding: $spacing-md $spacing-lg;
-    }
-
-    .image {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .content {
-      padding-inline-start: 0;
+  .content {
+    padding-inline-start: 0;
 
-      @media (min-width: $layout-breakpoints-medium) {
-        max-width: 100%;
-      }
+    @media (min-width: $layout-breakpoints-medium) {
+      max-width: 100%;
     }
   }
 }

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -8,125 +8,123 @@
 @import '../../../styles/utils/border';
 @import '../../../styles/utils/animation';
 
-@layer kz-components {
-  .defaultModalWidth {
-    min-width: 300px;
-    max-width: 600px;
-  }
+.defaultModalWidth {
+  min-width: 300px;
+  max-width: 600px;
+}
 
-  .backdropLayer {
-    position: fixed;
-    background-color: #000;
-    opacity: 50%;
-    z-index: $ca-z-index-modal-backdrop;
+.backdropLayer {
+  position: fixed;
+  background-color: #000;
+  opacity: 50%;
+  z-index: $ca-z-index-modal-backdrop;
 
-    @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-  }
+  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+}
 
-  .scrollLayer {
-    position: fixed;
-    display: flex;
-    align-items: center;
-    z-index: $ca-z-index-modal;
-    overflow-y: auto;
+.scrollLayer {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  z-index: $ca-z-index-modal;
+  overflow-y: auto;
 
-    @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-  }
+  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+}
+
+.modalLayer {
+  // use flexbox auto margins to horizontally and vertically centre the modal
+  // because in IE11, `align-items: center` and `justify-content: center` cause
+  // long modal content to become unreachable if they go off-screen
+  margin: auto;
+  padding: $ca-grid 0;
+  width: 100%;
+}
 
-  .modalLayer {
-    // use flexbox auto margins to horizontally and vertically centre the modal
-    // because in IE11, `align-items: center` and `justify-content: center` cause
-    // long modal content to become unreachable if they go off-screen
-    margin: auto;
-    padding: $ca-grid 0;
+%genericModal {
+  margin: auto;
+  background-color: $color-white;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-large-box-shadow;
+  position: relative;
+  width: 90%;
+  -webkit-font-smoothing: antialiased;
+  color: $color-purple-800;
+
+  @include ca-media-tablet-and-up {
     width: 100%;
   }
 
-  %genericModal {
-    margin: auto;
-    background-color: $color-white;
-    border-radius: $border-solid-border-radius;
-    box-shadow: $shadow-large-box-shadow;
-    position: relative;
-    width: 90%;
-    -webkit-font-smoothing: antialiased;
-    color: $color-purple-800;
-
-    @include ca-media-tablet-and-up {
-      width: 100%;
-    }
-
-    // wrap the modal container with a focus ring when the title has focus
-    // for the rebuild: rather than putting the focus on the title, put it on the role=dialog element itself
-    &:has(:global([class*='modalLabel']):focus-visible) {
-      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-        var(--color-blue-300);
-      outline-offset: 2px;
-    }
+  // wrap the modal container with a focus ring when the title has focus
+  // for the rebuild: rather than putting the focus on the title, put it on the role=dialog element itself
+  &:has(:global([class*='modalLabel']):focus-visible) {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-300);
+    outline-offset: 2px;
   }
+}
 
-  .transitionLayer {
-    transition: opacity $ca-duration-fast ease-in-out;
-    opacity: 1;
+.transitionLayer {
+  transition: opacity $ca-duration-fast ease-in-out;
+  opacity: 1;
 
-    .backdropLayer {
-      /*
+  .backdropLayer {
+    /*
       There's a weird bug in Chrome/Blink 102.x that animates the opacity
       all the way to 1 with 200ms ("rapid" token), but is fine with
       201ms, see Jira [KDS-523]
     */
-      @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
-    }
+    @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
+  }
 
-    [data-modal] {
-      animation-duration: $ca-duration-fast;
-      animation-fill-mode: forwards;
-      animation-timing-function: $ca-bounce-in;
+  [data-modal] {
+    animation-duration: $ca-duration-fast;
+    animation-fill-mode: forwards;
+    animation-timing-function: $ca-bounce-in;
 
-      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-    }
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
+}
 
-  // WAITING FOR TEXTFIELD
-  .animatingEnter {
-    [data-modal] {
-      animation-duration: $ca-duration-fast;
-      animation-fill-mode: forwards;
-      animation-timing-function: $ca-bounce-in;
+// WAITING FOR TEXTFIELD
+.animatingEnter {
+  [data-modal] {
+    animation-duration: $ca-duration-fast;
+    animation-fill-mode: forwards;
+    animation-timing-function: $ca-bounce-in;
 
-      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-    }
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
+}
 
-  .animatingLeave {
-    transition-duration: $ca-duration-rapid;
-    opacity: 0;
+.animatingLeave {
+  transition-duration: $ca-duration-rapid;
+  opacity: 0;
 
-    .backdropLayer {
-      @include ca-animation-fade($duration: $ca-duration-rapid, $from: 0.5, $to: 0);
-    }
+  .backdropLayer {
+    @include ca-animation-fade($duration: $ca-duration-rapid, $from: 0.5, $to: 0);
+  }
 
-    [data-modal] {
-      animation-duration: $ca-duration-rapid;
-      animation-fill-mode: forwards;
-      animation-timing-function: $ca-bounce-out;
+  [data-modal] {
+    animation-duration: $ca-duration-rapid;
+    animation-fill-mode: forwards;
+    animation-timing-function: $ca-bounce-out;
 
-      @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-    }
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
+}
 
-  .unscrollable {
-    /* Tech debt - this !important existed before Stylelint rules */
-    overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
-  }
+.unscrollable {
+  /* Tech debt - this !important existed before Stylelint rules */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
+}
 
-  .pseudoScrollbar {
-    /* Tech debt - this !important existed before Stylelint rules */
-    padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
-  }
+.pseudoScrollbar {
+  /* Tech debt - this !important existed before Stylelint rules */
+  padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
+}
 
-  .hide {
-    opacity: 0%;
-    pointer-events: none;
-  }
+.hide {
+  opacity: 0%;
+  pointer-events: none;
 }

package/src/Modal/GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.module.scss

@@ -1,5 +1,3 @@
-@layer kz-components {
-  .modalDescription {
-    grid-column-start: 2;
-  }
+.modalDescription {
+  grid-column-start: 2;
 }

package/src/Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.module.scss

@@ -2,37 +2,35 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/layout';
 
-@layer kz-components {
-  // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
-  $ca-breakpoint-small-mobile: 375px;
+// TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
+$ca-breakpoint-small-mobile: 375px;
 
-  @mixin ca-media-small-mobile {
-    @media (max-width: #{$ca-breakpoint-small-mobile}) {
-      @content;
-    }
+@mixin ca-media-small-mobile {
+  @media (max-width: #{$ca-breakpoint-small-mobile}) {
+    @content;
   }
+}
 
-  .modalLabel {
-    // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
-    h2 {
-      @media (max-width: $layout-breakpoints-medium) {
-        font-size: 1.625rem;
-        line-height: 2rem;
-      }
-
-      @include ca-media-small-mobile {
-        font-size: 1.5rem;
-        line-height: 1.875rem;
-      }
+.modalLabel {
+  // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
+  h2 {
+    @media (max-width: $layout-breakpoints-medium) {
+      font-size: 1.625rem;
+      line-height: 2rem;
     }
 
-    &.prominent {
-      grid-column-start: 2;
-      text-align: start;
+    @include ca-media-small-mobile {
+      font-size: 1.5rem;
+      line-height: 1.875rem;
     }
+  }
 
-    &:focus {
-      outline: none;
-    }
+  &.prominent {
+    grid-column-start: 2;
+    text-align: start;
+  }
+
+  &:focus {
+    outline: none;
   }
 }

package/src/Modal/GenericModal/subcomponents/ModalBody/ModalBody.module.scss

@@ -1,9 +1,7 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/border';
 
-@layer kz-components {
-  .inputEdit {
-    background-color: $color-gray-200;
-    border-radius: $border-solid-border-radius;
-  }
+.inputEdit {
+  background-color: $color-gray-200;
+  border-radius: $border-solid-border-radius;
 }

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.module.scss

@@ -2,76 +2,74 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-@layer kz-components {
-  .actions {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-start;
-  }
+.actions {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+}
 
-  .actionsAlignStart {
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-  }
+.actionsAlignStart {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
 
-  .padded {
-    padding: $spacing-md;
-    flex-direction: column;
+.padded {
+  padding: $spacing-md;
+  flex-direction: column;
 
-    @media (min-width: $layout-breakpoints-medium) {
-      padding: 0 $spacing-lg $spacing-lg;
-      flex-direction: row-reverse;
-    }
+  @media (min-width: $layout-breakpoints-medium) {
+    padding: 0 $spacing-lg $spacing-lg;
+    flex-direction: row-reverse;
   }
+}
 
-  .actionButton {
-    width: 100%;
+.actionButton {
+  width: 100%;
 
-    @media (min-width: $layout-breakpoints-medium) {
-      width: inherit;
-    }
+  @media (min-width: $layout-breakpoints-medium) {
+    width: inherit;
   }
+}
 
-  .actionButton + .actionButton {
-    margin-inline-end: $spacing-sm;
+.actionButton + .actionButton {
+  margin-inline-end: $spacing-sm;
 
-    @media (max-width: (calc(#{$layout-breakpoints-medium} - 1px))) {
-      margin-block-start: $spacing-sm;
-    }
+  @media (max-width: (calc(#{$layout-breakpoints-medium} - 1px))) {
+    margin-block-start: $spacing-sm;
   }
+}
 
-  .footerWrap {
-    align-items: baseline;
-    width: 100%;
-    box-sizing: border-box;
-  }
+.footerWrap {
+  align-items: baseline;
+  width: 100%;
+  box-sizing: border-box;
+}
 
-  .center {
-    display: flex;
-    justify-content: center;
-  }
+.center {
+  display: flex;
+  justify-content: center;
+}
 
-  .border {
-    border-block-start: 1px solid $border-solid-border-color;
-  }
+.border {
+  border-block-start: 1px solid $border-solid-border-color;
+}
 
-  .start {
-    display: flex;
-    justify-content: flex-start;
-  }
+.start {
+  display: flex;
+  justify-content: flex-start;
+}
 
-  .end {
-    display: flex;
-    justify-content: flex-end;
-  }
+.end {
+  display: flex;
+  justify-content: flex-end;
+}
 
-  .fixed {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-  }
+.fixed {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
 
-  .filler {
-    visibility: hidden;
-  }
+.filler {
+  visibility: hidden;
 }

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss

@@ -2,25 +2,23 @@
 @import '../../../../../styles/utils/legacy/layout';
 @import '../../../../../styles/utils/layers';
 
-@layer kz-components {
-  .dismissButton {
-    position: absolute;
-    z-index: $ca-z-index-popover;
+.dismissButton {
+  position: absolute;
+  z-index: $ca-z-index-popover;
 
-    @include ca-position($end: 0, $top: 0);
-  }
+  @include ca-position($end: 0, $top: 0);
+}
 
-  .layout {
-    width: 100%;
-  }
+.layout {
+  width: 100%;
+}
 
-  .fixed {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-  }
+.fixed {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
 
-  .filler {
-    visibility: hidden;
-  }
+.filler {
+  visibility: hidden;
 }