@khipu/design-system 0.2.0-alpha.81 → 0.2.0-alpha.83

package/dist/beercss/metadata.json

@@ -1,8 +1,8 @@
 {
   "name": "@khipu/design-system/beercss",
-  "version": "0.2.0-alpha.81",
+  "version": "0.2.0-alpha.83",
   "description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
-  "buildDate": "2026-06-30T16:44:58.999Z",
+  "buildDate": "2026-07-01T02:24:52.411Z",
   "includes": {
     "beercss": "4.0.1",
     "khipu-tokens": "latest",
@@ -19,8 +19,8 @@
   },
   "scopeClass": ".kds-theme-root",
   "cdn": {
-    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.81/dist/beercss/khipu-beercss.min.css",
-    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.81/dist/beercss/khipu-beercss.scoped.min.css",
-    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.81/dist/beercss/khipu-beercss.min.js"
+    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.83/dist/beercss/khipu-beercss.min.css",
+    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.83/dist/beercss/khipu-beercss.scoped.min.css",
+    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.83/dist/beercss/khipu-beercss.min.js"
   }
 }

package/dist/index.d.mts

@@ -3753,6 +3753,11 @@ interface ExpandPanelProps {
     id: string;
     className: string;
     hidden: boolean;
+    /**
+     * Ref the hook uses to drive the panel's `max-height` off its own `scrollHeight`, so the
+     * expand animation fits any content length instead of clipping against a fixed CSS cap.
+     */
+    ref: (node: HTMLDivElement | null) => void;
 }
 /**
  * Result of {@link useExpandToggle}.
@@ -3779,9 +3784,9 @@ interface UseExpandToggleResult {
  *
  * It links button and panel via a stable `aria-controls`/`id` pair (`useId`), reflects the
  * open state through `aria-expanded` (which drives the caret rotation in CSS) and toggles the
- * `open` class on the panel (whose `max-height` animation the DS CSS owns). The `hidden`
- * attribute is also set when closed — the DS provides a `.kds-expand-panel[hidden]` rule that
- * keeps the panel `display:block` so the collapse still animates.
+ * `open` class on the panel, sizing its `max-height` to the content's `scrollHeight` so the
+ * animation never clips. The `hidden` attribute is also set when closed — the DS provides a
+ * `.kds-expand-panel[hidden]` rule that keeps the panel `display:block` so the collapse still animates.
  *
  * Supports controlled (`open` + `onOpenChange`) and uncontrolled (`defaultOpen`) usage. Combine
  * with `useStickyInvoiceCollapse({ onCollapseStart: () => setOpen(false) })` to close on scroll.

package/dist/index.d.ts

@@ -3753,6 +3753,11 @@ interface ExpandPanelProps {
     id: string;
     className: string;
     hidden: boolean;
+    /**
+     * Ref the hook uses to drive the panel's `max-height` off its own `scrollHeight`, so the
+     * expand animation fits any content length instead of clipping against a fixed CSS cap.
+     */
+    ref: (node: HTMLDivElement | null) => void;
 }
 /**
  * Result of {@link useExpandToggle}.
@@ -3779,9 +3784,9 @@ interface UseExpandToggleResult {
  *
  * It links button and panel via a stable `aria-controls`/`id` pair (`useId`), reflects the
  * open state through `aria-expanded` (which drives the caret rotation in CSS) and toggles the
- * `open` class on the panel (whose `max-height` animation the DS CSS owns). The `hidden`
- * attribute is also set when closed — the DS provides a `.kds-expand-panel[hidden]` rule that
- * keeps the panel `display:block` so the collapse still animates.
+ * `open` class on the panel, sizing its `max-height` to the content's `scrollHeight` so the
+ * animation never clips. The `hidden` attribute is also set when closed — the DS provides a
+ * `.kds-expand-panel[hidden]` rule that keeps the panel `display:block` so the collapse still animates.
  *
  * Supports controlled (`open` + `onOpenChange`) and uncontrolled (`defaultOpen`) usage. Combine
  * with `useStickyInvoiceCollapse({ onCollapseStart: () => setOpen(false) })` to close on scroll.

package/dist/index.js

@@ -2681,6 +2681,7 @@ function useStickyInvoiceCollapse(options = {}) {
         const panelId = toggle.getAttribute("aria-controls");
         const panel = panelId ? document.getElementById(panelId) : toggle.parentElement?.querySelector("[data-expand-panel], .kds-expand-panel");
         panel?.classList.remove("open");
+        if (panel) panel.style.maxHeight = "";
       });
     };
     const apply = () => {
@@ -2747,6 +2748,15 @@ function useExpandToggle(options = {}) {
   const isControlled = controlledOpen !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react48.useState)(defaultOpen);
   const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const panelRef = (0, import_react48.useRef)(null);
+  const setPanelRef = (0, import_react48.useCallback)((node) => {
+    panelRef.current = node;
+  }, []);
+  (0, import_react48.useLayoutEffect)(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    panel.style.maxHeight = open ? `${panel.scrollHeight}px` : "";
+  }, [open]);
   const setOpen = (0, import_react48.useCallback)(
     (next) => {
       if (!isControlled) {
@@ -2770,9 +2780,10 @@ function useExpandToggle(options = {}) {
     (baseClassName = "kds-expand-panel") => ({
       id: panelId,
       className: open ? `${baseClassName} open` : baseClassName,
-      hidden: !open
+      hidden: !open,
+      ref: setPanelRef
     }),
-    [open, panelId]
+    [open, panelId, setPanelRef]
   );
   return { open, setOpen, toggle, getToggleProps, getPanelProps };
 }

package/dist/index.mjs

@@ -2569,6 +2569,7 @@ function useStickyInvoiceCollapse(options = {}) {
         const panelId = toggle.getAttribute("aria-controls");
         const panel = panelId ? document.getElementById(panelId) : toggle.parentElement?.querySelector("[data-expand-panel], .kds-expand-panel");
         panel?.classList.remove("open");
+        if (panel) panel.style.maxHeight = "";
       });
     };
     const apply = () => {
@@ -2627,7 +2628,7 @@ function useStickyInvoiceCollapse(options = {}) {
 }
 
 // src/components/core/hooks/useExpandToggle.ts
-import { useCallback as useCallback4, useId, useState as useState9 } from "react";
+import { useCallback as useCallback4, useId, useLayoutEffect, useRef as useRef5, useState as useState9 } from "react";
 function useExpandToggle(options = {}) {
   const { defaultOpen = false, open: controlledOpen, onOpenChange, id } = options;
   const generatedId = useId();
@@ -2635,6 +2636,15 @@ function useExpandToggle(options = {}) {
   const isControlled = controlledOpen !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = useState9(defaultOpen);
   const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const panelRef = useRef5(null);
+  const setPanelRef = useCallback4((node) => {
+    panelRef.current = node;
+  }, []);
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    panel.style.maxHeight = open ? `${panel.scrollHeight}px` : "";
+  }, [open]);
   const setOpen = useCallback4(
     (next) => {
       if (!isControlled) {
@@ -2658,9 +2668,10 @@ function useExpandToggle(options = {}) {
     (baseClassName = "kds-expand-panel") => ({
       id: panelId,
       className: open ? `${baseClassName} open` : baseClassName,
-      hidden: !open
+      hidden: !open,
+      ref: setPanelRef
     }),
-    [open, panelId]
+    [open, panelId, setPanelRef]
   );
   return { open, setOpen, toggle, getToggleProps, getPanelProps };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khipu/design-system",
-  "version": "0.2.0-alpha.81",
+  "version": "0.2.0-alpha.83",
   "description": "Khipu Design System - UI components and design tokens for the Khipu payment platform",
   "main": "dist/index.js",
   "module": "dist/index.mjs",