@khipu/design-system 0.3.5-alpha.33 → 0.3.5-alpha.34

package/dist/beercss/metadata.json

@@ -1,8 +1,8 @@
 {
   "name": "@khipu/design-system/beercss",
-  "version": "0.3.5-alpha.33",
+  "version": "0.3.5-alpha.34",
   "description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
-  "buildDate": "2026-10-08T13:28:16.847Z",
+  "buildDate": "2026-10-09T13:21:43.907Z",
   "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.3.5-alpha.33/dist/beercss/khipu-beercss.min.css",
-    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.33/dist/beercss/khipu-beercss.scoped.min.css",
-    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.33/dist/beercss/khipu-beercss.min.js"
+    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.34/dist/beercss/khipu-beercss.min.css",
+    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.34/dist/beercss/khipu-beercss.scoped.min.css",
+    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.34/dist/beercss/khipu-beercss.min.js"
   }
 }

package/dist/index.d.mts

@@ -29,7 +29,7 @@ interface KdsThemeProviderProps {
  */
 declare function KdsThemeProvider({ primaryColor, mode, children }: KdsThemeProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const KDS_VERSION = "0.3.5-alpha.33";
+declare const KDS_VERSION = "0.3.5-alpha.34";
 
 /**
  * Color tokens organized by theme mode
@@ -3982,7 +3982,6 @@ interface ExpandToggleProps {
 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.
@@ -4003,7 +4002,7 @@ interface UseExpandToggleResult {
     getToggleProps: () => ExpandToggleProps;
     /**
      * Prop-getter for the `.kds-expand-panel` div — wires `id`, the `open` class and the
-     * `hidden` attribute. Pass the base class (defaults to `kds-expand-panel`).
+     * content-sizing ref. Pass the base class (defaults to `kds-expand-panel`).
      */
     getPanelProps: (baseClassName?: string) => ExpandPanelProps;
 }
@@ -4015,8 +4014,10 @@ 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, 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.
+ * animation never clips. The closed panel is NOT marked `hidden`: the global
+ * `[hidden] { display: none !important }` would kill the transition. Instead the DS CSS hides
+ * the collapsed panel with a delayed `visibility: hidden`, which also keeps its content out of
+ * the accessibility tree and the tab order.
  *
  * Supports controlled (`open` + `onOpenChange`) and uncontrolled (`defaultOpen`) usage. Combine
  * with `useStickyInvoiceCollapse({ onCollapseStart: () => setOpen(false) })` to close on scroll.

package/dist/index.d.ts

@@ -29,7 +29,7 @@ interface KdsThemeProviderProps {
  */
 declare function KdsThemeProvider({ primaryColor, mode, children }: KdsThemeProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const KDS_VERSION = "0.3.5-alpha.33";
+declare const KDS_VERSION = "0.3.5-alpha.34";
 
 /**
  * Color tokens organized by theme mode
@@ -3982,7 +3982,6 @@ interface ExpandToggleProps {
 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.
@@ -4003,7 +4002,7 @@ interface UseExpandToggleResult {
     getToggleProps: () => ExpandToggleProps;
     /**
      * Prop-getter for the `.kds-expand-panel` div — wires `id`, the `open` class and the
-     * `hidden` attribute. Pass the base class (defaults to `kds-expand-panel`).
+     * content-sizing ref. Pass the base class (defaults to `kds-expand-panel`).
      */
     getPanelProps: (baseClassName?: string) => ExpandPanelProps;
 }
@@ -4015,8 +4014,10 @@ 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, 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.
+ * animation never clips. The closed panel is NOT marked `hidden`: the global
+ * `[hidden] { display: none !important }` would kill the transition. Instead the DS CSS hides
+ * the collapsed panel with a delayed `visibility: hidden`, which also keeps its content out of
+ * the accessibility tree and the tab order.
  *
  * Supports controlled (`open` + `onOpenChange`) and uncontrolled (`defaultOpen`) usage. Combine
  * with `useStickyInvoiceCollapse({ onCollapseStart: () => setOpen(false) })` to close on scroll.

package/dist/index.js

@@ -201,7 +201,7 @@ function formatTime(iso) {
 }
 
 // src/version.ts
-var KDS_VERSION = "0.3.5-alpha.33";
+var KDS_VERSION = "0.3.5-alpha.34";
 
 // src/theme/KdsThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -2285,7 +2285,7 @@ var KdsExpandPanel = (0, import_react28.forwardRef)(
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: (0, import_clsx.clsx)("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: (0, import_clsx.clsx)("kds-expand-panel", expanded && "open"), children })
     ] });
   }
 );
@@ -3143,7 +3143,6 @@ function useExpandToggle(options = {}) {
     (baseClassName = "kds-expand-panel") => ({
       id: panelId,
       className: open ? `${baseClassName} open` : baseClassName,
-      hidden: !open,
       ref: setPanelRef
     }),
     [open, panelId, setPanelRef]

package/dist/index.mjs

@@ -70,7 +70,7 @@ function formatTime(iso) {
 }
 
 // src/version.ts
-var KDS_VERSION = "0.3.5-alpha.33";
+var KDS_VERSION = "0.3.5-alpha.34";
 
 // src/theme/KdsThemeProvider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -2154,7 +2154,7 @@ var KdsExpandPanel = forwardRef25(
           ]
         }
       ),
-      /* @__PURE__ */ jsx27("div", { className: clsx("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
+      /* @__PURE__ */ jsx27("div", { className: clsx("kds-expand-panel", expanded && "open"), children })
     ] });
   }
 );
@@ -3012,7 +3012,6 @@ function useExpandToggle(options = {}) {
     (baseClassName = "kds-expand-panel") => ({
       id: panelId,
       className: open ? `${baseClassName} open` : baseClassName,
-      hidden: !open,
       ref: setPanelRef
     }),
     [open, panelId, setPanelRef]

package/package.json

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