@harnessio/ui 0.5.38 → 0.5.40

package/dist/tailwind.config.js

@@ -1,6 +1,6 @@
-import { p as R, t as I } from "./tailwind-design-system-D9j_K4lL.js";
-import { F as S, C as l } from "./form-constants-CdD106iI.js";
-const T = {
+import { p as I, t as T } from "./tailwind-design-system-D9j_K4lL.js";
+import { F as z, C as l } from "./form-constants-CdD106iI.js";
+const W = {
   ".cn-accordion": {
     display: "flex",
     flexDirection: "column",
@@ -27,7 +27,7 @@ const T = {
         "@apply font-heading-base": ""
       },
       "&.cn-accordion-card": {
-        [`@apply ${S}`]: ""
+        [`@apply ${z}`]: ""
       }
     },
     "&-item": {
@@ -100,7 +100,9 @@ const T = {
       "&-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 T = {
           }
         },
         '&: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"
+    }
   }
-}, W = ["info", "danger", "warning", "success"], B = {
+}, B = ["info", "danger", "warning", "success"], L = {
   info: {
     backgroundColor: "gray-secondary",
     color: "text-cn-2",
@@ -145,8 +154,8 @@ const T = {
 };
 function H() {
   const r = {};
-  return W.forEach((e) => {
-    const n = {}, { backgroundColor: o, color: a, fadeBgColor: t } = B[e];
+  return B.forEach((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"] = {
@@ -154,7 +163,7 @@ function H() {
     }, r[`&:where(.cn-alert-${e})`] = n;
   }), r;
 }
-const L = {
+const A = {
   ".cn-alert": {
     gap: "var(--cn-alert-gap)",
     paddingTop: "var(--cn-alert-py)",
@@ -245,10 +254,10 @@ const L = {
     },
     ...H()
   }
-}, A = ["md", "sm", "lg", "xs"];
-function D() {
+}, D = ["md", "sm", "lg", "xs"];
+function E() {
   const r = {};
-  return A.forEach((e) => {
+  return D.forEach((e) => {
     e === "xs" ? r[`&:where(.cn-avatar-${e})`] = {
       height: `var(--cn-avatar-size-${e})`,
       width: `var(--cn-avatar-size-${e})`,
@@ -263,7 +272,7 @@ function D() {
     };
   }), r;
 }
-const E = {
+const j = {
   ".cn-avatar": {
     display: "inline-flex",
     alignItems: "center",
@@ -274,7 +283,7 @@ const E = {
     boxShadow: "var(--cn-comp-shadow-avatar-inner)",
     letterSpacing: "var(--cn-tracking-tight)",
     "@apply shrink-0": "",
-    ...D(),
+    ...E(),
     "&:where(.cn-avatar-rounded)": {
       borderRadius: "var(--cn-avatar-radius-rounded)"
     },
@@ -298,7 +307,7 @@ const E = {
     // Avatar xs → Icon xs, Avatar sm → Icon sm, Avatar md → Icon sm, Avatar lg → Icon md
     ".cn-avatar-icon": {}
   }
-}, j = ["primary", "secondary", "outline", "status", "ghost"], P = ["success", "info", "warning", "danger", "muted", "merged", "risk"], O = {
+}, P = ["primary", "secondary", "outline", "status", "ghost"], O = ["success", "info", "warning", "danger", "muted", "merged", "risk"], _ = {
   success: "success",
   info: "blue",
   warning: "warning",
@@ -307,18 +316,18 @@ const E = {
   merged: "purple",
   risk: "orange"
 };
-function _() {
+function X() {
   const r = {}, e = {};
-  return j.forEach((n) => {
-    P.forEach((o) => {
-      const a = {}, t = O[o];
+  return P.forEach((n) => {
+    O.forEach((o) => {
+      const a = {}, t = _[o];
       n === "ghost" ? (a.color = `var(--cn-set-${t}-outline-text)`, r[`&:where(.cn-badge-${n}.cn-badge-${o})`] = a) : n !== "status" ? (a.backgroundColor = `var(--cn-set-${t}-${n}-bg)`, a.color = `var(--cn-set-${t}-${n}-text)`, a.borderColor = `var(--cn-set-${t}-${n}-border, var(--cn-set-${t}-${n}-bg))`, r[`&:where(.cn-badge-${n}.cn-badge-${o})`] = a) : e[`&.cn-badge-status.cn-badge-${o} > .cn-badge-indicator`] = {
         backgroundColor: `var(--cn-set-${t}-primary-bg)`
       };
     });
   }), { ...r, ...e };
 }
-const X = {
+const F = {
   ".cn-badge": {
     paddingBlock: "var(--cn-badge-md-py)",
     paddingInline: "var(--cn-badge-md-px)",
@@ -371,9 +380,9 @@ const X = {
       }
     },
     /** Variants */
-    ..._()
+    ...X()
   }
-}, F = {
+}, V = {
   ".cn-breadcrumb": {
     "@apply flex flex-wrap items-center break-words select-none": "",
     gap: "var(--cn-spacing-1)"
@@ -476,23 +485,23 @@ const X = {
       color: "var(--cn-text-1)"
     }
   }
-}, V = ["primary", "secondary", "outline", "ghost"], Y = ["success", "danger", "default"], G = ["3xs", "2xs", "xs", "sm", "md"], v = "0.99", s = "150ms", p = "ease-in-out", N = {
+}, Y = ["primary", "secondary", "outline", "ghost"], G = ["success", "danger", "default"], N = ["3xs", "2xs", "xs", "sm", "md"], u = "0.99", s = "150ms", p = "ease-in-out", M = {
   success: "success",
   danger: "danger",
   default: "gray"
 };
-function M() {
+function U() {
   const r = {}, e = {};
-  return V.forEach((n) => {
-    Y.forEach((o) => {
-      const a = {}, t = N[o];
+  return Y.forEach((n) => {
+    G.forEach((o) => {
+      const a = {}, t = M[o];
       if (n === "ghost") {
         a.color = `var(--cn-set-${t}-outline-text)`;
-        const c = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-hover)`, $ = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-selected)`;
+        const c = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-hover)`, R = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-selected)`;
         a["&:hover:not(:disabled, .cn-button-disabled)"] = {
           backgroundColor: c
         }, a["&:active:not(:disabled, .cn-button-disabled), &:where(.cn-button-active), &:where([data-state=open])"] = {
-          backgroundColor: $
+          backgroundColor: R
         };
       } else {
         const c = n === "primary" && o === "default" ? "brand" : t;
@@ -521,9 +530,9 @@ function M() {
     });
   }), { ...r, ...e };
 }
-function U() {
+function K() {
   const r = {};
-  return G.forEach((e) => {
+  return N.forEach((e) => {
     r[`&:where(.cn-button-${e})`] = {
       height: `var(--cn-btn-size-${e})`,
       paddingBlock: `var(--cn-btn-py-${e})`,
@@ -532,7 +541,7 @@ function U() {
     };
   }), r;
 }
-const K = {
+const q = {
   ".cn-button": {
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke, transform, box-shadow, opacity",
     transitionDuration: s,
@@ -548,7 +557,7 @@ const K = {
     border: "var(--cn-btn-border) solid var(--cn-set-gray-outline-border)",
     "@apply font-body-single-line-normal select-none overflow-hidden inline-flex items-center justify-center whitespace-nowrap": "",
     "&:active:not(:disabled, .cn-button-disabled, .cn-button-split-dropdown)": {
-      transform: `scale(${v})`
+      transform: `scale(${u})`
     },
     "&:where(.cn-button-split-dropdown)": {
       height: "var(--cn-btn-size-md)",
@@ -564,7 +573,7 @@ const K = {
       }
     },
     // sizes
-    ...U(),
+    ...K(),
     "&:where(.cn-button-xs, .cn-button-3xs, .cn-button-2xs)": {
       "@apply font-caption-single-line-normal": ""
     },
@@ -610,7 +619,7 @@ const K = {
       }
     },
     // variant styles
-    ...M(),
+    ...U(),
     // Rounded
     "&:where(.cn-button-rounded)": {
       borderRadius: "var(--cn-btn-rounded-radius)"
@@ -724,10 +733,10 @@ const K = {
       transform: "none !important"
     },
     "&:has(> .cn-button:active)": {
-      transform: `scale(${v})`
+      transform: `scale(${u})`
     }
   }
-}, q = {
+}, J = {
   ".cn-button-group": {
     "@apply flex": "",
     "&-horizontal": {
@@ -768,7 +777,7 @@ const K = {
       }
     }
   }
-}, J = {
+}, Q = {
   ".cn-button-layout": {
     gap: "var(--cn-layout-sm)",
     "@apply flex": "",
@@ -808,7 +817,7 @@ const K = {
       "@apply flex": ""
     }
   }
-}, Q = {
+}, Z = {
   ".cn-caption": {
     gap: "var(--cn-spacing-1)",
     "@apply w-full inline-flex items-start": ""
@@ -816,7 +825,7 @@ const K = {
   ":where([disabled]) + .cn-caption": {
     "@apply opacity-cn-disabled": ""
   }
-}, Z = {
+}, ee = {
   ".cn-card": {
     border: "var(--cn-card-border) solid var(--cn-border-2)",
     borderRadius: "var(--cn-card-md-radius)",
@@ -901,7 +910,7 @@ const K = {
       "@apply outline-offset-cn-tight": ""
     }
   }
-}, ee = {
+}, re = {
   ".cn-card-select-root": {
     display: "grid",
     "&:where(.cn-card-select-horizontal)": {
@@ -977,7 +986,7 @@ const K = {
   ".cn-card-select-hidden-input": {
     "@apply sr-only": ""
   }
-}, re = {
+}, ne = {
   ".cn-checkbox-wrapper": {
     display: "flex",
     gap: "var(--cn-spacing-2-half)",
@@ -1106,7 +1115,7 @@ const K = {
     },
     "@apply truncate": ""
   }
-}, ne = {
+}, ae = {
   ".cn-modal-dialog-overlay": {
     backgroundColor: "var(--cn-comp-dialog-backdrop)",
     padding: "var(--cn-dialog-safezone)",
@@ -1275,7 +1284,7 @@ const K = {
       opacity: "0"
     }
   }
-}, ae = {
+}, oe = {
   ".cn-drawer": {
     "&-content": {
       userSelect: "auto !important",
@@ -1680,7 +1689,7 @@ const K = {
       }
     }
   }
-}, oe = [
+}, te = [
   "gray",
   "green",
   "red",
@@ -1695,14 +1704,14 @@ const K = {
   "orange",
   "pink",
   "violet"
-], te = () => {
+], ce = () => {
   const r = {};
-  return oe.forEach((e) => {
+  return te.forEach((e) => {
     r[`&.cn-dropdown-menu-item-indicator-${e}`] = {
       backgroundColor: `var(--cn-set-${e}-solid-bg)`
     };
   }), r;
-}, ce = {
+}, ie = {
   ".cn-dropdown-menu": {
     zIndex: "50",
     minWidth: "var(--cn-dropdown-min-width)",
@@ -1780,7 +1789,7 @@ const K = {
         height: "var(--cn-badge-indicator-size-sm)",
         borderRadius: "var(--cn-rounded-full)",
         flexShrink: "0",
-        ...te()
+        ...ce()
       }
     },
     "&-group-label": {
@@ -1808,9 +1817,9 @@ const K = {
       padding: "calc(var(--cn-dropdown-item-py) + var(--cn-spacing-4)) var(--cn-dropdown-item-px)"
     }
   }
-}, ie = {
+}, de = {
   ".cn-form": {
-    [`@apply flex flex-col ${S}`]: ""
+    [`@apply flex flex-col ${z}`]: ""
   },
   ":where(.cn-control-group)": {
     [`@apply relative flex flex-col ${l}`]: "",
@@ -1832,15 +1841,15 @@ const K = {
   ":where(.cn-control-group-input)": {
     [`@apply relative flex flex-col ${l}`]: ""
   }
-}, de = ["2xs", "xs", "sm", "md", "lg", "xl"], le = ["xs", "sm", "md", "lg"];
+}, le = ["2xs", "xs", "sm", "md", "lg", "xl"], se = ["xs", "sm", "md", "lg"];
 function b(r) {
-  const e = r === "icon" ? de : le, n = r === "symbol" ? "logo" : r, o = {};
+  const e = r === "icon" ? le : se, n = r === "symbol" ? "logo" : r, o = {};
   return e.forEach((a) => {
     const t = {};
     t.width = `var(--cn-${n}-size-${a})`, t["min-width"] = `var(--cn-${n}-size-${a})`, t.height = `var(--cn-${n}-size-${a})`, t["min-height"] = `var(--cn-${n}-size-${a})`, r === "icon" && (t["stroke-width"] = `var(--cn-icon-stroke-width-${a})`), o[`&:where(.cn-${r}-${a})`] = t;
   }), o;
 }
-const se = {
+const pe = {
   ".cn-icon": {
     ...b("icon")
   },
@@ -1850,10 +1859,10 @@ const se = {
   ".cn-symbol": {
     ...b("symbol")
   }
-}, pe = ["danger", "warning", "success"];
-function be() {
+}, be = ["danger", "warning", "success"];
+function ge() {
   const r = {};
-  return pe.forEach((e) => {
+  return be.forEach((e) => {
     r[`&:where(.cn-input-${e}):not(:has(input[disabled]))`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -1868,7 +1877,7 @@ function be() {
     };
   }), r;
 }
-const ge = {
+const ve = {
   ".cn-input": {
     "&-input": {
       height: "100%",
@@ -1956,7 +1965,7 @@ const ge = {
         "@apply h-full border-0 border-l rounded-l-cn-none": "",
         borderColor: "inherit"
       },
-      ...be()
+      ...ge()
     },
     "&-search": {
       "&:where(.cn-input-input)": {
@@ -1967,7 +1976,7 @@ const ge = {
       }
     }
   }
-}, ve = {
+}, ue = {
   ".cn-label": {
     "@apply font-body-normal": "",
     display: "grid",
@@ -1995,7 +2004,7 @@ const ge = {
       color: "var(--cn-set-danger-secondary-text)"
     }
   }
-}, ue = {
+}, he = {
   ".cn-link": {
     display: "inline-flex",
     alignItems: "center",
@@ -2056,7 +2065,7 @@ const ge = {
       textDecorationLine: "none !important"
     }
   }
-}, he = {
+}, me = {
   ".cn-message-bubble": {
     display: "flex",
     flexDirection: "column",
@@ -2082,7 +2091,7 @@ const ge = {
       gap: "var(--cn-spacing-1)"
     }
   }
-}, me = {
+}, xe = {
   ".cn-meter": {
     "@apply flex h-[19px] items-stretch gap-cn-3xs": "",
     "&:has(.cn-meter-tooltip-bar:hover) .cn-meter-bar:not(:hover)": {
@@ -2096,10 +2105,10 @@ const ge = {
       transition: "all 0.15s"
     }
   }
-}, xe = ["danger", "warning"];
-function ye() {
+}, ye = ["danger", "warning"];
+function fe() {
   const r = {};
-  return xe.forEach((e) => {
+  return ye.forEach((e) => {
     r[`&:where(.cn-multi-select-${e}):not(:has(input[disabled]))`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -2114,7 +2123,7 @@ function ye() {
     };
   }), r;
 }
-const fe = {
+const we = {
   ".cn-multi-select": {
     "&-outer-container": {
       "@apply flex flex-col gap-cn-xs": ""
@@ -2134,7 +2143,7 @@ const fe = {
       "&:where(:hover):not(:has(input[disabled]))": {
         borderColor: "var(--cn-border-brand)"
       },
-      ...ye()
+      ...fe()
     },
     "&-tag-wrapper": {
       "@apply relative flex flex-wrap items-center gap-cn-xs": ""
@@ -2161,7 +2170,7 @@ const fe = {
       "@apply border rounded-cn-3 shadow-cn-3 mt-cn-3xs overflow-hidden animate-in absolute top-cn-3xs z-[55] w-full outline-none": ""
     }
   }
-}, we = {
+}, ke = {
   ".cn-pagination": {
     "&-root": {
       containerType: "inline-size",
@@ -2201,7 +2210,7 @@ const fe = {
       paddingInline: "var(--cn-pagination-btn-px)"
     }
   }
-}, ke = {
+}, Ce = {
   ".cn-popover": {
     "&-content": {
       display: "grid",
@@ -2285,7 +2294,7 @@ const fe = {
       }
     }
   }
-}, Ce = ["sm", "md", "lg"], Se = ["processing", "completed", "paused", "failed"], i = {
+}, Se = ["sm", "md", "lg"], ze = ["processing", "completed", "paused", "failed"], i = {
   processing: {
     progressBg: "progress",
     color: "text-cn-3"
@@ -2302,25 +2311,25 @@ const fe = {
     progressBg: "danger",
     color: "text-danger"
   }
-}, g = "var(--cn-comp-slider-track-progress-stripes)", ze = `linear-gradient(45deg,
+}, g = "var(--cn-comp-slider-track-progress-stripes)", $e = `linear-gradient(45deg,
   ${g} 18.75%,
   transparent 18.75%,
   transparent 50%,
   ${g} 50%,
   ${g} 68.75%,
   transparent 68.75%,
-  transparent)`, $e = (r) => r === "sm" ? "8px 8px" : r === "lg" ? "32px 32px" : "16px 16px";
-function Re() {
+  transparent)`, Re = (r) => r === "sm" ? "8px 8px" : r === "lg" ? "32px 32px" : "16px 16px";
+function Ie() {
   const r = {};
-  return Ce.forEach((e) => {
+  return Se.forEach((e) => {
     const n = {};
     n[" .cn-progress-root"] = {
       height: `var(--cn-progress-size-${e})`
     }, n[" .cn-progress-processing-fake"] = {
-      "background-size": $e(e),
+      "background-size": Re(e),
       "animation-name": `cnProgressBar-${e}`
     }, r[`&:where(.cn-progress-${e})`] = n;
-  }), Se.forEach((e) => {
+  }), ze.forEach((e) => {
     const n = {};
     n[" .cn-progress-root::-webkit-progress-value"] = {
       "background-color": `var(--cn-comp-slider-track-${i[e].progressBg})`
@@ -2335,7 +2344,7 @@ function Re() {
     }, r[`&:where(.cn-progress-${e})`] = n;
   }), r;
 }
-const Ie = {
+const Te = {
   ".cn-progress": {
     "&-container": {
       position: "relative"
@@ -2420,13 +2429,13 @@ const Ie = {
     },
     "&-processing-fake": {
       "background-color": "var(--cn-comp-slider-track-progress)",
-      "background-image": ze,
+      "background-image": $e,
       "background-size": "16px 16px",
       height: "100%",
       width: "100%",
       animation: "cnProgressBar-md 0.8s linear infinite"
     },
-    ...Re(),
+    ...Ie(),
     "@keyframes cnProgressIndeterminateAnimation": {
       "0%": {
         transform: "translateX(-100%)"
@@ -2460,7 +2469,7 @@ const Ie = {
       }
     }
   }
-}, Te = {
+}, We = {
   "@property --cn-angle": {
     syntax: '"<angle>"',
     inherits: "true",
@@ -2526,7 +2535,7 @@ const Ie = {
       boxShadow: "0 0 3px 0 color-mix(in srgb, var(--cn-gradient-ai-stop-3) 30%, transparent), 0 0 12px 2px color-mix(in srgb, var(--cn-gradient-ai-stop-3) 15%, transparent), 0 0 28px 6px color-mix(in srgb, var(--cn-gradient-ai-stop-3) 8%, transparent)"
     }
   }
-}, We = {
+}, Be = {
   ":where(.cn-radio-control)": {
     [`@apply ${l}`]: ""
   },
@@ -2611,7 +2620,7 @@ const Ie = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, Be = {
+}, Le = {
   ".cn-reasoning": {
     marginBottom: "var(--cn-spacing-4)"
   },
@@ -2679,7 +2688,7 @@ const Ie = {
       }
     }
   }
-}, Le = {
+}, Ae = {
   ".cn-sandbox-layout": {
     "&-content": {
       paddingTop: "var(--cn-page-container-spacing-py)",
@@ -2695,7 +2704,7 @@ const Ie = {
       paddingRight: "var(--cn-page-container-spacing-px)"
     }
   }
-}, Ae = {
+}, De = {
   ".cn-scroll-area": {
     "@apply overflow-auto grid min-w-full": "",
     "&-content": {
@@ -2717,10 +2726,10 @@ const Ie = {
       }
     }
   }
-}, De = ["danger", "warning"], Ee = ["sm"];
-function je() {
+}, Ee = ["danger", "warning"], je = ["sm"];
+function Pe() {
   const r = {};
-  return De.forEach((e) => {
+  return Ee.forEach((e) => {
     r[`&:where(.cn-select-${e}):not(:disabled)`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -2729,7 +2738,7 @@ function je() {
         boxShadow: `var(--cn-ring-${e}-hover)`
       }
     };
-  }), Ee.forEach((e) => {
+  }), je.forEach((e) => {
     r[`&.cn-select-${e}`] = {
       height: `var(--cn-input-size-${e})`
     }, r[`&.cn-select-${e} .cn-select-trigger`] = {
@@ -2737,7 +2746,7 @@ function je() {
     };
   }), r;
 }
-const Pe = {
+const Oe = {
   ".cn-select": {
     display: "flex",
     alignItems: "center",
@@ -2788,9 +2797,9 @@ const Pe = {
       aspectRatio: "1",
       height: "100%"
     },
-    ...je()
+    ...Pe()
   }
-}, Oe = {
+}, _e = {
   ".cn-shimmer": {
     position: "relative",
     display: "inline-block",
@@ -2801,7 +2810,7 @@ const Pe = {
     backgroundImage: "var(--shimmer-highlight), linear-gradient(var(--shimmer-color), var(--shimmer-color))",
     backgroundRepeat: "no-repeat, padding-box"
   }
-}, _e = {
+}, Xe = {
   ".cn-shortcut": {
     "&, &.cn-input-suffix": {
       display: "inline-flex",
@@ -2818,15 +2827,15 @@ const Pe = {
 }, d = (r) => ({
   color: r,
   "& svg, & path": { color: r, stroke: r, fill: "none" }
-}), Xe = {
+}), Fe = {
   ".cn-sidebar-item-content-title": { color: "var(--cn-comp-sidebar-item-text-hover)" },
   ".cn-sidebar-item-content-icon": { color: "var(--cn-comp-sidebar-item-text-hover)" }
-}, u = {
+}, h = {
   ".cn-sidebar-item-content-title": { color: "var(--cn-comp-sidebar-item-text-selected)" },
   ".cn-sidebar-item-content-icon": { color: "var(--cn-comp-sidebar-item-text-selected)" }
-}, h = {
-  "& .cn-sidebar-item-content-icon": { color: "var(--cn-text-1)" }
 }, m = {
+  "& .cn-sidebar-item-content-icon": { color: "var(--cn-text-1)" }
+}, x = {
   ".cn-sidebar-item-content.cn-sidebar-item-content-w-description": {
     ".cn-sidebar-item-content-icon": {
       alignSelf: "stretch",
@@ -2834,7 +2843,7 @@ const Pe = {
       alignItems: "center"
     }
   }
-}, Fe = {
+}, Ve = {
   "& .cn-input-prefix": {
     "@apply ml-0": ""
   },
@@ -2870,7 +2879,7 @@ const Pe = {
       opacity: "0"
     }
   }
-}, Ve = {
+}, Ye = {
   ".cn-sidebar": {
     "&.cn-sidebar": {
       display: "flex",
@@ -3001,7 +3010,7 @@ const Pe = {
       overflow: "hidden",
       "@apply duration-150 transition-[max-width,margin-left,padding] ease-linear": "",
       // Router-active (e.g. NavLink); label colors — hover is handled on .cn-sidebar-item-wrapper
-      "&-active": u,
+      "&-active": h,
       "&:hover": {
         textDecoration: "none !important"
       },
@@ -3042,7 +3051,7 @@ const Pe = {
             "&[data-active=false] .cn-sidebar-item-content": {
               backgroundColor: "var(--cn-state-hover)"
             },
-            ...Xe,
+            ...Fe,
             ".cn-sidebar-item-action-menu": { opacity: "1" },
             ".cn-sidebar-item-content-action-buttons": { display: "flex !important" },
             ".cn-sidebar-item-grip-handle": { opacity: "1" },
@@ -3052,7 +3061,7 @@ const Pe = {
             ".cn-sidebar-item-content": {
               background: "var(--cn-comp-sidebar-item-selected)"
             },
-            ...u,
+            ...h,
             ".cn-sidebar-item-action-menu": { opacity: "1" },
             ".cn-sidebar-item-active-indicator": {
               backgroundColor: "var(--cn-set-brand-primary-bg)",
@@ -3106,7 +3115,7 @@ const Pe = {
           `,
             gridTemplateColumns: "auto 1fr auto"
           },
-          ...h
+          ...m
         },
         "&-w-r-element": {
           gridTemplateAreas: '"icon title elem"',
@@ -3130,7 +3139,7 @@ const Pe = {
           `,
             gridTemplateColumns: "auto 1fr auto auto"
           },
-          ...h
+          ...m
         },
         /** Reserves space for active bar + grip handle so icon/title stay stable when active or dragging */
         "&-icon": { gridArea: "icon", marginLeft: "var(--cn-layout-sm)" },
@@ -3262,7 +3271,7 @@ const Pe = {
         }
       }
     },
-    "&[data-state=collapsed]": Fe
+    "&[data-state=collapsed]": Ve
   },
   ".cn-sidebar-popover-measurement": {
     position: "fixed",
@@ -3284,11 +3293,11 @@ const Pe = {
     width: "var(--cn-size-64)",
     height: "100vh",
     borderRadius: "0 var(--cn-popover-radius) var(--cn-popover-radius) 0",
-    ...m
+    ...x
   },
   ".cn-popover-content.cn-sidebar-popover": {
     backgroundColor: "var(--cn-bg-2)",
-    ...m,
+    ...x,
     ".cn-sidebar-group-header": {
       padding: "var(--cn-layout-2xs)"
     },
@@ -3308,33 +3317,33 @@ const Pe = {
       backgroundColor: "var(--cn-comp-sidebar-separator)"
     }
   }
-}, Ye = ["sm", "md", "lg", "xs"], Ge = ["2xs", "xs", "sm", "md", "lg", "xl"], Ne = ["xs", "sm", "md", "lg"], Me = ["sm"];
-function Ue() {
+}, Ge = ["sm", "md", "lg", "xs"], Ne = ["2xs", "xs", "sm", "md", "lg", "xl"], Me = ["xs", "sm", "md", "lg"], Ue = ["sm"];
+function Ke() {
   const r = {};
-  return Ye.forEach((e) => {
+  return Ge.forEach((e) => {
     r[`&:where(.cn-skeleton-avatar-${e})`] = {
       width: `var(--cn-avatar-size-${e})`,
       height: `var(--cn-avatar-size-${e})`
     };
   }), r;
 }
-function x(r) {
-  const e = r === "icon" ? Ge : Ne, n = {};
+function y(r) {
+  const e = r === "icon" ? Ne : Me, n = {};
   return e.forEach((o) => {
     const a = {};
     a.width = `var(--cn-${r}-size-${o})`, a["min-width"] = `var(--cn-${r}-size-${o})`, a.height = `var(--cn-${r}-size-${o})`, a["min-height"] = `var(--cn-${r}-size-${o})`, n[`&:where(.cn-skeleton-${r}-${o})`] = a;
   }), n;
 }
-function Ke() {
+function qe() {
   const r = {};
-  return Me.forEach((e) => {
+  return Ue.forEach((e) => {
     r[`&.cn-skeleton-form-item-${e}`] = {
       padding: `var(--cn-input-${e}-py) var(--cn-input-${e}-pr) var(--cn-input-${e}-py) var(--cn-input-${e}-pl)`,
       height: `var(--cn-input-size-${e})`
     };
   }), r;
 }
-const qe = {
+const Je = {
   ".cn-skeleton": {
     "&-base": {
       backgroundImage: "var(--cn-comp-skeleton-bg)",
@@ -3349,13 +3358,13 @@ const qe = {
       "&:where(.cn-skeleton-avatar-rounded)": {
         borderRadius: "var(--cn-avatar-radius-rounded)"
       },
-      ...Ue()
+      ...Ke()
     },
     "&-icon": {
-      ...x("icon")
+      ...y("icon")
     },
     "&-logo": {
-      ...x("logo")
+      ...y("logo")
     },
     "&-typography": {
       "&-wrapper": {
@@ -3385,7 +3394,7 @@ const qe = {
         border: "var(--cn-input-border) solid var(--cn-border-2)",
         borderRadius: "var(--cn-input-radius)",
         backgroundColor: "var(--cn-comp-input-bg)",
-        ...Ke()
+        ...qe()
       }
     },
     "&-list": {
@@ -3406,7 +3415,7 @@ const qe = {
       backgroundPosition: "-200% 0"
     }
   }
-}, Je = {
+}, Qe = {
   ".cn-slider": {
     display: "flex",
     flexDirection: "column",
@@ -3682,7 +3691,7 @@ const qe = {
       }
     }
   }
-}, Qe = {
+}, Ze = {
   ".cn-stacked-list": {
     "@apply w-full bg-cn-1 border rounded-cn-3": "",
     "& > *:first-child > .cn-stacked-list-item": {
@@ -3750,7 +3759,7 @@ const qe = {
       }
     }
   }
-}, Ze = {
+}, er = {
   ".cn-sticky-list-section": {
     "@apply relative": "",
     "&-sentinel": {
@@ -3776,15 +3785,32 @@ const qe = {
     "&-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))"
   }
-}, z = ".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", y = {
-  [z]: {
+}, $ = ".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 = {
+  [$]: {
     opacity: "0.45 !important",
     transition: "opacity 200ms ease-in-out"
   }
-}, f = {
+}, w = {
   boxShadow: "0 4px 6px -1px lch(from var(--cn-shadow-color-3) l c h / 0.05), 0 2px 8px -2px lch(from var(--cn-shadow-color-3) l c h / 0.05)"
-}, er = {
+}, rr = {
   ".cn-studio-card": {
     borderRadius: "var(--cn-rounded-4)",
     border: "1px solid var(--cn-border-2)",
@@ -3829,9 +3855,9 @@ const qe = {
     "&:has(.cn-studio-card-group:hover)": {
       backgroundColor: "lch(from var(--cn-bg-3) l c h / 0.45) !important",
       borderColor: "lch(from var(--cn-border-2) l c h / 0.65) !important",
-      ...f,
+      ...w,
       ">": {
-        ...y
+        ...f
       }
     },
     // Group card variant
@@ -3958,8 +3984,8 @@ const qe = {
         '&:not(:has(> [data-status="executing"]))': {
           borderColor: "lch(from var(--cn-border-2) l c h / 0.65) !important"
         },
-        ...f,
-        ...y
+        ...w,
+        ...f
       },
       // Preserve opacity for the hovered group itself
       "& .cn-studio-card-group:hover": {
@@ -3973,7 +3999,7 @@ const qe = {
           // borderColor: 'lch(from var(--cn-border-2) l c h / 0.65) !important',
         },
         "@apply shadow-cn-3": "",
-        [z]: {
+        [$]: {
           opacity: "1 !important"
         }
       }
@@ -4156,7 +4182,7 @@ const qe = {
       }
     }
   }
-}, rr = {
+}, nr = {
   ".cn-switch-wrapper": {
     display: "flex",
     gap: "var(--cn-spacing-2-half)",
@@ -4245,7 +4271,7 @@ const qe = {
     },
     "@apply truncate": ""
   }
-}, nr = {
+}, v = "linear-gradient(var(--cn-table-pinned-overlay), var(--cn-table-pinned-overlay)), var(--cn-table-pinned-base)", ar = {
   ".cn-table-v2": {
     "@apply w-full": "",
     // Table container
@@ -4319,7 +4345,8 @@ const qe = {
           backgroundColor: "var(--cn-state-hover)"
         },
         "&>td.cn-table-v2-cell-pinned": {
-          background: "linear-gradient(var(--cn-state-hover), var(--cn-state-hover)), var(--cn-bg-1)"
+          "--cn-table-pinned-overlay": "var(--cn-state-hover)",
+          background: v
         },
         "& .cn-row-pin:not(.cn-row-pin-on)": {
           opacity: "1"
@@ -4346,6 +4373,10 @@ const qe = {
       "&:where([data-checked=true]) td": {
         backgroundColor: "var(--cn-state-selected)"
       },
+      "&:where([data-checked=true]) td.cn-table-v2-cell-pinned": {
+        "--cn-table-pinned-overlay": "var(--cn-state-selected)",
+        background: v
+      },
       "&-expanded": {
         backgroundColor: "var(--cn-state-selected)"
       },
@@ -4368,7 +4399,9 @@ const qe = {
     },
     // Head cell
     "&-head": {
-      "@apply text-cn-3 text-left align-middle font-medium overflow-hidden bg-cn-2 transition-colors": "",
+      "--cn-table-pinned-base": "var(--cn-bg-2)",
+      backgroundColor: "var(--cn-table-pinned-base)",
+      "@apply text-cn-3 text-left align-middle font-medium overflow-hidden transition-colors": "",
       "@apply [&:has([role=checkbox])]:py-0 [&:has([role=checkbox])]:!pr-0 [&>[role=checkbox]]:translate-y-[2px]": "",
       "@apply [&:has([role=button])]:py-0 [&:has([role=button])]:!pr-0": "",
       paddingLeft: "var(--cn-table-header-px)",
@@ -4389,6 +4422,10 @@ const qe = {
     "&-head-sortable:hover": {
       backgroundColor: "var(--cn-state-hover)"
     },
+    "&-head-sortable.cn-table-v2-cell-pinned:hover": {
+      "--cn-table-pinned-overlay": "var(--cn-state-hover)",
+      background: v
+    },
     "&-head-divider": {
       position: "absolute",
       top: "0",
@@ -4397,8 +4434,10 @@ const qe = {
     },
     // Data cell
     "&-cell": {
+      "--cn-table-pinned-base": "var(--cn-bg-1)",
+      backgroundColor: "var(--cn-table-pinned-base)",
       position: "relative",
-      "@apply align-middle bg-cn-1 transition-colors": "",
+      "@apply align-middle transition-colors": "",
       "@apply [&:has([role=checkbox])]:py-0 [&:has([role=checkbox])]:!pr-0 [&>[role=checkbox]]:translate-y-[2px]": "",
       "@apply [&:has([role=button])]:py-0 [&:has([role=button])]:!pr-0": "",
       paddingLeft: "var(--cn-table-cell-px)",
@@ -4431,7 +4470,7 @@ const qe = {
   ".cn-row-pin-on": {
     opacity: "1"
   }
-}, ar = {
+}, or = {
   ".cn-tabs-scroll-container": {
     position: "relative",
     width: "100%",
@@ -4656,7 +4695,7 @@ const qe = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, or = [
+}, tr = [
   "gray",
   "blue",
   "brown",
@@ -4672,24 +4711,24 @@ const qe = {
   "red",
   "violet",
   "yellow"
-], tr = {
+], cr = {
   green: "success",
   red: "danger",
   yellow: "warning"
-}, w = (r, e) => ({
+}, k = (r, e) => ({
   backgroundColor: `var(--cn-set-${r}-${e ? "outline-bg-hover" : "secondary-bg-hover"})`,
   borderColor: `var(--cn-set-${r}-${e ? "outline-border" : "secondary-bg-hover"})`
 });
-function k(r) {
+function C(r) {
   const e = {};
-  return or.forEach((n) => {
-    const o = tr[n] ?? n, a = r === "outline", t = {
+  return tr.forEach((n) => {
+    const o = cr[n] ?? n, a = r === "outline", t = {
       color: `var(--cn-set-${o}-${a ? "outline-text" : "secondary-text"})`,
       backgroundColor: `var(--cn-set-${o}-${a ? "outline-bg" : "secondary-bg"})`,
       borderColor: `var(--cn-set-${o}-${a ? "outline-border" : "secondary-bg"})`,
-      "&.cn-tag-hoverable:hover:not(.cn-tag-split *)": w(o, a),
+      "&.cn-tag-hoverable:hover:not(.cn-tag-split *)": k(o, a),
       "&:where(.cn-tag-split-left)": {
-        ".cn-tag-split.cn-tag-split-hoverable:hover &": w(o, a)
+        ".cn-tag-split.cn-tag-split-hoverable:hover &": k(o, a)
       },
       "&:where(.cn-tag-split-right)": a ? {
         borderColor: `var(--cn-set-${o}-secondary-bg)`,
@@ -4710,7 +4749,7 @@ function k(r) {
     e[`&:where(.cn-tag-${o})`] = t;
   }), e;
 }
-const cr = {
+const ir = {
   ".cn-tag": {
     display: "inline-flex",
     alignItems: "center",
@@ -4756,19 +4795,19 @@ const cr = {
       }
     },
     "&:where(.cn-tag-outline)": {
-      ...k("outline")
+      ...C("outline")
     },
     "&:where(.cn-tag-secondary)": {
-      ...k("secondary")
+      ...C("secondary")
     },
     ".cn-tag-text": {
       "@apply truncate leading-normal align-middle inline-block": ""
     }
   }
-}, ir = ["danger", "warning"], dr = ["sm"];
-function lr() {
+}, dr = ["danger", "warning"], lr = ["sm"];
+function sr() {
   const r = {};
-  return ir.forEach((e) => {
+  return dr.forEach((e) => {
     r[`&:where(.cn-textarea-${e}):not(:disabled)`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -4781,13 +4820,13 @@ function lr() {
         boxShadow: `var(--cn-ring-${e})`
       }
     };
-  }), dr.forEach((e) => {
+  }), lr.forEach((e) => {
     r[`&.cn-textarea-${e}`] = {
       padding: `var(--cn-input-${e}-py) var(--cn-input-${e}-pr) var(--cn-input-${e}-py) var(--cn-input-${e}-pl)`
     };
   }), r;
 }
-const sr = {
+const pr = {
   ".cn-textarea": {
     borderRadius: "var(--cn-input-radius)",
     padding: "var(--cn-input-md-py) var(--cn-input-md-pr) var(--cn-input-md-py) var(--cn-input-md-pl)",
@@ -4826,7 +4865,7 @@ const sr = {
     "&-resizable": {
       resize: "vertical"
     },
-    ...lr(),
+    ...sr(),
     "&-label-wrapper": {
       display: "flex",
       alignItems: "center",
@@ -4847,7 +4886,7 @@ const sr = {
       }
     }
   }
-}, pr = {
+}, br = {
   ".cn-time-ago-card": {
     "&-trigger": {
       "@apply leading-snug whitespace-nowrap truncate max-w-full": "",
@@ -4869,7 +4908,7 @@ const sr = {
       "@apply grid grid-cols-[auto_1fr_auto] items-center whitespace-nowrap": ""
     }
   }
-}, br = {
+}, gr = {
   ".cn-toast-wrapper": {
     right: "var(--cn-toast-offset-right)",
     bottom: "var(--cn-toast-offset-bottom)"
@@ -4945,9 +4984,9 @@ const sr = {
       }
     }
   }
-}, gr = ["xs", "sm", "md"], vr = () => {
+}, vr = ["xs", "sm", "md"], ur = () => {
   const r = {};
-  return gr.forEach((e) => {
+  return vr.forEach((e) => {
     r[`&.cn-toggle-${e}.cn-toggle-transparent.cn-toggle-text`] = {
       paddingLeft: `var(--cn-btn-px-${e})`,
       paddingRight: `var(--cn-btn-px-${e})`,
@@ -4956,15 +4995,15 @@ const sr = {
       border: "var(--cn-btn-border) solid transparent"
     };
   }), r;
-}, ur = {
+}, hr = {
   ".cn-toggle": {
     transitionDuration: "100ms",
-    ...vr(),
+    ...ur(),
     '&[data-state="on"]': {
       color: "var(--cn-text-1)"
     }
   }
-}, hr = {
+}, mr = {
   ".cn-toggle-group": {
     gap: "var(--cn-layout-3xs)",
     "@apply flex": "",
@@ -4972,7 +5011,7 @@ const sr = {
       "@apply flex-col": ""
     }
   }
-}, mr = {
+}, xr = {
   ".cn-tooltip": {
     minWidth: "var(--cn-tooltip-min)",
     maxWidth: "var(--cn-tooltip-max)",
@@ -5024,17 +5063,17 @@ const sr = {
       }
     }
   }
-}, C = {
+}, S = {
   "@apply text-cn-2 font-body-normal": "",
   minHeight: "var(--cn-tree-item-height)",
   padding: "var(--cn-tree-item-py) var(--cn-tree-item-pr) var(--cn-tree-item-py)"
-}, xr = {
+}, yr = {
   ".cn-file-tree": {
     "&-base-item": {
-      ...C
+      ...S
     },
     "&-item": {
-      ...C,
+      ...S,
       "@apply relative gap-cn-3xs flex items-center w-[fill-available]": "",
       "&-wrapper": {
         "@apply relative transition-colors": "",
@@ -5074,72 +5113,72 @@ const sr = {
       }
     }
   }
-}, yr = [
-  T,
-  L,
-  X,
-  K,
-  ce,
-  rr,
-  ve,
-  cr,
+}, fr = [
+  W,
+  A,
+  F,
+  q,
+  ie,
+  nr,
   ue,
-  E,
-  Z,
+  ir,
+  he,
+  j,
   ee,
-  we,
-  Ie,
+  re,
+  ke,
+  Te,
+  oe,
+  Q,
+  or,
   ae,
-  J,
-  ar,
-  ne,
   He,
-  Le,
   Ae,
-  ke,
-  mr,
+  De,
+  Ce,
+  xr,
+  gr,
+  Ye,
+  V,
+  pe,
   br,
-  Ve,
-  F,
-  se,
-  pr,
-  _e,
-  ur,
+  Xe,
   hr,
-  q,
-  Te,
-  qe,
-  Qe,
+  mr,
+  J,
+  We,
+  Je,
   Ze,
   er,
-  xr,
+  rr,
+  yr,
+  xe,
   me,
-  he,
-  Be,
-  Oe,
-  Je,
+  Le,
+  _e,
+  Qe,
   // Form styles
-  Pe,
-  ie,
-  re,
-  We,
-  sr,
-  ge,
-  Q,
-  fe,
-  nr
-], fr = {
+  Oe,
+  de,
+  ne,
+  Be,
+  pr,
+  ve,
+  Z,
+  we,
+  ar
+], wr = {
   content: [],
   plugins: [
-    R(({ addComponents: r }) => {
-      r(yr);
+    I(({ addComponents: r }) => {
+      r(fr);
     })
   ]
-}, Cr = {
-  presets: [fr, I],
+}, Sr = {
+  presets: [wr, T],
   content: ["./src/**/*.{ts,tsx}"]
 };
 export {
-  Cr as default
+  Sr as default
 };
 //# sourceMappingURL=tailwind.config.js.map