@kaizen/components 0.0.0-canary-01-23-mediaqs-20251222225043 → 0.0.0-canary-02-tb-mqs-test-20251223001039

package/dist/styles.css

@@ -10580,12 +10580,22 @@
   @container (min-width: 1440px) {
     .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;
     }
   }
   @media (min-width: 1080px) and (max-width: 1439px) {
     @container (min-width: 1065px) {
       .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;
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-01-23-mediaqs-20251222225043",
+  "version": "0.0.0-canary-02-tb-mqs-test-20251223001039",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/TitleBlock/TitleBlock.module.scss

@@ -566,18 +566,22 @@
 
   .breadcrumb {
     @include button-reset;
+
     cursor: pointer;
     position: absolute;
     align-items: center;
     top: 50%;
     transform: translateY(-50%);
     text-decoration: none;
+
     @include ca-position($start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid}));
+
     align-self: normal;
 
     &:hover .breadcrumbTextLink {
       text-decoration: underline;
     }
+
     &:focus {
       outline: none;
 
@@ -598,30 +602,24 @@
     }
 
     display: none;
+
     @include title-block-container-1440 {
       display: flex;
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
+
+      @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 title-block-medium-and-small {
-    //   display: none;
-    // }
-
-    // @include title-block-media-above-1080-container-under-720 {
-    //   display: none;
-    // }
-
-    // @media only screen {
-    //   @container (max-width: #{$breadcrumb-breakpoint-width}) {
-    //     position: relative;
-    //     transform: translateY(0);
-    //     margin-inline: 0 var(--spacing-12);
-
-    //     @include ca-position($start: 0);
-    //   }
-    // }
+      @include ca-position($start: 0);
+    }
   }
 
   @mixin visually-hidden {

package/src/TitleBlock/_mixins.scss

@@ -47,6 +47,7 @@
     @content;
   }
 }
+
 @mixin title-block-container-1440 {
   @container (min-width: 1440px) {
     @content;
@@ -56,8 +57,7 @@
 // This emulates a scenario in which the the appchrome is in use and the CP is open
 @mixin title-block-media-mixed-width {
   @media (min-width: 1080px) and (max-width: 1439px) {
-    // diff of 15px undexplained in the container that wraps main/body
-    // check that the container is less than 1080
+    // Note: There is adiff of 15px between the media and container query
     @container (min-width: 1065px) {
       @content;
     }