@worknice/whiteboard 0.46.0 → 0.47.1

package/dist/presentation/Card.d.ts

@@ -1,17 +1,30 @@
 import type { JSX, ReactNode } from "react";
 type Props = {
+    /** Main body; when `expander` is true, this region folds open and closed. */
     children: ReactNode;
     header?: ReactNode;
     description?: ReactNode;
     footer?: ReactNode;
     hasShadow?: boolean;
-    actions?: ReactNode;
 } & ({
+    expander?: false;
+    defaultExpanded?: never;
+    /** Optional controls in the header row’s right column. Not allowed when `expander` is true. */
+    actions?: ReactNode;
+} | {
+    /** When true, the whole header row is a disclosure control; `children` is the expandable body. You cannot pass `actions`. */
+    expander: true;
+    defaultExpanded?: boolean;
+    actions?: never;
+}) & ({
+    /** Accessible name for the root element, exposed as `aria-label`. */
     ariaLabel?: string;
+    /** Root element. Defaults to `section`. */
     tagName?: Exclude<keyof JSX.IntrinsicElements, "form">;
 } | {
+    /** Required when using `tagName="form"` so the form has an accessible name. */
     ariaLabel: string;
     tagName: "form";
 });
-declare const Card: ({ ariaLabel, children, header, description, footer, hasShadow, tagName: Tag, actions, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Card: ({ children, header, description, footer, hasShadow, tagName: Tag, ariaLabel, expander, defaultExpanded, actions, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Card;

package/dist/presentation/Card.js

@@ -1,15 +1,51 @@
+"use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__ from "./Card.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
-const Card = ({ ariaLabel, children, header, description, footer, hasShadow = false, tagName: Tag = "section", actions })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Tag, {
+const Card = ({ children, header, description, footer, hasShadow = false, tagName: Tag = "section", ariaLabel, expander, defaultExpanded, actions })=>{
+    const [isExpanded, setIsExpanded] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultExpanded);
+    const contentId = (0, __WEBPACK_EXTERNAL_MODULE_react__.useId)();
+    const expanderButtonId = `${contentId}-expander`;
+    const showHeader = expander || Boolean(header || actions);
+    const expanderNeedsIconLabel = expander && !header && !description;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Tag, {
         "aria-label": ariaLabel,
-        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
-            __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].container,
-            hasShadow ? __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].containerShadow : ""
-        ]),
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].container, hasShadow ? __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].containerShadow : "", expander && (footer ? __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].containerExpanderWithFooter : __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].containerExpander)),
         children: [
-            header || actions ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("header", {
+            showHeader ? expander ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("header", {
+                className: __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].headerExpanderShell,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
+                    "aria-controls": contentId,
+                    "aria-expanded": isExpanded,
+                    "aria-label": expanderNeedsIconLabel ? isExpanded ? "Collapse" : "Expand" : void 0,
+                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].header, __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].headerExpanderTrigger, !isExpanded && __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].headerExpanderDividerHidden),
+                    id: expanderButtonId,
+                    type: "button",
+                    onClick: ()=>setIsExpanded((open)=>!open),
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
+                            spacing: "n2",
+                            children: [
+                                header,
+                                description
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            className: __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].expanderControlCell,
+                            "aria-hidden": true,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].expanderIcon, isExpanded && __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].expanderIconOpen),
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                    symbol: "ChevronDown"
+                                })
+                            })
+                        })
+                    ]
+                })
+            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("header", {
                 className: __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].header,
                 children: [
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
@@ -24,7 +60,24 @@ const Card = ({ ariaLabel, children, header, description, footer, hasShadow = fa
                     })
                 ]
             }) : null,
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            expander ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                "aria-hidden": !isExpanded,
+                className: __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].expandableShell,
+                id: contentId,
+                inert: !isExpanded,
+                role: "region",
+                "aria-label": "Card details",
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].expandableTrack, isExpanded && __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].expandableTrackExpanded),
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].expandableInner,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].content, __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].contentExpander),
+                            children: children
+                        })
+                    })
+                })
+            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 className: __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].content,
                 children: children
             }),
@@ -34,5 +87,6 @@ const Card = ({ ariaLabel, children, header, description, footer, hasShadow = fa
             }) : null
         ]
     });
+};
 const Card_rslib_entry_ = Card;
 export { Card_rslib_entry_ as default };

package/dist/presentation/Card.module.js

@@ -1,8 +1,21 @@
 import "./Card_module.css";
 const Card_module_rslib_entry_ = {
     container: "container-nK60hV",
+    containerExpander: "containerExpander-EZSwGW",
+    containerExpanderWithFooter: "containerExpanderWithFooter-P32jrR",
     header: "header-jj9FGo",
+    headerExpanderDividerHidden: "headerExpanderDividerHidden-L3oAZ3",
+    headerExpanderShell: "headerExpanderShell-qkgDge",
+    headerExpanderTrigger: "headerExpanderTrigger-jD8veQ",
+    expanderControlCell: "expanderControlCell-CPZkT9",
     content: "content-vpnjlq",
+    expandableShell: "expandableShell-RxgAVx",
+    expandableTrack: "expandableTrack-kqIJy_",
+    expandableTrackExpanded: "expandableTrackExpanded-wO7SVT",
+    expandableInner: "expandableInner-mhxOdz",
+    expanderIcon: "expanderIcon-sNZWda",
+    expanderIconOpen: "expanderIconOpen-OSIda0",
+    contentExpander: "contentExpander-cNoAvd",
     footer: "footer-sVxS5P",
     containerShadow: "containerShadow-LiuIvB"
 };

package/dist/presentation/Card.stories.d.ts

@@ -0,0 +1,90 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ children, header, description, footer, hasShadow, tagName: Tag, ariaLabel, expander, defaultExpanded, actions, }: {
+        children: import("react").ReactNode;
+        header?: import("react").ReactNode;
+        description?: import("react").ReactNode;
+        footer?: import("react").ReactNode;
+        hasShadow?: boolean;
+    } & (({
+        expander?: false;
+        defaultExpanded?: never;
+        actions?: import("react").ReactNode;
+    } | {
+        expander: true;
+        defaultExpanded?: boolean;
+        actions?: never;
+    }) & ({
+        ariaLabel?: string;
+        tagName?: Exclude<keyof import("react").JSX.IntrinsicElements, "form">;
+    } | {
+        ariaLabel: string;
+        tagName: "form";
+    }))) => import("react/jsx-runtime").JSX.Element;
+    subcomponents: {
+        CardContent: ({ children, spacing }: {
+            children: import("react").ReactNode;
+            spacing?: "n5" | "n4" | "n3" | "n2" | "n1" | "00" | "p1" | "p2" | "p3" | "p4" | "p5";
+        }) => import("react/jsx-runtime").JSX.Element;
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+        hasShadow: false;
+        expander: false;
+    };
+    argTypes: {
+        children: {
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        header: {
+            control: false;
+        };
+        description: {
+            control: false;
+        };
+        footer: {
+            control: false;
+        };
+        actions: {
+            control: false;
+        };
+        expander: {
+            description: string;
+        };
+        defaultExpanded: {
+            if: {
+                arg: string;
+                truthy: true;
+            };
+            description: string;
+            defaultValue: boolean;
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FullFeatured: Story;
+/** Content sits in the card’s main region with default `CardContent` padding. */
+export declare const BodyOnly: Story;
+/** Header uses the card header row; body is unchanged. */
+export declare const WithHeader: Story;
+export declare const WithHeaderAndDescription: Story;
+export declare const WithHeaderAndActions: Story;
+export declare const WithFooter: Story;
+/** `hasShadow` adds the elevated shadow style. */
+export declare const WithShadow: Story;
+/** The full header row toggles expand/collapse; `actions` is not allowed. */
+export declare const Expander: Story;
+export declare const ExpanderWithFooter: Story;
+export declare const ExpanderInitiallyOpen: Story;
+/** When using `tagName="form"`, pass `ariaLabel` to make the form accessible. */
+export declare const AsForm: Story;
+export declare const WithoutCardContent: Story;

package/dist/presentation/Card.stories.js

@@ -0,0 +1,185 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"],
+    subcomponents: {
+        CardContent: __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"]
+    },
+    args: {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                children: "Content wrapped in CardContent component."
+            })
+        }),
+        hasShadow: false,
+        expander: false
+    },
+    argTypes: {
+        children: {
+            control: false,
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        },
+        header: {
+            control: false
+        },
+        description: {
+            control: false
+        },
+        footer: {
+            control: false
+        },
+        actions: {
+            control: false
+        },
+        expander: {
+            description: "When true, the full header row toggles expand/collapse (not only an icon); do not pass `actions`."
+        },
+        defaultExpanded: {
+            if: {
+                arg: "expander",
+                truthy: true
+            },
+            description: "Only applies when `expander` is true.",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+const Card_stories_rslib_entry_ = meta;
+const FullFeatured = {
+    args: {
+        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "h5",
+            children: "Title"
+        }),
+        description: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "small",
+            children: "Description"
+        }),
+        actions: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+            id: "card-story-full-action",
+            onClick: ()=>{},
+            type: "secondary",
+            children: "Action"
+        }),
+        footer: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "small",
+            tone: "muted",
+            children: "Footer"
+        })
+    }
+};
+const BodyOnly = {
+    args: {}
+};
+const WithHeader = {
+    args: {
+        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "h5",
+            children: "Title"
+        })
+    }
+};
+const WithHeaderAndDescription = {
+    args: {
+        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "h5",
+            children: "Title"
+        }),
+        description: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "small",
+            tone: "muted",
+            children: "Optional description under the title, still in the header band."
+        })
+    }
+};
+const WithHeaderAndActions = {
+    args: {
+        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "h5",
+            children: "Title"
+        }),
+        actions: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+            id: "card-story-action",
+            onClick: ()=>{},
+            type: "secondary",
+            children: "Action"
+        })
+    }
+};
+const WithFooter = {
+    args: {
+        footer: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "small",
+            children: "Footer slot"
+        })
+    }
+};
+const WithShadow = {
+    args: {
+        hasShadow: true,
+        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "h5",
+            children: "Shadow"
+        })
+    }
+};
+const Expander = {
+    args: {
+        expander: true,
+        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "h5",
+            children: "Expandable"
+        })
+    }
+};
+const ExpanderWithFooter = {
+    args: {
+        expander: true,
+        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "h5",
+            children: "Expandable"
+        }),
+        footer: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "small",
+            children: "Footer"
+        })
+    }
+};
+const ExpanderInitiallyOpen = {
+    args: {
+        expander: true,
+        defaultExpanded: true,
+        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "h5",
+            children: "Starts expanded"
+        })
+    }
+};
+const AsForm = {
+    args: {
+        ariaLabel: "Example form",
+        tagName: "form",
+        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            font: "h5",
+            children: "Form card"
+        })
+    }
+};
+const WithoutCardContent = {
+    args: {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            children: "Body only without CardContent: content sits in the card’s main region without `CardContent` padding."
+        })
+    }
+};
+export { AsForm, BodyOnly, Expander, ExpanderInitiallyOpen, ExpanderWithFooter, FullFeatured, WithFooter, WithHeader, WithHeaderAndActions, WithHeaderAndDescription, WithShadow, WithoutCardContent, Card_stories_rslib_entry_ as default };

package/dist/presentation/CardContent.stories.d.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ children, spacing }: {
+        children: import("react").ReactNode;
+        spacing?: "n5" | "n4" | "n3" | "n2" | "n1" | "00" | "p1" | "p2" | "p3" | "p4" | "p5";
+    }) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        children: null;
+    };
+    argTypes: {
+        children: {
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Default `spacing` matches design token `00` (card body padding). */
+export declare const DefaultSpacing: Story;
+export declare const SpacingN2: Story;
+export declare const SpacingP2: Story;
+/** Without a Card wrapper, should not be used this way */
+export declare const Standalone: Story;

package/dist/presentation/CardContent.stories.js

@@ -0,0 +1,78 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
+const insideCardDecorator = [
+    (Story)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
+            header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                font: "h5",
+                children: "Card"
+            }),
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Story, {})
+        })
+];
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"],
+    args: {
+        children: null
+    },
+    argTypes: {
+        children: {
+            control: false,
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+const CardContent_stories_rslib_entry_ = meta;
+const DefaultSpacing = {
+    decorators: insideCardDecorator,
+    args: {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            children: "Default CardContent spacing (00)."
+        })
+    }
+};
+const SpacingN2 = {
+    decorators: insideCardDecorator,
+    args: {
+        spacing: "n2",
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            children: "Tighter padding (n2)."
+        })
+    }
+};
+const SpacingP2 = {
+    decorators: insideCardDecorator,
+    args: {
+        spacing: "p2",
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            children: "Roomier padding (p2)."
+        })
+    }
+};
+const Standalone = {
+    decorators: [
+        (Story)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                style: {
+                    border: "var(--size-n5) dashed var(--color-grey-t08)",
+                    borderRadius: "var(--size-n2)",
+                    maxWidth: "28rem"
+                },
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Story, {})
+            })
+    ],
+    args: {
+        spacing: "p2",
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+            children: "CardContent only, without a Card wrapper."
+        })
+    }
+};
+export { DefaultSpacing, SpacingN2, SpacingP2, Standalone, CardContent_stories_rslib_entry_ as default };

package/dist/presentation/Card_module.css

@@ -6,6 +6,15 @@
   grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
   max-height: 100%;
   display: grid;
+  overflow: hidden;
+}
+
+.containerExpander-EZSwGW {
+  grid-template-rows: minmax(0, auto) minmax(0, auto);
+}
+
+.containerExpanderWithFooter-P32jrR {
+  grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, auto);
 }
 
 .header-jj9FGo {
@@ -14,13 +23,96 @@
   gap: var(--size-00);
   grid-template-columns: 1fr auto;
   align-items: center;
+  transition: border-bottom-color .2s cubic-bezier(.4, 0, .2, 1);
   display: grid;
 }
 
+.headerExpanderDividerHidden-L3oAZ3 {
+  border-bottom-color: #0000;
+}
+
+.headerExpanderShell-qkgDge {
+  border: none;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.headerExpanderTrigger-jD8veQ {
+  appearance: none;
+  width: 100%;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-align: start;
+  box-sizing: border-box;
+  border-top-left-radius: var(--size-n2);
+  border-top-right-radius: var(--size-n2);
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  margin: 0;
+  transition: border-bottom-color .2s cubic-bezier(.4, 0, .2, 1), background-color .15s;
+}
+
+@media (hover: hover) {
+  .headerExpanderTrigger-jD8veQ:hover {
+    background-color: var(--color-grey-t10);
+  }
+}
+
+.headerExpanderTrigger-jD8veQ:focus {
+  outline: none;
+}
+
+.headerExpanderTrigger-jD8veQ:focus-visible {
+  box-shadow: 0px 0px 0px 2px var(--color-white), 0px 0px 0px 4px var(--color-purple-000);
+}
+
+.header-jj9FGo > :first-child {
+  min-width: 0;
+}
+
+.expanderControlCell-CPZkT9 {
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
 .content-vpnjlq {
   overflow-y: auto;
 }
 
+.expandableShell-RxgAVx {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.expandableTrack-kqIJy_ {
+  grid-template-rows: 0fr;
+  transition: grid-template-rows .2s cubic-bezier(.4, 0, .2, 1);
+  display: grid;
+}
+
+.expandableTrackExpanded-wO7SVT {
+  grid-template-rows: 1fr;
+}
+
+.expandableInner-mhxOdz {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.expanderIcon-sNZWda {
+  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
+  display: flex;
+}
+
+.expanderIconOpen-OSIda0 {
+  transform: rotate(-180deg);
+}
+
 .content-vpnjlq:first-child {
   border-radius: var(--size-n2) var(--size-n2) 0 0;
 }
@@ -33,6 +125,10 @@
   border-radius: var(--size-n2);
 }
 
+.content-vpnjlq:only-child.contentExpander-cNoAvd {
+  border-radius: 0;
+}
+
 .footer-sVxS5P {
   padding: var(--size-00);
   border-top: var(--size-n5) solid var(--color-grey-t08);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.46.0",
+  "version": "0.47.1",
   "license": "MIT",
   "private": false,
   "files": [
@@ -39,7 +39,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^4.1.13",
-    "@worknice/utils": "^0.29.0"
+    "@worknice/utils": "^0.30.1"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",