@carbon-labs/react-animated-header 0.31.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "5484fe3c1663b43ab9131b53ec1d1b9126b1640a"
+  "gitHead": "2cb890436fa0c3e0f5a0b9738f2d59fb1a50eb31"
 }

package/scss/AnimatedHeader/animated-header.scss

@@ -46,17 +46,37 @@ body {
 .#{$prefix} {
   position: relative;
   display: flex;
-  overflow: visible;
   background: $background;
   inline-size: 100%;
-  max-block-size: 200vh;
-  outline: 1px solid transparent;
-  padding-block: 0 $spacing-10;
-  transition: padding 500ms motion.motion(standard, expressive),
-    max-block-size 500ms motion.motion(standard, expressive), color 200ms linear,
-    background-color 200ms linear,
-    outline 500ms motion.motion(standard, expressive);
+  max-block-size: 85vh;
   writing-mode: horizontal-tb;
+
+  &[data-expanded='true'] {
+    overflow: visible;
+    max-block-size: 85vh;
+    outline: 1px solid transparent;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-block-size 500ms motion.motion(entrance, expressive),
+        color 200ms linear, background-color 200ms linear,
+        outline 500ms motion.motion(entrance, expressive);
+    }
+  }
+
+  &[data-expanded='false'] {
+    overflow: hidden;
+    max-block-size: $spacing-09;
+    outline: 1px solid $border-subtle-00;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-block-size 500ms motion.motion(exit, expressive),
+        outline 500ms motion.motion(exit, expressive);
+    }
+  }
+}
+
+.#{$prefix}__grid {
+  padding-block: 0 $spacing-10;
 }
 
 .#{$prefix}__static--container {
@@ -88,8 +108,6 @@ body {
 
   background-position: top right;
   background-repeat: no-repeat;
-  transform: translateY(0);
-  transition: transform 500ms motion.motion(standard, expressive);
 }
 
 .#{$prefix}__ui-heading {
@@ -151,12 +169,20 @@ body {
   flex-direction: column;
   gap: $spacing-07;
   margin-block-start: $spacing-08;
-  opacity: 1;
-  transition: opacity 500ms linear;
-}
 
-.#{$prefix}__left-area-container--collapsed {
-  opacity: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    transition-delay: 0ms;
+  }
 }
 
 .#{$prefix}__description {
@@ -238,15 +264,25 @@ body {
   flex-direction: column;
   margin: 0;
   margin-block-start: $spacing-08;
-  opacity: 1;
-  transition: opacity 500ms linear;
 }
 
 .#{$prefix}__workspace--container {
   margin-block-start: calc(-1 * $spacing-08);
   min-block-size: $spacing-08;
-  opacity: 1;
-  transition: opacity 500ms linear;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    transition-delay: 0ms;
+  }
 }
 
 .#{$prefix}__workspace {
@@ -264,10 +300,6 @@ body {
   gap: $spacing-05;
 }
 
-.#{$prefix}__content--collapsed {
-  opacity: 0;
-}
-
 .#{$prefix}__tile {
   animation: 500ms motion.motion(standard, expressive) 0ms 1 slide-in;
   animation-fill-mode: both;
@@ -326,12 +358,17 @@ body {
   z-index: 0;
   display: flex;
 
-  transform: translateY(0);
-  transition: transform 500ms motion.motion(standard, expressive);
-}
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 500ms motion.motion(standard, expressive);
+  }
 
-.#{$prefix}__lottie-animation--collapsed {
-  transform: translateY(-16px);
+  &[data-expanded='true'] {
+    transform: translateY(0);
+  }
+
+  &[data-expanded='false'] {
+    transform: translateY(-16px);
+  }
 }
 
 .#{$prefix}__button-collapse--container {
@@ -383,13 +420,6 @@ body {
   color: $text-primary;
 }
 
-.#{$prefix}--collapsed {
-  overflow: hidden;
-  padding: 0;
-  max-block-size: $spacing-09;
-  outline: 1px solid $border-subtle-00;
-}
-
 // Small
 @media only screen and (width >= 20rem) {
   .#{$prefix}__lottie-animation {
@@ -564,7 +594,7 @@ body {
 /*
     If the user has expressed their preference for
     reduced motion, then don't use animations
-  */
+   */
 @media (prefers-reduced-motion: reduce) {
   .#{$prefix},
   .#{$prefix}__static,

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

@@ -50,8 +50,20 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   padding: $spacing-05;
   background-color: transparent;
   color: $text-primary;
-  opacity: 1;
-  transition: opacity 500ms linear;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    transition-delay: 0ms;
+  }
 }
 
 /* Semi-transparent background layer */

package/scss/Tiles/AITile/ai-tile.scss

@@ -0,0 +1,222 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/motion';
+
+$prefix: 'clabs--animated-header__ai-tile' !default;
+
+.#{$prefix} {
+  position: relative;
+  display: flex;
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  min-block-size: 192px;
+  text-decoration: none;
+}
+
+.#{$prefix}[aria-disabled='true'] {
+  outline: none;
+
+  * {
+    color: $text-disabled;
+    fill: $text-disabled;
+    pointer-events: none;
+  }
+}
+
+.#{$prefix}:hover,
+.#{$prefix}:active,
+.#{$prefix}:focus {
+  text-decoration: none;
+}
+
+.#{$prefix}--body {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  overflow: hidden;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: $spacing-05;
+  background-color: transparent;
+  color: $text-primary;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    transition-delay: 0ms;
+  }
+}
+
+/* Semi-transparent background layer */
+.#{$prefix}--body-background {
+  position: absolute;
+  z-index: 1;
+  background-color: $layer-01;
+  inset: 0;
+  opacity: 0.7;
+  pointer-events: none;
+  transition: opacity 150ms motion.motion(standard, productive);
+}
+
+:root .#{$prefix}--body-background,
+[data-carbon-theme='white'] .#{$prefix}--body-background,
+[data-carbon-theme='g10'] .#{$prefix}--body-background {
+  background-color: $layer-01;
+}
+
+[data-carbon-theme='g90'] .#{$prefix}--body-background,
+[data-carbon-theme='g100'] .#{$prefix}--body-background {
+  background-color: $layer-hover-01;
+}
+
+/* Animated gradient layer */
+.#{$prefix}--body-gradient {
+  position: absolute;
+  z-index: 2;
+  animation: 1000ms motion.motion(standard, expressive) animate-gradient;
+  animation-delay: 466.666ms;
+  animation-fill-mode: both;
+  background: linear-gradient(0deg, #4589ff4d 0%, transparent 100%);
+  background-repeat: no-repeat;
+  background-size: 100% 64px;
+  inset: 0;
+  opacity: 0.7;
+  pointer-events: none;
+  transition: opacity 150ms motion.motion(standard, productive);
+}
+
+.#{$prefix}--body:hover {
+  .#{$prefix}--body-gradient,
+  .#{$prefix}--body-background {
+    opacity: 0.85;
+  }
+}
+
+.#{$prefix}--body::after {
+  position: absolute;
+  z-index: 3;
+  border: 1px solid transparent;
+  animation: 1000ms motion.motion(standard, expressive) animate-border;
+  animation-delay: 466.666ms;
+  animation-fill-mode: both;
+  background: linear-gradient(180deg, #a6c8ff 64%, #78a9ff) border-box;
+  background-size: 100% 150%;
+  content: '';
+  inset: 0;
+  -webkit-mask: linear-gradient(#ffffff 0 0) padding-box,
+    linear-gradient(#ffffff 0 0);
+  mask: linear-gradient(#ffffff 0 0) padding-box, linear-gradient(#ffffff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+}
+
+.#{$prefix}--icons {
+  position: relative;
+  z-index: 4;
+  display: flex;
+  justify-content: space-between;
+  margin-block-end: $spacing-05;
+}
+
+.#{$prefix}--title {
+  @include type-style('body-compact-02');
+
+  position: relative;
+  z-index: 4;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @supports (-webkit-line-clamp: 3) {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    text-overflow: ellipsis;
+    white-space: initial;
+  }
+}
+
+.#{$prefix}--footer {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  gap: $spacing-05;
+  inset-block-end: $spacing-05;
+}
+
+.#{$prefix}--subtitle {
+  @include type-style('body-short-01');
+
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+  color: $text-secondary;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @supports (-webkit-line-clamp: 1) {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    text-overflow: ellipsis;
+    white-space: initial;
+  }
+}
+
+.#{$prefix}--custom-content {
+  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%;
+  }
+
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
+@keyframes animate-gradient {
+  0% {
+    background-position: 100% 150%;
+  }
+
+  100% {
+    background-position: 100% 100%;
+  }
+}

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

@@ -50,8 +50,20 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   padding: $spacing-05;
   background-color: transparent;
   color: $text-primary;
-  opacity: 1;
-  transition: opacity 500ms linear;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    transition-delay: 0ms;
+  }
 }
 
 /* Semi-transparent background layer */

package/scss/animated-header.scss

@@ -7,5 +7,6 @@
 
 @use 'AnimatedHeader/animated-header.scss';
 @use 'HeaderTitle/header-title.scss';
+@use 'Tiles/AITile/ai-tile.scss';
 @use 'Tiles/AIPromptTile/ai-prompt-tile.scss';
 @use 'Tiles/GlassTile/glass-tile.scss';