@kaizen/components 0.0.0-canary-titleblock-20251217102057 → 0.0.0-canary-02-18-UUXP-55-20251218012602

package/dist/styles.css

@@ -10015,15 +10015,24 @@
     justify-content: flex-end;
     flex-grow: 1;
     flex-shrink: 0;
+    margin-inline-end: 0;
+    margin-inline-start: calc(1.5rem / 2);
   }
   .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
     display: none;
     margin-inline-end: 0;
   }
-  @container (max-width: calc(768px - 1px)) {
+  @container (max-width: 511px) {
     .MainActions-module_mainActionsContainer__pk-78 {
+      padding-top: 12px;
       justify-content: flex-start;
-      padding-left: 2.75rem;
+      padding-left: 1.25rem;
+    }
+    @media (max-width: 511px) {
+      .MainActions-module_mainActionsContainer__pk-78 {
+        padding-top: 0;
+        padding-left: 3.375rem;
+      }
     }
     @media (max-width: 360px) {
       .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButton__VbER1 {
@@ -10092,9 +10101,11 @@
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
+    margin-bottom: 1px;
   }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
+    margin-bottom: 1px;
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
     max-width: 1392px;
@@ -10106,18 +10117,7 @@
   }
   @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
-      padding-right: 20px;
-      margin: 0;
-    }
-    @media (max-width: 1079px) {
-      .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
-        padding-left: 20px;
-      }
-    }
-    @media (max-width: 759px) {
-      .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
-        padding-left: 0;
-      }
+      margin: 0 12px;
     }
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
@@ -10129,11 +10129,11 @@
     }
   }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
-    padding-block: 20px;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
+    min-height: 5.25rem;
     justify-content: space-between;
     border-bottom: 0.083rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
@@ -10267,6 +10267,8 @@
   }
   .TitleBlock-module_hamburger__qe4R0 {
     display: none;
+    margin-inline-end: var(--spacing-xs, 0.375rem);
+    margin-inline-start: 0;
   }
   @media (max-width: 1079px) {
     .TitleBlock-module_hamburger__qe4R0 {
@@ -10371,13 +10373,9 @@
   .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
     display: flex;
     width: 100%;
+    margin-top: -0.083rem;
     justify-content: space-between;
   }
-  @container (max-width: calc(768px - 1px)) {
-    .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
-      height: 3.75rem;
-    }
-  }
   .TitleBlock-module_titleAndAdjacent__Q7W-m {
     display: flex;
     min-width: 0;
@@ -10523,11 +10521,6 @@
       display: flex;
     }
   }
-  @container (max-width: calc(768px - 1px)) {
-    .TitleBlock-module_secondaryActionsContainer__-4q0l {
-      margin-top: -3px;
-    }
-  }
   .TitleBlock-module_breadcrumb__lVNKz {
     appearance: none;
     display: inline;
@@ -10564,11 +10557,6 @@
     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 (max-width: 1079px) {
-    .TitleBlock-module_breadcrumb__lVNKz {
-      display: none;
-    }
-  }
   @media only screen {
     @container (max-width: 1644px) {
       .TitleBlock-module_breadcrumb__lVNKz {
@@ -10581,7 +10569,6 @@
     }
   }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
-    display: none;
     clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-titleblock-20251217102057",
+  "version": "0.0.0-canary-02-18-UUXP-55-20251218012602",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/TitleBlock/TitleBlock.module.scss

@@ -10,6 +10,7 @@
 @import './variables';
 
 @layer kz-components {
+  $title-block-margin-width-on-medium-and-small: 12px;
   $breadcrumb-circle-width: 48px;
   $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
     $breadcrumb-circle-width * 2.25;
@@ -56,10 +57,12 @@
 
   .lightVariant .titleRow {
     background-color: $color-white;
+    margin-bottom: 1px; // needed to correctly position the active tab label :after element
   }
 
   .adminVariant .titleRow {
     background-color: $color-white;
+    margin-bottom: 1px; // needed to correctly position the active tab label :after element
   }
 
   %titleBlockInner {
@@ -71,16 +74,7 @@
     min-width: 0; // this is an important trick to prevent flexbox items from overflowing
 
     @include title-block-medium-and-small {
-      padding-right: 20px;
-      margin: 0;
-
-      @media (max-width: 1079px) {
-        padding-left: 20px;
-      }
-
-      @media (max-width: 759px) {
-        padding-left: 0;
-      }
+      margin: 0 $title-block-margin-width-on-medium-and-small;
     }
   }
 
@@ -101,11 +95,11 @@
   }
 
   .titleRowInnerContent {
-    padding-block: 20px;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
+    min-height: $ca-grid * 3.5;
     justify-content: space-between;
     border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
 
@@ -253,6 +247,8 @@
   .hamburger {
     display: none;
 
+    @include ca-margin($end: $spacing-xs);
+
     @media (max-width: 1079px) {
       display: flex;
       align-items: center;
@@ -363,11 +359,8 @@
   .rowBelowSeparatorInnerContent {
     display: flex;
     width: 100%;
+    margin-top: -$title-block-separator-height;
     justify-content: space-between;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .titleAndAdjacent {
@@ -547,10 +540,6 @@
         display: flex;
       }
     }
-
-    @include title-block-small {
-      margin-top: -3px;
-    }
   }
 
   .breadcrumb {
@@ -591,10 +580,6 @@
       }
     }
 
-    @media (max-width: 1079px) {
-      display: none;
-    }
-
     @media only screen {
       @container (max-width: #{$breadcrumb-breakpoint-width}) {
         position: relative;
@@ -625,7 +610,6 @@
   }
 
   .breadcrumbTextLink {
-    display: none;
     // We are using visually hidden here instead of display:none so that a screen reader
     // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
     @include visually-hidden;

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

@@ -14,9 +14,17 @@
       margin-inline-end: 0;
     }
 
-    @include title-block-small {
+    @include ca-margin($start: calc(#{$ca-grid} / 2));
+
+    @include title-block-xsmall {
+      padding-top: 12px;
       justify-content: flex-start;
-      padding-left: 2.75rem;
+      padding-left: 1.25rem;
+
+      @media (max-width: 511px) {
+        padding-top: 0;
+        padding-left: 3.375rem;
+      }
 
       @media (max-width: 360px) {
         .defaultActionButton {