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

package/package.json

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

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/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';