@carbon-labs/react-animated-header 0.8.0 → 0.9.0

package/es/__stories__/AnimatedHeader.stories.d.ts

@@ -8243,13 +8243,13 @@ export declare const ThemeG10: {
                 type: string;
                 labels: {
                     0: string;
-                    1: any;
-                    2: any;
-                    3: any;
-                    4: any;
-                    5: any;
-                    6: any;
-                    7: any;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                    5: string;
+                    6: string;
+                    7: string;
                 };
             };
             options: number[];
@@ -16840,13 +16840,13 @@ export declare const ThemeG100: {
                 type: string;
                 labels: {
                     0: string;
-                    1: any;
-                    2: any;
-                    3: any;
-                    4: any;
-                    5: any;
-                    6: any;
-                    7: any;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                    5: string;
+                    6: string;
+                    7: string;
                 };
             };
             options: number[];

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+export { _extends as extends };

package/es/components/AnimatedHeader/AnimatedHeader.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ButtonKind } from '@carbon/react';
 /** Animated Header */
 export interface TasksConfig {
@@ -34,8 +34,10 @@ export interface AnimatedHeaderProps {
     allTiles: TileGroup[];
     allWorkspaces?: SelectedWorkspace[];
     description?: string;
-    handleHeaderItemsToString: (item: TileGroup | null) => string;
-    handleWorkspaceItemsToString: (item: SelectedWorkspace | null) => string;
+    handleHeaderItemsToString?: (item: TileGroup | null) => string;
+    renderHeaderSelectedItem?: (item: TileGroup | null) => ReactNode;
+    handleWorkspaceItemsToString?: (item: SelectedWorkspace | null) => string;
+    renderWorkspaceSelectedItem?: (item: SelectedWorkspace | null) => ReactNode;
     headerAnimation?: object;
     headerStatic?: React.JSX.Element;
     productName?: string;

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React, { useRef, useState, useEffect } from 'react';
 import { Grid, Column, Tooltip, Button, Dropdown } from '@carbon/react';
@@ -25,6 +26,8 @@ const AnimatedHeader = _ref => {
     headerAnimation,
     headerStatic,
     productName = '[Product name]',
+    renderHeaderSelectedItem,
+    renderWorkspaceSelectedItem,
     selectedTileGroup,
     selectedWorkspace,
     setSelectedTileGroup,
@@ -102,7 +105,7 @@ const AnimatedHeader = _ref => {
     className: `${blockClass}__lottie-animation--container`
   }, /*#__PURE__*/React.createElement("div", {
     ref: animationContainer,
-    className: `${blockClass}__lottie-animation ${!open && lottieCollapsed}`
+    className: `${blockClass}__lottie-animation${!open ? ` ${lottieCollapsed}` : ''}`
   })), /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
@@ -120,7 +123,7 @@ const AnimatedHeader = _ref => {
     sm: 4,
     md: 8,
     lg: 4,
-    className: `${blockClass}__left-area-container ${!open && descriptionCollapsed}`
+    className: `${blockClass}__left-area-container${!open ? ` ${descriptionCollapsed}` : ''}`
   }, description && /*#__PURE__*/React.createElement("h2", {
     className: `${blockClass}__description`
   }, description), tasksConfig?.button?.text && /*#__PURE__*/React.createElement(Button, {
@@ -130,7 +133,7 @@ const AnimatedHeader = _ref => {
     href: tasksConfig.button.href
   }, tasksConfig.button.text), !tasksConfig?.button?.text && tasksConfig && tasksConfig.type === 'dropdown' && allTiles && /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__header-dropdown--container`
-  }, /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
     id: `${blockClass}__header-dropdown`,
     className: `${blockClass}__header-dropdown`,
     size: "md",
@@ -139,16 +142,19 @@ const AnimatedHeader = _ref => {
     hideLabel: true,
     type: "inline",
     items: allTiles,
-    itemToString: item => handleHeaderItemsToString(item),
     onChange: e => setSelectedTileGroup(e)
-  }))), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
+  }, handleHeaderItemsToString ? {
+    itemToString: handleHeaderItemsToString
+  } : {}, renderHeaderSelectedItem ? {
+    renderSelectedItem: renderHeaderSelectedItem
+  } : {})))), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 12,
     className: `${blockClass}__content`
   }, allWorkspaces && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__workspace--container ${!open && contentCollapsed}`
-  }, /*#__PURE__*/React.createElement(Dropdown, {
+    className: `${blockClass}__workspace--container${!open ? ` ${contentCollapsed}` : ''}`
+  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
     id: `${blockClass}__workspace`,
     className: `${blockClass}__workspace`,
     size: "sm",
@@ -157,9 +163,12 @@ const AnimatedHeader = _ref => {
     hideLabel: true,
     type: "inline",
     items: allWorkspaces,
-    itemToString: item => handleWorkspaceItemsToString(item),
     onChange: e => setSelectedWorkspace(e)
-  })), /*#__PURE__*/React.createElement("div", {
+  }, handleWorkspaceItemsToString ? {
+    itemToString: handleWorkspaceItemsToString
+  } : {}, renderWorkspaceSelectedItem ? {
+    renderSelectedItem: renderWorkspaceSelectedItem
+  } : {}))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tiles-container`
   }, selectedTileGroup.tiles.map(tile => {
     return /*#__PURE__*/React.createElement(BaseTile, {
@@ -230,6 +239,18 @@ AnimatedHeader.propTypes = {
    * Provide current product name
    */
   productName: PropTypes.string,
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * selected item to as an arbitrary ReactNode. By default it uses standard Carbon renderer that renders only item.label text
+   * (Dropdown under description in header)
+   */
+  renderHeaderSelectedItem: PropTypes.func,
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * selected item to as an arbitrary ReactNode. By default it uses standard Carbon renderer that renders only item.label text
+   * (Dropdown related to workspace selection)
+   */
+  renderWorkspaceSelectedItem: PropTypes.func,
   /**
    * The tile group that is active in the header
    * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.

package/es/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -50,8 +50,12 @@ const AIPromptTile = _ref => {
     className: `${prefix}--animated-header__tile ${blockClass}`,
     key: id
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body ${!open && collapsed}`
+    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body-background`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body-gradient`
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--icons`
   }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
     fill: `var(--cds-icon-secondary)`,

package/es/components/Tiles/GlassTile/GlassTile.js

@@ -32,8 +32,10 @@ const GlassTile = _ref => {
     key: id,
     href: href
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body ${!open && collapsed}`
+    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body-background`
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--icons`
   }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
     fill: `var(--cds-icon-secondary)`,

package/lib/__stories__/AnimatedHeader.stories.d.ts

@@ -8243,13 +8243,13 @@ export declare const ThemeG10: {
                 type: string;
                 labels: {
                     0: string;
-                    1: any;
-                    2: any;
-                    3: any;
-                    4: any;
-                    5: any;
-                    6: any;
-                    7: any;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                    5: string;
+                    6: string;
+                    7: string;
                 };
             };
             options: number[];
@@ -16840,13 +16840,13 @@ export declare const ThemeG100: {
                 type: string;
                 labels: {
                     0: string;
-                    1: any;
-                    2: any;
-                    3: any;
-                    4: any;
-                    5: any;
-                    6: any;
-                    7: any;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                    5: string;
+                    6: string;
+                    7: string;
                 };
             };
             options: number[];

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 strict';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+exports.extends = _extends;

package/lib/components/AnimatedHeader/AnimatedHeader.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ButtonKind } from '@carbon/react';
 /** Animated Header */
 export interface TasksConfig {
@@ -34,8 +34,10 @@ export interface AnimatedHeaderProps {
     allTiles: TileGroup[];
     allWorkspaces?: SelectedWorkspace[];
     description?: string;
-    handleHeaderItemsToString: (item: TileGroup | null) => string;
-    handleWorkspaceItemsToString: (item: SelectedWorkspace | null) => string;
+    handleHeaderItemsToString?: (item: TileGroup | null) => string;
+    renderHeaderSelectedItem?: (item: TileGroup | null) => ReactNode;
+    handleWorkspaceItemsToString?: (item: SelectedWorkspace | null) => string;
+    renderWorkspaceSelectedItem?: (item: SelectedWorkspace | null) => ReactNode;
     headerAnimation?: object;
     headerStatic?: React.JSX.Element;
     productName?: string;

package/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var react = require('@carbon/react');
@@ -29,6 +30,8 @@ const AnimatedHeader = _ref => {
     headerAnimation,
     headerStatic,
     productName = '[Product name]',
+    renderHeaderSelectedItem,
+    renderWorkspaceSelectedItem,
     selectedTileGroup,
     selectedWorkspace,
     setSelectedTileGroup,
@@ -106,7 +109,7 @@ const AnimatedHeader = _ref => {
     className: `${blockClass}__lottie-animation--container`
   }, /*#__PURE__*/React.createElement("div", {
     ref: animationContainer,
-    className: `${blockClass}__lottie-animation ${!open && lottieCollapsed}`
+    className: `${blockClass}__lottie-animation${!open ? ` ${lottieCollapsed}` : ''}`
   })), /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
     md: 8,
@@ -124,7 +127,7 @@ const AnimatedHeader = _ref => {
     sm: 4,
     md: 8,
     lg: 4,
-    className: `${blockClass}__left-area-container ${!open && descriptionCollapsed}`
+    className: `${blockClass}__left-area-container${!open ? ` ${descriptionCollapsed}` : ''}`
   }, description && /*#__PURE__*/React.createElement("h2", {
     className: `${blockClass}__description`
   }, description), tasksConfig?.button?.text && /*#__PURE__*/React.createElement(react.Button, {
@@ -134,7 +137,7 @@ const AnimatedHeader = _ref => {
     href: tasksConfig.button.href
   }, tasksConfig.button.text), !tasksConfig?.button?.text && tasksConfig && tasksConfig.type === 'dropdown' && allTiles && /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__header-dropdown--container`
-  }, /*#__PURE__*/React.createElement(react.Dropdown, {
+  }, /*#__PURE__*/React.createElement(react.Dropdown, _rollupPluginBabelHelpers.extends({
     id: `${blockClass}__header-dropdown`,
     className: `${blockClass}__header-dropdown`,
     size: "md",
@@ -143,16 +146,19 @@ const AnimatedHeader = _ref => {
     hideLabel: true,
     type: "inline",
     items: allTiles,
-    itemToString: item => handleHeaderItemsToString(item),
     onChange: e => setSelectedTileGroup(e)
-  }))), selectedTileGroup && /*#__PURE__*/React.createElement(react.Column, {
+  }, handleHeaderItemsToString ? {
+    itemToString: handleHeaderItemsToString
+  } : {}, renderHeaderSelectedItem ? {
+    renderSelectedItem: renderHeaderSelectedItem
+  } : {})))), selectedTileGroup && /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
     md: 8,
     lg: 12,
     className: `${blockClass}__content`
   }, allWorkspaces && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__workspace--container ${!open && contentCollapsed}`
-  }, /*#__PURE__*/React.createElement(react.Dropdown, {
+    className: `${blockClass}__workspace--container${!open ? ` ${contentCollapsed}` : ''}`
+  }, /*#__PURE__*/React.createElement(react.Dropdown, _rollupPluginBabelHelpers.extends({
     id: `${blockClass}__workspace`,
     className: `${blockClass}__workspace`,
     size: "sm",
@@ -161,9 +167,12 @@ const AnimatedHeader = _ref => {
     hideLabel: true,
     type: "inline",
     items: allWorkspaces,
-    itemToString: item => handleWorkspaceItemsToString(item),
     onChange: e => setSelectedWorkspace(e)
-  })), /*#__PURE__*/React.createElement("div", {
+  }, handleWorkspaceItemsToString ? {
+    itemToString: handleWorkspaceItemsToString
+  } : {}, renderWorkspaceSelectedItem ? {
+    renderSelectedItem: renderWorkspaceSelectedItem
+  } : {}))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tiles-container`
   }, selectedTileGroup.tiles.map(tile => {
     return /*#__PURE__*/React.createElement(BaseTile.BaseTile, {
@@ -234,6 +243,18 @@ AnimatedHeader.propTypes = {
    * Provide current product name
    */
   productName: PropTypes.string,
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * selected item to as an arbitrary ReactNode. By default it uses standard Carbon renderer that renders only item.label text
+   * (Dropdown under description in header)
+   */
+  renderHeaderSelectedItem: PropTypes.func,
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * selected item to as an arbitrary ReactNode. By default it uses standard Carbon renderer that renders only item.label text
+   * (Dropdown related to workspace selection)
+   */
+  renderWorkspaceSelectedItem: PropTypes.func,
   /**
    * The tile group that is active in the header
    * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.

package/lib/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -52,8 +52,12 @@ const AIPromptTile = _ref => {
     className: `${prefix}--animated-header__tile ${blockClass}`,
     key: id
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body ${!open && collapsed}`
+    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body-background`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body-gradient`
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--icons`
   }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
     fill: `var(--cds-icon-secondary)`,

package/lib/components/Tiles/GlassTile/GlassTile.js

@@ -34,8 +34,10 @@ const GlassTile = _ref => {
     key: id,
     href: href
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body ${!open && collapsed}`
+    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body-background`
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--icons`
   }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
     fill: `var(--cds-icon-secondary)`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -36,5 +36,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "024cddd160713ecd5e40c79868a9bf75b3234316"
+  "gitHead": "c610e01c130ef513bb64286934496f86d2c8091d"
 }

package/scss/AnimatedHeader/animated-header.scss

@@ -65,14 +65,7 @@ body {
   overflow: hidden;
   justify-content: flex-end;
 
-  block-size: 100%;
-
-  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   block-size: fill-available;
-
-  inline-size: 100%;
-
-  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   inline-size: fill-available;
 
   max-inline-size: 96rem;
@@ -102,14 +95,7 @@ body {
   position: absolute;
   z-index: 1;
 
-  block-size: 100%;
-
-  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   block-size: fill-available;
-
-  inline-size: 100%;
-
-  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   inline-size: fill-available;
 
   margin-inline: auto;
@@ -232,7 +218,7 @@ body {
 
 .#{$prefix}__header-dropdown--container {
   inline-size: auto;
-  max-inline-size: 30rem;
+  max-inline-size: 18rem;
 }
 
 .#{$prefix}__header-dropdown {
@@ -304,19 +290,22 @@ body {
   overflow: hidden;
   justify-content: flex-end;
 
-  block-size: 100%;
-
-  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   block-size: fill-available;
-
-  inline-size: 100%;
-
-  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   inline-size: fill-available;
 
   max-inline-size: 96rem;
 }
 
+/* support for Safari */
+@supports (font: -apple-system-body) and (-webkit-appearance: none) {
+  .#{$prefix}__gradient--overlay,
+  .#{$prefix}__static--container,
+  .#{$prefix}__lottie-animation--container {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+}
+
 .#{$prefix}__lottie-animation {
   position: absolute;
   z-index: 0;
@@ -608,9 +597,9 @@ body {
 }
 
 /*
-  If the user has expressed their preference for
-  reduced motion, then don't use animations
-*/
+   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

@@ -31,7 +31,9 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
 
 .#{$prefix}--body {
   position: relative;
+  z-index: 0;
   display: flex;
+  overflow: hidden;
   flex: 1;
   flex-direction: column;
   justify-content: flex-start;
@@ -42,14 +44,25 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   transition: opacity 500ms linear;
 }
 
-:root .#{$prefix}--body::before,
-[data-carbon-theme='white'] .#{$prefix}--body::before,
-[data-carbon-theme='g10'] .#{$prefix}--body::before {
+/* 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::before,
-[data-carbon-theme='g100'] .#{$prefix}--body::before {
+[data-carbon-theme='g90'] .#{$prefix}--body-background,
+[data-carbon-theme='g100'] .#{$prefix}--body-background {
   background-color: $layer-hover-01;
 }
 
@@ -57,27 +70,32 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   opacity: 0;
 }
 
-.#{$prefix}--body::before {
+/* 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;
-  content: '';
   inset: 0;
   opacity: 0.7;
   pointer-events: none;
   transition: opacity 150ms motion.motion(standard, productive);
 }
 
-.#{$prefix}--body:hover::before {
-  opacity: 0.85;
+.#{$prefix}--body:hover {
+  .#{$prefix}--body-gradient,
+  .#{$prefix}--body-background {
+    opacity: 0.85;
+  }
 }
 
-.#{$prefix}--body:after {
+.#{$prefix}--body::after {
   position: absolute;
+  z-index: 3;
   border: 1px solid transparent;
   animation: 1000ms motion.motion(standard, expressive) animate-border;
   animation-delay: 466.666ms;
@@ -86,9 +104,6 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   background-size: 100% 150%;
   content: '';
   inset: 0;
-  inset-block-end: 0;
-  inset-inline: 0;
-  inset-inline-start: 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);
@@ -98,7 +113,7 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
 
 .#{$prefix}--icons {
   position: relative;
-  z-index: 3;
+  z-index: 4;
   display: flex;
   justify-content: space-between;
   margin-block-end: $spacing-05;
@@ -108,7 +123,7 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   @include type-style('body-compact-02');
 
   position: relative;
-  z-index: 3;
+  z-index: 4;
 
   overflow: hidden;
   text-overflow: ellipsis;
@@ -125,7 +140,7 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
 }
 
 .#{$prefix}--footer {
-  z-index: 3;
+  z-index: 4;
   display: flex;
   justify-content: flex-end;
   margin-block: $spacing-03 calc(-1 * $spacing-05);
@@ -144,7 +159,7 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
 }
 
 .#{$prefix}--text-input-container {
-  z-index: 3;
+  z-index: 4;
   display: flex;
   align-items: center;
   border: 1px solid $border-subtle-01;

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

@@ -31,7 +31,9 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
 
 .#{$prefix}--body {
   position: relative;
+  z-index: 0;
   display: flex;
+  overflow: hidden;
   flex: 1;
   flex-direction: column;
   justify-content: flex-start;
@@ -43,39 +45,41 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   transition: opacity 500ms linear;
 }
 
-.#{$prefix}--collapsed {
-  opacity: 0;
+/* 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::before,
-[data-carbon-theme='white'] .#{$prefix}--body::before,
-[data-carbon-theme='g10'] .#{$prefix}--body::before {
+: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::before,
-[data-carbon-theme='g100'] .#{$prefix}--body::before {
+[data-carbon-theme='g90'] .#{$prefix}--body-background,
+[data-carbon-theme='g100'] .#{$prefix}--body-background {
   background-color: $layer-hover-01;
 }
 
-.#{$prefix}--body::before {
-  position: absolute;
-  content: '';
-  inset: 0;
-  opacity: 0.7;
-  pointer-events: none;
-  transition: opacity 150ms motion.motion(standard, productive);
+.#{$prefix}--collapsed {
+  opacity: 0;
 }
 
-.#{$prefix}--body:hover::before {
+.#{$prefix}--body:hover .#{$prefix}--body-background {
   opacity: 0.85;
 }
 
 .#{$prefix}--icons {
   position: relative;
+  z-index: 2;
   display: flex;
   justify-content: space-between;
-
   margin-block-end: $spacing-05;
 }
 
@@ -83,6 +87,7 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   @include type-style('body-compact-02');
 
   position: relative;
+  z-index: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -99,7 +104,7 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
 
 .#{$prefix}--footer {
   position: absolute;
-  z-index: 3;
+  z-index: 2;
   display: flex;
   gap: $spacing-05;
   inset-block-end: $spacing-05;
@@ -109,6 +114,7 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   @include type-style('body-short-01');
 
   position: relative;
+  z-index: 2;
   overflow: hidden;
   color: $text-secondary;
   text-overflow: ellipsis;