@keboola/design 3.2.3 → 4.0.0

package/dist/markdown-editor.d.cts

@@ -57,9 +57,10 @@ type MarkdownEditorProps = {
      */
     singleLine?: boolean;
     /**
-     * Clamps content to ~2 lines with a bottom fade in the display (not-focused) state;
-     * focus expands the editor to full height (no clamp). Per the inline-editable-text
-     * pattern spec for description-style slots — fade replaces truncation/ellipsis.
+     * Clamps content to 2 lines (truncating with an ellipsis) in the display (not-focused)
+     * state; focus expands the editor to full height (no clamp). `line-clamp` is self-gating,
+     * so short/empty content renders fully with no truncation. Per the inline-editable-text
+     * pattern spec for description-style slots.
      */
     clampDisplay?: boolean;
     /**

package/dist/markdown-editor.d.ts

@@ -57,9 +57,10 @@ type MarkdownEditorProps = {
      */
     singleLine?: boolean;
     /**
-     * Clamps content to ~2 lines with a bottom fade in the display (not-focused) state;
-     * focus expands the editor to full height (no clamp). Per the inline-editable-text
-     * pattern spec for description-style slots — fade replaces truncation/ellipsis.
+     * Clamps content to 2 lines (truncating with an ellipsis) in the display (not-focused)
+     * state; focus expands the editor to full height (no clamp). `line-clamp` is self-gating,
+     * so short/empty content renders fully with no truncation. Per the inline-editable-text
+     * pattern spec for description-style slots.
      */
     clampDisplay?: boolean;
     /**

package/dist/markdown-editor.js

@@ -4483,10 +4483,10 @@ var MarkdownEditor = ({
         // adjacent-sibling selector for paragraph spacing so single-paragraph blocks (titles,
         // short descriptions) stay tight while multi-paragraph blocks still breathe.
         compact && "[&_p]:tw-m-0 [&_p+p]:tw-mt-2",
-        // Display-state clamp: 2 lines + bottom fade. Drops in focus-within so editing
-        // expands to full height. Fade replaces ellipsis per the pattern spec — the
-        // mask gradient overlays line-clamp's default ellipsis so it's invisible.
-        clampDisplay && "[&:not(:focus-within)]:tw-line-clamp-2 [&:not(:focus-within)]:[mask-image:linear-gradient(to_bottom,black_50%,transparent)]",
+        // Display-state clamp: 2 lines, dropped in focus-within so editing expands to full
+        // height. line-clamp is self-gating (no effect below 3 lines), so short/empty content
+        // renders clean; a CSS fade can't gate on overflow without JS, so it's omitted.
+        clampDisplay && "[&:not(:focus-within)]:tw-line-clamp-2",
         className
       ),
       onBlur: handleBlur,