@carbon-labs/react-animated-header 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "7143d1ffcfee709fceee312ed790da0303703cb8"
+  "gitHead": "b2adf21b63ab6a230373abe160cde8fc36251197"
 }

package/scss/AnimatedHeader/animated-header.scss

@@ -49,11 +49,11 @@ body {
   overflow: visible;
   background: $background;
   inline-size: 100%;
-  max-block-size: 90vh;
+  max-block-size: 200vh;
   outline: 1px solid transparent;
   padding-block: 0 $spacing-10;
   transition: padding 500ms motion.motion(standard, expressive),
-    max-height 500ms motion.motion(standard, expressive), color 200ms linear,
+    max-block-size 500ms motion.motion(standard, expressive), color 200ms linear,
     background-color 200ms linear,
     outline 500ms motion.motion(standard, expressive);
   writing-mode: horizontal-tb;
@@ -226,6 +226,32 @@ body {
   max-inline-size: fit-content;
 }
 
+.#{$prefix}__task-controller-skeleton {
+  background: $layer-01;
+  block-size: $spacing-08;
+  inline-size: auto;
+  max-inline-size: 18rem;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}__task-controller-skeleton::before {
+  background: $layer-02;
+}
+
+.#{$prefix}__workspace-selector-skeleton {
+  background: $layer-01;
+  block-size: $spacing-07;
+  inline-size: auto;
+  max-inline-size: 18rem;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}__workspace-selector-skeleton::before {
+  background: $layer-02;
+}
+
 .#{$prefix}__header-dropdown--container {
   inline-size: auto;
   max-inline-size: 18rem;
@@ -284,6 +310,13 @@ body {
   animation-fill-mode: both;
 }
 
+/* support for Safari */
+@supports (font: -apple-system-body) and (-webkit-appearance: none) {
+  .#{$prefix}__tile {
+    animation: none;
+  }
+}
+
 .#{$prefix}__tile:nth-child(1) {
   animation-delay: 383.333ms;
 }
@@ -482,10 +515,8 @@ body {
     inline-size: calc(100% - 16px);
   }
 
-  .#{$prefix}__tiles-container:has(> :first-child)
-    > ##{$prefix}__ai-prompt-tile
-    ~ .#{$prefix}__glass-tile {
-    inline-size: calc(50% - 16px);
+  .#{$prefix}__tiles-container > ##{$prefix}__ai-prompt-tile {
+    flex-grow: 0.5;
   }
 }
 

package/scss/Tiles/AIPromptTile/ai-prompt-tile.scss

@@ -23,6 +23,16 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   text-decoration: none;
 }
 
+.#{$prefix}--disabled {
+  outline: 0;
+
+  * {
+    color: $text-disabled;
+    fill: $text-disabled;
+    pointer-events: none;
+  }
+}
+
 .#{$prefix}:hover,
 .#{$prefix}:active,
 .#{$prefix}:focus {
@@ -192,6 +202,18 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   z-index: 4;
 }
 
+.#{$prefix}--loading-skeleton {
+  background: $layer-01;
+  block-size: 100%;
+  inline-size: 100%;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}--loading-skeleton::before {
+  background: $layer-02;
+}
+
 @keyframes animate-border {
   0% {
     background-position: 100% 0%;

package/scss/Tiles/GlassTile/glass-tile.scss

@@ -23,6 +23,16 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   text-decoration: none;
 }
 
+.#{$prefix}[aria-disabled='true'] {
+  outline: none;
+
+  * {
+    color: $text-disabled;
+    fill: $text-disabled;
+    pointer-events: none;
+  }
+}
+
 .#{$prefix}:hover,
 .#{$prefix}:active,
 .#{$prefix}:focus {
@@ -133,3 +143,15 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
 .#{$prefix}--custom-content {
   z-index: 2;
 }
+
+.#{$prefix}--loading-skeleton {
+  background: $layer-01;
+  block-size: 100%;
+  inline-size: 100%;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}--loading-skeleton::before {
+  background: $layer-02;
+}