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

package/src/TitleBlockZen/subcomponents/MainActions.module.scss

@@ -1,18 +1,16 @@
 @import '../../../styles/utils/legacy/layout';
 @import '../mixins';
 
-@layer kz-components {
-  .mainActionsContainer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-grow: 1;
-    flex-shrink: 0;
+.mainActionsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-grow: 1;
+  flex-shrink: 0;
 
-    @include ca-margin($start: calc(#{$ca-grid} / 2));
+  @include ca-margin($start: calc(#{$ca-grid} / 2));
 
-    @include title-block-small {
-      display: none;
-    }
+  @include title-block-small {
+    display: none;
   }
 }

package/src/TitleBlockZen/subcomponents/MobileActions.module.scss

@@ -8,189 +8,186 @@
 @import '../../../styles/utils/layers';
 @import '../mixins';
 
-@layer kz-components {
-  $expand-button-width: 3.75rem;
-  $focus-spacing: 2px;
-  $focus-ring-border-width: 2px; // should be $border-focus-ring-border-width but CSS vars makes this hard
-  $space-for-focus-ring: ($focus-ring-border-width * 2) + ($focus-spacing * 2);
-  $slide-up-duration: 0.4s;
-
-  /* stylelint-disable no-descending-specificity */
-  .mobileActionsContainer {
-    display: none;
-    z-index: $ca-z-index-fixed;
-    flex-direction: column;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-start-start-radius: $border-solid-border-radius;
-    border-start-end-radius: $border-solid-border-radius;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow: hidden;
-    transform: translateY(calc(100% - #{$layout-mobile-actions-drawer-height}));
-    transition: $slide-up-duration ease;
-    animation: slide-up 1s ease;
-
-    &.isOpen {
-      transform: translateY(0%);
-
-      .mobileActionsMenuContainer {
-        visibility: visible;
-      }
-    }
-
-    @include title-block-small {
-      display: flex;
+$expand-button-width: 3.75rem;
+$focus-spacing: 2px;
+$focus-ring-border-width: 2px; // should be $border-focus-ring-border-width but CSS vars makes this hard
+$space-for-focus-ring: ($focus-ring-border-width * 2) + ($focus-spacing * 2);
+$slide-up-duration: 0.4s;
+
+/* stylelint-disable no-descending-specificity */
+.mobileActionsContainer {
+  display: none;
+  z-index: $ca-z-index-fixed;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-start-start-radius: $border-solid-border-radius;
+  border-start-end-radius: $border-solid-border-radius;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+  transform: translateY(calc(100% - #{$layout-mobile-actions-drawer-height}));
+  transition: $slide-up-duration ease;
+  animation: slide-up 1s ease;
+
+  &.isOpen {
+    transform: translateY(0%);
+
+    .mobileActionsMenuContainer {
+      visibility: visible;
     }
   }
 
-  .mobileActionsTopRow {
+  @include title-block-small {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: $layout-mobile-actions-drawer-height;
   }
+}
 
-  .mobileActionsTopRow.mobileActionsTopRowSingleButton {
-    justify-content: center;
-  }
+.mobileActionsTopRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $layout-mobile-actions-drawer-height;
+}
 
-  .mobileActionsMenuContainer {
-    visibility: hidden;
-    width: 100%;
-    background: $color-white;
-    padding: $spacing-xs 0;
-    transition: visibility $slide-up-duration;
-  }
+.mobileActionsTopRow.mobileActionsTopRowSingleButton {
+  justify-content: center;
+}
 
-  .drawerHandleIcon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.mobileActionsMenuContainer {
+  visibility: hidden;
+  width: 100%;
+  background: $color-white;
+  padding: $spacing-xs 0;
+  transition: visibility $slide-up-duration;
+}
 
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
+.drawerHandleIcon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    .drawerHandleLabelText + & {
-      @include ca-margin($start: calc(#{$ca-grid} / 2));
-    }
-  }
+  @include ca-margin($end: calc(#{$ca-grid} / 2));
 
-  .mobileActionsPrimaryLabel {
-    text-align: left;
-    text-decoration: none;
-    color: $color-white;
-    font-family: $typography-button-primary-font-family;
-    font-weight: $typography-button-primary-font-weight;
-    font-size: $typography-button-primary-font-size;
-    line-height: $typography-button-primary-line-height;
-    letter-spacing: $typography-button-primary-letter-spacing;
-
-    @include ca-padding($start: $ca-grid * 0.75);
+  .drawerHandleLabelText + & {
+    @include ca-margin($start: calc(#{$ca-grid} / 2));
   }
+}
 
-  .mobileActionsPrimaryButton,
-  .mobileActionsExpandButton {
-    display: flex;
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    height: 100%;
-    border: 0;
-    box-sizing: border-box;
-    color: $color-white;
-    background-color: $color-blue-500;
-
-    &:focus {
-      background-color: $color-blue-600;
-      outline: none;
-    }
+.mobileActionsPrimaryLabel {
+  text-align: left;
+  text-decoration: none;
+  color: $color-white;
+  font-family: $typography-button-primary-font-family;
+  font-weight: $typography-button-primary-font-weight;
+  font-size: $typography-button-primary-font-size;
+  line-height: $typography-button-primary-line-height;
+  letter-spacing: $typography-button-primary-letter-spacing;
+
+  @include ca-padding($start: $ca-grid * 0.75);
+}
 
-    &:focus-visible {
-      height: $layout-mobile-actions-drawer-height - $space-for-focus-ring;
+.mobileActionsPrimaryButton,
+.mobileActionsExpandButton {
+  display: flex;
+  position: relative;
+  justify-content: flex-start;
+  align-items: center;
+  height: 100%;
+  border: 0;
+  box-sizing: border-box;
+  color: $color-white;
+  background-color: $color-blue-500;
+
+  &:focus {
+    background-color: $color-blue-600;
+    outline: none;
+  }
 
-      &::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2));
+  &:focus-visible {
+    height: $layout-mobile-actions-drawer-height - $space-for-focus-ring;
 
-        content: '';
-        position: absolute;
-        background: transparent;
-        border-width: $focus-ring-border-width;
-        border-style: $border-focus-ring-border-style;
-        border-color: $color-blue-500;
-        inset: calc(-1 * #{$focus-ring-offset});
-      }
-    }
+    &::after {
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2));
 
-    &:hover {
-      text-decoration: none;
+      content: '';
+      position: absolute;
+      background: transparent;
+      border-width: $focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      border-color: $color-blue-500;
+      inset: calc(-1 * #{$focus-ring-offset});
     }
   }
 
-  // Full width versions
-  .mobileActionsPrimaryButton:only-child,
-  .mobileActionsExpandButton:only-child {
-    flex-basis: 100%;
-    border-start-start-radius: $border-solid-border-radius;
-    border-start-end-radius: $border-solid-border-radius;
+  &:hover {
+    text-decoration: none;
+  }
+}
 
-    &:focus-visible {
-      flex-basis: calc(100% - #{$space-for-focus-ring});
+// Full width versions
+.mobileActionsPrimaryButton:only-child,
+.mobileActionsExpandButton:only-child {
+  flex-basis: 100%;
+  border-start-start-radius: $border-solid-border-radius;
+  border-start-end-radius: $border-solid-border-radius;
 
-      &::after {
-        border-start-start-radius: $border-focus-ring-border-radius;
-        border-start-end-radius: $border-focus-ring-border-radius;
-      }
+  &:focus-visible {
+    flex-basis: calc(100% - #{$space-for-focus-ring});
+
+    &::after {
+      border-start-start-radius: $border-focus-ring-border-radius;
+      border-start-end-radius: $border-focus-ring-border-radius;
     }
   }
+}
 
-  // Non full width versions
-  .mobileActionsPrimaryButton:not(:only-child) {
-    flex: 0 0 calc(100% - #{$expand-button-width});
+// Non full width versions
+.mobileActionsPrimaryButton:not(:only-child) {
+  flex: 0 0 calc(100% - #{$expand-button-width});
 
-    &:focus-visible {
-      flex-basis: calc(100% - #{$expand-button-width} - #{$space-for-focus-ring});
-      margin-left: $focus-ring-border-width * 2;
-      border-start-start-radius: $border-solid-border-radius;
+  &:focus-visible {
+    flex-basis: calc(100% - #{$expand-button-width} - #{$space-for-focus-ring});
+    margin-left: $focus-ring-border-width * 2;
+    border-start-start-radius: $border-solid-border-radius;
 
-      & + .mobileActionsExpandButton {
-        border-color: $color-white;
-      }
+    & + .mobileActionsExpandButton {
+      border-color: $color-white;
+    }
 
-      &::after {
-        border-start-start-radius: $border-focus-ring-border-radius;
-      }
+    &::after {
+      border-start-start-radius: $border-focus-ring-border-radius;
     }
   }
+}
 
-  .mobileActionsExpandButton:not(:only-child) {
-    flex: 0 0 $expand-button-width;
-    border-left: 2px solid $color-blue-200;
-    justify-content: center;
+.mobileActionsExpandButton:not(:only-child) {
+  flex: 0 0 $expand-button-width;
+  border-left: 2px solid $color-blue-200;
+  justify-content: center;
 
-    &:focus-visible {
-      border-color: $color-white;
-      flex-basis: calc(#{$expand-button-width} - #{$space-for-focus-ring});
-      margin-right: $focus-ring-border-width * 2;
-      border-start-end-radius: $border-solid-border-radius;
+  &:focus-visible {
+    border-color: $color-white;
+    flex-basis: calc(#{$expand-button-width} - #{$space-for-focus-ring});
+    margin-right: $focus-ring-border-width * 2;
+    border-start-end-radius: $border-solid-border-radius;
 
-      &::after {
-        border-start-end-radius: $border-focus-ring-border-radius;
-      }
+    &::after {
+      border-start-end-radius: $border-focus-ring-border-radius;
     }
   }
+}
 
-  .mobileActionsChevronSquare {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    position: absolute;
+.mobileActionsChevronSquare {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  position: absolute;
 
-    @include ca-position($end: 20px);
-  }
-  /* stylelint-enable no-descending-specificity */
+  @include ca-position($end: 20px);
 }
 
 @keyframes slide-up {
@@ -206,3 +203,4 @@
     transform: translateY(calc(100% - #{$layout-mobile-actions-drawer-height}));
   }
 }
+/* stylelint-enable no-descending-specificity */

package/src/TitleBlockZen/subcomponents/NavigationTabs.module.scss

@@ -4,134 +4,132 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../mixins';
 
-@layer kz-components {
-  .container {
-    display: flex;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
+.container {
+  display: flex;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
-  .linkAnchor {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 0 $spacing-sm;
-    position: relative;
-    color: rgba($color-white-rgb, 0.7);
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
+.linkAnchor {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding: 0 $spacing-sm;
+  position: relative;
+  color: rgba($color-white-rgb, 0.7);
+  font-family: $typography-heading-4-font-family;
+  font-weight: $typography-heading-4-font-weight;
+  font-size: $typography-heading-4-font-size;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+  text-decoration: none;
+  white-space: nowrap;
+  margin-inline-end: $spacing-md;
+
+  &:hover {
+    color: $color-white;
     text-decoration: none;
-    white-space: nowrap;
-    margin-inline-end: $spacing-md;
+  }
 
-    &:hover {
-      color: $color-white;
-      text-decoration: none;
-    }
+  @include title-block-under-1366 {
+    font-family: $typography-heading-5-font-family;
+    font-weight: $typography-heading-5-font-weight;
+    font-size: $typography-heading-5-font-size;
+    line-height: $typography-heading-5-line-height;
+    letter-spacing: $typography-heading-5-letter-spacing;
+  }
 
-    @include title-block-under-1366 {
-      font-family: $typography-heading-5-font-family;
-      font-weight: $typography-heading-5-font-weight;
-      font-size: $typography-heading-5-font-size;
-      line-height: $typography-heading-5-line-height;
-      letter-spacing: $typography-heading-5-letter-spacing;
-    }
+  @include title-block-under-1440 {
+    margin-inline-end: $spacing-xs;
+  }
 
-    @include title-block-under-1440 {
-      margin-inline-end: $spacing-xs;
-    }
+  @media (max-width: 1189px) {
+    margin: 0;
+  }
 
-    @media (max-width: 1189px) {
-      margin: 0;
+  $active-tab-marker-height: 5px;
+
+  &.active,
+  &:focus {
+    color: $color-white;
+
+    &::before {
+      content: '';
+      display: block;
+      height: $active-tab-marker-height;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: $color-white;
+      transition: transform cubic-bezier(0.55, 0.085, 0.68, 0.53) 150ms;
+      border-radius: 0 0 $border-solid-border-radius $border-solid-border-radius;
+
+      @include title-block-medium-and-small {
+        top: auto;
+        bottom: 0;
+        border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
+      }
     }
+  }
 
-    $active-tab-marker-height: 5px;
+  &:focus {
+    outline: none;
 
-    &.active,
-    &:focus {
-      color: $color-white;
+    &::before {
+      background-color: $color-blue-200;
+    }
 
-      &::before {
-        content: '';
-        display: block;
-        height: $active-tab-marker-height;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        background-color: $color-white;
-        transition: transform cubic-bezier(0.55, 0.085, 0.68, 0.53) 150ms;
-        border-radius: 0 0 $border-solid-border-radius $border-solid-border-radius;
-
-        @include title-block-medium-and-small {
-          top: auto;
-          bottom: 0;
-          border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
-        }
+    &::after {
+      $focus-ring-offset: calc((-1 * #{$border-focus-ring-border-width}));
+
+      content: '';
+      position: absolute;
+      background: transparent;
+      border-color: $color-blue-200;
+      border-radius: 0 0 $border-focus-ring-border-radius $border-focus-ring-border-radius;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      inset: 0 $focus-ring-offset $active-tab-marker-height;
+
+      @include title-block-medium-and-small {
+        border-radius: $border-focus-ring-border-radius $border-focus-ring-border-radius 0 0;
+        inset: $active-tab-marker-height $focus-ring-offset 0 $focus-ring-offset;
       }
     }
+  }
 
+  @media (forced-colors: active) {
+    &.active,
     &:focus {
-      outline: none;
-
       &::before {
-        background-color: $color-blue-200;
-      }
-
-      &::after {
-        $focus-ring-offset: calc((-1 * #{$border-focus-ring-border-width}));
-
-        content: '';
-        position: absolute;
         background: transparent;
-        border-color: $color-blue-200;
-        border-radius: 0 0 $border-focus-ring-border-radius $border-focus-ring-border-radius;
-        border-width: $border-focus-ring-border-width;
-        border-style: $border-focus-ring-border-style;
-        inset: 0 $focus-ring-offset $active-tab-marker-height;
-
-        @include title-block-medium-and-small {
-          border-radius: $border-focus-ring-border-radius $border-focus-ring-border-radius 0 0;
-          inset: $active-tab-marker-height $focus-ring-offset 0 $focus-ring-offset;
-        }
-      }
-    }
-
-    @media (forced-colors: active) {
-      &.active,
-      &:focus {
-        &::before {
-          background: transparent;
-          // instead of height we're using the border to create a active tab mark to make it friendlier for Windows High Contrast Mode.
-          border: $active-tab-marker-height solid transparent;
-          height: 0;
-        }
+        // instead of height we're using the border to create a active tab mark to make it friendlier for Windows High Contrast Mode.
+        border: $active-tab-marker-height solid transparent;
+        height: 0;
       }
     }
   }
+}
 
-  .linkAnchor.lightBackground {
-    color: rgba($color-purple-800-rgb, 0.75);
+.linkAnchor.lightBackground {
+  color: rgba($color-purple-800-rgb, 0.75);
 
-    &:hover {
-      color: $color-blue-500;
-    }
+  &:hover {
+    color: $color-blue-500;
+  }
 
-    &.active {
-      color: $color-blue-500;
+  &.active {
+    color: $color-blue-500;
 
-      &::before {
-        background-color: $color-blue-500;
-        top: 3px;
-
-        @include title-block-medium-and-small {
-          top: auto;
-          bottom: 0;
-          border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
-        }
+    &::before {
+      background-color: $color-blue-500;
+      top: 3px;
+
+      @include title-block-medium-and-small {
+        top: auto;
+        bottom: 0;
+        border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
       }
     }
   }