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

package/src/__next__/Button/Button.module.css

@@ -1,260 +1,258 @@
-@layer kz-components {
-  .button {
-    /* RESET */
-    appearance: none;
-    background: transparent;
-    font: inherit;
-    margin: 0;
-    outline: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    --button-min-x-y: var(--spacing-40);
-    --button-border-width: var(--border-solid-border-width);
-    --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
-    --button-padding-x: calc(var(--spacing-16) - var(--button-border-width));
-
-    background-color: var(--button-bg-color, var(--color-blue-500));
-    border: var(--button-border-width) solid;
-    border-radius: var(--border-solid-border-radius);
-    border-color: var(--button-border-color, var(--color-blue-500));
-    box-sizing: border-box;
-    color: var(--button-text-color, var(--color-white));
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: start;
-    font-family: var(--button-font-family, var(--typography-paragraph-body-font-family));
-    font-weight: var(--button-font-weight, 500);
-    font-size: var(--button-font-size, 1rem);
-    line-height: var(--button-line-height, 1.5rem);
-    min-height: var(--button-min-x-y);
-    min-width: var(--button-min-x-y);
-    position: relative;
-    padding: var(--button-padding-y) var(--button-padding-x);
-
-    &[data-hovered] {
-      --button-bg-color: var(--color-blue-600);
-      --button-border-color: var(--color-blue-600);
-    }
-
-    &[data-pressed] {
-      --button-bg-color: var(--color-blue-700);
-      --button-border-color: var(--color-blue-700);
-    }
-
-    &[data-pending] {
-      --button-bg-color: var(--color-blue-700);
-      --button-border-color: var(--color-blue-700);
-    }
-
-    &.isDisabled {
-      --button-bg-color: var(--color-gray-400);
-      --button-border-color: var(--color-gray-400);
-      --button-text-color: var(--color-white);
-    }
-
-    &[data-focus-visible] {
-      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-        var(--color-blue-500);
-      outline-offset: 1px;
-    }
+.button {
+  /* RESET */
+  appearance: none;
+  background: transparent;
+  font: inherit;
+  margin: 0;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --button-min-x-y: var(--spacing-40);
+  --button-border-width: var(--border-solid-border-width);
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+  --button-padding-x: calc(var(--spacing-16) - var(--button-border-width));
+
+  background-color: var(--button-bg-color, var(--color-blue-500));
+  border: var(--button-border-width) solid;
+  border-radius: var(--border-solid-border-radius);
+  border-color: var(--button-border-color, var(--color-blue-500));
+  box-sizing: border-box;
+  color: var(--button-text-color, var(--color-white));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: start;
+  font-family: var(--button-font-family, var(--typography-paragraph-body-font-family));
+  font-weight: var(--button-font-weight, 500);
+  font-size: var(--button-font-size, 1rem);
+  line-height: var(--button-line-height, 1.5rem);
+  min-height: var(--button-min-x-y);
+  min-width: var(--button-min-x-y);
+  position: relative;
+  padding: var(--button-padding-y) var(--button-padding-x);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-blue-600);
+    --button-border-color: var(--color-blue-600);
   }
 
-  .fullWidth {
-    width: 100%;
+  &[data-pressed] {
+    --button-bg-color: var(--color-blue-700);
+    --button-border-color: var(--color-blue-700);
   }
 
-  .small {
-    --button-font-size: 0.75rem;
-    --button-line-height: 1rem;
-    --button-min-x-y: var(--spacing-32);
-    --icon-size: 16;
+  &[data-pending] {
+    --button-bg-color: var(--color-blue-700);
+    --button-border-color: var(--color-blue-700);
   }
 
-  .medium {
-    --button-padding-x: calc(var(--spacing-20) - var(--button-border-width));
-    --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
-    --button-min-x-y: var(--spacing-40);
-    --icon-size: 24;
+  &.isDisabled {
+    --button-bg-color: var(--color-gray-400);
+    --button-border-color: var(--color-gray-400);
+    --button-text-color: var(--color-white);
+  }
+
+  &[data-focus-visible] {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.small {
+  --button-font-size: 0.75rem;
+  --button-line-height: 1rem;
+  --button-min-x-y: var(--spacing-32);
+  --icon-size: 16;
+}
+
+.medium {
+  --button-padding-x: calc(var(--spacing-20) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+  --button-min-x-y: var(--spacing-40);
+  --icon-size: 24;
+}
+
+.large {
+  --button-padding-x: calc(var(--spacing-24) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+  --button-min-x-y: var(--spacing-48);
+  --icon-size: 24;
+}
+
+.smallIconButton,
+.mediumIconButton {
+  --button-padding-x: calc(var(--spacing-8) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+}
+
+.largeIconButton {
+  --button-padding-x: calc(var(--spacing-12) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+}
+
+.secondary {
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--color-gray-500);
+  --button-text-color: var(--color-purple-800);
 
-  .large {
-    --button-padding-x: calc(var(--spacing-24) - var(--button-border-width));
-    --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
-    --button-min-x-y: var(--spacing-48);
-    --icon-size: 24;
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-600);
   }
 
-  .smallIconButton,
-  .mediumIconButton {
-    --button-padding-x: calc(var(--spacing-8) - var(--button-border-width));
-    --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+  &[data-pressed] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-black);
   }
 
-  .largeIconButton {
-    --button-padding-x: calc(var(--spacing-12) - var(--button-border-width));
-    --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+  &[data-pending] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-black);
   }
 
-  .secondary {
+  &.isDisabled {
     --button-bg-color: var(--color-white);
-    --button-border-color: var(--color-gray-500);
-    --button-text-color: var(--color-purple-800);
-
-    &[data-hovered] {
-      --button-bg-color: var(--color-gray-200);
-      --button-border-color: var(--color-gray-600);
-    }
-
-    &[data-pressed] {
-      --button-bg-color: var(--color-gray-300);
-      --button-border-color: var(--color-black);
-    }
-
-    &[data-pending] {
-      --button-bg-color: var(--color-gray-300);
-      --button-border-color: var(--color-black);
-    }
-
-    &.isDisabled {
-      --button-bg-color: var(--color-white);
-      --button-border-color: var(--color-gray-400);
-      --button-text-color: var(--color-gray-400);
-    }
+    --button-border-color: var(--color-gray-400);
+    --button-text-color: var(--color-gray-400);
+  }
+}
+
+.tertiary {
+  --button-bg-color: transparent;
+  --button-border-color: transparent;
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered],
+  &[data-pressed],
+  &[data-pending] {
+    --button-text-color: var(--color-blue-500);
+  }
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-blue-200);
+    --button-border-color: var(--color-blue-200);
   }
 
-  .tertiary {
+  &[data-pressed] {
+    --button-bg-color: var(--color-blue-100);
+    --button-border-color: var(--color-blue-100);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-blue-100);
+    --button-border-color: var(--color-blue-100);
+  }
+
+  &.isDisabled {
     --button-bg-color: transparent;
     --button-border-color: transparent;
-    --button-text-color: var(--color-purple-800);
-
-    &[data-hovered],
-    &[data-pressed],
-    &[data-pending] {
-      --button-text-color: var(--color-blue-500);
-    }
-
-    &[data-hovered] {
-      --button-bg-color: var(--color-blue-200);
-      --button-border-color: var(--color-blue-200);
-    }
-
-    &[data-pressed] {
-      --button-bg-color: var(--color-blue-100);
-      --button-border-color: var(--color-blue-100);
-    }
-
-    &[data-pending] {
-      --button-bg-color: var(--color-blue-100);
-      --button-border-color: var(--color-blue-100);
-    }
-
-    &.isDisabled {
-      --button-bg-color: transparent;
-      --button-border-color: transparent;
-      --button-text-color: var(--color-gray-400);
-    }
+    --button-text-color: var(--color-gray-400);
+  }
+}
+
+.primaryReversed,
+.secondaryReversed,
+.tertiaryReversed {
+  &[data-focus-visible] {
+    outline-color: var(--color-blue-300);
+  }
+}
+
+.primaryReversed {
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--color-white);
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-200);
   }
 
-  .primaryReversed,
-  .secondaryReversed,
-  .tertiaryReversed {
-    &[data-focus-visible] {
-      outline-color: var(--color-blue-300);
-    }
+  &[data-pressed] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
   }
 
-  .primaryReversed {
+  &[data-pending] {
     --button-bg-color: var(--color-white);
     --button-border-color: var(--color-white);
-    --button-text-color: var(--color-purple-800);
-
-    &[data-hovered] {
-      --button-bg-color: var(--color-gray-200);
-      --button-border-color: var(--color-gray-200);
-    }
-
-    &[data-pressed] {
-      --button-bg-color: var(--color-gray-300);
-      --button-border-color: var(--color-gray-300);
-    }
-
-    &[data-pending] {
-      --button-bg-color: var(--color-white);
-      --button-border-color: var(--color-white);
-    }
-
-    &.isDisabled {
-      --button-bg-color: rgb(var(--color-white-rgb), 0.2);
-      --button-border-color: transparent;
-      --button-text-color: rgb(var(--color-purple-800-rgb), 0.7);
-    }
   }
 
-  .secondaryReversed {
-    --button-bg-color: transparent;
+  &.isDisabled {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: transparent;
+    --button-text-color: rgba(var(--color-purple-800-rgb), 0.7);
+  }
+}
+
+.secondaryReversed {
+  --button-bg-color: transparent;
+  --button-border-color: var(--color-white);
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
     --button-border-color: var(--color-white);
-    --button-text-color: var(--color-white);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: var(--color-white);
+  }
 
-    &[data-hovered] {
-      --button-bg-color: rgb(var(--color-white-rgb), 0.2);
-      --button-border-color: var(--color-white);
-    }
-
-    &[data-pressed] {
-      --button-bg-color: rgb(var(--color-white-rgb), 0.1);
-      --button-border-color: var(--color-white);
-    }
-
-    &[data-pending] {
-      --button-bg-color: rgb(var(--color-white-rgb), 0.1);
-      --button-border-color: var(--color-white);
-    }
-
-    &.isDisabled {
-      --button-bg-color: transparent;
-      --button-border-color: rgb(var(--color-white), 0.2);
-      --button-text-color: rgb(var(--color-white-rgb), 0.2);
-    }
+  &[data-pending] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: var(--color-white);
   }
 
-  .tertiaryReversed {
+  &.isDisabled {
     --button-bg-color: transparent;
+    --button-border-color: rgba(var(--color-white), 0.2);
+    --button-text-color: rgba(var(--color-white-rgb), 0.2);
+  }
+}
+
+.tertiaryReversed {
+  --button-bg-color: transparent;
+  --button-border-color: transparent;
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
     --button-border-color: transparent;
-    --button-text-color: var(--color-white);
+  }
 
-    &[data-hovered] {
-      --button-bg-color: rgb(var(--color-white-rgb), 0.2);
-      --button-border-color: transparent;
-    }
-
-    &[data-pressed] {
-      --button-bg-color: rgb(var(--color-white-rgb), 0.1);
-      --button-border-color: transparent;
-    }
-
-    &[data-pending] {
-      --button-bg-color: rgb(var(--color-white-rgb), 0.1);
-      --button-border-color: transparent;
-    }
-
-    &.isDisabled {
-      --button-bg-color: transparent;
-      --button-border-color: transparent;
-      --button-text-color: rgb(var(--color-white-rgb), 0.2);
-    }
+  &[data-pressed] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: transparent;
   }
 
-  .hideContentWidth {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    visibility: hidden;
+  &[data-pending] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: transparent;
   }
 
-  .retainContentWidth {
-    visibility: hidden;
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: transparent;
+    --button-text-color: rgba(var(--color-white-rgb), 0.2);
   }
 }
+
+.hideContentWidth {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+}
+
+.retainContentWidth {
+  visibility: hidden;
+}

package/src/__next__/Button/subcomponents/ButtonContent/ButtonContent.module.css

@@ -1,21 +1,19 @@
-@layer kz-components {
-  .buttonContent {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--button-icon-gap, var(--spacing-6));
-  }
+.buttonContent {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--button-icon-gap, var(--spacing-6));
+}
 
-  .large {
-    --button-icon-gap: var(--spacing-8);
-  }
+.large {
+  --button-icon-gap: var(--spacing-8);
+}
 
-  .buttonLabel {
-    display: inline-flex;
-    align-items: center;
-  }
+.buttonLabel {
+  display: inline-flex;
+  align-items: center;
+}
 
-  .buttonIcon {
-    display: inline-flex;
-    align-items: center;
-  }
+.buttonIcon {
+  display: inline-flex;
+  align-items: center;
 }

package/src/__next__/Button/subcomponents/PendingContent/PendingContent.module.css

@@ -1,18 +1,16 @@
-@layer kz-components {
-  .pendingContent {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--button-pending-content-gap, var(--spacing-6));
-  }
+.pendingContent {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--button-pending-content-gap, var(--spacing-6));
+}
 
-  .large {
-    --button-pending-content-gap: var(--spacing-8);
-  }
+.large {
+  --button-pending-content-gap: var(--spacing-8);
+}
 
-  .centerSpinner {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
+.centerSpinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }

package/src/__next__/Icon/Icon.module.css

@@ -1,51 +1,49 @@
-@layer kz-components {
-  /*
+/*
  * This is taken from the Material Symbols CDN
  * font-weight & font-size removed as overridden in .icon
  */
-  .material-symbols-outlined {
-    font-family: 'Material Symbols Outlined';
-    font-style: normal;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-  }
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
 
-  .icon {
-    font-size: calc(1px * var(--icon-size, 20));
-    font-weight: var(--icon-font-weight, 400);
-    vertical-align: var(--icon-vertical-align);
+.icon {
+  font-size: calc(1px * var(--icon-size, 20));
+  font-weight: var(--icon-font-weight, 400);
+  vertical-align: var(--icon-vertical-align);
 
-    /* Must use vars otherwise whole attribute must be set again */
-    font-variation-settings:
-      'FILL' var(--icon-fill, 0),
-      'GRAD' var(--icon-grade, 0),
-      'opsz' var(--icon-optical-size, var(--icon-size, 20));
-  }
+  /* Must use vars otherwise whole attribute must be set again */
+  font-variation-settings:
+    'FILL' var(--icon-fill, 0),
+    'GRAD' var(--icon-grade, 0),
+    'opsz' var(--icon-optical-size, var(--icon-size, 20));
+}
 
-  .filled {
-    --icon-fill: 1;
-  }
+.filled {
+  --icon-fill: 1;
+}
 
-  [dir='rtl'] .shouldMirrorInRTL {
-    transform: scale(-1, 1);
-  }
+[dir='rtl'] .shouldMirrorInRTL {
+  transform: scale(-1, 1);
+}
 
-  [dir='rtl'] .iconLTR {
-    display: none;
-  }
+[dir='rtl'] .iconLTR {
+  display: none;
+}
 
-  .iconRTL {
-    display: none;
-  }
+.iconRTL {
+  display: none;
+}
 
-  [dir='rtl'] .iconRTL {
-    display: inherit;
-  }
+[dir='rtl'] .iconRTL {
+  display: inherit;
 }

package/src/__next__/Icon/_docs/Icon.docs.module.css

@@ -1,17 +1,15 @@
-@layer kz-components {
-  .interactiveIcon {
-    position: relative;
-    background: none;
-    padding: 0;
-    color: var(--color-blue-500);
+.interactiveIcon {
+  position: relative;
+  background: none;
+  padding: 0;
+  color: var(--color-blue-500);
 
-    &:hover {
-      color: var(--color-blue-400);
-    }
+  &:hover {
+    color: var(--color-blue-400);
   }
+}
 
-  .interactiveIcon:focus {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-  }
+.interactiveIcon:focus {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+    var(--color-blue-500);
 }