@keboola/design 5.0.0 → 5.1.0

package/dist/index.cjs

@@ -15450,7 +15450,7 @@ var ANIMATION_CLASS_NAME = cn(
   "tw-relative",
   "tw-overflow-hidden",
   "tw-pointer-events-none",
-  "tw-bg-muted",
+  "tw-bg-skeleton",
   // before
   'before:tw-content-[""]',
   "before:tw-opacity-100",
@@ -20942,13 +20942,29 @@ var BreadcrumbDropdownGroup = ({
     [parent, labelMatched, registerChild]
   );
   const isExpanded = !collapsible || expanded || filtering;
+  const isEmpty = React26.Children.count(children) === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn("tw-flex tw-flex-col", className),
       style: visible ? void 0 : { display: "none" },
       children: [
-        collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(
+        collapsible && isEmpty ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            "aria-disabled": true,
+            className: cn(
+              headerClass,
+              "tw-text-muted-foreground",
+              // Fade just the leading chevron lighter than the label text.
+              "[&>svg:first-child]:tw-opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronRight, {}),
+              label
+            ]
+          }
+        ) : collapsible && !isEmpty ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -20961,7 +20977,31 @@ var BreadcrumbDropdownGroup = ({
             ]
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: headerClass, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbDropdownContext, { value: childContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbDropdownContext, { value: childContext, children: collapsible && !isEmpty ? (
+          // Animated expand / collapse via a CSS grid-rows transition (0fr ↔ 1fr). The children stay
+          // mounted while collapsed so the filter registry keeps receiving their visibility; `inert`
+          // + `aria-hidden` take the collapsed content out of the a11y tree and tab order. An active
+          // filter query force-expands (`isExpanded` includes `filtering`).
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "tw-grid tw-transition-[grid-template-rows] tw-duration-200 tw-ease-out",
+                "motion-reduce:tw-transition-none",
+                isExpanded ? "tw-grid-rows-[1fr]" : "tw-grid-rows-[0fr]"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "tw-overflow-hidden",
+                  inert: !isExpanded,
+                  "aria-hidden": isExpanded ? void 0 : true,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-pl-6", children })
+                }
+              )
+            }
+          )
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "tw-flex tw-flex-col tw-pl-6",
@@ -21087,11 +21127,12 @@ var chevronButtonClass = cn(
   "tw-flex",
   "tw-items-center",
   "tw-justify-center",
-  "tw-rounded-sm",
+  "tw-rounded-md",
   "tw-border-none",
   "tw-bg-transparent",
   "tw-cursor-pointer",
-  "tw-p-0.5",
+  // Generous 24px hit target (was ~18px) — colour-only hover, no background box.
+  "tw-size-6",
   "tw-text-muted-foreground",
   "tw-transition-colors",
   "hover:tw-text-foreground",