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

package/src/Filter/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.module.scss

@@ -1,5 +1,3 @@
-@layer kz-components {
-  .divider {
-    margin: 0.5rem 0;
-  }
+.divider {
+  margin: 0.5rem 0;
 }

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss

@@ -4,68 +4,66 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../../../../../styles/utils/button-reset';
 
-@layer kz-components {
-  $focus-ring-offset: 1px;
+$focus-ring-offset: 1px;
 
-  .button {
-    @include button-reset;
+.button {
+  @include button-reset;
 
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: $spacing-xs;
-    border: $border-solid-border-width $border-solid-border-style;
-    border-color: $border-borderless-border-color;
-    border-radius: $border-solid-border-radius;
-    padding: $spacing-4 $spacing-8;
-    font-weight: $typography-button-secondary-font-weight;
-    font-family: $typography-button-secondary-font-family;
-    font-size: $typography-button-secondary-font-size;
-    line-height: $typography-button-secondary-line-height;
-    letter-spacing: $typography-button-secondary-letter-spacing;
-    color: $color-blue-500;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  border: $border-solid-border-width $border-solid-border-style;
+  border-color: $border-borderless-border-color;
+  border-radius: $border-solid-border-radius;
+  padding: $spacing-4 $spacing-8;
+  font-weight: $typography-button-secondary-font-weight;
+  font-family: $typography-button-secondary-font-family;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  color: $color-blue-500;
 
-    &:focus {
-      outline: none;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:hover,
-    &:active,
-    &:focus {
-      &:not(.isDisabled) {
-        background-color: $color-blue-100;
-      }
+  &:hover,
+  &:active,
+  &:focus {
+    &:not(.isDisabled) {
+      background-color: $color-blue-100;
     }
+  }
 
-    &:focus-visible::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+  &:focus-visible::after {
+    $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
 
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-radius: $border-focus-ring-border-radius;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-color: $color-blue-500;
-      inset: calc(-1 * #{$focus-ring-offset});
-    }
+    content: '';
+    position: absolute;
+    background: transparent;
+    border-radius: $border-focus-ring-border-radius;
+    border-width: $border-focus-ring-border-width;
+    border-style: $border-focus-ring-border-style;
+    border-color: $color-blue-500;
+    inset: calc(-1 * #{$focus-ring-offset});
+  }
 
-    // TODO: copied from Calendar button since the design is not settled
-    &.isDisabled {
-      pointer-events: none;
-      color: rgba($color-purple-800-rgb, 0.3);
-      opacity: 100%;
+  // TODO: copied from Calendar button since the design is not settled
+  &.isDisabled {
+    pointer-events: none;
+    color: rgba($color-purple-800-rgb, 0.3);
+    opacity: 100%;
 
-      &:focus {
-        outline: none;
-        border: 2px solid transparent;
-      }
+    &:focus {
+      outline: none;
+      border: 2px solid transparent;
+    }
 
-      &:focus-visible::after {
-        border-color: $color-gray-400;
-      }
+    &:focus-visible::after {
+      border-color: $color-gray-400;
     }
   }
 }

package/src/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.module.css

@@ -1,5 +1,3 @@
-@layer kz-components {
-  .filterButtonRemovable {
-    width: 100%;
-  }
+.filterButtonRemovable {
+  width: 100%;
 }

package/src/Filter/FilterSelect/FilterSelect.module.css

@@ -1,10 +1,8 @@
-@layer kz-components {
-  /*  This a temporary fix to increase specificity, until we figure out why this CSS is being compiled later than the padding in the FilterContents sub-component */
-  .filterContents.filterContents {
-    box-sizing: border-box;
-    min-width: 12.25rem; /* 196px */
-    max-width: 25rem; /* 400px */
-    overflow: auto;
-    padding: unset; /* Padding is added by <SelectPopoverContents> */
-  }
+/*  This a temporary fix to increase specificity, until we figure out why this CSS is being compiled later than the padding in the FilterContents sub-component */
+.filterContents.filterContents {
+  box-sizing: border-box;
+  min-width: 12.25rem; /* 196px */
+  max-width: 25rem; /* 400px */
+  overflow: auto;
+  padding: unset; /* Padding is added by <SelectPopoverContents> */
 }

package/src/Focusable/Focusable.module.scss

@@ -1,5 +1,3 @@
-@layer kz-components {
-  .focusableWrapper {
-    display: inline-flex;
-  }
+.focusableWrapper {
+  display: inline-flex;
 }

package/src/GuidanceBlock/GuidanceBlock.module.css

@@ -1,277 +1,275 @@
-@layer kz-components {
-  .banner.noMaxWidth {
-    max-width: inherit;
+.banner.noMaxWidth {
+  max-width: inherit;
+}
+
+.banner {
+  --border-width: var(--border-width-1);
+  --banner-padding: var(--spacing-lg);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  min-width: 320px;
+  max-width: var(--layout-breakpoints-large);
+  border: var(--border-width) var(--border-solid-border-style);
+  border-radius: var(--border-solid-border-radius);
+  padding: calc(var(--banner-padding) - var(--border-width));
+  box-shadow: var(--shadow-small-box-shadow);
+  position: relative;
+  top: -1px;
+  transition:
+    opacity var(--animation-duration-slow) ease,
+    margin-top var(--animation-duration-fast) var(--animation-duration-slow) ease;
+  color: var(--color-purple-800);
+
+  @media (width >= 1024px) {
+    min-height: calc(12rem - calc(var(--banner-padding) * 2));
+    flex-direction: row;
+    gap: var(--spacing-24);
+    width: auto;
+    align-items: center;
   }
 
-  .banner {
-    --border-width: var(--border-width-1);
-    --banner-padding: var(--spacing-lg);
+  @media (width <= 767px) {
+    min-width: unset;
+  }
+}
 
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-12);
-    min-width: 320px;
-    max-width: var(--layout-breakpoints-large);
-    border: var(--border-width) var(--border-solid-border-style);
-    border-radius: var(--border-solid-border-radius);
-    padding: calc(var(--banner-padding) - var(--border-width));
-    box-shadow: var(--shadow-small-box-shadow);
-    position: relative;
-    top: -1px;
-    transition:
-      opacity var(--animation-duration-slow) ease,
-      margin-top var(--animation-duration-fast) var(--animation-duration-slow) ease;
-    color: var(--color-purple-800);
+.illustrationWrapper {
+  display: flex;
 
-    @media (width >= 1024px) {
-      min-height: calc(12rem - calc(var(--banner-padding) * 2));
-      flex-direction: row;
-      gap: var(--spacing-24);
-      width: auto;
-      align-items: center;
-    }
+  @media (768px <= width <= 1023px) {
+    text-align: center;
+    justify-content: center;
+    align-self: center;
+    padding: var(--spacing-12);
+  }
 
-    @media (width <= 767px) {
-      min-width: unset;
-    }
+  @media (width <= 767px) {
+    display: none;
   }
+}
 
-  .illustrationWrapper {
+.illustration {
+  --illustration-size: 155px;
+  --scene-illustration-size: 300px;
+
+  width: var(--illustration-size);
+  height: var(--illustration-size);
+
+  /* This has been created to handle scene illustrations consistently until the tile component is created */
+  .hasSceneIllustration & {
     display: flex;
+    justify-content: center;
+    max-width: var(--scene-illustration-size);
+    max-height: var(--scene-illustration-size);
+    width: var(--scene-illustration-size);
+    height: auto;
 
-    @media (768px <= width <= 1023px) {
-      text-align: center;
-      justify-content: center;
-      align-self: center;
-      padding: var(--spacing-12);
+    figure {
+      max-height: 100%;
+      max-width: 100%;
+      aspect-ratio: 4/3;
     }
 
-    @media (width <= 767px) {
-      display: none;
+    img {
+      height: 100%;
+      object-fit: contain;
+      object-position: center;
     }
   }
+}
 
-  .illustration {
-    --illustration-size: 155px;
-    --scene-illustration-size: 300px;
-
-    width: var(--illustration-size);
-    height: var(--illustration-size);
+.descriptionContainer {
+  flex: 1;
+  text-align: center;
+  align-self: center;
+  max-width: 780px;
 
-    /* This has been created to handle scene illustrations consistently until the tile component is created */
-    .hasSceneIllustration & {
-      display: flex;
-      justify-content: center;
-      max-width: var(--scene-illustration-size);
-      max-height: var(--scene-illustration-size);
-      width: var(--scene-illustration-size);
-      height: auto;
-
-      figure {
-        max-height: 100%;
-        max-width: 100%;
-        aspect-ratio: 4/3;
-      }
-
-      img {
-        height: 100%;
-        object-fit: contain;
-        object-position: center;
-      }
-    }
+  @media (width >= 1024px) {
+    padding: 0 var(--spacing-12);
+    text-align: start;
   }
 
-  .descriptionContainer {
-    flex: 1;
-    text-align: center;
-    align-self: center;
-    max-width: 780px;
+  @media (width <= 767px) {
+    margin: var(--spacing-12);
+    max-width: 100%;
+  }
+}
 
-    @media (width >= 1024px) {
-      padding: 0 var(--spacing-12);
-      text-align: start;
-    }
+.descriptionAndActions {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-24);
 
-    @media (width <= 767px) {
-      margin: var(--spacing-12);
-      max-width: 100%;
-    }
+  @media (width <= 1023px) {
+    flex-direction: column;
+    width: 100%;
+    align-items: unset;
   }
+}
 
-  .descriptionAndActions {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacing-24);
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+  flex-direction: row-reverse;
+  gap: var(--spacing-12);
+  min-width: max-content;
 
-    @media (width <= 1023px) {
-      flex-direction: column;
-      width: 100%;
-      align-items: unset;
-    }
+  @media (width >= 768px) {
+    text-align: center;
   }
 
-  .buttonContainer {
-    display: flex;
-    justify-content: center;
-    flex-direction: row-reverse;
-    gap: var(--spacing-12);
-    min-width: max-content;
+  @media (width <= 767px) {
+    flex-direction: column;
+    width: 100%;
+    margin-top: var(--spacing-6);
+  }
+}
 
-    @media (width >= 768px) {
-      text-align: center;
-    }
+.hidden {
+  opacity: 0;
+  margin-bottom: 0;
+}
 
-    @media (width <= 767px) {
-      flex-direction: column;
-      width: 100%;
-      margin-top: var(--spacing-6);
-    }
-  }
+.headingWrapper {
+  margin-bottom: var(--spacing-24);
+}
 
-  .hidden {
-    opacity: 0;
-    margin-bottom: 0;
-  }
+.default {
+  border-color: var(--color-gray-500);
+  background: var(--color-white);
+}
 
-  .headingWrapper {
-    margin-bottom: var(--spacing-24);
-  }
+.positive {
+  border-color: var(--color-green-500);
+  background: var(--color-green-100);
+}
 
-  .default {
-    border-color: var(--color-gray-500);
-    background: var(--color-white);
-  }
+.negative,
+.assertive {
+  border-color: var(--color-red-500);
+  background: var(--color-red-100);
+}
 
-  .positive {
-    border-color: var(--color-green-500);
-    background: var(--color-green-100);
-  }
+.informative {
+  border-color: var(--color-blue-400);
+  background: var(--color-blue-100);
+}
 
-  .negative,
-  .assertive {
-    border-color: var(--color-red-500);
-    background: var(--color-red-100);
-  }
+.cautionary {
+  border-color: var(--color-yellow-700);
+  background: var(--color-yellow-100);
+}
 
-  .informative {
-    border-color: var(--color-blue-400);
-    background: var(--color-blue-100);
-  }
+.prominent {
+  border-color: var(--color-purple-400);
+  background: var(--color-purple-100);
+}
 
-  .cautionary {
-    border-color: var(--color-yellow-700);
-    background: var(--color-yellow-100);
-  }
+.inline,
+.stacked {
+  flex-flow: row wrap;
+  align-items: unset;
+  gap: var(--spacing-24);
+  min-width: unset;
 
-  .prominent {
-    border-color: var(--color-purple-400);
-    background: var(--color-purple-100);
+  @media (width <= 1023px) {
+    flex-direction: unset;
   }
 
-  .inline,
-  .stacked {
-    flex-flow: row wrap;
-    align-items: unset;
-    gap: var(--spacing-24);
-    min-width: unset;
+  .illustrationWrapper {
+    margin-inline-end: var(--spacing-12);
 
-    @media (width <= 1023px) {
-      flex-direction: unset;
+    @media (768px <= width <= 1023px) {
+      padding: 0;
     }
 
-    .illustrationWrapper {
-      margin-inline-end: var(--spacing-12);
+    @media (width <= 767px) {
+      display: flex;
+    }
+  }
 
-      @media (768px <= width <= 1023px) {
-        padding: 0;
-      }
+  .descriptionAndActions {
+    margin: auto 0;
+  }
 
-      @media (width <= 767px) {
-        display: flex;
-      }
-    }
+  .descriptionContainer {
+    text-align: start;
+    max-width: unset;
+    min-width: 320px;
 
-    .descriptionAndActions {
-      margin: auto 0;
+    @media (width >= 1024px) {
+      padding: 0;
     }
 
-    .descriptionContainer {
-      text-align: start;
-      max-width: unset;
-      min-width: 320px;
+    @media (width <= 767px) {
+      margin: 0;
+    }
+  }
 
-      @media (width >= 1024px) {
-        padding: 0;
-      }
+  .buttonContainer {
+    padding-inline-start: var(--spacing-12);
+    justify-content: flex-start;
+    width: unset;
+    min-width: unset;
 
-      @media (width <= 767px) {
-        margin: 0;
-      }
+    @media (width <= 767px) {
+      flex-direction: row-reverse;
     }
 
-    .buttonContainer {
-      padding-inline-start: var(--spacing-12);
-      justify-content: flex-start;
+    > * {
       width: unset;
-      min-width: unset;
+    }
+  }
 
-      @media (width <= 767px) {
-        flex-direction: row-reverse;
-      }
+  &.hasSceneIllustration {
+    justify-content: center;
+  }
 
-      > * {
-        width: unset;
-      }
-    }
+  &.centerContent {
+    flex-direction: column;
 
-    &.hasSceneIllustration {
-      justify-content: center;
+    &.hasSceneIllustration .illustration {
+      width: 100%;
     }
 
-    &.centerContent {
-      flex-direction: column;
-
-      &.hasSceneIllustration .illustration {
-        width: 100%;
-      }
-
-      .illustrationWrapper {
-        margin: 0 auto;
-        align-self: center;
-      }
-
-      .descriptionContainer {
-        text-align: center;
-        min-width: unset;
-      }
-
-      .buttonContainer {
-        padding: 0;
-        flex-direction: column;
-        min-width: unset;
-        justify-content: center;
-      }
+    .illustrationWrapper {
+      margin: 0 auto;
+      align-self: center;
     }
 
-    &.centerContent.smallScreenTextAlignment {
-      .descriptionContainer {
-        text-align: start;
-      }
+    .descriptionContainer {
+      text-align: center;
+      min-width: unset;
     }
-  }
 
-  /* stylelint-disable no-descending-specificity */
-  .stacked {
-    .descriptionAndActions {
+    .buttonContainer {
+      padding: 0;
       flex-direction: column;
-      align-items: unset;
+      min-width: unset;
+      justify-content: center;
     }
+  }
 
+  &.centerContent.smallScreenTextAlignment {
     .descriptionContainer {
-      align-self: flex-start;
+      text-align: start;
     }
   }
-  /* stylelint-enable no-descending-specificity */
 }
+
+/* stylelint-disable no-descending-specificity */
+.stacked {
+  .descriptionAndActions {
+    flex-direction: column;
+    align-items: unset;
+  }
+
+  .descriptionContainer {
+    align-self: flex-start;
+  }
+}
+/* stylelint-enable no-descending-specificity */