@kaizen/components 2.3.0 → 2.3.2

package/dist/cjs/src/TitleBlock/TitleBlock.module.scss.cjs

@@ -25,9 +25,9 @@ var styles = {
   "subtitle": "TitleBlock-module_subtitle__AI9tj",
   "subtitleText": "TitleBlock-module_subtitleText__gpXET",
   "sectionTitleContainer": "TitleBlock-module_sectionTitleContainer__LrDPV",
+  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleInner": "TitleBlock-module_sectionTitleInner__nJfOP",
   "sectionTitleOverride": "TitleBlock-module_sectionTitleOverride__XcD8g",
-  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleDescription": "TitleBlock-module_sectionTitleDescription__wuVwm",
   "dark": "TitleBlock-module_dark__KJexf",
   "rowBelowSeparatorInnerContent": "TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w",

package/dist/cjs/src/TitleBlock/subcomponents/Toolbar.module.scss.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
 var styles = {
-  "toolbar": "Toolbar-module_toolbar__8T-NB",
-  "toolbarItem": "Toolbar-module_toolbarItem__-l3QZ",
-  "noGap": "Toolbar-module_noGap__X-W59"
+  "toolbar": "Toolbar-module_toolbar__8T-NB"
 };
 module.exports = styles;

package/dist/esm/src/TitleBlock/TitleBlock.module.scss.mjs

@@ -23,9 +23,9 @@ var styles = {
   "subtitle": "TitleBlock-module_subtitle__AI9tj",
   "subtitleText": "TitleBlock-module_subtitleText__gpXET",
   "sectionTitleContainer": "TitleBlock-module_sectionTitleContainer__LrDPV",
+  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleInner": "TitleBlock-module_sectionTitleInner__nJfOP",
   "sectionTitleOverride": "TitleBlock-module_sectionTitleOverride__XcD8g",
-  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleDescription": "TitleBlock-module_sectionTitleDescription__wuVwm",
   "dark": "TitleBlock-module_dark__KJexf",
   "rowBelowSeparatorInnerContent": "TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w",

package/dist/esm/src/TitleBlock/subcomponents/Toolbar.module.scss.mjs

@@ -1,6 +1,4 @@
 var styles = {
-  "toolbar": "Toolbar-module_toolbar__8T-NB",
-  "toolbarItem": "Toolbar-module_toolbarItem__-l3QZ",
-  "noGap": "Toolbar-module_noGap__X-W59"
+  "toolbar": "Toolbar-module_toolbar__8T-NB"
 };
 export { styles as default };

package/dist/styles.css

@@ -9240,7 +9240,7 @@
     border-bottom: 0;
     border-top-left-radius: var(--border-borderless-border-radius);
     border-top-right-radius: var(--border-borderless-border-radius);
-    background: var(--color-white);
+    background: transparent;
     white-space: nowrap;
     text-decoration: none;
     padding: var(--spacing-md) var(--spacing-md);
@@ -9954,43 +9954,7 @@
   .Toolbar-module_toolbar__8T-NB {
     display: flex;
     align-items: center;
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ {
-    margin: 0 calc(1.5rem / 4);
-  }
-  @container (max-width: 1023px) {
-    .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ {
-      margin: 0 calc(1.5rem / 8);
-    }
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ.Toolbar-module_noGap__X-W59 {
-    margin: 0;
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:first-of-type {
-    margin-inline-end: calc(1.5rem / 4);
-    margin-inline-start: 0;
-  }
-  @container (max-width: 1023px) {
-    .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:first-of-type {
-      margin-inline-end: calc(1.5rem / 8);
-      margin-inline-start: 0;
-    }
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:first-of-type.Toolbar-module_noGap__X-W59 {
-    margin: 0;
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:last-of-type {
-    margin-inline-end: 0;
-    margin-inline-start: calc(1.5rem / 4);
-  }
-  @container (max-width: 1023px) {
-    .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:last-of-type {
-      margin-inline-end: 0;
-      margin-inline-start: calc(1.5rem / 8);
-    }
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:last-of-type.Toolbar-module_noGap__X-W59 {
-    margin: 0;
+    gap: inherit;
   }
 }
 /* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
@@ -10011,39 +9975,29 @@
 @layer kz-components {
   .MainActions-module_mainActionsContainer__pk-78 {
     display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-grow: 1;
+    align-self: flex-start;
     flex-shrink: 0;
-    margin-inline-end: 0;
-    margin-inline-start: calc(1.5rem / 2);
+    gap: 4px;
+  }
+  @container (max-width: 576px) {
+    .MainActions-module_mainActionsContainer__pk-78 {
+      justify-content: flex-start;
+      margin-inline-start: 48px;
+    }
   }
   .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
     display: none;
-    margin-inline-end: 0;
   }
-  @container (max-width: 511px) {
+  @media (max-width: 360px) {
     .MainActions-module_mainActionsContainer__pk-78 {
-      padding-top: 12px;
-      justify-content: flex-start;
-      padding-left: 1.25rem;
+      gap: 0;
     }
-    @media (max-width: 511px) {
-      .MainActions-module_mainActionsContainer__pk-78 {
-        padding-top: 0;
-        padding-left: 3.375rem;
-      }
+    .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButton__VbER1 {
+      display: none;
     }
-    @media (max-width: 360px) {
-      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButton__VbER1 {
-        display: none;
-        margin-inline-end: 0;
-      }
-      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
-        display: flex;
-        margin-inline-end: 3px;
-        margin-left: -0.5rem;
-      }
+    .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
+      display: flex;
+      margin-inline-end: 8px;
     }
   }
 }
@@ -10093,49 +10047,72 @@
       display: none;
     }
   }
-  .TitleBlock-module_titleRow__Ifqiu,
+  .TitleBlock-module_titleRow__Ifqiu {
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
   .TitleBlock-module_rowBelowSeparator__H4E63 {
     display: flex;
     width: 100%;
     justify-content: center;
   }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_rowBelowSeparator__H4E63 {
+      height: 3.75rem;
+    }
+  }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 3px;
+    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 3px;
+    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
+    box-sizing: border-box;
     max-width: 1392px;
-    margin: 0 72px;
     display: flex;
     flex-direction: column;
     width: 100%;
     min-width: 0;
+    padding: 0 20px 0 0;
   }
-  @container (max-width: calc(1080px - 1px)) {
+  @media (min-width: 1080px) {
     .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
-      margin: 0 12px;
+      padding: 0;
+      margin-inline: 24px;
     }
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
     border-bottom: 1px solid var(--color-gray-300, #eaeaec);
   }
-  @container (max-width: 511px) {
-    .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
-      padding-bottom: 12px;
+  .TitleBlock-module_rowBelowSeparatorInner__3gNec {
+    padding: 0 4px 0 12px;
+  }
+  @media (min-width: 1080px) {
+    .TitleBlock-module_rowBelowSeparatorInner__3gNec {
+      padding: 0;
+      margin-inline: 24px;
+    }
+  }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_rowBelowSeparatorInner__3gNec {
+      height: 3.75rem;
     }
   }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
+    box-sizing: border-box;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
-    min-height: 5.25rem;
+    gap: 12px;
+    padding-block: 20px 19px;
     justify-content: space-between;
-    border-bottom: 0.1875rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+    border-bottom: 0.063rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
     border-bottom-color: rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
@@ -10148,15 +10125,21 @@
       border-bottom: none;
     }
   }
-  @container (max-width: 511px) {
+  @container (max-width: 576px) {
     .TitleBlock-module_titleRowInnerContent__NhTHV {
       flex-wrap: wrap;
+      gap: 4px;
     }
   }
   .TitleBlock-module_title__c5JWR {
-    display: flex;
     align-items: center;
     min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
   }
   @container (max-width: 1365px) {
     .TitleBlock-module_title__c5JWR {
@@ -10171,7 +10154,7 @@
   }
   @container (max-width: 1365px) {
     .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleAndSubtitle__-kLSn {
-      transform: translateY(-0.3833em);
+      transform: translateY(-12px);
     }
   }
   .TitleBlock-module_titleAndSubtitleInner__TX8xw {
@@ -10215,34 +10198,65 @@
     }
   }
   .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
-    padding: 4px 0;
+    font-size: var(--typography-heading-3-font-size, 1.375rem);
+    line-height: var(--typography-heading-3-line-height, 1.875rem);
+    letter-spacing: var(--typography-heading-3-letter-spacing, normal);
+    margin: 8px 0;
   }
-  @container (max-width: 1365px) {
+  .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+    margin-bottom: 0;
+  }
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
+      .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        font-size: var(--typography-heading-2-font-size, 1.75rem);
+        line-height: var(--typography-heading-2-line-height, 2.25rem);
+        letter-spacing: var(--typography-heading-2-letter-spacing, normal);
+        margin: 2px 0;
+      }
+      .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        margin-bottom: 0;
+      }
+    }
+  }
+  @container (min-width: 1080px) {
     .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
       font-size: var(--typography-heading-2-font-size, 1.75rem);
       line-height: var(--typography-heading-2-line-height, 2.25rem);
       letter-spacing: var(--typography-heading-2-letter-spacing, normal);
-      padding: 2px 0;
+      margin: 2px 0;
+    }
+    .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+      margin-bottom: 0;
     }
   }
-  @container (max-width: 1365px) {
-    .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
-      font-size: var(--typography-heading-3-font-size, 1.375rem);
-      line-height: var(--typography-heading-3-line-height, 1.875rem);
-      letter-spacing: var(--typography-heading-3-letter-spacing, normal);
-      padding: 2px 0;
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
+      .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        font-size: var(--typography-heading-3-font-size, 1.375rem);
+        line-height: var(--typography-heading-3-line-height, 1.875rem);
+        letter-spacing: var(--typography-heading-3-letter-spacing, normal);
+        margin: 2px 0;
+      }
+      .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        margin-bottom: 0;
+      }
     }
   }
-  @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+  @container (min-width: 1080px) and (max-width: 1365px) {
+    .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
       font-size: var(--typography-heading-3-font-size, 1.375rem);
       line-height: var(--typography-heading-3-line-height, 1.875rem);
       letter-spacing: var(--typography-heading-3-letter-spacing, normal);
-      padding: 8px 0;
+      margin: 2px 0;
+    }
+    .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+      margin-bottom: 0;
     }
   }
   .TitleBlock-module_avatar__mEjJ8 {
     display: none;
+    align-self: self-start;
     box-sizing: border-box;
     overflow: hidden;
     height: 3rem;
@@ -10253,11 +10267,6 @@
   .TitleBlock-module_avatar__mEjJ8 > * {
     max-width: 100%;
   }
-  @container (min-width: 1080px) {
-    .TitleBlock-module_avatar__mEjJ8 {
-      display: block;
-    }
-  }
   .TitleBlock-module_avatar__mEjJ8.TitleBlock-module_withBorder__D8Mz2 {
     border: 3px solid var(--color-white, #ffffff);
     border-radius: 50%;
@@ -10265,14 +10274,25 @@
   .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_avatar__mEjJ8 {
     display: none;
   }
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
+      .TitleBlock-module_avatar__mEjJ8 {
+        display: block;
+      }
+    }
+  }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_avatar__mEjJ8 {
+      display: block;
+    }
+  }
   .TitleBlock-module_hamburger__qe4R0 {
-    display: none;
-    margin-inline-end: var(--spacing-xs, 0.375rem);
-    margin-inline-start: 0;
+    display: flex;
+    align-self: self-start;
   }
-  @container (max-width: calc(1080px - 1px)) {
+  @media (min-width: 1080px) {
     .TitleBlock-module_hamburger__qe4R0 {
-      display: flex;
+      display: none;
     }
   }
   .TitleBlock-module_subtitle__AI9tj {
@@ -10318,15 +10338,24 @@
   .TitleBlock-module_sectionTitleContainer__LrDPV {
     display: flex;
     align-items: center;
-    padding: calc(1.5rem * 3 / 4) 0;
+    padding-inline-end: 8px;
+  }
+  .TitleBlock-module_sectionTitle__b8daw {
+    display: block;
   }
   .TitleBlock-module_sectionTitleInner__nJfOP {
     display: flex;
     flex-direction: column;
   }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_sectionTitleInner__nJfOP {
+      flex-direction: row;
+      align-items: center;
+      column-gap: 12px;
+    }
+  }
   .TitleBlock-module_sectionTitleOverride__XcD8g.TitleBlock-module_sectionTitleOverride__XcD8g {
     white-space: nowrap;
-    margin-inline: 0 var(--spacing-24);
     font-family: var(--typography-heading-2-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
     font-weight: var(--typography-heading-2-font-weight, 600);
     font-size: var(--typography-heading-2-font-size, 1.75rem);
@@ -10351,9 +10380,6 @@
       letter-spacing: var(--typography-heading-4-letter-spacing, normal);
     }
   }
-  .TitleBlock-module_sectionTitle__b8daw {
-    display: block;
-  }
   .TitleBlock-module_sectionTitleDescription__wuVwm {
     color: var(--color-white, #ffffff);
     max-width: 780px;
@@ -10363,16 +10389,13 @@
     line-height: var(--typography-paragraph-small-line-height, 1.125rem);
     letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
   }
-  .TitleBlock-module_sectionTitle__b8daw + .TitleBlock-module_sectionTitleDescription__wuVwm {
-    margin-top: var(--spacing-6);
-  }
   .TitleBlock-module_sectionTitleDescription__wuVwm.TitleBlock-module_dark__KJexf {
     color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
   }
   .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
     display: flex;
     width: 100%;
-    margin-top: -0.1875rem;
+    margin-top: -0.063rem;
     justify-content: space-between;
   }
   .TitleBlock-module_titleAndAdjacent__Q7W-m {
@@ -10389,13 +10412,20 @@
     opacity: 0%;
   }
   .TitleBlock-module_tag__GDzmQ {
-    display: flex;
+    display: none;
     align-items: center;
     margin-inline: var(--spacing-12) 0;
   }
-  @container (max-width: calc(1080px - 1px)) {
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
+      .TitleBlock-module_tag__GDzmQ {
+        display: flex;
+      }
+    }
+  }
+  @container (min-width: 1080px) {
     .TitleBlock-module_tag__GDzmQ {
-      display: none;
+      display: flex;
     }
   }
   .TitleBlock-module_tag__GDzmQ + .TitleBlock-module_pageSwitcherSelectNextToTitle__KZ0Uc {
@@ -10428,6 +10458,8 @@
   }
   @container (max-width: calc(768px - 1px)) {
     .TitleBlock-module_hasNavigationTabs__v09jL .TitleBlock-module_navigationTabScrollerContainer__o234q {
+      margin-top: 0.063rem;
+      height: 3.75rem;
       display: block;
       overflow-x: scroll;
       scrollbar-width: none;
@@ -10455,7 +10487,7 @@
     .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
       display: block;
       position: absolute;
-      top: 3.5625rem;
+      top: 3.687rem;
       width: 3.75rem;
       height: 3.75rem;
       background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));
@@ -10499,11 +10531,6 @@
   }
   .TitleBlock-module_secondaryActionsContainer__-4q0l {
     display: flex;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding: calc(1.5rem / 2) 0;
-    margin-inline-end: 0;
-    margin-inline-start: 2.25rem;
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_secondaryActionsContainer__-4q0l {
     color: var(--color-blue-500, #0168b3);
@@ -10530,7 +10557,6 @@
     padding: 0;
     border: none;
     cursor: pointer;
-    display: flex;
     position: absolute;
     align-items: center;
     top: 50%;
@@ -10538,7 +10564,8 @@
     text-decoration: none;
     inset-inline-end: auto;
     inset-inline-start: calc(-48px - 1.5rem);
-    align-self: normal;
+    align-self: self-start;
+    display: none;
   }
   .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82 {
     text-decoration: underline;
@@ -10556,9 +10583,10 @@
     border-style: var(--border-focus-ring-border-style, solid);
     inset: calc(-2 * var(--border-focus-ring-border-width, 2px) - var(--border-focus-ring-border-width, 2px));
   }
-  @media only screen {
-    @container (max-width: 1644px) {
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
       .TitleBlock-module_breadcrumb__lVNKz {
+        display: flex;
         position: relative;
         transform: translateY(0);
         margin-inline: 0 var(--spacing-12);
@@ -10567,6 +10595,16 @@
       }
     }
   }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_breadcrumb__lVNKz {
+      display: flex;
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+    }
+  }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
     clip-path: rect(0 0 0 0);
     height: 1px;
@@ -10660,11 +10698,6 @@
     color: var(--color-blue-500, #0168b3);
     background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.1);
   }
-  @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_circle__68z-T {
-      display: none;
-    }
-  }
   /* stylelint-enable no-descending-specificity */
 }
 @keyframes TitleBlock-module_slide-fade__o5TnP {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Tabs/subcomponents/Tab/Tab.module.css

@@ -6,7 +6,7 @@
     border-bottom: 0;
     border-top-left-radius: var(--border-borderless-border-radius);
     border-top-right-radius: var(--border-borderless-border-radius);
-    background: var(--color-white);
+    background: transparent;
     white-space: nowrap;
     text-decoration: none;
     padding: var(--spacing-md) var(--spacing-md);

package/src/TitleBlock/TitleBlock.module.scss

@@ -10,11 +10,13 @@
 @import './variables';
 
 @layer kz-components {
-  $title-block-margin-width-on-medium-and-small: 12px;
+  $title-block-spacing-default: 20px;
+  $title-block-spacing-above-1080: 24px;
+  $title-block-gap-default: 12px;
   $breadcrumb-circle-width: 48px;
   $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
     $breadcrumb-circle-width * 2.25;
-  $title-block-separator-height: 0.1875rem;
+  $title-block-separator-height: 0.063rem;
   $tab-container-height-default: $ca-grid * 3;
   $tab-container-height-small: $ca-grid * 2.5;
   $tab-container-height-default-collapsed: 0;
@@ -48,33 +50,45 @@
     }
   }
 
-  .titleRow,
+  .titleRow {
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+
   .rowBelowSeparator {
     display: flex;
     width: 100%;
     justify-content: center;
+
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
 
   .lightVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: 3px; // needed to correctly position the active tab label :after element
+    margin-bottom: $title-block-separator-height;
   }
 
   .adminVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: 3px; // needed to correctly position the active tab label :after element
+    margin-bottom: $title-block-separator-height;
   }
 
   %titleBlockInner {
+    box-sizing: border-box;
     max-width: $layout-content-max-width;
-    margin: 0 $layout-content-side-margin;
     display: flex;
     flex-direction: column;
     width: 100%;
     min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+    padding: 0 $title-block-spacing-default 0 0;
 
-    @include title-block-medium-and-small {
-      margin: 0 $title-block-margin-width-on-medium-and-small;
+    @include title-block-min-media-1080 {
+      padding: 0;
+      margin-inline: $title-block-spacing-above-1080;
     }
   }
 
@@ -84,22 +98,34 @@
 
   .lightVariant .titleRowInner {
     border-bottom: 1px solid $color-gray-300;
+  }
 
-    @include title-block-xsmall {
-      padding-bottom: 12px;
+  %rowBelowSeparatorInnerMarginOverride {
+    padding: 0 4px 0 12px;
+
+    @include title-block-min-media-1080 {
+      padding: 0;
+      margin-inline: $title-block-spacing-above-1080;
     }
   }
 
   .rowBelowSeparatorInner {
     @extend %titleBlockInner;
+    @extend %rowBelowSeparatorInnerMarginOverride;
+
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
 
   .titleRowInnerContent {
+    box-sizing: border-box;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
-    min-height: $ca-grid * 3.5;
+    gap: $title-block-gap-default;
+    padding-block: $title-block-spacing-default 19px;
     justify-content: space-between;
     border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
 
@@ -117,16 +143,24 @@
       border-bottom: none;
     }
 
-    @include title-block-xsmall {
+    @include title-block-under-576 {
       flex-wrap: wrap;
+      gap: 4px;
     }
   }
 
   .title {
-    display: flex;
     align-items: center;
     min-width: 0; // this is an important trick to prevent flexbox items from overflowing
 
+    // truncation
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+
     // Applying width 100% when the title is *not* long and is followed by a subtitle
     // causes misalignment of both.
     @include title-block-under-1366 {
@@ -142,7 +176,7 @@
 
     .hasSubtitle & {
       @include title-block-under-1366 {
-        transform: translateY(-0.3833em);
+        transform: translateY(-12px);
       }
     }
   }
@@ -191,34 +225,65 @@
   }
 
   .titleTextOverride.titleTextOverride {
-    padding: 4px 0;
+    font-size: $typography-heading-3-font-size;
+    line-height: $typography-heading-3-line-height;
+    letter-spacing: $typography-heading-3-letter-spacing;
+    margin: 8px 0;
 
-    @include title-block-under-1366 {
+    .hasSubtitle & {
+      margin-bottom: 0;
+    }
+
+    @include title-block-media-mixed-width {
       font-size: $typography-heading-2-font-size;
       line-height: $typography-heading-2-line-height;
       letter-spacing: $typography-heading-2-letter-spacing;
-      padding: 2px 0;
+      margin: 2px 0;
+
+      .hasSubtitle & {
+        margin-bottom: 0;
+      }
+    }
+
+    @include title-block-min-container-1080 {
+      font-size: $typography-heading-2-font-size;
+      line-height: $typography-heading-2-line-height;
+      letter-spacing: $typography-heading-2-letter-spacing;
+      margin: 2px 0;
+
+      .hasSubtitle & {
+        margin-bottom: 0;
+      }
     }
 
     .hasLongTitle & {
-      @include title-block-under-1366 {
+      @include title-block-media-mixed-width {
         font-size: $typography-heading-3-font-size;
         line-height: $typography-heading-3-line-height;
         letter-spacing: $typography-heading-3-letter-spacing;
-        padding: 2px 0;
+        margin: 2px 0;
+
+        .hasSubtitle & {
+          margin-bottom: 0;
+        }
       }
-    }
 
-    @include title-block-medium-and-small {
-      font-size: $typography-heading-3-font-size;
-      line-height: $typography-heading-3-line-height;
-      letter-spacing: $typography-heading-3-letter-spacing;
-      padding: 8px 0;
+      @container (min-width: #{$layout-breakpoints-large}) and (max-width: 1365px) {
+        font-size: $typography-heading-3-font-size;
+        line-height: $typography-heading-3-line-height;
+        letter-spacing: $typography-heading-3-letter-spacing;
+        margin: 2px 0;
+
+        .hasSubtitle & {
+          margin-bottom: 0;
+        }
+      }
     }
   }
 
   .avatar {
     display: none;
+    align-self: self-start;
     box-sizing: border-box;
     overflow: hidden;
     height: $ca-grid * 2;
@@ -230,10 +295,6 @@
       max-width: 100%;
     }
 
-    @container (min-width: #{$layout-breakpoints-large}) {
-      display: block;
-    }
-
     &.withBorder {
       border: 3px solid $color-white;
       border-radius: 50%;
@@ -242,15 +303,22 @@
     .hasLongTitle & {
       display: none;
     }
+
+    @include title-block-media-mixed-width {
+      display: block;
+    }
+
+    @include title-block-min-container-1080 {
+      display: block;
+    }
   }
 
   .hamburger {
-    display: none;
-
-    @include ca-margin($end: $spacing-xs);
+    display: flex;
+    align-self: self-start;
 
-    @include title-block-medium-and-small {
-      display: flex;
+    @include title-block-min-media-1080 {
+      display: none;
     }
   }
 
@@ -299,17 +367,26 @@
   .sectionTitleContainer {
     display: flex;
     align-items: center;
-    padding: calc(#{$ca-grid} * 3 / 4) 0;
+    padding-inline-end: 8px; // 20 take 12 result in 8 extra padding needed in section versus tabs UI
+  }
+
+  .sectionTitle {
+    display: block;
   }
 
   .sectionTitleInner {
     display: flex;
     flex-direction: column;
+
+    @include title-block-min-container-1080 {
+      flex-direction: row;
+      align-items: center;
+      column-gap: $title-block-gap-default;
+    }
   }
 
   .sectionTitleOverride.sectionTitleOverride {
     white-space: nowrap;
-    margin-inline: 0 var(--spacing-24);
     font-family: $typography-heading-2-font-family;
     font-weight: $typography-heading-2-font-weight;
     font-size: $typography-heading-2-font-size;
@@ -333,10 +410,6 @@
     }
   }
 
-  .sectionTitle {
-    display: block;
-  }
-
   .sectionTitleDescription {
     color: $color-white;
     max-width: 780px;
@@ -346,10 +419,6 @@
     line-height: $typography-paragraph-small-line-height;
     letter-spacing: $typography-paragraph-small-letter-spacing;
 
-    .sectionTitle + & {
-      margin-top: var(--spacing-6);
-    }
-
     &.dark {
       color: rgba($color-purple-800-rgb, 0.7);
     }
@@ -382,12 +451,16 @@
   }
 
   .tag {
-    display: flex;
+    display: none;
     align-items: center;
     margin-inline: var(--spacing-12) 0;
 
-    @include title-block-medium-and-small {
-      display: none;
+    @include title-block-media-mixed-width {
+      display: flex;
+    }
+
+    @include title-block-min-container-1080 {
+      display: flex;
     }
 
     + .pageSwitcherSelectNextToTitle {
@@ -425,6 +498,8 @@
   .navigationTabScrollerContainer {
     .hasNavigationTabs & {
       @include title-block-small {
+        margin-top: $title-block-separator-height;
+        height: $tab-container-height-small;
         display: block;
         overflow-x: scroll;
         scrollbar-width: none;
@@ -510,11 +585,6 @@
   // but the variants prevent us from breaking this out.
   .secondaryActionsContainer {
     display: flex;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding: (calc(#{$ca-grid} / 2)) 0;
-
-    @include ca-margin($start: $ca-grid * 1.5);
 
     // To be removed eventually – the Dropdown does not
     // currently set its own color, and we want it
@@ -545,7 +615,6 @@
     @include button-reset;
 
     cursor: pointer;
-    display: flex;
     position: absolute;
     align-items: center;
     top: 50%;
@@ -554,7 +623,7 @@
 
     @include ca-position($start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid}));
 
-    align-self: normal;
+    align-self: self-start;
 
     &:hover .breadcrumbTextLink {
       text-decoration: underline;
@@ -579,14 +648,24 @@
       }
     }
 
-    @media only screen {
-      @container (max-width: #{$breadcrumb-breakpoint-width}) {
-        position: relative;
-        transform: translateY(0);
-        margin-inline: 0 var(--spacing-12);
+    display: none;
 
-        @include ca-position($start: 0);
-      }
+    @include title-block-media-mixed-width {
+      display: flex;
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
+
+      @include ca-position($start: 0);
+    }
+
+    @include title-block-min-container-1080 {
+      display: flex;
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
+
+      @include ca-position($start: 0);
     }
   }
 
@@ -710,10 +789,6 @@
       color: $color-blue-500;
       background-color: rgba($color-blue-500-rgb, 0.1);
     }
-
-    @include title-block-medium-and-small {
-      display: none;
-    }
   }
   /* stylelint-enable no-descending-specificity */
 }

package/src/TitleBlock/_docs/TitleBlock.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, waitFor, within } from '@storybook/test'
 import { Icon } from '~components/Icon'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { StickerSheet } from '~storybook/components/StickerSheet'
@@ -26,6 +27,47 @@ const SECONDARY_ACTIONS = [
   },
 ]
 
+const viewports = {
+  viewports: {
+    default: {
+      name: 'desktop (above or equal to 1366)',
+      styles: { width: '1366px', height: '800px' },
+      type: 'desktop',
+    },
+    desktopSm: {
+      name: 'desktop-sm (1024 - 1365)',
+      styles: { width: '1365px', height: '800px' },
+      type: 'desktop',
+    },
+    tablet: {
+      name: 'tablet (672 - 1023)',
+      styles: { width: '1023px', height: '800px' },
+      type: 'desktop',
+    },
+    mobileResponsive: {
+      name: 'mobile-responsive (512 - 671)',
+      styles: { width: '671px', height: '800px' },
+      type: 'desktop',
+    },
+    mobile: {
+      name: 'mobile (361 - 512)',
+      styles: { width: '511px', height: '800px' },
+      type: 'desktop',
+    },
+    mobileXs: {
+      name: 'mobile (under 360)',
+      styles: { width: '360px', height: '800px' },
+      type: 'desktop',
+    },
+  },
+  defaultViewport: 'default',
+}
+
+const chromaticViewports = {
+  disable: false,
+  viewports: [1366, 1365, 1079, 360, 320],
+}
+
 const meta = {
   title: 'Components/TitleBlock',
   component: TitleBlock,
@@ -94,54 +136,41 @@ export const Playground: Story = {
 
 export const Viewports: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-        mediumSmall: {
-          name: 'Medium and small',
-          styles: { width: '1079px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1079, 1365, 1366, 360, 320],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+}
+export const WithTabNavigation: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    const TabNavigation = await canvas.findByRole('navigation', {
+      name: 'Page title',
+    })
+
+    await step('Navigation Tab is present', async () => {
+      await waitFor(() => expect(TabNavigation).toBeInTheDocument())
+    })
+
+    await step('Navigation is focusable', async () => {
+      const NavigationList = canvas.getByRole('list')
+      const listItems = within(NavigationList).getAllByRole('listitem')
+
+      const thirdNavigationLink = within(listItems[2]).getByRole('link')
+      thirdNavigationLink.focus()
+      expect(thirdNavigationLink).toHaveFocus()
+    })
   },
 }
 
 export const HasLongTitle: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: { title: 'A long title with over thirty characters' },
 }
@@ -153,45 +182,8 @@ export const LightVariant: Story = {
         sourceState: 'shown',
       },
     },
-    viewport: {
-      viewports: {
-        default: {
-          name: 'desktop (above or equal to 1366)',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        desktopSm: {
-          name: 'desktop-sm (1024 - 1365)',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-        tablet: {
-          name: 'tablet (672 - 1023)',
-          styles: { width: '1023px', height: '800px' },
-          type: 'desktop',
-        },
-        mobileResponsive: {
-          name: 'mobile-responsive (512 - 671)',
-          styles: { width: '671px', height: '800px' },
-          type: 'desktop',
-        },
-        mobile: {
-          name: 'mobile (361 - 512)',
-          styles: { width: '511px', height: '800px' },
-          type: 'desktop',
-        },
-        mobileXs: {
-          name: 'mobile (under 360)',
-          styles: { width: '360px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1079, 1365, 1366, 360, 320],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'light',
@@ -209,25 +201,8 @@ export const LightVariant: Story = {
 
 export const AdminVariant: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'admin',
@@ -244,25 +219,8 @@ export const AdminVariant: Story = {
 
 export const EducationVariant: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'education',
@@ -476,3 +434,18 @@ export const StickerSheetSurveyStatus: Story = {
     </StickerSheet>
   ),
 }
+
+export const WithSection: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    title: 'A extra long title with over thirty characters so it truncates in a mobile viewport',
+    variant: 'light',
+    sectionTitle: 'Section title',
+    sectionTitleDescription: 'Description of section can go here',
+    navigationTabs: undefined,
+    surveyStatus: undefined,
+  },
+}

package/src/TitleBlock/_mixins.scss

@@ -41,3 +41,32 @@
     @content;
   }
 }
+
+@mixin title-block-min-media-1080 {
+  @media (min-width: #{$layout-breakpoints-large}) {
+    @content;
+  }
+}
+
+@mixin title-block-min-container-1080 {
+  @container (min-width: #{$layout-breakpoints-large}) {
+    @content;
+  }
+}
+
+@mixin title-block-media-mixed-width {
+  // 1080
+  @media (min-width: #{$layout-breakpoints-large}) and (max-width: 1095px) {
+    // Note: There is a diff of 15px between the media and container query
+    @container (min-width: 1065px) {
+      @content;
+    }
+  }
+}
+
+// 576 is the specified breakpoint from design to wrap the primary actions
+@mixin title-block-under-576 {
+  @container (max-width: 576px) {
+    @content;
+  }
+}

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

@@ -4,39 +4,32 @@
 @layer kz-components {
   .mainActionsContainer {
     display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-grow: 1;
+    align-self: flex-start;
     flex-shrink: 0;
+    // 8px gap between default and primary actions
+    // 4px needs to applied as 3rd empty div for minimized default action has gap applied also
+    gap: 4px;
+
+    @include title-block-under-576 {
+      justify-content: flex-start;
+      // offset: hamburger menu button is 48px wide
+      margin-inline-start: 48px;
+    }
 
     .defaultActionButtonMinimized {
       display: none;
-      margin-inline-end: 0;
     }
 
-    @include ca-margin($start: calc(#{$ca-grid} / 2));
+    @media (max-width: 360px) {
+      gap: 0;
 
-    @include title-block-xsmall {
-      padding-top: 12px;
-      justify-content: flex-start;
-      padding-left: 1.25rem;
-
-      @media (max-width: 511px) {
-        padding-top: 0;
-        padding-left: 3.375rem;
+      .defaultActionButton {
+        display: none;
       }
 
-      @media (max-width: 360px) {
-        .defaultActionButton {
-          display: none;
-          margin-inline-end: 0;
-        }
-
-        .defaultActionButtonMinimized {
-          display: flex;
-          margin-inline-end: 3px;
-          margin-left: -0.5rem;
-        }
+      .defaultActionButtonMinimized {
+        display: flex;
+        margin-inline-end: 8px;
       }
     }
   }

package/src/TitleBlock/subcomponents/Toolbar.module.scss

@@ -6,41 +6,9 @@
   .toolbar {
     display: flex;
     align-items: center;
-
-    .toolbarItem {
-      margin: 0 calc(#{$ca-grid} / 4);
-
-      @include title-block-under-1024 {
-        margin: 0 calc(#{$ca-grid} / 8);
-      }
-
-      &.noGap {
-        margin: 0;
-      }
-    }
-
-    .toolbarItem:first-of-type {
-      @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 4));
-
-      @include title-block-under-1024 {
-        @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 8));
-      }
-
-      &.noGap {
-        margin: 0;
-      }
-    }
-
-    .toolbarItem:last-of-type {
-      @include ca-margin($start: calc(#{$ca-grid} / 4), $end: 0);
-
-      @include title-block-under-1024 {
-        @include ca-margin($start: calc(#{$ca-grid} / 8), $end: 0);
-      }
-
-      &.noGap {
-        margin: 0;
-      }
-    }
+    // gap sizing needs to be applied on parent container
+    // the toolbar is used accross mutiple subcomponents within Titleblock,
+    //  spacing in now the responsibility of the parent.
+    gap: inherit;
   }
 }