@harnessio/ui 0.5.39 → 0.5.40

package/dist/tailwind.config.js

@@ -100,7 +100,9 @@ const W = {
       "&-container": {
         marginTop: "-4px",
         paddingTop: "4px",
-        overflow: "hidden",
+        // 'clip' instead of 'hidden' — clips during height animation but doesn't
+        // create a scroll container, allowing position:sticky inside accordions
+        overflow: "clip",
         "&-card": {
           "&-sm": {
             paddingInline: "var(--cn-card-sm-px)"
@@ -113,15 +115,22 @@ const W = {
           }
         },
         '&:where([data-state="open"])': {
-          "@apply animate-accordion-down": ""
+          // Delays overflow:visible until after height animation completes,
+          // so content is clipped during expand but can bleed (e.g. sticky headers) when open
+          animation: "accordion-down 0.2s ease-out, accordion-overflow 0s 0.2s forwards"
         },
         '&:where([data-state="closed"])': {
           "@apply animate-accordion-up": ""
         }
       }
     }
+  },
+  "@keyframes accordion-overflow": {
+    to: {
+      overflow: "visible"
+    }
   }
-}, B = ["info", "danger", "warning", "success"], H = {
+}, B = ["info", "danger", "warning", "success"], L = {
   info: {
     backgroundColor: "gray-secondary",
     color: "text-cn-2",
@@ -143,10 +152,10 @@ const W = {
     fadeBgColor: "success"
   }
 };
-function L() {
+function H() {
   const r = {};
   return B.forEach((e) => {
-    const n = {}, { backgroundColor: o, color: a, fadeBgColor: t } = H[e];
+    const n = {}, { backgroundColor: o, color: a, fadeBgColor: t } = L[e];
     n.backgroundColor = `var(--cn-set-${o}-bg)`, n["> .cn-alert-icon"] = {
       color: `var(--cn-${a})`
     }, n[" .cn-alert-fade-overlay"] = {
@@ -243,7 +252,7 @@ const A = {
     "&-link-wrapper": {
       paddingTop: "var(--cn-spacing-1)"
     },
-    ...L()
+    ...H()
   }
 }, D = ["md", "sm", "lg", "xs"];
 function E() {
@@ -2611,7 +2620,7 @@ const Te = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, He = {
+}, Le = {
   ".cn-reasoning": {
     marginBottom: "var(--cn-spacing-4)"
   },
@@ -2664,7 +2673,7 @@ const Te = {
       opacity: "0"
     }
   }
-}, Le = {
+}, He = {
   ".cn-repo": {
     "&-header": {
       paddingTop: "var(--cn-page-container-spacing-py)",
@@ -3776,6 +3785,23 @@ const Je = {
     "&-content": {
       "@apply relative": ""
     }
+  },
+  // Contained mode: for sticky lists nested inside non-drawer containers (e.g. form inputs).
+  // Set --cn-sticky-container-padding on an ancestor to control how far the header bleeds.
+  ".cn-sticky-list-section-contained": {
+    "--cn-sticky-container": "var(--cn-sticky-container-padding, 0px)"
+  },
+  ".cn-sticky-list-section-contained .cn-sticky-list-section-header": {
+    top: "0",
+    backgroundColor: "transparent",
+    marginLeft: "calc(-1 * var(--cn-sticky-container))",
+    marginRight: "calc(-1 * var(--cn-sticky-container))",
+    paddingLeft: "var(--cn-sticky-container)",
+    paddingRight: "var(--cn-sticky-container)",
+    paddingTop: "0"
+  },
+  ".cn-sticky-list-section-contained .cn-sticky-list-section-header-stuck": {
+    backgroundColor: "var(--cn-sticky-header-bg, var(--cn-bg-1))"
   }
 }, $ = ".cn-studio-card-header, .cn-studio-card-message, .cn-studio-card-footer, .cn-studio-card-content > .cn-studio-card-expand-button, .cn-studio-card-content > .cn-studio-card-button, .cn-studio-card-tag, .cn-studio-card-status", f = {
   [$]: {
@@ -5106,7 +5132,7 @@ const pr = {
   Q,
   or,
   ae,
-  Le,
+  He,
   Ae,
   De,
   Ce,
@@ -5128,7 +5154,7 @@ const pr = {
   yr,
   xe,
   me,
-  He,
+  Le,
   _e,
   Qe,
   // Form styles