@aragon/gov-ui-kit 1.21.0 → 1.22.0

package/dist/types/src/core/components/cards/cardCollapsible/cardCollapsible.d.ts

@@ -1,8 +1,14 @@
 import { type ICollapsibleProps } from '../../collapsible';
-export interface ICardCollapsibleProps extends Omit<ICollapsibleProps, 'buttonVariant' | 'className'> {
+export interface ICardCollapsibleProps extends Omit<ICollapsibleProps, 'buttonVariant' | 'className' | 'showOverlay' | 'collapsedLines'> {
     /**
      * Additional class names to apply to the card.
      */
     className?: string;
+    /**
+     * The collapsed height in pixels. CardCollapsible always uses overlay mode (showOverlay=true),
+     * which requires pixel-based height measurement instead of line-based counting.
+     * @default 180
+     */
+    collapsedPixels?: number;
 }
 export declare const CardCollapsible: React.FC<ICardCollapsibleProps>;

package/dist/types/src/core/components/collapsible/collapsibleUtils.d.ts

@@ -46,3 +46,50 @@ export interface OverlayHeightParams {
     fallbackLineHeight?: number;
 }
 export declare const computeOverlayHeightPx: (params: OverlayHeightParams) => number;
+/**
+ * Result of element height measurements for collapsible calculations.
+ */
+export interface MeasureHeightsResult {
+    /**
+     * The current rendered height of the element in the DOM (with clamp/max-height applied).
+     */
+    clampedClientHeight: number;
+    /**
+     * The full content height with no clamping and no max-height applied.
+     */
+    fullHeight: number;
+}
+/**
+ * Measures the current (clamped) clientHeight and the full content height by
+ * creating a hidden clone without clamping and without max-height.
+ *
+ * This allows overflow detection and overlay sizing for mixed-content
+ * rich text (e.g. combinations of h1, ul/li, p, code) where a single
+ * line-height is not representative.
+ */
+export declare const measureElementHeights: (element: HTMLElement | null) => MeasureHeightsResult;
+export interface OverlayRatioParams {
+    /** Number of lines visible when collapsed (requested). */
+    collapsedLines: number;
+    /** Number of lines used for overlay sizing (requested). */
+    overlayLines: number;
+    /** Actual rendered height of the collapsed block (in pixels). */
+    clampedClientHeight: number;
+    /** Minimum visible pixels of content above overlay to avoid full cover. */
+    minVisiblePx?: number;
+    /** Minimum overlay thickness in pixels (after clamping). */
+    minOverlayPx?: number;
+    /** Maximum overlay thickness in pixels (after clamping). */
+    maxOverlayPx?: number;
+}
+/**
+ * Computes overlay height as a ratio of the actual visible collapsed height
+ * instead of relying on a single line-height. This makes the overlay robust
+ * for mixed content where each line may have different heights.
+ *
+ * Constraints:
+ * - overlayLines is clamped to [0, collapsedLines - 1]
+ * - overlay cannot cover all visible content; we keep at least `minVisiblePx`
+ * - final result is clamped within [minOverlayPx, maxOverlayPx]
+ */
+export declare const computeOverlayHeightByRatio: (params: OverlayRatioParams) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aragon/gov-ui-kit",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Implementation of the Aragon's Governance UI Kit",
   "main": "dist/index.es.js",
   "types": "dist/types/src/index.d.ts",